Вынес кнопку наверх

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

@@ -4,7 +4,7 @@ import Arguments from "../arguments";
 import {OptionInterface} from "../option";
 import {ArgumentInterface} from "../argument";
 import {Provider} from "./context";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 
 export interface CommandInterface {
     class: string,
@@ -14,28 +14,19 @@ export interface CommandInterface {
     arguments: ArgumentInterface[],
 }
 
-export default function Command(command: CommandInterface) {
+interface CommandComponentInterface {
+    command: CommandInterface,
+    callback: any,
+}
+
+export default function Command({command, callback}: CommandComponentInterface) {
     const [optionList, setOptionList] = useState<Record<string, any>>({});
     const [argumentList, setArgumentList] = useState<Record<string, any>>({});
 
-    let onClick = async (event: any) => {
-        let url = `http://fmw.sipachev.sv/system-monitoring/commands/${command.name}/run`
-        let data = {
-            options: optionList,
-            arguments: argumentList,
-        }
-        console.log('data', data)
-        let response = await fetch(url, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json;charset=utf-8',
-                'X-Plugin-Token': 'passw0rd'
-            },
-            body: JSON.stringify(data)
-        });
-        let result = await response.json();
-        console.log('result', result)
-    }
+    useEffect(() => {
+        callback && callback(command.name, optionList, argumentList)
+    }, [optionList, argumentList])
+
     return (
         <Provider value={{optionList, setOptionList, argumentList, setArgumentList}}>
             <div className={styles.task}>
@@ -44,9 +35,6 @@ export default function Command(command: CommandInterface) {
                     <Options optionList={command.options} />
                     <Arguments argumentList={command.arguments} />
                 </div>
-                <div>
-                    <button onClick={onClick}>Run</button>
-                </div>
             </div>
         </Provider>
     )

components/elements/commands/index.tsx

@@ -1,9 +1,11 @@
-import {Table, TableBody, TableCell, TableHead, TableRow} from "@mui/material";
+import {Table, TableBody, TableCell, TableHead, TableRow, IconButton} from "@mui/material";
 import Command, {CommandInterface} from "./elements/command";
 import {useEffect, useState} from "react";
+import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline';
 
 export default function Commands() {
     const [commands, setCommands] = useState<CommandInterface[]>([]);
+    const [command2data, setCommand2data] = useState<Record<string, any>>({});
 
     let refreshCommands = async () => {
         let response = await fetch('http://fmw.sipachev.sv/system-monitoring/commands', {
@@ -31,11 +33,40 @@ export default function Commands() {
                 </TableRow>
             </TableHead>
             <TableBody>
-                {commands.map((command: CommandInterface, index: number) => (
-                    <TableRow key={command.name}>
-                        <TableCell><Command key={index} {...command} /></TableCell>
-                    </TableRow>
-                ))}
+                {commands.map((command: CommandInterface, index: number) => {
+                    let callback = (name: string, optionList: Record<string, any>, argumentList: Record<string, any>) => {
+                        let temp = {
+                            ...command2data
+                        }
+                        temp[name] = {
+                            options: optionList,
+                            arguments: argumentList,
+                        }
+                        setCommand2data(temp)
+                    }
+                    let runCommand = async () => {
+                        let url = `http://fmw.sipachev.sv/system-monitoring/commands/${command.name}/run`
+                        let data = command2data[command.name] || {}
+                        let response = await fetch(url, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json;charset=utf-8',
+                                'X-Plugin-Token': 'passw0rd'
+                            },
+                            body: JSON.stringify(data)
+                        });
+                    }
+                    return (
+                        <TableRow key={command.name}>
+                            <TableCell><Command key={index} command={command} callback={callback} /></TableCell>
+                            <TableCell>
+                                <IconButton onClick={runCommand} aria-label="run">
+                                    <PlayCircleOutlineIcon />
+                                </IconButton>
+                            </TableCell>
+                        </TableRow>
+                    )
+                })}
             </TableBody>
         </Table>
     )