Skip to content

Commit fa56cff

Browse files
Hubert-Szczepanski-SAPHubert-Szczepanski-SAP
committed
WiP
1 parent 18339a3 commit fa56cff

File tree

6 files changed

+97
-17
lines changed

6 files changed

+97
-17
lines changed

‎public/locales/en.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@
294294
},
295295
"yaml": {
296296
"copiedToClipboard": "YAML copied to clipboard!",
297-
"YAML": "YAML"
297+
"YAML": "File"
298298
},
299299
"createMCP": {
300300
"dialogTitle": "Create Managed Control Plane",

‎src/components/ControlPlane/FluxList.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ export default function FluxList() {
8585
hAlign: 'Center',
8686
width: 85,
8787
accessor: 'yaml',
88+
disableFilters: true,
8889
Cell: (cellData: CellData<KustomizationsResponse['items']>) => (
8990
<YamlViewButton resourceObject={cellData.cell.row.original?.item} />
9091
),
@@ -127,6 +128,7 @@ export default function FluxList() {
127128
hAlign: 'Center',
128129
width: 85,
129130
accessor: 'yaml',
131+
disableFilters: true,
130132
Cell: (cellData: CellData<FluxRow>) => (
131133
<YamlViewButton resourceObject={cellData.cell.row.original?.item} />
132134
),

‎src/components/ControlPlane/ManagedResources.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,9 @@ export function ManagedResources() {
9292
hAlign: 'Center',
9393
width: 85,
9494
accessor: 'yaml',
95+
disableFilters: true,
9596
Cell: (cellData: CellData<ResourceRow>) =>
96-
!!cellData.cell.row.original?.item ? (
97+
cellData.cell.row.original?.item ? (
9798
<YamlViewButton resourceObject={cellData.cell.row.original?.item} />
9899
) : undefined,
99100
},

‎src/components/ControlPlane/Providers.tsx‎

Lines changed: 90 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,41 @@
1+
import { useMemo } from 'react';
12
import { useTranslation } from 'react-i18next';
23
import {
34
AnalyticalTable,
45
AnalyticalTableColumnDefinition,
56
AnalyticalTableScaleWidthMode,
67
Title,
8+
Select,
9+
Option,
10+
Icon,
711
} from '@ui5/webcomponents-react';
12+
813
import useResource from '../../lib/api/useApiResource';
914
import IllustratedError from '../Shared/IllustratedError';
10-
import '@ui5/webcomponents-icons/dist/sys-enter-2';
11-
import '@ui5/webcomponents-icons/dist/sys-cancel-2';
1215
import { ProvidersListRequest } from '../../lib/api/types/crossplane/listProviders';
1316
import { resourcesInterval } from '../../lib/shared/constants';
1417
import { timeAgo } from '../../utils/i18n/timeAgo';
1518
import { ResourceStatusCell } from '../Shared/ResourceStatusCell';
16-
1719
import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
18-
import { useMemo } from 'react';
20+
21+
import '@ui5/webcomponents-icons/dist/sys-enter-2';
22+
import '@ui5/webcomponents-icons/dist/sys-cancel-2';
1923

2024
interface CellData<T> {
2125
cell: {
22-
value: T | null; // null for grouping rows
26+
value: T | null;
2327
row: {
24-
original?: ProvidersRow; // missing for grouping rows
28+
original?: ProvidersRow;
2529
};
2630
};
2731
}
2832

2933
type ProvidersRow = {
3034
name: string;
3135
version: string;
32-
healthy: boolean;
36+
healthy: string;
3337
healthyTransitionTime: string;
34-
installed: boolean;
38+
installed: string;
3539
installedTransitionTime: string;
3640
created: string;
3741
item: unknown;
@@ -67,10 +71,46 @@ export function Providers() {
6771
accessor: 'installed',
6872
hAlign: 'Center',
6973
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+
),
109+
filter: 'equals',
70110
Cell: (cellData: CellData<ProvidersRow['installed']>) =>
71111
cellData.cell.row.original?.installed != null ? (
72112
<ResourceStatusCell
73-
value={cellData.cell.row.original?.installed}
113+
value={cellData.cell.row.original?.installed === 'true'}
74114
transitionTime={
75115
cellData.cell.row.original?.installedTransitionTime
76116
}
@@ -82,26 +122,62 @@ export function Providers() {
82122
accessor: 'healthy',
83123
hAlign: 'Center',
84124
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+
),
160+
filter: 'equals',
85161
Cell: (cellData: CellData<ProvidersRow['healthy']>) =>
86162
cellData.cell.row.original?.installed != null ? (
87163
<ResourceStatusCell
88-
value={cellData.cell.row.original?.healthy}
164+
value={cellData.cell.row.original?.healthy === 'true'}
89165
transitionTime={cellData.cell.row.original?.healthyTransitionTime}
90166
/>
91167
) : null,
92168
},
93-
94169
{
95170
Header: t('yaml.YAML'),
96171
hAlign: 'Center',
97172
width: 85,
98173
accessor: 'yaml',
174+
disableFilters: true,
99175
Cell: (cellData: CellData<ProvidersRow>) => (
100176
<YamlViewButton resourceObject={cellData.cell.row.original?.item} />
101177
),
102178
},
103179
],
104-
[],
180+
[t],
105181
);
106182

107183
const rows: ProvidersRow[] =
@@ -115,9 +191,9 @@ export function Providers() {
115191
return {
116192
name: item.metadata.name,
117193
created: timeAgo.format(new Date(item.metadata.creationTimestamp)),
118-
installed: installed?.status === 'True',
194+
installed: installed?.status === 'True' ? 'true' : 'false',
119195
installedTransitionTime: installed?.lastTransitionTime ?? '',
120-
healthy: healthy?.status === 'True',
196+
healthy: healthy?.status === 'True' ? 'true' : 'false',
121197
healthyTransitionTime: healthy?.lastTransitionTime ?? '',
122198
version: item.spec.package.match(/\d+(\.\d+)+/g)?.toString() ?? '',
123199
item: item,
@@ -138,7 +214,6 @@ export function Providers() {
138214
scaleWidthMode={AnalyticalTableScaleWidthMode.Smart}
139215
loading={isLoading}
140216
filterable
141-
// Prevent the table from resetting when the data changes
142217
retainColumnWidth
143218
reactTableOptions={{
144219
autoResetHiddenColumns: false,

‎src/components/ControlPlane/ProvidersConfig.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export function ProvidersConfig() {
7676
hAlign: 'Center',
7777
width: 85,
7878
accessor: 'yaml',
79+
disableFilters: true,
7980
Cell: (cellData: CellData<Rows>) =>
8081
cellData.cell.row.original?.resource ? (
8182
<YamlViewButton

‎src/components/Projects/ProjectsList.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ export default function ProjectsList() {
7575
Header: t('yaml.YAML'),
7676
accessor: 'yaml',
7777
width: 85,
78+
disableFilters: true,
7879
hAlign: 'Center',
7980
// eslint-disable-next-line @typescript-eslint/no-explicit-any
8081
Cell: (instance: any) => (

0 commit comments

Comments
 (0)