|
|
@ -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} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</> |
|
|
|
) |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|