Merge pull request #572 from eoscostarica/fix/ui-issues

UI issues
edenia · Jun 4, 2021 · 0d4dc46 · 0d4dc46
2 parents 027c55f + 11903cc
commit 0d4dc46
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 56 deletions.
diff --git a/.env.jungle b/.env.jungle
@@ -50,7 +50,7 @@ PORT=3000
 REACT_APP_TAG=dev
 REACT_APP_NAME=$npm_package_name
 REACT_APP_TITLE=EOS Jungle Testnet Network Dashboard
-REACT_APP_DEFAULT_PRODUCER_LOGO=https://bloks.io/img/eosio.png
+REACT_APP_DEFAULT_PRODUCER_LOGO=https://jungle.eosio.online/jungle.png
 REACT_APP_FOOTER_LINKS=[{"text":"Website","src":"https://jungletestnet.io/"},{"text":"Block Explorer","src":"https://jungle3.bloks.io"},{"text":"Developer Guidelines","src":"https://guide.eoscostarica.io"},{"text":"GitHub","src":"https://github.com/eoscostarica/eosio-dashboard"}]
 REACT_APP_EOS_RATE_LINK=https://jungle.eosrate.io:8080
 REACT_APP_USE_REWARDS=true
@@ -60,7 +60,7 @@ REACT_APP_USE_BLOCK_PRODUCER_AGREEMENT_CONTRACT=true
 REACT_APP_HASURA_URL=http://localhost:8585/v1/graphql
 REACT_APP_EOS_API_NETWORK_NAME=jungle
 REACT_APP_EOS_API_NETWORK_LABEL=Jungle
-REACT_APP_EOS_API_NETWORK_LOGO=https://jungletestnet.io/assets/jungle-testnet-logo.png
+REACT_APP_EOS_API_NETWORK_LOGO=https://jungle.eosio.online/jungle.png
 REACT_APP_EOS_API_HOST=jungle.eosio.cr
 REACT_APP_EOS_API_PORT=443
 REACT_APP_EOS_API_PROTOCOL=https

diff --git a/.github/workflows/push-dev-environment.yaml b/.github/workflows/push-dev-environment.yaml
@@ -34,7 +34,7 @@ jobs:
           PORT: 80
           REACT_APP_TITLE: EOS Jungle Testnet Network Dashboard
           REACT_APP_TAG: ${{ github.ref }}
-          REACT_APP_DEFAULT_PRODUCER_LOGO: https://bloks.io/img/eosio.png
+          REACT_APP_DEFAULT_PRODUCER_LOGO: https://jungle.eosio.online/jungle.png
           REACT_APP_FOOTER_LINKS: '[{"text":"Website","src":"https://jungletestnet.io/"},{"text":"Block Explorer","src":"https://jungle3.bloks.io"},{"text":"Developer Guidelines","src":"https://guide.eoscostarica.io"},{"text":"GitHub","src":"https://github.com/eoscostarica/eosio-dashboard"}]'
           REACT_APP_EOS_RATE_LINK: https://jungle.eosrate.io:8080
           REACT_APP_USE_REWARDS: true
@@ -44,7 +44,7 @@ jobs:
           REACT_APP_HASURA_URL: https://graphql-jungle.eosio.online/v1/graphql
           REACT_APP_EOS_API_NETWORK_NAME: jungle
           REACT_APP_EOS_API_NETWORK_LABEL: Jungle
-          REACT_APP_EOS_API_NETWORK_LOGO: https://jungletestnet.io/assets/jungle-testnet-logo.png
+          REACT_APP_EOS_API_NETWORK_LOGO: https://jungle.eosio.online/jungle.png
           REACT_APP_EOS_API_HOST: jungle.eosio.cr
           REACT_APP_EOS_API_PORT: 443
           REACT_APP_EOS_API_PROTOCOL: https

diff --git a/webapp/public/jungle.png b/webapp/public/jungle.png
diff --git a/webapp/src/components/InformationCard/Stats.js b/webapp/src/components/InformationCard/Stats.js
@@ -13,15 +13,13 @@ const Stats = ({ missedBlocks, t, classes, votes, rewards, type }) => {
       <Typography variant="overline">{t('stats')}</Typography>
       <Box className={classes.borderLine}>
         <Box className={classes.rowWrapper}>
-          <Typography variant="body1">{`${t(
-            'votes'
-          )}: ${votes}eos`}</Typography>
+          <Typography variant="body1">{`${t('votes')}: ${votes}`}</Typography>
         </Box>
 
         <Box className={classes.rowWrapper}>
           <Typography variant="body1">{`${t(
             'rewards'
-          )}: ${rewards}`}</Typography>
+          )}: ${rewards} EOS`}</Typography>
         </Box>
 
         <Box className={classes.rowWrapper}>

diff --git a/webapp/src/components/InformationCard/index.js b/webapp/src/components/InformationCard/index.js
@@ -40,6 +40,24 @@ const InformationCard = ({ producer, rank, onNodeClick, type }) => {
     setExpanded(!expanded)
   }
 
+  const missedBlock = (producer, nodeType, type) => {
+    if (eosConfig.networkName !== 'lacchain') return <></>
+
+    if (type !== 'node' || nodeType !== 'validator') return <></>
+
+    return (
+      <Box className={classes.rowWrapper}>
+        <Typography variant="body1">
+          {`${t('missedBlocks')}: `}
+          {(producer.missed_blocks || []).reduce(
+            (result, current) => result + current.value,
+            0
+          )}
+        </Typography>
+      </Box>
+    )
+  }
+
   useEffect(() => {
     setProducerOrg(
       formatData(
@@ -91,11 +109,11 @@ const InformationCard = ({ producer, rank, onNodeClick, type }) => {
               missedBlocks={producer.missed_blocks || []}
               votes={formatWithThousandSeparator(
                 producer.total_votes_eos || '0',
-                2
+                0
               )}
               rewards={formatWithThousandSeparator(
                 producer.total_rewards || '0',
-                2
+                0
               )}
             />
             <Endpoints
@@ -115,18 +133,7 @@ const InformationCard = ({ producer, rank, onNodeClick, type }) => {
             <Box className={classes.healthStatus}>
               <Typography variant="overline">{t('health')}</Typography>
               <Box className={classes.borderLine}>
-                {eosConfig.networkName === 'lacchain' && (
-                  <Box className={classes.rowWrapper}>
-                    <Typography variant="body1">
-                      {`${t('missedBlocks')}: `}
-                      {(producer.missed_blocks || []).reduce(
-                        (result, current) => result + current.value,
-                        0
-                      )}
-                    </Typography>
-                  </Box>
-                )}
-
+                {missedBlock(producer, producerOrg?.media?.account, type)}
                 <ProducerHealthIndicators
                   message={t('noData')}
                   producer={

diff --git a/webapp/src/components/NodesSummary.js b/webapp/src/components/NodesSummary.js
@@ -58,16 +58,27 @@ const NodesSummary = ({ t, classes }) => {
       </Grid>
 
       {nodes &&
-        Object.keys(nodes).map((type) => (
-          <Grid item xs={12} sm={4} lg={3} key={type}>
-            <Card>
-              <CardContent className={classes.cards}>
-                <Typography>{t(type)}</Typography>
-                <BodyGraphValue value={nodes[type] || 0} loading={loading} />
-              </CardContent>
-            </Card>
-          </Grid>
-        ))}
+        Object.keys(nodes).map((type) => {
+          let label = type
+
+          if (type[0] === '[' && type[type.length - 1] === ']') {
+            label = type
+              .replace(/\[/g, '')
+              .replace(/\]/g, '')
+              .replace(/['"]+/g, '')
+          }
+
+          return (
+            <Grid item xs={12} sm={4} lg={3} key={type}>
+              <Card>
+                <CardContent className={classes.cards}>
+                  <Typography>{t(label)}</Typography>
+                  <BodyGraphValue value={nodes[type] || 0} loading={loading} />
+                </CardContent>
+              </Card>
+            </Grid>
+          )
+        })}
     </>
   )
 }

diff --git a/webapp/src/components/TransactionsHistory.js b/webapp/src/components/TransactionsHistory.js
@@ -49,41 +49,39 @@ const TransactionsHistory = ({ t, classes }) => {
     if (data?.stats?.[0]?.tps_all_time_high?.blocks?.length) {
       const result = data.stats[0].tps_all_time_high.blocks.reduce(
         (prev, current) => {
+          const isTpsLinkValid =
+            prev.tps.link && prev.tps.value > current.transactions_count
+          const isCpuLinkValid =
+            prev.cpu.link && prev.cpu.value > current.transactions_count
+
           return {
             tps: {
-              value:
-                prev.value > current.transactions_count
-                  ? prev.value
-                  : current.transactions_count,
+              value: data.stats[0].tps_all_time_high.transactions_count,
               link: getBlockNumUrl(
-                prev.value > current.transactions_count
-                  ? prev.link
-                  : current.block_num
+                isTpsLinkValid ? prev.tps.link : current.block_num
               )
             },
             cpu: {
               value: formatWithThousandSeparator(
-                prev.value > current.cpu_usage_percent
-                  ? prev.value
+                prev.cpu.value > current.cpu_usage_percent
+                  ? prev.cpu.value
                   : current.cpu_usage_percent * 100,
                 1
               ),
               link: getBlockNumUrl(
-                prev.value > current.cpu_usage_percent
-                  ? prev.link
-                  : current.block_num
+                isCpuLinkValid ? prev.cpu.link : current.block_num
               )
             }
           }
         },
         {
           tps: {
             value: 0,
-            link: ''
+            link: null
           },
           cpu: {
             value: 0,
-            link: ''
+            link: null
           }
         }
       )
@@ -173,7 +171,8 @@ const TransactionsHistory = ({ t, classes }) => {
             )}`}</Typography>
             <BodyGraphValue
               value={formatWithThousandSeparator(
-                data?.stats?.[0]?.average_daily_transactions_in_last_week || 0
+                data?.stats?.[0]?.average_daily_transactions_in_last_week || 0,
+                0
               )}
               loading={loading}
             />

diff --git a/webapp/src/language/en.lacchain.json b/webapp/src/language/en.lacchain.json
@@ -33,10 +33,10 @@
     "producerName": "Entity name",
     "producers": "Entities",
     "producer": "Entity",
-    "boot": "Boot",
-    "writer": "Writer",
-    "observer": "Observer",
-    "validator": "Validator",
+    "boot": "Boot Nodes",
+    "writer": "Writer Nodes",
+    "observer": "Observer Nodes",
+    "validator": "Validator Nodes",
     "partner": "Partner",
     "nonPartner": "Non-Partner"
   },

diff --git a/webapp/src/language/es.lacchain.json b/webapp/src/language/es.lacchain.json
@@ -32,10 +32,10 @@
     "producerName": "Nombre de la entidad",
     "producers": "Entidades",
     "producer": "Entidad",
-    "boot": "Boot",
-    "writer": "Escritor",
-    "observer": "Observador",
-    "validator": "Validador",
+    "boot": "Nodos Boot",
+    "writer": "Nodos Escritores",
+    "observer": "Nodos Observadores",
+    "validator": "Nodos Validadores",
     "partner": "Partner",
     "nonPartner": "Non-Partner"
   },

diff --git a/webapp/src/routes/Home/styles.js b/webapp/src/routes/Home/styles.js
@@ -71,7 +71,8 @@ export default (theme) => ({
     marginBottom: 2
   },
   svgLink: {
-    fontSize: 20
+    fontSize: 18,
+    marginLeft: theme.spacing(2)
   },
   lowercase: {
     textTransform: 'lowercase !important'