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

jwt
Rinsvent 2 years ago
parent 2d5605f72c
commit e55472eca4
  1. 34
      components/elements/processes/index.tsx

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

Loading…
Cancel
Save