Merge pull request #1220 from edenia/feat/add-stats-stress-test-dashb…

…oard Feat/add stats stress test dashboard
edenia · Jun 23, 2023 · fbc232c · fbc232c
2 parents 2aa8403 + 5c49905
commit fbc232c
Show file tree

Hide file tree

Showing 13 changed files with 315 additions and 388 deletions.
diff --git a/.github/workflows/deploy-libre.yaml b/.github/workflows/deploy-libre.yaml
@@ -56,7 +56,7 @@ jobs:
           REACT_APP_SYNC_TOLERANCE_INTERVAL: 180000
           REACT_APP_TOKEN_SYMBOL: 'LIBRE'
           REACT_APP_NETWORK_URL:  '[{"label":"EOS","value":"https://eos.antelope.tools","mainnet":true,"pair":"eos","icon":"eos","order":1},{"label":"Proton","value":"https://proton.antelope.tools","mainnet":true,"pair":"proton","icon":"proton","order":2},{"label":"WAX","value":"https://wax.antelope.tools","mainnet":true,"pair":"wax","icon":"wax","order":3},{"label":"Telos","value":"https://telos.antelope.tools","mainnet":true,"pair":"telos","icon":"telos","order":4},{"label":"Libre","value":"https://libre.antelope.tools","mainnet":true,"pair":"libre","icon":"libre","order":5},{"label":"LACChain EOSIO","value":"https://lacchain.antelope.tools","mainnet":true,"pair":null,"icon":"lacchain","order":6},{"label":"Jungle4 Testnet","value":"https://jungle.antelope.tools","mainnet":false,"pair":"eos","icon":"jungle","order":1},{"label":"Proton Testnet","value":"https://proton-testnet.antelope.tools","mainnet":false,"pair":"proton","icon":"proton","order":2},{"label":"WAX Testnet","value":"https://wax-testnet.antelope.tools","mainnet":false,"pair":"wax","icon":"wax","order":3},{"label":"Telos Testnet","value":"https://telos-testnet.antelope.tools","mainnet":false,"pair":"telos","icon":"telos","order":4},{"label":"Libre Testnet","value":"https://libre-testnet.antelope.tools","mainnet":false,"pair":"libre","icon":"libre","order":5},{"label":"Ultra Testnet","value":"https://ultra-testnet.antelope.tools","mainnet":false,"pair":"ultra","icon":"ultra","order":6}]'
-          REACT_APP_DISABLED_MENU_ITEMS: '["/missed-blocks","/block-distribution"]'
+          REACT_APP_DISABLED_MENU_ITEMS: '["/missed-blocks","/block-distribution","/stress-test"]'
           REACT_APP_BLOCK_EXPLORER_URL: 'https://www.libreblocks.io/tx/(transaction)'
           REACT_APP_STATE_HISTORY_ENABLED=: 'false'
           REACT_APP_GOOGLE_ANALITIC_PAGE_ID: 'G-E6Y0EC9FT8'

diff --git a/webapp/src/components/NodesSummary/index.js b/webapp/src/components/NodesSummary/index.js
@@ -1,31 +1,30 @@
 /* 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'
 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,
     full: 2,
     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,41 +93,31 @@ const NodesSummary = ({ t, classes }) => {
 
   return (
     <>
-      <div className={classes.cardGrow}>
-        <Card className={classes.cardShadow}>
-          <CardContent className={classes.cards}>
-            <Typography>{`${t('total')} ${t('nodes')}`}</Typography>
-            <BodyGraphValue value={total} loading={loading} />
-          </CardContent>
-        </Card>
-      </div>
+      <SimpleDataCard>
+        <Typography>{`${t('total')} ${t('nodes')}`}</Typography>
+        <BodyGraphValue value={total} loading={loading} />
+      </SimpleDataCard>
 
       {nodes &&
         nodes.map((node) => (
-          <div className={classes.cardGrow} key={node.type}>
-            <Card className={classes.cardShadow}>
-              <CardContent className={classes.cards}>
-                <Typography>
-                  {currentLanguaje === 'es' ? t('nodes') : ''} {t(node.type)}{' '}
-                  {currentLanguaje !== 'es' ? t('nodes') : ''}
-                </Typography>
-                <BodyGraphValue value={node.value || 0} loading={loading} />
-              </CardContent>
-            </Card>
-          </div>
+          <SimpleDataCard key={node.type}>
+            <Typography>
+              {currentLanguaje === 'es' ? t('nodes') : ''} {t(node.type)}{' '}
+              {currentLanguaje !== 'es' ? t('nodes') : ''}
+            </Typography>
+            <BodyGraphValue value={node.value || 0} loading={loading} />
+          </SimpleDataCard>
         ))}
     </>
   )
 }
 
 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
@@ -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 <LinearProgress />
@@ -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,46 +54,33 @@ const ProducersSummary = ({ t, classes, data, loading, total }) => {
 
   return (
     <>
-      <div className={classes.cardGrow}>
-        <Card className={classes.cardShadow}>
-          <CardContent className={classes.cards}>
-            <Typography>{`${t('total')} ${t('producers')}`}</Typography>
-            <BodyGraphValue value={total} loading={loading} />
-          </CardContent>
-        </Card>
-      </div>
+      <SimpleDataCard>
+        <Typography>{`${t('total')} ${t('producers')}`}</Typography>
+        <BodyGraphValue value={total} loading={loading} />
+      </SimpleDataCard>
 
       {nodes.map((node, index) => (
-        <div className={classes.cardGrow} key={index}>
-          <Card className={classes.cardShadow}>
-            <CardContent className={classes.cards}>
-              <Typography>{`${t(node.type)} ${t('producers')}`}</Typography>
-              <BodyGraphValue
-                value={node.entities_count || 0}
-                loading={loading}
-              />
-            </CardContent>
-          </Card>
-        </div>
+        <SimpleDataCard key={index}>
+          <Typography>{`${t(node.type)} ${t('producers')}`}</Typography>
+          <BodyGraphValue value={node.entities_count || 0} loading={loading} />
+        </SimpleDataCard>
       ))}
     </>
   )
 }
 
 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
@@ -0,0 +1,32 @@
+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 = ({ header, children }) => {
+  const classes = useStyles()
+
+  return (
+    <div className={header ? classes.cardHeader : classes.cardGrow} >
+      <Card className={classes.cardShadow}>
+        <CardContent className={classes.cards}>{children}</CardContent>
+      </Card>
+    </div>
+  )
+}
+
+SimpleDataCard.propTypes = {
+  header: PropTypes.bool,
+  children: PropTypes.node,
+}
+
+SimpleDataCard.defaultProps = {
+  header: false,
+}
+
+export default SimpleDataCard
diff --git a/webapp/src/components/SimpleDataCard/styles.js b/webapp/src/components/SimpleDataCard/styles.js
@@ -0,0 +1,36 @@
+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%',
+      },
+    },
+  })