Migrated Speedtest components to mds (#3015)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
2023-08-24 17:08:16 -06:00
parent dbffc5fc22
commit bbf4027418
6 changed files with 321 additions and 442 deletions
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -825,42 +825,6 @@ export const deleteDialogStyles: any = {
  },
 };

-export const advancedFilterToggleStyles: any = {
-  advancedButton: {
-    flexGrow: 1,
-    alignItems: "flex-end",
-    display: "flex",
-    justifyContent: "flex-end",
-  },
-  advancedConfiguration: {
-    color: "#2781B0",
-    fontSize: 10,
-    textDecoration: "underline",
-    border: "none",
-    backgroundColor: "transparent",
-    cursor: "pointer",
-    alignItems: "center",
-    display: "flex",
-    float: "right",
-
-    "&:hover": {
-      color: "#07193E",
-    },
-
-    "& svg": {
-      width: 10,
-      alignSelf: "center",
-      marginLeft: 5,
-    },
-  },
-  advancedOpen: {
-    transform: "rotateZ(-90deg) translateX(-4px) translateY(2px)",
-  },
-  advancedClosed: {
-    transform: "rotateZ(90deg)",
-  },
-};
-
 export const createTenantCommon: any = {
  fieldGroup: {
    border: "1px solid #EAEAEA",
--- a/portal-ui/src/screens/Console/Common/ObjectManager/ObjectHandled.tsx
+++ b/portal-ui/src/screens/Console/Common/ObjectManager/ObjectHandled.tsx
@@ -249,15 +249,14 @@ const ObjectHandled = ({
              error={objectToDisplay.failed}
              cancelled={objectToDisplay.cancelled}
              withLabel
+              notificationLabel={
+                objectToDisplay.errorMessage !== ""
+                  ? objectToDisplay.errorMessage
+                  : ""
+              }
            />
          )}
        </div>
-        {objectToDisplay.errorMessage !== "" && (
-          <div className={classes.errorMessage}>
-            <strong>Error: </strong>
-            {objectToDisplay.errorMessage}
-          </div>
-        )}
      </div>
    </Fragment>
  );
--- a/portal-ui/src/screens/Console/Common/ProgressBarWrapper/ProgressBarWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/ProgressBarWrapper/ProgressBarWrapper.tsx
@@ -14,13 +14,8 @@
 // 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 React, { Fragment } from "react";
-import { styled } from "@mui/material/styles";
-import LinearProgress, {
-  linearProgressClasses,
-  LinearProgressProps,
-} from "@mui/material/LinearProgress";
-import Box from "@mui/material/Box";
+import React from "react";
+import { ProgressBar, ProgressBarProps } from "mds";

 interface IProgressBarWrapper {
  value: number;
@@ -30,62 +25,28 @@ interface IProgressBarWrapper {
  size?: string;
  error?: boolean;
  cancelled?: boolean;
+  notificationLabel?: string;
 }

-const BorderLinearProgress = styled(LinearProgress)(() => ({
-  height: 10,
-  borderRadius: 5,
-  [`&.${linearProgressClasses.colorPrimary}`]: {
-    backgroundColor: "#f1f1f1",
-  },
-  [`& .${linearProgressClasses.bar}`]: {
-    borderRadius: 5,
-  },
-}));
-const SmallBorderLinearProgress = styled(BorderLinearProgress)(() => ({
-  height: 6,
-  borderRadius: 3,
-  [`& .${linearProgressClasses.bar}`]: {
-    borderRadius: 3,
-  },
-}));
-
 function LinearProgressWithLabel(
-  props: { error: boolean; cancelled: boolean } & LinearProgressProps,
+  props: { error: boolean; cancelled: boolean } & ProgressBarProps,
 ) {
-  let color = "#000";
-  let size = 18;
+  let label = "";

  if (props.error) {
-    color = "#C83B51";
-    size = 14;
+    label = `Error: ${props.notificationLabel || ""}`;
  } else if (props.cancelled) {
-    color = "#FFBD62";
-    size = 14;
+    label = `Cancelled`;
  }

  return (
-    <Box sx={{ display: "flex", alignItems: "center" }}>
-      <Box sx={{ width: "100%", mr: 3 }}>
-        <BorderLinearProgress variant="determinate" {...props} />
-      </Box>
-      <Box
-        sx={{
-          minWidth: 35,
-          fontSize: size,
-          color: color,
-        }}
-        className={"value"}
-      >
-        {props.cancelled ? (
-          "Cancelled"
-        ) : (
-          <Fragment>
-            {props.error ? "Failed" : `${Math.round(props.value || 0)}%`}
-          </Fragment>
-        )}
-      </Box>
-    </Box>
+    <ProgressBar
+      variant={"determinate"}
+      value={props.value}
+      color={props.color}
+      progressLabel
+      notificationLabel={label}
+    />
  );
 }

@@ -97,22 +58,24 @@ const ProgressBarWrapper = ({
  size = "regular",
  error,
  cancelled,
+  notificationLabel,
 }: IProgressBarWrapper) => {
  let color: any;
  if (error) {
-    color = "error";
+    color = "red";
  } else if (cancelled) {
-    color = "warning";
+    color = "orange";
  } else if (value === 100 && ready) {
-    color = "success";
+    color = "green";
  } else {
-    color = "primary";
+    color = "blue";
  }
-  const propsComponent: LinearProgressProps = {
+  const propsComponent: ProgressBarProps = {
    variant:
      indeterminate && !ready && !cancelled ? "indeterminate" : "determinate",
    value: ready ? 100 : value,
    color: color,
+    notificationLabel: notificationLabel || "",
  };
  if (withLabel) {
    return (
@@ -124,10 +87,12 @@ const ProgressBarWrapper = ({
    );
  }
  if (size === "small") {
-    return <SmallBorderLinearProgress {...propsComponent} />;
+    return (
+      <ProgressBar {...propsComponent} sx={{ height: 6, borderRadius: 6 }} />
+    );
  }

-  return <BorderLinearProgress {...propsComponent} />;
+  return <ProgressBar {...propsComponent} />;
 };

 export default ProgressBarWrapper;
--- a/portal-ui/src/screens/Console/Speedtest/STResults.tsx
+++ b/portal-ui/src/screens/Console/Speedtest/STResults.tsx
@@ -16,7 +16,6 @@

 import React, { Fragment, useState } from "react";
 import get from "lodash/get";
-import { Theme } from "@mui/material/styles";
 import {
  Button,
  ComputerLineIcon,
@@ -26,116 +25,114 @@ import {
  StorageIcon,
  UploadStatIcon,
  VersionIcon,
+  Grid,
+  Box,
 } from "mds";
-import createStyles from "@mui/styles/createStyles";
-import { Grid } from "@mui/material";
 import { IndvServerMetric, SpeedTestResponse, STServer } from "./types";
 import { calculateBytes, prettyNumber } from "../../../common/utils";
-import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
 import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
 import { cleanMetrics } from "./utils";
+import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
 import SpeedTestUnit from "./SpeedTestUnit";
-import makeStyles from "@mui/styles/makeStyles";
+import styled from "styled-components";

-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    actionButtons: {
-      textAlign: "right",
+const STResultsContainer = styled.div(({ theme }) => ({
+  "& .actionButtons": {
+    textAlign: "right",
+  },
+  "& .descriptorLabel": {
+    fontWeight: "bold",
+    fontSize: 14,
+  },
+  "& .resultsContainer": {
+    backgroundColor: get(theme, "boxBackground", "#FBFAFA"),
+    borderTop: `${get(theme, "borderColor", "#E2E2E2")} 1px solid`,
+    marginTop: 30,
+    padding: 25,
+  },
+  "& .resultsIcon": {
+    display: "flex",
+    alignItems: "center",
+    "& svg": {
+      fill: get(theme, `screenTitle.iconColor`, "#07193E"),
    },
-    descriptorLabel: {
-      fontWeight: "bold",
+  },
+  "& .detailedItem": {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-start",
+  },
+  "& .detailedVersion": {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+  },
+  "& .serversTable": {
+    width: "100%",
+    marginTop: 15,
+    "& thead > tr > th": {
+      textAlign: "left",
+      padding: 15,
      fontSize: 14,
+      fontWeight: "bold",
    },
-    resultsContainer: {
-      backgroundColor: "#FBFAFA",
-      borderTop: "#F1F1F1 1px solid",
-      marginTop: 30,
-      padding: 25,
-    },
-    resultsIcon: {
-      display: "flex",
-      alignItems: "center",
-      "& svg": {
-        fill: "#07193E",
+    "& tbody > tr": {
+      "&:last-of-type": {
+        "& > td": {
+          borderBottom: `${get(theme, "borderColor", "#E2E2E2")} 1px solid`,
+        },
      },
-    },
-    detailedItem: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-    },
-    detailedVersion: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-    },
-    serversTable: {
-      width: "100%",
-      marginTop: 15,
-      "& thead > tr > th": {
-        textAlign: "left",
+      "& > td": {
+        borderTop: `${get(theme, "borderColor", "#E2E2E2")} 1px solid`,
        padding: 15,
        fontSize: 14,
-        fontWeight: "bold",
-      },
-      "& tbody > tr": {
+        "&:first-of-type": {
+          borderLeft: `${get(theme, "borderColor", "#E2E2E2")} 1px solid`,
+        },
        "&:last-of-type": {
-          "& > td": {
-            borderBottom: "#E2E2E2 1px solid",
-          },
-        },
-        "& > td": {
-          borderTop: "#E2E2E2 1px solid",
-          padding: 15,
-          fontSize: 14,
-          "&:first-of-type": {
-            borderLeft: "#E2E2E2 1px solid",
-          },
-          "&:last-of-type": {
-            borderRight: "#E2E2E2 1px solid",
-          },
+          borderRight: `${get(theme, "borderColor", "#E2E2E2")} 1px solid`,
        },
      },
    },
-    serverIcon: {
-      width: 55,
+  },
+  "& .serverIcon": {
+    width: 55,
+  },
+  "& .serverValue": {
+    width: 140,
+  },
+  "& .serverHost": {
+    maxWidth: 540,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  "& .tableOverflow": {
+    overflowX: "auto",
+    paddingBottom: 15,
+  },
+  "& .objectGeneral": {
+    marginTop: 15,
+  },
+  "& .download": {
+    "& .min-icon": {
+      width: 35,
+      height: 35,
+      color: get(theme, "signalColors.good", "#4CCB92"),
    },
-    serverValue: {
-      width: 140,
+  },
+  "& .upload": {
+    "& .min-icon": {
+      width: 35,
+      height: 35,
+      color: get(theme, "signalColors.info", "#2781B0"),
    },
-    serverHost: {
-      maxWidth: 540,
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap",
-    },
-    tableOverflow: {
-      overflowX: "auto",
-      paddingBottom: 15,
-    },
-    objectGeneral: {
-      marginTop: 15,
-    },
-    download: {
-      "& .min-icon": {
-        width: 35,
-        height: 35,
-        color: "rgb(113,200,150)",
-      },
-    },
-    upload: {
-      "& .min-icon": {
-        width: 35,
-        height: 35,
-        color: "rgb(66,127,172)",
-      },
-    },
-    versionIcon: {
-      color: "#07193E",
-      marginRight: 20,
-    },
-  }),
-);
+  },
+  "& .versionIcon": {
+    color: get(theme, `screenTitle.iconColor`, "#07193E"),
+    marginRight: 20,
+  },
+}));

 interface ISTResults {
  results: SpeedTestResponse[];
@@ -143,8 +140,6 @@ interface ISTResults {
 }

 const STResults = ({ results, start }: ISTResults) => {
-  const classes = useStyles();
-
  const [jsonView, setJsonView] = useState<boolean>(false);

  const finalRes = results[results.length - 1] || [];
@@ -227,14 +222,14 @@ const STResults = ({ results, start }: ISTResults) => {
  const clnMetrics = cleanMetrics(results);

  return (
-    <Fragment>
-      <Grid container className={classes.objectGeneral}>
+    <STResultsContainer>
+      <Grid container className={"objectGeneral"}>
        <Grid item xs={12} md={6} lg={6}>
-          <Grid container className={classes.objectGeneral}>
+          <Grid container className={"objectGeneral"}>
            <Grid item xs={12} md={6} lg={6}>
              <SpeedTestUnit
                icon={
-                  <div className={classes.download}>
+                  <div className={"download"}>
                    <DownloadStatIcon />
                  </div>
                }
@@ -246,7 +241,7 @@ const STResults = ({ results, start }: ISTResults) => {
            <Grid item xs={12} md={6} lg={6}>
              <SpeedTestUnit
                icon={
-                  <div className={classes.upload}>
+                  <div className={"upload"}>
                    <UploadStatIcon />
                  </div>
                }
@@ -305,7 +300,7 @@ const STResults = ({ results, start }: ISTResults) => {
      {clnMetrics.length > 1 && (
        <Fragment>
          <Grid container>
-            <Grid item xs={12} md={6} className={classes.descriptorLabel}>
+            <Grid item xs={12} md={6} className={"descriptorLabel"}>
              {start ? (
                <Fragment>Preliminar Results:</Fragment>
              ) : (
@@ -314,7 +309,12 @@ const STResults = ({ results, start }: ISTResults) => {
                </Fragment>
              )}
            </Grid>
-            <Grid item xs={12} md={6} className={classes.actionButtons}>
+            <Grid
+              item
+              xs={12}
+              md={6}
+              sx={{ display: "flex", justifyContent: "right", gap: 8 }}
+            >
              {!start && (
                <Fragment>
                  <Button
@@ -334,118 +334,121 @@ const STResults = ({ results, start }: ISTResults) => {
              )}
            </Grid>
          </Grid>
-          <Grid container className={classes.resultsContainer}>
-            {jsonView ? (
-              <Fragment>
-                <CodeMirrorWrapper value={finalResJSON} onChange={() => {}} />
-              </Fragment>
-            ) : (
-              <Fragment>
-                <Grid
-                  item
-                  xs={12}
-                  sm={12}
-                  md={1}
-                  lg={1}
-                  className={classes.resultsIcon}
-                  alignItems={"flex-end"}
-                >
-                  <ComputerLineIcon width={45} />
-                </Grid>
-                <Grid
-                  item
-                  xs={12}
-                  sm={6}
-                  md={3}
-                  lg={2}
-                  className={classes.detailedItem}
-                >
-                  Nodes:&nbsp;<strong>{finalRes.servers}</strong>
-                </Grid>
-                <Grid
-                  item
-                  xs={12}
-                  sm={6}
-                  md={3}
-                  lg={2}
-                  className={classes.detailedItem}
-                >
-                  Drives:&nbsp;<strong>{finalRes.disks}</strong>
-                </Grid>
-                <Grid
-                  item
-                  xs={12}
-                  sm={6}
-                  md={3}
-                  lg={2}
-                  className={classes.detailedItem}
-                >
-                  Concurrent:&nbsp;<strong>{finalRes.concurrent}</strong>
-                </Grid>
-                <Grid
-                  item
-                  xs={12}
-                  sm={12}
-                  md={12}
-                  lg={5}
-                  className={classes.detailedVersion}
-                >
-                  <span className={classes.versionIcon}>
-                    <VersionIcon />
-                  </span>{" "}
-                  MinIO VERSION&nbsp;<strong>{finalRes.version}</strong>
-                </Grid>
-                <Grid item xs={12} className={classes.tableOverflow}>
-                  <table
-                    className={classes.serversTable}
-                    cellSpacing={0}
-                    cellPadding={0}
+          <Box withBorders useBackground sx={{ marginTop: 15 }}>
+            <Grid container>
+              {jsonView ? (
+                <Fragment>
+                  <CodeMirrorWrapper value={finalResJSON} onChange={() => {}} />
+                </Fragment>
+              ) : (
+                <Fragment>
+                  <Grid
+                    item
+                    xs={12}
+                    sm={12}
+                    md={1}
+                    lg={1}
+                    className={"resultsIcon"}
                  >
-                    <thead>
-                      <tr>
-                        <th colSpan={2}>Servers</th>
-                        <th>GET</th>
-                        <th>PUT</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {statJoin.map((stats, index) => (
-                        <tr key={`storage-${index.toString()}`}>
-                          <td className={classes.serverIcon}>
-                            <StorageIcon />
-                          </td>
-                          <td className={classes.serverHost}>{stats.host}</td>
-                          {stats.getError && stats.getError !== "" ? (
-                            <td>{stats.getError}</td>
-                          ) : (
-                            <Fragment>
-                              <td className={classes.serverValue}>
-                                {prettyNumber(parseFloat(stats.getValue))}&nbsp;
-                                {stats.getUnit}/s.
-                              </td>
-                            </Fragment>
-                          )}
-                          {stats.putError && stats.putError !== "" ? (
-                            <td>{stats.putError}</td>
-                          ) : (
-                            <Fragment>
-                              <td className={classes.serverValue}>
-                                {prettyNumber(parseFloat(stats.putValue))}&nbsp;
-                                {stats.putUnit}/s.
-                              </td>
-                            </Fragment>
-                          )}
+                    <ComputerLineIcon width={45} />
+                  </Grid>
+                  <Grid
+                    item
+                    xs={12}
+                    sm={6}
+                    md={3}
+                    lg={2}
+                    className={"detailedItem"}
+                  >
+                    Nodes:&nbsp;<strong>{finalRes.servers}</strong>
+                  </Grid>
+                  <Grid
+                    item
+                    xs={12}
+                    sm={6}
+                    md={3}
+                    lg={2}
+                    className={"detailedItem"}
+                  >
+                    Drives:&nbsp;<strong>{finalRes.disks}</strong>
+                  </Grid>
+                  <Grid
+                    item
+                    xs={12}
+                    sm={6}
+                    md={3}
+                    lg={2}
+                    className={"detailedItem"}
+                  >
+                    Concurrent:&nbsp;<strong>{finalRes.concurrent}</strong>
+                  </Grid>
+                  <Grid
+                    item
+                    xs={12}
+                    sm={12}
+                    md={12}
+                    lg={5}
+                    className={"detailedVersion"}
+                  >
+                    <span className={"versionIcon"}>
+                      <VersionIcon />
+                    </span>{" "}
+                    MinIO VERSION&nbsp;<strong>{finalRes.version}</strong>
+                  </Grid>
+                  <Grid item xs={12} className={"tableOverflow"}>
+                    <table
+                      className={"serversTable"}
+                      cellSpacing={0}
+                      cellPadding={0}
+                    >
+                      <thead>
+                        <tr>
+                          <th colSpan={2}>Servers</th>
+                          <th>GET</th>
+                          <th>PUT</th>
                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </Grid>
-              </Fragment>
-            )}
-          </Grid>
+                      </thead>
+                      <tbody>
+                        {statJoin.map((stats, index) => (
+                          <tr key={`storage-${index.toString()}`}>
+                            <td className={"serverIcon"}>
+                              <StorageIcon />
+                            </td>
+                            <td className={"serverHost"}>{stats.host}</td>
+                            {stats.getError && stats.getError !== "" ? (
+                              <td>{stats.getError}</td>
+                            ) : (
+                              <Fragment>
+                                <td className={"serverValue"}>
+                                  {prettyNumber(parseFloat(stats.getValue))}
+                                  &nbsp;
+                                  {stats.getUnit}/s.
+                                </td>
+                              </Fragment>
+                            )}
+                            {stats.putError && stats.putError !== "" ? (
+                              <td>{stats.putError}</td>
+                            ) : (
+                              <Fragment>
+                                <td className={"serverValue"}>
+                                  {prettyNumber(parseFloat(stats.putValue))}
+                                  &nbsp;
+                                  {stats.putUnit}/s.
+                                </td>
+                              </Fragment>
+                            )}
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </Grid>
+                </Fragment>
+              )}
+            </Grid>
+          </Box>
        </Fragment>
      )}
-    </Fragment>
+    </STResultsContainer>
  );
 };

--- a/portal-ui/src/screens/Console/Speedtest/SpeedTestUnit.tsx
+++ b/portal-ui/src/screens/Console/Speedtest/SpeedTestUnit.tsx
@@ -13,61 +13,55 @@
 //
 //  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";
+import styled from "styled-components";
+import get from "lodash/get";
+import { calculateBytes } from "../../../common/utils";

-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 SpeedTestUnitBase = styled.table(({ theme }) => ({
+  "& .objectGeneralTitle": {
+    lineHeight: 1,
+    fontSize: 50,
+    color: get(theme, "mutedText", "#87888d"),
+  },
+  "& .generalUnit": {
+    color: get(theme, "fontColor", "#000"),
+    fontSize: 12,
+    fontWeight: "bold",
+  },
+  "& .testUnitRes": {
+    fontSize: 60,
+    color: get(theme, "signalColors.main", "#07193E"),
+    fontWeight: "bold",
+    textAlign: "right",
+  },
+  "& .metricValContainer": {
+    lineHeight: 1,
+    verticalAlign: "bottom",
+  },
+  "& .objectsUnitRes": {
+    fontSize: 22,
+    marginTop: 6,
+    color: get(theme, "mutedText", "#87888d"),
+    fontWeight: "bold",
+    textAlign: "right",
+  },
+  "& .objectsUnit": {
+    color: get(theme, "mutedText", "#87888d"),
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+  "& .iconTd": {
+    verticalAlign: "bottom",
+  },
+}));

 const SpeedTestUnit = ({
-  classes,
  title,
  icon,
  throughput,
  objects,
 }: {
-  classes: any;
  title: any;
  icon: any;
  throughput: string;
@@ -84,30 +78,22 @@ const SpeedTestUnit = ({
  }

  return (
-    <table>
+    <SpeedTestUnitBase>
      <tr>
-        <td className={classes.objectGeneralTitle}>{title}</td>
-        <td className={classes.iconTd}>{icon}</td>
+        <td className={"objectGeneralTitle"}>{title}</td>
+        <td className={"iconTd"}>{icon}</td>
      </tr>
      <tr>
-        <td className={clsx(classes.metricValContainer, classes.testUnitRes)}>
-          {total}
-        </td>
-        <td className={clsx(classes.metricValContainer, classes.generalUnit)}>
-          {unit}
-        </td>
+        <td className={`metricValContainer testUnitRes`}>{total}</td>
+        <td className={`metricValContainer generalUnit`}>{unit}</td>
      </tr>
      <tr>
-        <td
-          className={clsx(classes.metricValContainer, classes.objectsUnitRes)}
-        >
-          {objects}
-        </td>
-        <td className={clsx(classes.metricValContainer, classes.objectsUnit)}>
+        <td className={`metricValContainer objectsUnitRes`}>{objects}</td>
+        <td className={`metricValContainer objectsUnit`}>
          {objects !== 0 && "Objs/S"}
        </td>
      </tr>
-    </table>
+    </SpeedTestUnitBase>
  );
 };
-export default withStyles(styles)(SpeedTestUnit);
+export default SpeedTestUnit;
--- a/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
+++ b/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
@@ -17,90 +17,48 @@
 import React, { Fragment, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
-import { Grid } from "@mui/material";
-import { Theme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
 import {
+  Box,
  Button,
+  Grid,
  HelpBox,
+  InputBox,
  Loader,
  PageLayout,
  SpeedtestIcon,
  WarnIcon,
-  InputBox,
 } from "mds";
 import { DateTime } from "luxon";
-import createStyles from "@mui/styles/createStyles";
-import {
-  actionsTray,
-  advancedFilterToggleStyles,
-  containerForHeader,
-  formFieldStyles,
-  searchField,
-} from "../Common/FormComponents/common/styleLibrary";
+import STResults from "./STResults";
+import ProgressBarWrapper from "../Common/ProgressBarWrapper/ProgressBarWrapper";
+import InputUnitMenu from "../Common/FormComponents/InputUnitMenu/InputUnitMenu";
+import DistributedOnly from "../Common/DistributedOnly/DistributedOnly";
+import RegisterCluster from "../Support/RegisterCluster";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
+import HelpMenu from "../HelpMenu";
+import { SecureComponent } from "../../../common/SecureComponent";
+import { selDistSet, setHelpName } from "../../../systemSlice";
+import { registeredCluster } from "../../../config";
+import { useAppDispatch } from "../../../store";
 import { wsProtocol } from "../../../utils/wsUtils";
 import { SpeedTestResponse } from "./types";
 import {
  CONSOLE_UI_RESOURCE,
  IAM_SCOPES,
 } from "../../../common/SecureComponent/permissions";
-import STResults from "./STResults";
-import ProgressBarWrapper from "../Common/ProgressBarWrapper/ProgressBarWrapper";
-import InputUnitMenu from "../Common/FormComponents/InputUnitMenu/InputUnitMenu";
-import { SecureComponent } from "../../../common/SecureComponent";
-import DistributedOnly from "../Common/DistributedOnly/DistributedOnly";
-import { selDistSet, setHelpName } from "../../../systemSlice";
-import makeStyles from "@mui/styles/makeStyles";
-import RegisterCluster from "../Support/RegisterCluster";
-import { registeredCluster } from "../../../config";
-import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
-import HelpMenu from "../HelpMenu";
-import { useAppDispatch } from "../../../store";
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    advancedContent: {
-      backgroundColor: "#FBFAFA",
-      maxHeight: 0,
-      transitionDuration: "0.3s",
-      overflow: "hidden",
-      padding: "0 15px",
-      marginTop: 15,
-      justifyContent: "space-between",
-      "&.open": {
-        maxHeight: 400,
-        paddingBottom: 15,
-      },
-    },
-
-    stepProgressText: {
-      fontSize: 13,
-      marginBottom: 8,
-    },
-    ...advancedFilterToggleStyles,
-    ...actionsTray,
-    ...searchField,
-    ...formFieldStyles,
-    ...containerForHeader,
-  }),
-);

 const Speedtest = () => {
  const distributedSetup = useSelector(selDistSet);
-
  const navigate = useNavigate();

-  const classes = useStyles();
  const [start, setStart] = useState<boolean>(false);
-
  const [currStatus, setCurrStatus] = useState<SpeedTestResponse[] | null>(
    null,
  );
-
  const [size, setSize] = useState<string>("64");
  const [sizeUnit, setSizeUnit] = useState<string>("MB");
  const [duration, setDuration] = useState<string>("10");
-
  const [topDate, setTopDate] = useState<number>(0);
  const [currentValue, setCurrentValue] = useState<number>(0);
  const [totalSeconds, setTotalSeconds] = useState<number>(0);
@@ -228,10 +186,15 @@ const Speedtest = () => {
            scopes={[IAM_SCOPES.ADMIN_HEAL]}
            resource={CONSOLE_UI_RESOURCE}
          >
-            <Grid item xs={12} className={classes.boxy}>
+            <Box withBorders>
              <Grid container>
-                <Grid item md={4} sm={12}>
-                  <div className={classes.stepProgressText}>
+                <Grid item md={3} sm={12}>
+                  <Box
+                    sx={{
+                      fontSize: 13,
+                      marginBottom: 8,
+                    }}
+                  >
                    {start ? (
                      <Fragment>
                        Speedtest in progress...
@@ -246,17 +209,17 @@ const Speedtest = () => {
                        )}
                      </Fragment>
                    )}
-                  </div>
-                  <div>
+                  </Box>
+                  <Box>
                    <ProgressBarWrapper
                      value={speedometerValue}
                      ready={currStatus !== null && !start}
                      indeterminate={start}
                      size={"small"}
                    />
-                  </div>
+                  </Box>
                </Grid>
-                <Grid item md sm={12}>
+                <Grid item md={4} sm={12}>
                  <div style={{ marginLeft: 10, width: 300 }}>
                    <InputBox
                      id={"size"}
@@ -284,7 +247,7 @@ const Speedtest = () => {
                    />
                  </div>
                </Grid>
-                <Grid item md sm={12}>
+                <Grid item md={4} sm={12}>
                  <div style={{ marginLeft: 10, width: 300 }}>
                    <InputBox
                      id={"duration"}
@@ -311,7 +274,7 @@ const Speedtest = () => {
                    />
                  </div>
                </Grid>
-                <Grid item md={1} sm={12} textAlign={"right"}>
+                <Grid item md={1} sm={12} sx={{ textAlign: "center" }}>
                  <Button
                    onClick={startSpeedtestButton}
                    color="primary"
@@ -322,7 +285,6 @@ const Speedtest = () => {
                        ? "callAction"
                        : "regular"
                    }
-                    className={`${classes.buttonBackground} ${classes.speedStart}`}
                    disabled={
                      duration.trim() === "" ||
                      size.trim() === "" ||
@@ -333,7 +295,7 @@ const Speedtest = () => {
                  />
                </Grid>
              </Grid>
-              <Grid container className={classes.multiModule}>
+              <Grid container>
                <Grid item xs={12}>
                  <Fragment>
                    <Grid item xs={12}>
@@ -346,7 +308,7 @@ const Speedtest = () => {
                  </Fragment>
                </Grid>
              </Grid>
-            </Grid>
+            </Box>

            {!start && !currStatus && clusterRegistered && (
              <Fragment>