fix(frontend): avoid loading ui issue (#25)

* fix(frontend): avoid loading ui issue

Signed-off-by: Roberto Bianchi <roberto.bianchi@spendesk.com>

* update

Signed-off-by: Roberto Bianchi <roberto.bianchi@spendesk.com>

* update

Signed-off-by: Roberto Bianchi <roberto.bianchi@spendesk.com>

---------

Signed-off-by: Roberto Bianchi <roberto.bianchi@spendesk.com>

Author: rozzilla

web/frontend/src/components/application/NodeJSMetric.jsx

@@ -17,7 +17,7 @@ import colorSetLatency from '~/components/metrics/latency.module.css'
 function NodeJSMetric ({
   title = '',
   metricURL = '',
-  initialLoading = true,
+  initialLoading = false,
   dataValues = [],
   unit = '',
   options = [{ label: '', internalKey: '', unit: '' }],
@@ -35,33 +35,31 @@ function NodeJSMetric ({
   const colorStyles = metricURL === 'mem' ? colorSetMem : metricURL === 'cpu' ? colorSetCpu : colorSetLatency
 
   useEffect(() => {
-    if (!initialLoading) {
-      setBorderexBoxClassName(`${styles.borderexBoxContainer}`)
-      let newValues = []
-      let lowerMaxY = 0
-      if (dataValues.length > 0) {
-        if (metricURL === 'latency') {
-          newValues = dataValues.map(({ date, ...rest }) => ({
-            time: new Date(date),
-            ...rest
-          }))
-        } else {
-          dataValues.forEach(dataValue => {
-            newValues.push({
-              time: new Date(dataValue.date),
-              values: [...options.map(option => dataValue[option.internalKey])]
-            })
-            lowerMaxY = Math.max(lowerMaxY, ...options.map(option => dataValue[option.internalKey]))
-          })
-        }
-        setSeriesValues([...newValues])
-        setShowNoResult(false)
-        setLowerMaxY(lowerMaxY)
+    setBorderexBoxClassName(`${styles.borderexBoxContainer}`)
+    let newValues = []
+    let lowerMaxY = 0
+    if (dataValues.length > 0) {
+      if (metricURL === 'latency') {
+        newValues = dataValues.map(({ date, ...rest }) => ({
+          time: new Date(date),
+          ...rest
+        }))
       } else {
-        setShowNoResult(true)
+        dataValues.forEach(dataValue => {
+          newValues.push({
+            time: new Date(dataValue.date),
+            values: [...options.map(option => dataValue[option.internalKey])]
+          })
+          lowerMaxY = Math.max(lowerMaxY, ...options.map(option => dataValue[option.internalKey]))
+        })
       }
+      setSeriesValues([...newValues])
+      setShowNoResult(false)
+      setLowerMaxY(lowerMaxY)
+    } else {
+      setShowNoResult(true)
     }
-  }, [initialLoading])
+  }, [])
 
   const generateLegend = () => {
     return (

web/frontend/src/components/application/NodeJSMetrics.jsx

@@ -26,7 +26,6 @@ function NodeJSMetrics ({
 
   useInterval(async () => {
     try {
-      setInitialLoading(true)
       const data = await getApiMetricsPod(runtimePid)
       setAllData(data)
       setLatestRefreshDate(new Date())

web/frontend/src/components/metrics/LatencyChart.jsx

@@ -130,6 +130,8 @@ const LatencyChart = ({
           .attr('y', d => y(d[percentile] || 0))
           .attr('width', barWidth)
           .attr('height', d => h - marginOnY - y(d[percentile] || 0))
+          .transition()
+          .duration(1000)
       })
 
       // Tooltip

web/frontend/src/components/metrics/NodeJSMetricChart.jsx

@@ -129,12 +129,12 @@ const NodeJSMetricChart = ({
           .attr('class', `${styles.line} ${colorStyles[`color-${i}`]}`)
           .datum(latestData)
           .attr('d', d3.line()
-            .x(p => {
-              return x(p.time)
-            })
+            .x(p => x(p.time))
             .y((p) => y(p.values[i]))
             .curve(d3.curveBasis)
           )
+          .transition()
+          .duration(1000)
           .node()
         )
 

web/frontend/src/components/metrics/ServicesMetrics.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { TRANSPARENT, RICH_BLACK, OPACITY_30, WHITE } from '@platformatic/ui-components/src/components/constants'
 import styles from './ServicesMetrics.module.css'
@@ -32,9 +32,8 @@ const ServicesMetrics = React.forwardRef(({
   const [latestRefreshDate, setLatestRefreshDate] = useState(new Date())
   const { runtimePid } = useAdminStore()
 
-  useInterval(async () => {
+  const getData = async () => {
     try {
-      setInitialLoading(true)
       setAllData(await getApiMetricsPod(runtimePid))
       setServiceData(await getApiMetricsPodService(runtimePid, serviceId))
       setLatestRefreshDate(new Date())
@@ -43,8 +42,16 @@ const ServicesMetrics = React.forwardRef(({
     } finally {
       setInitialLoading(false)
     }
+  }
+
+  useInterval(() => {
+    getData()
   }, REFRESH_INTERVAL_METRICS)
 
+  useEffect(() => {
+    getData()
+  }, [serviceId])
+
   // FIXME: unify with NodeJSMetrics logic (since it's duplicated)
   function generateLegend (labels, colorStyles) {
     return (