fms/components/elements/commands/index.tsx

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', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json;charset=utf-8',
                'X-Plugin-Token': 'passw0rd'
            },
        });
        const commands: CommandInterface[] = await response.json()
        setCommands(commands)
        setTimeout(() => refreshCommands, 1000)
    }

    useEffect(() => {
        refreshCommands()
    }, [])

    return (
        <Table>
            <TableHead>
                <TableRow>
                    <TableCell>Name</TableCell>
                    <TableCell>Action</TableCell>
                </TableRow>
            </TableHead>
            <TableBody>
                {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>
    )
}