Add Server Metrics Info Tab (#2340)

Author: dvaldivia

models/admin_info_response.go

@@ -264,7 +264,6 @@ const DateRangeSelector = ({
               alignItems: "flex-end",
               display: "flex",
               justifyContent: "flex-end",
-              marginRight: "35px",
             }}
           >
             <Button

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

@@ -14,7 +14,7 @@
 // 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 React from "react";
 import { Box } from "@mui/material";
 import {
   ArrowRightIcon,
@@ -67,7 +67,7 @@ interface IDashboardProps {
 
 const getServersList = (usage: Usage | null) => {
   if (usage !== null) {
-    return usage.servers.sort(function (a, b) {
+    return [...usage.servers].sort(function (a, b) {
       const nameA = a.endpoint.toLowerCase();
       const nameB = b.endpoint.toLowerCase();
       if (nameA < nameB) {
@@ -114,84 +114,17 @@ const BasicDashboard = ({ usage }: IDashboardProps) => {
     serversGroup;
   const drivesGroup = groupBy(allDrivesArray, "state");
   const { offline: offlineDrives = [], ok: onlineDrives = [] } = drivesGroup;
-
   return (
-    <Box
-      sx={{
-        maxWidth: "1536px",
-        margin: "auto",
-      }}
-    >
+    <Box>
       <Box
         sx={{
           display: "grid",
           gridTemplateRows: "1fr",
           gridTemplateColumns: "1fr",
           gap: "27px",
           marginBottom: "40px",
-          marginTop: "40px",
-          marginLeft: "40px",
-          marginRight: "40px",
         }}
       >
-        <Box>
-          {usage?.prometheusNotReady && (
-            <HelpBox
-              iconComponent={<PrometheusErrorIcon />}
-              title={"We can't retrieve advanced metrics at this time"}
-              help={
-                <Fragment>
-                  MinIO Dashboard will display basic metrics as we couldn't
-                  connect to Prometheus successfully.
-                  <br /> <br />
-                  Please try again in a few minutes. If the problem persists,
-                  you can review your configuration and confirm that Prometheus
-                  server is up and running.
-                </Fragment>
-              }
-            />
-          )}
-
-          {!usage?.prometheusNotReady && (
-            <HelpBox
-              iconComponent={<PrometheusErrorIcon />}
-              title={"We can’t retrieve advanced metrics at this time."}
-              help={
-                <Box>
-                  <Box
-                    sx={{
-                      fontSize: "14px",
-                    }}
-                  >
-                    MinIO Dashboard will display basic metrics as we couldn’t
-                    connect to Prometheus successfully. Please try again in a
-                    few minutes. If the problem persists, you can review your
-                    configuration and confirm that Prometheus server is up and
-                    running.
-                  </Box>
-                  <Box
-                    sx={{
-                      paddingTop: "20px",
-                      fontSize: "14px",
-                      "& a": {
-                        color: (theme) => theme.colors.link,
-                      },
-                    }}
-                  >
-                    <a
-                      href="https://min.io/docs/minio/linux/operations/monitoring/collect-minio-metrics-using-prometheus.html"
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      Read more about Prometheus on our Docs site.
-                    </a>
-                  </Box>
-                </Box>
-              }
-            />
-          )}
-        </Box>
-
         <Box
           sx={{
             display: "grid",
@@ -355,6 +288,46 @@ const BasicDashboard = ({ usage }: IDashboardProps) => {
             <ServersList data={serverList} />
           </Box>
         </Box>
+        {usage?.advancedMetricsStatus === "not configured" && (
+          <Box>
+            <HelpBox
+              iconComponent={<PrometheusErrorIcon />}
+              title={"We can’t retrieve advanced metrics at this time."}
+              help={
+                <Box>
+                  <Box
+                    sx={{
+                      fontSize: "14px",
+                    }}
+                  >
+                    MinIO Dashboard will display basic metrics as we couldn’t
+                    connect to Prometheus successfully. Please try again in a
+                    few minutes. If the problem persists, you can review your
+                    configuration and confirm that Prometheus server is up and
+                    running.
+                  </Box>
+                  <Box
+                    sx={{
+                      paddingTop: "20px",
+                      fontSize: "14px",
+                      "& a": {
+                        color: (theme) => theme.colors.link,
+                      },
+                    }}
+                  >
+                    <a
+                      href="https://min.io/docs/minio/linux/operations/monitoring/collect-minio-metrics-using-prometheus.html"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Read more about Prometheus on our Docs site.
+                    </a>
+                  </Box>
+                </Box>
+              }
+            />
+          </Box>
+        )}
       </Box>
     </Box>
   );

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

@@ -70,7 +70,10 @@ const ServersList = ({ data }: { data: ServerInfo[] }) => {
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "space-between",
-                  border: "1px solid #f1f1f1",
+                  borderTop: index === 0 ? "1px solid #f1f1f1" : "",
+                  borderBottom: "1px solid #f1f1f1",
+                  borderLeft: "1px solid #f1f1f1",
+                  borderRight: "1px solid #f1f1f1",
                   padding: "3px 10px 3px 10px",
 
                   "&:hover": {

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

@@ -14,9 +14,7 @@
 // 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, useCallback, useEffect, useState } from "react";
-
-import get from "lodash/get";
+import React, { Fragment, useEffect, useState } from "react";
 import PrDashboard from "./Prometheus/PrDashboard";
 import PageHeader from "../Common/PageHeader/PageHeader";
 import Grid from "@mui/material/Grid";
@@ -25,13 +23,9 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { LinearProgress } from "@mui/material";
-import api from "../../../common/api";
-import { Usage } from "./types";
-
-import { ErrorResponseHandler } from "../../../common/types";
-import BasicDashboard from "./BasicDashboard/BasicDashboard";
-import { setErrorSnackMessage } from "../../../systemSlice";
-import { useAppDispatch } from "../../../store";
+import { AppState, useAppDispatch } from "../../../store";
+import { getUsageAsync } from "./dashboardThunks";
+import { useSelector } from "react-redux";
 
 interface IDashboardSimple {
   classes: any;
@@ -45,28 +39,15 @@ const styles = (theme: Theme) =>
 const Dashboard = ({ classes }: IDashboardSimple) => {
   const dispatch = useAppDispatch();
   const [loading, setLoading] = useState<boolean>(true);
-  const [basicResult, setBasicResult] = useState<Usage | null>(null);
 
-  const fetchUsage = useCallback(() => {
-    api
-      .invoke("GET", `/api/v1/admin/info`)
-      .then((res: Usage) => {
-        setBasicResult(res);
-        setLoading(false);
-      })
-      .catch((err: ErrorResponseHandler) => {
-        dispatch(setErrorSnackMessage(err));
-        setLoading(false);
-      });
-  }, [setBasicResult, setLoading, dispatch]);
+  const usage = useSelector((state: AppState) => state.dashboard.usage);
 
   useEffect(() => {
     if (loading) {
-      fetchUsage();
+      setLoading(false);
+      dispatch(getUsageAsync());
     }
-  }, [loading, fetchUsage]);
-
-  const widgets = get(basicResult, "widgets", null);
+  }, [loading, dispatch]);
 
   return (
     <Fragment>
@@ -78,13 +59,7 @@ const Dashboard = ({ classes }: IDashboardSimple) => {
           </Grid>
         </Grid>
       ) : (
-        <Fragment>
-          {widgets !== null ? (
-            <PrDashboard />
-          ) : (
-            <BasicDashboard usage={basicResult} />
-          )}
-        </Fragment>
+        <PrDashboard usage={usage} />
       )}
     </Fragment>
   );