Рефакторинг процессов

jwt
Rinsvent 2 years ago
parent f63cd5c87b
commit 7177b30038
  1. 4
      components/elements/commands/index.tsx
  2. 119
      components/elements/processes/index.tsx

@ -1,7 +1,7 @@
import {Table, TableBody, TableCell, TableHead, TableRow, IconButton} from "@mui/material"; import {Table, TableBody, TableCell, TableHead, TableRow, IconButton} from "@mui/material";
import Command, {CommandInterface} from "./elements/command"; import Command, {CommandInterface} from "./elements/command";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline'; import PlayCircleOutline from '@mui/icons-material/PlayCircleOutline';
export default function Commands() { export default function Commands() {
const [commands, setCommands] = useState<CommandInterface[]>([]); const [commands, setCommands] = useState<CommandInterface[]>([]);
@ -61,7 +61,7 @@ export default function Commands() {
<TableCell><Command key={index} command={command} callback={callback} /></TableCell> <TableCell><Command key={index} command={command} callback={callback} /></TableCell>
<TableCell> <TableCell>
<IconButton onClick={runCommand} aria-label="run"> <IconButton onClick={runCommand} aria-label="run">
<PlayCircleOutlineIcon /> <PlayCircleOutline />
</IconButton> </IconButton>
</TableCell> </TableCell>
</TableRow> </TableRow>

@ -1,17 +1,27 @@
import styles from './styles.module.css' import styles from './styles.module.css'
import {useEffect, useState} from "react"; 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 { export interface ProcessExceptionInterface {
message: string, message: string,
file: string, file: string,
line: bigint, line: number,
code: bigint, code: number,
trace: any[], trace: any[],
} }
export interface ProcessProgressInterface { export interface ProcessProgressInterface {
total: bigint, total: number,
progress: bigint, progress: number,
memory: any[], memory: any[],
} }
@ -33,6 +43,14 @@ export interface ProcessInterface {
completedAt: string | null completedAt: string | null
} }
enum Status {
Wait,
Running,
Cancelled,
Error,
Success
}
export default function Processes() { export default function Processes() {
const [processes, setProcesses] = useState<ProcessInterface[]>([]); const [processes, setProcesses] = useState<ProcessInterface[]>([]);
@ -40,7 +58,6 @@ export default function Processes() {
let response = await fetch('http://fmw.sipachev.sv/system-monitoring/processes', { let response = await fetch('http://fmw.sipachev.sv/system-monitoring/processes', {
method: 'GET', method: 'GET',
headers: { headers: {
'Content-Type': 'application/json;charset=utf-8',
'X-Plugin-Token': 'passw0rd' 'X-Plugin-Token': 'passw0rd'
}, },
}); });
@ -53,28 +70,88 @@ export default function Processes() {
refreshProcesses() 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 ( return (
<div className={styles.processes}> <Table>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Progress</TableCell>
<TableCell>Action</TableCell>
<TableCell>Status</TableCell>
</TableRow>
</TableHead>
<TableBody>
{processes.map((process: ProcessInterface, index: number) => ( {processes.map((process: ProcessInterface, index: number) => (
<div className={styles.process} key={index}> <TableRow key={process.id}>
<div> <TableCell>{process.name}</TableCell>
{process.name}&nbsp; <TableCell>
</div> {!process.progress && <LinearProgress/>}
<div> {process.progress && <LinearProgress value={progress(process.progress)}/>}
{!process.progress && 'N/A'}
{process.progress && <span> {process.progress && <span>
{`${process.progress.progress}`} / {`${process.progress.total}`} - 50% [53Mb] / 20 sec {`${process.progress.progress}`} / {`${process.progress.total}`} - 50% [53Mb] / 20 sec
</span>} </span>}
</div> {canPlay(process) && <IconButton aria-label="Play">
<div> <PlayCircleOutline/>
{process.completedAt && <button>Repeat</button>} </IconButton>}
{process.pausedAt && <button>Play</button>} {canPause(process) && <IconButton aria-label="Pause">
{!process.pausedAt && !process.completedAt && !process.cancelledAt && <button>Pause</button>} <PauseCircleOutline/>
{!process.completedAt && !process.cancelledAt && <button>Stop</button>} </IconButton>}
</div> {canStop(process) && <IconButton aria-label="Stop">
</div> <StopCircle/>
</IconButton>}
</TableCell>
<TableCell>
{canRepeat(process) && <IconButton aria-label="Repeat">
<Replay/>
</IconButton>}
{canKill(process) && <IconButton aria-label="Kill">
<DeleteForever/>
</IconButton>}
</TableCell>
<TableCell>
{Status.Error === status(process) && <IconButton aria-label="Error">
<ErrorOutline/>
</IconButton>}
{Status.Success === status(process) && <IconButton aria-label="Success">
<CheckCircleOutline/>
</IconButton>}
{Status.Running === status(process) && <IconButton aria-label="Running">
<RunCircle/>
</IconButton>}
{Status.Cancelled === status(process) && <IconButton aria-label="Cancelled">
<StopCircle/>
</IconButton>}
{Status.Wait === status(process) && <IconButton aria-label="Wait">
<HourglassEmpty/>
</IconButton>}
</TableCell>
</TableRow>
))} ))}
</div> </TableBody>
</Table>
) )
} }

Loading…
Cancel
Save