refactor(webapp): fix sintax error and refactor code

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

Hide file tree

Showing 4 changed files with 56 additions and 42 deletions.
diff --git a/webapp/src/gql/producer.gql.js b/webapp/src/gql/producer.gql.js
@@ -212,20 +212,23 @@ export const EOSRATE_STATS_QUERY = gql`
 `
 
 export const FASTEST_ENDPOINTS_QUERY = gql`query($today: date){
-  endpoints: check_history_by_endpoint(limit: 5, order_by: {avg_time: asc, availability: desc}, where: {date: {_eq: $today}}) {
+  endpoints: check_history_by_endpoint(limit: 5, order_by: [{availability: desc, avg_time: asc}], where: {date: {_eq: $today}}) {
     value
     avg_time
     availability
   }
 }`
 
 export const HISTORY_ENDPOINTS_BY_PRODUCER_QUERY = gql`query($id: Int){
-  endpoints: check_history_by_endpoint(order_by: {value: asc, date: asc}, where: {producer_id: {_eq: $id}}) {
+  endpoints: check_history_by_endpoint(order_by: [{value: asc},{date: asc}], where: {producer_id: {_eq: $id}}) {
     value
     date
     avg_time
     availability
   }
+  dates: check_history_by_endpoint(order_by: {date: asc}, where: {producer_id: {_eq: $id}}, distinct_on: [date]) {
+    date
+  }
 }`
 
 
diff --git a/webapp/src/hooks/customHooks/useHealthCheckHistoryState.js b/webapp/src/hooks/customHooks/useHealthCheckHistoryState.js
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import { useLazyQuery } from '@apollo/client'
 import { useLocation } from 'react-router-dom'
+import moment from 'moment'
 
 import {
   FASTEST_ENDPOINTS_QUERY,
@@ -19,13 +20,16 @@ const useHealthCheckState = () => {
   ] = useLazyQuery(PRODUCERS_QUERY)
   const [
     loadHistory,
-    { loading: loadingHistory = true, data: { endpoints: history } = {} },
+    {
+      loading: loadingHistory = true,
+      data: { endpoints: history, dates } = {},
+    },
   ] = useLazyQuery(HISTORY_ENDPOINTS_BY_PRODUCER_QUERY)
   const [producersNames, setProducersNames] = useState()
   const [selected, setSelected] = useState()
   const [historyData, setHistoryData] = useState()
   const [statsAverage, setStatsAverage] = useState()
-  const [dates, setDates] = useState()
+  const [formattedDates, setFormattedDates] = useState()
   const location = useLocation()
 
   useEffect(() => {
@@ -47,7 +51,7 @@ const useHealthCheckState = () => {
     if (!producers?.length) return
 
     setProducersNames(
-      producers.map((producer) => ({
+      producers.map(producer => ({
         id: producer.id,
         name: producer?.bp_json?.org?.candidate_name,
       })),
@@ -65,37 +69,41 @@ const useHealthCheckState = () => {
   useEffect(() => {
     if (!history) return
 
-    const data = history.reduce((aux, curr) => {
-      const index = aux.findIndex((x) => x.name === curr.value)
-
-      if (index < 0) {
-        aux.push({
-          name: curr.value,
-          data: [curr.avg_time],
-          dates: [curr.date],
-          avg_time: curr.avg_time,
-          availability: curr.availability,
-        })
-      } else {
-        aux[index].data.push(curr.avg_time)
-        aux[index].availability = aux[index].availability + curr.availability
-        aux[index].avg_time = aux[index].avg_time + curr.avg_time
-        aux[index].dates.push(curr.date)
-      }
-
-      return aux
-    }, [])
-
-    setDates(data[0]?.dates || [])
-    setHistoryData(data)
-    setStatsAverage(
-      data.map((x) => ({
-        value: x.name,
-        avg_time: x.avg_time / x.data.length,
-        availability: x.availability / x.data.length,
-      })),
+    let previous = ''
+
+    const { data, stats } = history.reduce(
+      (aux, curr) => {
+        if (previous !== curr.value) {
+          aux.data.push({
+            name: curr.value,
+            data: [curr.avg_time],
+          })
+          aux.stats.push({
+            value: curr.value,
+            avg_time: curr.avg_time,
+            availability: curr.availability,
+            total: 1,
+          })
+
+          previous = curr.value
+        } else {
+          const index = aux.data.length  - 1
+
+          aux.data[index].data.push(curr.avg_time)
+          aux.stats[index].availability += curr.availability
+          aux.stats[index].avg_time += curr.avg_time
+          aux.stats[index].total++
+        }
+
+        return aux
+      },
+      { data: [], stats: [] },
     )
-  }, [history])
+
+    setHistoryData(data)
+    setStatsAverage(stats)
+    setFormattedDates(dates.map(item => moment(item.date).format('ll')))
+  }, [history, dates])
 
   return [
     {
@@ -104,7 +112,7 @@ const useHealthCheckState = () => {
       historyData,
       statsAverage,
       selected,
-      dates,
+      dates: formattedDates,
       loading,
       loadingHistory,
       loadingProducers,

diff --git a/webapp/src/routes/EndpointsStats/EndpointStatsTable.js b/webapp/src/routes/EndpointsStats/EndpointStatsTable.js
@@ -9,10 +9,10 @@ import TableContainer from '@mui/material/TableContainer'
 import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
 
-const EndpointsTable = ({endpoints, title}) => {
+const EndpointsTable = ({ endpoints, title }) => {
   const { t } = useTranslation('EndpointsStatsRoute')
 
-  const formatPercentage = value => {
+  const formatValue = value => {
     return Number.isInteger(value) ? value : value.toFixed(2)
   }
 
@@ -34,8 +34,12 @@ const EndpointsTable = ({endpoints, title}) => {
             {endpoints.map((item, index) => (
               <TableRow key={index}>
                 <TableCell>{item.value}</TableCell>
-                <TableCell align="right">{`${formatPercentage(item.availability)}%`}</TableCell>
-                <TableCell align="right">{`${item.avg_time.toFixed(3)} s`}</TableCell>
+                <TableCell align="right">{`${formatValue(
+                  item.availability / (item?.total || 1),
+                )}%`}</TableCell>
+                <TableCell align="right">{`${formatValue(
+                  item.avg_time / (item?.total || 1),
+                )} s`}</TableCell>
               </TableRow>
             ))}
           </TableBody>

diff --git a/webapp/src/routes/EndpointsStats/index.js b/webapp/src/routes/EndpointsStats/index.js
@@ -9,7 +9,6 @@ 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'
 
@@ -86,7 +85,7 @@ const EndpointsStats = () => {
           <HighchartsReact
             highcharts={Highcharts}
             options={{ ...options,xAxis: {
-              categories: dates.map(x => moment(x).format('ll')),
+              categories: dates,
             }, series: historyData }}
           />
           )}