Fixed widgets overlaps & some style adjustments in Dashboard (#1087)

bexsoft · web-flow · commit 8fd1e0db9c09 · 2021-09-28T14:51:38.000-05:00
Signed-off-by: Benjamin Perez &lt;benjamin@bexsoft.net&gt;
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -132,6 +132,7 @@ export const radioIcons = {
 
 export const containerForHeader = (bottomSpacing: any) => ({
   container: {
+    position: "relative" as const,
     padding: "8px 16px 0",
     "& h6": {
       color: "#777777",
@@ -417,6 +418,7 @@ export const widgetCommon = {
     minWidth: 280,
     maxWidth: 1185,
     border: "#eef1f4 2px solid",
+    backgroundColor: "#fff",
     borderRadius: 10,
     width: "100%",
     padding: 16,
@@ -470,6 +472,19 @@ export const widgetCommon = {
   },
 };
 
+export const widgetContainerCommon = {
+  widgetPanelDelimiter: {
+    padding: 10,
+  },
+  dashboardRow: {
+    display: "flex" as const,
+    flexDirection: "row" as const,
+    justifyContent: "flex-start" as const,
+    flexWrap: "wrap" as const,
+    maxWidth: 1180,
+  },
+};
+
 export const tooltipCommon = {
   customTooltip: {
     backgroundColor: "rgba(255, 255, 255, 0.90)",
diff --git a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx
@@ -25,6 +25,7 @@ import DriveInfoCard from "./DriveInfoCard";
 import CommonCard from "../CommonCard";
 import TabSelector from "../../Common/TabSelector/TabSelector";
 import GeneralUsePaginator from "../../Common/GeneralUsePaginator/GeneralUsePaginator";
+import { widgetContainerCommon } from "../../Common/FormComponents/common/styleLibrary";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -48,6 +49,7 @@ const styles = (theme: Theme) =>
       maxWidth: 1185,
       width: "100%",
     },
+    ...widgetContainerCommon,
   });
 
 interface IDashboardProps {
@@ -93,10 +95,12 @@ const BasicDashboard = ({ classes, usage }: IDashboardProps) => {
         }
         return 0;
       });
-    } else return [];
+    }
+    
+    return [];
   };
 
-  const serverArray = makeServerArray(usage);
+  const serverArray = makeServerArray(usage || null);
 
   const usageToRepresent = prettyUsage(
     usage && usage.usage ? usage.usage.toString() : "0"
@@ -129,29 +133,65 @@ const BasicDashboard = ({ classes, usage }: IDashboardProps) => {
         <Grid item xs={12} className={classes.generalStatusTitle}>
           General Status
         </Grid>
-        <Grid item xs={12} className={classes.generalStatusCards}>
-          <CommonCard
-            title={"All Buckets"}
-            metricValue={usage ? prettyNumber(usage.buckets) : 0}
-            extraMargin
-          />
-          <CommonCard
-            title={"Usage"}
-            metricValue={usageToRepresent.total}
-            metricUnit={usageToRepresent.unit}
-            extraMargin
-          />
-          <CommonCard
-            title={"Total Objects"}
-            metricValue={usage ? prettyNumber(usage.objects) : 0}
-            extraMargin
-          />
-          <CommonCard
-            title={"Servers"}
-            metricValue={usage ? prettyNumber(serverArray.length) : 0}
-            subMessage={{ message: "Total" }}
-            extraMargin
-          />
+        <Grid item xs={12} className={classes.dashboardRow}>
+          <Grid
+            item
+            xs={7}
+            sm={8}
+            md={6}
+            lg={3}
+            className={classes.widgetPanelDelimiter}
+          >
+            <CommonCard
+              title={"All Buckets"}
+              metricValue={usage ? prettyNumber(usage.buckets) : 0}
+              extraMargin
+            />
+          </Grid>
+          <Grid
+            item
+            xs={7}
+            sm={8}
+            md={6}
+            lg={3}
+            className={classes.widgetPanelDelimiter}
+          >
+            <CommonCard
+              title={"Usage"}
+              metricValue={usageToRepresent.total}
+              metricUnit={usageToRepresent.unit}
+              extraMargin
+            />
+          </Grid>
+          <Grid
+            item
+            xs={7}
+            sm={8}
+            md={6}
+            lg={3}
+            className={classes.widgetPanelDelimiter}
+          >
+            <CommonCard
+              title={"Total Objects"}
+              metricValue={usage ? prettyNumber(usage.objects) : 0}
+              extraMargin
+            />
+          </Grid>
+          <Grid
+            item
+            xs={7}
+            sm={8}
+            md={6}
+            lg={3}
+            className={classes.widgetPanelDelimiter}
+          >
+            <CommonCard
+              title={"Servers"}
+              metricValue={usage ? prettyNumber(serverArray.length) : 0}
+              subMessage={{ message: "Total" }}
+              extraMargin
+            />
+          </Grid>
         </Grid>
         <Grid item xs={12}>
           <TabSelector
diff --git a/portal-ui/src/screens/Console/Dashboard/Chart.tsx b/portal-ui/src/screens/Console/Dashboard/Chart.tsx
@@ -32,7 +32,7 @@ export default function Chart() {
   return (
     <React.Fragment>
       <Title>Today</Title>
-      <ResponsiveContainer>
+      <ResponsiveContainer width="99%">
         <LineChart
           data={data}
           margin={{
diff --git a/portal-ui/src/screens/Console/Dashboard/CommonCard.tsx b/portal-ui/src/screens/Console/Dashboard/CommonCard.tsx
@@ -46,7 +46,9 @@ const styles = (theme: Theme) =>
     ...widgetCommon,
     cardRoot: {
       ...widgetCommon.singleValueContainer,
-      maxWidth: 280,
+      "&.MuiPaper-root": {
+        borderRadius: 10,
+      },
     },
     cardsContainer: {
       maxHeight: 440,
diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
@@ -20,8 +20,11 @@ import Grid from "@material-ui/core/Grid";
 import ScheduleIcon from "@material-ui/icons/Schedule";
 import WatchLaterIcon from "@material-ui/icons/WatchLater";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
-import { Button } from "@material-ui/core";
-import { actionsTray } from "../../Common/FormComponents/common/styleLibrary";
+import { Button, GridSize } from "@material-ui/core";
+import {
+  actionsTray,
+  widgetContainerCommon,
+} from "../../Common/FormComponents/common/styleLibrary";
 import { IDashboardPanel, widgetType } from "./types";
 import { getWidgetsWithValue, panelsConfiguration } from "./utils";
 import { TabPanel } from "../../../shared/tabs";
@@ -48,13 +51,7 @@ interface IPrDashboard {
 const styles = (theme: Theme) =>
   createStyles({
     ...actionsTray,
-    widgetsContainer: {
-      position: "relative",
-      display: "flex",
-      flexGrow: 1,
-      width: "100%",
-      height: "100%",
-    },
+    ...widgetContainerCommon,
     syncButton: {
       "&.MuiButton-root .MuiButton-iconSizeMedium > *:first-child": {
         fontSize: 18,
@@ -71,9 +68,6 @@ const styles = (theme: Theme) =>
       flexWrap: "wrap",
       maxWidth: 1180,
     },
-    widgetPanelDelimiter: {
-      margin: 10,
-    },
     schedulerIcon: {
       opacity: 0.4,
       fontSize: 10,
@@ -183,7 +177,13 @@ const PrDashboard = ({
       return filterPanels?.map((panelLine, indexLine) => {
         const totalPanelsContained = panelLine.length;
 
-        const perc = 100 / totalPanelsContained;
+        let perc = Math.floor(12 / totalPanelsContained);
+
+        if (perc < 1) {
+          perc = 1;
+        } else if (perc > 12) {
+          perc = 12;
+        }
 
         return (
           <Grid
@@ -198,33 +198,39 @@ const PrDashboard = ({
               );
 
               return (
-                <div
+                <Grid
                   key={`widget-${panelInline}-${indexPanel}`}
                   className={classes.widgetPanelDelimiter}
-                  style={{ width: `calc(${perc}% - 20px)` }}
+                  item
+                  xs={7}
+                  sm={8}
+                  md={6}
+                  lg={perc as GridSize}
                 >
-                  {panelInfo ? (
-                    <Fragment>
-                      {panelInfo.mergedPanels ? (
-                        <Fragment>
-                          <MergedWidgets
-                            title={panelInfo.title}
-                            leftComponent={componentToUse(
-                              panelInfo.mergedPanels[0],
-                              0
-                            )}
-                            rightComponent={componentToUse(
-                              panelInfo.mergedPanels[1],
-                              1
-                            )}
-                          />
-                        </Fragment>
-                      ) : (
-                        componentToUse(panelInfo, indexPanel)
-                      )}
-                    </Fragment>
-                  ) : null}
-                </div>
+                  <Grid item xs={12}>
+                    {panelInfo ? (
+                      <Fragment>
+                        {panelInfo.mergedPanels ? (
+                          <Fragment>
+                            <MergedWidgets
+                              title={panelInfo.title}
+                              leftComponent={componentToUse(
+                                panelInfo.mergedPanels[0],
+                                0
+                              )}
+                              rightComponent={componentToUse(
+                                panelInfo.mergedPanels[1],
+                                1
+                              )}
+                            />
+                          </Fragment>
+                        ) : (
+                          componentToUse(panelInfo, indexPanel)
+                        )}
+                      </Fragment>
+                    ) : null}
+                  </Grid>
+                </Grid>
               );
             })}
           </Grid>
diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/BarChartWidget.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/BarChartWidget.tsx
@@ -156,7 +156,7 @@ const BarChartWidget = ({
       )}
       {!loading && (
         <div className={classes.contentContainer}>
-          <ResponsiveContainer>
+          <ResponsiveContainer width="99%">
             <BarChart
               data={data as object[]}
               layout={"vertical"}
diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/LinearGraphWidget.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/LinearGraphWidget.tsx
@@ -181,7 +181,7 @@ const LinearGraphWidget = ({
         {!loading && (
           <React.Fragment>
             <div className={classes.chartCont}>
-              <ResponsiveContainer>
+              <ResponsiveContainer width="99%">
                 <AreaChart
                   data={data}
                   margin={{
diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/PieChartWidget.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/PieChartWidget.tsx
@@ -143,7 +143,7 @@ const PieChartWidget = ({
             {middleLabel && splitSizeMetric(middleLabel)}
           </span>
           <div className={classes.chartContainer}>
-            <ResponsiveContainer>
+            <ResponsiveContainer width="99%">
               <PieChart margin={{ top: 5, bottom: 5 }}>
                 {dataOuter && (
                   <Pie
diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleRepWidget.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleRepWidget.tsx
@@ -119,7 +119,7 @@ const SingleRepWidget = ({
       )}
       {!loading && (
         <div className={classes.contentContainer}>
-          <ResponsiveContainer>
+          <ResponsiveContainer width="99%">
             <AreaChart data={data}>
               <defs>
                 <linearGradient id={gradientID} x1="0" y1="0" x2="0" y2="1">
