casper-network / casper-blockexplorer-frontend Goto Github PK

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.

Probably we're relying on ports somewhere in the code which should be changed.

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

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.

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.

initial implementation would contain:

• amountToShow
• blockHeightOrdering

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.

Add new Header and Form styles for block explorer mobile views.
Currently waiting for design updates from Megan.

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.

1. Can the Chengdu Chain logo be twice as big? To make it as on the landing page? https://chengduchain.com/
2. Is it possible to reduce easily font size of the note in the footer (to ~1,5x smaller)?

Engineering estimate:

1. We can change the size of the logo however it is not configured the same way colors/theme is. We would have to go into the styles and change the specified sizing.
2. Similar to the sizing situation, we can change the font size by changing the specified value in the styles.

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.

Create paginated table component that we can use in following views:

• Blocks
• 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:

• store past deploys
• search through past deploys
• also act as a cache for most recent data (peers and validators)

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

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

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).

The list of components that needs to be tested will be provided later.

So in this task, please prepare an API that will be used to query blocks from the frontend.

In the middleware:

• it should cache the responses from SSE Sidecar or RPC and store the blocks history in node-cache.
• it should paginate the responses so when user will call the endpoint

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.

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.

So we will need to use middleware GET /peers endpoint and display the appropriate data in the Peers view

Expand hash onClick for Mobile and Desktop views:
https://www.figma.com/file/GS7thHuVvP72ZrnBkWrVAp/block-explorer?node-id=82%3A244&t=HJIemTQrQSXRDN8V-4

That will be used for event store.

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.

During the demo with Ed and Karan, they had this feedback:

• Change node version to protocol version, DAVID 1
• 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
• autorefresh to stop after some time (to stop pinging the server) stretch - make refresh time configurable RYO, 3
• validators - should not be “none” RYO, 5
• deploys - not easily knowable. I have two notes - one to add a task to db-utils to keep the account as interim and another to simply hide it for now until we find a better solution to getting the data, David 3
• 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. victor/david 5
• Sort columns - RYO, 5
• Peer list: add “up time” and harvest block info. ryo? requires SDK work

allow columns to be sorted.

Edited by Jan:
sorted only by:

• height
• era

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

looking for a list of deploys, rather than depending on the deploy hash for display

autorefresh to stop after some time (to stop pinging the server) stretch - make refresh time configurable RYO, 3

Using react-i18n

• Only use one styling library: Currently use TailwindCSS and @emotion/styled. TailwindCSS remove is determined.

Redesign home screen based on discussed revisions

Related to issue 98

• Relocate SearchSelect component for these views:

1. home-main:
   https://www.figma.com/file/GS7thHuVvP72ZrnBkWrVAp/block-explorer?node-id=514%3A883&t=HJIemTQrQSXRDN8V-4

2. home_collapse_hero:
   https://www.figma.com/file/GS7thHuVvP72ZrnBkWrVAp/block-explorer?node-id=520%3A1097&t=HJIemTQrQSXRDN8V-4

With V1.0, we allowed the logo and brand to be configurable. Enable this ability in the updated layout as well.

So when you refresh or send somebody the link to /blocks you get 404 from nginx.

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 now we've always have the same page title

and we want it to change on different pages.

Also we want the Casper BlockExplorer part to be configurable.

we should display into about validators in the new gadget that will show both peers & validators :)

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.

Create filters that can filter events based on certain deploys/own deploys using block hash, deploy hash etc.

Step
Account Hash
Transactions
Empty blocks

Allow spacing to be configurable and document how to use the settings.

deploys this information is not easily knowable. simply hide it for now until we find a better solution to getting the data, David 3

And then middleware repo will be made public.

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.