feat(webapp): add average cpu and net usage stats

edenia · Jul 11, 2023 · c7d6721 · c7d6721
1 parent 9887b7f
commit c7d6721
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 7 deletions.
diff --git a/webapp/src/components/TransactionsHistory/index.js b/webapp/src/components/TransactionsHistory/index.js
@@ -68,7 +68,7 @@ const TransactionsHistory = ({ t, nodesChildren }) => {
           <SimpleDataCard>
             <Typography>{t('cpuUtilizationAllTimeHigh')}</Typography>
             <BodyGraphValue
-              value={data?.stats[0]?.tps_all_time_high?.cpu_usage || 0}
+              value={`${data?.stats[0]?.tps_all_time_high?.cpu_usage || 0} %`}
               classes={classes}
               href={getBlockNumUrl(
                 data?.stats?.[0]?.tps_all_time_high?.blocks[0],
@@ -79,7 +79,7 @@ const TransactionsHistory = ({ t, nodesChildren }) => {
           <SimpleDataCard>
             <Typography>{t('networkUtilizationAllTimeHigh')}</Typography>
             <BodyGraphValue
-              value={data?.stats[0]?.tps_all_time_high?.net_usage || 0}
+              value={`${data?.stats[0]?.tps_all_time_high?.net_usage || 0} %`}
               classes={classes}
               href={getBlockNumUrl(
                 data?.stats?.[0]?.tps_all_time_high?.blocks[0],
@@ -126,6 +126,48 @@ const TransactionsHistory = ({ t, nodesChildren }) => {
               loading={loading}
             />
           </SimpleDataCard>
+          <SimpleDataCard>
+            <Typography>{`${t('cpuUtilization')} ${t('lastHour')}`}</Typography>
+            <BodyGraphValue
+              value={`${data?.stats?.[0]?.average_cpu_usage_in_hour || 0} %`}
+              loading={loading}
+            />
+          </SimpleDataCard>
+          <SimpleDataCard>
+            <Typography>{`${t('cpuUtilization')} ${t('lastDay')}`}</Typography>
+            <BodyGraphValue
+              value={`${data?.stats?.[0]?.average_cpu_usage_in_last_day || 0} %`}
+              loading={loading}
+            />
+          </SimpleDataCard>
+          <SimpleDataCard>
+            <Typography>{`${t('cpuUtilization')} ${t('lastWeek')}`}</Typography>
+            <BodyGraphValue
+              value={`${data?.stats?.[0]?.average_cpu_usage_in_week || 0} %`}
+              loading={loading}
+            />
+          </SimpleDataCard>
+          <SimpleDataCard>
+            <Typography>{`${t('netUtilization')} ${t('lastHour')}`}</Typography>
+            <BodyGraphValue
+              value={`${data?.stats?.[0]?.average_net_usage_in_hour || 0} %`}
+              loading={loading}
+            />
+          </SimpleDataCard>
+          <SimpleDataCard>
+            <Typography>{`${t('netUtilization')} ${t('lastDay')}`}</Typography>
+            <BodyGraphValue
+              value={`${data?.stats?.[0]?.average_net_usage_in_last_day || 0} %`}
+              loading={loading}
+            />
+          </SimpleDataCard>
+          <SimpleDataCard>
+            <Typography>{`${t('netUtilization')} ${t('lastWeek')}`}</Typography>
+            <BodyGraphValue
+              value={`${data?.stats?.[0]?.average_net_usage_in_week || 0} %`}
+              loading={loading}
+            />
+          </SimpleDataCard>
         </>
       )}
       {nodesChildren && (

diff --git a/webapp/src/gql/producer.gql.js b/webapp/src/gql/producer.gql.js
@@ -127,6 +127,12 @@ export const BLOCK_TRANSACTIONS_HISTORY = gql`
       transactions_in_last_day
       transactions_in_last_week
       average_daily_transactions_in_last_week
+      average_cpu_usage_in_last_day
+      average_net_usage_in_last_day
+      average_cpu_usage_in_last_hour
+      average_net_usage_in_last_hour
+      average_cpu_usage_in_last_week
+      average_net_usage_in_last_week
       tps_all_time_high
       unique_locations
       missed_blocks

diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json
@@ -137,8 +137,10 @@
     "scheduleVersion": "Schedule Version",
     "secondsAgo": "Seconds Ago",
     "tpsAllTimeHigh": "TPS All Time High",
-    "cpuUtilizationAllTimeHigh": "CPU Utilization All Time High",
-    "networkUtilizationAllTimeHigh": "Network Utilization All Time High",
+    "cpuUtilization": "CPU Usage",
+    "netUtilization": "NET Usage",
+    "cpuUtilizationAllTimeHigh": "CPU Usage All Time High",
+    "networkUtilizationAllTimeHigh": "NET Usage All Time High",
     "transactionsPerSecond": "Transactions per Second",
     "transactionsPerBlock": "Transactions per Block",
     "nodes": "Nodes",

diff --git a/webapp/src/language/es.json b/webapp/src/language/es.json
@@ -141,8 +141,10 @@
     "Last Year": "Último Año",
     "scheduleVersion": "Versión de Programa",
     "secondsAgo": "Hace Segundos",   
-    "cpuUtilizationAllTimeHigh": "Máxima utilización de cpu",
-    "networkUtilizationAllTimeHigh": "Máxima utilización de la red",
+    "cpuUtilization": "Uso de CPU",
+    "netUtilization": "Uso de NET",
+    "cpuUtilizationAllTimeHigh": "Máxima uso de CPU",
+    "networkUtilizationAllTimeHigh": "Máxima uso de NET",
     "tpsAllTimeHigh": "TPS máximo histórico",
     "transactionsPerSecond": "Transacciones por segundo",
     "transactionsPerBlock": "Transacciones por bloque",
@@ -157,7 +159,7 @@
     "transactions": "Transacciones",
     "uniqueLocations": "Ubicaciones únicas",
     "cpuLimitPerBlock": "Límite de CPU por bloque",
-    "netLimitPerBlock": "Límite Red por bloque",
+    "netLimitPerBlock": "Límite NET por bloque",
     "chainCpuLimit": "Límite de CPU en cadena",
     "chainNetLimit": "Límite de Net en cadena",
     "timeToFinality": "Tiempo para finalidad",