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 {ProcessInterface, Status} from "../../../api/sm/responses/processes"; import Command from "../commands/elements/command"; import {CommandInterface} from "../../../api/sm/responses/comamnds"; enum Action { Run, Repeat, Stop, Kill, Play, Pause, } export default function Processes() { const [processes, setProcesses] = useState([]); const [page, setPage] = useState(0); const [count, setCount] = useState(0); const [loading, setLoading] = useState(true); const [modalLoading, setModalLoading] = useState(true); const [action, setAction] = useState(null); const [command, setCommand] = useState(null); const [selectedProcess, setSelectedProcess] = useState(null); const [optionList, setOptionList] = useState>({}); const [argumentList, setArgumentList] = useState>({}); 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: ProcessInterface) => { 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: ProcessInterface) => process.cancelledAt || process.completedAt const handleChangePage = (event: any, page: number) => { setPage(page); } const openDialog = (process: ProcessInterface, 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, argumentList: Record) => { setOptionList(optionList) setArgumentList(argumentList) } if (loading) { return ( ); } 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}`} - {process.progress.percent}% [{process.progress.memory}] / {process.progress.remaining} } {process.canPlay && openDialog(process, Action.Play)} title={`Play`} aria-label="Play"> } {process.canPause && openDialog(process, Action.Pause)} title={`Pause`} aria-label="Pause"> } {process.canStop && openDialog(process, Action.Stop)} title={`Stop`} aria-label="Stop"> } {Status.Error === process.status && } {Status.Success === process.status && } {Status.Running === process.status && } {Status.Cancelled === process.status && } {Status.Wait === process.status && } {process.canRepeat && openDialog(process, Action.Repeat)} title={`Repeat`} aria-label="Repeat"> } {process.canKill && openDialog(process, Action.Kill)} title={`Kill`} aria-label="Kill"> } {process?.outputId && output(process)} aria-label="Output"> } {new Date(process.createdAt).toLocaleDateString()} ))}
{selectedProcess && { setAction(Action.Run) setModalLoading(true) let {data: command} = await smClient.getCommand(selectedProcess.name) setCommand(command) setModalLoading(false) }} closeCallback={() => {setAction(null)}}> Reply? } {selectedProcess && {setAction(null)}}> {modalLoading && } {!modalLoading && !!command && (Action.Run === action) && } } {selectedProcess && -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} } ) }