Skip to content

Commit afacb45

Browse files
krishagarwal278krishagarwal278
committed
Update configmap to use ResourceDataView
1 parent bf50835 commit afacb45

File tree

1 file changed

+151
-78
lines changed

1 file changed

+151
-78
lines changed

‎frontend/public/components/configmap.tsx‎

Lines changed: 151 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import * as _ from 'lodash-es';
2-
import { css } from '@patternfly/react-styles';
3-
import { sortable } from '@patternfly/react-table';
1+
import * as React from 'react';
42
import { useTranslation } from 'react-i18next';
53
import PaneBody from '@console/shared/src/components/layout/PaneBody';
6-
import { DetailsPage, ListPage, Table, TableData, TableProps } from './factory';
4+
import { DetailsPage, ListPage } from './factory';
75
import { ConfigMapData, ConfigMapBinaryData } from './configmap-and-secret-data';
6+
import { DASH } from '@console/shared';
87
import {
98
Kebab,
109
SectionHeading,
@@ -16,101 +15,173 @@ import {
1615
import { Timestamp } from '@console/shared/src/components/datetime/Timestamp';
1716
import { ConfigMapModel } from '../models';
1817
import { Grid, GridItem } from '@patternfly/react-core';
19-
import { ConfigMapKind } from '@console/internal/module/k8s';
18+
import { ConfigMapKind, referenceForModel, TableColumn } from '../module/k8s';
19+
import { getGroupVersionKindForModel } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-ref';
20+
import {
21+
actionsCellProps,
22+
cellIsStickyProps,
23+
getNameCellProps,
24+
initialFiltersDefault,
25+
ResourceDataView,
26+
} from '@console/app/src/components/data-view/ResourceDataView';
27+
import { GetDataViewRows } from '@console/app/src/components/data-view/types';
28+
import { LoadingBox } from './utils/status-box';
29+
import { sortResourceByValue } from './factory/Table/sort';
30+
import { sorts } from './factory/table';
2031

2132
const menuActions = [...Kebab.getExtensionsActionsForKind(ConfigMapModel), ...Kebab.factory.common];
2233

23-
const kind = 'ConfigMap';
34+
const kind = referenceForModel(ConfigMapModel);
35+
36+
type ConfigMapsListProps = {
37+
data: ConfigMapKind[];
38+
loaded: boolean;
39+
};
2440

25-
const tableColumnClasses = [
26-
'',
27-
'pf-v6-u-display-none pf-v6-u-display-table-cell-on-sm',
28-
'pf-v6-u-display-none pf-v6-u-display-table-cell-on-sm',
29-
'pf-v6-u-display-none pf-v6-u-display-table-cell-on-md',
30-
Kebab.columnClass,
41+
type ConfigMapsPageProps = {
42+
showTitle?: boolean;
43+
namespace?: string;
44+
selector?: any;
45+
};
46+
const tableColumnInfo = [
47+
{ id: 'name' },
48+
{ id: 'namespace' },
49+
{ id: 'size' },
50+
{ id: 'created' },
51+
{ id: 'actions' },
3152
];
3253

33-
const ConfigMapTableRow: React.FCC<{ obj: ConfigMapKind }> = ({ obj: configMap }) => {
34-
return (
35-
<>
36-
<TableData className={tableColumnClasses[0]}>
37-
<ResourceLink
38-
kind="ConfigMap"
39-
name={configMap.metadata.name}
40-
namespace={configMap.metadata.namespace}
41-
/>
42-
</TableData>
43-
<TableData className={css(tableColumnClasses[1], 'co-break-word')} columnID="namespace">
44-
<ResourceLink kind="Namespace" name={configMap.metadata.namespace} />
45-
</TableData>
46-
<TableData className={tableColumnClasses[2]}>
47-
{_.size(configMap.data) + _.size(configMap.binaryData)}
48-
</TableData>
49-
<TableData className={tableColumnClasses[3]}>
50-
<Timestamp timestamp={configMap.metadata.creationTimestamp} />
51-
</TableData>
52-
<TableData className={tableColumnClasses[4]}>
53-
<ResourceKebab actions={menuActions} kind={kind} resource={configMap} />
54-
</TableData>
55-
</>
56-
);
54+
const getDataViewRows: GetDataViewRows<ConfigMapKind, undefined> = (data, columns) => {
55+
return data.map(({ obj: configMap }) => {
56+
const dataSize = sorts.dataSize(configMap);
57+
const { name, namespace } = configMap.metadata;
58+
59+
const rowCells = {
60+
[tableColumnInfo[0].id]: {
61+
cell: (
62+
<ResourceLink
63+
groupVersionKind={getGroupVersionKindForModel(ConfigMapModel)}
64+
name={name}
65+
namespace={namespace}
66+
/>
67+
),
68+
props: getNameCellProps(name),
69+
},
70+
[tableColumnInfo[1].id]: {
71+
cell: <ResourceLink kind="Namespace" name={namespace} />,
72+
},
73+
[tableColumnInfo[2].id]: {
74+
cell: dataSize,
75+
},
76+
[tableColumnInfo[3].id]: {
77+
cell: <Timestamp timestamp={configMap.metadata.creationTimestamp} />,
78+
},
79+
[tableColumnInfo[4].id]: {
80+
cell: <ResourceKebab actions={menuActions} kind={kind} resource={configMap} />,
81+
props: {
82+
...actionsCellProps,
83+
},
84+
},
85+
};
86+
87+
return columns.map(({ id }) => {
88+
const cell = rowCells[id]?.cell || DASH;
89+
return {
90+
id,
91+
props: rowCells[id]?.props,
92+
cell,
93+
};
94+
});
95+
});
5796
};
5897

59-
export const ConfigMaps: React.FCC<Partial<TableProps>> = (props) => {
98+
const useConfigMapsColumns = () => {
6099
const { t } = useTranslation();
61-
const ConfigMapTableHeader = () => [
62-
{
63-
title: t('public~Name'),
64-
sortField: 'metadata.name',
65-
transforms: [sortable],
66-
props: { className: tableColumnClasses[0] },
67-
},
68-
{
69-
title: t('public~Namespace'),
70-
sortField: 'metadata.namespace',
71-
transforms: [sortable],
72-
props: { className: tableColumnClasses[1] },
73-
id: 'namespace',
74-
},
75-
{
76-
title: t('public~Size'),
77-
sortFunc: 'dataSize',
78-
transforms: [sortable],
79-
props: { className: tableColumnClasses[2] },
80-
},
81-
{
82-
title: t('public~Created'),
83-
sortField: 'metadata.creationTimestamp',
84-
transforms: [sortable],
85-
props: { className: tableColumnClasses[3] },
86-
},
87-
{
88-
title: '',
89-
props: { className: tableColumnClasses[4] },
90-
},
91-
];
100+
const columns: TableColumn<ConfigMapKind>[] = React.useMemo(() => {
101+
return [
102+
{
103+
title: t('public~Name'),
104+
id: tableColumnInfo[0].id,
105+
sort: 'metadata.name',
106+
props: {
107+
...cellIsStickyProps,
108+
modifier: 'nowrap',
109+
},
110+
},
111+
{
112+
title: t('public~Namespace'),
113+
id: tableColumnInfo[1].id,
114+
sort: 'metadata.namespace',
115+
props: {
116+
modifier: 'nowrap',
117+
},
118+
},
119+
{
120+
title: t('public~Size'),
121+
id: tableColumnInfo[2].id,
122+
sort: (data, direction) => data.sort(sortResourceByValue(direction, sorts.dataSize)),
123+
props: {
124+
modifier: 'nowrap',
125+
},
126+
},
127+
{
128+
title: t('public~Created'),
129+
id: tableColumnInfo[3].id,
130+
sort: 'metadata.creationTimestamp',
131+
props: {
132+
modifier: 'nowrap',
133+
},
134+
},
135+
{
136+
title: '',
137+
id: tableColumnInfo[4].id,
138+
props: {
139+
...cellIsStickyProps,
140+
},
141+
},
142+
];
143+
}, [t]);
144+
return columns;
145+
};
146+
147+
export const ConfigMapsList: React.FCC<ConfigMapsListProps> = ({ data, loaded, ...props }) => {
148+
const columns = useConfigMapsColumns();
92149

93150
return (
94-
<Table
95-
{...props}
96-
aria-label={t('public~ConfigMaps')}
97-
Header={ConfigMapTableHeader}
98-
Row={ConfigMapTableRow}
99-
virtualize
100-
/>
151+
<React.Suspense fallback={<LoadingBox />}>
152+
<ResourceDataView<ConfigMapKind>
153+
{...props}
154+
label={ConfigMapModel.labelPlural}
155+
data={data}
156+
loaded={loaded}
157+
columns={columns}
158+
initialFilters={initialFiltersDefault}
159+
getDataViewRows={getDataViewRows}
160+
hideColumnManagement={true}
161+
/>
162+
</React.Suspense>
101163
);
102164
};
165+
ConfigMapsList.displayName = 'ConfigMapsList';
103166

104-
export const ConfigMapsPage = (props) => {
167+
export const ConfigMapsPage: React.FC<ConfigMapsPageProps> = (props) => {
105168
const createProps = {
106169
to: `/k8s/ns/${props.namespace || 'default'}/configmaps/~new/form`,
107170
};
108171
return (
109-
<ListPage ListComponent={ConfigMaps} canCreate={true} createProps={createProps} {...props} />
172+
<ListPage
173+
{...props}
174+
kind={kind}
175+
ListComponent={ConfigMapsList}
176+
canCreate={true}
177+
createProps={createProps}
178+
omitFilterToolbar={true}
179+
/>
110180
);
111181
};
182+
ConfigMapsPage.displayName = 'ConfigMapsPage';
112183

113-
export const ConfigMapsDetailsPage = (props) => {
184+
export const ConfigMapsDetailsPage: React.FC = (props) => {
114185
const { t } = useTranslation();
115186
const ConfigMapDetails = ({ obj: configMap }: { obj: ConfigMapKind }) => {
116187
return (
@@ -138,8 +209,10 @@ export const ConfigMapsDetailsPage = (props) => {
138209
return (
139210
<DetailsPage
140211
{...props}
212+
kind={kind}
141213
menuActions={menuActions}
142214
pages={[navFactory.details(ConfigMapDetails), navFactory.editYaml()]}
143215
/>
144216
);
145217
};
218+
ConfigMapsDetailsPage.displayName = 'ConfigMapsDetailsPage';

0 commit comments

Comments
 (0)