Поправил логику вывода прогресса

Добавил апрув

api/sm/requests/approve-process.ts

@@ -0,0 +1,3 @@
+export interface ApproveProcessRequest {
+    id: string
+}

api/sm/responses/processes.ts

@@ -37,6 +37,7 @@ export interface ProcessInterface {
     canRepeat: boolean
     canStop: boolean
     canKill: boolean
+    canApprove: boolean
 }
 
 export enum Status {

api/sm/schemas/approve-process.ts

@@ -0,0 +1,10 @@
+import {Method, SchemaInterface} from "../../schema-client";
+
+class ApproveProcessSchema implements SchemaInterface {
+    method = Method.POST
+    url = '/system-monitoring/processes/{id}/approve'
+    contentType = null
+}
+
+export let approveProcessSchema = new ApproveProcessSchema()
+export default approveProcessSchema

api/sm/sm-client.ts

@@ -8,7 +8,9 @@ import {CommandInterface} from "./responses/comamnds";
 import commandsSchema from "./schemas/commands";
 import runCommandsSchema from "./schemas/run-commands";
 import {RepeatProcessRequest} from "./requests/repeat-process";
+import {ApproveProcessRequest} from "./requests/approve-process";
 import repeatProcessSchema from "./schemas/repeat-process";
+import approveProcessSchema from "./schemas/approve-process";
 import processOutputSchema from "./schemas/process-output";
 import {ProcessOutputRequest} from "./requests/process-ouput";
 import playProcessSchema from "./schemas/play-process";
@@ -52,6 +54,14 @@ export class SMClient extends SchemaClient {
         }
     }
 
+    async approveProcess(data: ApproveProcessRequest): Promise<ResponseInterface> {
+        let { responseData, headers } = await this.send(approveProcessSchema, data)
+        return {
+            data: responseData as ProcessInterface[],
+            headers: headers
+        }
+    }
+
     async repeatProcess(data: RepeatProcessRequest): Promise<ResponseInterface> {
         let { responseData, headers } = await this.send(repeatProcessSchema, data)
         return {

components/elements/processes/index.tsx

@@ -1,5 +1,5 @@
 import styles from './styles.module.css'
-import {useEffect, useState} from "react"
+import {useContext, 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"
@@ -10,6 +10,7 @@ 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 ThumbUpAltOutlined from '@mui/icons-material/ThumbUpAltOutlined'
 import {
     Box,
     TextField,
@@ -30,6 +31,7 @@ import Command from "../commands/elements/command";
 import {CommandInterface} from "../../../api/sm/responses/comamnds";
 import Grid from '@mui/material/Grid';
 import {useApi} from "../../../hooks/use-api";
+import Context from "../../../context/token";
 
 enum Action {
     Run,
@@ -38,9 +40,11 @@ enum Action {
     Kill,
     Play,
     Pause,
+    Approve,
 }
 
 export default function Processes() {
+    const {token} = useContext(Context)
     const [processes, setProcesses] = useState<ProcessInterface[]>([]);
     const [commands, setCommands] = useState<CommandInterface[]>([]);
     const [page, setPage] = useState<number>(0);
@@ -116,6 +120,8 @@ export default function Processes() {
     }, [action]);
 
     let isFinished = (process: ProcessInterface) => process.cancelledAt || process.completedAt
+    let isCancelled = (process: ProcessInterface) => process.cancelledAt
+    let isRunning = (process: ProcessInterface) => process.startedAt && !isFinished(process)
 
     const handleChangePage = (event: any, page: number) => {
         setPage(page);
@@ -145,6 +151,12 @@ export default function Processes() {
             })
         }
 
+        if (action === Action.Approve) {
+            await api.approveProcess({
+                id: selectedProcess.id,
+            })
+        }
+
         if (action === Action.Repeat) {
             await api.repeatProcess({
                 id: selectedProcess.id,
@@ -213,12 +225,14 @@ export default function Processes() {
                             <TableRow key={process.id}>
                                 <TableCell>{process.name}</TableCell>
                                 <TableCell>
-                                    {!process.progress && !isFinished(process) && <LinearProgress/>}
+                                    {!process.progress && !isFinished(process) && isRunning(process) && <LinearProgress/>}
-                                    {!process.progress && isFinished(process) && <LinearProgress variant="determinate" value={100}/>}
+                                    {!process.progress && !isFinished(process) && !isRunning(process) && <LinearProgress variant="determinate" value={0}/>}
+                                    {!process.progress && isFinished(process) && !isCancelled(process) && <LinearProgress variant="determinate" value={100}/>}
+                                    {!process.progress && isFinished(process) && isCancelled(process) && <LinearProgress variant="determinate" value={0}/>}
                                     {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}
+                                        {`${process.progress.progress}`} / {`${process.progress.total}`} - {process.progress.percent}% [{process.progress.memory}] / {process.progress.remaining}
-                                </span>}
+                                    </span>}
                                     {process.canPlay && <IconButton onClick={() => openDialog(process, Action.Play)} title={`Play`} aria-label="Play">
                                         <PlayCircleOutline/>
                                     </IconButton>}
@@ -247,6 +261,9 @@ export default function Processes() {
                                     </IconButton>}
                                 </TableCell>
                                 <TableCell>
+                                    {process.canApprove && token?.permissions.indexOf('approve_process') > -1 && <IconButton onClick={() => openDialog(process, Action.Approve)} title={`Approve`} aria-label="Approve">
+                                        <ThumbUpAltOutlined/>
+                                    </IconButton>}
                                     {process.canRepeat && <IconButton onClick={() => openDialog(process, Action.Repeat)} title={`Repeat`} aria-label="Repeat">
                                         <ReplayOutlined/>
                                     </IconButton>}
@@ -300,6 +317,13 @@ export default function Processes() {
                     argumentsParams={selectedProcess.arguments}
                     callback={callback}/>}
             </ConfirmDialog>}
+            {selectedProcess && <ConfirmDialog
+                title={selectedProcess.name}
+                open={Action.Approve === action}
+                agreeCallback={agreeCallback}
+                closeCallback={() => {setAction(null)}}>
+                Approve?
+            </ConfirmDialog>}
             {selectedProcess && <ConfirmDialog
                 title={`Are you sure?`}
                 open={ !!action && ([Action.Play, Action.Pause, Action.Stop, Action.Kill].indexOf(action) > -1) }