From 33cfb9bed8f3fc2fa8d1c3d896efec4b57fbf929 Mon Sep 17 00:00:00 2001 From: Torresmorah Date: Thu, 22 Jun 2023 11:54:39 -0600 Subject: [PATCH 1/5] feat(webapp): add TransactionHistory in Stress Test Dashboard page - feat: Add zoom in tps and tpb graphic - fix: UI bugs in tps and tpb graphic - fix: UI bug in select filter --- .../components/TransactionsHistory/index.js | 143 ++++++++++++++++-- .../components/TransactionsHistory/styles.js | 143 ++++++++++++++++++ .../components/TransactionsLineChart/index.js | 8 +- webapp/src/context/state.context.js | 16 +- webapp/src/routes/Home/BlockProducerInfo.js | 117 +------------- webapp/src/routes/Home/TransactionInfo.js | 3 +- webapp/src/routes/Home/styles.js | 4 + .../src/routes/StressTestDashboard/index.js | 20 ++- 8 files changed, 309 insertions(+), 145 deletions(-) create mode 100644 webapp/src/components/TransactionsHistory/styles.js diff --git a/webapp/src/components/TransactionsHistory/index.js b/webapp/src/components/TransactionsHistory/index.js index c536028a..ec649f15 100644 --- a/webapp/src/components/TransactionsHistory/index.js +++ b/webapp/src/components/TransactionsHistory/index.js @@ -1,5 +1,6 @@ /* eslint camelcase: 0 */ import React, { memo, useEffect, useState } from 'react' +import { makeStyles } from '@mui/styles' import PropTypes from 'prop-types' import Card from '@mui/material/Card' import CardContent from '@mui/material/CardContent' @@ -8,10 +9,16 @@ import LinearProgress from '@mui/material/LinearProgress' import LaunchIcon from '@mui/icons-material/Launch' import { useSubscription } from '@apollo/client' +import eosApi from '../../utils/eosapi' import { BLOCK_TRANSACTIONS_HISTORY } from '../../gql' +import { useSharedState } from '../../context/state.context' import { formatWithThousandSeparator, getBlockNumUrl } from '../../utils' import { generalConfig } from '../../config' +import styles from './styles' + +const useStyles = makeStyles(styles) + const BodyGraphValue = ({ loading, value, classes, href }) => { if (loading) return @@ -40,12 +47,36 @@ BodyGraphValue.defaultProps = { classes: {}, } -const TransactionsHistory = ({ t, classes, nodesChildren }) => { +const TransactionsHistory = ({ t, nodesChildren }) => { + const classes = useStyles() + const [{ info, tps }] = useSharedState() const { data, loading } = useSubscription(BLOCK_TRANSACTIONS_HISTORY) const [ blockWithHighestTransactionsCount, setBlockWithHighestTransactionsCount, ] = useState({}) + const [globalConfig, setGlobalConfig] = useState() + + useEffect(() => { + const getTable = async () => { + try { + const { rows } = await eosApi.getTableRows({ + code: 'eosio', + scope: 'eosio', + table: 'global', + json: true, + lower_bound: null, + }) + + setGlobalConfig({ + maxBlockCPU: rows[0]?.max_block_cpu_usage, + maxBlockNET: rows[0]?.max_block_net_usage, + }) + } catch (error) {} + } + + getTable() + }, []) useEffect(() => { if (!data?.stats?.[0]?.tps_all_time_high?.blocks?.length) { @@ -163,15 +194,111 @@ const TransactionsHistory = ({ t, classes, nodesChildren }) => { - {nodesChildren && nodesChildren} + {globalConfig && ( +
+ + + {t('cpuUsage')} + + {`${formatWithThousandSeparator( + (tps[0]?.cpu / globalConfig.maxBlockCPU) * 100 || 0, + 2, + )} %`} + + + +
+ )} + {globalConfig && ( +
+ + + {t('netUsage')} + + {`${formatWithThousandSeparator( + (tps[0]?.net / globalConfig.maxBlockNET) * 100 || 0, + 2, + )} %`} + + + +
+ )} + {nodesChildren && ( + <> + {nodesChildren} +
+ + + {`${t('uniqueLocations')}`} + + + +
+ + )}
- {`${t('uniqueLocations')}`} - + {t('cpuLimitPerBlock')} + + {`${(info.block_cpu_limit * 0.001).toFixed(0)} ms`} + + + +
+
+ + + {t('netLimitPerBlock')} + + {`${formatWithThousandSeparator( + info.block_net_limit / 1024, + 0, + )} KB`} + + + +
+
+ + + {t('chainCpuLimit')} + + {`${(info.virtual_block_cpu_limit * 0.001).toFixed(0)} ms`} + + + +
+
+ + + {t('chainNetLimit')} + + {`${formatWithThousandSeparator( + info.virtual_block_net_limit / 1024, + 0, + )} KB`} +
@@ -181,13 +308,11 @@ const TransactionsHistory = ({ t, classes, nodesChildren }) => { TransactionsHistory.propTypes = { t: PropTypes.func, - classes: PropTypes.object, nodesChildren: PropTypes.node, } TransactionsHistory.defaultProps = { t: (text) => text, - classes: {}, } export default memo(TransactionsHistory) diff --git a/webapp/src/components/TransactionsHistory/styles.js b/webapp/src/components/TransactionsHistory/styles.js new file mode 100644 index 00000000..f4d7a1eb --- /dev/null +++ b/webapp/src/components/TransactionsHistory/styles.js @@ -0,0 +1,143 @@ +export default (theme) => ({ + graphicBox: { + '& .MuiCard-root': { + height: '100%', + }, + display: 'flex', + marginBottom: '10px', + gap: '10px', + [theme.breakpoints.down('md')]: { + display: 'block', + }, + }, + bottomRow: { + [theme.breakpoints.up('md')]: { + paddingTop: theme.spacing(1), + }, + }, + boxIrreversible: { + display: 'flex', + alignItems: 'baseline', + paddingTop: theme.spacing(3), + '& .MuiTypography-body1': { + marginBottom: '0 !important', + letterSpacing: '0.09px', + color: 'rgba(0, 0, 0, 0.54)', + '& strong': { + color: '#212121', + }, + }, + }, + pauseButton: { + display: 'flex', + width: 75, + height: 24, + '&:hover': { + cursor: 'pointer', + }, + }, + disableButton: { + color: theme.palette.action.disabled, + }, + headerTransactionLine: { + display: 'flex', + justifyContent: 'space-between', + flexDirection: 'column', + alignItems: 'baseline', + padding: theme.spacing(1), + [theme.breakpoints.up('lg')]: { + justifyContent: 'space-between', + alignItems: 'center', + flexDirection: 'row', + }, + }, + formControl: { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + width: '100%', + '& .MuiFormControl-root': { + width: 200, + }, + '& .MuiInputLabel-formControl': { + position: 'relative', + marginBottom: `-${theme.spacing(2)}`, + }, + [theme.breakpoints.up('lg')]: { + width: 300, + }, + }, + cards: { + textTransform: 'capitalize', + minHeight: '90px', + '& .MuiTypography-h6': { + display: 'flex', + justifyContent: 'center', + textAlign: 'center', + marginTop: theme.spacing(2), + }, + }, + cardLink: { + fontSize: 15, + marginBottom: 2, + }, + svgLink: { + fontSize: 18, + marginLeft: theme.spacing(2), + }, + lowercase: { + textTransform: 'lowercase !important', + }, + cardShadow: { + boxShadow: '0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important', + }, + divMargin: { + display: 'flex', + marginBottom: '10px', + gap: '10px', + flexWrap: 'nowrap', + [theme.breakpoints.down('md')]: { + display: 'block', + }, + }, + cardHeader: { + flexGrow: '1', + flexBasis: 'calc(100%/5)', + [theme.breakpoints.down('md')]: { + marginBottom: '10px', + }, + '& .MuiPaper-root': { + height: '100%', + }, + }, + cardGrow: { + flexGrow: '1', + flexBasis: 'calc(100%/5)', + [theme.breakpoints.down('md')]: { + flexBasis: 'calc(100%/3)', + marginBottom: '10px', + }, + '& .MuiPaper-root': { + height: '100%', + }, + }, + uniquelocations: { + flexGrow: '1 !important', + }, + divTrans: { + width: '50%', + [theme.breakpoints.down('md')]: { + width: '100%', + marginBottom: '10px', + }, + }, + wrapper: { + display: 'flex', + gap: '10px', + flexWrap: 'wrap', + [theme.breakpoints.down('md')]: { + width: '100%', + }, + }, + }) + \ No newline at end of file diff --git a/webapp/src/components/TransactionsLineChart/index.js b/webapp/src/components/TransactionsLineChart/index.js index e9d3dda5..e7a761f1 100644 --- a/webapp/src/components/TransactionsLineChart/index.js +++ b/webapp/src/components/TransactionsLineChart/index.js @@ -3,7 +3,7 @@ import HighchartsReact from 'highcharts-react-official' import PropTypes from 'prop-types' import Highcharts from 'highcharts' -const TransactionsLineChart = ({ data, xAxisProps, title, yAxisProps }) => { +const TransactionsLineChart = ({ data, xAxisProps, title, yAxisProps, zoomEnabled }) => { const options = { time: { timezoneOffset: new Date().getTimezoneOffset(), @@ -14,12 +14,16 @@ const TransactionsLineChart = ({ data, xAxisProps, title, yAxisProps }) => { chart: { animation: false, type: 'spline', + zoomType: zoomEnabled ? 'x' : '' }, credits: { enabled: false, }, xAxis: xAxisProps, yAxis: yAxisProps, + tooltip: { + pointFormat: '{series.name}: {point.y}
Net usage:{point.net}
CPU usage:{point.cpu}', + }, } return ( @@ -40,6 +44,7 @@ TransactionsLineChart.propTypes = { xAxisProps: PropTypes.object, yAxisProps: PropTypes.object, title: PropTypes.string, + zoomEnabled: PropTypes.bool, } TransactionsLineChart.defaultProps = { @@ -47,6 +52,7 @@ TransactionsLineChart.defaultProps = { xAxisProps: { xAxisVisible: false }, yAxisProps: {}, title: '', + zoomEnabled: false, } export default TransactionsLineChart diff --git a/webapp/src/context/state.context.js b/webapp/src/context/state.context.js index 53da0425..bb274a8c 100644 --- a/webapp/src/context/state.context.js +++ b/webapp/src/context/state.context.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useCallback } from 'react' +import React, { useEffect, useCallback } from 'react' import useLightUAL from '../hooks/useUAL' import { ualConfig } from '../config' @@ -149,7 +149,6 @@ export const SharedStateProvider = ({ ...props }) => { export const useSharedState = () => { const context = React.useContext(SharedStateContext) - const [intervalNumber, setIntervalNumber] = useState(null) if (!context) { throw new Error(`useSharedState must be used within a SharedStateContext`) @@ -270,18 +269,15 @@ export const useSharedState = () => { } } - if (infoInterval) return - infoInterval = setInterval(handle, interval * 1000) - setIntervalNumber(infoInterval) } - const stopTrackingInfo = useCallback(() => { - if (!intervalNumber) return + const stopTrackingInfo =() => { + if (!infoInterval) return - clearInterval(intervalNumber) - setIntervalNumber(null) - }, [intervalNumber]) + clearInterval(infoInterval) + infoInterval = null + } const stopTrackingProducerSchedule = () => { if (!scheduleInterval) return diff --git a/webapp/src/routes/Home/BlockProducerInfo.js b/webapp/src/routes/Home/BlockProducerInfo.js index 5b1cb33e..f13ba8f4 100644 --- a/webapp/src/routes/Home/BlockProducerInfo.js +++ b/webapp/src/routes/Home/BlockProducerInfo.js @@ -3,7 +3,6 @@ import React, { lazy, useEffect, useState } from 'react' import { useQuery } from '@apollo/client' import PropTypes from 'prop-types' -import eosApi from '../../utils/eosapi' import { formatWithThousandSeparator } from '../../utils' import { PRODUCERS_QUERY, PRODUCERS_SUMMARY_QUERY } from '../../gql' import { useSharedState } from '../../context/state.context' @@ -26,31 +25,9 @@ const BlockProducerInfo = ({ t, classes }) => { const { data: producersSummary, loading: producersLoading } = useQuery( PRODUCERS_SUMMARY_QUERY, ) - const [{ schedule: scheduleInfo, info, tps }] = useSharedState() + const [{ schedule: scheduleInfo, info }] = useSharedState() const [total, setTotal] = useState(0) const [schedule, setSchedule] = useState({ producers: [] }) - const [globalConfig, setGlobalConfig] = useState() - - useEffect(() => { - const getTable = async () => { - try { - const { rows } = await eosApi.getTableRows({ - code: 'eosio', - scope: 'eosio', - table: 'global', - json: true, - lower_bound: null, - }) - - setGlobalConfig({ - maxBlockCPU: rows[0]?.max_block_cpu_usage, - maxBlockNET: rows[0]?.max_block_net_usage, - }) - } catch (error) {} - } - - getTable() - }, []) useEffect(() => { const newProducers = scheduleInfo.producers.map((item) => { @@ -188,98 +165,6 @@ const BlockProducerInfo = ({ t, classes }) => { } /> - {globalConfig && ( -
- - - {t('cpuUsage')} - - {`${formatWithThousandSeparator( - (tps[0]?.cpu / globalConfig.maxBlockCPU) * 100 || 0, - 2, - )} %`} - - - -
- )} - {globalConfig && ( -
- - - {t('netUsage')} - - {`${formatWithThousandSeparator( - (tps[0]?.net / globalConfig.maxBlockNET) * 100 || 0, - 2, - )} %`} - - - -
- )} -
- - - {t('cpuLimitPerBlock')} - - {`${(info.block_cpu_limit * 0.001).toFixed(0)} ms`} - - - -
-
- - - {t('netLimitPerBlock')} - - {`${formatWithThousandSeparator( - info.block_net_limit / 1024, - 0, - )} KB`} - - - -
-
- - - {t('chainCpuLimit')} - - {`${(info.virtual_block_cpu_limit * 0.001).toFixed(0)} ms`} - - - -
-
- - - {t('chainNetLimit')} - - {`${formatWithThousandSeparator( - info.virtual_block_net_limit / 1024, - 0, - )} KB`} - - - -
diff --git a/webapp/src/routes/Home/TransactionInfo.js b/webapp/src/routes/Home/TransactionInfo.js index 8a390239..f4370cbd 100644 --- a/webapp/src/routes/Home/TransactionInfo.js +++ b/webapp/src/routes/Home/TransactionInfo.js @@ -72,7 +72,7 @@ const TransactionInfo = ({ for (let index = 0; index < tps.length; index++) { trxPerSecond.push({ name: `Blocks: ${tps[index].blocks.join(', ')}`, - cpu: tpb[index].cpu, + cpu: tps[index].cpu, net: tps[index].net, y: tps[index].transactions, x: index, @@ -205,6 +205,7 @@ const TransactionInfo = ({
{loading && } ({ '& .MuiFormControl-root': { width: 200, }, + '& .MuiInputLabel-formControl': { + position: 'relative', + marginBottom: `-${theme.spacing(2)}`, + }, [theme.breakpoints.up('lg')]: { width: 300, }, diff --git a/webapp/src/routes/StressTestDashboard/index.js b/webapp/src/routes/StressTestDashboard/index.js index a4bb2122..3d4fd20e 100644 --- a/webapp/src/routes/StressTestDashboard/index.js +++ b/webapp/src/routes/StressTestDashboard/index.js @@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next' import TransactionInfo from 'routes/Home/TransactionInfo' import { useSharedState } from '../../context/state.context' +import TransactionsHistory from '../../components/TransactionsHistory' const StressTestDashboard = () => { const { t } = useTranslation('homeRoute') @@ -18,14 +19,17 @@ const StressTestDashboard = () => { }, []) return ( - { - startTrackingInfo({ interval: 0.5 }) - }} - historyEnabled - /> + <> + { + startTrackingInfo({ interval: 0.5 }) + }} + historyEnabled + /> + + ) } From 922c2d82367645326c02d20fad8c7b044fbed1fe Mon Sep 17 00:00:00 2001 From: Torresmorah Date: Thu, 22 Jun 2023 14:35:21 -0600 Subject: [PATCH 2/5] refactor(webapp): refactor styles to reuse the TransactionHistory component --- webapp/src/components/NodesSummary/index.js | 49 ++- .../src/components/ProducersSummary/index.js | 44 +-- webapp/src/components/SimpleDataCard/index.js | 34 ++ .../src/components/SimpleDataCard/styles.js | 37 +++ .../components/TransactionsHistory/index.js | 314 +++++++----------- .../components/TransactionsHistory/styles.js | 126 +------ webapp/src/routes/Home/BlockProducerInfo.js | 116 +++---- webapp/src/routes/Home/TransactionInfo.js | 6 +- webapp/src/routes/Home/styles.js | 33 -- .../src/routes/StressTestDashboard/index.js | 3 +- 10 files changed, 271 insertions(+), 491 deletions(-) create mode 100644 webapp/src/components/SimpleDataCard/index.js create mode 100644 webapp/src/components/SimpleDataCard/styles.js diff --git a/webapp/src/components/NodesSummary/index.js b/webapp/src/components/NodesSummary/index.js index fbc58ed7..497ad28a 100644 --- a/webapp/src/components/NodesSummary/index.js +++ b/webapp/src/components/NodesSummary/index.js @@ -1,8 +1,6 @@ /* eslint camelcase: 0 */ import React, { memo, useEffect, useState } from 'react' import PropTypes from 'prop-types' -import Card from '@mui/material/Card' -import CardContent from '@mui/material/CardContent' import Typography from '@mui/material/Typography' import LinearProgress from '@mui/material/LinearProgress' import { useQuery } from '@apollo/client' @@ -10,13 +8,14 @@ import { useTranslation } from 'react-i18next' import { NODES_SUMMARY_QUERY } from '../../gql' import { generalConfig } from '../../config' +import SimpleDataCard from '../SimpleDataCard' const NODES_ORDER = [ { boot: 2, observer: 4, validator: 1, - writer: 3 + writer: 3, }, { producer: 1, @@ -24,8 +23,8 @@ const NODES_ORDER = [ query: 3, seed: 4, 'query,seed': 5, - unknown: 10 - } + unknown: 10, + }, ] const BodyGraphValue = ({ loading, value }) => { @@ -40,15 +39,15 @@ const BodyGraphValue = ({ loading, value }) => { BodyGraphValue.propTypes = { loading: PropTypes.bool, - value: PropTypes.number + value: PropTypes.number, } BodyGraphValue.defaultProps = { value: 0, - loading: false + loading: false, } -const NodesSummary = ({ t, classes }) => { +const NodesSummary = ({ t }) => { const { data, loading } = useQuery(NODES_SUMMARY_QUERY) const { i18n } = useTranslation('translations') const [currentLanguaje, setCurrentLanguaje] = useState('') @@ -80,7 +79,7 @@ const NodesSummary = ({ t, classes }) => { return { value: nodes[type], type, - position: nodesOrderByNet[type] || 8 + position: nodesOrderByNet[type] || 8, } }) .sort((a, b) => a.position - b.position) @@ -94,28 +93,20 @@ const NodesSummary = ({ t, classes }) => { return ( <> -
- - - {`${t('total')} ${t('nodes')}`} - - - -
+ + {`${t('total')} ${t('nodes')}`} + + {nodes && nodes.map((node) => ( -
- - - - {currentLanguaje === 'es' ? t('nodes') : ''} {t(node.type)}{' '} - {currentLanguaje !== 'es' ? t('nodes') : ''} - - - - -
+ + + {currentLanguaje === 'es' ? t('nodes') : ''} {t(node.type)}{' '} + {currentLanguaje !== 'es' ? t('nodes') : ''} + + + ))} ) @@ -123,12 +114,10 @@ const NodesSummary = ({ t, classes }) => { NodesSummary.propTypes = { t: PropTypes.func, - classes: PropTypes.object } NodesSummary.defaultProps = { t: (text) => text, - classes: {} } export default memo(NodesSummary) diff --git a/webapp/src/components/ProducersSummary/index.js b/webapp/src/components/ProducersSummary/index.js index 8c7b55c5..c2976e17 100644 --- a/webapp/src/components/ProducersSummary/index.js +++ b/webapp/src/components/ProducersSummary/index.js @@ -1,13 +1,12 @@ /* eslint camelcase: 0 */ import React, { memo, useEffect, useState } from 'react' import PropTypes from 'prop-types' -import Card from '@mui/material/Card' -import CardContent from '@mui/material/CardContent' import Typography from '@mui/material/Typography' import LinearProgress from '@mui/material/LinearProgress' import { ENTITY_TYPE } from '../../utils/lacchain' import { eosConfig } from '../../config' +import SimpleDataCard from '../SimpleDataCard' const BodyGraphValue = ({ loading, value }) => { if (loading) return @@ -21,15 +20,15 @@ const BodyGraphValue = ({ loading, value }) => { BodyGraphValue.propTypes = { loading: PropTypes.bool, - value: PropTypes.number + value: PropTypes.number, } BodyGraphValue.defaultProps = { value: 0, - loading: false + loading: false, } -const ProducersSummary = ({ t, classes, data, loading, total }) => { +const ProducersSummary = ({ t, data, loading, total }) => { const [nodes, setNodes] = useState([]) useEffect(() => { @@ -46,7 +45,7 @@ const ProducersSummary = ({ t, classes, data, loading, total }) => { producers.push({ ...producer, - type: ENTITY_TYPE[producer.type] || 'N/A' + type: ENTITY_TYPE[producer.type] || 'N/A', }) } @@ -55,27 +54,16 @@ const ProducersSummary = ({ t, classes, data, loading, total }) => { return ( <> -
- - - {`${t('total')} ${t('producers')}`} - - - -
+ + {`${t('total')} ${t('producers')}`} + + {nodes.map((node, index) => ( -
- - - {`${t(node.type)} ${t('producers')}`} - - - -
+ + {`${t(node.type)} ${t('producers')}`} + + ))} ) @@ -83,18 +71,16 @@ const ProducersSummary = ({ t, classes, data, loading, total }) => { ProducersSummary.propTypes = { t: PropTypes.func, - classes: PropTypes.object, data: PropTypes.object, loading: PropTypes.bool, - total: PropTypes.number + total: PropTypes.number, } ProducersSummary.defaultProps = { t: (text) => text, - classes: {}, data: {}, loading: false, - total: 0 + total: 0, } export default memo(ProducersSummary) diff --git a/webapp/src/components/SimpleDataCard/index.js b/webapp/src/components/SimpleDataCard/index.js new file mode 100644 index 00000000..9e84bb2f --- /dev/null +++ b/webapp/src/components/SimpleDataCard/index.js @@ -0,0 +1,34 @@ +import React from 'react' +import { makeStyles } from '@mui/styles' +import PropTypes from 'prop-types' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' + +import styles from './styles' + +const useStyles = makeStyles(styles) + +const SimpleDataCard = ({ key, header, children }) => { + const classes = useStyles() + + return ( +
+ + {children} + +
+ ) +} + +SimpleDataCard.propTypes = { + key: PropTypes.string, + header: PropTypes.bool, + children: PropTypes.node, +} + +SimpleDataCard.defaultProps = { + key: '', + header: false, +} + +export default SimpleDataCard diff --git a/webapp/src/components/SimpleDataCard/styles.js b/webapp/src/components/SimpleDataCard/styles.js new file mode 100644 index 00000000..4387278c --- /dev/null +++ b/webapp/src/components/SimpleDataCard/styles.js @@ -0,0 +1,37 @@ +export default (theme) => ({ + cards: { + textTransform: 'capitalize', + minHeight: '90px', + '& .MuiTypography-h6': { + display: 'flex', + justifyContent: 'center', + textAlign: 'center', + marginTop: theme.spacing(2), + }, + }, + cardShadow: { + boxShadow: '0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important', + }, + cardHeader: { + flexGrow: '1', + flexBasis: 'calc(100%/5)', + [theme.breakpoints.down('md')]: { + marginBottom: '10px', + }, + '& .MuiPaper-root': { + height: '100%', + }, + }, + cardGrow: { + flexGrow: '1', + flexBasis: 'calc(100%/5)', + [theme.breakpoints.down('md')]: { + flexBasis: 'calc(100%/3)', + marginBottom: '10px', + }, + '& .MuiPaper-root': { + height: '100%', + }, + }, + }) + \ No newline at end of file diff --git a/webapp/src/components/TransactionsHistory/index.js b/webapp/src/components/TransactionsHistory/index.js index ec649f15..dfae1d07 100644 --- a/webapp/src/components/TransactionsHistory/index.js +++ b/webapp/src/components/TransactionsHistory/index.js @@ -2,8 +2,6 @@ import React, { memo, useEffect, useState } from 'react' import { makeStyles } from '@mui/styles' import PropTypes from 'prop-types' -import Card from '@mui/material/Card' -import CardContent from '@mui/material/CardContent' import Typography from '@mui/material/Typography' import LinearProgress from '@mui/material/LinearProgress' import LaunchIcon from '@mui/icons-material/Launch' @@ -14,6 +12,7 @@ import { BLOCK_TRANSACTIONS_HISTORY } from '../../gql' import { useSharedState } from '../../context/state.context' import { formatWithThousandSeparator, getBlockNumUrl } from '../../utils' import { generalConfig } from '../../config' +import SimpleDataCard from '../SimpleDataCard' import styles from './styles' @@ -94,214 +93,137 @@ const TransactionsHistory = ({ t, nodesChildren }) => { return ( <> {nodesChildren && nodesChildren} -
- - - {`${t('uniqueLocations')}`} - - - -
+ + {`${t('uniqueLocations')}`} + + ) return (
-
- - - {t('tpsAllTimeHigh')} - - - -
-
- - - {t('networkUtilizationAllTimeHigh')} - - - -
-
- - - {`${t('transactions')} ${t('lastHour')}`} - - - -
-
- - - {`${t('transactions')} ${t('lastDay')}`} - - - -
-
- - - {`${t('transactions')} ${t( - 'dailyAverage', - )}`} - - - -
-
- - - {`${t('transactions')} ${t('lastWeek')}`} - - - -
+ + {t('tpsAllTimeHigh')} + + + + {t('networkUtilizationAllTimeHigh')} + + + + {`${t('transactions')} ${t('lastHour')}`} + + + + {`${t('transactions')} ${t('lastDay')}`} + + + + {`${t('transactions')} ${t('dailyAverage')}`} + + + + {`${t('transactions')} ${t('lastWeek')}`} + + {globalConfig && ( -
- - - {t('cpuUsage')} - - {`${formatWithThousandSeparator( - (tps[0]?.cpu / globalConfig.maxBlockCPU) * 100 || 0, - 2, - )} %`} - - - -
+ + {t('cpuUsage')} + + {`${formatWithThousandSeparator( + (tps[0]?.cpu / globalConfig.maxBlockCPU) * 100 || 0, + 2, + )} %`} + + )} {globalConfig && ( -
- - - {t('netUsage')} - - {`${formatWithThousandSeparator( - (tps[0]?.net / globalConfig.maxBlockNET) * 100 || 0, - 2, - )} %`} - - - -
+ + {t('netUsage')} + + {`${formatWithThousandSeparator( + (tps[0]?.net / globalConfig.maxBlockNET) * 100 || 0, + 2, + )} %`} + + )} {nodesChildren && ( <> {nodesChildren} -
- - - {`${t('uniqueLocations')}`} - - - -
+ + {`${t('uniqueLocations')}`} + + )} -
- - - {t('cpuLimitPerBlock')} - - {`${(info.block_cpu_limit * 0.001).toFixed(0)} ms`} - - - -
-
- - - {t('netLimitPerBlock')} - - {`${formatWithThousandSeparator( - info.block_net_limit / 1024, - 0, - )} KB`} - - - -
-
- - - {t('chainCpuLimit')} - - {`${(info.virtual_block_cpu_limit * 0.001).toFixed(0)} ms`} - - - -
-
- - - {t('chainNetLimit')} - - {`${formatWithThousandSeparator( - info.virtual_block_net_limit / 1024, - 0, - )} KB`} - - - -
+ + {t('cpuLimitPerBlock')} + + {`${(info.block_cpu_limit * 0.001).toFixed(0)} ms`} + + + + {t('netLimitPerBlock')} + + {`${formatWithThousandSeparator(info.block_net_limit / 1024, 0)} KB`} + + + + {t('chainCpuLimit')} + + {`${(info.virtual_block_cpu_limit * 0.001).toFixed(0)} ms`} + + + + {t('chainNetLimit')} + + {`${formatWithThousandSeparator( + info.virtual_block_net_limit / 1024, + 0, + )} KB`} + +
) } diff --git a/webapp/src/components/TransactionsHistory/styles.js b/webapp/src/components/TransactionsHistory/styles.js index f4d7a1eb..3a73eb0d 100644 --- a/webapp/src/components/TransactionsHistory/styles.js +++ b/webapp/src/components/TransactionsHistory/styles.js @@ -1,86 +1,4 @@ export default (theme) => ({ - graphicBox: { - '& .MuiCard-root': { - height: '100%', - }, - display: 'flex', - marginBottom: '10px', - gap: '10px', - [theme.breakpoints.down('md')]: { - display: 'block', - }, - }, - bottomRow: { - [theme.breakpoints.up('md')]: { - paddingTop: theme.spacing(1), - }, - }, - boxIrreversible: { - display: 'flex', - alignItems: 'baseline', - paddingTop: theme.spacing(3), - '& .MuiTypography-body1': { - marginBottom: '0 !important', - letterSpacing: '0.09px', - color: 'rgba(0, 0, 0, 0.54)', - '& strong': { - color: '#212121', - }, - }, - }, - pauseButton: { - display: 'flex', - width: 75, - height: 24, - '&:hover': { - cursor: 'pointer', - }, - }, - disableButton: { - color: theme.palette.action.disabled, - }, - headerTransactionLine: { - display: 'flex', - justifyContent: 'space-between', - flexDirection: 'column', - alignItems: 'baseline', - padding: theme.spacing(1), - [theme.breakpoints.up('lg')]: { - justifyContent: 'space-between', - alignItems: 'center', - flexDirection: 'row', - }, - }, - formControl: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - width: '100%', - '& .MuiFormControl-root': { - width: 200, - }, - '& .MuiInputLabel-formControl': { - position: 'relative', - marginBottom: `-${theme.spacing(2)}`, - }, - [theme.breakpoints.up('lg')]: { - width: 300, - }, - }, - cards: { - textTransform: 'capitalize', - minHeight: '90px', - '& .MuiTypography-h6': { - display: 'flex', - justifyContent: 'center', - textAlign: 'center', - marginTop: theme.spacing(2), - }, - }, - cardLink: { - fontSize: 15, - marginBottom: 2, - }, svgLink: { fontSize: 18, marginLeft: theme.spacing(2), @@ -88,53 +6,11 @@ export default (theme) => ({ lowercase: { textTransform: 'lowercase !important', }, - cardShadow: { - boxShadow: '0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important', - }, - divMargin: { - display: 'flex', - marginBottom: '10px', - gap: '10px', - flexWrap: 'nowrap', - [theme.breakpoints.down('md')]: { - display: 'block', - }, - }, - cardHeader: { - flexGrow: '1', - flexBasis: 'calc(100%/5)', - [theme.breakpoints.down('md')]: { - marginBottom: '10px', - }, - '& .MuiPaper-root': { - height: '100%', - }, - }, - cardGrow: { - flexGrow: '1', - flexBasis: 'calc(100%/5)', - [theme.breakpoints.down('md')]: { - flexBasis: 'calc(100%/3)', - marginBottom: '10px', - }, - '& .MuiPaper-root': { - height: '100%', - }, - }, - uniquelocations: { - flexGrow: '1 !important', - }, - divTrans: { - width: '50%', - [theme.breakpoints.down('md')]: { - width: '100%', - marginBottom: '10px', - }, - }, wrapper: { display: 'flex', gap: '10px', flexWrap: 'wrap', + marginTop: theme.spacing(2), [theme.breakpoints.down('md')]: { width: '100%', }, diff --git a/webapp/src/routes/Home/BlockProducerInfo.js b/webapp/src/routes/Home/BlockProducerInfo.js index f13ba8f4..70fdba1a 100644 --- a/webapp/src/routes/Home/BlockProducerInfo.js +++ b/webapp/src/routes/Home/BlockProducerInfo.js @@ -6,7 +6,7 @@ import PropTypes from 'prop-types' import { formatWithThousandSeparator } from '../../utils' import { PRODUCERS_QUERY, PRODUCERS_SUMMARY_QUERY } from '../../gql' import { useSharedState } from '../../context/state.context' -import { eosConfig, generalConfig } from '../../config' +import { eosConfig } from '../../config' const Card = lazy(() => import('@mui/material/Card')) const CardContent = lazy(() => import('@mui/material/CardContent')) @@ -19,6 +19,7 @@ const TransactionsHistory = lazy(() => const TransactionInfo = lazy(() => import('./TransactionInfo')) const NodesSummary = lazy(() => import('../../components/NodesSummary')) const ProducersSummary = lazy(() => import('../../components/ProducersSummary')) +const SimpleDataCard = lazy(() => import('../../components/SimpleDataCard')) const BlockProducerInfo = ({ t, classes }) => { const { data: { loading, producers } = {} } = useQuery(PRODUCERS_QUERY) @@ -83,50 +84,30 @@ const BlockProducerInfo = ({ t, classes }) => { return ( <>
-
- - - {t('currentProducer')} - - {info.head_block_producer} - - - -
-
- - - {t('scheduleVersion')} - - {schedule?.version} - - - -
-
- - - {t('headBlock')} - - {formatWithThousandSeparator(info.head_block_num)} - - - -
-
- - - {t('lastBlock')} - - {formatWithThousandSeparator(info.last_irreversible_block_num)} - - - -
+ + {t('currentProducer')} + + {info.head_block_producer} + + + + {t('scheduleVersion')} + + {schedule?.version} + + + + {t('headBlock')} + + {formatWithThousandSeparator(info.head_block_num)} + + + + {t('lastBlock')} + + {formatWithThousandSeparator(info.last_irreversible_block_num)} + +
@@ -140,15 +121,11 @@ const BlockProducerInfo = ({ t, classes }) => {
- +
{loading && } -
+ <> { <> - + + + {t('timeToFinality')} + + {schedule.producers + ? `${ + (Math.ceil((schedule.producers.length / 3) * 2) + 1) * 6 + } s` + : '0 s'} + + } /> -
- - - {t('timeToFinality')} - - {schedule.producers - ? `${ - (Math.ceil((schedule.producers.length / 3) * 2) + 1) * 6 - } s` - : '0 s'} - - - -
-
+ ) } diff --git a/webapp/src/routes/Home/TransactionInfo.js b/webapp/src/routes/Home/TransactionInfo.js index f4370cbd..3fe047f0 100644 --- a/webapp/src/routes/Home/TransactionInfo.js +++ b/webapp/src/routes/Home/TransactionInfo.js @@ -19,6 +19,7 @@ import { TRANSACTION_QUERY } from '../../gql' import { rangeOptions } from '../../utils' import TransactionsLineChart from '../../components/TransactionsLineChart' import { useSharedState } from '../../context/state.context' +import { generalConfig } from '../../config' import EqualIcon from './EqualIcon' import styles from './styles' @@ -31,7 +32,6 @@ const TransactionInfo = ({ t, startTrackingInfo, stopTrackingInfo, - historyEnabled, }) => { const classes = useStyles() const theme = useTheme() @@ -153,7 +153,7 @@ const TransactionInfo = ({
- {historyEnabled && ( + {generalConfig.historyEnabled && ( <> {t('timeFrame')}