Compare commits

..

No commits in common. '5ff2fbbc398c6b0873301d3011493daa842e2673' and 'ec41e91388c6afa04c8580cb1f11d63cd2f27cc6' have entirely different histories.

  1. 10
      api/sm/schemas/command.ts
  2. 11
      api/sm/sm-client.ts
  3. 3
      components/elements/commands/elements/argument/index.tsx
  4. 9
      components/elements/commands/elements/command/index.tsx
  5. 5
      components/elements/commands/elements/options/index.tsx
  6. 50
      components/elements/commands/index.tsx
  7. 2
      components/elements/commands/styles.module.css
  8. 25
      components/elements/confirm-dialog/index.tsx
  9. 35
      components/elements/processes/index.tsx
  10. 1
      pages/index.tsx

@ -1,10 +0,0 @@
import {Method, SchemaInterface} from "../../schema-client";
class CommandSchema implements SchemaInterface {
method = Method.GET
url = '/system-monitoring/commands/{commandName}'
contentType = null;
}
export let commandSchema = new CommandSchema()
export default commandSchema

@ -15,7 +15,6 @@ import playProcessSchema from "./schemas/play-process";
import pauseProcessSchema from "./schemas/pause-process";
import stopProcessSchema from "./schemas/stop-process";
import killProcessSchema from "./schemas/kill-process";
import commandSchema from "./schemas/command";
export class SMClient {
schemaClient: SchemaClient
@ -34,16 +33,6 @@ export class SMClient {
}
}
async getCommand(name: string): Promise<ResponseInterface<CommandResponseInterface>> {
let { responseData, headers } = await this.schemaClient.send(commandSchema, {
commandName: name
})
return {
data: responseData,
headers: headers
}
}
async runCommand(data: any): Promise<ResponseInterface> {
let { headers } = await this.schemaClient.send(runCommandsSchema, data)
return {

@ -28,7 +28,8 @@ export default function Argument(argument: ArgumentInterface) {
}
return (
<span>
<TextField onInput={onInput} label={argument.name} value={value} size="small" variant="outlined" />&nbsp;
<TextField onInput={onInput} placeholder={argument.name} value={value} size="small" variant="outlined" />&nbsp;
{/*<input onInput={onInput} placeholder={argument.name} value={value} type="text"/>&nbsp;*/}
</span>
)
}

@ -17,13 +17,11 @@ export interface CommandInterface {
interface CommandComponentInterface {
command: CommandInterface,
callback: any,
optionsParams?: Record<string, any>,
argumentsParams?: Record<string, any>,
}
export default function Command({command, callback, optionsParams, argumentsParams}: CommandComponentInterface) {
const [optionList, setOptionList] = useState<Record<string, any>>(optionsParams || {});
const [argumentList, setArgumentList] = useState<Record<string, any>>(argumentsParams || {});
export default function Command({command, callback}: CommandComponentInterface) {
const [optionList, setOptionList] = useState<Record<string, any>>({});
const [argumentList, setArgumentList] = useState<Record<string, any>>({});
useEffect(() => {
callback && callback(command.name, optionList, argumentList)
@ -33,6 +31,7 @@ export default function Command({command, callback, optionsParams, argumentsPara
<Provider value={{optionList, setOptionList, argumentList, setArgumentList}}>
<div>
<div title={command.description}>
{command.name}&nbsp;
<Options optionList={command.options} />
<Arguments argumentList={command.arguments} />
</div>

@ -2,7 +2,7 @@ import styles from './styles.module.css'
import Option, {OptionInterface} from '../option'
import {useContext, useEffect, useState} from "react";
import Context, {ContextInterface} from "../command/context";
import {Select, OutlinedInput, FormControl, MenuItem, Checkbox, ListItemText} from "@mui/material";
import {Select, MenuItem, Checkbox, ListItemText} from "@mui/material";
interface OptionsInterface {
optionList: OptionInterface[]
@ -45,11 +45,10 @@ export default function Options({optionList}: OptionsInterface) {
<>
<Select
value={selectedValues}
label="Options"
label="Option"
multiple
displayEmpty
onChange={handleChange}
input={<OutlinedInput />}
renderValue={(selectedValues) => `Options`}
size="small"
>

@ -7,14 +7,12 @@ import ConfirmDialog from "../confirm-dialog";
import TabContext from "../../../context/tab";
import {TabEnum} from "../../../pages";
import smClient from "../../../api/sm/sm-client";
import Send from "@mui/icons-material/Send"
export default function Commands() {
const {setTab} = useContext(TabContext)
const [commands, setCommands] = useState<CommandInterface[]>([]);
const [selectedCommand, setSelectedCommand] = useState<CommandInterface|null>(null);
const [optionList, setOptionList] = useState<Record<string, any>>({});
const [argumentList, setArgumentList] = useState<Record<string, any>>({});
const [command2data, setCommand2data] = useState<Record<string, any>>({});
const [value, setValue] = useState<string | null>('');
const [open, setOpen] = useState<boolean>(false);
@ -35,23 +33,29 @@ export default function Commands() {
let variants = commands.map((command: CommandInterface, index: number) => command.name);
let callback = (name: string, optionList: Record<string, any>, argumentList: Record<string, any>) => {
setOptionList(optionList)
setArgumentList(argumentList)
let temp = {
...command2data
}
temp[name] = {
options: optionList,
arguments: argumentList,
}
setCommand2data(temp)
}
let lock = false
let runCommand = async (dialogId: string) => {
if (!selectedCommand) {
if (lock) {
return
}
if (lock) {
if (!selectedCommand) {
return
}
lock = true
let data = command2data[selectedCommand.name] || {}
data['requestId'] = dialogId;
await smClient.runCommand({
commandName: selectedCommand.name,
options: optionList,
arguments: argumentList,
requestId: dialogId,
...data
})
lock = false
setTab(TabEnum.Processes)
@ -71,13 +75,27 @@ export default function Commands() {
options={variants}
renderInput={(params) => <TextField {...params} label="Commands" />}
/>
<IconButton onClick={() => selectedCommand && setOpen(true)} title={`Execute`} aria-label="Execute">
<Send color={selectedCommand ? 'primary' : 'inherit'} />
</IconButton>
</div>
{selectedCommand && <ConfirmDialog title={selectedCommand.name} open={open} agreeCallback={runCommand} closeCallback={() => setOpen(false)}>
<Command command={selectedCommand} callback={callback} />
</ConfirmDialog>}
<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={() => setOpen(true)} aria-label="run">
<PlayCircleOutline />
</IconButton>
</TableCell>
</TableRow>}
</TableBody>
</Table>
<ConfirmDialog open={open} text={'$$$'} agreeCallback={runCommand} closeCallback={() => setOpen(false)}/>
</>
)
}

@ -1,5 +1,3 @@
.autocomplete {
width: 100%;
display: grid;
grid-template-columns: 11fr 1fr;
}

@ -3,20 +3,18 @@ import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import { v4 } from "uuid"
interface ConfirmDialogInterface {
open: boolean
title: string
closeCallback?: any
modifyCallback?: any
agreeCallback?: any
children: any
closeCallback: any
agreeCallback: any
text: string
}
export default function ConfirmDialog({open, title, agreeCallback, modifyCallback, closeCallback, children}: ConfirmDialogInterface) {
let dialogId = v4()
export default function ConfirmDialog({open, agreeCallback, closeCallback, text}: ConfirmDialogInterface) {
return (
<Dialog
open={open}
@ -25,17 +23,18 @@ export default function ConfirmDialog({open, title, agreeCallback, modifyCallbac
aria-describedby="alert-dialog-description"
>
<DialogTitle>
{title}
{"Are you sure?"}
</DialogTitle>
<DialogContent>
{children}
<DialogContentText>
{text}
</DialogContentText>
</DialogContent>
<DialogActions>
{agreeCallback && <Button onClick={() => agreeCallback(dialogId)} autoFocus>
<Button onClick={() => agreeCallback(v4())} autoFocus>
Agree
</Button>}
{modifyCallback && <Button onClick={modifyCallback}>Modify</Button>}
{closeCallback && <Button onClick={closeCallback}>Disagree</Button>}
</Button>
<Button onClick={closeCallback}>Disagree</Button>
</DialogActions>
</Dialog>
);

@ -14,7 +14,6 @@ import {IconButton, LinearProgress, TableContainer, Table, TableBody, TableCell,
import ConfirmDialog from "../confirm-dialog";
import smClient from "../../../api/sm/sm-client";
import {ProcessesResponseInterface, Status} from "../../../api/sm/responses/processes";
import Command, {CommandInterface} from "../commands/elements/command";
enum Action {
Repeat,
@ -29,12 +28,8 @@ export default function Processes() {
const [page, setPage] = useState<number>(0);
const [count, setCount] = useState<number>(0);
const [open, setOpen] = useState<boolean>(false);
const [modify, setModify] = useState<boolean>(false);
const [action, setAction] = useState<Action | null>(null);
const [command, setCommand] = useState<CommandInterface | null>(null);
const [selectedProcess, setSelectedProcess] = useState<ProcessesResponseInterface | null>(null);
const [optionList, setOptionList] = useState<Record<string, any>>({});
const [argumentList, setArgumentList] = useState<Record<string, any>>({});
let refreshLock = false
let refreshProcesses = async () => {
@ -118,11 +113,6 @@ export default function Processes() {
setAction(null)
}
let callback = (name: string, optionList: Record<string, any>, argumentList: Record<string, any>) => {
setOptionList(optionList)
setArgumentList(argumentList)
}
return (
<>
<TableContainer>
@ -200,27 +190,10 @@ export default function Processes() {
page={page}
onPageChange={handleChangePage}
/>
{selectedProcess && <ConfirmDialog
title={selectedProcess.name}
open={open}
agreeCallback={agreeCallback}
modifyCallback={async () => {
let {data: command} = await smClient.getCommand(selectedProcess.name)
setCommand(command)
setModify(true)
}}
closeCallback={() => {
setSelectedProcess(null)
setOpen(false)
setCommand(null)
}}>
{!modify && `Reply?`}
{command && <Command
command={command}
optionsParams={selectedProcess.options}
argumentsParams={selectedProcess.arguments}
callback={callback}/>}
</ConfirmDialog>}
<ConfirmDialog open={open} text={'!!!'} agreeCallback={agreeCallback} closeCallback={() => {
setSelectedProcess(null)
setOpen(false)
}}/>
</>
)
}

@ -38,6 +38,7 @@ export default function Home() {
{tab === TabEnum.Commands && <Commands />}
{tab === TabEnum.Processes && <Processes />}
</TabProvider>
</main>
</>
)

Loading…
Cancel
Save