vmui: transfer Top Queries time interval #5097 (#5145)

https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5097
(cherry picked from commit 6dc5306c9b)

app/vmui/packages/vmui/src/pages/TopQueries/TopQueryTable/TopQueryTable.tsx

@@ -7,7 +7,6 @@ import { ArrowDropDownIcon, CopyIcon, PlayCircleOutlineIcon } from "../../../com
 import Button from "../../../components/Main/Button/Button";
 import Tooltip from "../../../components/Main/Tooltip/Tooltip";
 import { Link } from "react-router-dom";
-import router from "../../../router";
 import useCopyToClipboard from "../../../hooks/useCopyToClipboard";
 
 const TopQueryTable:FC<TopQueryPanelProps> = ({ rows, columns, defaultOrderBy }) => {
@@ -75,20 +74,23 @@ const TopQueryTable:FC<TopQueryPanelProps> = ({ rows, columns, defaultOrderBy })
             ))}
             <td className="vm-table-cell vm-table-cell_no-padding">
               <div className="vm-top-queries-panels__table-actions">
-                <Tooltip title={"Execute query"}>
+                {row.url && (
-                  <Link
+                  <Tooltip title={"Execute query"}>
-                    to={`${router.home}?g0.expr=${encodeURIComponent(row.query)}`}
+                    <Link
-                    target="_blank"
+                      to={row.url}
-                    rel="noreferrer"
+                      target="_blank"
-                  >
+                      rel="noreferrer"
-                    <Button
+                      aria-disabled
-                      variant="text"
+                    >
-                      size="small"
+                      <Button
-                      startIcon={<PlayCircleOutlineIcon/>}
+                        variant="text"
-                      ariaLabel="execute query"
+                        size="small"
-                    />
+                        startIcon={<PlayCircleOutlineIcon/>}
-                  </Link>
+                        ariaLabel="execute query"
-                </Tooltip>
+                      />
+                    </Link>
+                  </Tooltip>
+                )}
                 <Tooltip title={"Copy query"}>
                   <Button
                     variant="text"

app/vmui/packages/vmui/src/pages/TopQueries/hooks/useFetchTopQueries.ts

@@ -1,16 +1,47 @@
-import { ErrorTypes } from "../../../types";
+import { ErrorTypes, TopQuery } from "../../../types";
 import { useAppState } from "../../../state/common/StateContext";
 import { useMemo, useState } from "preact/compat";
 import { getTopQueries } from "../../../api/top-queries";
 import { TopQueriesData } from "../../../types";
-import { getDurationFromMilliseconds } from "../../../utils/time";
+import { getDurationFromMilliseconds, relativeTimeOptions } from "../../../utils/time";
 import useSearchParamsFromObject from "../../../hooks/useSearchParamsFromObject";
+import router from "../../../router";
 
 interface useFetchTopQueriesProps {
   topN: number;
   maxLifetime: string;
 }
 
+const getQueryUrl = (row: TopQuery, timeRange: string) => {
+  const { query, timeRangeSeconds } = row;
+  const params = [`g0.expr=${encodeURIComponent(query)}`];
+  const relativeTimeId = relativeTimeOptions.find(t => t.duration === timeRange)?.id;
+  if (relativeTimeId) {
+    params.push(`g0.relative_time=${relativeTimeId}`);
+  }
+  if (timeRangeSeconds) {
+    params.push(`g0.range_input=${timeRange}`);
+  }
+  return `${router.home}?${params.join("&")}`;
+};
+
+const processResponse = (data: TopQueriesData) => {
+  const list = ["topByAvgDuration", "topByCount", "topBySumDuration"] as (keyof TopQueriesData)[];
+
+  list.forEach(key => {
+    const target = data[key] as TopQuery[];
+    if (!Array.isArray(target)) return;
+
+    target.forEach(t => {
+      const timeRange = getDurationFromMilliseconds(t.timeRangeSeconds*1000);
+      t.url = getQueryUrl(t, timeRange);
+      t.timeRange = timeRange;
+    });
+  });
+
+  return data;
+};
+
 export const useFetchTopQueries = ({ topN, maxLifetime }: useFetchTopQueriesProps) => {
   const { serverUrl } = useAppState();
   const { setSearchParamsFromKeys } = useSearchParamsFromObject();
@@ -27,17 +58,7 @@ export const useFetchTopQueries = ({ topN, maxLifetime }: useFetchTopQueriesProp
     try {
       const response = await fetch(fetchUrl);
       const resp = await response.json();
-      if (response.ok) {
+      setData(response.ok ? processResponse(resp) : null);
-        const list = ["topByAvgDuration", "topByCount", "topBySumDuration"] as (keyof TopQueriesData)[];
-        list.forEach(key => {
-          const target = resp[key];
-          if (Array.isArray(target)) {
-            target.forEach(t => t.timeRange = getDurationFromMilliseconds(t.timeRangeSeconds*1000));
-          }
-        });
-      }
-
-      setData(response.ok ? resp : null);
       setError(String(resp.error || ""));
     } catch (e) {
       if (e instanceof Error && e.name !== "AbortError") {

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

@@ -88,6 +88,7 @@ export interface TopQuery {
   timeRangeSeconds: number
   sumDurationSeconds: number
   timeRange: string
+  url?: string
 }
 
 export interface TopQueryStats {
@@ -95,12 +96,13 @@ export interface TopQueryStats {
   "search.queryStats.minQueryDuration": string
 }
 
-export interface TopQueriesData extends TopQueryStats{
+export interface TopQueriesData extends TopQueryStats {
   maxLifetime: string
   topN: string
   topByAvgDuration: TopQuery[]
   topByCount: TopQuery[]
   topBySumDuration: TopQuery[]
+  error?: string
 }
 
 export interface SeriesLimits {

docs/CHANGELOG.md

@@ -37,6 +37,7 @@ The sandbox cluster installation is running under the constant load generated by
 * FEATURE: [vmbackup](https://docs.victoriametrics.com/vmbackup.html): add `-filestream.disableFadvise` command-line flag, which can be used for disabling `fadvise` syscall during backup upload to the remote storage. By default `vmbackup` uses `fadvise` syscall in order to prevent from eviction of recently accessed data from the [OS page cache](https://en.wikipedia.org/wiki/Page_cache) when backing up large files. Sometimes the `fadvise` syscall may take significant amounts of CPU when the backup is performed with large value of `-concurrency` command-line flag on systems with big number of CPU cores. In this case it is better to manually disable `fadvise` syscall by passing `-filestream.disableFadvise` command-line flag to `vmbackup`. See [this pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/5120) for details.
 * FEATURE: [Alerting rules for VictoriaMetrics](https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/deployment/docker#alerts): account for `vmauth` component for alerts `ServiceDown` and `TooManyRestarts`.
 * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add support for functions, labels, values in autocomplete. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3006).
+* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): retain specified time interval when executing a query from `Top Queries`. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5097).
 
 * BUGFIX: [vmalert](https://docs.victoriametrics.com/vmalert.html): strip sensitive information such as auth headers or passwords from datasource, remote-read, remote-write or notifier URLs in log messages or UI. This behavior is by default and is controlled via `-datasource.showURL`, `-remoteRead.showURL`, `remoteWrite.showURL` or `-notifier.showURL` cmd-line flags. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/5044).