From 0e778a74661f09adceff536ea48c9a2db8140bf9 Mon Sep 17 00:00:00 2001
From: jinapurapu <65002498+jinapurapu@users.noreply.github.com>
Date: Wed, 10 Nov 2021 16:56:29 -0800
Subject: [PATCH] Created Help Box on Basic Dashboard guiding user to
Prometheus documentation (#1214)
* Created help Box guiding user to Prometheus documentation
* Created PrometheusIcon for help card
Co-authored-by: Alex <33497058+bexsoft@users.noreply.github.com>
Co-authored-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
portal-ui/src/icons/PrometheusIcon.tsx | 30 ++++++++++++++++
portal-ui/src/icons/index.ts | 1 +
.../BasicDashboard/BasicDashboard.tsx | 36 +++++++++++++++++++
.../screens/Console/Dashboard/Dashboard.tsx | 2 ++
4 files changed, 69 insertions(+)
create mode 100644 portal-ui/src/icons/PrometheusIcon.tsx
diff --git a/portal-ui/src/icons/PrometheusIcon.tsx b/portal-ui/src/icons/PrometheusIcon.tsx
new file mode 100644
index 000000000..bffbdd0ac
--- /dev/null
+++ b/portal-ui/src/icons/PrometheusIcon.tsx
@@ -0,0 +1,30 @@
+// 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 .
+
+import * as React from "react";
+import { SvgIcon, SvgIconProps } from "@mui/material";
+
+const PrometheusIcon = (props: SvgIconProps) => {
+ return (
+
+
+
+ );
+};
+
+export default PrometheusIcon;
diff --git a/portal-ui/src/icons/index.ts b/portal-ui/src/icons/index.ts
index 3a8be98a8..70c6622ec 100644
--- a/portal-ui/src/icons/index.ts
+++ b/portal-ui/src/icons/index.ts
@@ -103,3 +103,4 @@ export { default as LambdaIcon } from "./LambdaIcon";
export { default as TiersIcon } from "./TiersIcon";
export { default as OpenListIcon } from "./OpenListIcon";
export { default as ToolsIcon } from "./ToolsIcon";
+export { default as PrometheusIcon } from "./PrometheusIcon";
diff --git a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx
index 8437cc10f..eb7aad154 100644
--- a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx
@@ -28,6 +28,8 @@ import CommonCard from "../CommonCard";
import TabSelector from "../../Common/TabSelector/TabSelector";
import GeneralUsePaginator from "../../Common/GeneralUsePaginator/GeneralUsePaginator";
import { widgetContainerCommon } from "../../Common/FormComponents/common/styleLibrary";
+import { PrometheusIcon } from "../../../../icons";
+import HelpBox from "../../../../common/HelpBox";
const styles = (theme: Theme) =>
createStyles({
@@ -239,6 +241,40 @@ const BasicDashboard = ({ classes, usage }: IDashboardProps) => {
+
+
+ }
+ title={"Monitoring"}
+ help={
+
+ The MinIO Dashboard is displaying basic metrics only due to missing the{" "}
+ necessary settings
+
+ {" "}for displaying extended metrics.
+
+
+ See Collect MinIO Metrics Using Prometheus
+
+ {" "}for a complete tutorial on scraping and visualizing MinIO metrics with Prometheus.
+
+ }
+ />
+
+
);
};
diff --git a/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx b/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx
index 11a4b5a0b..916a8a2b7 100644
--- a/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx
@@ -31,6 +31,7 @@ import { Usage } from "./types";
import { setErrorSnackMessage } from "../../../actions";
import { ErrorResponseHandler } from "../../../common/types";
+
interface IDashboardSimple {
classes: any;
displayErrorMessage: typeof setErrorSnackMessage;
@@ -88,6 +89,7 @@ const Dashboard = ({ classes, displayErrorMessage }: IDashboardSimple) => {
)}
)}
+
);
};