Skip to content

Commit d0134a9

Browse files
rhamiltorhamilto
committed
CONSOLE-4772: Update list pages to use DataView in Workloads Tab
1 parent 2f53904 commit d0134a9

21 files changed

+886
-722
lines changed

‎frontend/packages/console-app/locales/en/console-app.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -442,6 +442,8 @@
442442
"Authentication is being reconfigured. The new identity provider will be available once reconfiguration is complete.": "Authentication is being reconfigured. The new identity provider will be available once reconfiguration is complete.",
443443
"View authentication conditions for reconfiguration status.": "View authentication conditions for reconfiguration status.",
444444
"Add": "Add",
445+
"Min available {{minAvailable}}": "Min available {{minAvailable}}",
446+
"Max unavailable {{maxUnavailable}}": "Max unavailable {{maxUnavailable}}",
445447
"Min available {{minAvailable}} of {{count}} pod_one": "Min available {{minAvailable}} of {{count}} pod",
446448
"Min available {{minAvailable}} of {{count}} pod_other": "Min available {{minAvailable}} of {{count}} pods",
447449
"Max unavailable {{maxUnavailable}} of {{count}} pod_one": "Max unavailable {{maxUnavailable}} of {{count}} pod",
@@ -453,20 +455,19 @@
453455
"An eviction is allowed if at least \"minAvailable\" pods selected by \"selector\" will still be available after the eviction, i.e. even in the absence of the evicted pod. So for example you can prevent all voluntary evictions by specifying \"100%\".": "An eviction is allowed if at least \"minAvailable\" pods selected by \"selector\" will still be available after the eviction, i.e. even in the absence of the evicted pod. So for example you can prevent all voluntary evictions by specifying \"100%\".",
454456
"More information:": "More information:",
455457
"PodDisruptionBudget documentation": "PodDisruptionBudget documentation",
458+
"Disruption not allowed": "Disruption not allowed",
456459
"Unknown error removing PodDisruptionBudget {{pdbName}}.": "Unknown error removing PodDisruptionBudget {{pdbName}}.",
457460
"Remove PodDisruptionBudget?": "Remove PodDisruptionBudget?",
458461
"Are you sure you want to remove the PodDisruptionBudget <1>{{pdbName}}</1> from <4>{{workloadName}}</4>?": "Are you sure you want to remove the PodDisruptionBudget <1>{{pdbName}}</1> from <4>{{workloadName}}</4>?",
459462
"The PodDisruptionBudget will be deleted.": "The PodDisruptionBudget will be deleted.",
460463
"Requirement": "Requirement",
461-
"Selector": "Selector",
462-
"Availability": "Availability",
463-
"Allowed disruptions": "Allowed disruptions",
464464
"{{count}} PodDisruptionBudget violated_one": "{{count}} PodDisruptionBudget violated",
465465
"{{count}} PodDisruptionBudget violated_other": "{{count}} PodDisruptionBudget violated",
466466
"PodDisruptionBudget details": "PodDisruptionBudget details",
467467
"Min available": "Min available",
468468
"Max unavailable": "Max unavailable",
469469
"Allowed disruption": "Allowed disruption",
470+
"Selector": "Selector",
470471
"Label query over pods whose evictions are managed by the disruption budget. Anull selector will match no pods, while an empty ({}) selector will select all pods within the namespace.": "Label query over pods whose evictions are managed by the disruption budget. Anull selector will match no pods, while an empty ({}) selector will select all pods within the namespace.",
471472
"Resource is already covered by another PodDisruptionBudget": "Resource is already covered by another PodDisruptionBudget",
472473
"Availability requirement value": "Availability requirement value",
@@ -479,8 +480,9 @@
479480
"Create {{label}}": "Create {{label}}",
480481
"Edit {{label}}": "Edit {{label}}",
481482
"{helpText}": "{helpText}",
483+
"Availability": "Availability",
484+
"Allowed disruptions": "Allowed disruptions",
482485
"Create PodDisruptionBudget": "Create PodDisruptionBudget",
483-
"Disruption not allowed": "Disruption not allowed",
484486
"No PodDisruptionBudget": "No PodDisruptionBudget",
485487
"Learn how to create, import, and run applications on OpenShift with step-by-step instructions and tasks.": "Learn how to create, import, and run applications on OpenShift with step-by-step instructions and tasks.",
486488
"Quick starts": "Quick starts",

‎frontend/packages/console-app/src/components/pdb/AvailabilityDisplay.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import * as React from 'react';
2+
import * as _ from 'lodash';
3+
import { useTranslation } from 'react-i18next';
4+
import { DASH } from '@console/shared';
5+
import { PodDisruptionBudgetKind } from './types';
6+
7+
const AvailabilityDisplay: React.FC<AvailabilityDisplayProps> = ({ pdb }) => {
8+
const { t } = useTranslation();
9+
10+
if (_.isNil(pdb.spec.maxUnavailable) && _.isNil(pdb.spec.minAvailable)) {
11+
return <>{DASH}</>;
12+
}
13+
14+
if (_.isNil(pdb.spec.maxUnavailable)) {
15+
return (
16+
<>
17+
{t('console-app~Min available {{minAvailable}}', { minAvailable: pdb.spec.minAvailable })}
18+
</>
19+
);
20+
}
21+
22+
return (
23+
<>
24+
{t('console-app~Max unavailable {{maxUnavailable}}', {
25+
maxUnavailable: pdb.spec.maxUnavailable,
26+
})}
27+
</>
28+
);
29+
};
30+
31+
type AvailabilityDisplayProps = {
32+
pdb: PodDisruptionBudgetKind;
33+
};
34+
35+
export default AvailabilityDisplay;

‎frontend/packages/console-app/src/components/pdb/DisruptionsAllowed.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import * as React from 'react';
2+
import { Tooltip } from '@patternfly/react-core';
3+
import { useTranslation } from 'react-i18next';
4+
import { YellowExclamationTriangleIcon } from '@console/dynamic-plugin-sdk';
5+
import { PodDisruptionBudgetKind } from './types';
6+
import { isDisruptionViolated } from './utils/get-pdb-resources';
7+
8+
const DisruptionsAllowed: React.FC<DisruptionsAllowedProps> = ({ pdb }) => {
9+
const { t } = useTranslation();
10+
const isPDBViolated = isDisruptionViolated(pdb);
11+
12+
return (
13+
<>
14+
{pdb.status.disruptionsAllowed}{' '}
15+
{isPDBViolated && (
16+
<Tooltip content={t('console-app~Disruption not allowed')}>
17+
<YellowExclamationTriangleIcon />
18+
</Tooltip>
19+
)}
20+
</>
21+
);
22+
};
23+
24+
type DisruptionsAllowedProps = {
25+
pdb: PodDisruptionBudgetKind;
26+
};
27+
28+
export default DisruptionsAllowed;

‎frontend/packages/console-app/src/components/pdb/PDBList.tsx‎

Lines changed: 155 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,171 @@
11
import * as React from 'react';
22
import { useTranslation } from 'react-i18next';
3-
import { useActiveColumns } from '@console/internal/components/factory/Table/active-columns-hook';
4-
import VirtualizedTable from '@console/internal/components/factory/Table/VirtualizedTable';
5-
import { getPDBTableColumns } from './pdb-table-columns';
6-
import PodDisruptionBudgetTableRow from './PDBTableRow';
3+
import {
4+
actionsCellProps,
5+
cellIsStickyProps,
6+
getNameCellProps,
7+
initialFiltersDefault,
8+
ConsoleDataView,
9+
} from '@console/app/src/components/data-view/ConsoleDataView';
10+
import { GetDataViewRows } from '@console/app/src/components/data-view/types';
11+
import { TableColumn } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
12+
import { ResourceLink, Selector } from '@console/internal/components/utils';
13+
import { LoadingBox } from '@console/internal/components/utils/status-box';
14+
import { referenceForModel } from '@console/internal/module/k8s';
15+
import { LazyActionMenu, DASH } from '@console/shared';
16+
import { Timestamp } from '@console/shared/src/components/datetime/Timestamp';
17+
import { PodDisruptionBudgetModel } from '../../models';
18+
import AvailabilityDisplay from './AvailabilityDisplay';
19+
import DisruptionsAllowed from './DisruptionsAllowed';
720
import { PodDisruptionBudgetKind } from './types';
821

9-
const PodDisruptionBudgetList: React.FC<PodDisruptionBudgetsListProps> = (props) => {
22+
export const tableColumnInfo = [
23+
{ id: 'name' },
24+
{ id: 'namespace' },
25+
{ id: 'selector' },
26+
{ id: 'minAvailable' },
27+
{ id: 'disruptionsAllowed' },
28+
{ id: 'creationTimestamp' },
29+
{ id: '' },
30+
];
31+
32+
const getDataViewRows: GetDataViewRows<PodDisruptionBudgetKind, undefined> = (data, columns) => {
33+
return data.map(({ obj: pdb }) => {
34+
const { name, namespace } = pdb.metadata;
35+
const resourceKind = referenceForModel(PodDisruptionBudgetModel);
36+
const context = { [resourceKind]: pdb };
37+
38+
const rowCells = {
39+
[tableColumnInfo[0].id]: {
40+
cell: <ResourceLink kind={resourceKind} name={name} namespace={namespace} />,
41+
props: getNameCellProps(name),
42+
},
43+
[tableColumnInfo[1].id]: {
44+
cell: <ResourceLink kind="Namespace" name={namespace} />,
45+
},
46+
[tableColumnInfo[2].id]: {
47+
cell: <Selector selector={pdb.spec.selector} namespace={namespace} />,
48+
},
49+
[tableColumnInfo[3].id]: {
50+
cell: <AvailabilityDisplay pdb={pdb} />,
51+
},
52+
[tableColumnInfo[4].id]: {
53+
cell: <DisruptionsAllowed pdb={pdb} />,
54+
},
55+
[tableColumnInfo[5].id]: {
56+
cell: <Timestamp timestamp={pdb.metadata.creationTimestamp} />,
57+
},
58+
[tableColumnInfo[6].id]: {
59+
cell: <LazyActionMenu context={context} />,
60+
props: actionsCellProps,
61+
},
62+
};
63+
64+
return columns.map(({ id }) => {
65+
const cell = rowCells[id]?.cell || DASH;
66+
return {
67+
id,
68+
props: rowCells[id]?.props,
69+
cell,
70+
};
71+
});
72+
});
73+
};
74+
75+
const usePDBColumns = (): TableColumn<PodDisruptionBudgetKind>[] => {
1076
const { t } = useTranslation();
11-
const [columns] = useActiveColumns({ columns: getPDBTableColumns() });
77+
const columns = React.useMemo(() => {
78+
return [
79+
{
80+
title: t('console-app~Name'),
81+
id: tableColumnInfo[0].id,
82+
sort: 'metadata.name',
83+
props: {
84+
...cellIsStickyProps,
85+
modifier: 'nowrap',
86+
},
87+
},
88+
{
89+
title: t('console-app~Namespace'),
90+
id: tableColumnInfo[1].id,
91+
sort: 'metadata.namespace',
92+
props: {
93+
modifier: 'nowrap',
94+
},
95+
},
96+
{
97+
title: t('console-app~Selector'),
98+
id: tableColumnInfo[2].id,
99+
sort: 'spec.selector',
100+
props: {
101+
modifier: 'nowrap',
102+
width: 20,
103+
},
104+
},
105+
{
106+
title: t('console-app~Availability'),
107+
id: tableColumnInfo[3].id,
108+
sort: 'spec.minAvailable',
109+
props: {
110+
modifier: 'nowrap',
111+
},
112+
},
113+
{
114+
title: t('console-app~Allowed disruptions'),
115+
id: tableColumnInfo[4].id,
116+
sort: 'status.disruptionsAllowed',
117+
props: {
118+
modifier: 'nowrap',
119+
},
120+
},
121+
{
122+
title: t('console-app~Created'),
123+
id: tableColumnInfo[5].id,
124+
sort: 'metadata.creationTimestamp',
125+
props: {
126+
modifier: 'nowrap',
127+
},
128+
},
129+
{
130+
title: '',
131+
id: tableColumnInfo[6].id,
132+
props: {
133+
...cellIsStickyProps,
134+
},
135+
},
136+
];
137+
}, [t]);
138+
return columns;
139+
};
140+
141+
const PodDisruptionBudgetList: React.FCC<PodDisruptionBudgetsListProps> = ({
142+
data,
143+
loaded,
144+
...props
145+
}) => {
146+
const columns = usePDBColumns();
12147

13148
return (
14-
<VirtualizedTable<PodDisruptionBudgetKind>
15-
{...props}
16-
aria-label={t('console-app~PodDisruptionBudgets')}
17-
label={t('console-app~PodDisruptionBudgets')}
18-
columns={columns}
19-
Row={PodDisruptionBudgetTableRow}
20-
/>
149+
<React.Suspense fallback={<LoadingBox />}>
150+
<ConsoleDataView<PodDisruptionBudgetKind>
151+
{...props}
152+
label={PodDisruptionBudgetModel.labelPlural}
153+
data={data}
154+
loaded={loaded}
155+
columns={columns}
156+
initialFilters={initialFiltersDefault}
157+
getDataViewRows={getDataViewRows}
158+
hideColumnManagement
159+
/>
160+
</React.Suspense>
21161
);
22162
};
23163

24164
export default PodDisruptionBudgetList;
25165

26166
type PodDisruptionBudgetsListProps = {
27167
data: PodDisruptionBudgetKind[];
28-
unfilteredData: PodDisruptionBudgetKind[];
29168
loaded: boolean;
30-
loadError: any;
169+
loadError?: any;
170+
[key: string]: any;
31171
};

‎frontend/packages/console-app/src/components/pdb/PDBPage.tsx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import * as React from 'react';
22
import { useTranslation } from 'react-i18next';
33
import { ListPageBody } from '@console/dynamic-plugin-sdk';
4-
import { useListPageFilter } from '@console/internal/components/factory/ListPage/filter-hook';
54
import ListPageCreate from '@console/internal/components/factory/ListPage/ListPageCreate';
6-
import ListPageFilter from '@console/internal/components/factory/ListPage/ListPageFilter';
75
import ListPageHeader from '@console/internal/components/factory/ListPage/ListPageHeader';
86
import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
97
import { referenceForModel } from '@console/internal/module/k8s';
@@ -27,7 +25,6 @@ export const PodDisruptionBudgetsPage: React.FC<PodDisruptionBudgetsPageProps> =
2725
namespace,
2826
});
2927

30-
const [data, filteredData, onFilterChange] = useListPageFilter(resources);
3128
const resourceKind = referenceForModel(PodDisruptionBudgetModel);
3229
const accessReview = {
3330
groupVersionKind: resourceKind,
@@ -41,13 +38,7 @@ export const PodDisruptionBudgetsPage: React.FC<PodDisruptionBudgetsPageProps> =
4138
</ListPageCreate>
4239
</ListPageHeader>
4340
<ListPageBody>
44-
<ListPageFilter data={data} loaded={loaded} onFilterChange={onFilterChange} />
45-
<PodDisruptionBudgetList
46-
data={filteredData}
47-
unfilteredData={resources}
48-
loaded={loaded}
49-
loadError={loadError}
50-
/>
41+
<PodDisruptionBudgetList data={resources} loaded={loaded} loadError={loadError} />
5142
</ListPageBody>
5243
</>
5344
);

‎frontend/packages/console-app/src/components/pdb/PDBTableRow.tsx‎

Lines changed: 0 additions & 66 deletions
This file was deleted.

0 commit comments

Comments
 (0)