add more

public/index.html

@@ -127,9 +127,17 @@ pre.raw-line { background: var(--bs-tertiary-bg); padding: .75rem; border-radius
         <div class="d-flex gap-2">
           <select class="form-select form-select-sm" id="filterSeverity" style="width:auto">
             <option value="">All Severities</option>
+            <option value="emergency">Emergency</option>
+            <option value="critical_high">Critical High</option>
             <option value="critical">Critical</option>
+            <option value="critical_low">Critical Low</option>
+            <option value="error">Error</option>
+            <option value="warning_high">Warning High</option>
             <option value="warning">Warning</option>
+            <option value="warning_low">Warning Low</option>
+            <option value="notice">Notice</option>
             <option value="info">Info</option>
+            <option value="debug">Debug</option>
           </select>
 <select class="form-select form-select-sm" id="filterStatus" style="width:auto">
             <option value="">All Statuses</option>
@@ -391,9 +399,17 @@ pre.raw-line { background: var(--bs-tertiary-bg); padding: .75rem; border-radius
     <div class="mb-3">
       <label class="form-label">Severity</label>
       <select class="form-select" name="severity" required>
+        <option value="emergency">Emergency</option>
+        <option value="critical_high">Critical High</option>
         <option value="critical">Critical</option>
+        <option value="critical_low">Critical Low</option>
+        <option value="error">Error</option>
+        <option value="warning_high">Warning High</option>
         <option value="warning" selected>Warning</option>
+        <option value="warning_low">Warning Low</option>
+        <option value="notice">Notice</option>
         <option value="info">Info</option>
+        <option value="debug">Debug</option>
       </select>
     </div>
     <div class="mb-3">
@@ -533,8 +549,15 @@ function toast(msg, type = 'success') {
 }
 
 function severityBadge(s) {
-  const map = { critical: 'danger', warning: 'warning', info: 'info' };
-  return `<span class="badge badge-severity bg-${map[s] || 'secondary'}">${s}</span>`;
+  const map = {
+    debug: 'secondary', info: 'info', notice: 'info',
+    warning_low: 'warning', warning: 'warning', warning_high: 'warning',
+    error: 'danger',
+    critical_low: 'danger', critical: 'danger', critical_high: 'danger',
+    emergency: 'dark',
+  };
+  const label = s.replace(/_/g, ' ');
+  return `<span class="badge badge-severity bg-${map[s] || 'secondary'}">${label}</span>`;
 }
 
 function statusBadge(s) {
@@ -593,8 +616,17 @@ async function loadDashboard() {
     }
 
     const chartEl = document.getElementById('chartContainer');
+    const severityGroups = { critical: ['critical_high','critical','critical_low','emergency'], warning: ['warning_high','warning','warning_low','error'], info: ['notice','info','debug'] };
     const severityCounts = { critical: 0, warning: 0, info: 0 };
-    counts.forEach(c => { if (c.status !== 'resolved' && severityCounts[c.severity] !== undefined) severityCounts[c.severity] += parseInt(c.count); });
+    counts.forEach(c => {
+      if (c.status === 'resolved') return;
+      for (const [group, levels] of Object.entries(severityGroups)) {
+        if (levels.includes(c.severity)) {
+          severityCounts[group] += parseInt(c.count);
+          break;
+        }
+      }
+    });
     const maxVal = Math.max(...Object.values(severityCounts), 1);
     chartEl.innerHTML = `<div class="d-flex align-items-end gap-2" style="height:120px">${Object.entries(severityCounts).map(([sev, cnt]) => {
       const color = { critical: 'danger', warning: 'warning', info: 'info' }[sev] || 'secondary';