Skip to content

Commit efb41c1

Browse files
Liam-ZhaoLiam-Zhao
authored
fix: change cluster page pagination (#304)
1 parent 49933f5 commit efb41c1

File tree

4 files changed

+88
-119
lines changed

4 files changed

+88
-119
lines changed

‎src/components/clusters/index.tsx‎

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ import {
1818
} from '@mui/material';
1919
import SearchIcon from '@mui/icons-material/Search';
2020
import AddIcon from '@mui/icons-material/Add';
21-
import { getSchedulers, getSeedPeers, getClusters } from '../../lib/api';
21+
import { getSchedulers, getSeedPeers, getClusters, getClustersResponse } from '../../lib/api';
2222
import styles from './index.module.css';
23-
import { useEffect, useState } from 'react';
24-
import { getDatetime } from '../../lib/utils';
23+
import { useEffect, useMemo, useState } from 'react';
24+
import { getDatetime, getPaginatedList } from '../../lib/utils';
2525
import { createTheme, ThemeProvider } from '@mui/material/styles';
2626
import MoreTimeIcon from '@mui/icons-material/MoreTime';
2727
import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight';
@@ -53,26 +53,14 @@ export default function Clusters() {
5353
const [errorMessageText, setErrorMessageText] = useState('');
5454
const [isLoading, setIsLoading] = useState(true);
5555
const [clusterIsLoading, setClusterIsLoading] = useState(true);
56-
const [page, setPage] = useState(1);
56+
const [clusterPage, setClusterPage] = useState(1);
5757
const [totalPages, setTotalPages] = useState<number>(1);
5858
const [searchClusters, setSearchClusters] = useState('');
59-
const [cluster, setCluster] = useState([{ name: '' }]);
59+
const [clusterCount, setClusterCount] = useState<getClustersResponse[]>([]);
60+
const [cluster, setCluster] = useState<getClustersResponse[]>([]);
6061
const [scheduler, setScheduler] = useState([{}]);
6162
const [seedPeer, setSeedPeer] = useState([{}]);
62-
const [allClusters, setAllClusters] = useState([
63-
{
64-
id: 0,
65-
name: '',
66-
bio: '',
67-
scopes: {
68-
idc: '',
69-
location: '',
70-
cidrs: [''],
71-
},
72-
created_at: '',
73-
is_default: false,
74-
},
75-
]);
63+
const [allClusters, setAllClusters] = useState<getClustersResponse[]>([]);
7664
const navigate = useNavigate();
7765

7866
useEffect(() => {
@@ -81,18 +69,16 @@ export default function Clusters() {
8169
setIsLoading(true);
8270
setClusterIsLoading(true);
8371

84-
const [cluster, scheduler, seedPeer, allClusters] = await Promise.all([
72+
const [cluster, scheduler, seedPeer] = await Promise.all([
8573
getClusters({ page: 1, per_page: MAX_PAGE_SIZE }),
8674
getSchedulers({ page: 1, per_page: MAX_PAGE_SIZE }),
8775
getSeedPeers({ page: 1, per_page: MAX_PAGE_SIZE }),
88-
getClusters({ page: page, per_page: DEFAULT_PAGE_SIZE }),
8976
]);
9077

91-
setCluster(cluster.data);
78+
setCluster(cluster);
9279
setScheduler(scheduler);
9380
setSeedPeer(seedPeer);
94-
setTotalPages(allClusters.total_page || 1);
95-
setAllClusters(allClusters.data);
81+
setClusterCount(cluster);
9682
setIsLoading(false);
9783
setClusterIsLoading(false);
9884
} catch (error) {
@@ -103,10 +89,29 @@ export default function Clusters() {
10389
}
10490
}
10591
})();
106-
}, [page]);
92+
}, []);
93+
94+
useMemo(() => {
95+
cluster.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
96+
cluster.sort((a, b) => {
97+
if (a.is_default && !b.is_default) {
98+
return -1;
99+
} else if (!a.is_default && b.is_default) {
100+
return 1;
101+
} else {
102+
return 0;
103+
}
104+
});
105+
106+
const totalPage = Math.ceil(cluster.length / DEFAULT_PAGE_SIZE);
107+
const currentPageData = getPaginatedList(cluster, clusterPage, DEFAULT_PAGE_SIZE);
108+
109+
setTotalPages(totalPage);
110+
setAllClusters(currentPageData);
111+
}, [cluster, clusterPage]);
107112

108113
const numberOfDefaultClusters =
109-
Array.isArray(cluster) && cluster?.filter((item: any) => item?.is_default === true).length;
114+
Array.isArray(clusterCount) && clusterCount?.filter((item: any) => item?.is_default === true).length;
110115

111116
const numberOfActiveSchedulers =
112117
Array.isArray(scheduler) && scheduler?.filter((item: any) => item?.state === 'active').length;
@@ -117,9 +122,12 @@ export default function Clusters() {
117122
const searchCluster = async (event: any) => {
118123
try {
119124
setClusterIsLoading(true);
120-
const cluster = await getClusters({ page: 1, per_page: DEFAULT_PAGE_SIZE, name: searchClusters });
121-
setAllClusters(cluster.data);
122-
setTotalPages(cluster.total_page || 1);
125+
const cluster = searchClusters
126+
? await getClusters({ page: 1, per_page: MAX_PAGE_SIZE, name: searchClusters })
127+
: await getClusters({ page: 1, per_page: MAX_PAGE_SIZE });
128+
129+
setCluster(cluster);
130+
setClusterPage(1);
123131
setClusterIsLoading(false);
124132
} catch (error) {
125133
if (error instanceof Error) {
@@ -193,7 +201,7 @@ export default function Clusters() {
193201
<Box marginLeft="0.6rem">
194202
<Box sx={{ display: 'flex', alignItems: 'center' }}>
195203
<Typography variant="h5" sx={{ mr: '1rem' }}>
196-
{isLoading ? <Skeleton sx={{ width: '1rem' }} /> : cluster?.length || ''}
204+
{isLoading ? <Skeleton sx={{ width: '1rem' }} /> : clusterCount?.length || ''}
197205
</Typography>
198206
<span>number of clusters</span>
199207
</Box>
@@ -292,7 +300,7 @@ export default function Clusters() {
292300
onInputChange={(_event, newInputValue) => {
293301
setSearchClusters(newInputValue);
294302
}}
295-
options={(Array.isArray(cluster) && cluster.map((option) => option?.name)) || ['']}
303+
options={(Array.isArray(clusterCount) && clusterCount.map((option) => option?.name)) || ['']}
296304
renderInput={(params) => <TextField {...params} label="Search" />}
297305
/>
298306
</Stack>
@@ -399,9 +407,9 @@ export default function Clusters() {
399407
<Box display="flex" justifyContent="flex-end" sx={{ marginTop: theme.spacing(2) }}>
400408
<Pagination
401409
count={totalPages}
402-
page={page}
410+
page={clusterPage}
403411
onChange={(_event: any, newPage: number) => {
404-
setPage(newPage);
412+
setClusterPage(newPage);
405413
}}
406414
color="primary"
407415
size="small"

‎src/components/clusters/show.tsx‎

Lines changed: 43 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,8 @@ export default function ShowCluster() {
7474
const [searchSchedulers, setSearchSchedulers] = useState('');
7575
const [searchSeedPeers, setSearchSeedPeer] = useState('');
7676
const [scheduler, setScheduler] = useState<getSchedulersResponse[]>([]);
77+
const [schedulerCount, setSchedulerCount] = useState<getSchedulersResponse[]>([]);
78+
const [seedPeerCount, setSeedPeerCount] = useState<getSeedPeersResponse[]>([]);
7779
const [seedPeer, setSeedPeer] = useState<getSeedPeersResponse[]>([]);
7880
const [cluster, setCluster] = useState({
7981
id: 0,
@@ -141,6 +143,7 @@ export default function ShowCluster() {
141143
});
142144

143145
setSeedPeer(seedPeer);
146+
setSeedPeerCount(seedPeer);
144147
}
145148

146149
if (cluster.scheduler_cluster_id !== 0) {
@@ -151,6 +154,7 @@ export default function ShowCluster() {
151154
});
152155

153156
setScheduler(scheduler);
157+
setSchedulerCount(scheduler);
154158
}
155159

156160
setSchedulerTableIsLoading(false);
@@ -168,7 +172,6 @@ export default function ShowCluster() {
168172
}, [params.id]);
169173

170174
useMemo(() => {
171-
const totalPage = Math.ceil(scheduler.length / DEFAULT_SCHEDULER_TABLE_PAGE_SIZE);
172175
scheduler.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
173176
scheduler.sort((a, b) => {
174177
if (a.state < b.state) {
@@ -179,7 +182,7 @@ export default function ShowCluster() {
179182
return 0;
180183
}
181184
});
182-
185+
const totalPage = Math.ceil(scheduler.length / DEFAULT_SCHEDULER_TABLE_PAGE_SIZE);
183186
const currentPageData = getPaginatedList(scheduler, schedulerPage, DEFAULT_SCHEDULER_TABLE_PAGE_SIZE);
184187

185188
if (currentPageData.length === 0 && schedulerPage > 1) {
@@ -191,8 +194,6 @@ export default function ShowCluster() {
191194
}, [scheduler, schedulerPage]);
192195

193196
useMemo(() => {
194-
const totalPage = Math.ceil(seedPeer.length / DEFAULT_SEED_PEER_TABLE_PAGE_SIZE);
195-
196197
seedPeer.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
197198
seedPeer.sort((a, b) => {
198199
if (a.state < b.state) {
@@ -203,7 +204,7 @@ export default function ShowCluster() {
203204
return 0;
204205
}
205206
});
206-
207+
const totalPage = Math.ceil(seedPeer.length / DEFAULT_SEED_PEER_TABLE_PAGE_SIZE);
207208
const currentPageData = getPaginatedList(seedPeer, seedPeerPage, DEFAULT_SEED_PEER_TABLE_PAGE_SIZE);
208209

209210
if (currentPageData?.length === 0 && seedPeerPage > 1) {
@@ -215,10 +216,10 @@ export default function ShowCluster() {
215216
}, [seedPeer, seedPeerPage]);
216217

217218
const numberOfActiveSchedulers =
218-
Array.isArray(scheduler) && scheduler?.filter((item: any) => item?.state === 'active').length;
219+
Array.isArray(schedulerCount) && schedulerCount?.filter((item: any) => item?.state === 'active').length;
219220

220221
const numberOfActiveSeedPeers =
221-
Array.isArray(seedPeer) && seedPeer?.filter((item: any) => item?.state === 'active').length;
222+
Array.isArray(seedPeerCount) && seedPeerCount?.filter((item: any) => item?.state === 'active').length;
222223

223224
const handleClose = (_event: any, reason?: string) => {
224225
if (reason === 'clickaway') {
@@ -282,6 +283,7 @@ export default function ShowCluster() {
282283
});
283284

284285
setScheduler(scheduler);
286+
setSchedulerCount(scheduler);
285287
setDeleteLoadingButton(false);
286288
}
287289
} catch (error) {
@@ -315,6 +317,7 @@ export default function ShowCluster() {
315317
});
316318

317319
setSeedPeer(seedPeer);
320+
setSeedPeerCount(seedPeer);
318321
setDeleteLoadingButton(false);
319322
}
320323
} catch (error) {
@@ -344,39 +347,24 @@ export default function ShowCluster() {
344347

345348
const searchScheduler = async () => {
346349
try {
350+
setSchedulerTableIsLoading(true);
351+
347352
const schedulers = searchSchedulers
348-
? scheduler.filter((item) => {
349-
return item.host_name === searchSchedulers;
353+
? await getSchedulers({
354+
scheduler_cluster_id: String(cluster.scheduler_cluster_id),
355+
page: 1,
356+
per_page: MAX_PAGE_SIZE,
357+
host_name: searchSchedulers,
350358
})
351-
: scheduler;
352-
353-
if (searchSchedulers) {
354-
const totalPage = Math.ceil(schedulers.length / DEFAULT_SCHEDULER_TABLE_PAGE_SIZE);
355-
356-
setSchedulerTotalPages(totalPage);
357-
setAllSchedlers(schedulers);
358-
} else {
359-
const totalPage = Math.ceil(scheduler.length / DEFAULT_SCHEDULER_TABLE_PAGE_SIZE);
360-
scheduler.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
361-
scheduler.sort((a, b) => {
362-
if (a.state < b.state) {
363-
return -1;
364-
} else if (a.state > b.state) {
365-
return 1;
366-
} else {
367-
return 0;
368-
}
369-
});
370-
const currentPageData = getPaginatedList(scheduler, schedulerPage, DEFAULT_SCHEDULER_TABLE_PAGE_SIZE);
371-
372-
if (currentPageData.length === 0 && schedulerPage > 1) {
373-
setSchedulerPage(schedulerPage - 1);
374-
}
359+
: await getSchedulers({
360+
scheduler_cluster_id: String(cluster.scheduler_cluster_id),
361+
page: 1,
362+
per_page: MAX_PAGE_SIZE,
363+
});
375364

376-
setSchedulerPage(1);
377-
setSchedulerTotalPages(totalPage);
378-
setAllSchedlers(currentPageData);
379-
}
365+
setScheduler(schedulers);
366+
setSchedulerPage(1);
367+
setSchedulerTableIsLoading(false);
380368
} catch (error) {
381369
if (error instanceof Error) {
382370
setErrorMessage(true);
@@ -388,39 +376,23 @@ export default function ShowCluster() {
388376

389377
const searchSeedPeer = async () => {
390378
try {
379+
setSeedPeerTableIsLoading(true);
391380
const seedPeers = searchSeedPeers
392-
? seedPeer.filter((item) => {
393-
return item.host_name === searchSeedPeers;
381+
? await getSeedPeers({
382+
seed_peer_cluster_id: String(cluster.seed_peer_cluster_id),
383+
page: 1,
384+
per_page: MAX_PAGE_SIZE,
385+
host_name: searchSeedPeers,
394386
})
395-
: seedPeer;
396-
397-
if (searchSeedPeers) {
398-
const totalPage = Math.ceil(seedPeers.length / DEFAULT_SCHEDULER_TABLE_PAGE_SIZE);
399-
400-
setAllSeedPeers(seedPeers);
401-
setSeedPeerTotalPages(totalPage || 1);
402-
} else {
403-
const totalPage = Math.ceil(seedPeers.length / DEFAULT_SEED_PEER_TABLE_PAGE_SIZE);
404-
seedPeers.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
405-
seedPeers.sort((a, b) => {
406-
if (a.state < b.state) {
407-
return -1;
408-
} else if (a.state > b.state) {
409-
return 1;
410-
} else {
411-
return 0;
412-
}
413-
});
414-
const currentPageData = getPaginatedList(seedPeer, seedPeerPage, DEFAULT_SEED_PEER_TABLE_PAGE_SIZE);
387+
: await getSeedPeers({
388+
seed_peer_cluster_id: String(cluster.seed_peer_cluster_id),
389+
page: 1,
390+
per_page: MAX_PAGE_SIZE,
391+
});
415392

416-
if (currentPageData?.length === 0 && seedPeerPage > 1) {
417-
setSeedPeerPage(seedPeerPage - 1);
418-
}
419-
420-
setSeedPeerPage(1);
421-
setSeedPeerTotalPages(totalPage);
422-
setAllSeedPeers(currentPageData);
423-
}
393+
setSeedPeer(seedPeers);
394+
setSeedPeerPage(1);
395+
setSeedPeerTableIsLoading(false);
424396
} catch (error) {
425397
if (error instanceof Error) {
426398
setErrorMessage(true);
@@ -594,7 +566,7 @@ export default function ShowCluster() {
594566
<Chip
595567
size="small"
596568
icon={<Box component="img" src="/icons/cluster/total.svg" sx={{ width: '1.2rem', height: '1.2rem' }} />}
597-
label={`Total: ${scheduler.length}`}
569+
label={`Total: ${schedulerCount.length}`}
598570
/>
599571
</Paper>
600572
<Paper
@@ -618,7 +590,7 @@ export default function ShowCluster() {
618590
<Chip
619591
size="small"
620592
icon={<Box component="img" src="/icons/cluster/total.svg" sx={{ width: '1.2rem', height: '1.2rem' }} />}
621-
label={`Total: ${seedPeer.length}`}
593+
label={`Total: ${seedPeerCount.length}`}
622594
/>
623595
</Paper>
624596
</Box>
@@ -638,7 +610,7 @@ export default function ShowCluster() {
638610
onInputChange={(_event, newInputValue) => {
639611
setSearchSchedulers(newInputValue);
640612
}}
641-
options={scheduler.map((option) => option?.host_name)}
613+
options={schedulerCount.map((option) => option?.host_name)}
642614
renderInput={(params) => <TextField {...params} label="Search" />}
643615
/>
644616
</Stack>
@@ -916,7 +888,7 @@ export default function ShowCluster() {
916888
onInputChange={(_event, newInputValue) => {
917889
setSearchSeedPeer(newInputValue);
918890
}}
919-
options={seedPeer.map((option) => option.host_name)}
891+
options={seedPeerCount.map((option) => option.host_name)}
920892
renderInput={(params) => <TextField {...params} label="Search" />}
921893
/>
922894
</Stack>

‎src/components/job/preheats/new.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export default function NewPreheat() {
6666
useEffect(() => {
6767
(async function () {
6868
const cluster = await getClusters({ page: 1, per_page: MAX_PAGE_SIZE });
69-
setCluster(cluster.data);
69+
setCluster(cluster);
7070
})();
7171
}, []);
7272

0 commit comments

Comments
 (0)