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" import { v4 } from "uuid" 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 requestId = v4() let refreshLock = false let refreshProcesses = async () => { if (refreshLock) { return } refreshLock = true 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'))) refreshLock = false } useEffect(() => { const timer = setInterval(() => refreshProcesses(), 1000) return () => clearInterval(timer); }, [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); } const repeat = (event: any) => { } return ( <> Name Progress Status Action Created {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) && } {new Date(process.createdAt).toLocaleDateString()} ))}
) }