Skip to content

Commit ab0aeb5

Browse files
vojtechszocsvojtechszocs
committed
Migrate storage related tables to ConsoleDataView
1 parent b34dc56 commit ab0aeb5

File tree

6 files changed

+946
-708
lines changed

6 files changed

+946
-708
lines changed

‎frontend/packages/console-app/src/components/nodes/NodesPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -648,11 +648,11 @@ const NodeList: React.FC<NodeListProps> = ({
648648

649649
type NodeRowItem = NodeKind | NodeCertificateSigningRequestKind;
650650

651-
interface NodeFilters extends ResourceFilters {
651+
type NodeFilters = ResourceFilters & {
652652
status: string[];
653653
roles: string[];
654654
architecture: string[];
655-
}
655+
};
656656

657657
const useWatchCSRs = (): [CertificateSigningRequestKind[], boolean, unknown] => {
658658
const [isAllowed, checkIsLoading] = useAccessReview({

‎frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-class.tsx‎

Lines changed: 113 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
import * as React from 'react';
2-
import { css } from '@patternfly/react-styles';
3-
import { sortable } from '@patternfly/react-table';
42
import { useTranslation } from 'react-i18next';
3+
import {
4+
actionsCellProps,
5+
cellIsStickyProps,
6+
getNameCellProps,
7+
ConsoleDataView,
8+
} from '@console/app/src/components/data-view/ConsoleDataView';
9+
import { GetDataViewRows } from '@console/app/src/components/data-view/types';
510
import {
611
ListPageBody,
7-
useListPageFilter,
812
ListPageCreate,
9-
ListPageFilter,
1013
ListPageHeader,
11-
VirtualizedTable,
1214
TableColumn,
13-
RowProps,
1415
} from '@console/dynamic-plugin-sdk/src/lib-core';
15-
import { TableData } from '@console/internal/components/factory';
16-
import { useActiveColumns } from '@console/internal/components/factory/Table/active-columns-hook';
1716
import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
18-
import { Kebab } from '@console/internal/components/utils/kebab';
1917
import { ResourceLink } from '@console/internal/components/utils/resource-link';
2018
import { VolumeSnapshotClassModel } from '@console/internal/models';
2119
import {
@@ -25,95 +23,131 @@ import {
2523
referenceFor,
2624
} from '@console/internal/module/k8s';
2725
import LazyActionMenu from '@console/shared/src/components/actions/LazyActionMenu';
26+
import { LoadingBox } from '@console/shared/src/components/loading/LoadingBox';
27+
import { DASH } from '@console/shared/src/constants/ui';
2828
import { getAnnotations } from '@console/shared/src/selectors/common';
2929

30-
const tableColumnInfo = [
31-
{ id: 'name' },
32-
{ className: css('pf-m-hidden', 'pf-m-visible-on-md'), id: 'driver' },
33-
{ className: css('pf-m-hidden', 'pf-m-visible-on-md'), id: 'deletionPolicy' },
34-
{ className: Kebab.columnClass, id: '' },
35-
];
30+
const kind = referenceForModel(VolumeSnapshotClassModel);
31+
32+
const tableColumnInfo = [{ id: 'name' }, { id: 'driver' }, { id: 'deletionPolicy' }, { id: '' }];
33+
34+
const defaultSnapshotClassAnnotation = 'snapshot.storage.kubernetes.io/is-default-class';
3635

37-
const defaultSnapshotClassAnnotation: string = 'snapshot.storage.kubernetes.io/is-default-class';
3836
export const isDefaultSnapshotClass = (volumeSnapshotClass: VolumeSnapshotClassKind) =>
3937
getAnnotations(volumeSnapshotClass, { defaultSnapshotClassAnnotation: 'false' })[
4038
defaultSnapshotClassAnnotation
4139
] === 'true';
4240

43-
const Row: React.FC<RowProps<VolumeSnapshotClassKind>> = ({ obj }) => {
44-
const { name } = obj?.metadata || {};
45-
const { deletionPolicy, driver } = obj || {};
46-
const resourceKind = referenceFor(obj);
47-
const context = { [resourceKind]: obj };
48-
return (
49-
<>
50-
<TableData {...tableColumnInfo[0]}>
51-
<ResourceLink name={name} kind={referenceForModel(VolumeSnapshotClassModel)}>
52-
{isDefaultSnapshotClass(obj) && (
53-
<span className="pf-v6-u-font-size-xs pf-v6-u-text-color-subtle co-resource-item__help-text">
54-
&ndash; Default
55-
</span>
56-
)}
57-
</ResourceLink>
58-
</TableData>
59-
<TableData {...tableColumnInfo[1]}>{driver}</TableData>
60-
<TableData {...tableColumnInfo[2]}>{deletionPolicy}</TableData>
61-
<TableData {...tableColumnInfo[3]}>
62-
<LazyActionMenu context={context} />
63-
</TableData>
64-
</>
65-
);
41+
const getDataViewRows: GetDataViewRows<VolumeSnapshotClassKind> = (data, columns) => {
42+
return data.map(({ obj }) => {
43+
const name = obj.metadata?.name || '';
44+
const { deletionPolicy, driver } = obj;
45+
const context = { [referenceFor(obj)]: obj };
46+
47+
const rowCells = {
48+
[tableColumnInfo[0].id]: {
49+
cell: (
50+
<ResourceLink name={name} kind={kind}>
51+
{isDefaultSnapshotClass(obj) && (
52+
<span className="pf-v6-u-font-size-xs pf-v6-u-text-color-subtle co-resource-item__help-text">
53+
&ndash; Default
54+
</span>
55+
)}
56+
</ResourceLink>
57+
),
58+
props: getNameCellProps(name),
59+
},
60+
[tableColumnInfo[1].id]: {
61+
cell: driver,
62+
},
63+
[tableColumnInfo[2].id]: {
64+
cell: deletionPolicy,
65+
},
66+
[tableColumnInfo[3].id]: {
67+
cell: <LazyActionMenu context={context} />,
68+
props: {
69+
...actionsCellProps,
70+
},
71+
},
72+
};
73+
74+
return columns.map(({ id }) => {
75+
const cell = rowCells[id]?.cell || DASH;
76+
const props = rowCells[id]?.props || undefined;
77+
return {
78+
id,
79+
props,
80+
cell,
81+
};
82+
});
83+
});
6684
};
6785

68-
const VolumeSnapshotClassTable: React.FC<VolumeSnapshotClassTableProps> = (props) => {
86+
const useVolumeSnapshotClassColumns = (): TableColumn<VolumeSnapshotClassKind>[] => {
6987
const { t } = useTranslation();
70-
const getTableColumns = (): TableColumn<VolumeSnapshotClassKind>[] => [
71-
{
72-
title: t('console-app~Name'),
73-
sort: 'metadata.name',
74-
transforms: [sortable],
75-
id: tableColumnInfo[0].id,
76-
},
77-
{
78-
title: t('console-app~Driver'),
79-
sort: 'driver',
80-
transforms: [sortable],
81-
props: { className: tableColumnInfo[1].className },
82-
id: tableColumnInfo[1].id,
83-
},
84-
{
85-
title: t('console-app~Deletion policy'),
86-
sort: 'deletionPolicy',
87-
transforms: [sortable],
88-
props: { className: tableColumnInfo[2].className },
89-
id: tableColumnInfo[2].id,
90-
},
91-
{
92-
title: '',
93-
props: { className: tableColumnInfo[3].className },
94-
id: tableColumnInfo[3].id,
95-
},
96-
];
97-
const [columns] = useActiveColumns({ columns: getTableColumns() });
88+
89+
const columns: TableColumn<VolumeSnapshotClassKind>[] = React.useMemo(
90+
() => [
91+
{
92+
title: t('console-app~Name'),
93+
sort: 'metadata.name',
94+
id: tableColumnInfo[0].id,
95+
props: { ...cellIsStickyProps, modifier: 'nowrap' },
96+
},
97+
{
98+
title: t('console-app~Driver'),
99+
sort: 'driver',
100+
id: tableColumnInfo[1].id,
101+
props: { modifier: 'nowrap' },
102+
},
103+
{
104+
title: t('console-app~Deletion policy'),
105+
sort: 'deletionPolicy',
106+
id: tableColumnInfo[2].id,
107+
props: { modifier: 'nowrap' },
108+
},
109+
{
110+
title: '',
111+
id: tableColumnInfo[3].id,
112+
props: { ...cellIsStickyProps },
113+
},
114+
],
115+
[t],
116+
);
117+
118+
return columns;
119+
};
120+
121+
const VolumeSnapshotClassTable: React.FCC<VolumeSnapshotClassTableProps> = ({
122+
data,
123+
loaded,
124+
...props
125+
}) => {
126+
const columns = useVolumeSnapshotClassColumns();
98127

99128
return (
100-
<VirtualizedTable<VolumeSnapshotClassKind>
101-
{...props}
102-
aria-label={t('console-app~VolumeSnapshotClasses')}
103-
label={t('console-app~VolumeSnapshotClasses')}
104-
columns={columns}
105-
Row={Row}
106-
/>
129+
<React.Suspense fallback={<LoadingBox />}>
130+
<ConsoleDataView<VolumeSnapshotClassKind>
131+
{...props}
132+
label={VolumeSnapshotClassModel.labelPlural}
133+
data={data}
134+
loaded={loaded}
135+
columns={columns}
136+
getDataViewRows={getDataViewRows}
137+
hideColumnManagement
138+
/>
139+
</React.Suspense>
107140
);
108141
};
109142

110-
const VolumeSnapshotClassPage: React.FC<VolumeSnapshotClassPageProps> = ({
143+
const VolumeSnapshotClassPage: React.FCC<VolumeSnapshotClassPageProps> = ({
111144
canCreate = true,
112145
showTitle = true,
113146
namespace,
114147
selector,
115148
}) => {
116149
const { t } = useTranslation();
150+
117151
const [resources, loaded, loadError] = useK8sWatchResource<VolumeSnapshotClassKind[]>({
118152
groupVersionKind: {
119153
group: VolumeSnapshotClassModel.apiGroup,
@@ -125,26 +159,18 @@ const VolumeSnapshotClassPage: React.FC<VolumeSnapshotClassPageProps> = ({
125159
namespace,
126160
selector,
127161
});
128-
const [data, filteredData, onFilterChange] = useListPageFilter(resources);
129-
const resourceKind = referenceForModel(VolumeSnapshotClassModel);
130162

131163
return (
132164
<>
133165
<ListPageHeader title={showTitle ? t(VolumeSnapshotClassModel.labelPluralKey || '') : ''}>
134166
{canCreate && (
135-
<ListPageCreate groupVersionKind={resourceKind}>
167+
<ListPageCreate groupVersionKind={kind}>
136168
{t('console-app~Create VolumeSnapshotClass')}
137169
</ListPageCreate>
138170
)}
139171
</ListPageHeader>
140172
<ListPageBody>
141-
<ListPageFilter data={data} loaded={loaded} onFilterChange={onFilterChange} />
142-
<VolumeSnapshotClassTable
143-
unfilteredData={resources}
144-
data={filteredData}
145-
loaded={loaded}
146-
loadError={loadError}
147-
/>
173+
<VolumeSnapshotClassTable data={resources} loaded={loaded} loadError={loadError} />
148174
</ListPageBody>
149175
</>
150176
);
@@ -159,8 +185,8 @@ type VolumeSnapshotClassPageProps = {
159185

160186
type VolumeSnapshotClassTableProps = {
161187
data: VolumeSnapshotClassKind[];
162-
unfilteredData: VolumeSnapshotClassKind[];
163188
loaded: boolean;
164189
loadError: unknown;
165190
};
191+
166192
export default VolumeSnapshotClassPage;

0 commit comments

Comments
 (0)