Added zoom option to line charts & bar charts in prometheus dashboard (#1104)

Author: bexsoft

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

@@ -42,7 +42,6 @@ import { setErrorSnackMessage } from "../../../../../actions";
 import { snackBarMessage } from "../../../../../types";
 import {
   setModalErrorSnackMessage,
-  setModalSnackMessage,
 } from "../../../../../actions";
 
 interface ImodalErrorProps {

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

@@ -431,6 +431,8 @@ export const widgetCommon = {
     borderBottom: "#eef1f4 1px solid",
     paddingBottom: 14,
     marginBottom: 5,
+    display: "flex" as const,
+    justifyContent: "space-between" as const,
   },
   contentContainer: {
     justifyContent: "center" as const,
@@ -470,6 +472,26 @@ export const widgetCommon = {
     overflow: "hidden" as const,
     textOverflow: "ellipsis" as const,
   },
+  zoomChartCont: {
+    position: "relative" as const,
+    height: 340,
+    width: "100%",
+  },
+  zoomChartIcon: {
+    backgroundColor: "transparent",
+    border: 0,
+    padding: 0,
+    cursor: "pointer",
+    "& svg": {
+      color: "#D0D0D0",
+      height: 16,
+    },
+    "&:hover": {
+      "& svg": {
+        color: "#404143",
+      },
+    },
+  },
 };
 
 export const widgetContainerCommon = {

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

@@ -25,27 +25,26 @@ import {
   actionsTray,
   widgetContainerCommon,
 } from "../../Common/FormComponents/common/styleLibrary";
-import { IDashboardPanel, widgetType } from "./types";
+import { IDashboardPanel } from "./types";
 import { getWidgetsWithValue, panelsConfiguration } from "./utils";
 import { TabPanel } from "../../../shared/tabs";
 import { ErrorResponseHandler } from "../../../../common/types";
 import { setErrorSnackMessage } from "../../../../actions";
-import SingleValueWidget from "./Widgets/SingleValueWidget";
-import LinearGraphWidget from "./Widgets/LinearGraphWidget";
-import BarChartWidget from "./Widgets/BarChartWidget";
-import PieChartWidget from "./Widgets/PieChartWidget";
-import SingleRepWidget from "./Widgets/SingleRepWidget";
 import DateTimePickerWrapper from "../../Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper";
 import api from "../../../../common/api";
 import SyncIcon from "../../../../icons/SyncIcon";
 import TabSelector from "../../Common/TabSelector/TabSelector";
-import SimpleWidget from "./Widgets/SimpleWidget";
 import MergedWidgets from "./MergedWidgets";
+import { componentToUse } from "./widgetUtils";
+import ZoomWidget from "./ZoomWidget";
+import { AppState } from "../../../../store";
 
 interface IPrDashboard {
   classes: any;
   displayErrorMessage: typeof setErrorSnackMessage;
   apiPrefix?: string;
+  zoomOpen: boolean;
+  zoomWidget: null | IDashboardPanel;
 }
 
 const styles = (theme: Theme) =>
@@ -82,6 +81,8 @@ const PrDashboard = ({
   classes,
   displayErrorMessage,
   apiPrefix = "admin",
+  zoomOpen,
+  zoomWidget,
 }: IPrDashboard) => {
   const [timeStart, setTimeStart] = useState<any>(null);
   const [timeEnd, setTimeEnd] = useState<any>(null);
@@ -92,88 +93,6 @@ const PrDashboard = ({
 
   const panels = useCallback(
     (tabName: string, filterPanels?: number[][] | null) => {
-      const componentToUse = (value: IDashboardPanel, index: number) => {
-        switch (value.type) {
-          case widgetType.singleValue:
-            return (
-              <SingleValueWidget
-                title={value.title}
-                panelItem={value}
-                timeStart={timeStart}
-                timeEnd={timeEnd}
-                propLoading={loading}
-                apiPrefix={apiPrefix}
-              />
-            );
-          case widgetType.simpleWidget:
-            return (
-              <SimpleWidget
-                title={value.title}
-                panelItem={value}
-                timeStart={timeStart}
-                timeEnd={timeEnd}
-                propLoading={loading}
-                apiPrefix={apiPrefix}
-                iconWidget={value.widgetIcon}
-              />
-            );
-          case widgetType.pieChart:
-            return (
-              <PieChartWidget
-                title={value.title}
-                panelItem={value}
-                timeStart={timeStart}
-                timeEnd={timeEnd}
-                propLoading={loading}
-                apiPrefix={apiPrefix}
-              />
-            );
-          case widgetType.linearGraph:
-          case widgetType.areaGraph:
-            return (
-              <LinearGraphWidget
-                title={value.title}
-                panelItem={value}
-                timeStart={timeStart}
-                timeEnd={timeEnd}
-                propLoading={loading}
-                hideYAxis={value.disableYAxis}
-                xAxisFormatter={value.xAxisFormatter}
-                yAxisFormatter={value.yAxisFormatter}
-                apiPrefix={apiPrefix}
-                areaWidget={value.type === widgetType.areaGraph}
-              />
-            );
-          case widgetType.barChart:
-            return (
-              <BarChartWidget
-                title={value.title}
-                panelItem={value}
-                timeStart={timeStart}
-                timeEnd={timeEnd}
-                propLoading={loading}
-                apiPrefix={apiPrefix}
-              />
-            );
-          case widgetType.singleRep:
-            const fillColor = value.fillColor ? value.fillColor : value.color;
-            return (
-              <SingleRepWidget
-                title={value.title}
-                panelItem={value}
-                timeStart={timeStart}
-                timeEnd={timeEnd}
-                propLoading={loading}
-                color={value.color as string}
-                fillColor={fillColor as string}
-                apiPrefix={apiPrefix}
-              />
-            );
-          default:
-            return null;
-        }
-      };
-
       return filterPanels?.map((panelLine, indexLine) => {
         const totalPanelsContained = panelLine.length;
 
@@ -216,16 +135,28 @@ const PrDashboard = ({
                               title={panelInfo.title}
                               leftComponent={componentToUse(
                                 panelInfo.mergedPanels[0],
-                                0
+                                timeStart,
+                                timeEnd,
+                                loading,
+                                apiPrefix
                               )}
                               rightComponent={componentToUse(
                                 panelInfo.mergedPanels[1],
-                                1
+                                timeStart,
+                                timeEnd,
+                                loading,
+                                apiPrefix
                               )}
                             />
                           </Fragment>
                         ) : (
-                          componentToUse(panelInfo, indexPanel)
+                          componentToUse(
+                            panelInfo,
+                            timeStart,
+                            timeEnd,
+                            loading,
+                            apiPrefix
+                          )
                         )}
                       </Fragment>
                     ) : null}
@@ -313,6 +244,16 @@ const PrDashboard = ({
 
   return (
     <Fragment>
+      {zoomOpen && (
+        <ZoomWidget
+          modalOpen={zoomOpen}
+          timeStart={timeStart}
+          timeEnd={timeEnd}
+          widgetRender={0}
+          value={zoomWidget}
+          apiPrefix={apiPrefix}
+        />
+      )}
       <Grid
         item
         xs={12}
@@ -379,11 +320,13 @@ const PrDashboard = ({
     </Fragment>
   );
 };
-/*
-<
-*/
 
-const connector = connect(null, {
+const mapState = (state: AppState) => ({
+  zoomOpen: state.dashboard.zoom.openZoom,
+  zoomWidget: state.dashboard.zoom.widgetRender,
+});
+
+const connector = connect(mapState, {
   displayErrorMessage: setErrorSnackMessage,
 });
 

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

@@ -28,6 +28,7 @@ import {
 import { MaterialUiPickersDate } from "@material-ui/pickers/typings/date";
 import { CircularProgress } from "@material-ui/core";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import ZoomOutMapIcon from "@material-ui/icons/ZoomOutMap";
 import { IBarChartConfiguration } from "./types";
 import { widgetCommon } from "../../../Common/FormComponents/common/styleLibrary";
 import BarChartTooltip from "./tooltips/BarChartTooltip";
@@ -36,6 +37,7 @@ import { IDashboardPanel } from "../types";
 import { widgetDetailsToPanel } from "../utils";
 import { ErrorResponseHandler } from "../../../../../common/types";
 import api from "../../../../../common/api";
+import { openZoomPage } from "../../actions";
 
 interface IBarChartWidget {
   classes: any;
@@ -46,6 +48,8 @@ interface IBarChartWidget {
   propLoading: boolean;
   displayErrorMessage: any;
   apiPrefix: string;
+  zoomActivated?: boolean;
+  openZoomPage: typeof openZoomPage;
 }
 
 const styles = (theme: Theme) =>
@@ -84,6 +88,8 @@ const BarChartWidget = ({
   propLoading,
   displayErrorMessage,
   apiPrefix,
+  zoomActivated = false,
+  openZoomPage,
 }: IBarChartWidget) => {
   const [loading, setLoading] = useState<boolean>(true);
   const [data, setData] = useState<any>([]);
@@ -147,15 +153,31 @@ const BarChartWidget = ({
   }
 
   return (
-    <div className={classes.singleValueContainer}>
-      <div className={classes.titleContainer}>{title}</div>
+    <div className={zoomActivated ? "" : classes.singleValueContainer}>
+      {!zoomActivated && (
+        <div className={classes.titleContainer}>
+          {title}{" "}
+          <button
+            onClick={() => {
+              openZoomPage(panelItem);
+            }}
+            className={classes.zoomChartIcon}
+          >
+            <ZoomOutMapIcon />
+          </button>
+        </div>
+      )}
       {loading && (
         <div className={classes.loadingAlign}>
           <CircularProgress />
         </div>
       )}
       {!loading && (
-        <div className={classes.contentContainer}>
+        <div
+          className={
+            zoomActivated ? classes.zoomChartCont : classes.contentContainer
+          }
+        >
           <ResponsiveContainer width="99%">
             <BarChart
               data={data as object[]}
@@ -178,7 +200,7 @@ const BarChartWidget = ({
                   dataKey={bar.dataKey}
                   fill={bar.color}
                   background={bar.background}
-                  barSize={12}
+                  barSize={zoomActivated ? 25 : 12}
                 >
                   {barChartConfiguration.length === 1 ? (
                     <Fragment>
@@ -214,6 +236,7 @@ const BarChartWidget = ({
 
 const connector = connect(null, {
   displayErrorMessage: setErrorSnackMessage,
+  openZoomPage: openZoomPage,
 });
 
 export default withStyles(styles)(connector(BarChartWidget));