vmui: add tip to Explore Metrics page (#4615)

* feat: add tip to Explore Metrics page (#4248)

* fix: update description page

app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricsHeader/ExploreMetricsHeader.tsx

@@ -1,9 +1,15 @@
-import React, { FC, useMemo } from "preact/compat";
+import React, { FC, useEffect, useMemo } from "preact/compat";
 import Select from "../../Main/Select/Select";
 import "./style.scss";
 import { GRAPH_SIZES } from "../../../constants/graph";
 import classNames from "classnames";
 import useDeviceDetect from "../../../hooks/useDeviceDetect";
+import useBoolean from "../../../hooks/useBoolean";
+import { getFromStorage, saveToStorage } from "../../../utils/storage";
+import Alert from "../../Main/Alert/Alert";
+import Button from "../../Main/Button/Button";
+import { CloseIcon, TipIcon } from "../../Main/Icons";
+import Tooltip from "../../Main/Tooltip/Tooltip";
 
 interface ExploreMetricsHeaderProps {
   jobs: string[]
@@ -38,7 +44,18 @@ const ExploreMetricsHeader: FC<ExploreMetricsHeaderProps> = ({
   const noMetricsText = useMemo(() => job ? "" : "No metric names. Please select job", [job]);
   const { isMobile } = useDeviceDetect();
 
+  const {
+    value: showTips,
+    toggle: toggleShowTips,
+    setFalse: setHideTips,
+  } = useBoolean(getFromStorage("EXPLORE_METRICS_TIPS") !== "false");
+
+  useEffect(() => {
+    saveToStorage("EXPLORE_METRICS_TIPS", `${showTips}`);
+  }, [showTips]);
+
   return (
+    <>
       <div
         className={classNames({
           "vm-explore-metrics-header": true,
@@ -77,6 +94,14 @@ const ExploreMetricsHeader: FC<ExploreMetricsHeaderProps> = ({
             list={sizeOptions}
             onChange={onChangeSize}
           />
+          <Tooltip title={`${showTips ? "Hide" : "Show"} tip`}>
+            <Button
+              variant="text"
+              color={showTips ? "warning" : "gray"}
+              startIcon={<TipIcon/>}
+              onClick={toggleShowTips}
+            />
+          </Tooltip>
         </div>
         <div className="vm-explore-metrics-header-metrics">
           <Select
@@ -91,6 +116,29 @@ const ExploreMetricsHeader: FC<ExploreMetricsHeaderProps> = ({
           />
         </div>
       </div>
+
+      {showTips && (
+        <Alert variant={"warning"}>
+          <div className="vm-explore-metrics-header-description">
+            <p>
+              Please note: this page is solely designed for exploring Prometheus metrics.
+              Prometheus metrics always contain <code>job</code> and <code>instance</code> labels
+              (see <a
+                className="vm-link vm-link_colored"
+                href="https://prometheus.io/docs/concepts/jobs_instances/"
+              >these docs</a>), and this page relies on them as filters. <br/>
+              Please use this page for Prometheus metrics only, in accordance with their naming conventions.
+            </p>
+            <Button
+              variant="text"
+              size="small"
+              startIcon={<CloseIcon/>}
+              onClick={setHideTips}
+            />
+          </div>
+        </Alert>
+      )}
+    </>
   );
 };
 

app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricsHeader/style.scss

@@ -26,6 +26,26 @@
   &__size {
     flex-grow: 1;
     min-width: 150px;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: $padding-global;
+  }
+
+  &-description {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: flex-start;
+    gap: $padding-small;
+
+    button {
+      color: inherit;
+      min-height: 29px;
+    }
+
+    code {
+      margin: 0 3px;
+    }
   }
 
   &-metrics {

app/vmui/packages/vmui/src/router/index.ts

@@ -42,7 +42,7 @@ export const routerOptions: {[key: string]: RouterOptions} = {
     ...routerOptionsDefault
   },
   [router.metrics]: {
-    title: "Explore metrics",
+    title: "Explore Prometheus metrics",
     header: {
       tenant: true,
       stepControl: true,

app/vmui/packages/vmui/src/utils/storage.ts

@@ -9,6 +9,7 @@ export type StorageKeys = "BASIC_AUTH_DATA"
     | "TIMEZONE"
     | "THEME"
     | "LOGS_LIMIT"
+    | "EXPLORE_METRICS_TIPS"
 
 export const saveToStorage = (key: StorageKeys, value: string | boolean | Record<string, unknown>): void => {
   if (value) {