rinsvent
/
fms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: rinsvent:4dadbec6e88206fa8e5990588bc15d96eb284217
Branches Tags
rinsvent:jwt
rinsvent:master
..
compare: rinsvent:92fd933c60d1ac337dd1a6df1d111d3f554236f2
Branches Tags
rinsvent:jwt
rinsvent:master

No commits in common. '4dadbec6e88206fa8e5990588bc15d96eb284217' and '92fd933c60d1ac337dd1a6df1d111d3f554236f2' have entirely different histories.
4dadbec6e8 ... 92fd933c60

11 changed files with 69 additions and 198 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats
  1. 3
      api/sm/requests/approve-process.ts
  2. 1
      api/sm/responses/processes.ts
  3. 10
      api/sm/schemas/approve-process.ts
  4. 10
      api/sm/sm-client.ts
  5. 30
      components/elements/processes/index.tsx
  6. 115
      components/elements/tokens/index.tsx
  7. 0
      components/elements/tokens/styles.module.css
  8. 16
      functions/token.ts
  9. 2
      hooks/use-api.ts
  10. 13
      hooks/use-token.ts
  11. 63
      pages/index.tsx

3
api/sm/requests/approve-process.ts
Unescape View File

@ -1,3 +0,0 @@
export interface ApproveProcessRequest {
id: string
}

1
api/sm/responses/processes.ts
Unescape View File

@ -37,7 +37,6 @@ export interface ProcessInterface {
canRepeat: boolean
canStop: boolean
canKill: boolean
canApprove: boolean
}
export enum Status {

10
api/sm/schemas/approve-process.ts
Unescape View File

@ -1,10 +0,0 @@
import {Method, SchemaInterface} from "../../schema-client";
class ApproveProcessSchema implements SchemaInterface {
method = Method.POST
url = '/system-monitoring/processes/{id}/approve'
contentType = null
}
export let approveProcessSchema = new ApproveProcessSchema()
export default approveProcessSchema

10
api/sm/sm-client.ts
Unescape View File

@ -8,9 +8,7 @@ import {CommandInterface} from "./responses/comamnds";
import commandsSchema from "./schemas/commands";
import runCommandsSchema from "./schemas/run-commands";
import {RepeatProcessRequest} from "./requests/repeat-process";
import {ApproveProcessRequest} from "./requests/approve-process";
import repeatProcessSchema from "./schemas/repeat-process";
import approveProcessSchema from "./schemas/approve-process";
import processOutputSchema from "./schemas/process-output";
import {ProcessOutputRequest} from "./requests/process-ouput";
import playProcessSchema from "./schemas/play-process";
@ -54,14 +52,6 @@ export class SMClient extends SchemaClient {
}
}
async approveProcess(data: ApproveProcessRequest): Promise<ResponseInterface> {
let { responseData, headers } = await this.send(approveProcessSchema, data)
return {
data: responseData as ProcessInterface[],
headers: headers
}
}
async repeatProcess(data: RepeatProcessRequest): Promise<ResponseInterface> {
let { responseData, headers } = await this.send(repeatProcessSchema, data)
return {

30
components/elements/processes/index.tsx
Unescape View File

@ -1,5 +1,5 @@
import styles from './styles.module.css'
import {useContext, useEffect, useState} from "react"
import {useEffect, useState} from "react"
import DeleteForeverOutlined from "@mui/icons-material/DeleteForeverOutlined"
import StopCircleOutlined from "@mui/icons-material/StopCircleOutlined"
import PauseCircleOutline from "@mui/icons-material/PauseCircleOutline"
@ -10,7 +10,6 @@ import ErrorOutline from "@mui/icons-material/ErrorOutline"
import ReplayOutlined from "@mui/icons-material/ReplayOutlined"
import RunCircleOutlined from "@mui/icons-material/RunCircleOutlined"
import FactCheckOutlined from "@mui/icons-material/FactCheckOutlined"
import ThumbUpAltOutlined from '@mui/icons-material/ThumbUpAltOutlined'
import {
Box,
TextField,
@ -31,7 +30,6 @@ import Command from "../commands/elements/command";
import {CommandInterface} from "../../../api/sm/responses/comamnds";
import Grid from '@mui/material/Grid';
import {useApi} from "../../../hooks/use-api";
import Context from "../../../context/token";
enum Action {
Run,
@ -40,11 +38,9 @@ enum Action {
Kill,
Play,
Pause,
Approve,
}
export default function Processes() {
const {token} = useContext(Context)
const [processes, setProcesses] = useState<ProcessInterface[]>([]);
const [commands, setCommands] = useState<CommandInterface[]>([]);
const [page, setPage] = useState<number>(0);
@ -120,8 +116,6 @@ export default function Processes() {
}, [action]);
let isFinished = (process: ProcessInterface) => process.cancelledAt || process.completedAt
let isCancelled = (process: ProcessInterface) => process.cancelledAt
let isRunning = (process: ProcessInterface) => process.startedAt && !isFinished(process)
const handleChangePage = (event: any, page: number) => {
setPage(page);
@ -151,12 +145,6 @@ export default function Processes() {
})
}
if (action === Action.Approve) {
await api.approveProcess({
id: selectedProcess.id,
})
}
if (action === Action.Repeat) {
await api.repeatProcess({
id: selectedProcess.id,
@ -225,10 +213,8 @@ export default function Processes() {
<TableRow key={process.id}>
<TableCell>{process.name}</TableCell>
<TableCell>
{!process.progress && !isFinished(process) && isRunning(process) && <LinearProgress/>}
{!process.progress && !isFinished(process) && !isRunning(process) && <LinearProgress variant="determinate" value={0}/>}
{!process.progress && isFinished(process) && !isCancelled(process) && <LinearProgress variant="determinate" value={100}/>}
{!process.progress && isFinished(process) && isCancelled(process) && <LinearProgress variant="determinate" value={0}/>}
{!process.progress && !isFinished(process) && <LinearProgress/>}
{!process.progress && isFinished(process) && <LinearProgress variant="determinate" value={100}/>}
{process.progress && <LinearProgress variant="determinate" value={process.progress.percent}/>}
{process.progress && <span>
{`${process.progress.progress}`} / {`${process.progress.total}`} - {process.progress.percent}% [{process.progress.memory}] / {process.progress.remaining}
@ -261,9 +247,6 @@ export default function Processes() {
</IconButton>}
</TableCell>
<TableCell>
{process.canApprove && token?.permissions.indexOf('approve_process') > -1 && <IconButton onClick={() => openDialog(process, Action.Approve)} title={`Approve`} aria-label="Approve">
<ThumbUpAltOutlined/>
</IconButton>}
{process.canRepeat && <IconButton onClick={() => openDialog(process, Action.Repeat)} title={`Repeat`} aria-label="Repeat">
<ReplayOutlined/>
</IconButton>}
@ -317,13 +300,6 @@ export default function Processes() {
argumentsParams={selectedProcess.arguments}
callback={callback}/>}
</ConfirmDialog>}
{selectedProcess && <ConfirmDialog
title={selectedProcess.name}
open={Action.Approve === action}
agreeCallback={agreeCallback}
closeCallback={() => {setAction(null)}}>
Approve?
</ConfirmDialog>}
{selectedProcess && <ConfirmDialog
title={`Are you sure?`}
open={ !!action && ([Action.Play, Action.Pause, Action.Stop, Action.Kill].indexOf(action) > -1) }

115
components/elements/tokens/index.tsx
Unescape View File

@ -1,115 +0,0 @@
import styles from './styles.module.css'
import {Autocomplete, IconButton, TextareaAutosize, TextField} from "@mui/material";
import {useContext, useEffect, useState} from "react";
import Context from "../../../context/token";
import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
import DeleteForeverOutlined from '@mui/icons-material/DeleteForeverOutlined';
import Modal from '@mui/material/Modal';
import Fade from '@mui/material/Fade';
import Backdrop from '@mui/material/Backdrop';
import Box from '@mui/material/Box';
import Grid from "@mui/material/Grid";
import ConfirmDialog from "../confirm-dialog";
const style = {
position: 'absolute' as 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: '100%',
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 4,
};
export default function Tokens() {
const {token, tokens, addToken, deleteToken, switchToken} = useContext(Context)
const [showAddForm, setShowAddForm] = useState(false)
const [showConfirm, setShowConfirm] = useState(false)
let variants = tokens.map((token, index) => ({
...token,
label: token.host
}));
useEffect(() => {
setShowAddForm(!token)
}, [token])
return (
<>
<Grid container>
<Grid item xs={2}>
<Autocomplete
value={{
...token,
label: token?.host ?? ''
}}
onChange={(event: any, newValue: any) => {
console.log('newValue', newValue);
if (newValue?.id) {
switchToken(newValue?.id)
}
}}
disablePortal
options={variants}
renderInput={(params) => <TextField {...params} label="Tokens"/>}
/>
</Grid>
<Grid item xs={1}>
<IconButton onClick={() => setShowAddForm(true)} title={`Add new token`}
aria-label="Add new token">
<AddCircleOutlineOutlinedIcon/>
</IconButton>
<IconButton onClick={() => setShowConfirm(true)} title={`Delete current token`}
aria-label="Add new token">
<DeleteForeverOutlined/>
</IconButton>
</Grid>
</Grid>
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={showAddForm}
onClose={() => setShowAddForm(false)}
closeAfterTransition
slots={{backdrop: Backdrop}}
slotProps={{
backdrop: {
timeout: 500,
},
}}
>
<Fade in={showAddForm}>
<Box sx={style}>
<TextareaAutosize
placeholder={`Pass JWT token`}
minRows={25}
style={{width: '100%'}}
onInput={(event: any) => {
if (addToken(event.target.value)) {
setShowAddForm(false)
}
}}
/>
</Box>
</Fade>
</Modal>
<ConfirmDialog
title={`Delete curent token`}
open={showConfirm}
agreeCallback={async () => {
let tokenId = token?.id || null
if (tokenId) {
deleteToken(tokenId)
}
setShowConfirm(false)
}}
closeCallback={() => {setShowConfirm(false)}}>
Confirm?
</ConfirmDialog>
</>
)
}

0
components/elements/tokens/styles.module.css
Unescape View File

16
functions/token.ts
Unescape View File

@ -62,22 +62,12 @@ export const grabTokenData = (token: string): TokenData|null => {
if (!isClient()) {
return null
}
const parts = token.split('.')
if (parts.length !== 3) {
return null
}
let payload = JSON.parse(window.atob(parts[1]))
if (!payload){
let payload = 3 === parts.length && parts[1] ? JSON.parse(window.atob(parts[1])) : null
let headers = 3 === parts.length && parts[0] ? JSON.parse(window.atob(parts[0])) : null
if (!payload || !headers){
return null
}
let headers = JSON.parse(window.atob(parts[0]))
if (!headers){
return null
}
return {
payload,
headers,

2
hooks/use-api.ts
Unescape View File

@ -13,7 +13,7 @@ const grabClient = (token: Token | null, rawToken: string | null): SMClient => {
}
}
return new SMClient({
baseUrl: token?.host || 'localhost',
baseUrl: 'http://' + (token?.host || 'localhost'),
...authentication
})
}

13
hooks/use-token.ts
Unescape View File

@ -1,5 +1,5 @@
import {useState, useEffect} from 'react'
import {cleanToken, grabToken, grabTokenData, grabTokens, selectToken, storeToken} from "../functions/token";
import {cleanToken, grabToken, grabTokens, selectToken, storeToken} from "../functions/token";
export class Token {
id!: string
@ -39,18 +39,9 @@ export function useToken(): UseTokenInterface {
setToken(grabToken()?.payload)
}
const addToken = (token: string): boolean => {
if (!grabTokenData(token)) {
return false;
}
const addToken = (token: string) => {
storeToken(token)
setToken(grabToken()?.payload)
setTokens([
...tokens,
grabToken()?.payload
])
return true
}
return {token, tokens, switchToken, deleteToken, addToken}

63
pages/index.tsx
Unescape View File

@ -1,12 +1,11 @@
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Processes from "../components/elements/processes";
import {Tabs, Tab} from '@mui/material';
import {useContext, useState} from "react";
import {Tabs, Tab, MenuItem, Select, InputLabel, TextareaAutosize, Button} from '@mui/material';
import {useContext, useEffect, useState} from "react";
import Commands from "../components/elements/commands";
import {Provider as TabProvider} from '../context/tab'
import Context from "../context/token";
import Tokens from "../components/elements/tokens";
export enum TabEnum {
@ -15,10 +14,42 @@ export enum TabEnum {
}
export default function Home() {
let {token} = useContext(Context)
let {token, tokens, addToken} = useContext(Context)
const [tab, setTab] = useState<TabEnum>(TabEnum.Processes);
const handleChange = (event: any, tab: number) => setTab(tab)
// useEffect(() => {
// const storedToken = grabToken()
// setToken(storedToken)
// const storedTokens = grabTokens()
// setTokens(storedTokens)
// }, [])
let onTokenInput = (event: any) => {
}
if (!token) {
return (
<>
<Head>
<title>System monitoring</title>
<meta name="description" content="System monitoring service"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" href="/favicon.ico"/>
</Head>
<main className={styles.main}>
<h2>Для дальнейшей работы добавьте JWT токен</h2>
<TextareaAutosize
minRows={20}
style={{ width: '100%' }}
onInput={(event: any) => addToken(event.target.value)}
/>
</main>
</>
)
}
return (
<>
<Head>
@ -28,7 +59,29 @@ export default function Home() {
<link rel="icon" href="/favicon.ico"/>
</Head>
<main className={styles.main}>
<Tokens />
{tokens.length > 0 && <>
<InputLabel id="tokens">Tokens</InputLabel>
<Select
value={token}
labelId="tokens"
id="demo-simple-select-autowidth"
label="Tokens"
onChange={(event: any) => {
// selectToken(event.target.value)
// const storedToken = grabToken()
// setToken(storedToken)
// if (storedToken) {
// smClient.baseUrl = storedToken.payload.host
// }
}}
>
{tokens.map((token, index) => (
<MenuItem key={index} value={index}>{token.host}</MenuItem>
))}
</Select>
</>}
{token && <>
<Tabs
value={tab}

Write Preview
Loading…
Cancel
Save