Изменил дизайн для запуска команды

components/elements/commands/index.tsx

@@ -1,4 +1,5 @@
-import {Table, TableBody, TableCell, TableHead, TableRow, IconButton} from "@mui/material";
+import styles from './styles.module.css'
+import {Table, TableBody, TableCell, TableHead, TableRow, IconButton, Autocomplete, TextField} from "@mui/material";
 import Command, {CommandInterface} from "./elements/command";
 import {useEffect, useState} from "react";
 import PlayCircleOutline from '@mui/icons-material/PlayCircleOutline';
@@ -6,7 +7,9 @@ import { v4 } from "uuid"
 
 export default function Commands() {
     const [commands, setCommands] = useState<CommandInterface[]>([]);
+    const [selectedCommand, setSelectedCommand] = useState<CommandInterface|null>(null);
     const [command2data, setCommand2data] = useState<Record<string, any>>({});
+    const [value, setValue] = useState<string | null>('');
     let requestId = v4()
 
     let refreshCommands = async () => {
@@ -25,57 +28,80 @@ export default function Commands() {
         refreshCommands()
     }, [])
 
+    useEffect(() => {
+        let command = commands.filter((command) => command.name === value)
+        setSelectedCommand(command[0] || null)
+    }, [value])
+
+    let variants = commands.map((command: CommandInterface, index: number) => command.name);
+
+    let callback = (name: string, optionList: Record<string, any>, argumentList: Record<string, any>) => {
+        let temp = {
+            ...command2data
+        }
+        temp[name] = {
+            options: optionList,
+            arguments: argumentList,
+        }
+        setCommand2data(temp)
+    }
+    let lock = false
+    let runCommand = async () => {
+        if (lock) {
+            return
+        }
+        if (!selectedCommand) {
+            return
+        }
+        lock = true
+        let url = `http://fmw.sipachev.sv/system-monitoring/commands/${selectedCommand.name}/run`
+        let data = command2data[selectedCommand.name] || {}
+        data['requestId'] = requestId;
+        let response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json;charset=utf-8',
+                'X-Plugin-Token': 'passw0rd'
+            },
+            body: JSON.stringify(data)
+        });
+        lock = false
+    }
+
     return (
-        <Table>
+        <>
-            <TableHead>
+            <br/>
-                <TableRow>
+            <div className={styles.autocomplete}>
-                    <TableCell>Name</TableCell>
+                <Autocomplete
-                    <TableCell>Action</TableCell>
+                    value={value}
-                </TableRow>
+                    onChange={(event: any, newValue: string | null) => {
-            </TableHead>
+                        setValue(newValue);
-            <TableBody>
+                    }}
-                {commands.map((command: CommandInterface, index: number) => {
+                    disablePortal
-                    let callback = (name: string, optionList: Record<string, any>, argumentList: Record<string, any>) => {
+                    id="combo-box-demo"
-                        let temp = {
+                    options={variants}
-                            ...command2data
+                    renderInput={(params) => <TextField {...params} label="Commands" />}
-                        }
+                />
-                        temp[name] = {
+            </div>
-                            options: optionList,
+
-                            arguments: argumentList,
+            <Table>
-                        }
+                <TableHead>
-                        setCommand2data(temp)
+                    <TableRow>
-                    }
+                        <TableCell>Name</TableCell>
-                    let lock = false
+                        <TableCell>Action</TableCell>
-                    let runCommand = async () => {
+                    </TableRow>
-                        if (lock) {
+                </TableHead>
-                            return
+                <TableBody>
-                        }
+                    {selectedCommand && <TableRow key={selectedCommand.name}>
-                        lock = true
+                        <TableCell><Command command={selectedCommand} callback={callback} /></TableCell>
-                        let url = `http://fmw.sipachev.sv/system-monitoring/commands/${command.name}/run`
+                        <TableCell>
-                        let data = command2data[command.name] || {}
+                            <IconButton onClick={runCommand} aria-label="run">
-                        data['requestId'] = requestId;
+                                <PlayCircleOutline />
-                        let response = await fetch(url, {
+                            </IconButton>
-                            method: 'POST',
+                        </TableCell>
-                            headers: {
+                    </TableRow>}
-                                'Content-Type': 'application/json;charset=utf-8',
+                </TableBody>
-                                'X-Plugin-Token': 'passw0rd'
+            </Table>
-                            },
+        </>
-                            body: JSON.stringify(data)
-                        });
-                        lock = false
-                    }
-                    return (
-                        <TableRow key={command.name}>
-                            <TableCell><Command key={index} command={command} callback={callback} /></TableCell>
-                            <TableCell>
-                                <IconButton onClick={runCommand} aria-label="run">
-                                    <PlayCircleOutline />
-                                </IconButton>
-                            </TableCell>
-                        </TableRow>
-                    )
-                })}
-            </TableBody>
-        </Table>
     )
 }

components/elements/commands/styles.module.css

@@ -0,0 +1,3 @@
+.autocomplete {
+    width: 100%;
+}