From 994318f19d92de1d665674456effa0359222dad5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20S=C3=A1nchez?= <sanchez.saez.alex01@gmail.com>
Date: Wed, 29 Jul 2026 12:34:40 -0600
Subject: [PATCH] fix[frontend](alerts): added alert severity

---
 .../alerts/components/alert-drawer.tsx         | 18 ++++++++++++++----
 .../features/alerts/components/alert-row.tsx   | 12 +++++++++++-
 .../alerts/components/alerts-table-header.tsx  |  3 ++-
 frontend/src/features/alerts/lib/alert-meta.ts |  8 ++++++++
 frontend/src/shared/i18n/locales/de.json       |  2 ++
 frontend/src/shared/i18n/locales/en.json       |  2 ++
 frontend/src/shared/i18n/locales/es.json       |  2 ++
 frontend/src/shared/i18n/locales/fr.json       |  2 ++
 frontend/src/shared/i18n/locales/it.json       |  2 ++
 frontend/src/shared/i18n/locales/pt.json       |  2 ++
 frontend/src/shared/i18n/locales/ru.json       |  2 ++
 11 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/frontend/src/features/alerts/components/alert-drawer.tsx b/frontend/src/features/alerts/components/alert-drawer.tsx
index c693f0f50..d46817f15 100644
--- a/frontend/src/features/alerts/components/alert-drawer.tsx
+++ b/frontend/src/features/alerts/components/alert-drawer.tsx
@@ -3,7 +3,7 @@ import { Flame, X } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/shared/lib/utils'
 import { Button } from '@/shared/components/ui/button'
-import { SEV_META, ST_META, TS, absTime, riskOf, sevKey, statusKey } from '../lib/alert-meta'
+import { SEV_BADGE, ST_META, TS, absTime, riskOf, sevKey, statusKey } from '../lib/alert-meta'
 import { combineUserNote, isAiNote, parseAiNote, userNotePart } from '../lib/ai-note'
 import { type Alert, type AlertTag } from '../types/alert.types'
 import { useRelatedLogs } from '../hooks/use-related-logs'
@@ -56,9 +56,9 @@ export function AlertDrawer({
   const [notes, setNotes] = useState(userNotePart(a.notes))
   // The SOC AI agent may write its assessment into notes OR statusObservation.
   const aiNote = parseAiNote(a.notes) ?? parseAiNote(a.statusObservation)
-  const sm = SEV_META[sevKey(a)]
+  const sk = sevKey(a)
   const stm = ST_META[statusKey(a)]
-  const smLabel = t(`alerts.severity.${sevKey(a)}`)
+  const smLabel = t(`alerts.severity.${sk}`)
   const stmLabel = t(`alerts.status.${statusKey(a)}`)
   const tags = a.tags ?? []
 
@@ -75,7 +75,7 @@ export function AlertDrawer({
           <div className="flex items-start justify-between gap-4">
             <div className="min-w-0 flex-1">
               <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
-                <span className={cn('inline-flex items-center rounded-md px-1.5 py-0.5 font-medium ring-1 ring-inset', sm.pill)}>
+                <span className={cn('inline-flex items-center rounded-md px-1.5 py-0.5 font-medium uppercase tracking-wide ring-1 ring-inset', SEV_BADGE[sk])}>
                   {smLabel}
                 </span>
                 <span className={cn('inline-flex items-center rounded-md px-1.5 py-0.5 font-medium ring-1 ring-inset', stm.pill)}>
@@ -206,6 +206,16 @@ export function AlertDrawer({
               )}
               <Section title={t('alerts.drawer.section.details')}>
                 <dl className="grid grid-cols-[140px_1fr] gap-y-2 text-xs">
+                  <Row k={t('alerts.drawer.details.severity')}>
+                    <span
+                      className={cn(
+                        'inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide ring-1 ring-inset',
+                        SEV_BADGE[sk],
+                      )}
+                    >
+                      {smLabel}
+                    </span>
+                  </Row>
                   <Row k={t('alerts.drawer.details.risk')}>{riskOf(a)}</Row>
                   <Row k={t('alerts.drawer.details.assignee')}>
                     {a.assignee ? a.assignee : <span className="text-muted-foreground">{t('alerts.drawer.unassigned')}</span>}
diff --git a/frontend/src/features/alerts/components/alert-row.tsx b/frontend/src/features/alerts/components/alert-row.tsx
index 004a70b97..111d9f421 100644
--- a/frontend/src/features/alerts/components/alert-row.tsx
+++ b/frontend/src/features/alerts/components/alert-row.tsx
@@ -1,7 +1,7 @@
 import { Sparkles, Tag, UserCheck } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/shared/lib/utils'
-import { SEV_META, TS, absTime, relativeTime, riskOf, sevKey, statusKey } from '../lib/alert-meta'
+import { SEV_BADGE, SEV_META, TS, absTime, relativeTime, riskOf, sevKey, statusKey } from '../lib/alert-meta'
 import { isAiNote } from '../lib/ai-note'
 import type { Alert, AlertTag } from '../types/alert.types'
 import { AlertIncidentTarget } from './alert-incident-target'
@@ -130,6 +130,16 @@ export function AlertRow({
       <td className={TD}>
         <FlowCell source={a.target} adversary={a.adversary} />
       </td>
+      <td className={`${TD} text-center`}>
+        <span
+          className={cn(
+            'inline-flex items-center justify-center rounded-md px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide ring-1 ring-inset',
+            SEV_BADGE[sk],
+          )}
+        >
+          {t(`alerts.severity.${sk}`)}
+        </span>
+      </td>
       <td className={`${TD} text-center`}>
         <span
           className={cn(
diff --git a/frontend/src/features/alerts/components/alerts-table-header.tsx b/frontend/src/features/alerts/components/alerts-table-header.tsx
index 929a771df..a1f15e16d 100644
--- a/frontend/src/features/alerts/components/alerts-table-header.tsx
+++ b/frontend/src/features/alerts/components/alerts-table-header.tsx
@@ -18,6 +18,7 @@ export function AlertsTableHeader({ allChecked, onTogglePage }: { allChecked: bo
         <th className={TH}>{t('alerts.table.status')}</th>
         <th className={TH}>{t('alerts.table.technique')}</th>
         <th className={TH}>{t('alerts.table.sourceAdversary')}</th>
+        <th className={`${TH} text-center`}>{t('alerts.table.severity')}</th>
         <th className={`${TH} text-center`} title={t('alerts.table.riskHint')}>{t('alerts.table.risk')}</th>
         <th className={`${TH} text-center`}>{t('alerts.table.echoes')}</th>
         <th className={`${TH} text-center`}>{t('alerts.table.time')}</th>
@@ -26,4 +27,4 @@ export function AlertsTableHeader({ allChecked, onTogglePage }: { allChecked: bo
   )
 }
 
-export const ALERTS_TABLE_COLUMN_COUNT = 11
+export const ALERTS_TABLE_COLUMN_COUNT = 12
diff --git a/frontend/src/features/alerts/lib/alert-meta.ts b/frontend/src/features/alerts/lib/alert-meta.ts
index 95b03ede6..e8a7d8c6f 100644
--- a/frontend/src/features/alerts/lib/alert-meta.ts
+++ b/frontend/src/features/alerts/lib/alert-meta.ts
@@ -12,6 +12,14 @@ export const SEV_META: Record<SeverityKey, { label: string; bar: string; pill: s
   low: { label: 'Low', bar: 'bg-sky-500', pill: 'bg-sky-500/15 text-sky-600 ring-sky-500/30 dark:text-sky-300' },
 }
 
+// Traffic-light badge (green/yellow/red) shown wherever the alert severity
+// itself is displayed as a chip (table column, drawer details).
+export const SEV_BADGE: Record<SeverityKey, string> = {
+  high: 'bg-red-500/15 text-red-600 ring-red-500/30 dark:text-red-300',
+  medium: 'bg-yellow-500/15 text-yellow-700 ring-yellow-500/30 dark:text-yellow-300',
+  low: 'bg-emerald-500/15 text-emerald-600 ring-emerald-500/30 dark:text-emerald-300',
+}
+
 export const ST_META: Record<StatusKey, { label: string; pill: string }> = {
   open: { label: 'Open', pill: 'bg-red-500/15 text-red-600 ring-red-500/30 dark:text-red-300' },
   in_review: { label: 'In review', pill: 'bg-sky-500/15 text-sky-600 ring-sky-500/30 dark:text-sky-300' },
diff --git a/frontend/src/shared/i18n/locales/de.json b/frontend/src/shared/i18n/locales/de.json
index 452f70477..bd3ea3fb3 100644
--- a/frontend/src/shared/i18n/locales/de.json
+++ b/frontend/src/shared/i18n/locales/de.json
@@ -3883,6 +3883,7 @@
       "status": "Status",
       "technique": "Technik",
       "sourceAdversary": "Quelle → Angreifer",
+      "severity": "Schweregrad",
       "risk": "Risiko",
       "echoes": "Echos",
       "time": "Zeit",
@@ -3931,6 +3932,7 @@
         "notes": "Notizen"
       },
       "details": {
+        "severity": "Schweregrad",
         "risk": "Risiko",
         "category": "Kategorie",
         "technique": "Technik",
diff --git a/frontend/src/shared/i18n/locales/en.json b/frontend/src/shared/i18n/locales/en.json
index a7c98b403..3539079af 100644
--- a/frontend/src/shared/i18n/locales/en.json
+++ b/frontend/src/shared/i18n/locales/en.json
@@ -4169,6 +4169,7 @@
       "status": "Status",
       "technique": "Technique",
       "sourceAdversary": "Source → Adversary",
+      "severity": "Severity",
       "risk": "Risk",
       "echoes": "Echoes",
       "time": "Time",
@@ -4217,6 +4218,7 @@
         "notes": "Notes"
       },
       "details": {
+        "severity": "Severity",
         "risk": "Risk",
         "category": "Category",
         "technique": "Technique",
diff --git a/frontend/src/shared/i18n/locales/es.json b/frontend/src/shared/i18n/locales/es.json
index 901ea6628..89593f178 100644
--- a/frontend/src/shared/i18n/locales/es.json
+++ b/frontend/src/shared/i18n/locales/es.json
@@ -3992,6 +3992,7 @@
       "status": "Estado",
       "technique": "Técnica",
       "sourceAdversary": "Origen → Adversario",
+      "severity": "Severidad",
       "risk": "Riesgo",
       "echoes": "Ecos",
       "time": "Hora",
@@ -4040,6 +4041,7 @@
         "notes": "Notas"
       },
       "details": {
+        "severity": "Severidad",
         "risk": "Riesgo",
         "category": "Categoría",
         "technique": "Técnica",
diff --git a/frontend/src/shared/i18n/locales/fr.json b/frontend/src/shared/i18n/locales/fr.json
index 6db32dca2..6e93f1698 100644
--- a/frontend/src/shared/i18n/locales/fr.json
+++ b/frontend/src/shared/i18n/locales/fr.json
@@ -3883,6 +3883,7 @@
       "status": "Statut",
       "technique": "Technique",
       "sourceAdversary": "Source → Adversaire",
+      "severity": "Gravité",
       "risk": "Risque",
       "echoes": "Échos",
       "time": "Heure",
@@ -3931,6 +3932,7 @@
         "notes": "Notes"
       },
       "details": {
+        "severity": "Gravité",
         "risk": "Risque",
         "category": "Catégorie",
         "technique": "Technique",
diff --git a/frontend/src/shared/i18n/locales/it.json b/frontend/src/shared/i18n/locales/it.json
index 5a7102bf1..0c3672d21 100644
--- a/frontend/src/shared/i18n/locales/it.json
+++ b/frontend/src/shared/i18n/locales/it.json
@@ -3883,6 +3883,7 @@
       "status": "Stato",
       "technique": "Tecnica",
       "sourceAdversary": "Origine → Avversario",
+      "severity": "Gravità",
       "risk": "Rischio",
       "echoes": "Echi",
       "time": "Ora",
@@ -3931,6 +3932,7 @@
         "notes": "Note"
       },
       "details": {
+        "severity": "Gravità",
         "risk": "Rischio",
         "category": "Categoria",
         "technique": "Tecnica",
diff --git a/frontend/src/shared/i18n/locales/pt.json b/frontend/src/shared/i18n/locales/pt.json
index 0ce7812eb..f1377ab8a 100644
--- a/frontend/src/shared/i18n/locales/pt.json
+++ b/frontend/src/shared/i18n/locales/pt.json
@@ -3992,6 +3992,7 @@
       "status": "Estado",
       "technique": "Técnica",
       "sourceAdversary": "Origem → Adversário",
+      "severity": "Severidade",
       "risk": "Risco",
       "echoes": "Ecos",
       "time": "Hora",
@@ -4040,6 +4041,7 @@
         "notes": "Notas"
       },
       "details": {
+        "severity": "Severidade",
         "risk": "Risco",
         "category": "Categoria",
         "technique": "Técnica",
diff --git a/frontend/src/shared/i18n/locales/ru.json b/frontend/src/shared/i18n/locales/ru.json
index ee6f48799..196c10958 100644
--- a/frontend/src/shared/i18n/locales/ru.json
+++ b/frontend/src/shared/i18n/locales/ru.json
@@ -3574,6 +3574,7 @@
       "status": "Статус",
       "technique": "Техника",
       "sourceAdversary": "Источник → Противник",
+      "severity": "Серьёзность",
       "risk": "Риск",
       "echoes": "Эхо",
       "time": "Время",
@@ -3622,6 +3623,7 @@
         "notes": "Заметки"
       },
       "details": {
+        "severity": "Серьёзность",
         "risk": "Риск",
         "category": "Категория",
         "technique": "Техника",