alert and rule modals

Author: AndrewChubatiuk

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

@@ -30,13 +30,13 @@ const App: FC = () => {
                 <Route
                   path={router.rules}
                   element={<ExploreRules
-                    ruleTypeFilter=""
+                    typeFilter=""
                   />}
                 />
                 <Route
                   path={router.alerts}
                   element={<ExploreRules
-                    ruleTypeFilter="alert"
+                    typeFilter="alert"
                   />}
                 />
                 <Route

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

@@ -1,11 +1,20 @@
 export const getGroupsUrl = (server: string, ruleType: string): string => {
-  let groupUrl = `${server}/api/v1/rules`;
+  let groupUrl = `${server}/vmalert/api/v1/rules?datasource_type=vlogs`;
   if (ruleType) {
-    groupUrl = `${groupUrl}?type=${ruleType}`;
+    groupUrl = `${groupUrl}&type=${ruleType}`;
   }
   return groupUrl;
 };
 
+export const getItemUrl = (
+  server: string,
+  groupId: string,
+  id: string,
+  mode: string,
+): string => {
+  return `${server}/vmalert/api/v1/${mode}?group_id=${groupId}&${mode}_id=${id}`;
+};
+
 export const getNotifiersUrl = (server: string): string => {
-  return `${server}/api/v1/notifiers`;
+  return `${server}/vmalert/api/v1/notifiers`;
 };

app/vmui/packages/vmui/src/components/ExploreAlerts/BaseAlert/index.tsx

@@ -0,0 +1,84 @@
+import "./style.scss";
+import { Alert as APIAlert } from "../../../types";
+import { Link } from "react-router-dom";
+
+interface BaseAlertProps {
+  item: APIAlert;
+}
+
+const BaseAlert = ({ item }: BaseAlertProps) => {
+  const query = item?.expression;
+
+  const source = item.source;
+
+  return (
+    <div className="vm-explore-alerts-rule-item">
+      <table>
+        <tbody>
+          <tr>
+            <td className="vm-col-small">Name</td>
+            <td>{item.name}</td>
+          </tr>
+          <tr>
+            <td className="vm-col-small">Group</td>
+            <td>
+              <Link to={`/groups#group-${item.group_id}`}>{item.group_id}</Link>
+            </td>
+          </tr>
+          <tr>
+            <td className="vm-col-small">Query</td>
+            <td>
+              {(source && (
+                <Link
+                  to={source}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <pre>
+                    <code className="language-promql">{query}</code>
+                  </pre>
+                </Link>
+              )) || (
+                <pre>
+                  <code className="language-promql">{query}</code>
+                </pre>
+              )}
+            </td>
+          </tr>
+          {item.labels && (
+            <tr>
+              <td className="vm-col-small">Labels</td>
+              <td>
+                <div className="vm-badge-container">
+                  {Object.entries(item.labels).map(([name, value]) => (
+                    <span
+                      key={name}
+                      className="vm-badge"
+                    >{`${name}: ${value}`}</span>
+                  ))}
+                </div>
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+      {item.annotations && (
+        <>
+          <span className="title">Annotations</span>
+          <table>
+            <tbody>
+              {Object.entries(item.annotations || {}).map(([name, value]) => (
+                <tr key={name}>
+                  <td className="vm-col-small">{name}</td>
+                  <td>{value}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default BaseAlert;

app/vmui/packages/vmui/src/components/ExploreAlerts/BaseAlert/style.scss

@@ -0,0 +1,106 @@
+@use "src/styles/variables" as *;
+
+.vm-modal {
+  .vm-explore-alerts-rule-item {
+    table {
+      width: auto;
+    }
+  }
+}
+
+.vm-explore-alerts-rule-item {
+  row-gap: $padding-global;
+  margin-right: $padding-global;
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    font-weight: bold;
+    text-align: center;
+  }
+
+  a:hover > pre {
+    background-color: $color-hover-darker;
+    cursor: pointer;
+  }
+
+  a:hover {
+    background-color: $color-hover-darker;
+    cursor: pointer;
+  }
+
+  pre {
+    background-color: $color-hover-black;
+    padding: 0 $padding-global;
+    border-radius: $border-radius-small;
+    word-break: break-word;
+    white-space: pre-wrap;
+    .keyword,
+    .function,
+    .attr-name,
+    .range-duration {
+      color: $color-keyword;
+    }
+  }
+
+  .vm-col-small {
+    width: 15%;
+    white-space: nowrap;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  table {
+    width: 100%;
+    table-layout: fixed;
+    tr[id] {
+      cursor: pointer;
+      &:hover {
+        background-color: $color-hover-darker;
+      }
+    }
+    td, th {
+      line-height: 30px;
+      padding: $padding-small;
+    }
+    th[colspan],
+    td[colspan] {
+      font-weight: bold;
+      text-align: center;
+      padding: 20px 0;
+    }
+    th {
+      font-weight: bold;
+      text-align: center;
+      padding: 0 $padding-small;
+    }
+  }
+
+  .vm-badge-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $padding-small;
+  }
+
+  .vm-badge {
+    padding: 0 $padding-small;
+    border-radius: $border-radius-small;
+    background-color: $color-hover-black;
+    max-width: 300px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: fit-content;
+
+    &:is(.firing) {
+      background: $color-error;
+      color: $color-white;
+    }
+
+    &:is(.pending) {
+      background: $color-warning;
+      color: $color-white;
+    }
+  }
+}