Добавил uuid компонент и настроил отправку requestId

jwt
Rinsvent 2 years ago
parent a22ec5a2b2
commit 46580f0a78
  1. 11
      components/elements/commands/index.tsx
  2. 42
      components/elements/processes/index.tsx
  3. 3
      package.json
  4. 5
      yarn.lock

@ -2,10 +2,12 @@ import {Table, TableBody, TableCell, TableHead, TableRow, IconButton} from "@mui
import Command, {CommandInterface} from "./elements/command"; import Command, {CommandInterface} from "./elements/command";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import PlayCircleOutline from '@mui/icons-material/PlayCircleOutline'; import PlayCircleOutline from '@mui/icons-material/PlayCircleOutline';
import { v4 } from "uuid"
export default function Commands() { export default function Commands() {
const [commands, setCommands] = useState<CommandInterface[]>([]); const [commands, setCommands] = useState<CommandInterface[]>([]);
const [command2data, setCommand2data] = useState<Record<string, any>>({}); const [command2data, setCommand2data] = useState<Record<string, any>>({});
let requestId = v4()
let refreshCommands = async () => { let refreshCommands = async () => {
let response = await fetch('http://fmw.sipachev.sv/system-monitoring/commands', { let response = await fetch('http://fmw.sipachev.sv/system-monitoring/commands', {
@ -17,7 +19,6 @@ export default function Commands() {
}); });
const commands: CommandInterface[] = await response.json() const commands: CommandInterface[] = await response.json()
setCommands(commands) setCommands(commands)
setTimeout(() => refreshCommands, 1000)
} }
useEffect(() => { useEffect(() => {
@ -44,10 +45,15 @@ export default function Commands() {
} }
setCommand2data(temp) setCommand2data(temp)
} }
let lock = false
let runCommand = async () => { let runCommand = async () => {
if (lock) {
return
}
lock = true
let url = `http://fmw.sipachev.sv/system-monitoring/commands/${command.name}/run` let url = `http://fmw.sipachev.sv/system-monitoring/commands/${command.name}/run`
let data = command2data[command.name] || {} let data = command2data[command.name] || {}
data['requestId'] = '123'; data['requestId'] = requestId;
let response = await fetch(url, { let response = await fetch(url, {
method: 'POST', method: 'POST',
headers: { headers: {
@ -56,6 +62,7 @@ export default function Commands() {
}, },
body: JSON.stringify(data) body: JSON.stringify(data)
}); });
lock = false
} }
return ( return (
<TableRow key={command.name}> <TableRow key={command.name}>

@ -1,15 +1,16 @@
import styles from './styles.module.css' import styles from './styles.module.css'
import {useEffect, useState} from "react"; import {useEffect, useState} from "react"
import DeleteForever from "@mui/icons-material/DeleteForever"; import DeleteForever from "@mui/icons-material/DeleteForever"
import StopCircle from "@mui/icons-material/StopCircle"; import StopCircle from "@mui/icons-material/StopCircle"
import PauseCircleOutline from "@mui/icons-material/PauseCircleOutline"; import PauseCircleOutline from "@mui/icons-material/PauseCircleOutline"
import PlayCircleOutline from "@mui/icons-material/PlayCircleOutline"; import PlayCircleOutline from "@mui/icons-material/PlayCircleOutline"
import HourglassEmpty from "@mui/icons-material/HourglassEmpty"; import HourglassEmpty from "@mui/icons-material/HourglassEmpty"
import CheckCircleOutline from "@mui/icons-material/CheckCircleOutline"; import CheckCircleOutline from "@mui/icons-material/CheckCircleOutline"
import ErrorOutline from "@mui/icons-material/ErrorOutline"; import ErrorOutline from "@mui/icons-material/ErrorOutline"
import Replay from "@mui/icons-material/Replay"; import Replay from "@mui/icons-material/Replay"
import RunCircle from "@mui/icons-material/RunCircle"; import RunCircle from "@mui/icons-material/RunCircle"
import {IconButton, LinearProgress, TableContainer, Table, TableBody, TableCell, TableHead, TableRow, TablePagination} from "@mui/material"; import {IconButton, LinearProgress, TableContainer, Table, TableBody, TableCell, TableHead, TableRow, TablePagination} from "@mui/material"
import { v4 } from "uuid"
export interface ProcessExceptionInterface { export interface ProcessExceptionInterface {
message: string, message: string,
@ -55,8 +56,14 @@ export default function Processes() {
const [processes, setProcesses] = useState<ProcessInterface[]>([]); const [processes, setProcesses] = useState<ProcessInterface[]>([]);
const [page, setPage] = useState<number>(0); const [page, setPage] = useState<number>(0);
const [count, setCount] = useState<number>(0); const [count, setCount] = useState<number>(0);
let requestId = v4()
let refreshLock = false
let refreshProcesses = async () => { let refreshProcesses = async () => {
if (refreshLock) {
return
}
refreshLock = true
let response = await fetch('http://fmw.sipachev.sv/system-monitoring/processes?' + new URLSearchParams({ let response = await fetch('http://fmw.sipachev.sv/system-monitoring/processes?' + new URLSearchParams({
page: page + 1, page: page + 1,
limit: 20, limit: 20,
@ -71,12 +78,13 @@ export default function Processes() {
const processes: ProcessInterface[] = await response.json() const processes: ProcessInterface[] = await response.json()
setProcesses(processes) setProcesses(processes)
setCount(Number(response.headers.get('X-Pagination-Count'))) setCount(Number(response.headers.get('X-Pagination-Count')))
setTimeout(() => refreshProcesses, 1000) refreshLock = false
} }
useEffect(() => { useEffect(() => {
refreshProcesses() const timer = setInterval(() => refreshProcesses(), 1000)
}, [page]) return () => clearInterval(timer);
}, [page]);
let isFinished = (process: ProcessInterface) => process.cancelledAt || process.completedAt let isFinished = (process: ProcessInterface) => process.cancelledAt || process.completedAt
let canPlay = (process: ProcessInterface) => !isFinished(process) && process.progress && process.pausedAt let canPlay = (process: ProcessInterface) => !isFinished(process) && process.progress && process.pausedAt
@ -106,6 +114,10 @@ export default function Processes() {
setPage(page); setPage(page);
} }
const repeat = (event: any) => {
}
return ( return (
<> <>
<TableContainer> <TableContainer>
@ -158,7 +170,7 @@ export default function Processes() {
</IconButton>} </IconButton>}
</TableCell> </TableCell>
<TableCell> <TableCell>
{canRepeat(process) && <IconButton title={`Repeat`} aria-label="Repeat"> {canRepeat(process) && <IconButton onClick={repeat} title={`Repeat`} aria-label="Repeat">
<Replay/> <Replay/>
</IconButton>} </IconButton>}
{canKill(process) && <IconButton title={`Kill`} aria-label="Kill"> {canKill(process) && <IconButton title={`Kill`} aria-label="Kill">

@ -30,6 +30,7 @@
"react-dom": "18.2.0", "react-dom": "18.2.0",
"styled-components": "^5.3.6", "styled-components": "^5.3.6",
"tailwindcss": "^3.2.4", "tailwindcss": "^3.2.4",
"typescript": "4.9.4" "typescript": "4.9.4",
"uuid": "^9.0.0"
} }
} }

@ -2837,6 +2837,11 @@ util-deprecate@^1.0.2:
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw== integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
uuid@^9.0.0:
version "9.0.0"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
which-boxed-primitive@^1.0.2: which-boxed-primitive@^1.0.2:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6" resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"

Loading…
Cancel
Save