rinsvent/fms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Rinsvent 2023-01-15 16:42:53 +07:00
parent 2d5605f72c
commit e55472eca4
1 changed files with 90 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
components/elements/processes/index.tsx
View File

@ -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({
method: 'GET', page: page + 1,
headers: { limit: 20,
'X-Plugin-Token': 'passw0rd' }),
}, {
}); method: 'GET',
headers: {
'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,64 +102,80 @@ export default function Processes() {
return Status.Wait return Status.Wait
} }
const handleChangePage = (event: any, page: number) => {
setPage(page);
}
return ( return (
<Table> <>
<TableHead> <TableContainer>
<TableRow> <Table>
<TableCell>Name</TableCell> <TableHead>
<TableCell>Progress</TableCell> <TableRow>
<TableCell>Action</TableCell> <TableCell>Name</TableCell>
<TableCell>Status</TableCell> <TableCell>Progress</TableCell>
</TableRow> <TableCell>Action</TableCell>
</TableHead> <TableCell>Status</TableCell>
<TableBody> </TableRow>
{processes.map((process: ProcessInterface, index: number) => ( </TableHead>
<TableRow key={process.id}> <TableBody>
<TableCell>{process.name}</TableCell> {processes.map((process: ProcessInterface, index: number) => (
<TableCell> <TableRow key={process.id}>
{!process.progress && <LinearProgress/>} <TableCell>{process.name}</TableCell>
{process.progress && <LinearProgress value={progress(process.progress)}/>} <TableCell>
{process.progress && <span> {!process.progress && !isFinished(process) && <LinearProgress/>}
{`${process.progress.progress}`} / {`${process.progress.total}`} - 50% [53Mb] / 20 sec {!process.progress && isFinished(process) && <LinearProgress variant="determinate" value={100}/>}
</span>} {process.progress && <LinearProgress value={progress(process.progress)}/>}
{canPlay(process) && <IconButton title={`Play`} aria-label="Play"> {process.progress && <span>
<PlayCircleOutline/> {`${process.progress.progress}`} / {`${process.progress.total}`} - 50% [53Mb] / 20 sec
</IconButton>} </span>}
{canPause(process) && <IconButton title={`Pause`} aria-label="Pause"> {canPlay(process) && <IconButton title={`Play`} aria-label="Play">
<PauseCircleOutline/> <PlayCircleOutline/>
</IconButton>} </IconButton>}
{canStop(process) && <IconButton title={`Stop`} aria-label="Stop"> {canPause(process) && <IconButton title={`Pause`} aria-label="Pause">
<StopCircle/> <PauseCircleOutline/>
</IconButton>} </IconButton>}
</TableCell> {canStop(process) && <IconButton title={`Stop`} aria-label="Stop">
<TableCell> <StopCircle/>
{canRepeat(process) && <IconButton title={`Repeat`} aria-label="Repeat"> </IconButton>}
<Replay/> </TableCell>
</IconButton>} <TableCell>
{canKill(process) && <IconButton title={`Kill`} aria-label="Kill"> {canRepeat(process) && <IconButton title={`Repeat`} aria-label="Repeat">
<DeleteForever/> <Replay/>
</IconButton>} </IconButton>}
</TableCell> {canKill(process) && <IconButton title={`Kill`} aria-label="Kill">
<TableCell> <DeleteForever/>
{Status.Error === status(process) && <IconButton title={`Error`} aria-label="Error"> </IconButton>}
<ErrorOutline/> </TableCell>
</IconButton>} <TableCell>
{Status.Success === status(process) && <IconButton title={`Success`} aria-label="Success"> {Status.Error === status(process) && <IconButton title={`Error`} aria-label="Error">
<CheckCircleOutline/> <ErrorOutline/>
</IconButton>} </IconButton>}
{Status.Running === status(process) && <IconButton title={`Running`} aria-label="Running"> {Status.Success === status(process) && <IconButton title={`Success`} aria-label="Success">
<RunCircle/> <CheckCircleOutline/>
</IconButton>} </IconButton>}
{Status.Cancelled === status(process) && <IconButton title={`Cancelled`} aria-label="Cancelled"> {Status.Running === status(process) && <IconButton title={`Running`} aria-label="Running">
<StopCircle/> <RunCircle/>
</IconButton>} </IconButton>}
{Status.Wait === status(process) && <IconButton title={`Wait`} aria-label="Wait"> {Status.Cancelled === status(process) && <IconButton title={`Cancelled`} aria-label="Cancelled">
<HourglassEmpty/> <StopCircle/>
</IconButton>} </IconButton>}
</TableCell> {Status.Wait === status(process) && <IconButton title={`Wait`} aria-label="Wait">
</TableRow> <HourglassEmpty/>
))} </IconButton>}
</TableBody> </TableCell>
</Table> </TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<TablePagination
component="div"
count={count}
rowsPerPage={20}
page={page}
onPageChange={handleChangePage}
/>
</>
) )
} }