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

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

Browse Source
jwt
Rinsvent 2 years ago
parent 2d5605f72c
commit e55472eca4
1 changed files with 90 additions and 66 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 156
      components/elements/processes/index.tsx

156
components/elements/processes/index.tsx
Unescape 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}
/>
</>
) )
} }

Write Preview
Loading…
Cancel
Save