You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
fms/components/elements/processes/index.tsx

254 lines
12 KiB

import styles from './styles.module.css'
import {useEffect, useState} from "react"
import DeleteForeverOutlined from "@mui/icons-material/DeleteForeverOutlined"
import StopCircleOutlined from "@mui/icons-material/StopCircleOutlined"
import PauseCircleOutline from "@mui/icons-material/PauseCircleOutline"
import PlayCircleOutline from "@mui/icons-material/PlayCircleOutline"
import HourglassEmptyOutlined from "@mui/icons-material/HourglassEmptyOutlined"
import CheckCircleOutline from "@mui/icons-material/CheckCircleOutline"
import ErrorOutline from "@mui/icons-material/ErrorOutline"
import ReplayOutlined from "@mui/icons-material/ReplayOutlined"
import RunCircleOutlined from "@mui/icons-material/RunCircleOutlined"
import FactCheckOutlined from "@mui/icons-material/FactCheckOutlined"
import {Box, CircularProgress, IconButton, LinearProgress, TableContainer, Table, TableBody, TableCell, TableHead, TableRow, TablePagination} from "@mui/material"
import ConfirmDialog from "../confirm-dialog";
import smClient from "../../../api/sm/sm-client";
import {ProcessesResponseInterface, Status} from "../../../api/sm/responses/processes";
import Command, {CommandInterface} from "../commands/elements/command";
enum Action {
Run,
Repeat,
Stop,
Kill,
Play,
Pause,
}
export default function Processes() {
const [processes, setProcesses] = useState<ProcessesResponseInterface[]>([]);
const [page, setPage] = useState<number>(0);
const [count, setCount] = useState<number>(0);
const [loading, setLoading] = useState<boolean>(true);
const [modalLoading, setModalLoading] = useState<boolean>(true);
const [action, setAction] = useState<Action | null>(null);
const [command, setCommand] = useState<CommandInterface | null>(null);
const [selectedProcess, setSelectedProcess] = useState<ProcessesResponseInterface | null>(null);
const [optionList, setOptionList] = useState<Record<string, any>>({});
const [argumentList, setArgumentList] = useState<Record<string, any>>({});
let refreshLock = false
let refreshProcesses = async () => {
if (refreshLock) {
return
}
refreshLock = true
const { data: processes, headers } = await smClient.getProcesses({
page: page + 1,
limit: 20,
})
setProcesses(processes)
setCount(Number(headers.get('X-Pagination-Count')))
setLoading(false)
refreshLock = false
}
let output = async (process: ProcessesResponseInterface) => {
const { data: output } = await smClient.getProcessOutput({
id: process.id
})
let a = document.createElement("a");
let file = new Blob([output], {type: 'plain/text'});
a.href = URL.createObjectURL(file);
a.download = `${process.id}.txt`;
a.click();
}
useEffect(() => {
const timer = setInterval(() => refreshProcesses(), 1000)
return () => clearInterval(timer);
}, [page]);
useEffect(() => {
if (action === null) {
setSelectedProcess(null)
setCommand(null)
}
}, [action]);
let isFinished = (process: ProcessesResponseInterface) => process.cancelledAt || process.completedAt
const handleChangePage = (event: any, page: number) => {
setPage(page);
}
const openDialog = (process: ProcessesResponseInterface, action: Action) => {
setSelectedProcess(process)
setAction(action)
}
let lock = false
const agreeCallback = async (dialogId: string) => {
if (lock) {
return
}
if (!selectedProcess) {
return
}
lock = true
if (action === Action.Run) {
await smClient.runCommand({
commandName: selectedProcess.name,
options: optionList,
arguments: argumentList,
requestId: dialogId,
})
}
if (action === Action.Repeat) {
await smClient.repeatProcess({
id: selectedProcess.id,
requestId: dialogId
})
}
lock = false
setAction(null)
}
let callback = (name: string, optionList: Record<string, any>, argumentList: Record<string, any>) => {
setOptionList(optionList)
setArgumentList(argumentList)
}
if (loading) {
return (
<Box sx={{ display: 'flex', marginTop: '200px' }}>
<CircularProgress />
</Box>
);
}
return (
<>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Progress</TableCell>
<TableCell>Status</TableCell>
<TableCell>Action</TableCell>
<TableCell>Created</TableCell>
</TableRow>
</TableHead>
<TableBody>
{processes.map((process: ProcessesResponseInterface, index: number) => (
<TableRow key={process.id}>
<TableCell>{process.name}</TableCell>
<TableCell>
{!process.progress && !isFinished(process) && <LinearProgress/>}
{!process.progress && isFinished(process) && <LinearProgress variant="determinate" value={100}/>}
{process.progress && <LinearProgress variant="determinate" value={process.progress.percent}/>}
{process.progress && <span>
{`${process.progress.progress}`} / {`${process.progress.total}`} - {process.progress.percent}% [{process.progress.memory}] / {process.progress.remaining}
</span>}
{process.canPlay && <IconButton onClick={() => openDialog(process, Action.Play)} title={`Play`} aria-label="Play">
<PlayCircleOutline/>
</IconButton>}
{process.canPause && <IconButton onClick={() => openDialog(process, Action.Pause)} title={`Pause`} aria-label="Pause">
<PauseCircleOutline/>
</IconButton>}
{process.canStop && <IconButton onClick={() => openDialog(process, Action.Stop)} title={`Stop`} aria-label="Stop">
<StopCircleOutlined/>
</IconButton>}
</TableCell>
<TableCell>
{Status.Error === process.status && <IconButton title={`Error`} aria-label="Error">
<ErrorOutline/>
</IconButton>}
{Status.Success === process.status && <IconButton title={`Success`} aria-label="Success">
<CheckCircleOutline/>
</IconButton>}
{Status.Running === process.status && <IconButton title={`Running`} aria-label="Running">
<RunCircleOutlined/>
</IconButton>}
{Status.Cancelled === process.status && <IconButton title={`Cancelled`} aria-label="Cancelled">
<StopCircleOutlined/>
</IconButton>}
{Status.Wait === process.status && <IconButton title={`Wait`} aria-label="Wait">
<HourglassEmptyOutlined/>
</IconButton>}
</TableCell>
<TableCell>
{process.canRepeat && <IconButton onClick={() => openDialog(process, Action.Repeat)} title={`Repeat`} aria-label="Repeat">
<ReplayOutlined/>
</IconButton>}
{process.canKill && <IconButton onClick={() => openDialog(process, Action.Kill)} title={`Kill`} aria-label="Kill">
<DeleteForeverOutlined/>
</IconButton>}
{process?.outputId && <IconButton title={`Output`} onClick={() => output(process)} aria-label="Output">
<FactCheckOutlined/>
</IconButton>}
</TableCell>
<TableCell title={new Date(process.createdAt).toLocaleString()}>
{new Date(process.createdAt).toLocaleDateString()}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<TablePagination
component="div"
count={count}
rowsPerPage={20}
page={page}
onPageChange={handleChangePage}
/>
{selectedProcess && <ConfirmDialog
title={selectedProcess.name}
open={Action.Repeat === action}
agreeCallback={agreeCallback}
modifyCallback={async () => {
setAction(Action.Run)
setModalLoading(true)
let {data: command} = await smClient.getCommand(selectedProcess.name)
setCommand(command)
setModalLoading(false)
}}
closeCallback={() => {setAction(null)}}>
Reply?
</ConfirmDialog>}
{selectedProcess && <ConfirmDialog
title={selectedProcess.name}
open={Action.Run === action}
agreeCallback={agreeCallback}
closeCallback={() => {setAction(null)}}>
{modalLoading && <Box sx={{ display: 'flex' }}>
<CircularProgress />
</Box>}
{!modalLoading && !!command && (Action.Run === action) && <Command
command={command}
optionsParams={selectedProcess.options}
argumentsParams={selectedProcess.arguments}
callback={callback}/>}
</ConfirmDialog>}
{selectedProcess && <ConfirmDialog
title={`Are you sure?`}
open={ !!action && ([Action.Play, Action.Pause, Action.Stop, Action.Kill].indexOf(action) > -1) }
agreeCallback={async () => {
Action.Play === action && await smClient.playProcess(selectedProcess.id)
Action.Pause === action && await smClient.pauseProcess(selectedProcess.id)
Action.Stop === action && await smClient.stopProcess(selectedProcess.id)
Action.Kill === action && await smClient.killProcess(selectedProcess.id)
setAction(null)
}}
closeCallback={() => {setAction(null)}}>
{selectedProcess.name}
</ConfirmDialog>}
</>
)
}