diff --git a/frontend-modern/src/components/Workloads/WorkloadsFilter.tsx b/frontend-modern/src/components/Workloads/WorkloadsFilter.tsx index b911c28369..7b4bc24a74 100644 --- a/frontend-modern/src/components/Workloads/WorkloadsFilter.tsx +++ b/frontend-modern/src/components/Workloads/WorkloadsFilter.tsx @@ -1,4 +1,4 @@ -import { Component, Show, createMemo } from 'solid-js'; +import { Component, JSX, Show, createMemo } from 'solid-js'; import BoxIcon from 'lucide-solid/icons/box'; import BoxesIcon from 'lucide-solid/icons/boxes'; import MonitorIcon from 'lucide-solid/icons/monitor'; @@ -78,6 +78,26 @@ export const WorkloadsFilter: Component = (props) => { : undefined, })); + const runtimeChipLabel = (value: string): string => { + if (value === '') return 'All'; + if (value === 'docker') return 'Docker'; + if (value === 'podman') return 'Podman'; + return value; + }; + + const runtimeChipDot = (value: string): JSX.Element | undefined => { + if (value === 'docker') return statusDot('bg-sky-500'); + if (value === 'podman') return statusDot('bg-violet-500'); + return undefined; + }; + + const workloadRuntimeOptions = (sourceOptions: FilterSelectOption[]): FilterSelectOption[] => + sourceOptions.map((option) => ({ + ...option, + label: runtimeChipLabel(option.value), + leading: runtimeChipDot(option.value), + })); + const showRuntimeFilter = () => isContainerWorkloadViewMode(props.viewMode()) && Boolean(props.containerRuntimeFilter); @@ -183,7 +203,7 @@ export const WorkloadsFilter: Component = (props) => { value: () => runtimeFilter.value, setValue: runtimeFilter.onChange, defaultValue: '', - options: () => runtimeFilter.options, + options: () => workloadRuntimeOptions(runtimeFilter.options), }); } diff --git a/frontend-modern/src/components/Workloads/__tests__/WorkloadsFilter.test.tsx b/frontend-modern/src/components/Workloads/__tests__/WorkloadsFilter.test.tsx index fea97d56fe..48e01ccf17 100644 --- a/frontend-modern/src/components/Workloads/__tests__/WorkloadsFilter.test.tsx +++ b/frontend-modern/src/components/Workloads/__tests__/WorkloadsFilter.test.tsx @@ -539,8 +539,8 @@ describe('WorkloadsFilter', () => { }); render(() => ); const runtimeGroup = inlineFilterGroup('Runtime'); - expect(within(runtimeGroup).getByRole('button', { name: 'docker' })).toBeInTheDocument(); - expect(within(runtimeGroup).getByRole('button', { name: 'podman' })).toBeInTheDocument(); + expect(within(runtimeGroup).getByRole('button', { name: 'Docker' })).toBeInTheDocument(); + expect(within(runtimeGroup).getByRole('button', { name: 'Podman' })).toBeInTheDocument(); }); it('does not render when viewMode is not a container variant', () => { @@ -578,7 +578,7 @@ describe('WorkloadsFilter', () => { })} /> )); - pickInlineFilter('Runtime', 'docker'); + pickInlineFilter('Runtime', 'Docker'); expect(onChange).toHaveBeenCalledWith('docker'); }); });