Updated styles in Prometheus dashboard

Signed-off-by: Benjamin Perez <[email protected]>

Author: Benjamin Perez

portal-ui/package.json

@@ -22,7 +22,6 @@
     "@types/react-router": "^5.1.3",
     "@types/react-router-dom": "^5.1.2",
     "@types/react-virtualized": "^9.21.10",
-    "@types/recharts": "^1.8.19",
     "@types/superagent": "^4.1.12",
     "@types/webpack-env": "^1.14.1",
     "@types/websocket": "^1.0.0",
@@ -49,7 +48,7 @@
     "react-scripts": "4.0.3",
     "react-virtualized": "^9.22.2",
     "react-window-infinite-loader": "^1.0.5",
-    "recharts": "^2.0.3",
+    "recharts": "^2.1.1",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "superagent": "^6.1.0",

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

@@ -34,6 +34,7 @@ interface IDateTimePicker {
   tooltip?: string;
   id: string;
   disabled?: boolean;
+  noInputIcon?: boolean;
 }
 
 const styles = (theme: Theme) =>
@@ -93,18 +94,27 @@ const DateTimePickerWrapper = ({
   required,
   id,
   disabled = false,
+  noInputIcon = false,
 }: IDateTimePicker) => {
+  let adornment = {};
+
+  if (!noInputIcon) {
+    adornment = {
+      startAdornment: (
+        <InputAdornment position="start">
+          <ScheduleIcon />
+        </InputAdornment>
+      ),
+    };
+  }
+
   const inputItem = (
     <MuiPickersUtilsProvider utils={MomentUtils}>
       <DateTimePicker
         value={value}
         onChange={onChange}
         InputProps={{
-          startAdornment: (
-            <InputAdornment position="start">
-              <ScheduleIcon />
-            </InputAdornment>
-          ),
+          ...adornment,
           className: forSearchBlock ? classes.dateSelectorOverride : "",
         }}
         label=""

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

@@ -148,9 +148,17 @@ export const containerForHeader = (bottomSpacing: any) => ({
 });
 
 export const actionsTray = {
+  filterTitle: {
+    color: "#848484",
+    fontSize: 13,
+    alignSelf: "center" as const,
+    whiteSpace: "nowrap" as const,
+    "&:not(:first-of-type)": {
+      marginLeft: 10,
+    },
+  },
   label: {
-    color: "#393939",
-    fontWeight: 600,
+    color: "#07193E",
     fontSize: 13,
     alignSelf: "center" as const,
     whiteSpace: "nowrap" as const,
@@ -160,6 +168,7 @@ export const actionsTray = {
   },
   timeContainers: {
     height: 40,
+    maxWidth: 1185,
   },
   actionsTray: {
     display: "flex" as const,
@@ -399,29 +408,29 @@ export const logsCommon = {
 
 export const widgetCommon = {
   singleValueContainer: {
-    position: "relative" as const,
-    flexGrow: 1,
+    height: 200,
+    minWidth: 280,
+    maxWidth: 1185,
+    border: "#eef1f4 2px solid",
+    borderRadius: 10,
     width: "100%",
-    height: "100%",
-    border: "#EAEAEA 1px solid",
-    borderRadius: 5,
-    backgroundColor: "#fff",
+    padding: 16,
   },
   titleContainer: {
-    color: "#393939",
-    fontWeight: 600,
-    height: 15,
-    textAlign: "center" as const,
-    fontSize: 10,
+    color: "#404143",
+    fontSize: 14,
+    textTransform: "uppercase" as const,
+    fontWeight: 800,
+    borderBottom: "#eef1f4 1px solid",
+    paddingBottom: 14,
+    marginBottom: 5,
   },
   contentContainer: {
-    flexGrow: 2,
     justifyContent: "center" as const,
     alignItems: "center" as const,
     display: "flex" as const,
-    position: "absolute" as const,
     width: "100%",
-    height: "calc(100% - 15px)",
+    height: 140,
   },
   contentContainerWithLabel: {
     height: "calc(100% - 25px)",
@@ -445,7 +454,6 @@ export const widgetCommon = {
     width: 8,
     height: 8,
     minWidth: 8,
-    borderRadius: "100%",
     marginRight: 5,
   },
   legendLabel: {

portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx

@@ -133,23 +133,19 @@ const BasicDashboard = ({ classes, usage }: IDashboardProps) => {
         </Grid>
         <Grid item xs={12} className={classes.generalStatusCards}>
           <CommonCard
-            avatar={<BucketsIcon />}
             title={"All Buckets"}
             metricValue={usage ? prettyNumber(usage.buckets) : 0}
           />
           <CommonCard
-            avatar={<ReportedUsageIcon />}
             title={"Usage"}
             metricValue={usageToRepresent.total}
             metricUnit={usageToRepresent.unit}
           />
           <CommonCard
-            avatar={<TotalObjectsIcon />}
             title={"Total Objects"}
             metricValue={usage ? prettyNumber(usage.objects) : 0}
           />
           <CommonCard
-            avatar={<TotalObjectsIcon />}
             title={"Servers"}
             metricValue={usage ? prettyNumber(serverArray.length) : 0}
             subMessage={{ message: "Total" }}

portal-ui/src/screens/Console/Dashboard/CommonCard.tsx

@@ -23,14 +23,14 @@ import {
   makeStyles,
 } from "@material-ui/core/styles";
 import React, { Fragment } from "react";
+import { widgetCommon } from "../Common/FormComponents/common/styleLibrary";
 
 export interface ISubInterface {
   message: string;
   fontWeight?: "normal" | "bold";
 }
 
 interface ICommonCard {
-  avatar: any;
   title: string;
   metricValue: any;
   metricUnit?: string;
@@ -42,12 +42,10 @@ interface ICommonCard {
 
 const styles = (theme: Theme) =>
   createStyles({
+    ...widgetCommon,
     cardRoot: {
-      border: "#eef1f4 2px solid",
-      borderRadius: 10,
+      ...widgetCommon.singleValueContainer,
       maxWidth: 280,
-      width: "100%",
-      margin: 10,
     },
     cardsContainer: {
       maxHeight: 440,
@@ -94,23 +92,16 @@ const styles = (theme: Theme) =>
   });
 
 const cardSubStyles = makeStyles({
-  root: { backgroundColor: "#fff" },
+  root: { backgroundColor: "#fff", padding: 0 },
   title: {
-    color: "#404144",
-    fontSize: 14,
-    textTransform: "uppercase",
-    fontWeight: "bold",
-    borderBottom: "#eef1f4 1px solid",
-    paddingBottom: 14,
-    marginBottom: 5,
+    ...widgetCommon.titleContainer
   },
   content: {
     maxWidth: "100%",
   },
 });
 
 const CommonCard = ({
-  avatar,
   title,
   metricValue,
   metricUnit,

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

@@ -0,0 +1,42 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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, { Fragment } from "react";
+import CommonCard from "../CommonCard";
+
+interface IMergedWidgets {
+  title: string;
+  leftComponent: any;
+  rightComponent: any;
+}
+
+const MergedWidgets = ({
+  title,
+  leftComponent,
+  rightComponent,
+}: IMergedWidgets) => {
+  return (
+    <Fragment>
+      <CommonCard
+        title={title}
+        metricValue={leftComponent}
+        rightComponent={rightComponent}
+      />
+    </Fragment>
+  );
+};
+
+export default MergedWidgets;