vmui: display heatmap in the Explore Metrics (#4124)

* feat: display heatmap in the explore metrics (#4111)

* fix: correct calc step for heatmap

* fix: remove spaces in the result of getDurationFromMilliseconds

app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricGraph/ExploreMetricItemGraph.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo, useState } from "preact/compat";
+import React, { FC, useEffect, useMemo, useState } from "preact/compat";
 import { useFetchQuery } from "../../../hooks/useFetchQuery";
 import { useGraphDispatch, useGraphState } from "../../../state/graph/GraphStateContext";
 import GraphView from "../../Views/GraphView/GraphView";
@@ -10,6 +10,7 @@ import Button from "../../Main/Button/Button";
 import "./style.scss";
 import classNames from "classnames";
 import useDeviceDetect from "../../../hooks/useDeviceDetect";
+import { getDurationFromMilliseconds, getSecondsFromDuration, getStepFromDuration } from "../../../utils/time";
 
 interface ExploreMetricItemGraphProps {
   name: string,
@@ -26,15 +27,20 @@ const ExploreMetricItem: FC<ExploreMetricItemGraphProps> = ({
   instance,
   rateEnabled,
   isBucket,
-  height
+  height,
 }) => {
   const { isMobile } = useDeviceDetect();
   const { customStep, yaxis } = useGraphState();
   const { period } = useTimeState();
-
   const graphDispatch = useGraphDispatch();
   const timeDispatch = useTimeDispatch();
 
+  const defaultStep = getStepFromDuration(period.end - period.start);
+  const stepSeconds = getSecondsFromDuration(customStep);
+  const heatmapStep = getDurationFromMilliseconds(stepSeconds * 10 * 1000);
+  const [isHeatmap, setIsHeatmap] = useState(false);
+  const step = isHeatmap && customStep === defaultStep ? heatmapStep : customStep;
+
   const [showAllSeries, setShowAllSeries] = useState(false);
 
   const query = useMemo(() => {
@@ -49,22 +55,7 @@ const ExploreMetricItem: FC<ExploreMetricItemGraphProps> = ({
 
     const base = `{${params.join(",")}}`;
     if (isBucket) {
-      if (instance) {
-        return `
-label_map(
-  histogram_quantiles("__name__", 0.5, 0.95, 0.99, sum(rate(${base})) by (vmrange, le)),
-  "__name__",
-  "0.5", "q50",
-  "0.95", "q95",
-  "0.99", "q99",
-)`;
-      }
-      return `
-with (q = histogram_quantile(0.95, sum(rate(${base})) by (instance, vmrange, le))) (
-  alias(min(q), "q95min"),
-  alias(max(q), "q95max"),
-  alias(avg(q), "q95avg"),
-)`;
+      return `sum(rate(${base})) by (vmrange, le)`;
     }
     const queryBase = rateEnabled ? `rollup_rate(${base})` : `rollup(${base})`;
     return `
@@ -75,10 +66,10 @@ with (q = ${queryBase}) (
 )`;
   }, [name, job, instance, rateEnabled, isBucket]);
 
-  const { isLoading, graphData, error, warning } = useFetchQuery({
+  const { isLoading, graphData, error, warning, isHistogram } = useFetchQuery({
     predefinedQuery: [query],
     visible: true,
-    customStep,
+    customStep: step,
     showAllSeries
   });
 
@@ -94,6 +85,10 @@ with (q = ${queryBase}) (
     setShowAllSeries(true);
   };
 
+  useEffect(() => {
+    setIsHeatmap(isHistogram);
+  }, [isHistogram]);
+
   return (
     <div
       className={classNames({
@@ -119,13 +114,14 @@ with (q = ${queryBase}) (
         <GraphView
           data={graphData}
           period={period}
-          customStep={customStep}
+          customStep={step}
           query={[query]}
           yaxis={yaxis}
           setYaxisLimits={setYaxisLimits}
           setPeriod={setPeriod}
           showLegend={false}
           height={height}
+          isHistogram={isHistogram}
         />
       )}
     </div>

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

@@ -125,7 +125,7 @@ export const getDurationFromMilliseconds = (ms: number): string => {
   const days = Math.floor(ms / (1000 * 60 * 60 * 24));
   const durs: UnitTypeShort[] = ["d", "h", "m", "s", "ms"];
   const values = [days, hours, minutes, seconds, milliseconds].map((t, i) => t ? `${t}${durs[i]}` : "");
-  return values.filter(t => t).join(" ");
+  return values.filter(t => t).join("");
 };
 
 export const getDurationFromPeriod = (p: TimePeriod): string => {

docs/CHANGELOG.md

@@ -26,6 +26,7 @@ The following tip changes can be tested by building VictoriaMetrics components f
 * FEATURE: [vmctl](https://docs.victoriametrics.com/vmctl.html): add support for the different time formats for `--vm-native-filter-time-start` and `--vm-native-filter-time-end` flags if the native binary protocol is used for migration. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4091).
 * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): integrate WITH template playground. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3811).
 * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add a comparison of data from the previous day with data from the current day to the `Cardinality Explorer`. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3967).
+* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): display histogram metrics as a heatmap in the `explore metrics` tab. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4111).
 * FEATURE: [vmauth](https://docs.victoriametrics.com/vmauth.html): add ability to filter incoming requests by IP. See [these docs](https://docs.victoriametrics.com/vmauth.html#ip-filters) and [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3491).
 
 * BUGFIX: reduce the probability of sudden increase in the number of small parts on systems with small number of CPU cores.