fix: Paging bug (#415)

Signed-off-by: zhaoxinxin <1186037180@qq.com>

src/components/circular-progress.tsx

@@ -1,9 +1,13 @@
 import Box from '@mui/material/Box';
 import CircularProgress, { circularProgressClasses, CircularProgressProps } from '@mui/material/CircularProgress';
 
-const SearchCircularProgress = (props: CircularProgressProps) => {
+interface CardProps {
+  className?: string;
+}
+
+const SearchCircularProgress: React.FC<CardProps> = (props: CircularProgressProps, { className }) => {
   return (
-    <Box sx={{ position: 'relative', display: 'flex' }}>
+    <Box sx={{ position: 'relative', display: 'flex' }} className={className}>
       <CircularProgress
         variant="determinate"
         sx={(theme) => ({

src/components/clusters/index.tsx

@@ -487,7 +487,11 @@ export default function Clusters() {
               page={clusterPage}
               onChange={(_event: any, newPage: number) => {
                 setClusterPage(newPage);
-                navigate(`/clusters${newPage > 1 ? `?page=${newPage}` : ''}`);
+                navigate(
+                  `/clusters${search ? `?search=${search}` : ''}${
+                    newPage > 1 ? `${search ? '&' : '?'}page=${newPage}` : ''
+                  }`,
+                );
               }}
               color="primary"
               size="small"

src/components/clusters/show.tsx

@@ -528,12 +528,25 @@ export default function ShowCluster() {
       setSearchSchedulerIconISLodaing(true);
       debouncedScheduler(newSearch);
 
-      const schedulerQueryString = newSearch ? `?schedulerSearch=${newSearch}` : '';
-      const seedpeerQueryString = searchSeedPeers ? `${newSearch ? '&' : '?'}seedPeerSearch=${searchSeedPeers}` : '';
+      const queryParts = [];
 
-      navigate(`${location.pathname}${schedulerQueryString}${seedpeerQueryString}`);
+      if (newSearch) {
+        queryParts.push(`schedulerSearch=${newSearch}`);
+      }
+
+      if (seedPeerSearch) {
+        queryParts.push(`seedPeerSearch=${seedPeerSearch}`);
+      }
+
+      if (seedPeerPage > 1) {
+        queryParts.push(`seedPeerPage=${seedPeerPage}`);
+      }
+
+      const queryString = queryParts.length > 0 ? `?${queryParts.join('&')}` : '';
+
+      navigate(`${location.pathname}${queryString}`);
     },
-    [debouncedScheduler, location.pathname, navigate, searchSeedPeers],
+    [debouncedScheduler, location.pathname, navigate, seedPeerPage, seedPeerSearch],
   );
 
   const debouncedSeedPeer = useMemo(
@@ -558,12 +571,25 @@ export default function ShowCluster() {
       setSearchSeedPeerIconISLodaing(true);
       debouncedSeedPeer(newSearch);
 
-      const schedulerQueryString = searchSchedulers ? `?schedulerSearch=${searchSchedulers}` : '';
-      const seedPeerQueryString = newSearch ? `seedPeerSearch=${newSearch}` : '';
+      const queryParts = [];
+
+      if (schedulerSearch) {
+        queryParts.push(`schedulerSearch=${schedulerSearch}`);
+      }
+
+      if (schedulerPage > 1) {
+        queryParts.push(`schedulerPage=${schedulerPage}`);
+      }
+
+      if (newSearch) {
+        queryParts.push(`seedPeerSearch=${newSearch}`);
+      }
+
+      const queryString = queryParts.length > 0 ? `?${queryParts.join('&')}` : '';
 
-      navigate(`${location.pathname}${schedulerQueryString}${`${searchSchedulers ? '&' : '?'}${seedPeerQueryString}`}`);
+      navigate(`${location.pathname}${queryString}`);
     },
-    [debouncedSeedPeer, location.pathname, navigate, searchSchedulers],
+    [debouncedSeedPeer, location.pathname, navigate, schedulerSearch, schedulerPage],
   );
 
   useEffect(() => {
@@ -1947,11 +1973,27 @@ export default function ShowCluster() {
             page={schedulerPage}
             onChange={(_event: any, newPage: number) => {
               setSchedulerPage(newPage);
-              navigate(
-                `/clusters/${params.id}${newPage > 1 ? `?schedulerPage=${newPage}` : ''}${
-                  seedPeerPage > 1 ? `${newPage > 1 ? '&' : '?'}seedPeerPage=${seedPeerPage}` : ''
-                }`,
-              );
+              const queryParts = [];
+
+              if (schedulerSearch) {
+                queryParts.push(`schedulerSearch=${schedulerSearch}`);
+              }
+
+              if (newPage > 1) {
+                queryParts.push(`schedulerPage=${newPage}`);
+              }
+
+              if (seedPeerSearch) {
+                queryParts.push(`seedPeerSearch=${seedPeerSearch}`);
+              }
+
+              if (seedPeerPage > 1) {
+                queryParts.push(`seedPeerPage=${seedPeerPage}`);
+              }
+
+              const queryString = queryParts.length > 0 ? `?${queryParts.join('&')}` : '';
+
+              navigate(`/clusters/${params.id}${queryString}`);
             }}
             color="primary"
             size="small"
@@ -2243,13 +2285,29 @@ export default function ShowCluster() {
           <Pagination
             count={seedPeerTotalPages}
             page={seedPeerPage}
-            onChange={(_event: any, newPage: number) => {
+            onChange={(_event: any, newPage: any) => {
               setSeedPeerPage(newPage);
-              navigate(
-                `/clusters/${params.id}${schedulerPage > 1 ? `?schedulerPage=${schedulerPage}` : ''}${
-                  newPage > 1 ? `${schedulerPage > 1 ? '&' : '?'}seedPeerPage=${newPage}` : ''
-                }`,
-              );
+              const queryParts = [];
+
+              if (schedulerSearch) {
+                queryParts.push(`schedulerSearch=${schedulerSearch}`);
+              }
+
+              if (schedulerPage > 1) {
+                queryParts.push(`schedulerPage=${schedulerPage}`);
+              }
+
+              if (seedPeerSearch) {
+                queryParts.push(`seedPeerSearch=${seedPeerSearch}`);
+              }
+
+              if (newPage > 1) {
+                queryParts.push(`seedPeerPage=${newPage}`);
+              }
+
+              const queryString = queryParts.length > 0 ? `?${queryParts.join('&')}` : '';
+
+              navigate(`/clusters/${params.id}${queryString}`);
             }}
             color="primary"
             size="small"

src/components/job/task/clear/index.module.css

@@ -52,3 +52,7 @@
   flex-wrap: wrap;
   width: 100%;
 }
+
+.circularProgress {
+  margin-right: 0.4rem;
+}

src/components/job/task/clear/index.tsx

@@ -202,7 +202,7 @@ export default function Clear() {
         InputProps: (
           <Tooltip
             title={
-              'When the task URLs are the same but the tags are different, they are differentiated based on the tags and the query caches are also different.'
+              'When the task URL is the same but the tags are different, they will be distinguished based on the tags, and the queried tasks will also be different.'
             }
             placement="top"
           >
@@ -237,7 +237,7 @@ export default function Clear() {
         helperText: applicationError ? 'Fill in the characters, the length is 0-1000.' : '',
         error: applicationError,
         InputProps: (
-          <Tooltip title={'Application is the application of the task.'} placement="top">
+          <Tooltip title={'Caller application which is used for statistics and access control.'} placement="top">
             <HelpIcon
               color="disabled"
               sx={{ width: '0.8rem', height: '0.8rem', ':hover': { color: 'var(--description-color)' } }}
@@ -320,7 +320,11 @@ export default function Clear() {
       helperText: taskIDError ? 'Fill in the characters, the length is 0-1000.' : '',
       error: taskIDError,
       InputProps: {
-        startAdornment: isLoading ? <SearchCircularProgress /> : <SearchIcon sx={{ color: '#9BA0A6' }} />,
+        startAdornment: isLoading ? (
+          <SearchCircularProgress className={styles.circularProgress} />
+        ) : (
+          <SearchIcon sx={{ color: '#9BA0A6' }} />
+        ),
         endAdornment: searchTask ? (
           <IconButton
             type="button"
@@ -669,7 +673,7 @@ export default function Clear() {
                               {item?.id === 'filteredQueryParams' ? (
                                 <Tooltip
                                   title={
-                                    'By setting the filter parameter, you can specify the file type of the resource that needs to be searched for cache. This filter is used to generate a unique cache and filter out unnecessary query parameters in the URL, separated by the & character.'
+                                    'Filter the query parameters of the downloaded URL. If the download URL is the same, it will be scheduled as the same task.'
                                   }
                                   placement="top"
                                 >
@@ -966,7 +970,7 @@ export default function Clear() {
               </Box>
             </>
           ) : (
-            <Box id='no-task' sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', mt: '6rem' }}>
+            <Box id="no-task" sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', mt: '6rem' }}>
               <Box component="img" sx={{ width: '4rem', mb: '3rem' }} src="/icons/job/task/no-search.svg" />
               <Box>
                 <Typography variant="h5" component="span">