изменил дизайн

Стилизовал блок

api/sm/schemas/command.ts

@@ -0,0 +1,10 @@
+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,6 +15,7 @@ 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
@@ -33,6 +34,16 @@ 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,8 +28,7 @@ export default function Argument(argument: ArgumentInterface) {
     }
     return (
         <span>
-            <TextField onInput={onInput} placeholder={argument.name} value={value} size="small" variant="outlined" />&nbsp;
+            <TextField onInput={onInput} label={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,11 +17,13 @@ export interface CommandInterface {
 interface CommandComponentInterface {
     command: CommandInterface,
     callback: any,
+    optionsParams?: Record<string, any>,
+    argumentsParams?: Record<string, any>,
 }
 
-export default function Command({command, callback}: CommandComponentInterface) {
+export default function Command({command, callback, optionsParams, argumentsParams}: CommandComponentInterface) {
-    const [optionList, setOptionList] = useState<Record<string, any>>({});
+    const [optionList, setOptionList] = useState<Record<string, any>>(optionsParams || {});
-    const [argumentList, setArgumentList] = useState<Record<string, any>>({});
+    const [argumentList, setArgumentList] = useState<Record<string, any>>(argumentsParams || {});
 
     useEffect(() => {
         callback && callback(command.name, optionList, argumentList)
@@ -31,7 +33,6 @@ export default function Command({command, callback}: CommandComponentInterface)
         <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, MenuItem, Checkbox, ListItemText} from "@mui/material";
+import {Select, OutlinedInput, FormControl, MenuItem, Checkbox, ListItemText} from "@mui/material";
 
 interface OptionsInterface {
     optionList: OptionInterface[]
@@ -45,10 +45,11 @@ export default function Options({optionList}: OptionsInterface) {
                 <>
                     <Select
                         value={selectedValues}
-                        label="Option"
+                        label="Options"
                         multiple
                         displayEmpty
                         onChange={handleChange}
+                        input={<OutlinedInput />}
                         renderValue={(selectedValues) => `Options`}
                         size="small"
                     >

components/elements/commands/index.tsx

@@ -7,12 +7,14 @@ 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 [command2data, setCommand2data] = useState<Record<string, any>>({});
+    const [optionList, setOptionList] = useState<Record<string, any>>({});
+    const [argumentList, setArgumentList] = useState<Record<string, any>>({});
     const [value, setValue] = useState<string | null>('');
     const [open, setOpen] = useState<boolean>(false);
 
@@ -33,29 +35,23 @@ 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>) => {
-        let temp = {
+        setOptionList(optionList)
-            ...command2data
+        setArgumentList(argumentList)
-        }
-        temp[name] = {
-            options: optionList,
-            arguments: argumentList,
-        }
-        setCommand2data(temp)
     }
     let lock = false
     let runCommand = async (dialogId: string) => {
-        if (lock) {
-            return
-        }
         if (!selectedCommand) {
             return
         }
+        if (lock) {
+            return
+        }
         lock = true
-        let data = command2data[selectedCommand.name] || {}
-        data['requestId'] = dialogId;
         await smClient.runCommand({
             commandName: selectedCommand.name,
-            ...data
+            options: optionList,
+            arguments: argumentList,
+            requestId: dialogId,
         })
         lock = false
         setTab(TabEnum.Processes)
@@ -75,27 +71,13 @@ 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)}>
-            <Table>
+                <Command command={selectedCommand} callback={callback} />
-                <TableHead>
+            </ConfirmDialog>}
-                    <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,3 +1,5 @@
 .autocomplete {
     width: 100%;
+    display: grid;
+    grid-template-columns: 11fr 1fr;
 }

components/elements/confirm-dialog/index.tsx

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

components/elements/processes/index.tsx

@@ -14,6 +14,7 @@ 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,
@@ -28,8 +29,12 @@ 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 () => {
@@ -113,6 +118,11 @@ export default function Processes() {
         setAction(null)
     }
 
+    let callback = (name: string, optionList: Record<string, any>, argumentList: Record<string, any>) => {
+        setOptionList(optionList)
+        setArgumentList(argumentList)
+    }
+
     return (
         <>
             <TableContainer>
@@ -190,10 +200,27 @@ export default function Processes() {
                 page={page}
                 onPageChange={handleChangePage}
             />
-            <ConfirmDialog open={open} text={'!!!'} agreeCallback={agreeCallback} closeCallback={() => {
+            {selectedProcess && <ConfirmDialog
-                setSelectedProcess(null)
+                title={selectedProcess.name}
-                setOpen(false)
+                open={open}
-            }}/>
+                agreeCallback={agreeCallback}
+                modifyCallback={async () => {
+                    let {data: command} = await smClient.getCommand(selectedProcess.name)
+                    setCommand(command)
+                    setModify(true)
+                }}
+                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,7 +38,6 @@ export default function Home() {
                     {tab === TabEnum.Commands && <Commands />}
                     {tab === TabEnum.Processes && <Processes />}
                 </TabProvider>
-
             </main>
         </>
     )