VictoriaMetrics · AndrewChubatiuk · Sep 17, 2025 · Sep 10, 2025
diff --git a/app/vmui/Dockerfile-build b/app/vmui/Dockerfile-build
@@ -1,4 +1,4 @@
-FROM node:20-alpine3.19
+FROM node:22-alpine3.22
 
 # Sets a custom location for the npm cache, preventing access errors in system directories
 ENV NPM_CONFIG_CACHE=/build/.npm

diff --git a/app/vmui/packages/vmui/src/App.tsx b/app/vmui/packages/vmui/src/App.tsx
@@ -6,6 +6,8 @@ import ExploreLogs from "./pages/ExploreLogs/ExploreLogs";
 import LogsLayout from "./layouts/LogsLayout/LogsLayout";
 import StreamContext from "./pages/StreamContext/StreamContext";
 import router from "./router";
+import ExploreRules from "./pages/ExploreAlerts/ExploreRules";
+import ExploreNotifiers from "./pages/ExploreAlerts/ExploreNotifiers";
 import "./constants/markedPlugins";
 
 const App: FC = () => {
@@ -30,6 +32,14 @@ const App: FC = () => {
                   path={router.streamContext}
                   element={<StreamContext/>}
                 />
+                <Route
+                  path={router.rules}
+                  element={<ExploreRules/>}
+                />
+                <Route
+                  path={router.notifiers}
+                  element={<ExploreNotifiers/>}
+                />
               </Route>
             </Routes>
           )}

diff --git a/app/vmui/packages/vmui/src/api/explore-alerts.ts b/app/vmui/packages/vmui/src/api/explore-alerts.ts
@@ -0,0 +1,23 @@
+export const getGroupsUrl = (server: string): string => {
+  return `${server}/select/vmalert/api/v1/rules?datasource_type=vlogs`;
+};
+
+export const getItemUrl = (
+  server: string,
+  groupId: string,
+  id: string,
+  mode: string,
+): string => {
+  return `${server}/select/vmalert/api/v1/${mode}?group_id=${groupId}&${mode}_id=${id}`;
+};
+
+export const getGroupUrl = (
+  server: string,
+  id: string,
+): string => {
+  return `${server}/select/vmalert/api/v1/group?group_id=${id}`;
+};
+
+export const getNotifiersUrl = (server: string): string => {
+  return `${server}/select/vmalert/api/v1/notifiers`;
+};
diff --git a/...ui/src/components/Configurators/TimeRangeSettings/ExecutionControls/ExecutionControls.tsx b/...ui/src/components/Configurators/TimeRangeSettings/ExecutionControls/ExecutionControls.tsx
@@ -30,7 +30,13 @@ const delayOptions: AutoRefreshOption[] = [
   { seconds: 7200, title: "2h" }
 ];
 
-export const ExecutionControls: FC = () => {
+interface ExecutionControlsProps {
+  tooltip: string;
+  useAutorefresh?: boolean;
+  closeModal: () => void;
+}
+
+export const ExecutionControls: FC<ExecutionControlsProps> = ({ tooltip, useAutorefresh, closeModal }) => {
   const { isMobile } = useDeviceDetect();
 
   const dispatch = useTimeDispatch();
@@ -56,6 +62,9 @@ export const ExecutionControls: FC = () => {
 
   const handleUpdate = () => {
     dispatch({ type: "RUN_QUERY" });
+    if (!useAutorefresh && isMobile) {
+      closeModal();
+    }
   };
 
   useEffect(() => {
@@ -84,84 +93,109 @@ export const ExecutionControls: FC = () => {
           "vm-execution-controls-buttons": true,
           "vm-execution-controls-buttons_mobile": isMobile,
           "vm-header-button": !appModeEnable,
+          "vm-autorefresh": useAutorefresh,
         })}
       >
-        {!isMobile && (
-          <Tooltip title="Refresh dashboard">
+        {useAutorefresh ? (
+          isMobile ? (
+            <div
+              className="vm-mobile-option"
+              onClick={toggleOpenOptions}
+            >
+              <span className="vm-mobile-option__icon"><RestartIcon/></span>
+              <div className="vm-mobile-option-text">
+                <span className="vm-mobile-option-text__label">Auto-refresh</span>
+                <span className="vm-mobile-option-text__value">{selectedDelay.title}</span>
+              </div>
+              <span className="vm-mobile-option__arrow"><ArrowDownIcon/></span>
+            </div>
+          ) : (
+            <>
+              <Tooltip title={tooltip}>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={handleUpdate}
+                  startIcon={<RefreshIcon/>}
+                  ariaLabel={tooltip}
+                />
+              </Tooltip>
+              <Tooltip title="Auto-refresh control">
+                <div ref={optionsButtonRef}>
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    fullWidth
+                    endIcon={(
+                      <div
+                        className={classNames({
+                          "vm-execution-controls-buttons__arrow": true,
+                          "vm-execution-controls-buttons__arrow_open": openOptions,
+                        })}
+                      >
+                        <ArrowDownIcon/>
+                      </div>
+                    )}
+                    onClick={toggleOpenOptions}
+                  >
+                    {selectedDelay.title}
+                  </Button>
+                </div>
+              </Tooltip>
+            </>
+          )
+        ) : (
+          isMobile ? (
+            <div
+              className="vm-mobile-option"
+              onClick={handleUpdate}
+            >
+              <span className="vm-mobile-option__icon"><RestartIcon/></span>
+              <div className="vm-mobile-option-text">
+                <span className="vm-mobile-option-text__label">Refresh</span>
+              </div>
+            </div>
+          ) : (
             <Button
               variant="contained"
               color="primary"
               onClick={handleUpdate}
               startIcon={<RefreshIcon/>}
-              ariaLabel="refresh dashboard"
+              ariaLabel={tooltip}
             />
-          </Tooltip>
-        )}
-        {isMobile ? (
-          <div
-            className="vm-mobile-option"
-            onClick={toggleOpenOptions}
-          >
-            <span className="vm-mobile-option__icon"><RestartIcon/></span>
-            <div className="vm-mobile-option-text">
-              <span className="vm-mobile-option-text__label">Auto-refresh</span>
-              <span className="vm-mobile-option-text__value">{selectedDelay.title}</span>
-            </div>
-            <span className="vm-mobile-option__arrow"><ArrowDownIcon/></span>
-          </div>
-        ) : (
-          <Tooltip title="Auto-refresh control">
-            <div ref={optionsButtonRef}>
-              <Button
-                variant="contained"
-                color="primary"
-                fullWidth
-                endIcon={(
-                  <div
-                    className={classNames({
-                      "vm-execution-controls-buttons__arrow": true,
-                      "vm-execution-controls-buttons__arrow_open": openOptions,
-                    })}
-                  >
-                    <ArrowDownIcon/>
-                  </div>
-                )}
-                onClick={toggleOpenOptions}
-              >
-                {selectedDelay.title}
-              </Button>
-            </div>
-          </Tooltip>
+          )
         )}
       </div>
     </div>
-    <Popper
-      open={openOptions}
-      placement="bottom-right"
-      onClose={handleCloseOptions}
-      buttonRef={optionsButtonRef}
-      title={isMobile ? "Auto-refresh duration" : undefined}
-    >
-      <div
-        className={classNames({
-          "vm-execution-controls-list": true,
-          "vm-execution-controls-list_mobile": isMobile,
-        })}
+    {useAutorefresh && (
+      <Popper
+        open={openOptions}
+        placement="bottom-right"
+        onClose={handleCloseOptions}
+        buttonRef={optionsButtonRef}
+        title={isMobile ? "Auto-refresh duration" : undefined}
       >
-        {delayOptions.map(d => (
-          <div
-            className={classNames({
-              "vm-list-item": true,
-              "vm-list-item_mobile": isMobile,
-              "vm-list-item_active": d.seconds === selectedDelay.seconds
-            })}
-            key={d.seconds}
-            onClick={createHandlerChange(d)}
-          >
-            {d.title}
-          </div>
-        ))}
-      </div>
-    </Popper>
+        <div
+          className={classNames({
+            "vm-execution-controls-list": true,
+            "vm-execution-controls-list_mobile": isMobile,
+          })}
+        >
+          {delayOptions.map(d => (
+            <div
+              className={classNames({
+                "vm-list-item": true,
+                "vm-list-item_mobile": isMobile,
+                "vm-list-item_active": d.seconds === selectedDelay.seconds
+              })}
+              key={d.seconds}
+              onClick={createHandlerChange(d)}
+            >
+              {d.title}
+            </div>
+          ))}
+        </div>
+      </Popper>
+    )}
   </>;
 };
diff --git a/...packages/vmui/src/components/Configurators/TimeRangeSettings/ExecutionControls/style.scss b/...packages/vmui/src/components/Configurators/TimeRangeSettings/ExecutionControls/style.scss
@@ -7,7 +7,9 @@
     display: flex;
     justify-content: space-between;
     border-radius: calc($button-radius + 1px);
-    min-width: 107px;
+    :is(.vm-autorefresh) {
+      min-width: 107px;
+    }
 
     &_mobile {
       flex-direction: column;

diff --git a/app/vmui/packages/vmui/src/components/ExploreAlerts/Badges/index.tsx b/app/vmui/packages/vmui/src/components/ExploreAlerts/Badges/index.tsx
@@ -0,0 +1,34 @@
+import "./style.scss";
+import { ReactNode } from "react";
+
+export type BadgeColor = "firing" | "inactive" | "pending" | "no-match" | "unhealthy" | "ok" | "passive";
+
+interface BadgeItem {
+  value?: number | string;
+  color: BadgeColor;  
+}
+
+interface BadgesProps {
+  items: Record<string, BadgeItem>;
+  align?: "center" | "start" | "end";
+  children?: ReactNode;
+}
+
+const Badges = ({ items, children, align = "start" }: BadgesProps) => {
+  return (
+    <div
+      className="vm-badges"
+      style={{ "justify-content": align }}
+    >
+      {Object.entries(items).map(([name, props]) => (
+        <span
+          key={name}
+          className={`vm-badge ${props.color}`}
+        >{props.value ? `${name}: ${props.value}` : name}</span>
+      ))}
+      {children}
+    </div>
+  );
+};
+
+export default Badges;
diff --git a/app/vmui/packages/vmui/src/components/ExploreAlerts/Badges/style.scss b/app/vmui/packages/vmui/src/components/ExploreAlerts/Badges/style.scss
@@ -0,0 +1,69 @@
+@use "src/styles/variables" as *;
+
+$badge-colors: (
+  "firing": $color-error,
+  "inactive": $color-success,
+  "pending": $color-warning,
+  "no-match": $color-notice,
+  "unhealthy": $color-broken,
+  "ok": $color-info,
+  "passive": $color-passive,
+  "all": $color-passive,
+);
+
+.vm-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $padding-small;
+  &.align-center {
+    justify-content: center;
+  }
+  .vm-badge {
+    padding: 0 $padding-tiny;
+    width: fit-content;
+    @each $class, $color in $badge-colors {
+      &.#{$class} {
+        border: 1px solid $color;
+        color: $color;
+      }
+    }
+  }
+}
+
+.vm-badge-base {
+  font-weight: 400;
+  border-radius: $border-radius-small;
+}
+
+.vm-badge-menu-item {
+  @extend .vm-badge-base;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 22px;
+  @each $class, $color in $badge-colors {
+    &.#{$class} {
+      border-right: $border-radius-small solid $color;
+    }
+  }
+}
+
+.vm-badge-item {
+  @extend .vm-badge-base;
+  @each $class, $color in $badge-colors {
+    &.#{$class} {
+      border-left: $border-radius-small solid $color;
+    }
+  }
+}
+
+.vm-badge {
+  @extend .vm-badge-base;
+  background-color: transparent;
+  padding: 0 $padding-tiny;
+  line-height: 22px;
+  max-width: 300px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}