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

@@ -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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SvgIcon, SvgIconProps } from "@mui/material";
+
+const PrometheusIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 28 27.999">
+  <path id="prometheus-icon" d="M14,.667a14,14,0,1,0,14,14A14,14,0,0,0,14,.667Zm0,26.2c-2.2,0-3.983-1.469-3.983-3.282h7.967C17.983,25.4,16.2,26.869,14,26.869ZM20.579,22.5H7.42V20.114H20.58V22.5h0Zm-.047-3.614H7.458c-.044-.05-.088-.1-.13-.15a9.536,9.536,0,0,1-1.972-3.36c-.005-.029,1.633.335,2.8.6,0,0,.6.138,1.472.3a5.463,5.463,0,0,1-1.338-3.513c0-2.806,2.153-5.259,1.376-7.241.756.061,1.564,1.6,1.619,3.993a8.574,8.574,0,0,0,1.14-4.381c0-1.287.848-2.783,1.7-2.834-.756,1.246.2,2.315,1.042,4.966.317,1,.277,2.671.522,3.734.081-2.207.461-5.427,1.861-6.539-.618,1.4.091,3.152.576,3.994a7.568,7.568,0,0,1,1.257,4.335,5.416,5.416,0,0,1-1.3,3.5c.924-.173,1.563-.33,1.563-.33l3-.586A8.512,8.512,0,0,1,20.532,18.886Z" transform="translate(0 -0.667)" fill="#07193e"/>
+</svg>
+    </SvgIcon>
+  );
+};
+
+export default PrometheusIcon;

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";

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) => {
           </TabPanel>
         </Grid>
       </Grid>
+      <Grid
+                container
+                justifyContent={"center"}
+                alignContent={"center"}
+                alignItems={"center"}
+              >
+       <Grid item xs={8}>
+          <HelpBox
+           iconComponent={<PrometheusIcon />}
+           title={"Monitoring"}
+           help={
+             <Fragment>
+              The MinIO Dashboard is displaying basic metrics only due to missing the{" "} 
+              <a
+                  href="https://docs.min.io/minio/baremetal/console/minio-console.html#configuration"
+                  target="_blank"
+                  rel="noreferrer"
+              >necessary settings
+              </a>                
+              {" "}for displaying extended metrics.              
+                <br />
+                <br />
+                See <a
+                  href="https://docs.min.io/minio/baremetal/monitoring/metrics-alerts/collect-minio-metrics-using-prometheus.html#minio-metrics-collect-using-prometheus"
+                  target="_blank"
+                  rel="noreferrer"
+                >Collect MinIO Metrics Using Prometheus
+                </a> 
+                {" "}for a complete tutorial on scraping and visualizing MinIO metrics with Prometheus.                              
+              </Fragment>
+               }
+            />
+        </Grid>
+        </Grid>
     </Fragment>
   );
 };

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) => {
           )}
         </Fragment>
       )}
+      
     </Fragment>
   );
 };