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

Compare commits

base: rinsvent:0e8451719007ff51bb01f23e1a65fd76d47b9942
Branches Tags
rinsvent:master
rinsvent:jwt
..
compare: rinsvent:2d5605f72c6cae32245d27fa5b6588a6b7ab03f2
Branches Tags
rinsvent:master
rinsvent:jwt

No commits in common. "0e8451719007ff51bb01f23e1a65fd76d47b9942" and "2d5605f72c6cae32245d27fa5b6588a6b7ab03f2" have entirely different histories.
0e84517190 ... 2d5605f72c

1 changed files with 66 additions and 90 deletions
Show Stats 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, TableContainer, Table, TableBody, TableCell, TableHead, TableRow, TablePagination} from "@mui/material"; import {IconButton, LinearProgress, Table, TableBody, TableCell, TableHead, TableRow} from "@mui/material";
export interface ProcessExceptionInterface { export interface ProcessExceptionInterface {
message: string, message: string,
@ -53,30 +53,22 @@ 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?' + new URLSearchParams({ let response = await fetch('http://fmw.sipachev.sv/system-monitoring/processes', {
page: page + 1, method: 'GET',
limit: 20, headers: {
}), '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
@ -102,80 +94,64 @@ export default function Processes() {
return Status.Wait return Status.Wait
} }
const handleChangePage = (event: any, page: number) => {
setPage(page);
}
return ( return (
<> <Table>
<TableContainer> <TableHead>
<Table> <TableRow>
<TableHead> <TableCell>Name</TableCell>
<TableRow> <TableCell>Progress</TableCell>
<TableCell>Name</TableCell> <TableCell>Action</TableCell>
<TableCell>Progress</TableCell> <TableCell>Status</TableCell>
<TableCell>Status</TableCell> </TableRow>
<TableCell>Action</TableCell> </TableHead>
</TableRow> <TableBody>
</TableHead> {processes.map((process: ProcessInterface, index: number) => (
<TableBody> <TableRow key={process.id}>
{processes.map((process: ProcessInterface, index: number) => ( <TableCell>{process.name}</TableCell>
<TableRow key={process.id}> <TableCell>
<TableCell>{process.name}</TableCell> {!process.progress && <LinearProgress/>}
<TableCell> {process.progress && <LinearProgress value={progress(process.progress)}/>}
{!process.progress && !isFinished(process) && <LinearProgress/>} {process.progress && <span>
{!process.progress && isFinished(process) && <LinearProgress variant="determinate" value={100}/>} {`${process.progress.progress}`} / {`${process.progress.total}`} - 50% [53Mb] / 20 sec
{process.progress && <LinearProgress value={progress(process.progress)}/>} </span>}
{process.progress && <span> {canPlay(process) && <IconButton title={`Play`} aria-label="Play">
{`${process.progress.progress}`} / {`${process.progress.total}`} - 50% [53Mb] / 20 sec <PlayCircleOutline/>
</span>} </IconButton>}
{canPlay(process) && <IconButton title={`Play`} aria-label="Play"> {canPause(process) && <IconButton title={`Pause`} aria-label="Pause">
<PlayCircleOutline/> <PauseCircleOutline/>
</IconButton>} </IconButton>}
{canPause(process) && <IconButton title={`Pause`} aria-label="Pause"> {canStop(process) && <IconButton title={`Stop`} aria-label="Stop">
<PauseCircleOutline/> <StopCircle/>
</IconButton>} </IconButton>}
{canStop(process) && <IconButton title={`Stop`} aria-label="Stop"> </TableCell>
<StopCircle/> <TableCell>
</IconButton>} {canRepeat(process) && <IconButton title={`Repeat`} aria-label="Repeat">
</TableCell> <Replay/>
<TableCell> </IconButton>}
{Status.Error === status(process) && <IconButton title={`Error`} aria-label="Error"> {canKill(process) && <IconButton title={`Kill`} aria-label="Kill">
<ErrorOutline/> <DeleteForever/>
</IconButton>} </IconButton>}
{Status.Success === status(process) && <IconButton title={`Success`} aria-label="Success"> </TableCell>
<CheckCircleOutline/> <TableCell>
</IconButton>} {Status.Error === status(process) && <IconButton title={`Error`} aria-label="Error">
{Status.Running === status(process) && <IconButton title={`Running`} aria-label="Running"> <ErrorOutline/>
<RunCircle/> </IconButton>}
</IconButton>} {Status.Success === status(process) && <IconButton title={`Success`} aria-label="Success">
{Status.Cancelled === status(process) && <IconButton title={`Cancelled`} aria-label="Cancelled"> <CheckCircleOutline/>
<StopCircle/> </IconButton>}
</IconButton>} {Status.Running === status(process) && <IconButton title={`Running`} aria-label="Running">
{Status.Wait === status(process) && <IconButton title={`Wait`} aria-label="Wait"> <RunCircle/>
<HourglassEmpty/> </IconButton>}
</IconButton>} {Status.Cancelled === status(process) && <IconButton title={`Cancelled`} aria-label="Cancelled">
</TableCell> <StopCircle/>
<TableCell> </IconButton>}
{canRepeat(process) && <IconButton title={`Repeat`} aria-label="Repeat"> {Status.Wait === status(process) && <IconButton title={`Wait`} aria-label="Wait">
<Replay/> <HourglassEmpty/>
</IconButton>} </IconButton>}
{canKill(process) && <IconButton title={`Kill`} aria-label="Kill"> </TableCell>
<DeleteForever/> </TableRow>
</IconButton>} ))}
</TableCell> </TableBody>
</TableRow> </Table>
))}
</TableBody>
</Table>
</TableContainer>
<TablePagination
component="div"
count={count}
rowsPerPage={20}
page={page}
onPageChange={handleChangePage}
/>
</>
) )
} }