import styles from './styles.module.css' import {useEffect, useState} from "react"; import DeleteForever from "@mui/icons-material/DeleteForever"; import StopCircle from "@mui/icons-material/StopCircle"; import PauseCircleOutline from "@mui/icons-material/PauseCircleOutline"; import PlayCircleOutline from "@mui/icons-material/PlayCircleOutline"; import HourglassEmpty from "@mui/icons-material/HourglassEmpty"; 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, TableContainer, Table, TableBody, TableCell, TableHead, TableRow, TablePagination} from "@mui/material"; export interface ProcessExceptionInterface { message: string, file: string, line: number, code: number, trace: any[], } export interface ProcessProgressInterface { total: number, progress: number, memory: any[], } export interface ProcessInterface { id: string, lock: string | null, containerUuid: string | null, pid: bigint | null, name: string, options: Record, arguments: Record, exception: ProcessExceptionInterface | null, progress: ProcessProgressInterface | null, createdAt: string, updatedAt: string | null, startedAt: string | null, pausedAt: string | null, cancelledAt: string | null completedAt: string | null } enum Status { Wait, Running, Cancelled, Error, Success } export default function Processes() { const [processes, setProcesses] = useState([]); const [page, setPage] = useState(0); const [count, setCount] = useState(0); let refreshProcesses = async () => { 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 let canPause = (process: ProcessInterface) => !isFinished(process) && process.progress && !process.pausedAt let canRepeat = (process: ProcessInterface) => isFinished(process) let canStop = (process: ProcessInterface) => !isFinished(process) && process.progress let canKill = (process: ProcessInterface) => !isFinished(process) && process.startedAt let progress = (progress: ProcessProgressInterface) => progress.progress / progress.total * 100 let status = (process: ProcessInterface): Status => { if (process.cancelledAt && process.completedAt) { return Status.Cancelled } if (process.exception && process.completedAt) { return Status.Error } if (!process.exception && process.completedAt) { return Status.Success } if (process.startedAt && !process.completedAt) { return Status.Running } return Status.Wait } const handleChangePage = (event: any, page: number) => { setPage(page); } return ( <> Name Progress Status Action {processes.map((process: ProcessInterface, index: number) => ( {process.name} {!process.progress && !isFinished(process) && } {!process.progress && isFinished(process) && } {process.progress && } {process.progress && {`${process.progress.progress}`} / {`${process.progress.total}`} - 50% [53Mb] / 20 sec } {canPlay(process) && } {canPause(process) && } {canStop(process) && } {Status.Error === status(process) && } {Status.Success === status(process) && } {Status.Running === status(process) && } {Status.Cancelled === status(process) && } {Status.Wait === status(process) && } {canRepeat(process) && } {canKill(process) && } ))}
) }