feat(ui): add facets to alerts table (#2396)

Co-authored-by: Kirill Chernakov <[email protected]>
Co-authored-by: Tal <[email protected]>

keep-ui/app/alerts/alert-presets.tsx

@@ -254,7 +254,7 @@ export default function AlertPresets({
           </div>
         </div>
       </Modal>
-      <div className="flex w-full items-start xl:mt-6">
+      <div className="flex w-full items-start relative z-10">
         <AlertsRulesBuilder
           table={table}
           defaultQuery=""

keep-ui/app/alerts/alert-severity-border.tsx

@@ -0,0 +1,34 @@
+import clsx from "clsx";
+import { Severity } from "./models";
+
+export function AlertSeverityBorder({
+  severity,
+}: {
+  severity: Severity | undefined;
+}) {
+  const getSeverityBgClassName = (severity?: Severity) => {
+    switch (severity) {
+      case "critical":
+        return "bg-red-500";
+      case "high":
+      case "error":
+        return "bg-orange-500";
+      case "warning":
+        return "bg-yellow-500";
+      case "info":
+        return "bg-blue-500";
+      default:
+        return "bg-emerald-500";
+    }
+  };
+
+  return (
+    <div
+      className={clsx(
+        "absolute w-1 h-full top-0 left-0",
+        getSeverityBgClassName(severity)
+      )}
+      aria-label={severity}
+    />
+  );
+}

keep-ui/app/alerts/alert-severity.tsx

@@ -54,6 +54,7 @@ export default function AlertSeverity({ severity }: Props) {
       icon={icon}
       tooltip={capitalize(severityText)}
       size="sm"
+      className="!p-0"
     />
   );
 }