app/vmui: fix Alerting Rules page query link and time display

**"Run query" link params** Added correct params to "Run query" link on Alerting Rules page: - `g0.step_input` - set to `group.interval` (in seconds) - `g0.end_time` - set to `rule.lastEvaluation` / `alert.activeAt` - `g0.relative_time=none` - to fix the time range **Time display timezone** Changed `t.format(...)` to `t.tz().format(...)` to display time in the user-selected timezone. Related issue: https://github.com/VictoriaMetrics/VictoriaMetrics/issues/10366 https://github.com/VictoriaMetrics/VictoriaMetrics/issues/10827
2026-05-17 08:36:55 +03:00 · 2026-04-17 10:32:59 +02:00
parent 153c5bb803
commit fd45463b5f
9 changed files with 117 additions and 50 deletions
--- a/app/vmui/packages/vmui/src/components/ExploreAlerts/BaseAlert/index.tsx
+++ b/app/vmui/packages/vmui/src/components/ExploreAlerts/BaseAlert/index.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from "preact/compat";
 import "./style.scss";
-import { Alert as APIAlert } from "../../../types";
-import { createSearchParams } from "react-router-dom";
+import { Alert as APIAlert, Group } from "../../../types";
+import { Link } from "react-router-dom";
 import Button from "../../Main/Button/Button";
 import Badges, { BadgeColor } from "../Badges";
 import { formatEventTime } from "../helpers";
@@ -9,12 +9,14 @@ import {
  SearchIcon,
 } from "../../Main/Icons";
 import CodeExample from "../../Main/CodeExample/CodeExample";
+import router from "../../../router";

 interface BaseAlertProps {
  item: APIAlert;
+  group?: Group;
 }

-const BaseAlert = ({ item }: BaseAlertProps) => {
+const BaseAlert = ({ item, group }: BaseAlertProps) => {
  const query = item?.expression;
  const alertLabels = item?.labels || {};
  const alertLabelsItems = useMemo(() => {
@@ -24,13 +26,19 @@ const BaseAlert = ({ item }: BaseAlertProps) => {
    }]));
  }, [alertLabels]);

-  const openQueryLink = () => {
-    const params = {
+  const queryLink = useMemo(() => {
+    if (!group?.interval) return;
+
+    const params = new URLSearchParams({
      "g0.expr": query,
-      "g0.end_time": ""
-    };
-    window.open(`#/?${createSearchParams(params).toString()}`, "_blank", "noopener noreferrer");
-  };
+      "g0.end_time": item.activeAt,
+      // Interval is the Group's evaluation interval in float seconds as present in the file. See: /app/vmalert/rule/web.go
+      "g0.step_input": `${group.interval}s`,
+      "g0.relative_time": "none",
+    });
+
+    return `${router.home}?${params.toString()}`;
+  }, [query, item.activeAt, group?.interval]);

  return (
    <div className="vm-explore-alerts-alert-item">
@@ -45,15 +53,22 @@ const BaseAlert = ({ item }: BaseAlertProps) => {
              style={{ "text-align": "end" }}
              colSpan={2}
            >
-              <Button
-                size="small"
-                variant="outlined"
-                color="gray"
-                startIcon={<SearchIcon />}
-                onClick={openQueryLink}
-              >
-                <span className="vm-button-text">Run query</span>
-              </Button>
+              {queryLink && (
+                <Link
+                  to={queryLink}
+                  target={"_blank"}
+                  rel="noreferrer"
+                >
+                  <Button
+                    size="small"
+                    variant="outlined"
+                    color="gray"
+                    startIcon={<SearchIcon />}
+                  >
+                    <span className="vm-button-text">Run query</span>
+                  </Button>
+                </Link>
+              )}
            </td>
          </tr>
          <tr>
--- a/app/vmui/packages/vmui/src/components/ExploreAlerts/BaseRule/index.tsx
+++ b/app/vmui/packages/vmui/src/components/ExploreAlerts/BaseRule/index.tsx
@@ -1,19 +1,21 @@
 import { useMemo } from "preact/compat";
 import "./style.scss";
-import { Rule as APIRule } from "../../../types";
-import { useNavigate, createSearchParams } from "react-router-dom";
+import { Group, Rule as APIRule } from "../../../types";
+import { useNavigate, Link } from "react-router-dom";
 import { SearchIcon, DetailsIcon } from "../../Main/Icons";
 import Button from "../../Main/Button/Button";
 import Alert from "../../Main/Alert/Alert";
 import Badges, { BadgeColor } from "../Badges";
 import { formatDuration, formatEventTime } from "../helpers";
 import CodeExample from "../../Main/CodeExample/CodeExample";
+import router from "../../../router";

 interface BaseRuleProps {
  item: APIRule;
+  group?: Group;
 }

-const BaseRule = ({ item }: BaseRuleProps) => {
+const BaseRule = ({ item, group }: BaseRuleProps) => {
  const query = item?.query;
  const navigate = useNavigate();
  const openAlertLink = (id: string) => {
@@ -33,13 +35,19 @@ const BaseRule = ({ item }: BaseRuleProps) => {
    }]));
  }, [ruleLabels]);

-  const openQueryLink = () => {
-    const params = {
+  const queryLink = useMemo(() => {
+    if (!group?.interval) return;
+
+    const params = new URLSearchParams({
      "g0.expr": query,
-      "g0.end_time": ""
-    };
-    window.open(`#/?${createSearchParams(params).toString()}`, "_blank", "noopener noreferrer");
-  };
+      "g0.end_time": item.lastEvaluation,
+      // Interval is the Group's evaluation interval in float seconds as present in the file. See: /app/vmalert/rule/web.go
+      "g0.step_input": `${group.interval}s`,
+      "g0.relative_time": "none",
+    });
+
+    return `${router.home}?${params.toString()}`;
+  }, [query, item.lastEvaluation, group?.interval]);

  return (
    <div className="vm-explore-alerts-rule-item">
@@ -54,15 +62,22 @@ const BaseRule = ({ item }: BaseRuleProps) => {
              style={{ "text-align": "end" }}
              colSpan={2}
            >
-              <Button
-                size="small"
-                variant="outlined"
-                color="gray"
-                startIcon={<SearchIcon />}
-                onClick={openQueryLink}
-              >
-                <span className="vm-button-text">Run query</span>
-              </Button>
+              {queryLink && (
+                <Link
+                  to={queryLink}
+                  target={"_blank"}
+                  rel="noreferrer"
+                >
+                  <Button
+                    size="small"
+                    variant="outlined"
+                    color="gray"
+                    startIcon={<SearchIcon />}
+                  >
+                    <span className="vm-button-text">Run query</span>
+                  </Button>
+                </Link>
+              )}
            </td>
          </tr>
          <tr>
--- a/app/vmui/packages/vmui/src/components/ExploreAlerts/Rule/index.tsx
+++ b/app/vmui/packages/vmui/src/components/ExploreAlerts/Rule/index.tsx
@@ -2,15 +2,16 @@ import { FC } from "preact/compat";
 import ItemHeader from "../ItemHeader";
 import Accordion from "../../Main/Accordion/Accordion";
 import "./style.scss";
-import { Rule as APIRule } from "../../../types";
+import { Group, Rule as APIRule } from "../../../types";
 import BaseRule from "../BaseRule";

 interface RuleProps {
  states: Record<string, number>;
  rule: APIRule;
+  group: Group;
 }

-const Rule: FC<RuleProps> = ({ states, rule }) => {
+const Rule: FC<RuleProps> = ({ states, rule, group }) => {
  const state = Object.keys(states).length > 0 ? Object.keys(states)[0] : "ok";
  return (
    <div className={`vm-explore-alerts-rule vm-badge-item ${state.replace(" ", "-")}`}>
@@ -25,7 +26,10 @@ const Rule: FC<RuleProps> = ({ states, rule }) => {
          name={rule.name}
        />}
      >
-        <BaseRule item={rule} />
+        <BaseRule
+          item={rule}
+          group={group}
+        />
      </Accordion>
    </div>
  );
--- a/app/vmui/packages/vmui/src/components/ExploreAlerts/RulesHeader/index.tsx
+++ b/app/vmui/packages/vmui/src/components/ExploreAlerts/RulesHeader/index.tsx
@@ -50,7 +50,6 @@ const RulesHeader = ({
            label="Rule type"
            placeholder="Please select rule type"
            onChange={onChangeRuleType}
-            autofocus={!!types.length && !isMobile}
            includeAll
            searchable
          />
--- a/app/vmui/packages/vmui/src/components/ExploreAlerts/helpers.ts
+++ b/app/vmui/packages/vmui/src/components/ExploreAlerts/helpers.ts
@@ -17,7 +17,7 @@ export const formatDuration = (raw: number) => {

 export const formatEventTime = (raw: string) => {
  const t = dayjs(raw);
-  return t.year() <= 1 ? "Never" : t.format("DD MMM YYYY HH:mm:ss");
+  return t.year() <= 1 ? "Never" : t.tz().format("DD MMM YYYY HH:mm:ss");
 };

 export const getStates = (rule: Rule) => {
--- a/app/vmui/packages/vmui/src/pages/ExploreAlerts/ExploreAlert.tsx
+++ b/app/vmui/packages/vmui/src/pages/ExploreAlerts/ExploreAlert.tsx
@@ -2,10 +2,11 @@ import Spinner from "../../components/Main/Spinner/Spinner";
 import Alert from "../../components/Main/Alert/Alert";
 import { useFetchItem } from "./hooks/useFetchItem";
 import "./style.scss";
-import { Alert as APIAlert } from "../../types";
+import { Alert as APIAlert, Group as APIGroup } from "../../types";
 import ItemHeader from "../../components/ExploreAlerts/ItemHeader";
 import BaseAlert from "../../components/ExploreAlerts/BaseAlert";
 import Modal from "../../components/Main/Modal/Modal";
+import { useFetchGroup } from "./hooks/useFetchGroup";

 interface ExploreAlertProps {
  groupId: string;
@@ -17,10 +18,19 @@ interface ExploreAlertProps {
 const ExploreAlert = ({ groupId, id, mode, onClose }: ExploreAlertProps) => {
  const {
    item,
-    isLoading,
-    error,
+    isLoading: isLoadingItem,
+    error: errorItem,
  } = useFetchItem<APIAlert>({ groupId, id, mode });

+  const {
+    group,
+    isLoading: isLoadingGroup,
+    error: errorGroup,
+  } = useFetchGroup<APIGroup>({ id: groupId });
+
+  const error =  errorItem || errorGroup;
+  const isLoading = isLoadingItem || isLoadingGroup;
+
  if (isLoading) return (
    <Spinner />
  );
@@ -51,7 +61,12 @@ const ExploreAlert = ({ groupId, id, mode, onClose }: ExploreAlertProps) => {
      onClose={onClose}
    >
      <div className="vm-explore-alerts">
-        {item && (<BaseAlert item={item} />) || (
+        {item ? (
+          <BaseAlert
+            item={item}
+            group={group}
+          />
+        ) : (
          <Alert variant="info">{noItemFound}</Alert>
        )}
      </div>
--- a/app/vmui/packages/vmui/src/pages/ExploreAlerts/ExploreRule.tsx
+++ b/app/vmui/packages/vmui/src/pages/ExploreAlerts/ExploreRule.tsx
@@ -2,11 +2,12 @@ import Spinner from "../../components/Main/Spinner/Spinner";
 import Alert from "../../components/Main/Alert/Alert";
 import { useFetchItem } from "./hooks/useFetchItem";
 import "./style.scss";
-import { Rule as APIRule } from "../../types";
+import { Group as APIGroup, Rule as APIRule } from "../../types";
 import ItemHeader from "../../components/ExploreAlerts/ItemHeader";
 import BaseRule from "../../components/ExploreAlerts/BaseRule";
 import Modal from "../../components/Main/Modal/Modal";
 import { getStates } from "../../components/ExploreAlerts/helpers";
+import { useFetchGroup } from "./hooks/useFetchGroup";

 interface ExploreRuleProps {
  groupId: string;
@@ -18,10 +19,19 @@ interface ExploreRuleProps {
 const ExploreRule = ({ groupId, id, mode, onClose }: ExploreRuleProps) => {
  const {
    item,
-    isLoading,
-    error,
+    isLoading: isLoadingItem,
+    error: errorItem,
  } = useFetchItem<APIRule>({ groupId, id, mode });

+  const {
+    group,
+    isLoading: isLoadingGroup,
+    error: errorGroup,
+  } = useFetchGroup<APIGroup>({ id: groupId });
+
+  const error =  errorItem || errorGroup;
+  const isLoading = isLoadingItem || isLoadingGroup;
+
  if (isLoading) return (
    <Spinner />
  );
@@ -49,7 +59,12 @@ const ExploreRule = ({ groupId, id, mode, onClose }: ExploreRuleProps) => {
      onClose={onClose}
    >
      <div className="vm-explore-alerts">
-        {item && (<BaseRule item={item} />) || (
+        {item ? (
+          <BaseRule
+            item={item}
+            group={group}
+          />
+        ) : (
          <Alert variant="info">{noItemFound}</Alert>
        )}
      </div>
--- a/app/vmui/packages/vmui/src/pages/ExploreAlerts/ExploreRules.tsx
+++ b/app/vmui/packages/vmui/src/pages/ExploreAlerts/ExploreRules.tsx
@@ -132,7 +132,7 @@ const ExploreRules: FC = () => {
    newParams.set("page_num", "1");
    setSearchParams(newParams);
    const changes = getChanges(title, states);
-    setStates(changes.length == allStates.length ? [] : changes);
+    setStates(changes.length === allStates.length ? [] : changes);
  }, [states, searchParams]);

  const handleChangeRuleType = useCallback((title: string) => {
@@ -186,6 +186,7 @@ const ExploreRules: FC = () => {
                        <Rule
                          key={`rule-${rule.id}`}
                          rule={rule}
+                          group={group}
                          states={getStates(rule)}
                        />
                      ))}