Skip to content

Commit 7b31993

Browse files
aali309aali309
committed
Create a shared data view table component for the gitops plugin
Signed-off-by: Atif Ali <atali@redhat.com>
1 parent c6bb804 commit 7b31993

9 files changed

Lines changed: 313 additions & 284 deletions

File tree

‎src/gitops/components/application/ApplicationResourcesTab.tsx‎

Lines changed: 17 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import * as React from 'react';
22
import { RouteComponentProps } from 'react-router';
3-
import { useSearchParams } from 'react-router-dom-v5-compat';
43
import classNames from 'classnames';
54

65
import { useResourceActionsProvider } from '@gitops/hooks/useResourceActionsProvider';
@@ -26,16 +25,13 @@ import {
2625
PageSectionVariants,
2726
Title,
2827
} from '@patternfly/react-core';
29-
import DataView, { DataViewState } from '@patternfly/react-data-view/dist/esm/DataView';
30-
import DataViewTable, {
31-
DataViewTh,
32-
DataViewTr,
33-
} from '@patternfly/react-data-view/dist/esm/DataViewTable';
34-
import { useDataViewSort } from '@patternfly/react-data-view/dist/esm/Hooks';
28+
import { DataViewState } from '@patternfly/react-data-view/dist/esm/DataView';
29+
import { DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/esm/DataViewTable';
3530
import { CubesIcon } from '@patternfly/react-icons';
3631
import { Tbody, Td, Tr } from '@patternfly/react-table';
3732

3833
import { ArgoServer, getArgoServer } from '../../utils/gitops';
34+
import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
3935

4036
type ApplicationResourcesTabProps = RouteComponentProps<{
4137
ns: string;
@@ -68,40 +64,15 @@ const ApplicationResourcesTab: React.FC<ApplicationResourcesTabProps> = ({ obj }
6864
resources = [];
6965
}
7066

71-
let currentActiveState = null;
72-
if (resources.length === 0) {
73-
currentActiveState = DataViewState.empty;
74-
}
75-
76-
const COLUMNS_KEYS_INDEXES = React.useMemo(
77-
() => [
78-
{ key: 'name', index: 0 },
79-
{ key: 'namespace', index: 1 },
80-
{ key: 'sync-wave', index: 2 },
81-
{ key: 'sync-status', index: 3 },
82-
{ key: 'health-status', index: 4 },
83-
],
67+
const columnSortConfig = React.useMemo(
68+
() =>
69+
['name', 'namespace', 'sync-wave', 'sync-status', 'health-status', 'actions'].map((key) => ({
70+
key,
71+
})),
8472
[],
8573
);
8674

87-
const [searchParams, setSearchParams] = useSearchParams();
88-
const { sortBy, direction, onSort } = useDataViewSort({ searchParams, setSearchParams });
89-
const sortByIndex = React.useMemo(
90-
() => COLUMNS_KEYS_INDEXES.findIndex((item) => item.key === sortBy),
91-
[COLUMNS_KEYS_INDEXES, sortBy],
92-
);
93-
94-
const getSortParams = (columnIndex: number) => ({
95-
sortBy: {
96-
index: sortByIndex,
97-
direction,
98-
defaultDirection: 'asc' as const,
99-
},
100-
onSort: (_event: any, index: number, dir: 'asc' | 'desc') => {
101-
onSort(_event, COLUMNS_KEYS_INDEXES[index].key, dir);
102-
},
103-
columnIndex,
104-
});
75+
const { sortBy, direction, getSortParams } = useGitOpsDataViewSort(columnSortConfig);
10576
const columnsDV = useResourceColumnsDV(getSortParams);
10677
const sortedResources = React.useMemo(() => {
10778
return sortData(resources, sortBy, direction);
@@ -112,6 +83,7 @@ const ApplicationResourcesTab: React.FC<ApplicationResourcesTabProps> = ({ obj }
11283
const [data, filteredData, onFilterChange] = useListPageFilter(sortedResources, resourceFilters);
11384

11485
const memoizedFilteredResources = React.useMemo(() => [...filteredData], [filteredData]);
86+
const isEmptyResources = memoizedFilteredResources.length === 0;
11587

11688
const rows = useResourceRowsDV(
11789
memoizedFilteredResources,
@@ -156,9 +128,13 @@ const ApplicationResourcesTab: React.FC<ApplicationResourcesTabProps> = ({ obj }
156128
rowFilters={resourceFilters}
157129
onFilterChange={onFilterChange}
158130
/>
159-
<DataView activeState={currentActiveState}>
160-
<DataViewTable rows={rows} columns={columnsDV} bodyStates={empty && { empty }} />
161-
</DataView>
131+
<GitOpsDataViewTable
132+
rows={rows}
133+
columns={columnsDV}
134+
emptyState={empty}
135+
isEmpty={isEmptyResources}
136+
activeState={isEmptyResources ? DataViewState.empty : null}
137+
/>
162138
</>
163139
)}
164140
</PageSection>

‎src/gitops/components/application/ApplicationSourcesTab.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,12 @@ import {
1818
Title,
1919
Tooltip,
2020
} from '@patternfly/react-core';
21-
import DataView, { DataViewState } from '@patternfly/react-data-view/dist/esm/DataView';
22-
import DataViewTable, {
23-
DataViewTh,
24-
DataViewTr,
25-
} from '@patternfly/react-data-view/dist/esm/DataViewTable';
21+
import { DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/esm/DataViewTable';
2622
import { CubesIcon, GithubIcon } from '@patternfly/react-icons';
2723
import { Tbody, Td, Tr } from '@patternfly/react-table';
2824

2925
import ArgoCDLink from '../shared/ArgoCDLink/ArgoCDLink';
26+
import { GitOpsDataViewTable } from '../shared/DataView';
3027

3128
type ApplicationDetailsTabProps = RouteComponentProps<{
3229
ns: string;
@@ -198,7 +195,6 @@ export const SourceList: React.FC<SourceListProps> = ({ sources, obj, argoServer
198195
</Tr>
199196
</Tbody>
200197
);
201-
const currentActiveState = rows.length === 0 ? DataViewState.empty : null;
202198
return (
203199
<>
204200
<ArgoCDLink
@@ -218,9 +214,12 @@ export const SourceList: React.FC<SourceListProps> = ({ sources, obj, argoServer
218214
'&tab=parameters'
219215
}
220216
/>
221-
<DataView activeState={currentActiveState}>
222-
<DataViewTable rows={rows} columns={columns} bodyStates={empty && { empty }} />
223-
</DataView>
217+
<GitOpsDataViewTable
218+
rows={rows}
219+
columns={columns}
220+
emptyState={empty}
221+
isEmpty={rows.length === 0}
222+
/>
224223
</>
225224
);
226225
};

‎src/gitops/components/application/ApplicationSyncStatusTab.tsx‎

Lines changed: 16 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import * as React from 'react';
22
import { RouteComponentProps } from 'react-router';
3-
import { useSearchParams } from 'react-router-dom-v5-compat';
43
import classNames from 'classnames';
54

65
import { useResourceActionsProvider } from '@gitops/hooks/useResourceActionsProvider';
@@ -32,16 +31,13 @@ import {
3231
Popover,
3332
Title,
3433
} from '@patternfly/react-core';
35-
import DataView, { DataViewState } from '@patternfly/react-data-view/dist/esm/DataView';
36-
import DataViewTable, {
37-
DataViewTh,
38-
DataViewTr,
39-
} from '@patternfly/react-data-view/dist/esm/DataViewTable';
40-
import { useDataViewSort } from '@patternfly/react-data-view/dist/esm/Hooks';
34+
import { DataViewState } from '@patternfly/react-data-view/dist/esm/DataView';
35+
import { DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/esm/DataViewTable';
4136
import { CubesIcon } from '@patternfly/react-icons';
42-
import { Tbody, Td, Tr } from '@patternfly/react-table';
37+
import { Tbody, Td, ThProps, Tr } from '@patternfly/react-table';
4338

4439
import { DetailsDescriptionGroup } from '../shared/BaseDetailsSummary/BaseDetailsSummary';
40+
import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
4541

4642
import { ConditionsPopover } from './Conditions/ConditionsPopover';
4743

@@ -76,38 +72,12 @@ const ApplicationSyncStatusTab: React.FC<ApplicationSyncStatusTabProps> = ({ obj
7672
resources = [];
7773
}
7874

79-
let currentActiveState = null;
80-
if (resources.length === 0) {
81-
currentActiveState = DataViewState.empty;
82-
}
83-
84-
const COLUMNS_KEYS_INDEXES = React.useMemo(
85-
() => [
86-
{ key: 'name', index: 0 },
87-
{ key: 'namespace', index: 1 },
88-
{ key: 'status', index: 2 },
89-
{ key: 'hook', index: 3 },
90-
{ key: 'message', index: 4 },
91-
],
75+
const columnSortConfig = React.useMemo(
76+
() => ['name', 'namespace', 'status', 'hook', 'message', 'actions'].map((key) => ({ key })),
9277
[],
9378
);
94-
const [searchParams, setSearchParams] = useSearchParams();
95-
const { sortBy, direction, onSort } = useDataViewSort({ searchParams, setSearchParams });
96-
const sortByIndex = React.useMemo(
97-
() => COLUMNS_KEYS_INDEXES.findIndex((item) => item.key === sortBy),
98-
[COLUMNS_KEYS_INDEXES, sortBy],
99-
);
100-
const getSortParams = (columnIndex: number) => ({
101-
sortBy: {
102-
index: sortByIndex,
103-
direction,
104-
defaultDirection: 'asc' as const,
105-
},
106-
onSort: (_event: any, index: number, dir: 'asc' | 'desc') => {
107-
onSort(_event, COLUMNS_KEYS_INDEXES[index].key, dir);
108-
},
109-
columnIndex,
110-
});
79+
80+
const { sortBy, direction, getSortParams } = useGitOpsDataViewSort(columnSortConfig);
11181
const columnsDV = useResourceColumnsDV(getSortParams);
11282
const sortedResources = React.useMemo(() => {
11383
return sortData(resources, sortBy, direction);
@@ -296,9 +266,13 @@ const ApplicationSyncStatusTab: React.FC<ApplicationSyncStatusTabProps> = ({ obj
296266
<Title headingLevel="h2" className="co-section-heading">
297267
{t('Resources Last Synced')}
298268
</Title>
299-
<DataView activeState={currentActiveState}>
300-
<DataViewTable rows={rows} columns={columnsDV} bodyStates={empty && { empty }} />
301-
</DataView>
269+
<GitOpsDataViewTable
270+
rows={rows}
271+
columns={columnsDV}
272+
emptyState={empty}
273+
isEmpty={sortedResources.length === 0}
274+
activeState={resources.length === 0 ? DataViewState.empty : null}
275+
/>
302276
</PageSection>
303277
</div>
304278
);
@@ -349,7 +323,7 @@ const sortData = (
349323
});
350324
};
351325

352-
export const useResourceColumnsDV = (getSortParams) => {
326+
export const useResourceColumnsDV = (getSortParams: (columnIndex: number) => ThProps['sort']) => {
353327
const columns: DataViewTh[] = [
354328
{
355329
cell: t('plugin__gitops-plugin~Name'),

‎src/gitops/components/application/History/History.tsx‎

Lines changed: 14 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import * as React from 'react';
22
import { useTranslation } from 'react-i18next';
3-
import { useSearchParams } from 'react-router-dom-v5-compat';
43
import ExternalLink from 'src/components/utils/ExternalLink/ExternalLink';
54

65
import ArgoCDLink from '@gitops/components/shared/ArgoCDLink/ArgoCDLink';
@@ -10,14 +9,11 @@ import { repoUrl } from '@gitops/utils/urls';
109
import { ApplicationHistory, ApplicationKind } from '@gitops-models/ApplicationModel';
1110
import { Timestamp, useK8sModel } from '@openshift-console/dynamic-plugin-sdk';
1211
import { EmptyState, EmptyStateBody } from '@patternfly/react-core';
13-
import DataView, { DataViewState } from '@patternfly/react-data-view/dist/esm/DataView';
14-
import DataViewTable, {
15-
DataViewTh,
16-
DataViewTr,
17-
} from '@patternfly/react-data-view/dist/esm/DataViewTable';
18-
import { useDataViewSort } from '@patternfly/react-data-view/dist/esm/Hooks';
12+
import { DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/esm/DataViewTable';
1913
import { CubesIcon } from '@patternfly/react-icons';
20-
import { Tbody, Td, Tr } from '@patternfly/react-table';
14+
import { Tbody, Td, ThProps, Tr } from '@patternfly/react-table';
15+
16+
import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../../shared/DataView';
2117

2218
import './History.scss';
2319

@@ -28,34 +24,12 @@ interface HistoryListProps {
2824

2925
const HistoryList: React.FC<HistoryListProps> = ({ history, obj }) => {
3026
const { t } = useTranslation('plugin__gitops-plugin');
31-
const COLUMNS_KEYS_INDEXES = React.useMemo(
32-
() => [
33-
{ key: 'id', index: 0 },
34-
{ key: 'started-at', index: 1 },
35-
{ key: 'deployed-at', index: 2 },
36-
{ key: 'initiated-by', index: 3 },
37-
{ key: 'revision', index: 4 },
38-
],
27+
const columnSortConfig = React.useMemo(
28+
() => ['id', 'started-at', 'deployed-at', 'initiated-by', 'revision'].map((key) => ({ key })),
3929
[],
4030
);
4131

42-
const [searchParams, setSearchParams] = useSearchParams();
43-
const { sortBy, direction, onSort } = useDataViewSort({ searchParams, setSearchParams });
44-
const sortByIndex = React.useMemo(
45-
() => COLUMNS_KEYS_INDEXES.findIndex((item) => item.key === sortBy),
46-
[COLUMNS_KEYS_INDEXES, sortBy],
47-
);
48-
const getSortParams = (columnIndex: number) => ({
49-
sortBy: {
50-
index: sortByIndex,
51-
direction,
52-
defaultDirection: 'asc' as const,
53-
},
54-
onSort: (_event: any, index: number, dir: 'asc' | 'desc') => {
55-
onSort(_event, COLUMNS_KEYS_INDEXES[index].key, dir);
56-
},
57-
columnIndex,
58-
});
32+
const { sortBy, direction, getSortParams } = useGitOpsDataViewSort(columnSortConfig);
5933
const columnsDV = useColumnsDV(getSortParams);
6034

6135
const sortedHistory = React.useMemo(() => {
@@ -64,11 +38,6 @@ const HistoryList: React.FC<HistoryListProps> = ({ history, obj }) => {
6438

6539
const rows = useRowsDV(sortedHistory, obj);
6640

67-
let currentActiveState = null;
68-
if (rows.length === 0) {
69-
currentActiveState = DataViewState.empty;
70-
}
71-
7241
const [model] = useK8sModel({ group: 'route.openshift.io', version: 'v1', kind: 'Route' });
7342
const [argoServer, setArgoServer] = React.useState<ArgoServer>({ host: '', protocol: '' });
7443

@@ -117,9 +86,12 @@ const HistoryList: React.FC<HistoryListProps> = ({ history, obj }) => {
11786
'&view=tree&resource=&operation=false&rollback=0'
11887
}
11988
/>
120-
<DataView activeState={currentActiveState}>
121-
<DataViewTable rows={rows} columns={columnsDV} bodyStates={empty && { empty }} />
122-
</DataView>
89+
<GitOpsDataViewTable
90+
rows={rows}
91+
columns={columnsDV}
92+
emptyState={empty}
93+
isEmpty={rows.length === 0}
94+
/>
12395
</div>
12496
);
12597
};
@@ -223,7 +195,7 @@ const useRowsDV = (history: ApplicationHistory[], app: ApplicationKind): DataVie
223195
return rows.reverse();
224196
};
225197

226-
const useColumnsDV = (getSortParams) => {
198+
const useColumnsDV = (getSortParams: (columnIndex: number) => ThProps['sort']) => {
227199
const { t } = useTranslation('plugin__gitops-plugin');
228200
const columns: DataViewTh[] = [
229201
{

0 commit comments

Comments
 (0)