From a926082e4d8a230b67b6249d16f0d46fb574fbe5 Mon Sep 17 00:00:00 2001
From: Alex <33497058+bexsoft@users.noreply.github.com>
Date: Thu, 20 Jan 2022 19:44:55 -0700
Subject: [PATCH] Updated speedtest behavior (#1427)

- Allowed object size changed in autotune mode
- Removed "Please wait while we get x results... "
- Reorganized advanced options form

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
---
 .../FormComponents/common/styleLibrary.ts     |   2 +-
 .../screens/Console/Speedtest/STResults.tsx   | 160 +++++++--------
 .../screens/Console/Speedtest/Speedtest.tsx   | 188 +++++++++++-------
 3 files changed, 196 insertions(+), 154 deletions(-)

diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
index c291c5859..63fffc53a 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -1232,7 +1232,7 @@ export const createTenantCommon: any = {
     paddingTop: 15,
   },
   descriptionText: {
-    fontSize: 16,
+    fontSize: 14,
   },
 };
 
diff --git a/portal-ui/src/screens/Console/Speedtest/STResults.tsx b/portal-ui/src/screens/Console/Speedtest/STResults.tsx
index 216db519a..1c9664a48 100644
--- a/portal-ui/src/screens/Console/Speedtest/STResults.tsx
+++ b/portal-ui/src/screens/Console/Speedtest/STResults.tsx
@@ -166,7 +166,7 @@ const styles = (theme: Theme) =>
 const STResults = ({ classes, results, start, autotune }: ISTResults) => {
   const [jsonView, setJsonView] = useState<boolean>(false);
 
-  const finalRes = results[results.length - 1];
+  const finalRes = results[results.length - 1] || [];
 
   const getServers: STServer[] = get(finalRes, "GETStats.servers", []) || [];
   const putServers: STServer[] = get(finalRes, "PUTStats.servers", []) || [];
@@ -188,14 +188,22 @@ const STResults = ({ classes, results, start, autotune }: ISTResults) => {
   }) => {
     const avg = calculateBytes(throughput);
 
+    let total = "--";
+    let unit = "";
+
+    if (avg.total !== 0) {
+      total = avg.total.toString();
+      unit = `${avg.unit}/S`;
+    }
+
     return (
       <Grid container>
         <Grid item xs={12} className={classes.objectGeneralTitle}>
           {title}
         </Grid>
         <Grid item xs={12} md={6} className={classes.metricValContainer}>
-          <span className={classes.testUnitRes}>{avg.total}</span>
-          <span className={classes.generalUnit}>{avg.unit}/S</span>
+          <span className={classes.testUnitRes}>{total}</span>
+          <span className={classes.generalUnit}>{unit}</span>
         </Grid>
       </Grid>
     );
@@ -271,86 +279,78 @@ const STResults = ({ classes, results, start, autotune }: ISTResults) => {
 
   return (
     <Fragment>
-      {clnMetrics.length <= 1 && (
-        <Grid container>
-          <Grid item xs={12} className={classes.initialResults}>
-            Please wait while we get {autotune ? "the initial" : "the system"}{" "}
-            results...
-          </Grid>
+      <Grid container className={classes.objectGeneral}>
+        <Grid item xs={12} md={6} lg={4}>
+          <ObjectGeneral
+            title={
+              <div className={classes.download}>
+                <DownloadStatIcon />
+                &nbsp; GET
+              </div>
+            }
+            throughput={getThroughput}
+            objects={getObjects}
+          />
         </Grid>
-      )}
+        <Grid item xs={12} md={6} lg={4}>
+          <ObjectGeneral
+            title={
+              <div className={classes.upload}>
+                <UploadStatIcon />
+                &nbsp; PUT
+              </div>
+            }
+            throughput={putThroughput}
+            objects={putObjects}
+          />
+        </Grid>
+        <Grid item xs={12} md={12} lg={4}>
+          <ResponsiveContainer width="99%">
+            <AreaChart data={clnMetrics}>
+              <defs>
+                <linearGradient id="colorPut" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stopColor="#2781B0" stopOpacity={0.9} />
+                  <stop offset="95%" stopColor="#fff" stopOpacity={0} />
+                </linearGradient>
+                <linearGradient id="colorGet" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stopColor="#4CCB92" stopOpacity={0.9} />
+                  <stop offset="95%" stopColor="#fff" stopOpacity={0} />
+                </linearGradient>
+              </defs>
+
+              <CartesianGrid
+                strokeDasharray={"0 0"}
+                strokeWidth={1}
+                strokeOpacity={0.5}
+                stroke={"#F1F1F1"}
+                vertical={false}
+              />
+
+              <Area
+                type="monotone"
+                dataKey={"get"}
+                stroke={"#4CCB92"}
+                fill={"url(#colorGet)"}
+                fillOpacity={0.3}
+                strokeWidth={2}
+                dot={false}
+              />
+              <Area
+                type="monotone"
+                dataKey={"put"}
+                stroke={"#2781B0"}
+                fill={"url(#colorPut)"}
+                fillOpacity={0.3}
+                strokeWidth={2}
+                dot={false}
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </Grid>
+      </Grid>
+      <br />
       {clnMetrics.length > 1 && (
         <Fragment>
-          <Grid container className={classes.objectGeneral}>
-            <Grid item xs={12} md={6} lg={4}>
-              <ObjectGeneral
-                title={
-                  <div className={classes.download}>
-                    <DownloadStatIcon />
-                    &nbsp; GET
-                  </div>
-                }
-                throughput={getThroughput}
-                objects={getObjects}
-              />
-            </Grid>
-            <Grid item xs={12} md={6} lg={4}>
-              <ObjectGeneral
-                title={
-                  <div className={classes.upload}>
-                    <UploadStatIcon />
-                    &nbsp; PUT
-                  </div>
-                }
-                throughput={putThroughput}
-                objects={putObjects}
-              />
-            </Grid>
-            <Grid item xs={12} md={12} lg={4}>
-              <ResponsiveContainer width="99%">
-                <AreaChart data={clnMetrics}>
-                  <defs>
-                    <linearGradient id="colorPut" x1="0" y1="0" x2="0" y2="1">
-                      <stop offset="0%" stopColor="#2781B0" stopOpacity={0.9} />
-                      <stop offset="95%" stopColor="#fff" stopOpacity={0} />
-                    </linearGradient>
-                    <linearGradient id="colorGet" x1="0" y1="0" x2="0" y2="1">
-                      <stop offset="0%" stopColor="#4CCB92" stopOpacity={0.9} />
-                      <stop offset="95%" stopColor="#fff" stopOpacity={0} />
-                    </linearGradient>
-                  </defs>
-
-                  <CartesianGrid
-                    strokeDasharray={"0 0"}
-                    strokeWidth={1}
-                    strokeOpacity={0.5}
-                    stroke={"#F1F1F1"}
-                    vertical={false}
-                  />
-
-                  <Area
-                    type="monotone"
-                    dataKey={"get"}
-                    stroke={"#4CCB92"}
-                    fill={"url(#colorGet)"}
-                    fillOpacity={0.3}
-                    strokeWidth={2}
-                    dot={false}
-                  />
-                  <Area
-                    type="monotone"
-                    dataKey={"put"}
-                    stroke={"#2781B0"}
-                    fill={"url(#colorPut)"}
-                    fillOpacity={0.3}
-                    strokeWidth={2}
-                    dot={false}
-                  />
-                </AreaChart>
-              </ResponsiveContainer>
-            </Grid>
-          </Grid>
-          <br />
           <Grid container>
             <Grid item xs={12} md={6} className={classes.descriptorLabel}>
               {start ? (
diff --git a/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx b/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
index ac3f09a0e..9a840738c 100644
--- a/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
+++ b/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
@@ -28,6 +28,7 @@ import {
   actionsTray,
   advancedFilterToggleStyles,
   containerForHeader,
+  formFieldStyles,
   searchField,
 } from "../Common/FormComponents/common/styleLibrary";
 import { wsProtocol } from "../../../utils/wsUtils";
@@ -79,9 +80,13 @@ const styles = (theme: Theme) =>
     advancedOption: {
       marginTop: 20,
     },
+    advancedAutotune: {
+      marginTop: 10,
+    },
     ...advancedFilterToggleStyles,
     ...actionsTray,
     ...searchField,
+    ...formFieldStyles,
     ...containerForHeader(theme.spacing(4)),
   });
 
@@ -280,82 +285,119 @@ const Speedtest = ({ classes, distributedSetup }: ISpeedtest) => {
                 }`}
               >
                 <Grid item xs={12}>
-                  <CheckboxWrapper
-                    checked={autotune}
-                    onChange={(e) => setAutotune(e.target.checked)}
-                    id={"autotune"}
-                    name={"autotune"}
-                    label={"Enable Autotune"}
-                    tooltip={
-                      "Autotune gets the maximum stats for the system by running with multiple configurations at once. \
-                  This configuration is enabled by default and disables the rest of available options"
-                    }
-                    value="true"
-                    disabled={start}
-                  />
+                  <Grid
+                    container
+                    direction="row"
+                    justifyContent="space-around"
+                    alignItems="center"
+                  >
+                    <Grid
+                      item
+                      xs={12}
+                      md={4}
+                      className={classes.advancedOption}
+                    >
+                      <InputBoxWrapper
+                        id={"size"}
+                        name={"size"}
+                        label={"Object Size"}
+                        onChange={(e) => {
+                          setSize(e.target.value);
+                        }}
+                        value={size}
+                        disabled={start}
+                        overlayObject={
+                          <InputUnitMenu
+                            id={"size-unit"}
+                            onUnitChange={setSizeUnit}
+                            unitSelected={sizeUnit}
+                            unitsList={[
+                              { label: "KB", value: "KB" },
+                              { label: "MB", value: "MB" },
+                              { label: "GB", value: "GB" },
+                            ]}
+                            disabled={start}
+                          />
+                        }
+                      />
+                    </Grid>
+                    <Grid
+                      item
+                      xs={12}
+                      md={4}
+                      className={classes.advancedAutotune}
+                    >
+                      <CheckboxWrapper
+                        checked={autotune}
+                        onChange={(e) => setAutotune(e.target.checked)}
+                        id={"autotune"}
+                        name={"autotune"}
+                        label={"Enable Autotune"}
+                        tooltip={
+                          "Autotune gets the maximum stats for the system by testing multiple configurations at once. This configuration is enabled by default and overrides duration & concurrent requests options"
+                        }
+                        value="true"
+                        disabled={start}
+                      />
+                    </Grid>
+                  </Grid>
                 </Grid>
-                <Grid item xs={12} md={3} className={classes.advancedOption}>
-                  <InputBoxWrapper
-                    id={"duration"}
-                    name={"duration"}
-                    label={"Duration"}
-                    onChange={(e) => {
-                      setDuration(e.target.value);
-                    }}
-                    value={duration}
-                    disabled={start || autotune}
-                    overlayObject={
-                      <InputUnitMenu
-                        id={"duration-unit"}
-                        onUnitChange={setDurationUnit}
-                        unitSelected={durationUnit}
-                        unitsList={[
-                          { label: "miliseconds", value: "ms" },
-                          { label: "seconds", value: "s" },
-                        ]}
+                <Grid item xs={12}>
+                  <Grid
+                    container
+                    direction="row"
+                    justifyContent="space-around"
+                    alignItems="center"
+                  >
+                    <Grid
+                      item
+                      xs={12}
+                      md={4}
+                      className={classes.advancedOption}
+                    >
+                      <InputBoxWrapper
+                        id={"duration"}
+                        name={"duration"}
+                        label={"Duration"}
+                        onChange={(e) => {
+                          setDuration(e.target.value);
+                        }}
+                        value={duration}
+                        disabled={start || autotune}
+                        overlayObject={
+                          <InputUnitMenu
+                            id={"duration-unit"}
+                            onUnitChange={setDurationUnit}
+                            unitSelected={durationUnit}
+                            unitsList={[
+                              { label: "miliseconds", value: "ms" },
+                              { label: "seconds", value: "s" },
+                            ]}
+                            disabled={start || autotune}
+                          />
+                        }
+                      />
+                    </Grid>
+                    <Grid
+                      item
+                      xs={12}
+                      md={4}
+                      className={classes.advancedOption}
+                    >
+                      <InputBoxWrapper
+                        type="number"
+                        min="0"
+                        id={"concurrent"}
+                        name={"concurrent"}
+                        label={"Concurrent Requests"}
+                        onChange={(e) => {
+                          setConcurrent(e.target.value);
+                        }}
+                        value={concurrent}
                         disabled={start || autotune}
                       />
-                    }
-                  />
-                </Grid>
-                <Grid item xs={12} md={3} className={classes.advancedOption}>
-                  <InputBoxWrapper
-                    id={"size"}
-                    name={"size"}
-                    label={"Object Size"}
-                    onChange={(e) => {
-                      setSize(e.target.value);
-                    }}
-                    value={size}
-                    disabled={start || autotune}
-                    overlayObject={
-                      <InputUnitMenu
-                        id={"size-unit"}
-                        onUnitChange={setSizeUnit}
-                        unitSelected={sizeUnit}
-                        unitsList={[
-                          { label: "KB", value: "KB" },
-                          { label: "MB", value: "MB" },
-                          { label: "GB", value: "GB" },
-                        ]}
-                        disabled={start || autotune}
-                      />
-                    }
-                  />
-                </Grid>
-                <Grid item xs={12} md={3} className={classes.advancedOption}>
-                  <InputBoxWrapper
-                    type="number"
-                    min="0"
-                    id={"concurrent"}
-                    name={"concurrent"}
-                    label={"Concurrent Requests"}
-                    onChange={(e) => {
-                      setConcurrent(e.target.value);
-                    }}
-                    value={concurrent}
-                    disabled={start || autotune}
-                  />
+                    </Grid>
+                  </Grid>
                 </Grid>
               </Grid>
               <Grid container className={classes.multiModule}>