изменил дизайн

jwt
Rinsvent 2 years ago
parent 27049764da
commit 5ff2fbbc39
  1. 11
      api/sm/sm-client.ts
  2. 3
      components/elements/commands/elements/argument/index.tsx
  3. 9
      components/elements/commands/elements/command/index.tsx
  4. 5
      components/elements/commands/elements/options/index.tsx
  5. 50
      components/elements/commands/index.tsx
  6. 25
      components/elements/confirm-dialog/index.tsx
  7. 35
      components/elements/processes/index.tsx
  8. 1
      pages/index.tsx

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

@ -17,11 +17,13 @@ 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}: CommandComponentInterface) { export default function Command({command, callback, optionsParams, argumentsParams}: CommandComponentInterface) {
const [optionList, setOptionList] = useState<Record<string, any>>({}); const [optionList, setOptionList] = useState<Record<string, any>>(optionsParams || {});
const [argumentList, setArgumentList] = useState<Record<string, any>>({}); const [argumentList, setArgumentList] = useState<Record<string, any>>(argumentsParams || {});
useEffect(() => { useEffect(() => {
callback && callback(command.name, optionList, argumentList) callback && callback(command.name, optionList, argumentList)
@ -31,7 +33,6 @@ export default function Command({command, callback}: CommandComponentInterface)
<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, MenuItem, Checkbox, ListItemText} from "@mui/material"; import {Select, OutlinedInput, FormControl, MenuItem, Checkbox, ListItemText} from "@mui/material";
interface OptionsInterface { interface OptionsInterface {
optionList: OptionInterface[] optionList: OptionInterface[]
@ -45,10 +45,11 @@ export default function Options({optionList}: OptionsInterface) {
<> <>
<Select <Select
value={selectedValues} value={selectedValues}
label="Option" label="Options"
multiple multiple
displayEmpty displayEmpty
onChange={handleChange} onChange={handleChange}
input={<OutlinedInput />}
renderValue={(selectedValues) => `Options`} renderValue={(selectedValues) => `Options`}
size="small" size="small"
> >

@ -7,12 +7,14 @@ 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 [command2data, setCommand2data] = useState<Record<string, any>>({}); const [optionList, setOptionList] = 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);
@ -33,29 +35,23 @@ 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>) => {
let temp = { setOptionList(optionList)
...command2data setArgumentList(argumentList)
}
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 (lock) { if (!selectedCommand) {
return return
} }
if (!selectedCommand) { if (lock) {
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,
...data options: optionList,
arguments: argumentList,
requestId: dialogId,
}) })
lock = false lock = false
setTab(TabEnum.Processes) setTab(TabEnum.Processes)
@ -75,27 +71,13 @@ 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)}>
<Table> <Command command={selectedCommand} callback={callback} />
<TableHead> </ConfirmDialog>}
<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)}/>
</> </>
) )
} }

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

@ -14,6 +14,7 @@ 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,
@ -28,8 +29,12 @@ 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 () => {
@ -113,6 +118,11 @@ 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>
@ -190,10 +200,27 @@ export default function Processes() {
page={page} page={page}
onPageChange={handleChangePage} onPageChange={handleChangePage}
/> />
<ConfirmDialog open={open} text={'!!!'} agreeCallback={agreeCallback} closeCallback={() => { {selectedProcess && <ConfirmDialog
setSelectedProcess(null) title={selectedProcess.name}
setOpen(false) 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>}
</> </>
) )
} }

@ -38,7 +38,6 @@ 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