Skip to content

Commit 62978c5

Browse files
Hubert-Szczepanski-SAPHubert-Szczepanski-SAP
committed
Adding Status filter
1 parent fa56cff commit 62978c5

File tree

4 files changed

+112
-73
lines changed

4 files changed

+112
-73
lines changed

‎src/components/ControlPlane/FluxList.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { timeAgo } from '../../utils/i18n/timeAgo.ts';
1616
import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
1717
import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
1818
import { useMemo } from 'react';
19+
import StatusFilter from '../Shared/StatusFilter.tsx';
1920

2021
export default function FluxList() {
2122
const {
@@ -68,6 +69,7 @@ export default function FluxList() {
6869
accessor: 'status',
6970
width: 85,
7071
hAlign: 'Center',
72+
Filter: ({ column }) => <StatusFilter column={column} />,
7173
Cell: (cellData: CellData<FluxRow['isReady']>) =>
7274
cellData.cell.row.original?.isReady != null ? (
7375
<ResourceStatusCell
@@ -110,6 +112,7 @@ export default function FluxList() {
110112
accessor: 'status',
111113
width: 85,
112114
hAlign: 'Center',
115+
Filter: ({ column }) => <StatusFilter column={column} />,
113116
Cell: (cellData: CellData<FluxRow['isReady']>) =>
114117
cellData.cell.row.original?.isReady != null ? (
115118
<ResourceStatusCell

‎src/components/ControlPlane/ManagedResources.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { resourcesInterval } from '../../lib/shared/constants';
1515
import { ResourceStatusCell } from '../Shared/ResourceStatusCell';
1616
import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
1717
import { useMemo } from 'react';
18+
import StatusFilter from '../Shared/StatusFilter.tsx';
1819

1920
interface CellData<T> {
2021
cell: {
@@ -66,6 +67,7 @@ export function ManagedResources() {
6667
accessor: 'synced',
6768
hAlign: 'Center',
6869
width: 85,
70+
Filter: ({ column }) => <StatusFilter column={column} />,
6971
Cell: (cellData: CellData<ResourceRow['synced']>) =>
7072
cellData.cell.row.original?.synced != null ? (
7173
<ResourceStatusCell
@@ -79,6 +81,7 @@ export function ManagedResources() {
7981
accessor: 'ready',
8082
hAlign: 'Center',
8183
width: 85,
84+
Filter: ({ column }) => <StatusFilter column={column} />,
8285
Cell: (cellData: CellData<ResourceRow['ready']>) =>
8386
cellData.cell.row.original?.ready != null ? (
8487
<ResourceStatusCell

‎src/components/ControlPlane/Providers.tsx‎

Lines changed: 3 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@ import {
55
AnalyticalTableColumnDefinition,
66
AnalyticalTableScaleWidthMode,
77
Title,
8-
Select,
9-
Option,
10-
Icon,
118
} from '@ui5/webcomponents-react';
129

1310
import useResource from '../../lib/api/useApiResource';
@@ -20,6 +17,7 @@ import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
2017

2118
import '@ui5/webcomponents-icons/dist/sys-enter-2';
2219
import '@ui5/webcomponents-icons/dist/sys-cancel-2';
20+
import StatusFilter from '../Shared/StatusFilter.tsx';
2321

2422
interface CellData<T> {
2523
cell: {
@@ -71,41 +69,7 @@ export function Providers() {
7169
accessor: 'installed',
7270
hAlign: 'Center',
7371
width: 85,
74-
Filter: ({ column }) => (
75-
<Select
76-
onChange={(e) => {
77-
const selectedOption = e.detail.selectedOption;
78-
if (!selectedOption || !column.setFilter) return;
79-
80-
const val = selectedOption.dataset?.value;
81-
column.setFilter(val === 'all' ? undefined : val);
82-
}}
83-
>
84-
<Option
85-
data-value="all"
86-
selected={column.filterValue === undefined}
87-
>
88-
{t('all')}
89-
</Option>
90-
<Option data-value="true" selected={column.filterValue === 'true'}>
91-
<Icon
92-
name="sys-enter-2"
93-
style={{ marginRight: 6, color: 'green' }}
94-
/>
95-
{t('yes')}
96-
</Option>
97-
<Option
98-
data-value="false"
99-
selected={column.filterValue === 'false'}
100-
>
101-
<Icon
102-
name="sys-cancel-2"
103-
style={{ marginRight: 6, color: 'red' }}
104-
/>
105-
{t('no')}
106-
</Option>
107-
</Select>
108-
),
72+
Filter: ({ column }) => <StatusFilter column={column} />,
10973
filter: 'equals',
11074
Cell: (cellData: CellData<ProvidersRow['installed']>) =>
11175
cellData.cell.row.original?.installed != null ? (
@@ -122,41 +86,7 @@ export function Providers() {
12286
accessor: 'healthy',
12387
hAlign: 'Center',
12488
width: 85,
125-
Filter: ({ column }) => (
126-
<Select
127-
onChange={(e) => {
128-
const selectedOption = e.detail.selectedOption;
129-
if (!selectedOption || !column.setFilter) return;
130-
131-
const val = selectedOption.dataset?.value;
132-
column.setFilter(val === 'all' ? undefined : val);
133-
}}
134-
>
135-
<Option
136-
data-value="all"
137-
selected={column.filterValue === undefined}
138-
>
139-
{t('all')}
140-
</Option>
141-
<Option data-value="true" selected={column.filterValue === 'true'}>
142-
<Icon
143-
name="sys-enter-2"
144-
style={{ marginRight: 6, color: 'green' }}
145-
/>
146-
{t('yes')}
147-
</Option>
148-
<Option
149-
data-value="false"
150-
selected={column.filterValue === 'false'}
151-
>
152-
<Icon
153-
name="sys-cancel-2"
154-
style={{ marginRight: 6, color: 'red' }}
155-
/>
156-
{t('no')}
157-
</Option>
158-
</Select>
159-
),
89+
Filter: ({ column }) => <StatusFilter column={column} />,
16090
filter: 'equals',
16191
Cell: (cellData: CellData<ProvidersRow['healthy']>) =>
16292
cellData.cell.row.original?.installed != null ? (

‎src/components/Shared/StatusFilter.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import React from 'react';
2+
import { useTranslation } from 'react-i18next';
3+
import { Select, Option, Icon } from '@ui5/webcomponents-react';
4+
5+
export interface StatusFilterProps {
6+
column: {
7+
filterValue?: string;
8+
setFilter?: (value?: string) => void;
9+
};
10+
}
11+
12+
interface SelectChangeEventDetail {
13+
selectedOption: HTMLElement & {
14+
dataset?: {
15+
value?: string;
16+
};
17+
};
18+
}
19+
20+
type SelectChangeEvent = CustomEvent<SelectChangeEventDetail>;
21+
22+
interface OptionProps {
23+
value: string;
24+
iconName: string;
25+
color: string;
26+
labelKey: string;
27+
isSelected: boolean;
28+
}
29+
30+
const StatusFilter: React.FC<StatusFilterProps> = ({ column }) => {
31+
const { t } = useTranslation();
32+
33+
const handleChange = (e: SelectChangeEvent) => {
34+
const selectedOption = e.detail.selectedOption;
35+
if (!selectedOption || !column.setFilter) return;
36+
37+
const val = selectedOption.dataset?.value;
38+
column.setFilter(val === 'all' ? undefined : val);
39+
};
40+
41+
const renderOption = ({
42+
value,
43+
iconName,
44+
color,
45+
labelKey,
46+
isSelected,
47+
}: OptionProps) => (
48+
<Option
49+
data-value={value}
50+
selected={isSelected}
51+
style={{
52+
padding: '6px 10px',
53+
}}
54+
>
55+
<div
56+
style={{
57+
display: 'flex',
58+
alignItems: 'center',
59+
gap: 8,
60+
}}
61+
>
62+
<Icon
63+
name={iconName}
64+
style={{
65+
color,
66+
width: 16,
67+
height: 16,
68+
flexShrink: 0,
69+
}}
70+
/>
71+
<span style={{ fontSize: 14 }}>{t(labelKey)}</span>
72+
</div>
73+
</Option>
74+
);
75+
76+
return (
77+
<Select onChange={handleChange}>
78+
{renderOption({
79+
value: 'all',
80+
iconName: 'filter',
81+
color: 'gray',
82+
labelKey: 'All',
83+
isSelected: column.filterValue === undefined,
84+
})}
85+
{renderOption({
86+
value: 'true',
87+
iconName: 'sys-enter-2',
88+
color: 'green',
89+
labelKey: 'Enabled',
90+
isSelected: column.filterValue === 'true',
91+
})}
92+
{renderOption({
93+
value: 'false',
94+
iconName: 'sys-cancel-2',
95+
color: 'red',
96+
labelKey: 'Disabled',
97+
isSelected: column.filterValue === 'false',
98+
})}
99+
</Select>
100+
);
101+
};
102+
103+
export default StatusFilter;

0 commit comments

Comments
 (0)