Make Dashboard reactive in xs and sm to full screen

Signed-off-by: Daniel Valdivia <[email protected]>

Author: dvaldivia

portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx

@@ -21,7 +21,7 @@ import Grid from "@mui/material/Grid";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { GridSize } from "@mui/material";
+import { GridSize, useMediaQuery } from "@mui/material";
 import {
   actionsTray,
   widgetContainerCommon,
@@ -39,6 +39,7 @@ import { componentToUse } from "./widgetUtils";
 import ZoomWidget from "./ZoomWidget";
 import { AppState } from "../../../../store";
 import DateRangeSelector from "../../Common/FormComponents/DateRangeSelector/DateRangeSelector";
+import { useTheme } from "@mui/styles";
 
 interface IPrDashboard {
   classes: any;
@@ -92,13 +93,22 @@ const PrDashboard = ({
     useState<IDashboardPanel[]>(panelsConfiguration);
   const [curTab, setCurTab] = useState<number>(0);
 
+  const theme = useTheme();
+  const biggerThanMd = useMediaQuery(theme.breakpoints.up("md"));
+
   const panels = useCallback(
     (tabName: string, filterPanels?: number[][] | null) => {
       return filterPanels?.map((panelLine, indexLine) => {
         const totalPanelsContained = panelLine.length;
 
         let perc = Math.floor(12 / totalPanelsContained);
 
+        if (!biggerThanMd && totalPanelsContained >= 4) {
+          perc = perc * 2;
+        } else if (!biggerThanMd && totalPanelsContained >= 3) {
+          perc = 12;
+        }
+
         if (perc < 1) {
           perc = 1;
         } else if (perc > 12) {
@@ -122,9 +132,9 @@ const PrDashboard = ({
                   key={`widget-${panelInline}-${indexPanel}`}
                   className={classes.widgetPanelDelimiter}
                   item
-                  xs={7}
-                  sm={8}
-                  md={6}
+                  xs={12}
+                  sm={12}
+                  md={perc as GridSize}
                   lg={perc as GridSize}
                 >
                   <Grid item xs={12}>
@@ -177,6 +187,7 @@ const PrDashboard = ({
       classes.dashboardRow,
       classes.widgetPanelDelimiter,
       panelInformation,
+      biggerThanMd,
     ]
   );
 

portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/BarChartWidget.tsx

@@ -14,18 +14,18 @@
 // 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, { useEffect, useState, Fragment } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import {
   Bar,
   BarChart,
+  Cell,
   ResponsiveContainer,
   Tooltip,
   XAxis,
   YAxis,
-  Cell,
 } from "recharts";
-import { CircularProgress } from "@mui/material";
+import { CircularProgress, useMediaQuery } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -39,6 +39,7 @@ import { widgetDetailsToPanel } from "../utils";
 import { ErrorResponseHandler } from "../../../../../common/types";
 import api from "../../../../../common/api";
 import { openZoomPage } from "../../actions";
+import { useTheme } from "@mui/styles";
 
 interface IBarChartWidget {
   classes: any;
@@ -153,6 +154,9 @@ const BarChartWidget = ({
     });
   }
 
+  const theme = useTheme();
+  const biggerThanMd = useMediaQuery(theme.breakpoints.up("md"));
+
   return (
     <div className={zoomActivated ? "" : classes.singleValueContainer}>
       {!zoomActivated && (
@@ -194,6 +198,7 @@ const BarChartWidget = ({
                 tickLine={false}
                 axisLine={false}
                 width={150}
+                hide={!biggerThanMd}
               />
               {barChartConfiguration.map((bar) => (
                 <Bar

portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/LinearGraphWidget.tsx

@@ -25,7 +25,7 @@ import {
   XAxis,
   YAxis,
 } from "recharts";
-import { CircularProgress } from "@mui/material";
+import { CircularProgress, useMediaQuery } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -39,6 +39,7 @@ import { ErrorResponseHandler } from "../../../../../common/types";
 import api from "../../../../../common/api";
 import LineChartTooltip from "./tooltips/LineChartTooltip";
 import { openZoomPage } from "../../actions";
+import { useTheme } from "@mui/styles";
 
 interface ILinearGraphWidget {
   classes: any;
@@ -183,6 +184,9 @@ const LinearGraphWidget = ({
     return <circle cx={cx} cy={cy} r={3} strokeWidth={0} fill="#07264A" />;
   };
 
+  const theme = useTheme();
+  const biggerThanMd = useMediaQuery(theme.breakpoints.up("md"));
+
   return (
     <div className={zoomActivated ? "" : classes.singleValueContainer}>
       {!zoomActivated && (
@@ -305,24 +309,26 @@ const LinearGraphWidget = ({
                     <br />
                   </Fragment>
                 )}
-                <div className={classes.legendChart}>
-                  {linearConfiguration.map((section, index) => {
-                    return (
-                      <div
-                        className={classes.singleLegendContainer}
-                        key={`legend-${section.keyLabel}-${index.toString()}`}
-                      >
+                {biggerThanMd && (
+                  <div className={classes.legendChart}>
+                    {linearConfiguration.map((section, index) => {
+                      return (
                         <div
-                          className={classes.colorContainer}
-                          style={{ backgroundColor: section.lineColor }}
-                        />
-                        <div className={classes.legendLabel}>
-                          {section.keyLabel}
+                          className={classes.singleLegendContainer}
+                          key={`legend-${section.keyLabel}-${index.toString()}`}
+                        >
+                          <div
+                            className={classes.colorContainer}
+                            style={{ backgroundColor: section.lineColor }}
+                          />
+                          <div className={classes.legendLabel}>
+                            {section.keyLabel}
+                          </div>
                         </div>
-                      </div>
-                    );
-                  })}
-                </div>
+                      );
+                    })}
+                  </div>
+                )}
               </Fragment>
             )}
           </React.Fragment>