feat(webapp): add loader when the health check has not been executed …

…and refactor getStatus
edenia · Apr 26, 2023 · 015bab1 · 015bab1
1 parent 5b18b2d
commit 015bab1
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 22 deletions.
diff --git a/webapp/src/components/EndpointsTable/index.js b/webapp/src/components/EndpointsTable/index.js
@@ -46,15 +46,17 @@ const EndpointsTable = ({ producers }) => {
     const diffBlockTimems =
       new Date(endpoint.updated_at) - new Date(endpoint.head_block_time)
 
-    return diffBlockTimems <= syncToleranceInterval || !endpoint.head_block_time
+    return diffBlockTimems <= syncToleranceInterval
   }
 
   const getStatus = endpoint => {
     if (endpoint.response.status === undefined) return
 
     switch (Math.floor(endpoint.response?.status / 100)) {
       case 2:
-        return isSynchronized(endpoint) ? 'greenLight' : 'timerOff'
+        return !endpoint.head_block_time || isSynchronized(endpoint)
+          ? 'greenLight'
+          : 'timerOff'
       case 4:
       case 5:
         return 'yellowLight'

diff --git a/webapp/src/components/EndpointsTextList/index.js b/webapp/src/components/EndpointsTextList/index.js
@@ -42,7 +42,7 @@ const EndpointsTextList = ({ type }) => {
 
   return (
     <>
-      {!loading && textList?.length && (
+      {!loading && !!textList?.length && (
         <div className={classes.container}>
           <CopyToClipboard text={textList} />
           {textList}

diff --git a/webapp/src/components/HealthCheck/index.js b/webapp/src/components/HealthCheck/index.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { makeStyles } from '@mui/styles'
+import { CircularProgress } from '@mui/material'
 
 import Tooltip from '../Tooltip'
 
@@ -12,6 +13,9 @@ const HealthCheck = ({ children, status }) => {
   const classes = useStyles()
   const [anchorEl, setAnchorEl] = useState(null)
 
+  if (status === undefined)
+    return <CircularProgress className={classes.loading} />
+
   const handlePopoverOpen = (target) => {
     setAnchorEl(target)
   }
@@ -20,8 +24,6 @@ const HealthCheck = ({ children, status }) => {
     setAnchorEl(null)
   }
 
-  if (status === undefined) return
-
   const openPopOver = (event) => {
     handlePopoverOpen(event.target)
   }

diff --git a/webapp/src/components/HealthCheck/styles.js b/webapp/src/components/HealthCheck/styles.js
@@ -43,4 +43,8 @@ export default (theme) => ({
   test: {
     boxShadow: '10px 5px 5px red !important',
   },
+  loading: {
+    width: '18px !important',
+    height: '18px !important',
+  }
 })
diff --git a/webapp/src/components/NodeCard/EndpointsChips.js b/webapp/src/components/NodeCard/EndpointsChips.js
@@ -49,11 +49,17 @@ const EndpointsChips = ({ node }) => {
     const { t } = useTranslation('endpointInfoComponent')
     const { totalEndpoints, failingEndpoints, updatedAt } = status
     const workingEndpoints = totalEndpoints - failingEndpoints.length
-    const healthStatus = getHealthStatus(totalEndpoints, workingEndpoints)
+    let healthStatus
+
+    if(!status.isLoading) {
+      healthStatus = getHealthStatus(totalEndpoints, workingEndpoints)
+    }
 
     return (
       <div className={classes.lightIcon}>
-        {`${workingEndpoints}/${totalEndpoints}`}
+        {healthStatus && (
+          <span>{`${workingEndpoints}/${totalEndpoints}`}</span>
+        )}
         <HealthCheck status={healthStatus}>
           <Typography>{t('status')}</Typography>
           <Typography>
@@ -66,29 +72,34 @@ const EndpointsChips = ({ node }) => {
     )
   }
 
-  const defaultStatus = {
+  const checkedEndpoints = node.endpoints.filter(endpoint => endpoint.type !== 'p2p')
+  const status = {
     totalEndpoints: 0,
     failingEndpoints: [],
-    updatedAt: 'NA',
+    updatedAt: 'N/A',
+    isLoading: false
   }
-  const status = node.endpoints.reduce((status, endpoint) => {
-    if (endpoint?.type !== 'p2p') {
-      if (endpoint?.response?.status !== 200) {
-        status.failingEndpoints.push(endpoint.type)
-      }
-
-      status.totalEndpoints += 1
-      status.updatedAt = endpoint.updated_at
+
+  for (const endpoint of checkedEndpoints){
+    if (endpoint?.response?.status === undefined) {
+      status.isLoading = true
+
+      break
     }
 
-    return status
-  }, defaultStatus)
+    if (endpoint?.response?.status !== 200) {
+      status.failingEndpoints.push(endpoint.type)
+    }
+
+    status.totalEndpoints += 1
+    status.updatedAt = endpoint.updated_at
+  }
 
   return (
     <>
       <dt className={`${classes.bold} ${classes.endpointsTitle}`}>
         {t('endpoints')}
-        {!!status.totalEndpoints && <EndpointsInfo status={status} />}
+        {!!checkedEndpoints.length && <EndpointsInfo status={status} />}
       </dt>
       <ChipList
         list={node.endpoints.map(({ type, value }) => {

diff --git a/webapp/src/components/NodeCard/styles.js b/webapp/src/components/NodeCard/styles.js
@@ -54,8 +54,8 @@ export default (theme) => ({
     display: 'flex',
     fontWeight: 'normal',
     marginLeft: theme.spacing(3),
-    '& svg': {
-      marginLeft: theme.spacing(2),
+    '& span': {
+      marginRight: theme.spacing(2),
     },
   },
   keysContainer: {