feat(webapp): add link to endpoints stats in the endpoints list

edenia · Mar 22, 2023 · 239777a · 239777a
1 parent f479235
commit 239777a
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 28 deletions.
diff --git a/webapp/src/components/EndpointsTable/index.js b/webapp/src/components/EndpointsTable/index.js
@@ -11,6 +11,9 @@ import TableRow from '@mui/material/TableRow'
 import Typography from '@mui/material/Typography'
 import { Tooltip as MUITooltip } from '@mui/material'
 import ListAltIcon from '@mui/icons-material/ListAlt'
+import { Link as RouterLink } from 'react-router-dom'
+import Link from '@mui/material/Link'
+import QueryStatsIcon from '@mui/icons-material/QueryStats';
 
 import HealthCheck from '../HealthCheck'
 import HealthCheckInfo from 'components/HealthCheck/HealthCheckInfo'
@@ -42,7 +45,8 @@ const EndpointsTable = ({ producers }) => {
   const getStatus = (endpoint) => {
     if (endpoint.response.status === undefined) return
 
-    const diffBlockTimems = new Date(endpoint.updated_at) - new Date(endpoint.head_block_time)
+    const diffBlockTimems =
+      new Date(endpoint.updated_at) - new Date(endpoint.head_block_time)
 
     if (diffBlockTimems <= syncToleranceInterval) {
       return 'greenLight'
@@ -122,23 +126,38 @@ const EndpointsTable = ({ producers }) => {
                 </div>
               </TableCell>
               <TableCell>
-                  <div className={classes.titleCell}>
-                    {t('p2p')}
-                    <MUITooltip title={t('showList')} arrow>
-                      <ListAltIcon
-                        onClick={(e) => {
-                          handlePopoverOpen(e.target, 'p2p')
-                        }}
-                      />
-                    </MUITooltip>
-                  </div>
-                </TableCell>
+                <div className={classes.titleCell}>
+                  {t('p2p')}
+                  <MUITooltip title={t('showList')} arrow>
+                    <ListAltIcon
+                      onClick={(e) => {
+                        handlePopoverOpen(e.target, 'p2p')
+                      }}
+                    />
+                  </MUITooltip>
+                </div>
+              </TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
             {producers.map((producer, index) => (
               <TableRow key={`${producer.name}-${index}`}>
-                <TableCell>{producer.name}</TableCell>
+                <TableCell>
+                  <div className={classes.healthContainer}>
+                      {producer.name}
+                      {!!producer.endpoints.api.length +
+                        producer.endpoints.ssl.length && (
+                        <Link
+                          component={RouterLink}
+                          state={{ producerId: producer.id }}
+                          to="/endpoints-stats"
+                          color="secondary"
+                        >
+                          <QueryStatsIcon />
+                        </Link>
+                      )}
+                    </div>
+                </TableCell>
                 <CellList producer={producer} endpointType={'api'} />
                 <CellList producer={producer} endpointType={'ssl'} />
                 <CellList producer={producer} endpointType={'p2p'} />

diff --git a/webapp/src/hooks/customHooks/useEndpointsState.js b/webapp/src/hooks/customHooks/useEndpointsState.js
@@ -34,6 +34,7 @@ const useEndpointsState = () => {
         })
 
         return {
+          id: producer.id,
           name:
             producer.bp_json?.org?.candidate_name ||
             producer?.bp_json?.org?.organization_name ||

diff --git a/webapp/src/hooks/customHooks/useHealthCheckHistoryState.js b/webapp/src/hooks/customHooks/useHealthCheckHistoryState.js
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import { useLazyQuery } from '@apollo/client'
+import { useLocation } from 'react-router-dom'
 
 import {
   FASTEST_ENDPOINTS_QUERY,
@@ -25,11 +26,13 @@ const useHealthCheckState = () => {
   const [historyData, setHistoryData] = useState()
   const [statsAverage, setStatsAverage] = useState()
   const [dates, setDates] = useState()
+  const location = useLocation()
 
   useEffect(() => {
     const endpointFilter = {
       _and: [{ type: { _in: ['ssl', 'api'] } }, { value: { _gt: '' } }],
     }
+
     loadProducers({
       variables: {
         where: { nodes: { endpoints: endpointFilter } },
@@ -49,8 +52,9 @@ const useHealthCheckState = () => {
         name: producer?.bp_json?.org?.candidate_name,
       })),
     )
-    setSelected(producers[0]?.id)
-  }, [producers])
+    setSelected(location?.state?.producerId || producers[0]?.id)
+    window.history.replaceState({}, document.title)
+  }, [producers, location])
 
   useEffect(() => {
     if (!selected) return
@@ -62,7 +66,8 @@ const useHealthCheckState = () => {
     if (!history) return
 
     const data = history.reduce((aux, curr) => {
-      const index = aux.findIndex(x => x.name === curr.value)
+      const index = aux.findIndex((x) => x.name === curr.value)
+
       if (index < 0) {
         aux.push({
           name: curr.value,
@@ -80,10 +85,11 @@ const useHealthCheckState = () => {
 
       return aux
     }, [])
+
     setDates(data[0]?.dates || [])
     setHistoryData(data)
     setStatsAverage(
-      data.map(x => ({
+      data.map((x) => ({
         value: x.name,
         avg_time: x.avg_time / x.data.length,
         availability: x.availability / x.data.length,
@@ -101,7 +107,7 @@ const useHealthCheckState = () => {
       dates,
       loading,
       loadingHistory,
-      loadingProducers
+      loadingProducers,
     },
     { setSelected },
   ]

diff --git a/webapp/src/routes/EndpointsStats/EndpointStatsTable.js b/webapp/src/routes/EndpointsStats/EndpointStatsTable.js
@@ -12,6 +12,10 @@ import TableRow from '@mui/material/TableRow'
 const EndpointsTable = ({endpoints, title}) => {
   const { t } = useTranslation('EndpointsStatsRoute')
 
+  const formatPercentage = value => {
+    return Number.isInteger(value) ? value : value.toFixed(2)
+  }
+
   return (
     <>
       <Typography component="p" variant="h6">
@@ -30,7 +34,7 @@ const EndpointsTable = ({endpoints, title}) => {
             {endpoints.map((item, index) => (
               <TableRow key={index}>
                 <TableCell>{item.value}</TableCell>
-                <TableCell align="right">{`${item.availability}%`}</TableCell>
+                <TableCell align="right">{`${formatPercentage(item.availability)}%`}</TableCell>
                 <TableCell align="right">{`${item.avg_time.toFixed(3)} s`}</TableCell>
               </TableRow>
             ))}

diff --git a/webapp/src/routes/EndpointsStats/index.js b/webapp/src/routes/EndpointsStats/index.js
@@ -8,6 +8,7 @@ import LinearProgress from '@mui/material/LinearProgress'
 import MenuItem from '@mui/material/MenuItem'
 import Highcharts from 'highcharts'
 import HighchartsReact from 'highcharts-react-official'
+import FormControl from '@mui/material/FormControl'
 import moment from 'moment'
 import Select from '@mui/material/Select'
 import { makeStyles } from '@mui/styles'
@@ -67,11 +68,19 @@ const EndpointsStats = () => {
           </Typography>
           <br />
           {producersNames?.length && (
-            <Select value={selected} onChange={(event) => setSelected(event.target.value)}>
-              {producersNames.map(producer => (
-                <MenuItem key={producer.id} value={producer.id}>{producer.name}</MenuItem>
-              ))}
-            </Select>
+            <FormControl variant="standard">
+              <Select
+                value={selected}
+                onChange={(event) => setSelected(event.target.value)}
+                fullWidth
+              >
+                {producersNames.map((producer) => (
+                  <MenuItem key={producer.id} value={producer.id}>
+                    {producer.name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
           )}
           {historyData && (
           <HighchartsReact
@@ -82,10 +91,10 @@ const EndpointsStats = () => {
           />
           )}
           {statsAverage && (
-          <EndpointsTable
-            title={t('list')}
-            endpoints={statsAverage}
-          />
+            <EndpointsTable
+              title={t('list')}
+              endpoints={statsAverage}
+            />
           )}
         </CardContent>
       </Card>