[ML] Anomaly Explorer: New severity colors alignment & New UX for filtering anomalies

x-pack/platform/packages/shared/ml/anomaly_utils/constants.ts

@@ -5,31 +5,6 @@
  * 2.0.
  */
 
-import { ML_ANOMALY_THRESHOLD } from './anomaly_threshold';
-import { ML_SEVERITY_COLORS } from './severity_colors';
-
-/**
- * Severity color ramp.
- */
-export const ML_SEVERITY_COLOR_RAMP = [
-  {
-    stop: ML_ANOMALY_THRESHOLD.LOW,
-    color: ML_SEVERITY_COLORS.WARNING,
-  },
-  {
-    stop: ML_ANOMALY_THRESHOLD.MINOR,
-    color: ML_SEVERITY_COLORS.MINOR,
-  },
-  {
-    stop: ML_ANOMALY_THRESHOLD.MAJOR,
-    color: ML_SEVERITY_COLORS.MAJOR,
-  },
-  {
-    stop: ML_ANOMALY_THRESHOLD.CRITICAL,
-    color: ML_SEVERITY_COLORS.CRITICAL,
-  },
-];
-
 /**
  * Custom enum for anomaly result type
  */

x-pack/platform/packages/shared/ml/anomaly_utils/get_severity.test.ts

@@ -8,9 +8,15 @@
 import { getSeverity } from './get_severity';
 
 describe('getSeverity', () => {
-  test('returns warning for 0 <= score < 25', () => {
-    expect(getSeverity(0).id).toBe('warning');
-    expect(getSeverity(0.001).id).toBe('warning');
+  test('returns low for 0 <= score < 3', () => {
+    expect(getSeverity(0).id).toBe('low');
+    expect(getSeverity(0.001).id).toBe('low');
+    expect(getSeverity(2.99).id).toBe('low');
+  });
+
+  test('returns warning for 3 <= score < 25', () => {
+    expect(getSeverity(3).id).toBe('warning');
+    expect(getSeverity(3.001).id).toBe('warning');
     expect(getSeverity(24.99).id).toBe('warning');
   });
 

x-pack/platform/packages/shared/ml/anomaly_utils/get_severity.ts

@@ -21,8 +21,10 @@ export function getSeverity(normalizedScore: number): MlSeverityType {
     return ML_ANOMALY_SEVERITY_TYPES.major;
   } else if (normalizedScore >= ML_ANOMALY_THRESHOLD.MINOR) {
     return ML_ANOMALY_SEVERITY_TYPES.minor;
-  } else if (normalizedScore >= ML_ANOMALY_THRESHOLD.LOW) {
+  } else if (normalizedScore >= ML_ANOMALY_THRESHOLD.WARNING) {
     return ML_ANOMALY_SEVERITY_TYPES.warning;
+  } else if (normalizedScore >= ML_ANOMALY_THRESHOLD.LOW) {
+    return ML_ANOMALY_SEVERITY_TYPES.low;
   } else {
     return ML_ANOMALY_SEVERITY_TYPES.unknown;
   }

x-pack/platform/packages/shared/ml/anomaly_utils/get_severity_color.ts

@@ -9,9 +9,9 @@ import { ML_ANOMALY_THRESHOLD } from './anomaly_threshold';
 import { ML_SEVERITY_COLORS } from './severity_colors';
 
 /**
- * Returns a severity RGB color (one of critical, major, minor, warning, low or unknown)
- * for the supplied normalized anomaly score (a value between 0 and 100).
- * @param normalizedScore - A normalized score between 0-100, which is based on the probability of the anomalousness of this record
+ * @deprecated Prefer using the `useSeverityColor` hook for functional components
+ * or ensure `EuiTheme` is passed to `getThemeResolvedSeverityColor` for class components
+ * to get theme-aware colors. This function uses a fixed set of legacy colors.
  */
 export function getSeverityColor(normalizedScore: number): string {
   if (normalizedScore >= ML_ANOMALY_THRESHOLD.CRITICAL) {

x-pack/platform/packages/shared/ml/anomaly_utils/index.ts

@@ -8,6 +8,7 @@
 export { type MlSeverityType, ML_ANOMALY_SEVERITY } from './anomaly_severity';
 export { ML_ANOMALY_THRESHOLD } from './anomaly_threshold';
 export { ML_SEVERITY_COLORS } from './severity_colors';
+export { getMlSeverityColorRampValue, type ColorRampStop } from './severity_ramp';
 
 export {
   mlJobAggregations,
@@ -42,7 +43,6 @@ export {
   ML_PARTITION_FIELD_VALUE,
   ML_PARTITION_FIELDS,
   ML_JOB_ID,
-  ML_SEVERITY_COLOR_RAMP,
 } from './constants';
 
 export {
@@ -91,6 +91,11 @@ export {
 
 export { getFormattedSeverityScore } from './get_formatted_severity_score';
 export { getSeverity } from './get_severity';
+export {
+  useSeverityColor,
+  getThemeResolvedSeverityColor,
+  getThemeResolvedSeverityStrokeColor,
+} from './use_severity_color';
 export { getSeverityColor } from './get_severity_color';
 export { getSeverityType } from './get_severity_type';
 

x-pack/platform/packages/shared/ml/anomaly_utils/severity_colors.ts

@@ -7,6 +7,8 @@
 
 /**
  * RGB hex codes used to indicate the severity of an anomaly according to its anomaly score.
+ * @deprecated Prefer using theme-aware colors via `useSeverityColor` hook or `getThemeResolvedSeverityColor` utility.
+ * This constant provides a fixed set of legacy colors.
  */
 export const ML_SEVERITY_COLORS = {
   /**

x-pack/platform/packages/shared/ml/anomaly_utils/severity_ramp.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { EuiThemeComputed } from '@elastic/eui';
+import type { SerializableRecord } from '@kbn/utility-types';
+import { ML_ANOMALY_THRESHOLD } from './anomaly_threshold';
+import { getThemeResolvedSeverityColor } from './use_severity_color';
+
+export interface ColorRampStop extends SerializableRecord {
+  stop: number;
+  color: string;
+}
+
+/**
+ * Returns a theme-aware color ramp for ML severity scores.
+ * @param euiTheme The EUI theme object.
+ * @returns An array of ColorRampStop objects.
+ */
+export const getMlSeverityColorRampValue = (euiTheme: EuiThemeComputed): ColorRampStop[] => [
+  {
+    stop: ML_ANOMALY_THRESHOLD.LOW,
+    color: getThemeResolvedSeverityColor(ML_ANOMALY_THRESHOLD.LOW, euiTheme),
+  },
+  {
+    stop: ML_ANOMALY_THRESHOLD.MINOR,
+    color: getThemeResolvedSeverityColor(ML_ANOMALY_THRESHOLD.MINOR, euiTheme),
+  },
+  {
+    stop: ML_ANOMALY_THRESHOLD.MAJOR,
+    color: getThemeResolvedSeverityColor(ML_ANOMALY_THRESHOLD.MAJOR, euiTheme),
+  },
+  {
+    stop: ML_ANOMALY_THRESHOLD.CRITICAL,
+    color: getThemeResolvedSeverityColor(ML_ANOMALY_THRESHOLD.CRITICAL, euiTheme),
+  },
+];

x-pack/platform/packages/shared/ml/anomaly_utils/tsconfig.json

@@ -19,5 +19,6 @@
     "@kbn/i18n",
     "@kbn/ml-is-populated-object",
     "@kbn/field-types",
+    "@kbn/utility-types",
   ]
 }

x-pack/platform/packages/shared/ml/anomaly_utils/use_severity_color.test.ts

@@ -0,0 +1,90 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { renderHook } from '@testing-library/react';
+import { useSeverityColor } from './use_severity_color';
+
+// Mock the EUI dependencies
+jest.mock('@elastic/eui', () => {
+  const mockSkyBluePalette = ['#dceef7', '#a6d8ec', '#a6d8ec', '#a6d8ec', '#a6d8ec', '#a6d8ec'];
+  return {
+    useEuiTheme: () => ({
+      euiTheme: {
+        colors: {
+          severity: {
+            danger: '#ff0000',
+            risk: '#ff9900',
+            warning: '#ffcc00',
+            unknown: '#ffffff',
+          },
+        },
+      },
+    }),
+    euiPaletteSkyBlue: () => mockSkyBluePalette,
+  };
+});
+describe('useSeverityColor', () => {
+  // Define expected color values based on our mocks
+  const expectedColors = {
+    low: '#dceef7',
+    warning: '#a6d8ec',
+    minor: '#ffcc00',
+    major: '#ff9900',
+    critical: '#ff0000',
+    unknown: '#ffffff',
+  };
+  test('returns correct hex code for low for 0 <= score < 3', () => {
+    const { result } = renderHook(() => useSeverityColor(0));
+    expect(result.current).toBe(expectedColors.low);
+
+    const { result: result2 } = renderHook(() => useSeverityColor(0.001));
+    expect(result2.current).toBe(expectedColors.low);
+
+    const { result: result3 } = renderHook(() => useSeverityColor(2.99));
+    expect(result3.current).toBe(expectedColors.low);
+  });
+
+  test('returns correct hex code for warning for 3 <= score < 25', () => {
+    const { result } = renderHook(() => useSeverityColor(3));
+    expect(result.current).toBe(expectedColors.warning);
+
+    const { result: result2 } = renderHook(() => useSeverityColor(24.99));
+    expect(result2.current).toBe(expectedColors.warning);
+  });
+
+  test('returns correct hex code for minor for 25 <= score < 50', () => {
+    const { result } = renderHook(() => useSeverityColor(25));
+    expect(result.current).toBe(expectedColors.minor);
+
+    const { result: result2 } = renderHook(() => useSeverityColor(49.99));
+    expect(result2.current).toBe(expectedColors.minor);
+  });
+
+  test('returns correct hex code for major for 50 <= score < 75', () => {
+    const { result } = renderHook(() => useSeverityColor(50));
+    expect(result.current).toBe(expectedColors.major);
+
+    const { result: result2 } = renderHook(() => useSeverityColor(74.99));
+    expect(result2.current).toBe(expectedColors.major);
+  });
+
+  test('returns correct hex code for critical for score >= 75', () => {
+    const { result } = renderHook(() => useSeverityColor(75));
+    expect(result.current).toBe(expectedColors.critical);
+
+    const { result: result2 } = renderHook(() => useSeverityColor(100));
+    expect(result2.current).toBe(expectedColors.critical);
+
+    const { result: result3 } = renderHook(() => useSeverityColor(1000));
+    expect(result3.current).toBe(expectedColors.critical);
+  });
+
+  test('returns correct hex code for unknown for scores less than 0', () => {
+    const { result } = renderHook(() => useSeverityColor(-10));
+    expect(result.current).toBe(expectedColors.unknown);
+  });
+});

x-pack/platform/packages/shared/ml/anomaly_utils/use_severity_color.ts

@@ -0,0 +1,79 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useMemo } from 'react';
+import type { EuiThemeComputed } from '@elastic/eui';
+import { useEuiTheme, euiPaletteSkyBlue, euiPaletteOrange, euiPaletteYellow } from '@elastic/eui';
+import { ML_ANOMALY_THRESHOLD } from './anomaly_threshold';
+
+/**
+ * Resolves severity color based on normalized score and EUI theme colors.
+ * This function can be used in contexts where the EuiTheme object is available,
+ * for example, within class components that receive the theme via props or context.
+ *
+ * @param normalizedScore The anomaly score, normalized (typically 0-100).
+ * @param euiTheme The EuiTheme object.
+ * @returns The hex color string for the severity.
+ */
+export function getThemeResolvedSeverityColor(
+  normalizedScore: number,
+  euiTheme: EuiThemeComputed
+): string {
+  const skyBluePalette = euiPaletteSkyBlue(6);
+
+  if (normalizedScore >= ML_ANOMALY_THRESHOLD.CRITICAL) {
+    return euiTheme.colors.severity.danger;
+  } else if (normalizedScore >= ML_ANOMALY_THRESHOLD.MAJOR) {
+    return euiTheme.colors.severity.risk;
+  } else if (normalizedScore >= ML_ANOMALY_THRESHOLD.MINOR) {
+    return euiTheme.colors.severity.warning;
+  } else if (normalizedScore >= ML_ANOMALY_THRESHOLD.WARNING) {
+    return skyBluePalette[2];
+  } else if (normalizedScore >= ML_ANOMALY_THRESHOLD.LOW) {
+    return skyBluePalette[0];
+  } else {
+    return euiTheme.colors.severity.unknown;
+  }
+}
+
+export function getThemeResolvedSeverityStrokeColor(
+  normalizedScore: number,
+  euiTheme: EuiThemeComputed
+): string {
+  const orangePalette = euiPaletteOrange(6);
+  const yellowPalette = euiPaletteYellow(6);
+  const skyBluePalette = euiPaletteSkyBlue(6);
+
+  if (normalizedScore >= ML_ANOMALY_THRESHOLD.CRITICAL) {
+    return euiTheme.colors.danger;
+  } else if (normalizedScore >= ML_ANOMALY_THRESHOLD.MAJOR) {
+    return orangePalette[5];
+  } else if (normalizedScore >= ML_ANOMALY_THRESHOLD.MINOR) {
+    return yellowPalette[5];
+  } else if (normalizedScore >= ML_ANOMALY_THRESHOLD.WARNING) {
+    return skyBluePalette[3];
+  } else if (normalizedScore >= ML_ANOMALY_THRESHOLD.LOW) {
+    return skyBluePalette[0];
+  } else {
+    return euiTheme.colors.severity.unknown;
+  }
+}
+
+/**
+ * A React hook to get a theme-aware severity color string directly.
+ * This hook computes the color based on the normalized score and the current EUI theme.
+ *
+ * @param normalizedScore The anomaly score, normalized (typically 0-100).
+ * @returns The hex color string for the severity, corresponding to the current theme.
+ */
+export const useSeverityColor = (normalizedScore: number): string => {
+  const { euiTheme } = useEuiTheme();
+
+  return useMemo(() => {
+    return getThemeResolvedSeverityColor(normalizedScore, euiTheme);
+  }, [normalizedScore, euiTheme]);
+};

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

@@ -26995,7 +26995,6 @@
     "xpack.ml.controls.selectSeverity.criticalLabel": "critique",
     "xpack.ml.controls.selectSeverity.majorLabel": "majeur",
     "xpack.ml.controls.selectSeverity.minorLabel": "mineure",
-    "xpack.ml.controls.selectSeverity.scoreDetailsDescription": "score {value} et supérieur",
     "xpack.ml.controls.selectSeverity.warningLabel": "avertissement",
     "xpack.ml.creationWizardUtils.destinationIndexInputAriaLabel": "Choisissez un nom d'index de destination unique.",
     "xpack.ml.creationWizardUtils.destinationIndexInvalidError": "Nom d'index de destination non valide.",

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

@@ -26974,7 +26974,6 @@
     "xpack.ml.controls.selectSeverity.criticalLabel": "致命的",
     "xpack.ml.controls.selectSeverity.majorLabel": "メジャー",
     "xpack.ml.controls.selectSeverity.minorLabel": "マ��ナー",
-    "xpack.ml.controls.selectSeverity.scoreDetailsDescription": "スコア{value}以上",
     "xpack.ml.controls.selectSeverity.warningLabel": "警告",
     "xpack.ml.creationWizardUtils.destinationIndexInputAriaLabel": "固有の宛先インデックス名を選択してください。",
     "xpack.ml.creationWizardUtils.destinationIndexInvalidError": "無効なデスティネーションインデックス名。",

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

@@ -27023,7 +27023,6 @@
     "xpack.ml.controls.selectSeverity.criticalLabel": "紧急",
     "xpack.ml.controls.selectSeverity.majorLabel": "重大",
     "xpack.ml.controls.selectSeverity.minorLabel": "轻微",
-    "xpack.ml.controls.selectSeverity.scoreDetailsDescription": "{value} 及以上分数",
     "xpack.ml.controls.selectSeverity.warningLabel": "警告",
     "xpack.ml.creationWizardUtils.destinationIndexInputAriaLabel": "选择唯一目标索引名称。",
     "xpack.ml.creationWizardUtils.destinationIndexInvalidError": "目标索引名称无效。",

x-pack/platform/plugins/shared/ml/common/types/anomalies.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export interface SeverityThreshold {
+  min: number;
+  max?: number;
+}

x-pack/platform/plugins/shared/ml/common/types/locator.ts

@@ -14,6 +14,7 @@ import type { SearchQueryLanguage } from '@kbn/ml-query-utils';
 import type { ListingPageUrlState } from '@kbn/ml-url-state';
 import type { JobId } from './anomaly_detection_jobs/job';
 import type { ML_PAGES } from '../constants/locator';
+import type { SeverityThreshold } from './anomalies';
 
 type OptionalPageState = (object & { globalState?: MlCommonGlobalState }) | undefined;
 
@@ -119,7 +120,7 @@ export interface ExplorerAppState {
     /**
      * Indicated severity threshold for both swim lanes
      */
-    severity?: number;
+    severity?: SeverityThreshold[];
   };
   mlExplorerFilter: {
     influencersFilterQuery?: InfluencersFilterQuery;

x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/anomalies_table_columns.js

@@ -118,7 +118,7 @@ export function getColumns(
       name: (
         <span>
           {i18n.translate('xpack.ml.anomaliesTable.severityColumnName', {
-            defaultMessage: 'Severity',
+            defaultMessage: 'Score',
           })}
           &nbsp;
           <EuiIconTip