[Security Solution] Alert KPI charts - remove count sort and presort by severity (#206145)

## Summary

Based on product feedback: it is better to display the counts by
severity, and the count sort is not that useful. This PR removed the
sort by count and presort by severity.

**Before**

![image](https://github.com/user-attachments/assets/05aa0ab2-7374-4c94-8661-2cadfc0e87b4)

**After**

![image](https://github.com/user-attachments/assets/7df2c22e-a764-40de-90d8-474f494ccde6)



### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -35584,7 +35584,6 @@
     "xpack.securitySolution.detectionEngine.alerts.openedAlertSuccessToastMessage": "Ouverture réussie de {totalAlerts} {totalAlerts, plural, =1 {alerte} other {alertes}}.",
     "xpack.securitySolution.detectionEngine.alerts.severity.severityDonutTitle": "Niveaux de sévérité",
     "xpack.securitySolution.detectionEngine.alerts.severity.severityTableLevelColumn": "Niveaux",
-    "xpack.securitySolution.detectionEngine.alerts.severity.unknown": "Inconnu",
     "xpack.securitySolution.detectionEngine.alerts.totalCountOfAlertsTitle": "alertes",
     "xpack.securitySolution.detectionEngine.alerts.updateAlertStatusFailedSingleAlert": "Impossible de mettre à jour l'alerte, car elle était déjà en cours de modification.",
     "xpack.securitySolution.detectionEngine.alerts.utilityBar.additionalFiltersActions.showBuildingBlockTitle": "Inclure les alertes fondamentales",

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -35444,7 +35444,6 @@
     "xpack.securitySolution.detectionEngine.alerts.openedAlertSuccessToastMessage": "{totalAlerts} {totalAlerts, plural, other  {件のアラート}}を正常に開きました。",
     "xpack.securitySolution.detectionEngine.alerts.severity.severityDonutTitle": "重要度レベル",
     "xpack.securitySolution.detectionEngine.alerts.severity.severityTableLevelColumn": "レベル",
-    "xpack.securitySolution.detectionEngine.alerts.severity.unknown": "不明",
     "xpack.securitySolution.detectionEngine.alerts.totalCountOfAlertsTitle": "アラート",
     "xpack.securitySolution.detectionEngine.alerts.updateAlertStatusFailedSingleAlert": "アラートを更新できませんでした。アラートはすでに修正されています。",
     "xpack.securitySolution.detectionEngine.alerts.utilityBar.additionalFiltersActions.showBuildingBlockTitle": "基本アラートを含める",

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -34903,7 +34903,6 @@
     "xpack.securitySolution.detectionEngine.alerts.openedAlertSuccessToastMessage": "已成功打开 {totalAlerts} 个{totalAlerts, plural, other {告警}}。",
     "xpack.securitySolution.detectionEngine.alerts.severity.severityDonutTitle": "严重性级别",
     "xpack.securitySolution.detectionEngine.alerts.severity.severityTableLevelColumn": "级别",
-    "xpack.securitySolution.detectionEngine.alerts.severity.unknown": "未知",
     "xpack.securitySolution.detectionEngine.alerts.totalCountOfAlertsTitle": "告警",
     "xpack.securitySolution.detectionEngine.alerts.updateAlertStatusFailedSingleAlert": "无法更新告警，因为它已被修改。",
     "xpack.securitySolution.detectionEngine.alerts.utilityBar.additionalFiltersActions.showBuildingBlockTitle": "包括构建块告警",

x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/chart_panels/chart_collapse/helpers.tsx

@@ -10,7 +10,6 @@ import type { ChartCollapseAgg, ChartCollapseData } from './types';
 import type { AlertSearchResponse } from '../../../../containers/detection_engine/alerts/types';
 import type { SummaryChartsData, SummaryChartsAgg } from '../../alerts_summary_charts_panel/types';
 import { severityLabels } from '../../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status';
-import { UNKNOWN_SEVERITY } from '../../severity_level_panel/translations';
 
 export const parseChartCollapseData = (
   response: AlertSearchResponse<{}, ChartCollapseAgg>
@@ -25,7 +24,7 @@ export const parseChartCollapseData = (
       return {
         key: severity.key,
         value: severity.doc_count,
-        label: severityLabels[severity.key] ?? UNKNOWN_SEVERITY,
+        label: severityLabels[severity.key],
       };
     });
     return [ret];

x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/columns.tsx

@@ -41,7 +41,6 @@ export const getSeverityTableColumns = (): Array<EuiBasicTableColumn<SeverityDat
   {
     field: 'value',
     name: COUNT_TABLE_TITLE,
-    sortable: true,
     dataType: 'number',
     'data-test-subj': 'severityTable-alertCount',
     width: '45%',

x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/helpers.tsx

@@ -13,7 +13,8 @@ import type { SummaryChartsData, SummaryChartsAgg } from '../alerts_summary_char
 import { severityLabels } from '../../../../overview/components/detection_response/alerts_by_status/use_alerts_by_status';
 import { emptyDonutColor } from '../../../../common/components/charts/donutchart_empty';
 import { SEVERITY_COLOR } from '../../../../overview/components/detection_response/utils';
-import * as i18n from './translations';
+
+const SEVERITY_ORDER: Severity[] = ['critical', 'high', 'medium', 'low'];
 
 export const getSeverityColor = (severity: string) => {
   return SEVERITY_COLOR[severity.toLocaleLowerCase() as Severity] ?? emptyDonutColor;
@@ -26,13 +27,19 @@ export const parseSeverityData = (
 
   return severityBuckets.length === 0
     ? []
-    : severityBuckets.map((severity) => {
-        return {
-          key: severity.key,
-          value: severity.doc_count,
-          label: severityLabels[severity.key] ?? i18n.UNKNOWN_SEVERITY,
-        };
-      });
+    : severityBuckets
+        .map((severity) => {
+          return {
+            key: severity.key,
+            value: severity.doc_count,
+            label: severityLabels[severity.key],
+          };
+        })
+        .sort((a, b) => {
+          const aIndex = SEVERITY_ORDER.indexOf(a.key);
+          const bIndex = SEVERITY_ORDER.indexOf(b.key);
+          return aIndex - bIndex;
+        });
 };
 
 export const getIsAlertsBySeverityData = (data: SummaryChartsData[]): data is SeverityData[] => {

x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/mock_data.ts

@@ -105,8 +105,8 @@ export const query = {
 };
 
 export const parsedAlerts: Array<{ key: Severity; value: number; label: string }> = [
-  { key: 'high', value: 78, label: 'High' },
-  { key: 'low', value: 46, label: 'Low' },
-  { key: 'medium', value: 32, label: 'Medium' },
   { key: 'critical', value: 21, label: 'Critical' },
+  { key: 'high', value: 78, label: 'High' },
+  { key: 'medium', value: 32, label: 'Medium' },
+  { key: 'low', value: 46, label: 'Low' },
 ];

x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/severity_level_chart.tsx

@@ -8,7 +8,6 @@ import React, { useCallback, useMemo } from 'react';
 import { ALERT_SEVERITY } from '@kbn/rule-data-utils';
 import styled from 'styled-components';
 import { EuiFlexGroup, EuiFlexItem, EuiInMemoryTable, EuiLoadingSpinner } from '@elastic/eui';
-import type { SortOrder } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 import type { SeverityBuckets as SeverityData } from '../../../../overview/components/detection_response/alerts_by_status/types';
 import type { FillColor } from '../../../../common/components/charts/donutchart';
 import { DonutChart } from '../../../../common/components/charts/donutchart';
@@ -47,13 +46,6 @@ export const SeverityLevelChart: React.FC<SeverityLevelProps> = ({
     return getSeverityColor(dataName);
   }, []);
 
-  const sorting: { sort: { field: keyof SeverityData; direction: SortOrder } } = {
-    sort: {
-      field: 'value',
-      direction: 'desc',
-    },
-  };
-
   const onDonutPartitionClicked = useCallback(
     (level: string) => {
       if (addFilter) {
@@ -71,7 +63,6 @@ export const SeverityLevelChart: React.FC<SeverityLevelProps> = ({
           columns={columns}
           items={data}
           loading={isLoading}
-          sorting={sorting}
         />
       </EuiFlexItem>
       <EuiFlexItem data-test-subj="severity-level-donut">

x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/translations.ts

@@ -13,13 +13,6 @@ export const SEVERITY_LEVELS_TITLE = i18n.translate(
   }
 );
 
-export const UNKNOWN_SEVERITY = i18n.translate(
-  'xpack.securitySolution.detectionEngine.alerts.severity.unknown',
-  {
-    defaultMessage: 'Unknown',
-  }
-);
-
 export const SEVERITY_LEVEL_COLUMN_TITLE = i18n.translate(
   'xpack.securitySolution.detectionEngine.alerts.severity.severityTableLevelColumn',
   { defaultMessage: 'Levels' }