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