diff --git a/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/data_quality_summary/ilm_phase_filter/index.tsx b/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/data_quality_summary/ilm_phase_filter/index.tsx index 4a7c55ac445bf..8290c674730dd 100644 --- a/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/data_quality_summary/ilm_phase_filter/index.tsx +++ b/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/data_quality_summary/ilm_phase_filter/index.tsx @@ -25,17 +25,24 @@ import { import { useDataQualityContext } from '../../data_quality_context'; import { formControlLayoutCss, optionCss, optionLabelCss } from './styles'; +const getPhaseKey = ( + option: EuiComboBoxOptionOption +): string => (typeof option.value === 'string' ? option.value : ''); + const renderOption = ( option: EuiComboBoxOptionOption -): React.ReactNode => ( - -
- {`${option.label}`} - {': '} - {getIlmPhaseDescription(option.label)} -
-
-); +): React.ReactNode => { + const phaseKey = getPhaseKey(option); + return ( + +
+ {`${option.label}`} + {': '} + {getIlmPhaseDescription(phaseKey)} +
+
+ ); +}; const IlmPhaseFilterComponent: React.FC = () => { const { selectedIlmPhaseOptions, setSelectedIlmPhaseOptions } = useDataQualityContext(); @@ -64,6 +71,7 @@ const IlmPhaseFilterComponent: React.FC = () => { selectedOptions={selectedIlmPhaseOptions} options={ilmPhaseOptionsStatic} onChange={handleSetSelectedOptions} + aria-label={ILM_PHASE} /> diff --git a/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/index.tsx b/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/index.tsx index 9968080bf35ca..e33ac48926e04 100644 --- a/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/index.tsx +++ b/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/index.tsx @@ -20,6 +20,7 @@ import { IndicesCheckContext } from './contexts/indices_check_context'; import { useIndicesCheck } from './hooks/use_indices_check'; import { useResultsRollup } from './hooks/use_results_rollup'; import { ilmPhaseOptionsStatic, EMPTY_STAT } from './constants'; +import { ilmPhasesFromSelectedOptions } from './utils/ilm_phases_from_selected_options'; import { DataQualitySummary } from './data_quality_summary'; import { DataQualityDetails } from './data_quality_details'; @@ -104,7 +105,7 @@ const DataQualityPanelComponent: React.FC = ({ [toasts] ); const ilmPhases: string[] = useMemo( - () => selectedIlmPhaseOptions.map(({ label }) => label), + () => ilmPhasesFromSelectedOptions(selectedIlmPhaseOptions), [selectedIlmPhaseOptions] ); diff --git a/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/utils/ilm_phases_from_selected_options.test.ts b/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/utils/ilm_phases_from_selected_options.test.ts new file mode 100644 index 0000000000000..3a8521150b404 --- /dev/null +++ b/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/utils/ilm_phases_from_selected_options.test.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 { EuiComboBoxOptionOption } from '@elastic/eui'; + +import { ilmPhasesFromSelectedOptions } from './ilm_phases_from_selected_options'; + +describe('ilmPhasesFromSelectedOptions', () => { + it('returns English phase values when labels are localized (ja-JP / i18n regression)', () => { + const selected: EuiComboBoxOptionOption[] = [ + { label: 'ホット', value: 'hot' }, + { label: 'ウォーム', value: 'warm' }, + { label: '管理対象外', value: 'unmanaged' }, + ]; + + expect(ilmPhasesFromSelectedOptions(selected)).toEqual(['hot', 'warm', 'unmanaged']); + }); + + it('returns values when labels match English defaults', () => { + const selected: EuiComboBoxOptionOption[] = [ + { label: 'hot', value: 'hot' }, + { label: 'warm', value: 'warm' }, + ]; + + expect(ilmPhasesFromSelectedOptions(selected)).toEqual(['hot', 'warm']); + }); + + it('drops options without a string value', () => { + const selected: EuiComboBoxOptionOption[] = [ + { label: 'hot', value: 'hot' }, + { label: 'broken' }, + ]; + + expect(ilmPhasesFromSelectedOptions(selected)).toEqual(['hot']); + }); +}); diff --git a/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/utils/ilm_phases_from_selected_options.ts b/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/utils/ilm_phases_from_selected_options.ts new file mode 100644 index 0000000000000..05f892432352e --- /dev/null +++ b/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/utils/ilm_phases_from_selected_options.ts @@ -0,0 +1,19 @@ +/* + * 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 { EuiComboBoxOptionOption } from '@elastic/eui'; + +/** + * Returns canonical ILM phase values for filtering (matches `getIlmPhase` output). + * Uses option `value`, not localized `label`, so non-English locales keep working. + */ +export const ilmPhasesFromSelectedOptions = ( + selectedIlmPhaseOptions: EuiComboBoxOptionOption[] +): string[] => + selectedIlmPhaseOptions + .map(({ value }) => value) + .filter((v): v is string => typeof v === 'string');