Refactors RunEndpointsCharts

Farfetch · Sep 27, 2023 · 035a9ff · 035a9ff
1 parent ccc76d0
commit 035a9ff
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 29 deletions.
diff --git a/web/frontend/src/components/Run/RunningStatus/EndpointCharts/RunEndpointCharts.js b/web/frontend/src/components/Run/RunningStatus/EndpointCharts/RunEndpointCharts.js
@@ -14,45 +14,36 @@ import {
 import { orderBy } from "lodash";
 import React, { useEffect, useState } from "react";
 
-import { fetchMetrics } from "../../../../lib/api/endpoints/runMetric";
 import PageSpinner from "../../../layout/PageSpinner";
 import HitsErrorsLabelLine from "./HitsErrorsLabelLine";
 
-const RunEndpointsCharts = ({ run, labelToShowGraph }) => {
-  const defaultTimeInterval = 5;
-  const showLabels = true;
+const RunEndpointsCharts = ({
+  run,
+  metrics,
+  isLoading,
+  labelToShowGraph,
+  setTimeInterval
+}) => {
   const [runMetrics, setRunMetrics] = useState([]);
   const [copyRunMetrics, setCopyRunMetrics] = useState([]);
   const [labelsToShow, setLabelsToShow] = useState([labelToShowGraph]);
-  const [timeInterval, setTimeInterval] = useState(defaultTimeInterval);
-  const [isLoading, setIsLoading] = useState(false);
   const [excludedPrefix, setExcludedPrefix] = useState("UJ");
   const [excludedPrefixes, setExcludedPrefixes] = useState([]);
+  const [currentTimeInterval, setCurrentTimeInterval] = useState(5);
 
-  const updateRunMetrics = async (runIdToFetch) => {
-    setIsLoading(true);
-    const metrics = await fetchMetrics(runIdToFetch, timeInterval, showLabels);
-
+  useEffect(() => {
     setRunMetrics(metrics);
     setCopyRunMetrics(metrics);
-    setIsLoading(false);
-  };
-
-  useEffect(() => {
-    updateRunMetrics(run.id);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [run]);
+  }, [metrics]);
 
   const refreshChart = async () => {
-    let metrics = [];
     if (run.runStatus === "RUNNING") {
-      metrics = await fetchMetrics(run.id, timeInterval, showLabels);
+      setRunMetrics(metrics);
     } else {
-      metrics = copyRunMetrics;
+      setRunMetrics(copyRunMetrics);
       setExcludedPrefixes([]);
     }
-
-    setRunMetrics(metrics);
   };
 
   const labels = orderBy(
@@ -112,6 +103,10 @@ const RunEndpointsCharts = ({ run, labelToShowGraph }) => {
     setLabelsToShow([]);
   };
 
+  const handleOnTimeIntervalChange = (value) => {
+    setTimeInterval(value);
+    setCurrentTimeInterval(value);
+  };
   return (
     <Form>
       {isLoading ? (
@@ -127,8 +122,8 @@ const RunEndpointsCharts = ({ run, labelToShowGraph }) => {
                     mode="single"
                     style={{ width: "100px" }}
                     placeholder="Choose time interval"
-                    defaultValue={defaultTimeInterval}
-                    onChange={(value) => setTimeInterval(value)}
+                    defaultValue={currentTimeInterval}
+                    onChange={handleOnTimeIntervalChange}
                   >
                     <Select.Option key={1}>1 sec</Select.Option>
                     <Select.Option key={5}>5 sec</Select.Option>

diff --git a/web/frontend/src/components/Run/RunningStatus/MetricsHandler/MetricsHandler.js b/web/frontend/src/components/Run/RunningStatus/MetricsHandler/MetricsHandler.js
@@ -8,6 +8,7 @@ import { calculateErrorRate } from "../../../../lib/utils";
 
 const MetricsHandler = ({ run, children }) => {
   const [runMetrics, setMetrics] = useState([]);
+  const [runMetricsRaw, setRawMetrics] = useState([]);
   const [errorCodes, setErrorCodes] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [totals, setTotals] = useState({
@@ -21,13 +22,19 @@ const MetricsHandler = ({ run, children }) => {
     totalCount: 0,
     totalRpm: 0
   });
+  const [timeInterval, setTimeInterval] = useState(5);
   const refreshInterval = 5000;
   const timerRef = useRef(null);
 
   const updateRunMetrics = async (runIdToFetch) => {
     setIsLoading(true);
 
-    const metricsRes = await fetchMetrics(runIdToFetch, 0, true);
+    const metricsZeroInterval = await fetchMetrics(runIdToFetch, 0, true);
+    const metricsTimeInterval = await fetchMetrics(
+      runIdToFetch,
+      timeInterval,
+      true
+    );
 
     const getRpm = (minDatetime, maxDatetime, totalCount) => {
       const dateDuration = moment.duration(maxDatetime.diff(minDatetime));
@@ -37,7 +44,7 @@ const MetricsHandler = ({ run, children }) => {
       return parseFloat((totalCount / diffInSeconds) * 60).toFixed(0);
     };
 
-    const formattedUrlMetrics = metricsRes.map(
+    const formattedUrlMetrics = metricsZeroInterval.map(
       ({
         minDatetime,
         maxDatetime,
@@ -71,6 +78,7 @@ const MetricsHandler = ({ run, children }) => {
       }
     );
 
+    setRawMetrics(metricsTimeInterval);
     setMetrics(formattedUrlMetrics);
     setIsLoading(false);
   };
@@ -161,7 +169,7 @@ const MetricsHandler = ({ run, children }) => {
   useEffect(() => {
     updateRunMetrics(run.id);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [run.id]);
+  }, [run.id, timeInterval]);
 
   useEffect(() => {
     calculateTotals();
@@ -173,7 +181,14 @@ const MetricsHandler = ({ run, children }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [runMetrics, run.runStatus]);
 
-  return children(runMetrics, isLoading, totals, errorCodes);
+  return children(
+    runMetrics,
+    runMetricsRaw,
+    isLoading,
+    totals,
+    errorCodes,
+    setTimeInterval
+  );
 };
 
 export default MetricsHandler;
diff --git a/web/frontend/src/components/Run/RunningStatus/RunRunningStatus.js b/web/frontend/src/components/Run/RunningStatus/RunRunningStatus.js
@@ -100,7 +100,14 @@ const RunRunningStatus = ({ run }) => {
 
   return (
     <MetricsHandler run={run}>
-      {(metrics, isLoading, totals, errorCodes) => (
+      {(
+        metrics,
+        rawMetrics,
+        isLoading,
+        totals,
+        errorCodes,
+        setTimeInterval
+      ) => (
         <PageHeader
           ghost={false}
           onBack={() => navigate(-1)}
@@ -213,7 +220,10 @@ const RunRunningStatus = ({ run }) => {
                   >
                     <RunEndpointCharts
                       run={run}
+                      metrics={rawMetrics}
+                      isLoading={isLoading}
                       labelToShowGraph={labelToShow}
+                      setTimeInterval={(value) => setTimeInterval(value)}
                     />
                   </Tabs.TabPane>
                 ) : (
@@ -222,7 +232,12 @@ const RunRunningStatus = ({ run }) => {
                     key="endpoints"
                     disabled={!isRunMetricsAvailable}
                   >
-                    <RunEndpointCharts run={run} />
+                    <RunEndpointCharts
+                      run={run}
+                      metrics={rawMetrics}
+                      isLoading={isLoading}
+                      setTimeInterval={(value) => setTimeInterval(value)}
+                    />
                   </Tabs.TabPane>
                 )}
                 <Tabs.TabPane