app/vmui: vmalert ui for logs

Author: AndrewChubatiuk

app/vmui/packages/vmui/package-lock.json

@@ -21,8 +21,10 @@
     "lodash.debounce": "^4.0.8",
     "lodash.orderby": "^4.6.0",
     "lodash.throttle": "^4.1.1",
+    "html-react-parser": "^5.2.5",
     "marked": "^16.0.0",
     "preact": "^10.26.9",
+    "prismjs": "^1.30.0",
     "qs": "^6.14.0",
     "react-input-mask": "^2.0.4",
     "react-router-dom": "^7.6.3",
@@ -41,6 +43,7 @@
     "@types/lodash.throttle": "^4.1.9",
     "@types/node": "^24.0.8",
     "@types/qs": "^6.14.0",
+    "@types/prismjs": "^1.26.5",
     "@types/react": "^19.1.8",
     "@types/react-input-mask": "^3.0.6",
     "@types/react-router-dom": "^5.3.3",

app/vmui/packages/vmui/package.json

@@ -4,7 +4,10 @@ import AppContextProvider from "./contexts/AppContextProvider";
 import ThemeProvider from "./components/Main/ThemeProvider/ThemeProvider";
 import ExploreLogs from "./pages/ExploreLogs/ExploreLogs";
 import LogsLayout from "./layouts/LogsLayout/LogsLayout";
+import ExploreRules from "./pages/ExploreAlerts/ExploreRules";
+import ExploreNotifiers from "./pages/ExploreAlerts/ExploreNotifiers";
 import "./constants/markedPlugins";
+import router from "./router";
 
 const App: FC = () => {
   const [loadedTheme, setLoadedTheme] = useState(false);
@@ -24,6 +27,22 @@ const App: FC = () => {
                   path={"/"}
                   element={<ExploreLogs/>}
                 />
+                <Route
+                  path={router.rules}
+                  element={<ExploreRules
+                    ruleTypeFilter=""
+                  />}
+                />
+                <Route
+                  path={router.alerts}
+                  element={<ExploreRules
+                    ruleTypeFilter="alert"
+                  />}
+                />
+                <Route
+                  path={router.notifiers}
+                  element={<ExploreNotifiers/>}
+                />
               </Route>
             </Routes>
           )}

app/vmui/packages/vmui/src/App.tsx

@@ -0,0 +1,11 @@
+export const getGroupsUrl = (server: string, ruleType: string): string => {
+  let groupUrl = `${server}/api/v1/rules`;
+  if (ruleType) {
+    groupUrl = `${groupUrl}?type=${ruleType}`;
+  }
+  return groupUrl;
+};
+
+export const getNotifiersUrl = (server: string): string => {
+  return `${server}/api/v1/notifiers`;
+};

app/vmui/packages/vmui/src/api/explore-alerts.ts

@@ -0,0 +1,68 @@
+import { FC } from "preact/compat";
+import "./style.scss";
+import useDeviceDetect from "../../../hooks/useDeviceDetect";
+import { Group as APIGroup } from "../../../types";
+import useCopyToClipboard from "../../../hooks/useCopyToClipboard";
+import { CopyIcon } from "../../../components/Main/Icons";
+import Button from "../../../components/Main/Button/Button";
+
+interface GroupHeaderControlsProps {
+  group: APIGroup,
+}
+
+const GroupHeaderHeader: FC<GroupHeaderControlsProps> = ({
+  group,
+}) => {
+  const { isMobile } = useDeviceDetect();
+  const copyToClipboard = useCopyToClipboard();
+
+  const handlerCopy = async () => {
+    const link = `${window.location.origin}${window.location.pathname}#/groups#group-${group.id}`;
+    await copyToClipboard(link, "Link to group has been copied");
+  };
+
+  if (isMobile) {
+    return (
+      <div className="vm-explore-alerts-group-header vm-explore-alerts-group-header_mobile">
+        <div className="vm-explore-alerts-group-header__name">{group.name}</div>
+        <div className="circle-container">
+          {Object.entries(group.states || {}).map(([name, value]) => (
+            <div
+              key={name}
+              className={`circle ${name.toLowerCase().replace(" ", "-")}`}
+            >{value}</div>
+          ))}
+          <Button
+            variant="outlined"
+            startIcon={<CopyIcon/>}
+            onClick={handlerCopy}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="vm-explore-alerts-group-header">
+      <div className="vm-explore-alerts-group-header__desc">
+        <div className="vm-explore-alerts-group-header__name">{group.name}</div>
+        <div className="vm-explore-alerts-group-header__file">{group.file}</div>
+      </div>
+      <div className="circle-container">
+        {Object.entries(group.states || {}).map(([name, value]) => (
+          <div
+            key={name}
+            className={`circle ${name.toLowerCase().replace(" ", "-")}`}
+          >{value}</div>
+        ))}
+        <Button
+          variant="outlined"
+          startIcon={<CopyIcon/>}
+          onClick={handlerCopy}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default GroupHeaderHeader;