Initial Tools Pages Migrations (#2978)

Tools Pages Migrations

- Call Home
- Inspect
- Profile
- Health

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

Author: bexsoft

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

@@ -15,120 +15,20 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { Grid } from "@mui/material";
-import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
-import { DrivesIcon, Loader, VersionIcon } from "mds";
+import { DrivesIcon, Loader, SectionTitle, VersionIcon, Grid } from "mds";
 import { api } from "api";
 import { ServerProperties } from "api/consoleApi";
 
 interface ITestWrapper {
   title: any;
   children: any;
-  classes: any;
-  advancedVisible: boolean;
-  advancedContent?: any;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    titleBar: {
-      borderBottom: "#E5E5E5 1px solid",
-      padding: "30px 25px",
-      fontSize: 20,
-      color: "#07193E",
-      fontWeight: "bold",
-      borderRadius: "10px 10px 0px 0px",
-      paddingTop: 0,
-    },
-    divisorContainer: {
-      padding: 25,
-    },
-    serversData: {
-      color: "#07193E",
-      fontSize: 18,
-      display: "flex",
-      alignItems: "center",
-      "& svg": {
-        marginRight: 10,
-      },
-    },
-    minioVersionContainer: {
-      fontSize: 12,
-      color: "#07193E",
-      justifyContent: "center",
-      alignSelf: "center",
-      alignItems: "center",
-      display: "flex",
-    },
-    versionIcon: {
-      color: "#07193E",
-      marginRight: 20,
-    },
-    loaderAlign: {
-      textAlign: "center",
-    },
-    advancedContainer: {
-      justifyContent: "flex-end",
-      display: "flex",
-    },
-    optionsContainer: {
-      padding: 0,
-      marginBottom: 25,
-    },
-    advancedConfiguration: {
-      color: "#2781B0",
-      fontSize: 10,
-      textDecoration: "underline",
-      border: "none",
-      backgroundColor: "transparent",
-      cursor: "pointer",
-      alignItems: "center",
-      display: "flex",
-
-      "&:hover": {
-        color: "#07193E",
-      },
-
-      "& svg": {
-        width: 10,
-        alignSelf: "center",
-        marginLeft: 5,
-      },
-    },
-    advancedOpen: {
-      transform: "rotateZ(-90deg) translateX(-4px) translateY(2px)",
-    },
-    advancedClosed: {
-      transform: "rotateZ(90deg)",
-    },
-    advancedContent: {
-      backgroundColor: "#F5F7F9",
-      maxHeight: 0,
-      transitionDuration: "0.3s",
-      overflow: "hidden",
-      padding: "0 15px",
-      "&.open": {
-        maxHeight: 400,
-        padding: 15,
-      },
-    },
-  });
-
-const TestWrapper = ({
-  title,
-  children,
-  classes,
-  advancedVisible,
-  advancedContent,
-}: ITestWrapper) => {
+const TestWrapper = ({ title, children }: ITestWrapper) => {
   const [version, setVersion] = useState<string>("N/A");
   const [totalNodes, setTotalNodes] = useState<number>(0);
   const [totalDrives, setTotalDrives] = useState<number>(0);
   const [loading, setLoading] = useState<boolean>(true);
-  const [advancedOpen, setAdvancedOpen] = useState<boolean>(false);
 
   useEffect(() => {
     if (loading) {
@@ -165,15 +65,37 @@ const TestWrapper = ({
 
   return (
     <Grid item xs={12}>
-      <Grid item xs={12} className={classes.titleBar}>
-        {title}
-      </Grid>
+      <SectionTitle separator>{title}</SectionTitle>
       <Grid item xs={12}>
-        <Grid item xs={12} className={classes.optionsContainer}>
-          <Grid container className={classes.divisorContainer}>
+        <Grid
+          item
+          xs={12}
+          sx={{
+            padding: 0,
+            marginBottom: 25,
+          }}
+        >
+          <Grid
+            container
+            sx={{
+              padding: 25,
+            }}
+          >
             {!loading ? (
               <Fragment>
-                <Grid item xs={12} md={4} className={classes.serversData}>
+                <Grid
+                  item
+                  xs={12}
+                  md={4}
+                  sx={{
+                    fontSize: 18,
+                    display: "flex",
+                    alignItems: "center",
+                    "& svg": {
+                      marginRight: 10,
+                    },
+                  }}
+                >
                   <DrivesIcon /> <strong>{totalNodes}</strong>
                   &nbsp;nodes,&nbsp;
                   <strong>{totalDrives}</strong>&nbsp; drives
@@ -182,58 +104,37 @@ const TestWrapper = ({
                   item
                   xs={12}
                   md={4}
-                  className={classes.minioVersionContainer}
+                  sx={{
+                    fontSize: 12,
+                    justifyContent: "center",
+                    alignSelf: "center",
+                    alignItems: "center",
+                    display: "flex",
+                  }}
                 >
-                  <span className={classes.versionIcon}>
+                  <span
+                    style={{
+                      marginRight: 20,
+                    }}
+                  >
                     <VersionIcon />
                   </span>{" "}
                   MinIO VERSION&nbsp;<strong>{version}</strong>
                 </Grid>
-                <Grid item xs={12} md={4} className={classes.advancedContainer}>
-                  {advancedVisible && (
-                    <button
-                      onClick={() => {
-                        setAdvancedOpen(!advancedOpen);
-                      }}
-                      className={classes.advancedConfiguration}
-                    >
-                      Advanced configurations{" "}
-                      <span
-                        className={
-                          advancedOpen
-                            ? classes.advancedOpen
-                            : classes.advancedClosed
-                        }
-                      >
-                        <ArrowForwardIosIcon />
-                      </span>
-                    </button>
-                  )}
-                </Grid>
               </Fragment>
             ) : (
               <Fragment>
-                <Grid item xs={12} className={classes.loaderAlign}>
+                <Grid item xs={12} sx={{ textAlign: "center" }}>
                   <Loader style={{ width: 25, height: 25 }} />
                 </Grid>
               </Fragment>
             )}
           </Grid>
-          {advancedContent && (
-            <Grid
-              xs={12}
-              className={`${classes.advancedContent} ${
-                advancedOpen ? "open" : ""
-              }`}
-            >
-              {advancedContent}
-            </Grid>
-          )}
         </Grid>
         {children}
       </Grid>
     </Grid>
   );
 };
 
-export default withStyles(styles)(TestWrapper);
+export default TestWrapper;