Добавил пагинацию

components/elements/processes/index.tsx

@@ -9,7 +9,7 @@ import CheckCircleOutline from "@mui/icons-material/CheckCircleOutline";
 import ErrorOutline from "@mui/icons-material/ErrorOutline";
 import Replay from "@mui/icons-material/Replay";
 import RunCircle from "@mui/icons-material/RunCircle";
-import {IconButton, LinearProgress, Table, TableBody, TableCell, TableHead, TableRow} from "@mui/material";
+import {IconButton, LinearProgress, TableContainer, Table, TableBody, TableCell, TableHead, TableRow, TablePagination} from "@mui/material";
 
 export interface ProcessExceptionInterface {
     message: string,
@@ -53,22 +53,30 @@ enum Status {
 
 export default function Processes() {
     const [processes, setProcesses] = useState<ProcessInterface[]>([]);
+    const [page, setPage] = useState<number>(0);
+    const [count, setCount] = useState<number>(0);
 
     let refreshProcesses = async () => {
-        let response = await fetch('http://fmw.sipachev.sv/system-monitoring/processes', {
+        let response = await fetch('http://fmw.sipachev.sv/system-monitoring/processes?' + new URLSearchParams({
+            page: page + 1,
+            limit: 20,
+        }),
+            {
                 method: 'GET',
                 headers: {
-                'X-Plugin-Token': 'passw0rd'
+                    'X-Plugin-Token': 'passw0rd',
+                    'X-Pagination-Count': '0',
                 },
             });
         const processes: ProcessInterface[] = await response.json()
         setProcesses(processes)
+        setCount(Number(response.headers.get('X-Pagination-Count')))
         setTimeout(() => refreshProcesses, 1000)
     }
 
     useEffect(() => {
         refreshProcesses()
-    }, [])
+    }, [page])
 
     let isFinished = (process: ProcessInterface) => process.cancelledAt || process.completedAt
     let canPlay = (process: ProcessInterface) => !isFinished(process) && process.progress && process.pausedAt
@@ -94,7 +102,13 @@ export default function Processes() {
         return Status.Wait
     }
 
+    const handleChangePage = (event: any, page: number) => {
+        setPage(page);
+    }
+
     return (
+        <>
+            <TableContainer>
                 <Table>
                     <TableHead>
                         <TableRow>
@@ -109,7 +123,8 @@ export default function Processes() {
                             <TableRow key={process.id}>
                                 <TableCell>{process.name}</TableCell>
                                 <TableCell>
-                            {!process.progress && <LinearProgress/>}
+                                    {!process.progress && !isFinished(process) && <LinearProgress/>}
+                                    {!process.progress && isFinished(process) && <LinearProgress variant="determinate" value={100}/>}
                                     {process.progress && <LinearProgress value={progress(process.progress)}/>}
                                     {process.progress && <span>
                                     {`${process.progress.progress}`} / {`${process.progress.total}`} - 50% [53Mb] / 20 sec
@@ -153,5 +168,14 @@ export default function Processes() {
                         ))}
                     </TableBody>
                 </Table>
+            </TableContainer>
+            <TablePagination
+                component="div"
+                count={count}
+                rowsPerPage={20}
+                page={page}
+                onPageChange={handleChangePage}
+            />
+        </>
     )
 }