Skip to content

Commit 9b99a0d

Browse files
keithchongkeithchong
authored
Merge pull request #274 from aali309/paginationPart2-release-4.18
Add pagination to the other tables under details tabs to release branch 4.18
2 parents ff3f476 + 67aab8e commit 9b99a0d

9 files changed

Lines changed: 257 additions & 30 deletions

File tree

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

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,11 @@ import { DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/esm/Dat
2727
import { CubesIcon } from '@patternfly/react-icons';
2828
import { Tbody, Td, Tr } from '@patternfly/react-table';
2929

30-
import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
30+
import {
31+
GitOpsDataViewTable,
32+
useGitOpsDataViewSort,
33+
useGitOpsListPagePagination,
34+
} from '../shared/DataView';
3135
import ResourceActionsCell from '../shared/ResourceActionsCell/ResourceActionsCell';
3236

3337
import { ApplicationGraphView } from './graph/ApplicationGraphView';
@@ -59,7 +63,8 @@ const ApplicationResourcesView: React.FC<ApplicationResourcesViewProps> = ({
5963
[],
6064
);
6165

62-
const { sortBy, direction, getSortParams } = useGitOpsDataViewSort(columnSortConfig);
66+
const { searchParams, sortBy, direction, getSortParams } =
67+
useGitOpsDataViewSort(columnSortConfig);
6368
const columnsDV = useResourceColumnsDV(getSortParams);
6469
const sortedResources = React.useMemo(
6570
() => sortData(resources, sortBy, direction),
@@ -81,8 +86,18 @@ const ApplicationResourcesView: React.FC<ApplicationResourcesViewProps> = ({
8186
resourceFilters,
8287
);
8388

89+
const {
90+
pagination,
91+
pagedItems: pagedResources,
92+
itemCount,
93+
} = useGitOpsListPagePagination({
94+
items: filteredResources,
95+
namespace: application?.metadata?.namespace,
96+
searchParams,
97+
});
98+
8499
const isEmptyResources = filteredResources.length === 0;
85-
const rows = useResourceRowsDV(filteredResources, application, argoBaseURL);
100+
const rows = useResourceRowsDV(pagedResources, application, argoBaseURL);
86101
const isListView = viewType === ApplicationResourcesViewType.list;
87102

88103
const empty = (
@@ -148,6 +163,8 @@ const ApplicationResourcesView: React.FC<ApplicationResourcesViewProps> = ({
148163
emptyState={empty}
149164
isEmpty={isEmptyResources}
150165
activeState={isEmptyResources ? DataViewState.empty : null}
166+
itemCount={itemCount}
167+
pagination={pagination}
151168
/>
152169
) : (
153170
<div className="gitops-graph-list-view__graph">

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

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

45
import { useArgoServer } from '@gitops/hooks/useArgoServer';
56
import { ApplicationKind, ApplicationSource } from '@gitops/models/ApplicationModel';
@@ -25,7 +26,7 @@ import { CubesIcon, GithubIcon } from '@patternfly/react-icons';
2526
import { Tbody, Td, Tr } from '@patternfly/react-table';
2627

2728
import ArgoCDLink from '../shared/ArgoCDLink/ArgoCDLink';
28-
import { GitOpsDataViewTable } from '../shared/DataView';
29+
import { GitOpsDataViewTable, useGitOpsListPagePagination } from '../shared/DataView';
2930

3031
type ApplicationDetailsTabProps = RouteComponentProps<{
3132
ns: string;
@@ -183,7 +184,17 @@ export const useRowsDV = (sources: ApplicationSource[]): DataViewTr[] => {
183184

184185
export const SourceList: React.FC<SourceListProps> = ({ sources, obj, argoServer }) => {
185186
const columns = useColumnsDV();
186-
const rows = useRowsDV(sources);
187+
const [searchParams] = useSearchParams();
188+
const {
189+
pagination,
190+
pagedItems: pagedSources,
191+
itemCount,
192+
} = useGitOpsListPagePagination({
193+
items: sources,
194+
namespace: obj?.metadata?.namespace,
195+
searchParams,
196+
});
197+
const rows = useRowsDV(pagedSources);
187198
const argoUrl = getApplicationArgoUrl(argoServer, obj);
188199
const empty = (
189200
<Tbody>
@@ -222,7 +233,9 @@ export const SourceList: React.FC<SourceListProps> = ({ sources, obj, argoServer
222233
rows={rows}
223234
columns={columns}
224235
emptyState={empty}
225-
isEmpty={rows.length === 0}
236+
isEmpty={sources.length === 0}
237+
itemCount={itemCount}
238+
pagination={pagination}
226239
/>
227240
</>
228241
);

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

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,11 @@ import { CubesIcon } from '@patternfly/react-icons';
3636
import { Tbody, Td, ThProps, Tr } from '@patternfly/react-table';
3737

3838
import { DetailsDescriptionGroup } from '../shared/BaseDetailsSummary/BaseDetailsSummary';
39-
import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
39+
import {
40+
GitOpsDataViewTable,
41+
useGitOpsDataViewSort,
42+
useGitOpsListPagePagination,
43+
} from '../shared/DataView';
4044
import ResourceActionsCell from '../shared/ResourceActionsCell/ResourceActionsCell';
4145

4246
import { ConditionsPopover } from './Conditions/ConditionsPopover';
@@ -64,13 +68,24 @@ const ApplicationSyncStatusTab: React.FC<ApplicationSyncStatusTabProps> = ({ obj
6468
[],
6569
);
6670

67-
const { sortBy, direction, getSortParams } = useGitOpsDataViewSort(columnSortConfig);
71+
const { searchParams, sortBy, direction, getSortParams } =
72+
useGitOpsDataViewSort(columnSortConfig);
6873
const columnsDV = useResourceColumnsDV(getSortParams);
6974
const sortedResources = React.useMemo(() => {
7075
return sortData(resources, sortBy, direction);
7176
}, [resources, sortBy, direction]);
7277

73-
const rows = useResourceRowsDV(sortedResources, obj, argoUrl);
78+
const {
79+
pagination,
80+
pagedItems: pagedResources,
81+
itemCount,
82+
} = useGitOpsListPagePagination({
83+
items: sortedResources,
84+
namespace: obj?.metadata?.namespace,
85+
searchParams,
86+
});
87+
88+
const rows = useResourceRowsDV(pagedResources, obj, argoUrl);
7489

7590
const empty = (
7691
<Tbody>
@@ -252,6 +267,8 @@ const ApplicationSyncStatusTab: React.FC<ApplicationSyncStatusTabProps> = ({ obj
252267
emptyState={empty}
253268
isEmpty={sortedResources.length === 0}
254269
activeState={resources.length === 0 ? DataViewState.empty : null}
270+
itemCount={itemCount}
271+
pagination={pagination}
255272
/>
256273
</PageSection>
257274
</div>

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

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,11 @@ import { DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/esm/Dat
1919
import { CubesIcon } from '@patternfly/react-icons';
2020
import { Tbody, Td, ThProps, Tr } from '@patternfly/react-table';
2121

22-
import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../../shared/DataView';
22+
import {
23+
GitOpsDataViewTable,
24+
useGitOpsDataViewSort,
25+
useGitOpsListPagePagination,
26+
} from '../../shared/DataView';
2327

2428
import './History.scss';
2529

@@ -35,14 +39,26 @@ const HistoryList: React.FC<HistoryListProps> = ({ history, obj }) => {
3539
[],
3640
);
3741

38-
const { sortBy, direction, getSortParams } = useGitOpsDataViewSort(columnSortConfig);
42+
const { searchParams, sortBy, direction, getSortParams } =
43+
useGitOpsDataViewSort(columnSortConfig);
3944
const columnsDV = useColumnsDV(getSortParams);
4045

41-
const sortedHistory = React.useMemo(() => {
42-
return sortData(history, sortBy, direction);
43-
}, [history, sortBy, direction]);
46+
const displayHistory = React.useMemo(
47+
() => sortData([...history].reverse(), sortBy, direction),
48+
[history, sortBy, direction],
49+
);
50+
51+
const {
52+
pagination,
53+
pagedItems: pagedHistory,
54+
itemCount,
55+
} = useGitOpsListPagePagination({
56+
items: displayHistory,
57+
namespace: obj?.metadata?.namespace,
58+
searchParams,
59+
});
4460

45-
const rows = useRowsDV(sortedHistory, obj);
61+
const rows = useRowsDV(pagedHistory, obj);
4662

4763
const argoServer = useArgoServer(obj);
4864
const argoUrl = getApplicationArgoUrl(argoServer, obj);
@@ -85,7 +101,9 @@ const HistoryList: React.FC<HistoryListProps> = ({ history, obj }) => {
85101
rows={rows}
86102
columns={columnsDV}
87103
emptyState={empty}
88-
isEmpty={rows.length === 0}
104+
isEmpty={displayHistory.length === 0}
105+
itemCount={itemCount}
106+
pagination={pagination}
89107
/>
90108
</div>
91109
);
@@ -187,7 +205,7 @@ const useRowsDV = (history: ApplicationHistory[], app: ApplicationKind): DataVie
187205
},
188206
]);
189207
});
190-
return rows.reverse();
208+
return rows;
191209
};
192210

193211
const useColumnsDV = (getSortParams: (columnIndex: number) => ThProps['sort']) => {

‎src/gitops/components/imageupdater/ImageUpdaterRecentUpdatesTab.tsx‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,11 @@ import { Tbody, Td, ThProps, Tr } from '@patternfly/react-table';
1717

1818
import { ImageUpdaterKind, ImageUpdaterRecentUpdate } from '../../models/ImageUpdaterModel';
1919
import { useGitOpsTranslation } from '../../utils/hooks/useGitOpsTranslation';
20-
import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
20+
import {
21+
GitOpsDataViewTable,
22+
useGitOpsDataViewSort,
23+
useGitOpsListPagePagination,
24+
} from '../shared/DataView';
2125

2226
type ImageUpdaterRecentUpdatesTabProps = RouteComponentProps<{ ns: string; name: string }> & {
2327
obj?: ImageUpdaterKind;
@@ -34,7 +38,8 @@ const ImageUpdaterRecentUpdatesTab: React.FC<ImageUpdaterRecentUpdatesTabProps>
3438
[],
3539
);
3640

37-
const { sortBy, direction, getSortParams } = useGitOpsDataViewSort(columnSortConfig);
41+
const { searchParams, sortBy, direction, getSortParams } =
42+
useGitOpsDataViewSort(columnSortConfig);
3843

3944
const columnsDV = useColumnsDV(getSortParams, t);
4045

@@ -43,7 +48,17 @@ const ImageUpdaterRecentUpdatesTab: React.FC<ImageUpdaterRecentUpdatesTabProps>
4348
return sortData(updates, sortBy, direction);
4449
}, [obj, sortBy, direction]);
4550

46-
const rows = useRowsDV(sortedUpdates);
51+
const {
52+
pagination,
53+
pagedItems: pagedUpdates,
54+
itemCount,
55+
} = useGitOpsListPagePagination({
56+
items: sortedUpdates,
57+
namespace: obj?.metadata?.namespace,
58+
searchParams,
59+
});
60+
61+
const rows = useRowsDV(pagedUpdates);
4762

4863
if (!obj) {
4964
return null;
@@ -81,7 +96,9 @@ const ImageUpdaterRecentUpdatesTab: React.FC<ImageUpdaterRecentUpdatesTabProps>
8196
rows={rows}
8297
columns={columnsDV}
8398
emptyState={empty}
84-
isEmpty={rows.length === 0}
99+
isEmpty={sortedUpdates.length === 0}
100+
itemCount={itemCount}
101+
pagination={pagination}
85102
/>
86103
</PageSection>
87104
</div>

‎src/gitops/components/project/ProjectRolesTab.tsx‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,11 @@ import { AppProjectKind, Role } from '../../models/AppProjectModel';
2121
import { ArgoServer, getArgoServerForProject } from '../../utils/gitops';
2222
import { useGitOpsTranslation } from '../../utils/hooks/useGitOpsTranslation';
2323
import { ArgoCDLink } from '../shared/ArgoCDLink/ArgoCDLink';
24-
import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
24+
import {
25+
GitOpsDataViewTable,
26+
useGitOpsDataViewSort,
27+
useGitOpsListPagePagination,
28+
} from '../shared/DataView';
2529

2630
/**
2731
* Parses an Argo CD policy string and returns a formatted React element for tooltip
@@ -104,13 +108,24 @@ const ProjectRolesTab: React.FC<ProjectRolesTabProps> = ({ obj }) => {
104108
[],
105109
);
106110

107-
const { sortBy, direction, getSortParams } = useGitOpsDataViewSort(columnSortConfig);
111+
const { searchParams, sortBy, direction, getSortParams } =
112+
useGitOpsDataViewSort(columnSortConfig);
108113
const columnsDV = useRolesColumnsDV(getSortParams, t);
109114
const sortedRoles = React.useMemo(() => {
110115
return sortRolesData(roles, sortBy, direction);
111116
}, [roles, sortBy, direction]);
112117

113-
const rows = useRolesRowsDV(sortedRoles, t);
118+
const {
119+
pagination,
120+
pagedItems: pagedRoles,
121+
itemCount,
122+
} = useGitOpsListPagePagination({
123+
items: sortedRoles,
124+
namespace: obj?.metadata?.namespace,
125+
searchParams,
126+
});
127+
128+
const rows = useRolesRowsDV(pagedRoles, t);
114129

115130
if (!obj) return null;
116131

@@ -149,6 +164,8 @@ const ProjectRolesTab: React.FC<ProjectRolesTabProps> = ({ obj }) => {
149164
rows={rows}
150165
isEmpty={roles.length === 0}
151166
emptyState={empty}
167+
itemCount={itemCount}
168+
pagination={pagination}
152169
/>
153170
</PageSection>
154171
);

‎src/gitops/components/project/ProjectSyncWindowsTab.tsx‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,11 @@ import { AppProjectKind, SyncWindow } from '../../models/AppProjectModel';
2020
import { ArgoServer, getArgoServerForProject } from '../../utils/gitops';
2121
import { useGitOpsTranslation } from '../../utils/hooks/useGitOpsTranslation';
2222
import { ArgoCDLink } from '../shared/ArgoCDLink/ArgoCDLink';
23-
import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
23+
import {
24+
GitOpsDataViewTable,
25+
useGitOpsDataViewSort,
26+
useGitOpsListPagePagination,
27+
} from '../shared/DataView';
2428

2529
type ProjectSyncWindowsTabProps = RouteComponentProps<{ ns: string; name: string }> & {
2630
obj?: AppProjectKind;
@@ -60,13 +64,24 @@ const ProjectSyncWindowsTab: React.FC<ProjectSyncWindowsTabProps> = ({ obj }) =>
6064
[],
6165
);
6266

63-
const { sortBy, direction, getSortParams } = useGitOpsDataViewSort(columnSortConfig);
67+
const { searchParams, sortBy, direction, getSortParams } =
68+
useGitOpsDataViewSort(columnSortConfig);
6469
const columnsDV = useSyncWindowsColumnsDV(getSortParams, t);
6570
const sortedSyncWindows = React.useMemo(() => {
6671
return sortSyncWindowsData(syncWindows, sortBy, direction);
6772
}, [syncWindows, sortBy, direction]);
6873

69-
const rows = useSyncWindowsRowsDV(sortedSyncWindows, t);
74+
const {
75+
pagination,
76+
pagedItems: pagedSyncWindows,
77+
itemCount,
78+
} = useGitOpsListPagePagination({
79+
items: sortedSyncWindows,
80+
namespace: obj?.metadata?.namespace,
81+
searchParams,
82+
});
83+
84+
const rows = useSyncWindowsRowsDV(pagedSyncWindows, t);
7085

7186
if (!obj) return null;
7287

@@ -105,6 +120,8 @@ const ProjectSyncWindowsTab: React.FC<ProjectSyncWindowsTabProps> = ({ obj }) =>
105120
rows={rows}
106121
isEmpty={syncWindows.length === 0}
107122
emptyState={empty}
123+
itemCount={itemCount}
124+
pagination={pagination}
108125
/>
109126
</PageSection>
110127
);

0 commit comments

Comments
 (0)