api/sm/schemas/command.ts

@@ -1,10 +0,0 @@
-import {Method, SchemaInterface} from "../../schema-client";
-
-class CommandSchema implements SchemaInterface {
-    method = Method.GET
-    url = '/system-monitoring/commands/{commandName}'
-    contentType = null;
-}
-
-export let commandSchema = new CommandSchema()
-export default commandSchema

api/sm/sm-client.ts

@@ -15,7 +15,6 @@ import playProcessSchema from "./schemas/play-process";
 import pauseProcessSchema from "./schemas/pause-process";
 import stopProcessSchema from "./schemas/stop-process";
 import killProcessSchema from "./schemas/kill-process";
-import commandSchema from "./schemas/command";
 
 export class SMClient {
     schemaClient: SchemaClient
@@ -34,16 +33,6 @@ export class SMClient {
         }
     }
 
-    async getCommand(name: string): Promise<ResponseInterface<CommandResponseInterface>> {
-        let { responseData, headers } = await this.schemaClient.send(commandSchema, {
-            commandName: name
-        })
-        return {
-            data: responseData,
-            headers: headers
-        }
-    }
-
     async runCommand(data: any): Promise<ResponseInterface> {
         let { headers } = await this.schemaClient.send(runCommandsSchema, data)
         return {

components/elements/commands/elements/argument/index.tsx

@@ -28,7 +28,8 @@ export default function Argument(argument: ArgumentInterface) {
     }
     return (
         <span>
-            <TextField onInput={onInput} label={argument.name} value={value} size="small" variant="outlined" />&nbsp;
+            <TextField onInput={onInput} placeholder={argument.name} value={value} size="small" variant="outlined" />&nbsp;
+            {/*<input onInput={onInput} placeholder={argument.name} value={value} type="text"/>&nbsp;*/}
         </span>
     )
 }

components/elements/commands/elements/command/index.tsx

@@ -17,13 +17,11 @@ export interface CommandInterface {
 interface CommandComponentInterface {
     command: CommandInterface,
     callback: any,
-    optionsParams?: Record<string, any>,
-    argumentsParams?: Record<string, any>,
 }
 
-export default function Command({command, callback, optionsParams, argumentsParams}: CommandComponentInterface) {
-    const [optionList, setOptionList] = useState<Record<string, any>>(optionsParams || {});
-    const [argumentList, setArgumentList] = useState<Record<string, any>>(argumentsParams || {});
+export default function Command({command, callback}: CommandComponentInterface) {
+    const [optionList, setOptionList] = useState<Record<string, any>>({});
+    const [argumentList, setArgumentList] = useState<Record<string, any>>({});
 
     useEffect(() => {
         callback && callback(command.name, optionList, argumentList)
@@ -33,6 +31,7 @@ export default function Command({command, callback, optionsParams, argumentsPara
         <Provider value={{optionList, setOptionList, argumentList, setArgumentList}}>
             <div>
                 <div title={command.description}>
+                    {command.name}&nbsp;
                     <Options optionList={command.options} />
                     <Arguments argumentList={command.arguments} />
                 </div>

components/elements/commands/elements/options/index.tsx

@@ -2,7 +2,7 @@ import styles from './styles.module.css'
 import Option, {OptionInterface} from '../option'
 import {useContext, useEffect, useState} from "react";
 import Context, {ContextInterface} from "../command/context";
-import {Select, OutlinedInput, FormControl, MenuItem, Checkbox, ListItemText} from "@mui/material";
+import {Select, MenuItem, Checkbox, ListItemText} from "@mui/material";
 
 interface OptionsInterface {
     optionList: OptionInterface[]
@@ -45,11 +45,10 @@ export default function Options({optionList}: OptionsInterface) {
                 <>
                     <Select
                         value={selectedValues}
-                        label="Options"
+                        label="Option"
                         multiple
                         displayEmpty
                         onChange={handleChange}
-                        input={<OutlinedInput />}
                         renderValue={(selectedValues) => `Options`}
                         size="small"
                     >

components/elements/commands/index.tsx

@@ -7,14 +7,12 @@ import ConfirmDialog from "../confirm-dialog";
 import TabContext from "../../../context/tab";
 import {TabEnum} from "../../../pages";
 import smClient from "../../../api/sm/sm-client";
-import Send from "@mui/icons-material/Send"
 
 export default function Commands() {
     const {setTab} = useContext(TabContext)
     const [commands, setCommands] = useState<CommandInterface[]>([]);
     const [selectedCommand, setSelectedCommand] = useState<CommandInterface|null>(null);
-    const [optionList, setOptionList] = useState<Record<string, any>>({});
-    const [argumentList, setArgumentList] = useState<Record<string, any>>({});
+    const [command2data, setCommand2data] = useState<Record<string, any>>({});
     const [value, setValue] = useState<string | null>('');
     const [open, setOpen] = useState<boolean>(false);
 
@@ -35,23 +33,29 @@ export default function Commands() {
     let variants = commands.map((command: CommandInterface, index: number) => command.name);
 
     let callback = (name: string, optionList: Record<string, any>, argumentList: Record<string, any>) => {
-        setOptionList(optionList)
-        setArgumentList(argumentList)
+        let temp = {
+            ...command2data
+        }
+        temp[name] = {
+            options: optionList,
+            arguments: argumentList,
+        }
+        setCommand2data(temp)
     }
     let lock = false
     let runCommand = async (dialogId: string) => {
-        if (!selectedCommand) {
+        if (lock) {
             return
         }
-        if (lock) {
+        if (!selectedCommand) {
             return
         }
         lock = true
+        let data = command2data[selectedCommand.name] || {}
+        data['requestId'] = dialogId;
         await smClient.runCommand({
             commandName: selectedCommand.name,
-            options: optionList,
-            arguments: argumentList,
-            requestId: dialogId,
+            ...data
         })
         lock = false
         setTab(TabEnum.Processes)
@@ -71,13 +75,27 @@ export default function Commands() {
                     options={variants}
                     renderInput={(params) => <TextField {...params} label="Commands" />}
                 />
-                <IconButton onClick={() => selectedCommand && setOpen(true)} title={`Execute`} aria-label="Execute">
-                    <Send color={selectedCommand ? 'primary' : 'inherit'} />
-                </IconButton>
             </div>
-            {selectedCommand && <ConfirmDialog title={selectedCommand.name} open={open} agreeCallback={runCommand} closeCallback={() => setOpen(false)}>
-                <Command command={selectedCommand} callback={callback} />
-            </ConfirmDialog>}
+
+            <Table>
+                <TableHead>
+                    <TableRow>
+                        <TableCell>Name</TableCell>
+                        <TableCell>Action</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {selectedCommand && <TableRow key={selectedCommand.name}>
+                        <TableCell><Command command={selectedCommand} callback={callback} /></TableCell>
+                        <TableCell>
+                            <IconButton onClick={() => setOpen(true)} aria-label="run">
+                                <PlayCircleOutline />
+                            </IconButton>
+                        </TableCell>
+                    </TableRow>}
+                </TableBody>
+            </Table>
+            <ConfirmDialog open={open} text={'$$$'} agreeCallback={runCommand} closeCallback={() => setOpen(false)}/>
         </>
     )
 }

components/elements/commands/styles.module.css

@@ -1,5 +1,3 @@
 .autocomplete {
     width: 100%;
-    display: grid;
-    grid-template-columns: 11fr 1fr;
 }

components/elements/confirm-dialog/index.tsx

@@ -3,20 +3,18 @@ import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import { v4 } from "uuid"
 
 interface ConfirmDialogInterface {
     open: boolean
-    title: string
-    closeCallback?: any
-    modifyCallback?: any
-    agreeCallback?: any
-    children: any
+    closeCallback: any
+    agreeCallback: any
+    text: string
 }
 
-export default function ConfirmDialog({open, title, agreeCallback, modifyCallback, closeCallback, children}: ConfirmDialogInterface) {
-    let dialogId = v4()
+export default function ConfirmDialog({open, agreeCallback, closeCallback, text}: ConfirmDialogInterface) {
     return (
         <Dialog
             open={open}
@@ -25,17 +23,18 @@ export default function ConfirmDialog({open, title, agreeCallback, modifyCallbac
             aria-describedby="alert-dialog-description"
         >
             <DialogTitle>
-                {title}
+                {"Are you sure?"}
             </DialogTitle>
             <DialogContent>
-                {children}
+                <DialogContentText>
+                    {text}
+                </DialogContentText>
             </DialogContent>
             <DialogActions>
-                {agreeCallback && <Button onClick={() => agreeCallback(dialogId)} autoFocus>
+                <Button onClick={() => agreeCallback(v4())} autoFocus>
                     Agree
-                </Button>}
-                {modifyCallback && <Button onClick={modifyCallback}>Modify</Button>}
-                {closeCallback && <Button onClick={closeCallback}>Disagree</Button>}
+                </Button>
+                <Button onClick={closeCallback}>Disagree</Button>
             </DialogActions>
         </Dialog>
     );

components/elements/processes/index.tsx

@@ -14,7 +14,6 @@ import {IconButton, LinearProgress, TableContainer, Table, TableBody, TableCell,
 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 {
     Repeat,
@@ -29,12 +28,8 @@ export default function Processes() {
     const [page, setPage] = useState<number>(0);
     const [count, setCount] = useState<number>(0);
     const [open, setOpen] = useState<boolean>(false);
-    const [modify, setModify] = useState<boolean>(false);
     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 () => {
@@ -118,11 +113,6 @@ export default function Processes() {
         setAction(null)
     }
 
-    let callback = (name: string, optionList: Record<string, any>, argumentList: Record<string, any>) => {
-        setOptionList(optionList)
-        setArgumentList(argumentList)
-    }
-
     return (
         <>
             <TableContainer>
@@ -200,27 +190,10 @@ export default function Processes() {
                 page={page}
                 onPageChange={handleChangePage}
             />
-            {selectedProcess && <ConfirmDialog
-                title={selectedProcess.name}
-                open={open}
-                agreeCallback={agreeCallback}
-                modifyCallback={async () => {
-                    let {data: command} = await smClient.getCommand(selectedProcess.name)
-                    setCommand(command)
-                    setModify(true)
-                }}
-                closeCallback={() => {
+            <ConfirmDialog open={open} text={'!!!'} agreeCallback={agreeCallback} closeCallback={() => {
                 setSelectedProcess(null)
                 setOpen(false)
-                    setCommand(null)
-                }}>
-                {!modify && `Reply?`}
-                {command && <Command
-                    command={command}
-                    optionsParams={selectedProcess.options}
-                    argumentsParams={selectedProcess.arguments}
-                    callback={callback}/>}
-            </ConfirmDialog>}
+            }}/>
         </>
     )
 }

pages/index.tsx

@@ -38,6 +38,7 @@ export default function Home() {
                     {tab === TabEnum.Commands && <Commands />}
                     {tab === TabEnum.Processes && <Processes />}
                 </TabProvider>
+
             </main>
         </>
     )