From e0434f7b4e92b7202a11f0e902ad047057590f5b Mon Sep 17 00:00:00 2001 From: Yury Molodov Date: Tue, 25 Apr 2023 12:14:57 +0200 Subject: [PATCH] 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 --- .../ExploreMetricItemGraph.tsx | 40 +++++++++---------- app/vmui/packages/vmui/src/utils/time.ts | 2 +- docs/CHANGELOG.md | 1 + 3 files changed, 20 insertions(+), 23 deletions(-) diff --git a/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricGraph/ExploreMetricItemGraph.tsx b/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricGraph/ExploreMetricItemGraph.tsx index 083318409f..0b6279f78e 100644 --- a/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricGraph/ExploreMetricItemGraph.tsx +++ b/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 = ({ 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 = ({ 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 (
)}
diff --git a/app/vmui/packages/vmui/src/utils/time.ts b/app/vmui/packages/vmui/src/utils/time.ts index 29fb53e283..3f4c1c59da 100644 --- a/app/vmui/packages/vmui/src/utils/time.ts +++ b/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 => { diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index e56e3cd8c1..7791de56a5 100644 --- a/docs/CHANGELOG.md +++ b/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.