Show Warnings when running speed test or diagnostics (#1487)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

Co-authored-by: Alex <33497058+bexsoft@users.noreply.github.com>

Author: dvaldivia

portal-ui/src/common/__tests__/utils.test.ts

@@ -22,15 +22,15 @@ import {
 } from "../utils";
 
 test("A variety of formatting results", () => {
-  expect(niceBytes("1024")).toBe("1.0 KB");
-  expect(niceBytes("1048576")).toBe("1.0 MB");
-  expect(niceBytes("1073741824")).toBe("1.0 GB");
+  expect(niceBytes("1024")).toBe("1.0 KiB");
+  expect(niceBytes("1048576")).toBe("1.0 MiB");
+  expect(niceBytes("1073741824")).toBe("1.0 GiB");
 });
 
 test("From value and unit to a number of bytes", () => {
-  expect(getBytes("1", "KB")).toBe("1024");
-  expect(getBytes("1", "MB")).toBe("1048576");
-  expect(getBytes("1", "GB")).toBe("1073741824");
+  expect(getBytes("1", "KiB")).toBe("1024");
+  expect(getBytes("1", "MiB")).toBe("1048576");
+  expect(getBytes("1", "GiB")).toBe("1073741824");
 });
 
 test("From value and unit to a number of bytes for kubernetes", () => {

portal-ui/src/common/utils.ts

@@ -26,7 +26,17 @@ import { IPool } from "../screens/Console/Tenants/ListTenants/types";
 const minStReq = 1073741824; // Minimal Space required for MinIO
 const minMemReq = 2147483648; // Minimal Memory required for MinIO in bytes
 
-export const units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+export const units = [
+  "B",
+  "KiB",
+  "MiB",
+  "GiB",
+  "TiB",
+  "PiB",
+  "EiB",
+  "ZiB",
+  "YiB",
+];
 export const k8sUnits = ["Ki", "Mi", "Gi", "Ti", "Pi", "Ei"];
 export const k8sCalcUnits = ["B", ...k8sUnits];
 export const timeUnits = ["ms", "s", "m", "h", "d", "w", "M", "Q", "y"];

portal-ui/src/screens/Console/Common/ProgressBarWrapper/ProgressBarWrapper.tsx

@@ -27,6 +27,7 @@ interface IProgressBarWrapper {
   ready: boolean;
   indeterminate?: boolean;
   withLabel?: boolean;
+  size?: string;
 }
 
 const BorderLinearProgress = styled(LinearProgress)(() => ({
@@ -39,6 +40,13 @@ const BorderLinearProgress = styled(LinearProgress)(() => ({
     borderRadius: 5,
   },
 }));
+const SmallBorderLinearProgress = styled(BorderLinearProgress)(() => ({
+  height: 6,
+  borderRadius: 3,
+  [`& .${linearProgressClasses.bar}`]: {
+    borderRadius: 3,
+  },
+}));
 
 function LinearProgressWithLabel(props: LinearProgressProps) {
   return (
@@ -58,6 +66,7 @@ const ProgressBarWrapper = ({
   ready,
   indeterminate,
   withLabel,
+  size = "regular",
 }: IProgressBarWrapper) => {
   const propsComponent: LinearProgressProps = {
     variant: indeterminate && !ready ? "indeterminate" : "determinate",
@@ -67,6 +76,9 @@ const ProgressBarWrapper = ({
   if (withLabel) {
     return <LinearProgressWithLabel {...propsComponent} />;
   }
+  if (size === "small") {
+    return <SmallBorderLinearProgress {...propsComponent} />;
+  }
 
   return <BorderLinearProgress {...propsComponent} />;
 };

portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx

@@ -47,6 +47,8 @@ import { setServerDiagStat, setSnackBarMessage } from "../../../actions";
 import CircularProgress from "@mui/material/CircularProgress";
 import TestWrapper from "../Common/TestWrapper/TestWrapper";
 import PageLayout from "../Common/Layout/PageLayout";
+import HelpBox from "../../../common/HelpBox";
+import WarnIcon from "../../../icons/WarnIcon";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -303,6 +305,18 @@ const HealthInfo = ({
             </Grid>
           </TestWrapper>
         </Grid>
+        {!diagStarted && (
+          <Fragment>
+            <br />
+            <HelpBox
+              title={
+                "During the health diagnostics run all production traffic will be suspended."
+              }
+              iconComponent={<WarnIcon />}
+              help={<Fragment />}
+            />
+          </Fragment>
+        )}
       </PageLayout>
     </Fragment>
   );

portal-ui/src/screens/Console/Speedtest/STResults.tsx

@@ -35,39 +35,10 @@ import BoxIconButton from "../Common/BoxIconButton/BoxIconButton";
 import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
 import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
 import { cleanMetrics } from "./utils";
-
-interface ISTResults {
-  classes: any;
-  results: SpeedTestResponse[];
-  start: boolean;
-  autotune: boolean;
-}
+import SpeedTestUnit from "./SpeedTestUnit";
 
 const styles = (theme: Theme) =>
   createStyles({
-    objectGeneralTitle: {
-      fontWeight: "bold",
-      color: "#000",
-      display: "flex",
-      alignItems: "center",
-      "& svg": {
-        width: 14,
-      },
-    },
-    generalUnit: {
-      color: "#000",
-      marginTop: 6,
-      fontSize: 12,
-      fontWeight: "bold",
-    },
-    testUnitRes: {
-      fontSize: 120,
-      color: "#081C42",
-      fontWeight: "bold",
-    },
-    metricValContainer: {
-      lineHeight: 1,
-    },
     actionButtons: {
       textAlign: "right",
     },
@@ -153,17 +124,27 @@ const styles = (theme: Theme) =>
     },
     download: {
       "& .min-icon": {
+        width: 35,
+        height: 35,
         color: "rgb(113,200,150)",
       },
     },
     upload: {
       "& .min-icon": {
+        width: 35,
+        height: 35,
         color: "rgb(66,127,172)",
       },
     },
   });
 
-const STResults = ({ classes, results, start, autotune }: ISTResults) => {
+interface ISTResults {
+  classes: any;
+  results: SpeedTestResponse[];
+  start: boolean;
+}
+
+const STResults = ({ classes, results, start }: ISTResults) => {
   const [jsonView, setJsonView] = useState<boolean>(false);
 
   const finalRes = results[results.length - 1] || [];
@@ -177,38 +158,6 @@ const STResults = ({ classes, results, start, autotune }: ISTResults) => {
   const putThroughput = get(finalRes, "PUTStats.throughputPerSec", 0);
   const putObjects = get(finalRes, "PUTStats.objectsPerSec", 0);
 
-  const ObjectGeneral = ({
-    title,
-    throughput,
-    objects,
-  }: {
-    title: any;
-    throughput: string;
-    objects: number;
-  }) => {
-    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}>{total}</span>
-          <span className={classes.generalUnit}>{unit}</span>
-        </Grid>
-      </Grid>
-    );
-  };
-
   let statJoin: IndvServerMetric[] = [];
 
   getServers.forEach((item) => {
@@ -280,31 +229,35 @@ const STResults = ({ classes, results, start, autotune }: ISTResults) => {
   return (
     <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 item xs={12} md={6} lg={6}>
+          <Grid container className={classes.objectGeneral}>
+            <Grid item xs={12} md={6} lg={6}>
+              <SpeedTestUnit
+                icon={
+                  <div className={classes.download}>
+                    <DownloadStatIcon />
+                  </div>
+                }
+                title={"GET"}
+                throughput={getThroughput}
+                objects={getObjects}
+              />
+            </Grid>
+            <Grid item xs={12} md={6} lg={6}>
+              <SpeedTestUnit
+                icon={
+                  <div className={classes.upload}>
+                    <UploadStatIcon />
+                  </div>
+                }
+                title={"PUT"}
+                throughput={putThroughput}
+                objects={putObjects}
+              />
+            </Grid>
+          </Grid>
         </Grid>
-        <Grid item xs={12} md={12} lg={4}>
+        <Grid item xs={12} md={6} lg={6}>
           <ResponsiveContainer width="99%">
             <AreaChart data={clnMetrics}>
               <defs>

portal-ui/src/screens/Console/Speedtest/SpeedTestUnit.tsx

@@ -0,0 +1,113 @@
+//  This file is part of MinIO Console Server
+//  Copyright (c) 2022 MinIO, Inc.
+//
+//  This program is free software: you can redistribute it and/or modify
+//  it under the terms of the GNU Affero General Public License as published by
+//  the Free Software Foundation, either version 3 of the License, or
+//  (at your option) any later version.
+//
+//  This program is distributed in the hope that it will be useful,
+//  but WITHOUT ANY WARRANTY; without even the implied warranty of
+//  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//  GNU Affero General Public License for more details.
+//
+//  You should have received a copy of the GNU Affero General Public License
+//  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import { calculateBytes } from "../../../common/utils";
+import React from "react";
+import withStyles from "@mui/styles/withStyles";
+import { Theme } from "@mui/material/styles";
+import createStyles from "@mui/styles/createStyles";
+import clsx from "clsx";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    objectGeneralTitle: {
+      lineHeight: 1,
+      fontSize: 50,
+      color: "#696969",
+    },
+    generalUnit: {
+      color: "#000",
+      fontSize: 12,
+      fontWeight: "bold",
+    },
+    testUnitRes: {
+      fontSize: 60,
+      color: "#081C42",
+      fontWeight: "bold",
+      textAlign: "right",
+    },
+    metricValContainer: {
+      lineHeight: 1,
+      verticalAlign: "bottom",
+    },
+    objectsUnitRes: {
+      fontSize: 22,
+      marginTop: 6,
+      color: "#696969",
+      fontWeight: "bold",
+      textAlign: "right",
+    },
+    objectsUnit: {
+      color: "#696969",
+      fontSize: 16,
+      fontWeight: "bold",
+    },
+    iconTd: {
+      verticalAlign: "bottom",
+    },
+  });
+
+const SpeedTestUnit = ({
+  classes,
+  title,
+  icon,
+  throughput,
+  objects,
+}: {
+  classes: any;
+  title: any;
+  icon: any;
+  throughput: string;
+  objects: number;
+}) => {
+  const avg = calculateBytes(throughput);
+
+  let total = "0";
+  let unit = "";
+
+  if (avg.total !== 0) {
+    total = avg.total.toString();
+    unit = `${avg.unit}/s`;
+  }
+
+  return (
+    <table>
+      <tr>
+        <td className={classes.objectGeneralTitle}>{title}</td>
+        <td className={classes.iconTd}>{icon}</td>
+      </tr>
+      <tr>
+        <td className={clsx(classes.metricValContainer, classes.testUnitRes)}>
+          {total}
+        </td>
+        <td className={clsx(classes.metricValContainer, classes.generalUnit)}>
+          {unit}
+        </td>
+      </tr>
+      <tr>
+        <td
+          className={clsx(classes.metricValContainer, classes.objectsUnitRes)}
+        >
+          {objects}
+        </td>
+        <td className={clsx(classes.metricValContainer, classes.objectsUnit)}>
+          {objects !== 0 && "Objs/S"}
+        </td>
+      </tr>
+    </table>
+  );
+};
+export default withStyles(styles)(SpeedTestUnit);