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

jwt
Sipachev Igor 2 years ago
parent 46580f0a78
commit 92865fcb0a
  1. 130
      components/elements/commands/index.tsx
  2. 3
      components/elements/commands/styles.module.css

@ -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>
<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 lock = false
let runCommand = async () => {
if (lock) {
return
}
lock = true
let url = `http://fmw.sipachev.sv/system-monitoring/commands/${command.name}/run`
let data = command2data[command.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 (
<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>
<>
<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>}
</TableBody>
</Table>
</>
)
}

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