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. 31
      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 pauseProcessSchema from "./schemas/pause-process";
import stopProcessSchema from "./schemas/stop-process"; import stopProcessSchema from "./schemas/stop-process";
import killProcessSchema from "./schemas/kill-process"; import killProcessSchema from "./schemas/kill-process";
import commandSchema from "./schemas/command";
export class SMClient { export class SMClient {
schemaClient: SchemaClient 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> { async runCommand(data: any): Promise<ResponseInterface> {
let { headers } = await this.schemaClient.send(runCommandsSchema, data) let { headers } = await this.schemaClient.send(runCommandsSchema, data)
return { return {

@ -28,7 +28,8 @@ export default function Argument(argument: ArgumentInterface) {
} }
return ( return (
<span> <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> </span>
) )
} }

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

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

@ -7,14 +7,12 @@ import ConfirmDialog from "../confirm-dialog";
import TabContext from "../../../context/tab"; import TabContext from "../../../context/tab";
import {TabEnum} from "../../../pages"; import {TabEnum} from "../../../pages";
import smClient from "../../../api/sm/sm-client"; import smClient from "../../../api/sm/sm-client";
import Send from "@mui/icons-material/Send"
export default function Commands() { export default function Commands() {
const {setTab} = useContext(TabContext) const {setTab} = useContext(TabContext)
const [commands, setCommands] = useState<CommandInterface[]>([]); const [commands, setCommands] = useState<CommandInterface[]>([]);
const [selectedCommand, setSelectedCommand] = useState<CommandInterface|null>(null); const [selectedCommand, setSelectedCommand] = useState<CommandInterface|null>(null);
const [optionList, setOptionList] = useState<Record<string, any>>({}); const [command2data, setCommand2data] = useState<Record<string, any>>({});
const [argumentList, setArgumentList] = useState<Record<string, any>>({});
const [value, setValue] = useState<string | null>(''); const [value, setValue] = useState<string | null>('');
const [open, setOpen] = useState<boolean>(false); 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 variants = commands.map((command: CommandInterface, index: number) => command.name);
let callback = (name: string, optionList: Record<string, any>, argumentList: Record<string, any>) => { let callback = (name: string, optionList: Record<string, any>, argumentList: Record<string, any>) => {
setOptionList(optionList) let temp = {
setArgumentList(argumentList) ...command2data
}
temp[name] = {
options: optionList,
arguments: argumentList,
}
setCommand2data(temp)
} }
let lock = false let lock = false
let runCommand = async (dialogId: string) => { let runCommand = async (dialogId: string) => {
if (!selectedCommand) { if (lock) {
return return
} }
if (lock) { if (!selectedCommand) {
return return
} }
lock = true lock = true
let data = command2data[selectedCommand.name] || {}
data['requestId'] = dialogId;
await smClient.runCommand({ await smClient.runCommand({
commandName: selectedCommand.name, commandName: selectedCommand.name,
options: optionList, ...data
arguments: argumentList,
requestId: dialogId,
}) })
lock = false lock = false
setTab(TabEnum.Processes) setTab(TabEnum.Processes)
@ -71,13 +75,27 @@ export default function Commands() {
options={variants} options={variants}
renderInput={(params) => <TextField {...params} label="Commands" />} renderInput={(params) => <TextField {...params} label="Commands" />}
/> />
<IconButton onClick={() => selectedCommand && setOpen(true)} title={`Execute`} aria-label="Execute">
<Send color={selectedCommand ? 'primary' : 'inherit'} />
</IconButton>
</div> </div>
{selectedCommand && <ConfirmDialog title={selectedCommand.name} open={open} agreeCallback={runCommand} closeCallback={() => setOpen(false)}>
<Command command={selectedCommand} callback={callback} /> <Table>
</ConfirmDialog>} <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 { .autocomplete {
width: 100%; 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 Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions'; import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent'; import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle'; import DialogTitle from '@mui/material/DialogTitle';
import { v4 } from "uuid" import { v4 } from "uuid"
interface ConfirmDialogInterface { interface ConfirmDialogInterface {
open: boolean open: boolean
title: string closeCallback: any
closeCallback?: any agreeCallback: any
modifyCallback?: any text: string
agreeCallback?: any
children: any
} }
export default function ConfirmDialog({open, title, agreeCallback, modifyCallback, closeCallback, children}: ConfirmDialogInterface) { export default function ConfirmDialog({open, agreeCallback, closeCallback, text}: ConfirmDialogInterface) {
let dialogId = v4()
return ( return (
<Dialog <Dialog
open={open} open={open}
@ -25,17 +23,18 @@ export default function ConfirmDialog({open, title, agreeCallback, modifyCallbac
aria-describedby="alert-dialog-description" aria-describedby="alert-dialog-description"
> >
<DialogTitle> <DialogTitle>
{title} {"Are you sure?"}
</DialogTitle> </DialogTitle>
<DialogContent> <DialogContent>
{children} <DialogContentText>
{text}
</DialogContentText>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
{agreeCallback && <Button onClick={() => agreeCallback(dialogId)} autoFocus> <Button onClick={() => agreeCallback(v4())} autoFocus>
Agree Agree
</Button>} </Button>
{modifyCallback && <Button onClick={modifyCallback}>Modify</Button>} <Button onClick={closeCallback}>Disagree</Button>
{closeCallback && <Button onClick={closeCallback}>Disagree</Button>}
</DialogActions> </DialogActions>
</Dialog> </Dialog>
); );

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

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

Loading…
Cancel
Save