Fix: Overview metrics changes UI placement while loading (#839)

web/frontend/src/components/Run/RunningStatus/AnalyticCharts/WaitingForMetricsResult/WaitingForMetricsResult.js

@@ -10,7 +10,7 @@ const WaitingForMetricsResult = ({ run }) => (
     title="Almost there! Metrics will be available in a minute"
     subTitle={
       <>
-        Test is already started and running. Usualy is takes takes 1-2 minutes,
+        Test has already started and its running. Usually it takes 1-2 minutes,
         please wait...
         <Timer startTime={run.startedAt} defaultTime={run.startedAt}>
           {(time, loading) => (

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

@@ -6,12 +6,10 @@ import React, { useEffect, useRef, useState } 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,
@@ -27,12 +25,10 @@ const OverviewMetrics = ({ run }) => {
       2
     );
 
-    return errorRate;
+    return errorRate === "NaN" ? 0 : errorRate;
   };
 
   const updaterunMetrics = async (runIdToFetch) => {
-    setIsLoading(true);
-
     const metricsRes = await fetchMetrics(runIdToFetch, 0, true);
 
     const getRpm = (minDatetime, maxDatetime, totalCount) => {
@@ -74,8 +70,6 @@ const OverviewMetrics = ({ run }) => {
     );
 
     setrunMetrics(formattedrunMetrics);
-
-    setIsLoading(false);
   };
 
   const calculateTotals = () => {
@@ -138,9 +132,7 @@ const OverviewMetrics = ({ run }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [runMetrics, run.runStatus]);
 
-  return isLoading ? (
-    <PageSpinner />
-  ) : (
+  return (
     <div
       style={{
         border: "1px solid #fff "

web/frontend/src/components/Run/RunningStatus/OverviewMetrics/__snapshots__/OverviewMetrics.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OverviewMetrics should render OverviewMetrics component 1`] = `"<div><div class=\\"ant-row ant-row-center ant-row-middle\\" style=\\"align-self: center;\\"><div class=\\"ant-spin ant-spin-spinning\\"><span role=\\"img\\" aria-label=\\"loading\\" style=\\"font-size: 64px;\\" class=\\"anticon anticon-loading anticon-spin ant-spin-dot\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" data-icon=\\"loading\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z\\"></path></svg></span></div></div></div>"`;
+exports[`OverviewMetrics should render OverviewMetrics component 1`] = `"<div><div style=\\"border: 1px solid #fff;\\"><div class=\\"ant-descriptions\\"><div class=\\"ant-descriptions-view\\"><table><tbody><tr class=\\"ant-descriptions-row\\"><td class=\\"ant-descriptions-item\\" style=\\"flex-wrap: wrap;\\" colspan=\\"3\\"><div class=\\"ant-descriptions-item-container\\"><span class=\\"ant-descriptions-item-content\\"><div class=\\"ant-statistic\\" style=\\"border: 1px solid #ffd166; border-radius: 10px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); flex: 1 1 auto; margin: 8px; text-align: center; padding: 5px;\\"><div class=\\"ant-statistic-title\\">Average Latency</div><div class=\\"ant-statistic-content\\"><span class=\\"ant-statistic-content-value\\"><span class=\\"ant-statistic-content-value-int\\">0</span><span class=\\"ant-statistic-content-value-decimal\\">.00</span></span><span class=\\"ant-statistic-content-suffix\\">ms</span></div></div><div class=\\"ant-statistic\\" style=\\"border: 1px solid #ffab40; border-radius: 10px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); flex: 1 1 auto; margin: 8px; text-align: center; padding: 5px;\\"><div class=\\"ant-statistic-title\\">90% Latency</div><div class=\\"ant-statistic-content\\"><span class=\\"ant-statistic-content-value\\"><span class=\\"ant-statistic-content-value-int\\">0</span><span class=\\"ant-statistic-content-value-decimal\\">.00</span></span><span class=\\"ant-statistic-content-suffix\\">ms</span></div></div><div class=\\"ant-statistic\\" style=\\"border: 1px solid #ff6b6b; border-radius: 10px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); flex: 1 1 auto; margin: 8px; text-align: center; padding: 5px;\\"><div class=\\"ant-statistic-title\\">Errors</div><div class=\\"ant-statistic-content\\"><span class=\\"ant-statistic-content-value\\"><span class=\\"ant-statistic-content-value-int\\">0</span></span><span class=\\"ant-statistic-content-suffix\\">%</span></div></div><div class=\\"ant-statistic\\" style=\\"border: 1px solid #64b5f6; border-radius: 10px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); flex: 1 1 auto; margin: 8px; text-align: center; padding: 5px;\\"><div class=\\"ant-statistic-title\\">Average RPM</div><div class=\\"ant-statistic-content\\"><span class=\\"ant-statistic-content-value\\"><span class=\\"ant-statistic-content-value-int\\">0</span></span><span class=\\"ant-statistic-content-suffix\\">req/min</span></div></div></span></div></td></tr></tbody></table></div></div></div></div>"`;