Feat: Reduce API calls while running a test

web/frontend/src/components/Run/RunningStatus/MetricsHandler/MetricsHandler.js

@@ -0,0 +1,179 @@
+/* eslint-disable max-statements */
+import moment from "moment";
+import { useEffect, useRef, useState } from "react";
+
+import { fetchMetrics } from "../../../../lib/api/endpoints/runMetric";
+import { runStatus as runStatusModel } from "../../../../lib/api/models";
+import { calculateErrorRate } from "../../../../lib/utils";
+
+const MetricsHandler = ({ run, children }) => {
+  const [runMetrics, setMetrics] = useState([]);
+  const [errorCodes, setErrorCodes] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [totals, setTotals] = useState({
+    totalLatencyAvg: 0,
+    totalLatencyP50: 0,
+    totalLatencyP90: 0,
+    totalLatencyP99: 0,
+    totalSuccessCount: 0,
+    totalErrorsCount: 0,
+    totalErrorsRate: 0,
+    totalCount: 0,
+    totalRpm: 0
+  });
+  const refreshInterval = 5000;
+  const timerRef = useRef(null);
+
+  const updateRunMetrics = async (runIdToFetch) => {
+    setIsLoading(true);
+
+    const metricsRes = await fetchMetrics(runIdToFetch, 0, true);
+
+    const getRpm = (minDatetime, maxDatetime, totalCount) => {
+      const dateDuration = moment.duration(maxDatetime.diff(minDatetime));
+      const diffInSeconds =
+        dateDuration.asSeconds() > 0 ? dateDuration.asSeconds() : 1;
+
+      return parseFloat((totalCount / diffInSeconds) * 60).toFixed(0);
+    };
+
+    const formattedUrlMetrics = metricsRes.map(
+      ({
+        minDatetime,
+        maxDatetime,
+        totalCount,
+        successCount,
+        label,
+        latencyAvg,
+        latencyP50,
+        latencyP90,
+        latencyP99,
+        responses
+      }) => {
+        const errorsCount = totalCount - successCount;
+        const errorRate = calculateErrorRate(successCount, totalCount);
+        const rpm = getRpm(minDatetime, maxDatetime, totalCount);
+
+        return {
+          key: label,
+          errorsCount,
+          successCount,
+          errorRate,
+          label,
+          rpm,
+          totalCount,
+          latencyAvg,
+          latencyP50,
+          latencyP90,
+          latencyP99,
+          responses
+        };
+      }
+    );
+
+    setMetrics(formattedUrlMetrics);
+    setIsLoading(false);
+  };
+
+  const calculateTotals = () => {
+    const totalLatencyAvg =
+      runMetrics.length > 0
+        ? runMetrics.reduce((total, metric) => total + metric.latencyAvg, 0)
+        : 0;
+    const totalLatencyP50 =
+      runMetrics.length > 0
+        ? runMetrics.reduce((total, metric) => total + metric.latencyP50, 0)
+        : 0;
+    const totalLatencyP90 =
+      runMetrics.length > 0
+        ? runMetrics.reduce((total, metric) => total + metric.latencyP90, 0)
+        : 0;
+    const totalLatencyP99 =
+      runMetrics.length > 0
+        ? runMetrics.reduce((total, metric) => total + metric.latencyP99, 0)
+        : 0;
+    const totalSuccessCount =
+      runMetrics.length > 0
+        ? runMetrics.reduce((total, metric) => total + metric.successCount, 0)
+        : 0;
+    const totalErrorsCount =
+      runMetrics.length > 0
+        ? runMetrics.reduce((total, metric) => total + metric.errorsCount, 0)
+        : 0;
+    const totalCount =
+      runMetrics.length > 0
+        ? runMetrics.reduce((total, metric) => total + metric.totalCount, 0)
+        : 0;
+    const totalRpm =
+      runMetrics.length > 0
+        ? runMetrics.reduce(
+            (total, metric) => total + parseFloat(metric.rpm),
+            0
+          )
+        : 0;
+    const totalErrorsRate = parseFloat(
+      calculateErrorRate(totalSuccessCount, totalCount)
+    );
+
+    setTotals({
+      totalLatencyAvg,
+      totalLatencyP50,
+      totalLatencyP90,
+      totalLatencyP99,
+      totalSuccessCount,
+      totalErrorsCount,
+      totalErrorsRate,
+      totalCount,
+      totalRpm
+    });
+  };
+
+  const groupByErrorCode = () => {
+    const responseCodeGroups = {};
+
+    runMetrics.forEach((metric) => {
+      metric.responses.forEach((response) => {
+        const { responseCode } = response;
+
+        if (!responseCodeGroups[responseCode]) {
+          responseCodeGroups[responseCode] = [];
+        }
+
+        responseCodeGroups[responseCode].push(metric);
+      });
+    });
+
+    setErrorCodes(responseCodeGroups);
+  };
+
+  const startMetricsRefreshTimer = () => {
+    if (run.runStatus === runStatusModel.RUNNING) {
+      timerRef.current = setInterval(() => {
+        updateRunMetrics(run.id);
+      }, refreshInterval);
+    }
+  };
+
+  const stopMetricsRefreshTimer = () => {
+    clearInterval(timerRef.current);
+  };
+
+  useEffect(() => {
+    updateRunMetrics(run.id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [run.id]);
+
+  useEffect(() => {
+    calculateTotals();
+    groupByErrorCode();
+    startMetricsRefreshTimer();
+    return () => {
+      stopMetricsRefreshTimer();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [runMetrics, run.runStatus]);
+
+  return children(runMetrics, isLoading, totals, errorCodes);
+};
+
+export default MetricsHandler;

web/frontend/src/components/Run/RunningStatus/MetricsHandler/index.js

@@ -0,0 +1,3 @@
+import MetricsHandler from "./MetricsHandler";
+
+export default MetricsHandler;

web/frontend/src/components/Run/RunningStatus/OverviewMetrics/OverviewMetrics.js

@@ -1,144 +1,13 @@
 /* eslint-disable max-statements */
 import { Descriptions } from "antd";
-import moment from "moment";
-import React, { useEffect, useRef, useState } from "react";
+import React from "react";
 
-import { fetchMetrics } from "../../../../lib/api/endpoints/runMetric";
-import { runStatus as runStatusModel } from "../../../../lib/api/models";
 import { avg } from "../../../../lib/utils";
 import PageSpinner from "../../../layout/PageSpinner";
 import MetricCard from "./MetricCard";
 
-const OverviewMetrics = ({ run }) => {
-  const [runMetrics, setrunMetrics] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [totals, setTotals] = useState({
-    totalLatencyAvg: 0,
-    totallatencyP90: 0,
-    totalSuccessCount: 0,
-    totalCount: 0,
-    totalRpm: 0
-  });
-  const refreshInterval = 3000;
-  const timerRef = useRef(null);
-
-  const calculateErrorRate = (successCount, totalCount) => {
-    const errorRate = parseFloat((1 - successCount / totalCount) * 100).toFixed(
-      2
-    );
-
-    return errorRate;
-  };
-
-  const updaterunMetrics = async (runIdToFetch) => {
-    setIsLoading(true);
-
-    const metricsRes = await fetchMetrics(runIdToFetch, 0, true);
-
-    const getRpm = (minDatetime, maxDatetime, totalCount) => {
-      const dateDuration = moment.duration(maxDatetime.diff(minDatetime));
-      const diffInSeconds =
-        dateDuration.asSeconds() > 0 ? dateDuration.asSeconds() : 1;
-
-      return parseFloat((totalCount / diffInSeconds) * 60).toFixed(0);
-    };
-
-    const formattedrunMetrics = metricsRes.map(
-      ({
-        minDatetime,
-        maxDatetime,
-        totalCount,
-        successCount,
-        label,
-        latencyAvg,
-        latencyP90,
-        responses
-      }) => {
-        const errorsCount = totalCount - successCount;
-        const errorRate = calculateErrorRate(successCount, totalCount);
-        const rpm = getRpm(minDatetime, maxDatetime, totalCount);
-
-        return {
-          key: label,
-          errorsCount,
-          successCount,
-          errorRate,
-          label,
-          rpm,
-          totalCount,
-          latencyAvg,
-          latencyP90,
-          responses
-        };
-      }
-    );
-
-    setrunMetrics(formattedrunMetrics);
-
-    setIsLoading(false);
-  };
-
-  const calculateTotals = () => {
-    const totalLatencyAvg =
-      runMetrics.length > 0
-        ? runMetrics.reduce((total, metric) => total + metric.latencyAvg, 0)
-        : 0;
-    const totallatencyP90 =
-      runMetrics.length > 0
-        ? runMetrics.reduce((total, metric) => total + metric.latencyP90, 0)
-        : 0;
-    const totalSuccessCount =
-      runMetrics.length > 0
-        ? runMetrics.reduce((total, metric) => total + metric.successCount, 0)
-        : 0;
-    const totalCount =
-      runMetrics.length > 0
-        ? runMetrics.reduce((total, metric) => total + metric.totalCount, 0)
-        : 0;
-    const totalRpm =
-      runMetrics.length > 0
-        ? runMetrics.reduce(
-            (total, metric) => total + parseFloat(metric.rpm),
-            0
-          )
-        : 0;
-
-    setTotals({
-      totalLatencyAvg,
-      totallatencyP90,
-      totalSuccessCount,
-      totalCount,
-      totalRpm
-    });
-  };
-
-  const startMetricsRefreshTimer = () => {
-    if (run.runStatus === runStatusModel.RUNNING) {
-      timerRef.current = setInterval(() => {
-        updaterunMetrics(run.id);
-      }, refreshInterval);
-    }
-  };
-
-  const stopMetricsRefreshTimer = () => {
-    clearInterval(timerRef.current);
-  };
-
-  useEffect(() => {
-    updaterunMetrics(run.id);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [run]);
-
-  useEffect(() => {
-    calculateTotals();
-    startMetricsRefreshTimer();
-    return () => {
-      stopMetricsRefreshTimer();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [runMetrics, run.runStatus]);
-
-  return isLoading ? (
+const OverviewMetrics = ({ metrics, isLoading, totals }) =>
+  isLoading ? (
     <PageSpinner />
   ) : (
     <div
@@ -155,37 +24,33 @@ const OverviewMetrics = ({ run }) => {
           <Descriptions.Item>
             <MetricCard
               title="Average Latency"
-              value={avg(totals.totalLatencyAvg, runMetrics.length).toFixed(2)}
+              value={avg(totals.totalLatencyAvg, metrics.length).toFixed(2)}
               unit="ms"
               borderColor="#ffd166"
             />
           </Descriptions.Item>
           <Descriptions.Item>
             <MetricCard
               title="90% Latency"
-              value={avg(totals.totallatencyP90, runMetrics.length).toFixed(2)}
+              value={avg(totals.totalLatencyP90, metrics.length).toFixed(2)}
               unit="ms"
               borderColor="#ffab40"
             />
           </Descriptions.Item>
           <Descriptions.Item>
             <MetricCard
               title="Errors"
-              value={calculateErrorRate(
-                totals.totalSuccessCount,
-                totals.totalCount
-              )}
+              value={totals.totalErrorsRate}
               unit="%"
               borderColor="#ff6b6b"
             />
           </Descriptions.Item>
           <Descriptions.Item>
             <MetricCard
               title="Average RPM"
-              value={avg(
-                parseFloat(totals.totalRpm),
-                runMetrics.length
-              ).toFixed(0)}
+              value={avg(parseFloat(totals.totalRpm), metrics.length).toFixed(
+                0
+              )}
               unit="req/min"
               borderColor="#64b5f6"
             />
@@ -194,6 +59,5 @@ const OverviewMetrics = ({ run }) => {
       </Descriptions>
     </div>
   );
-};
 
 export default OverviewMetrics;