feat: consistent severity visuals

keep-ui/app/(keep)/alerts/alert-assignee.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { NameInitialsAvatar } from "react-name-initials-avatar";
-import { useUsers } from "utils/hooks/useUsers";
+import { useUsers } from "@/entities/users/model/useUsers";
 
 interface Props {
   assignee: string | undefined;

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

@@ -1,27 +1,59 @@
 import clsx from "clsx";
 import { Severity } from "./models";
 
+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";
+  }
+};
+
+const getSeverityLabelClassName = (severity?: Severity) => {
+  switch (severity) {
+    case "critical":
+      return "bg-red-100";
+    case "high":
+    case "error":
+      return "bg-orange-100";
+    case "warning":
+      return "bg-yellow-100";
+    case "info":
+      return "bg-blue-100";
+    default:
+      return "bg-emerald-100";
+  }
+};
+
+const getSeverityTextClassName = (severity?: Severity) => {
+  switch (severity) {
+    case "critical":
+      return "text-red-500";
+    case "high":
+    case "error":
+      return "text-orange-500";
+    case "warning":
+      return "text-amber-900";
+    case "info":
+      return "text-blue-500";
+    default:
+      return "text-emerald-500";
+  }
+};
+
 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(
@@ -32,3 +64,29 @@ export function AlertSeverityBorder({
     />
   );
 }
+
+export function AlertSeverityBorderIcon({ severity }: { severity: Severity }) {
+  return (
+    <div
+      className={clsx("w-1 h-4 rounded-lg", getSeverityBgClassName(severity))}
+    />
+  );
+}
+
+export function AlertSeverityLabel({ severity }: { severity: Severity }) {
+  return (
+    <span
+      className={clsx(
+        "flex items-center gap-1 text-sm font-medium py-0.5 px-2 overflow-hidden relative",
+        getSeverityLabelClassName(severity)
+      )}
+    >
+      <div
+        className={clsx("w-1 h-4 rounded-lg", getSeverityBgClassName(severity))}
+      />
+      <span className={clsx("capitalize", getSeverityTextClassName(severity))}>
+        {severity}
+      </span>
+    </span>
+  );
+}

keep-ui/app/(keep)/alerts/alert-sidebar.tsx

@@ -2,12 +2,20 @@ import { Fragment } from "react";
 import Image from "next/image";
 import { Dialog, Transition } from "@headlessui/react";
 import { AlertDto } from "./models";
-import { Button, Title, Card, Badge } from "@tremor/react";
+import { Button, Title, Badge } from "@tremor/react";
 import { IoMdClose } from "react-icons/io";
 import AlertTimeline from "./alert-timeline";
 import { useAlerts } from "utils/hooks/useAlerts";
 import { TopologyMap } from "../topology/ui/map";
 import { TopologySearchProvider } from "@/app/(keep)/topology/TopologySearchContext";
+import {
+  AlertSeverityBorderIcon,
+  AlertSeverityLabel,
+} from "./alert-severity-border";
+import { FieldHeader } from "@/shared/ui/FieldHeader";
+import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
+import { Tooltip } from "@/shared/ui/Tooltip";
+import { Link } from "@/components/ui";
 
 type AlertSidebarProps = {
   isOpen: boolean;
@@ -57,11 +65,14 @@ const AlertSidebar = ({ isOpen, toggle, alert }: AlertSidebarProps) => {
                 {/*Will add soon*/}
                 {/*<AlertMenu alert={alert} presetName="feed" isInSidebar={true} />*/}
                 {/*<Divider></Divider>*/}
-                <Dialog.Title className="text-3xl font-bold" as={Title}>
-                  Alert Details
-                  <Badge className="ml-4" color="orange">
-                    Beta
-                  </Badge>
+                <Dialog.Title
+                  className="text-xl font-bold flex flex-col gap-2 items-start"
+                  as={Title}
+                >
+                  {alert?.severity && (
+                    <AlertSeverityLabel severity={alert.severity} />
+                  )}
+                  {alert?.name ? alert.name : "Alert Details"}
                 </Dialog.Title>
               </div>
               <div>
@@ -72,43 +83,63 @@ const AlertSidebar = ({ isOpen, toggle, alert }: AlertSidebarProps) => {
             </div>
             {alert && (
               <div className="space-y-4">
-                <Card>
-                  <div className="mt-4 space-y-2">
-                    <p>
-                      <strong>Name:</strong> {alert.name}
-                    </p>
-                    <p>
-                      <strong>Service:</strong> {alert.service}
-                    </p>
-                    <p>
-                      <strong>Severity:</strong> {alert.severity}
-                    </p>
-                    <p>
-                      <Image
-                        src={`/icons/${alert.source![0]}-icon.png`}
-                        alt={alert.source![0]}
-                        width={24}
-                        height={24}
-                        className="inline-block w-6 h-6"
-                      />
-                    </p>
-                    <p>
-                      <strong>Description:</strong> {alert.description}
-                    </p>
-                    <p>
-                      <strong>Fingerprint:</strong> {alert.fingerprint}
-                    </p>
-                  </div>
-                </Card>
-                <Card className="flex-grow">
-                  <AlertTimeline
-                    key={auditData ? auditData.length : 1}
-                    alert={alert}
-                    auditData={auditData || []}
-                    isLoading={isLoading}
-                    onRefresh={handleRefresh}
-                  />
-                </Card>
+                <div className="space-y-2">
+                  <p>
+                    <FieldHeader>Name</FieldHeader>
+                    {alert.name}
+                  </p>
+                  <p>
+                    <FieldHeader>Service</FieldHeader>
+                    <Badge size="sm" color="gray">
+                      {alert.service}
+                    </Badge>
+                  </p>
+                  <p>
+                    <FieldHeader>Source</FieldHeader>
+                    <Image
+                      src={`/icons/${alert.source![0]}-icon.png`}
+                      alt={alert.source![0]}
+                      width={24}
+                      height={24}
+                      className="inline-block w-6 h-6"
+                    />
+                  </p>
+                  <p>
+                    <FieldHeader>Description</FieldHeader>
+                    {alert.description}
+                  </p>
+                  <p>
+                    <FieldHeader className="flex items-center gap-1">
+                      Fingerprint
+                      <Tooltip
+                        content={
+                          <>
+                            Fingerprints are unique identifiers associated with
+                            alert instances in Keep. Every provider declares the
+                            fields fingerprints are calculated upon.{" "}
+                            <Link
+                              href="https://docs.keephq.dev/providers/fingerprints#fingerprints"
+                              className="text-white"
+                            >
+                              Docs
+                            </Link>
+                          </>
+                        }
+                        className="z-50"
+                      >
+                        <QuestionMarkCircleIcon className="w-4 h-4" />
+                      </Tooltip>
+                    </FieldHeader>
+                    {alert.fingerprint}
+                  </p>
+                </div>
+                <AlertTimeline
+                  key={auditData ? auditData.length : 1}
+                  alert={alert}
+                  auditData={auditData || []}
+                  isLoading={isLoading}
+                  onRefresh={handleRefresh}
+                />
                 <Title>Related Services</Title>
                 <TopologySearchProvider>
                   <TopologyMap

keep-ui/app/(keep)/alerts/alert-table-alert-facets.tsx

@@ -1,9 +1,5 @@
-import React, { useCallback, useEffect } from "react";
-import {
-  AlertFacetsProps,
-  FacetValue,
-  FacetFilters,
-} from "./alert-table-facet-types";
+import React, { useCallback } from "react";
+import { AlertFacetsProps, FacetValue } from "./alert-table-facet-types";
 import { Facet } from "./alert-table-facet";
 import {
   getFilteredAlertsForFacet,
@@ -148,7 +144,7 @@ export const AlertFacets: React.FC<AlertFacetsProps> = ({
           if (a.label === "n/a") return 1;
           if (b.label === "n/a") return -1;
           const orderDiff =
-            getSeverityOrder(a.label) - getSeverityOrder(b.label);
+            getSeverityOrder(b.label) - getSeverityOrder(a.label);
           if (orderDiff !== 0) return orderDiff;
           return b.count - a.count;
         });
@@ -253,7 +249,7 @@ export const AlertFacets: React.FC<AlertFacetsProps> = ({
           showSkeleton={showSkeleton}
         />
         <Facet
-          name="Incident Related"
+          name="Incident"
           facetKey="incident"
           values={getFacetValues("incident")}
           onSelect={(value, exclusive, isAllOnly) =>

keep-ui/app/(keep)/alerts/alert-table-facet-utils.tsx

@@ -1,16 +1,5 @@
 import { FacetFilters } from "./alert-table-facet-types";
-import { AlertDto, Severity } from "./models";
-import {
-  ChevronDownIcon,
-  ChevronRightIcon,
-  UserCircleIcon,
-  BellIcon,
-  ExclamationCircleIcon,
-  CheckCircleIcon,
-  CircleStackIcon,
-  BellSlashIcon,
-  FireIcon,
-} from "@heroicons/react/24/outline";
+import { AlertDto } from "./models";
 import { isQuickPresetRange } from "@/components/ui/DateRangePicker";
 
 export const getFilteredAlertsForFacet = (
@@ -83,32 +72,6 @@ export const getFilteredAlertsForFacet = (
   });
 };
 
-export const getStatusIcon = (status: string) => {
-  switch (status.toLowerCase()) {
-    case "firing":
-      return ExclamationCircleIcon;
-    case "resolved":
-      return CheckCircleIcon;
-    case "acknowledged":
-      return CircleStackIcon;
-    default:
-      return CircleStackIcon;
-  }
-};
-
-export const getStatusColor = (status: string) => {
-  switch (status.toLowerCase()) {
-    case "firing":
-      return "red";
-    case "resolved":
-      return "green";
-    case "acknowledged":
-      return "blue";
-    default:
-      return "gray";
-  }
-};
-
 export const getSeverityOrder = (severity: string): number => {
   switch (severity) {
     case "low":