fix alert flyout insights color order

elastic · Mar 3, 2025 · 1869921 · 1869921
1 parent d291339
commit 1869921
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/...ty_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx b/...ty_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx
@@ -153,9 +153,9 @@ describe('AlertCountInsight', () => {
         closed: {
           total: 6,
           severities: [
-            { key: 'high', value: 1, label: 'High' },
             { key: 'low', value: 1, label: 'Low' },
             { key: 'medium', value: 2, label: 'Medium' },
+            { key: 'high', value: 1, label: 'High' },
             { key: 'critical', value: 2, label: 'Critical' },
           ],
         },
@@ -173,9 +173,9 @@ describe('getFormattedAlertStats', () => {
   it('should return alert stats', () => {
     const alertStats = getFormattedAlertStats(mockAlertData, euiTheme);
     expect(alertStats).toEqual([
-      { key: 'High', count: 2, color: '#DA8B45' },
       { key: 'Low', count: 2, color: '#54B399' },
       { key: 'Medium', count: 2, color: '#D6BF57' },
+      { key: 'High', count: 2, color: '#DA8B45' },
       { key: 'Critical', count: 2, color: '#E7664C' },
     ]);
   });
@@ -186,8 +186,8 @@ describe('getFormattedAlertStats', () => {
         closed: {
           total: 2,
           severities: [
-            { key: 'high', value: 1, label: 'High' },
             { key: 'low', value: 1, label: 'Low' },
+            { key: 'high', value: 1, label: 'High' },
           ],
         },
       },

diff --git a/...ecurity_solution/public/flyout/document_details/shared/components/alert_count_insight.tsx b/...ecurity_solution/public/flyout/document_details/shared/components/alert_count_insight.tsx
@@ -48,6 +48,8 @@ import {
   EntityDetailsLeftPanelTab,
 } from '../../../entity_details/shared/components/left_panel/left_panel_header';
 
+const ORDER = ['Low', 'Medium', 'High', 'Critical'];
+
 interface AlertCountInsightProps {
   /**
    * The name of the entity to filter the alerts by.
@@ -97,7 +99,12 @@ export const getFormattedAlertStats = (
     key: capitalize(key),
     count,
     color: getSeverityColor(key, euiTheme),
-  }));
+  })).sort((a, b) => {
+    const aIndex = ORDER.indexOf(a.key);
+    const bIndex = ORDER.indexOf(b.key);
+    return aIndex - bIndex;
+  });
+
   return alertStats;
 };