diff --git a/components/elements/commands/index.tsx b/components/elements/commands/index.tsx index adf4752..099adf1 100644 --- a/components/elements/commands/index.tsx +++ b/components/elements/commands/index.tsx @@ -1,7 +1,7 @@ import {Table, TableBody, TableCell, TableHead, TableRow, IconButton} from "@mui/material"; import Command, {CommandInterface} from "./elements/command"; import {useEffect, useState} from "react"; -import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline'; +import PlayCircleOutline from '@mui/icons-material/PlayCircleOutline'; export default function Commands() { const [commands, setCommands] = useState([]); @@ -61,7 +61,7 @@ export default function Commands() { - + diff --git a/components/elements/processes/index.tsx b/components/elements/processes/index.tsx index 10968ca..12725eb 100644 --- a/components/elements/processes/index.tsx +++ b/components/elements/processes/index.tsx @@ -1,36 +1,54 @@ 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, Table, TableBody, TableCell, TableHead, TableRow} from "@mui/material"; export interface ProcessExceptionInterface { message: string, file: string, - line: bigint, - code: bigint, + line: number, + code: number, trace: any[], } export interface ProcessProgressInterface { - total: bigint, - progress: bigint, + total: number, + progress: number, memory: any[], } export interface ProcessInterface { id: string, - lock: string|null, - containerUuid: string|null, - pid: bigint|null, + lock: string | null, + containerUuid: string | null, + pid: bigint | null, name: string, options: Record, arguments: Record, - exception: ProcessExceptionInterface|null, - progress: ProcessProgressInterface|null, + exception: ProcessExceptionInterface | null, + progress: ProcessProgressInterface | null, createdAt: string, - updatedAt: string|null, - startedAt: string|null, - pausedAt: string|null, - cancelledAt: string|null - completedAt: string|null + 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() { @@ -40,7 +58,6 @@ export default function Processes() { let response = await fetch('http://fmw.sipachev.sv/system-monitoring/processes', { method: 'GET', headers: { - 'Content-Type': 'application/json;charset=utf-8', 'X-Plugin-Token': 'passw0rd' }, }); @@ -53,28 +70,88 @@ export default function Processes() { refreshProcesses() }, []) + 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) + 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 + } return ( -
- {processes.map((process: ProcessInterface, index: number) => ( -
-
- {process.name}  -
-
- {!process.progress && 'N/A'} - {process.progress && - {`${process.progress.progress}`} / {`${process.progress.total}`} - 50% [53Mb] / 20 sec - } -
-
- {process.completedAt && } - {process.pausedAt && } - {!process.pausedAt && !process.completedAt && !process.cancelledAt && } - {!process.completedAt && !process.cancelledAt && } -
-
- ))} -
+ + + + Name + Progress + Action + Status + + + + {processes.map((process: ProcessInterface, index: number) => ( + + {process.name} + + {!process.progress && } + {process.progress && } + {process.progress && + {`${process.progress.progress}`} / {`${process.progress.total}`} - 50% [53Mb] / 20 sec + } + {canPlay(process) && + + } + {canPause(process) && + + } + {canStop(process) && + + } + + + {canRepeat(process) && + + } + {canKill(process) && + + } + + + {Status.Error === status(process) && + + } + {Status.Success === status(process) && + + } + {Status.Running === status(process) && + + } + {Status.Cancelled === status(process) && + + } + {Status.Wait === status(process) && + + } + + + ))} + +
) }