From f8eec8a05644d9b7b944d373854a9d828700ce20 Mon Sep 17 00:00:00 2001 From: Edd Date: Fri, 30 Dec 2022 11:40:47 +0000 Subject: [PATCH] fix(explorer): fix resizing callout (#2492) * fix(explorer): prevent layout thrashing on stats page --- apps/explorer-e2e/.env.devnet | 1 + apps/explorer-e2e/.env.mainnet | 1 + apps/explorer-e2e/.env.stagnet3 | 1 + apps/explorer-e2e/.env.testnet | 1 + .../explorer-e2e/src/integration/blocks.cy.js | 3 +- apps/explorer-e2e/src/integration/home.cy.js | 40 +++++----- .../explorer/src/app/components/txs/index.tsx | 1 - .../src/app/components/txs/txs-stats-info.tsx | 77 ------------------- .../src/app/routes/txs/home/index.tsx | 3 +- .../stats-manager/stats-manager.tsx | 6 +- libs/network-stats/src/config/stats-fields.ts | 18 ++--- 11 files changed, 35 insertions(+), 117 deletions(-) delete mode 100644 apps/explorer/src/app/components/txs/txs-stats-info.tsx diff --git a/apps/explorer-e2e/.env.devnet b/apps/explorer-e2e/.env.devnet index 6f14c3b29..37bb5ce5f 100644 --- a/apps/explorer-e2e/.env.devnet +++ b/apps/explorer-e2e/.env.devnet @@ -4,6 +4,7 @@ NX_TENDERMINT_URL=https://n04.d.vega.xyz/tm NX_TENDERMINT_WEBSOCKET_URL=wss://n04.d.vega.xyz/tm/websocket NX_VEGA_URL=https://api.n04.d.vega.xyz/graphql NX_VEGA_ENV=DEVNET +NX_BLOCK_EXPLORER=https://be.devnet1.vega.xyz/rest # App flags NX_EXPLORER_ASSETS=1 diff --git a/apps/explorer-e2e/.env.mainnet b/apps/explorer-e2e/.env.mainnet index 5d4f59c14..a3600087a 100644 --- a/apps/explorer-e2e/.env.mainnet +++ b/apps/explorer-e2e/.env.mainnet @@ -4,6 +4,7 @@ NX_TENDERMINT_URL=https://mainnet-observer-proxy01.ops.vega.xyz/ NX_TENDERMINT_WEBSOCKET_URL=wss://mainnet-observer-proxy01.ops.vega.xyz/websocket NX_VEGA_URL=https://api.vega.xyz/query NX_VEGA_ENV=MAINNET +NX_BLOCK_EXPLORER=https://be.explorer.vega.xyz/rest # App flags NX_EXPLORER_ASSETS=1 diff --git a/apps/explorer-e2e/.env.stagnet3 b/apps/explorer-e2e/.env.stagnet3 index 9cf678128..3e33e1bc1 100644 --- a/apps/explorer-e2e/.env.stagnet3 +++ b/apps/explorer-e2e/.env.stagnet3 @@ -4,6 +4,7 @@ NX_TENDERMINT_URL=https://tm.n00.stagnet3.vega.xyz NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n00.stagnet3.vega.xyz/websocket NX_VEGA_URL=https://api.stagnet3.vega.xyz/graphql NX_VEGA_ENV=STAGNET3 +NX_BLOCK_EXPLORER=https://be.stagnet3.vega.xyz/rest # App flags NX_EXPLORER_ASSETS=1 diff --git a/apps/explorer-e2e/.env.testnet b/apps/explorer-e2e/.env.testnet index 70066cc91..67801ebd5 100644 --- a/apps/explorer-e2e/.env.testnet +++ b/apps/explorer-e2e/.env.testnet @@ -4,6 +4,7 @@ NX_TENDERMINT_URL=https://tm.n07.testnet.vega.xyz/tm NX_TENDERMINT_WEBSOCKET_URL=wss://lb.testnet.vega.xyz/tm/websocket NX_VEGA_URL=https://api.n11.testnet.vega.xyz/graphql NX_VEGA_ENV=TESTNET +NX_BLOCK_EXPLORER=https://be.testnet.vega.xyz/rest # App flags NX_EXPLORER_ASSETS=1 diff --git a/apps/explorer-e2e/src/integration/blocks.cy.js b/apps/explorer-e2e/src/integration/blocks.cy.js index 8c169ea3b..9b3894752 100644 --- a/apps/explorer-e2e/src/integration/blocks.cy.js +++ b/apps/explorer-e2e/src/integration/blocks.cy.js @@ -52,7 +52,8 @@ context('Blocks page', { tags: '@regression' }, function () { }); }); - it('Previous button disabled on first block', function () { + // Skipping - see https://github.com/vegaprotocol/frontend-monorepo/issues/2494 + it.skip('Previous button disabled on first block', function () { cy.get('[data-testid="block-input"]').type('1'); cy.get('[data-testid="go-submit"]').click(); cy.get(previousBlockBtn).find('button').should('be.disabled'); diff --git a/apps/explorer-e2e/src/integration/home.cy.js b/apps/explorer-e2e/src/integration/home.cy.js index 5389d184b..9309330c1 100644 --- a/apps/explorer-e2e/src/integration/home.cy.js +++ b/apps/explorer-e2e/src/integration/home.cy.js @@ -20,19 +20,18 @@ context('Home Page', function () { 1: 'Height', 2: 'Uptime', 3: 'Total nodes', - 4: 'Inactive nodes', - 5: 'Total staked', - 6: 'Backlog', - 7: 'Trades / second', - 8: 'Orders / block', - 9: 'Orders / second', - 10: 'Transactions / block', - 11: 'Block time', - 12: 'Time', - 13: 'App', - 14: 'Tendermint', - 15: 'Up since', - 16: 'Chain ID', + 4: 'Total staked', + 5: 'Backlog', + 6: 'Trades / second', + 7: 'Orders / block', + 8: 'Orders / second', + 9: 'Transactions / block', + 10: 'Block time', + 11: 'Time', + 12: 'App', + 13: 'Tendermint', + 14: 'Up since', + 15: 'Chain ID', }; cy.get('[data-testid="stats-title"]') @@ -40,7 +39,7 @@ context('Home Page', function () { cy.wrap($list).should('have.text', statTitles[index]); }) .then(($list) => { - cy.wrap($list).should('have.length', 17); + cy.wrap($list).should('have.length', 16); }); cy.get(statsValue).eq(0).should('have.text', 'CONNECTED'); @@ -50,30 +49,29 @@ context('Home Page', function () { .invoke('text') .should('match', /\d+d \d+h \d+m \d+s/i); cy.get(statsValue).eq(3).should('have.text', '2'); - cy.get(statsValue).eq(4).should('have.text', '2'); cy.get(statsValue) - .eq(5) + .eq(4) .invoke('text') .should('match', /\d+\.\d\d(?!\d)/i); + cy.get(statsValue).eq(5).should('have.text', '0'); cy.get(statsValue).eq(6).should('have.text', '0'); cy.get(statsValue).eq(7).should('have.text', '0'); cy.get(statsValue).eq(8).should('have.text', '0'); - cy.get(statsValue).eq(9).should('have.text', '0'); + cy.get(statsValue).eq(9).should('not.be.empty'); cy.get(statsValue).eq(10).should('not.be.empty'); cy.get(statsValue).eq(11).should('not.be.empty'); - cy.get(statsValue).eq(12).should('not.be.empty'); if (Cypress.env('NIGHTLY_RUN') != true) { cy.get(statsValue) - .eq(13) + .eq(12) .invoke('text') .should('match', /v\d+\.\d+\.\d+/i); } cy.get(statsValue) - .eq(14) + .eq(13) .invoke('text') .should('match', /\d+\.\d+\.\d+/i); + cy.get(statsValue).eq(14).should('not.be.empty'); cy.get(statsValue).eq(15).should('not.be.empty'); - cy.get(statsValue).eq(16).should('not.be.empty'); }); it('Block height should be updating', function () { diff --git a/apps/explorer/src/app/components/txs/index.tsx b/apps/explorer/src/app/components/txs/index.tsx index 314fbdb74..ab6d425d2 100644 --- a/apps/explorer/src/app/components/txs/index.tsx +++ b/apps/explorer/src/app/components/txs/index.tsx @@ -2,4 +2,3 @@ export { TxList } from './tx-list'; export { TxOrderType } from './tx-order-type'; export { TxsInfiniteList } from './txs-infinite-list'; export { TxsInfiniteListItem } from './txs-infinite-list-item'; -export { TxsStatsInfo } from './txs-stats-info'; diff --git a/apps/explorer/src/app/components/txs/txs-stats-info.tsx b/apps/explorer/src/app/components/txs/txs-stats-info.tsx deleted file mode 100644 index cce817b24..000000000 --- a/apps/explorer/src/app/components/txs/txs-stats-info.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { t } from '@vegaprotocol/react-helpers'; -import { useEffect } from 'react'; -import { InfoBlock } from '../../components/info-block'; -import { Panel } from '../../components/panel'; -import { useExplorerStatsQuery } from './__generated__/Explorer-stats'; -import type { ExplorerStatsFieldsFragment } from './__generated__/Explorer-stats'; - -interface StatsMap { - field: keyof ExplorerStatsFieldsFragment; - label: string; - info: string; -} - -export const TXS_STATS_MAP: StatsMap[] = [ - { - field: 'averageOrdersPerBlock', - label: t('Orders per block'), - info: t( - 'Number of new orders processed in the last block. All orders derived from pegged orders and liquidity commitments count as a single order' - ), - }, - { - field: 'txPerBlock', - label: t('Transactions per block'), - info: t('Number of transactions processed in the last block'), - }, - { - field: 'tradesPerSecond', - label: t('Trades per second'), - info: t('Number of trades processed in the last second'), - }, - { - field: 'ordersPerSecond', - label: t('Order per second'), - info: t( - 'Number of orders processed in the last second. All orders derived from pegged orders and liquidity commitments count as a single order' - ), - }, -]; - -interface TxsStatsInfoProps { - className?: string; -} - -export const TxsStatsInfo = ({ className }: TxsStatsInfoProps) => { - const { data, startPolling, stopPolling } = useExplorerStatsQuery(); - - useEffect(() => { - startPolling(1000); - return () => stopPolling(); - }); - - const gridStyles = - 'grid grid-rows-2 gap-4 grid-cols-2 xl:gap-8 xl:grid-rows-1 xl:grid-cols-4'; - - return ( - -
- {TXS_STATS_MAP.map((field) => { - if (!data?.statistics) { - return null; - } - - // Workaround for awkward typing - const title = data.statistics[field.field] || ''; - return ( - - ); - })} -
- - ); -}; diff --git a/apps/explorer/src/app/routes/txs/home/index.tsx b/apps/explorer/src/app/routes/txs/home/index.tsx index 374a73a93..a81ed928b 100644 --- a/apps/explorer/src/app/routes/txs/home/index.tsx +++ b/apps/explorer/src/app/routes/txs/home/index.tsx @@ -1,7 +1,7 @@ import { t } from '@vegaprotocol/react-helpers'; import { RouteTitle } from '../../../components/route-title'; import { BlocksRefetch } from '../../../components/blocks'; -import { TxsInfiniteList, TxsStatsInfo } from '../../../components/txs'; +import { TxsInfiniteList } from '../../../components/txs'; import { useTxsData } from '../../../hooks/use-txs-data'; import { useDocumentTitle } from '../../../hooks/use-document-title'; @@ -16,7 +16,6 @@ export const TxsList = () => {
{t('Transactions')} - { value.forEach((x) => { const stat = { ...x, - value: statData, + value: statData || '-', }; stat.promoted ? acc.promoted.push(stat) : acc.table.push(stat); @@ -75,7 +75,7 @@ export const StatsManager = ({ className }: StatsManagerProps) => { return ( { return ( totalInactive < 1, - description: t('Nodes that are registered but not validating'), - }, - ], + inactiveNodes: [], stakedTotal: [ { title: t('Total staked'), @@ -174,11 +168,11 @@ export const statsFields: { [key in keyof Stats]: StatFields[] } = { title: t('Uptime'), formatter: (t: string) => { if (!t) { - return; + return '-'; } const date = new Date(t); if (!isValidDate(date)) { - return; + return '-'; } const secSinceStart = (new Date().getTime() - date.getTime()) / 1000; const days = Math.floor(secSinceStart / 60 / 60 / 24); @@ -194,13 +188,13 @@ export const statsFields: { [key in keyof Stats]: StatFields[] } = { title: t('Up since'), formatter: (t: string) => { if (!t) { - return; + return '-'; } const date = new Date(t); if (!isValidDate(date)) { - return; + return '-'; } - return getDateTimeFormat().format(date); + return getDateTimeFormat().format(date) || '-'; }, description: t('Genesis'), },