UX Tenant summary screen (#1346)

Author: prakashsvmx

portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx

@@ -137,7 +137,7 @@ const FileSelector = ({
                 }}
                 disableRipple={false}
                 disableFocusRipple={false}
-                size="large"
+                size="small"
               >
                 <CancelIcon />
               </IconButton>
@@ -157,7 +157,7 @@ const FileSelector = ({
               }}
               disableRipple={false}
               disableFocusRipple={false}
-              size="large"
+              size="small"
             >
               <AttachFileIcon />
             </IconButton>

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -1134,15 +1134,25 @@ export const fileInputStyles = {
     border: "1px solid #EAEAEA",
     width: "100%",
     paddingLeft: 10,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: 36,
+    maxWidth: 300,
   },
   textBoxContainer: {
     border: "1px solid #EAEAEA",
     borderRadius: 3,
+    height: 36,
     padding: 5,
     "& input": {
       width: "100%",
       margin: "auto",
     },
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    maxWidth: 300,
   },
 };
 

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

@@ -42,13 +42,19 @@ const styles = (theme: Theme) =>
     },
     headerBarSubheader: {
       color: "grey",
+      "@media (max-width: 900px)": {
+        maxWidth: 200,
+      },
     },
     screenTitle: {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       padding: "1rem",
       borderBottom: "1px solid #EAEAEA",
+      "@media (max-width: 600px)": {
+        flexFlow: "column",
+      },
     },
     titleColumn: {
       height: "auto",
@@ -63,6 +69,9 @@ const styles = (theme: Theme) =>
     leftItems: {
       display: "flex",
       alignItems: "center",
+      "@media (max-width: 600px)": {
+        flexFlow: "column",
+      },
     },
     rightItems: {
       display: "flex",

portal-ui/src/screens/Console/Common/UsageBarWrapper/LabelValuePair.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Stack } from "@mui/material";
+
+type LabelValuePairProps = {
+  label?: any;
+  value?: any;
+  orientation?: any;
+  stkProps?: any;
+  lblProps?: any;
+  valProps?: any;
+};
+
+const LabelValuePair = ({
+  label = null,
+  value = "-",
+  orientation = "column",
+  stkProps = {},
+  lblProps = {},
+  valProps = {},
+}: LabelValuePairProps) => {
+  return (
+    <Stack direction={{ xs: "column", sm: orientation }} {...stkProps}>
+      <label style={{ marginRight: 5, fontWeight: 600 }} {...lblProps}>
+        {label}
+      </label>
+      <label style={{ marginRight: 5, fontWeight: 500 }} {...valProps}>
+        {value}
+      </label>
+    </Stack>
+  );
+};
+
+export default LabelValuePair;

portal-ui/src/screens/Console/Common/UsageBarWrapper/StackRow.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Stack } from "@mui/material";
+
+const StackRow = ({
+  children = null,
+  ...restProps
+}: {
+  children?: any;
+  [x: string]: any;
+}) => {
+  return (
+    <Stack
+      direction={{ xs: "column", sm: "row" }}
+      justifyContent="space-between"
+      margin={"5px 0 5px 0"}
+      spacing={{ xs: 1, sm: 2, md: 4 }}
+      {...restProps}
+    >
+      {children}
+    </Stack>
+  );
+};
+export default StackRow;

portal-ui/src/screens/Console/Common/UsageBarWrapper/SummaryUsageBar.tsx

@@ -0,0 +1,134 @@
+import React from "react";
+import { Theme } from "@mui/material/styles";
+import createStyles from "@mui/styles/createStyles";
+import withStyles from "@mui/styles/withStyles";
+import { LinearProgress, Stack } from "@mui/material";
+import Grid from "@mui/material/Grid";
+import CircularProgress from "@mui/material/CircularProgress";
+import ErrorBlock from "../../../shared/ErrorBlock";
+import { CircleIcon } from "../../../../icons";
+import LabelValuePair from "./LabelValuePair";
+
+interface IProgressBar {
+  maxValue: number;
+  currValue: number;
+  label: string;
+  renderFunction?: (element: string) => any;
+  error: string;
+  loading: boolean;
+  classes: any;
+  labels?: boolean;
+  healthStatus?: string;
+}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    allValue: {
+      fontSize: 16,
+      fontWeight: 700,
+      marginBottom: 8,
+    },
+    currentUsage: {
+      fontSize: 12,
+      marginTop: 8,
+    },
+    centerItem: {
+      textAlign: "center",
+    },
+  });
+
+export const BorderLinearProgress = withStyles((theme) => ({
+  root: {
+    height: 10,
+    borderRadius: 5,
+  },
+  colorPrimary: {
+    backgroundColor: "#F4F4F4",
+  },
+  bar: {
+    borderRadius: 5,
+    backgroundColor: "#081C42",
+  },
+  padChart: {
+    padding: "5px",
+  },
+}))(LinearProgress);
+
+const SummaryUsageBar = ({
+  classes,
+  maxValue,
+  currValue,
+  healthStatus,
+  renderFunction,
+  loading,
+  error,
+}: IProgressBar) => {
+  const porcentualValue = (currValue * 100) / maxValue;
+
+  const renderComponent = () => {
+    if (!loading) {
+      return error !== "" ? (
+        <ErrorBlock errorMessage={error} withBreak={false} />
+      ) : (
+        <Grid item xs={12}>
+          <BorderLinearProgress variant="determinate" value={porcentualValue} />
+          <Stack
+            direction={{ xs: "column", sm: "row" }}
+            spacing={{ xs: 1, sm: 2, md: 4 }}
+            alignItems={"stretch"}
+            margin={"15px 0 15px 0"}
+          >
+            <LabelValuePair
+              label={"Storage Capacity:"}
+              orientation={"row"}
+              value={
+                renderFunction ? renderFunction(maxValue.toString()) : maxValue
+              }
+            />
+            <LabelValuePair
+              label={"Used:"}
+              orientation={"row"}
+              value={
+                renderFunction
+                  ? renderFunction(currValue.toString())
+                  : currValue
+              }
+            />
+            {healthStatus && (
+              <LabelValuePair
+                orientation={"row"}
+                label={"Health:"}
+                value={
+                  <span className={healthStatus}>
+                    <CircleIcon />
+                  </span>
+                }
+              />
+            )}
+          </Stack>
+        </Grid>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <React.Fragment>
+      {loading && (
+        <div className={classes.padChart}>
+          <Grid item xs={12} className={classes.centerItem}>
+            <CircularProgress
+              color="primary"
+              size={40}
+              variant="indeterminate"
+            />
+          </Grid>
+        </div>
+      )}
+      {renderComponent()}
+    </React.Fragment>
+  );
+};
+
+export default withStyles(styles)(SummaryUsageBar);

portal-ui/src/screens/Console/Tenants/TenantDetails/PodsSummary.tsx

@@ -21,6 +21,7 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import {
   containerForHeader,
+  tableStyles,
   tenantDetailsStyles,
 } from "../../Common/FormComponents/common/styleLibrary";
 import { niceDays } from "../../../../common/utils";
@@ -32,6 +33,7 @@ import { AppState } from "../../../../store";
 import { setTenantDetailsLoad } from "../actions";
 import { ErrorResponseHandler } from "../../../../common/types";
 import DeletePod from "./DeletePod";
+import { Grid } from "@mui/material";
 
 interface IPodsSummary {
   classes: any;
@@ -44,6 +46,7 @@ interface IPodsSummary {
 const styles = (theme: Theme) =>
   createStyles({
     ...tenantDetailsStyles,
+    ...tableStyles,
     ...containerForHeader(theme.spacing(4)),
   });
 
@@ -126,27 +129,29 @@ const PodsSummary = ({
         />
       )}
       <h1 className={classes.sectionTitle}>Pods</h1>
-      <TableWrapper
-        columns={[
-          { label: "Name", elementKey: "name" },
-          { label: "Status", elementKey: "status" },
-          { label: "Age", elementKey: "time" },
-          { label: "Pod IP", elementKey: "podIP" },
-          {
-            label: "Restarts",
-            elementKey: "restarts",
-            renderFunction: (input) => {
-              return input !== null ? input : 0;
+      <Grid item xs={12} className={classes.tableBlock}>
+        <TableWrapper
+          columns={[
+            { label: "Name", elementKey: "name" },
+            { label: "Status", elementKey: "status" },
+            { label: "Age", elementKey: "time" },
+            { label: "Pod IP", elementKey: "podIP" },
+            {
+              label: "Restarts",
+              elementKey: "restarts",
+              renderFunction: (input) => {
+                return input !== null ? input : 0;
+              },
             },
-          },
-          { label: "Node", elementKey: "node" },
-        ]}
-        isLoading={loadingPods}
-        records={pods}
-        itemActions={podTableActions}
-        entityName="Servers"
-        idField="name"
-      />
+            { label: "Node", elementKey: "node" },
+          ]}
+          isLoading={loadingPods}
+          records={pods}
+          itemActions={podTableActions}
+          entityName="Servers"
+          idField="name"
+        />
+      </Grid>
     </Fragment>
   );
 };

portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx

@@ -22,6 +22,7 @@ import withStyles from "@mui/styles/withStyles";
 import {
   actionsTray,
   containerForHeader,
+  tableStyles,
   tenantDetailsStyles,
 } from "../../Common/FormComponents/common/styleLibrary";
 import { Button, TextField } from "@mui/material";
@@ -48,6 +49,7 @@ const styles = (theme: Theme) =>
   createStyles({
     ...tenantDetailsStyles,
     ...actionsTray,
+    ...tableStyles,
     ...containerForHeader(theme.spacing(4)),
   });
 
@@ -130,7 +132,7 @@ const PoolsSummary = ({
           <br />
         </Grid>
 
-        <Grid item xs={12}>
+        <Grid item xs={12} className={classes.tableBlock}>
           <TableWrapper
             itemActions={[]}
             columns={[

portal-ui/src/screens/Console/Tenants/TenantDetails/SubnetLicenseTenant.tsx

@@ -40,7 +40,10 @@ interface ISubnetLicenseTenant {
 const styles = (theme: Theme) =>
   createStyles({
     paperContainer: {
-      padding: "15px 15px 15px 50px",
+      padding: "15px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
     },
     licenseInfoValue: {
       textTransform: "none",