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

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,16 +28,13 @@ export default function Commands() {
         refreshCommands()
     }, [])
 
-    return (
+    useEffect(() => {
-        <Table>
+        let command = commands.filter((command) => command.name === value)
-            <TableHead>
+        setSelectedCommand(command[0] || null)
-                <TableRow>
+    }, [value])
-                    <TableCell>Name</TableCell>
+
-                    <TableCell>Action</TableCell>
+    let variants = commands.map((command: CommandInterface, index: number) => command.name);
-                </TableRow>
+
-            </TableHead>
-            <TableBody>
-                {commands.map((command: CommandInterface, index: number) => {
     let callback = (name: string, optionList: Record<string, any>, argumentList: Record<string, any>) => {
         let temp = {
             ...command2data
@@ -50,9 +50,12 @@ export default function Commands() {
         if (lock) {
             return
         }
+        if (!selectedCommand) {
+            return
+        }
         lock = true
-                        let url = `http://fmw.sipachev.sv/system-monitoring/commands/${command.name}/run`
+        let url = `http://fmw.sipachev.sv/system-monitoring/commands/${selectedCommand.name}/run`
-                        let data = command2data[command.name] || {}
+        let data = command2data[selectedCommand.name] || {}
         data['requestId'] = requestId;
         let response = await fetch(url, {
             method: 'POST',
@@ -64,18 +67,41 @@ export default function Commands() {
         });
         lock = false
     }
+
     return (
-                        <TableRow key={command.name}>
+        <>
-                            <TableCell><Command key={index} command={command} callback={callback} /></TableCell>
+            <br/>
+            <div className={styles.autocomplete}>
+                <Autocomplete
+                    value={value}
+                    onChange={(event: any, newValue: string | null) => {
+                        setValue(newValue);
+                    }}
+                    disablePortal
+                    id="combo-box-demo"
+                    options={variants}
+                    renderInput={(params) => <TextField {...params} label="Commands" />}
+                />
+            </div>
+
+            <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={runCommand} aria-label="run">
                                 <PlayCircleOutline />
                             </IconButton>
                         </TableCell>
-                        </TableRow>
+                    </TableRow>}
-                    )
-                })}
                 </TableBody>
             </Table>
+        </>
     )
 }

components/elements/commands/styles.module.css

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