fix: add severity badge on alert modal

src/components/alerts/alert-modal.tsx

@@ -19,6 +19,7 @@ import {
 import { Alert } from "@/types/alertmanager"
 import { Check, ClipboardCopy, Square, SquareArrowOutUpRight } from "lucide-react"
 import { cn } from "@/lib/utils"
+import { AlertSeverity } from "./alert-severity"
 
 function isURL(string: string): boolean {
   try {
@@ -45,7 +46,10 @@ export function AlertModal(props: Props) {
       <SheetContent>
         <div className="flex flex-col h-screen">
           <SheetHeader className="shrink-0">
-            <SheetTitle>{alert?.labels.alertname}</SheetTitle>
+            <SheetTitle className="flex gap-2 items-center">
+              {alert && <AlertSeverity alert={alert} />}
+              {alert?.labels.alertname}
+            </SheetTitle>
             <SheetDescription>{summary}</SheetDescription>
           </SheetHeader>
 

src/components/alerts/alert-row.tsx

@@ -1,7 +1,7 @@
 import { Alert } from "@/types/alertmanager"
 import { formatDate } from "@/lib/date"
 import { stringToColor } from "./utils"
-import { cn } from "@/lib/utils"
+import { AlertSeverity } from "./alert-severity"
 
 const importantLabels = [
   'host',
@@ -25,7 +25,7 @@ export function AlertRow(props: Props) {
   const { alert } = props
 
   return (
-    <div className="flex gap-2 items-center px-6 h-[45px] border-b group cursor-pointer">
+    <div className="flex gap-2 xl:gap-4 items-center px-6 h-[45px] border-b group cursor-pointer">
       <AlertSeverity alert={alert} />
       <AlertTitle alert={alert} />
       <AlertSummary alert={alert} />
@@ -36,42 +36,6 @@ export function AlertRow(props: Props) {
   )
 }
 
-function AlertSeverity({ alert }: { alert: Alert }) {
-  const { severity } = alert.labels
-
-  let color = 'bg-black'
-  let text = '???'
-
-  switch (severity) {
-    case 'critical':
-      color = 'bg-red-600'
-      text = 'CRIT'
-      break
-    case 'error':
-      color = 'bg-red-500'
-      text = 'ERR'
-      break
-    case 'warning':
-      color = 'bg-orange-300'
-      text = 'WARN'
-      break
-    case 'info':
-      color = 'bg-blue-400'
-      text = 'INFO'
-      break
-    case 'none':
-      color = 'bg-slate-500'
-      text = 'NONE'
-      break
-  }
-
-  return (
-    <div className="shrink-0 w-12 font-mono">
-      <span className={cn("text-white text-xs px-2 py-1 rounded-sm", color)}>{text}</span>
-    </div>
-  )
-}
-
 function AlertTitle({ alert }: { alert: Alert }) {
   const { alertname } = alert.labels
 
@@ -92,7 +56,6 @@ function AlertSummary({ alert }: { alert: Alert }) {
   )
 }
 
-
 function AlertLabels({ alert }: { alert: Alert }) {
   const labels = Object.entries(alert.labels).map(([key, value]) => {
     return { key: key, value: value }

src/components/alerts/alert-severity.tsx

@@ -0,0 +1,41 @@
+import { cn } from "@/lib/utils"
+import { Alert } from "@/types/alertmanager"
+
+export function AlertSeverity({ alert }: { alert: Alert }) {
+  const { severity } = alert.labels
+
+  let color = 'bg-black'
+  let text = '???'
+
+  switch (severity) {
+    case 'critical':
+      color = 'bg-red-600'
+      text = 'CRIT'
+      break
+    case 'error':
+      color = 'bg-red-500'
+      text = 'ERR'
+      break
+    case 'warning':
+      color = 'bg-orange-300'
+      text = 'WARN'
+      break
+    case 'info':
+      color = 'bg-blue-400'
+      text = 'INFO'
+      break
+    case 'none':
+      color = 'bg-slate-500'
+      text = 'NONE'
+      break
+  }
+
+  return (
+    <div
+      title={severity}
+      className={cn("text-center text-white text-xs px-1 py-1 rounded-sm shrink-0 font-mono w-12", color)}
+    >
+      {text}
+    </div>
+  )
+}