casper-network / casper-blockexplorer-frontend Goto Github PK
View Code? Open in Web Editor NEWLicense: Apache License 2.0
License: Apache License 2.0
Create paginated table component that we can use in following views:
Probably we're relying on ports somewhere in the code which should be changed.
we should display into about validators in the new gadget that will show both peers & validators :)
So let's start in BE middleware but please keep in mind that we might want / need to treat eventstore as separate service later.
As a base functionalities it should be able to:
Currently some of the code was removed because of the switch from RPC to REST query.
We want to have this functionality back and show to user adequate unified errors on UI.
Do an analysis of the BlockExplorer front end and identify components that can be reused. Then create reusable components and restructure the block explorer to use these components.
With V1.0, we allowed the logo and brand to be configurable. Enable this ability in the updated layout as well.
This is a continuation of this work: https://app.zenhub.com/workspaces/engineering-l2-62618a6423afe100128e4656/issues/gh/casperlabs/product/353
5/6 of the cypress tests have been skipped by using it.skip and will need a deeper look into why they are failing within Docker but not locally
A few of these tests rely on cypress waiting for a response of a request. Which normally this would be fine, in our case all of our requests using the SDK look the same and it's difficult to determine if the response cypress catches is for the desired request. In addition, the getBlocks api method will need to be refactored (sends one request per block)
Will need to fix MIDDLEWARE_URL is hardcoded for test environments
With V1.0, we allowed the logo and brand to be configurable. Enable this ability in the updated layout as well.
Add new Header and Form styles for block explorer mobile views.
Currently waiting for design updates from Megan.
So in this task, please prepare an API that will be used to query blocks from the frontend.
In the middleware:
GET /api/blocks?numPerPage=10
he will receive
{
blocks: [...],
numOfPages: 10929,
numPerPage: 10,
lastUpdated: timestamp
}
in the middleware it will be easy to calculcate the number of pages.
The stored blocks info in cache should be lazy - I mean it will be fetched only when the first user will ask for it. Then we will rely on cache (as its historical data we don't need to invalidate it).
Then please switch frontend to use this methods and refresh every 30s.
In future, its possible that SSE sidecar will have pagination functionality too so we will be able to remove this part. But for now please implement this so frontend won't have problems with rerendering etc.
Expand hash onClick
for Mobile and Desktop views:
https://www.figma.com/file/GS7thHuVvP72ZrnBkWrVAp/block-explorer?node-id=82%3A244&t=HJIemTQrQSXRDN8V-4
add “up time” and harvest block info. ryo? requires SDK work
Added by Jan:
Create an endpoint in middleware GET /peers
that will return all peers with their current uptime
and last_added_block_info
.
Please add PEERS_UPDATE_INTERVAL
env variable that middleware will use to refetch the data based on timestamp
from REST endpoint eg
http://65.21.229.213:8888/status
last_added_block_info":{"hash":"850d1e93821f21bb0cde08c219e4dbe9da99df95c2a254684bafb41c5ec45d8d","timestamp":"2022-12-13T12:43:32.736Z","era_id":7313,"height":1322303,"state_root_hash":"dadc6da8ebfe5bc78645ba153e3dfcbc1b49deee0e1632e566865ae147f32a17","creator":"0145fb72c75e1b459839555d70356a5e6172e706efa204d86c86050e2f7878960f"}
The data for now can be stored in memory in the middleware layer.
Redesign home screen based on discussed revisions
Related to issue 98
So when we click to sort by height
there is a short (or longer, depending on the RPC performance) moment when it changes the order of already downloaded blocks and then after few seconds it shows correctly sorted data (so starting from block 1).
The issue is visible on the video. I know this happens because of the fetch time, but we should show some spinner instead of changing the order of the visible blocks.
allow columns to be sorted.
Edited by Jan:
sorted only by:
This is code quality improvement. As we don't want redundant jest.mock
on frontend like in src/components/layout/Header/Partials/SearchSelect/SearchSelect.test.tsx
we will need to create some kind of factory for them (TBD).
So we will need to use middleware GET /peers
endpoint and display the appropriate data in the Peers view
autorefresh to stop after some time (to stop pinging the server) stretch - make refresh time configurable RYO, 3
That will be used for event store.
deploys this information is not easily knowable. simply hide it for now until we find a better solution to getting the data, David 3
Identify wallet for integration
Like in ETH world, it doesn’t require using wallet - just put your address into the text input and request some tokens. We should also limit the number of requested tokens per address.
requires several work items so making this an epic.
THis is dependent on having a wallet to integrate with. Need to discuss with Ed/Karan
So every XX interval the table will be refreshed.
To make it smart, we can start counting TIME_INTERVAL
from lastBlockAdded timestamp (this will prevent refreshing 'in the middle' of the emitted block).
As part of this task, please do the same with TIME_INTERVAL
with the blocks table.
For now let's wait with this ticket.
add a setting to bypass the splash screen on startup for frequent users (allow them to go directly to search if they want), david, 5
There is one thing that can be improved - now we have a fixed refresh interval, but it should be calculated based on getStatus()
-> last_added_block_info.timestamp
.
So if the timestamp is eg. 2023-01-05T13:47:41.952Z
we should refresh our data in
2023-01-05T13:47:41.952Z + PEERS_UPDATE_INTERVAL
, so when it's set to eg 40s we know when revalidate the cache. The timestamp should be taken into consideration after every refresh.
Please do the same that was described above, but for blocks
. So treat timestamp
as a source of truth and calculate when approx. new block will be emitted.
Combine validators/Peers OR display ‘total peers’ and ‘validators’. This is because not all peers are validators but the user may want to know both counts.
The list of components that needs to be tested will be provided later.
Move the colors and fonts to be configurable options. The default will be the current settings. Add these configuration settings to the documentation for the BlockExplorer.
So when you refresh or send somebody the link to /blocks
you get 404 from nginx.
Using react-i18n
And then middleware repo will be made public.
This epic contains design, FE, MW and integration with Sidecar endpoint tickets needed to make this work.
We would like to achieve parity with https://cspr.live/ at a minimum so that our private chain clients can have the same information that is available for mainnet.
initial implementation would contain:
amountToShow
blockHeightOrdering
looking for a list of deploys, rather than depending on the deploy hash for display
During the demo with Ed and Karan, they had this feedback:
SRE created this handy tool for viewing the state of the network. The information is relevant to any node operator, thus we would like to see it integrated into the block explorer somehow. https://cnm.casperlabs.io/network/casper/summary
As a first step, we will meet with Joe/SRE to understand more clearly what the information is and what is useful to operators and engineers.
Create filters that can filter events based on certain deploys/own deploys using block hash, deploy hash etc.
Step
Account Hash
Transactions
Empty blocks
Work with @rob-casper on this SRE wrote a handy tool called CNM for their own telemetry but it turned out to be very useful to engineers. As such, the developers found it critical to getting mainnet and subsequent releases out the door and it is likely that other chain operators will also find it useful. We should add it to the Block Explorer.
During Grooming - add the steps it would take to integrate CNM into the current block explorer framework, including e-e testing and CI/CD. May want to make it an epic.....
There will be a need for design and middleware updates
Engineering estimate:
see details on slack here: https://casper-labs-team.slack.com/archives/C02RQEL3CNN/p1675201827366049?thread_ts=1675088291.846589&cid=C02RQEL3CNN
The goal with these updates is for them to be completed in a way that makes them adjustable so the consumers can size the logo and fonts as they desire with no engineering effort.
Allow spacing to be configurable and document how to use the settings.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.