0xb00b5/firegex-traffic-viewer
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restructurated frontend

Browse Source
This commit is contained in:
DomySh
2022-07-21 10:20:54 +02:00
parent 0ed8bb635e
commit acf9642f54
21 changed files with 183 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/build/asset-manifest.json
View File

@@ -1,13 +1,13 @@
{
"files": {
"main.css": "/static/css/main.08225a85.css",
"main.js": "/static/js/main.3838510f.js",
"main.css": "/static/css/main.77b279e8.css",
"main.js": "/static/js/main.6378664a.js",
"index.html": "/index.html",
"main.08225a85.css.map": "/static/css/main.08225a85.css.map",
"main.3838510f.js.map": "/static/js/main.3838510f.js.map"
"main.77b279e8.css.map": "/static/css/main.77b279e8.css.map",
"main.6378664a.js.map": "/static/js/main.6378664a.js.map"
},
"entrypoints": [
"static/css/main.08225a85.css",
"static/js/main.3838510f.js"
"static/css/main.77b279e8.css",
"static/js/main.6378664a.js"
]
}

2
frontend/build/index.html
View File

@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#FFFFFFFF"/><meta name="description" content="Firegex by Pwnzer0tt1"/><title>Firegex</title><script defer="defer" src="/static/js/main.3838510f.js"></script><link href="/static/css/main.08225a85.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#FFFFFFFF"/><meta name="description" content="Firegex by Pwnzer0tt1"/><title>Firegex</title><script defer="defer" src="/static/js/main.6378664a.js"></script><link href="/static/css/main.77b279e8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

1
frontend/build/static/css/main.08225a85.css.map
View File

@@ -1 +0,0 @@
{"version":3,"file":"static/css/main.08225a85.css","mappings":"wEAUA,8BAGE,mBAFA,aACA,sBACA,CAGF,iBAEE,sBAGF,aACE,YAZF,iFAGE,mBAFA,aACA,sBACA,CAGF,+BAEE,sBAGF,2BACE,YCnBF,uBAGI,yBAFA,aACA,eCJY,CCEhB,sBAKI,mBAFA,wBDLY,CCMZ,aAFA,aAIA,uBALA,UAKA,CAGJ,oBAGI,WADA,iBADA,WAEA,CHVJ,KAEE,4BADA,QACA,CAGF,yFAGE,mBAFA,aACA,sBACA,CAGF,mCAEE,sBAGF,+BACE,YAGF,oBAGE,gBACA,eAFA,UAAU,CADV,UAGA,CAEF,0BACE,mBACA,kBI9BF,uBAGI,mBACA,YAFA,eADA,SAGA,CAIJ,wBAKI,WAJA,gBACA,mBAEA,mBADA,iBAEA,CCbJ,sBAEI,UAAS,CADT,YACU,CAGd,6BAEI,wBHPS,CGQT,mBAFA,YAEA","sources":["index.scss","components/Footer/index.module.scss","_vars.scss","components/Header/index.module.scss","components/ServiceRow/index.module.scss","components/RegexView/index.module.scss"],"sourcesContent":["\n@use \"vars\" as *;\n\n@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');\n\nbody {\n margin: 0;\n font-family: 'Lato', sans-serif;\n}\n\n.center-flex{\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.center-flex-row{\n @extend .center-flex;\n flex-direction: column;\n}\n\n.flex-spacer{\n flex-grow: 1;\n}\n\n::-webkit-scrollbar {\n width: 12px;\n margin:3px;\n background: #333;\n cursor: pointer;\n}\n::-webkit-scrollbar-thumb {\n background: #757575;\n border-radius: 8px;\n}","@use \"../../vars\" as *;\r\n@use \"../../index.scss\" as *;\r\n\r\n.footer{\r\n height: 150px;\r\n margin-top: 50px;\r\n background-color: $primary_color;\r\n @extend .center-flex;\r\n}","\r\n$primary_color: #242a33;\r\n$second_color: #1A1B1E;\r\n$third_color:#25262b;\r\n","\r\n@use \"../../vars\" as *;\r\n\r\n.header{\r\n width: 100%;\r\n height: 140px;\r\n background-color: $primary_color;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.logo{\r\n width: 200px;\r\n margin-left: 40px;\r\n height: 70%;\r\n}","\r\n@use \"../../index.scss\" as *;\r\n\r\n.row{\r\n width: 95%;\r\n padding: 30px 0px;\r\n border-radius: 20px;\r\n margin: 10px;\r\n @extend .center-flex;\r\n}\r\n\r\n.name{\r\n font-size: 2.3em;\r\n font-weight: bolder;\r\n margin-right: 10px;\r\n margin-bottom: 13px;\r\n color:#FFF;\r\n}","\r\n@use \"../../vars\" as *;\r\n\r\n.box{\r\n padding:30px;\r\n margin:5px;\r\n}\r\n\r\n.regex_text{\r\n padding: 10px;\r\n background-color: $third_color;\r\n border-radius: 15px;\r\n}"],"names":[],"sourceRoot":""}

4
frontend/build/static/css/main.08225a85.css → frontend/build/static/css/main.77b279e8.css
View File

@@ -1,2 +1,2 @@
@import url(https://fonts.googleapis.com/css2?family=Lato&display=swap);.center-flex,.center-flex-row{align-items:center;display:flex;justify-content:center}.center-flex-row{flex-direction:column}.flex-spacer{flex-grow:1}.Footer_center-flex-row__Iibc4,.Footer_center-flex__mTXcH,.Footer_footer__V8Lu\+{align-items:center;display:flex;justify-content:center}.Footer_center-flex-row__Iibc4{flex-direction:column}.Footer_flex-spacer__6R1Ah{flex-grow:1}.Footer_footer__V8Lu\+{background-color:#242a33;height:150px;margin-top:50px}.Header_header__MY7fH{align-items:center;background-color:#242a33;display:flex;height:140px;justify-content:center;width:100%}.Header_logo__qeTuP{height:70%;margin-left:40px;width:200px}body{font-family:Lato,sans-serif;margin:0}.ServiceRow_center-flex-row__s4bDg,.ServiceRow_center-flex__AJ5ZN,.ServiceRow_row__Vd4Ai{align-items:center;display:flex;justify-content:center}.ServiceRow_center-flex-row__s4bDg{flex-direction:column}.ServiceRow_flex-spacer__mF0YE{flex-grow:1}::-webkit-scrollbar{background:#333;cursor:pointer;margin:3px;width:12px}::-webkit-scrollbar-thumb{background:#757575;border-radius:8px}.ServiceRow_row__Vd4Ai{border-radius:20px;margin:10px;padding:30px 0;width:95%}.ServiceRow_name__Y3lbm{color:#fff;font-size:2.3em;font-weight:bolder;margin-bottom:13px;margin-right:10px}.RegexView_box__IDvxB{margin:5px;padding:30px}.RegexView_regex_text__pFvPS{background-color:#25262b;border-radius:15px;padding:10px}
/*# sourceMappingURL=main.08225a85.css.map*/
@import url(https://fonts.googleapis.com/css2?family=Lato&display=swap);.center-flex,.center-flex-row{align-items:center;display:flex;justify-content:center}.center-flex-row{flex-direction:column}.flex-spacer{flex-grow:1}.Footer_center-flex-row__Iibc4,.Footer_center-flex__mTXcH,.Footer_footer__V8Lu\+{align-items:center;display:flex;justify-content:center}.Footer_center-flex-row__Iibc4{flex-direction:column}.Footer_flex-spacer__6R1Ah{flex-grow:1}.Footer_footer__V8Lu\+{background-color:#242a33;height:150px;margin-top:50px}.Header_header__MY7fH{align-items:center;background-color:#242a33;display:flex;height:140px;justify-content:center;width:100%}.Header_logo__qeTuP{height:70%;margin-left:40px;width:200px}body{font-family:Lato,sans-serif;margin:0}.ServiceRow_center-flex-row__NF59z,.ServiceRow_center-flex__Ffq-d,.ServiceRow_row__HwgWF{align-items:center;display:flex;justify-content:center}.ServiceRow_center-flex-row__NF59z{flex-direction:column}.ServiceRow_flex-spacer__OVA44{flex-grow:1}::-webkit-scrollbar{background:#333;cursor:pointer;margin:3px;width:12px}::-webkit-scrollbar-thumb{background:#757575;border-radius:8px}.ServiceRow_row__HwgWF{border-radius:20px;margin:10px;padding:30px 0;width:95%}.ServiceRow_name__HSrHR{color:#fff;font-size:2.3em;font-weight:bolder;margin-bottom:13px;margin-right:10px}.RegexView_box__Z6\+8g{margin:5px;padding:30px}.RegexView_regex_text__YbrUl{background-color:#25262b;border-radius:15px;padding:10px}
/*# sourceMappingURL=main.77b279e8.css.map*/

1
frontend/build/static/css/main.77b279e8.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"static/css/main.77b279e8.css","mappings":"wEAUA,8BAGE,mBAFA,aACA,sBACA,CAGF,iBAEE,sBAGF,aACE,YAZF,iFAGE,mBAFA,aACA,sBACA,CAGF,+BAEE,sBAGF,2BACE,YCnBF,uBAGI,yBAFA,aACA,eCJY,CCEhB,sBAKI,mBAFA,wBDLY,CCMZ,aAFA,aAIA,uBALA,UAKA,CAGJ,oBAGI,WADA,iBADA,WAEA,CHVJ,KAEE,4BADA,QACA,CAGF,yFAGE,mBAFA,aACA,sBACA,CAGF,mCAEE,sBAGF,+BACE,YAGF,oBAGE,gBACA,eAFA,UAAU,CADV,UAGA,CAEF,0BACE,mBACA,kBI9BF,uBAGI,mBACA,YAFA,eADA,SAGA,CAIJ,wBAKI,WAJA,gBACA,mBAEA,mBADA,iBAEA,CCbJ,uBAEI,UAAS,CADT,YACU,CAGd,6BAEI,wBHPS,CGQT,mBAFA,YAEA","sources":["index.scss","components/Footer/index.module.scss","_vars.scss","components/Header/index.module.scss","components/NFRegex/ServiceRow/index.module.scss","components/NFRegex/RegexView/index.module.scss"],"sourcesContent":["\n@use \"vars\" as *;\n\n@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');\n\nbody {\n margin: 0;\n font-family: 'Lato', sans-serif;\n}\n\n.center-flex{\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.center-flex-row{\n @extend .center-flex;\n flex-direction: column;\n}\n\n.flex-spacer{\n flex-grow: 1;\n}\n\n::-webkit-scrollbar {\n width: 12px;\n margin:3px;\n background: #333;\n cursor: pointer;\n}\n::-webkit-scrollbar-thumb {\n background: #757575;\n border-radius: 8px;\n}","@use \"../../vars\" as *;\r\n@use \"../../index.scss\" as *;\r\n\r\n.footer{\r\n height: 150px;\r\n margin-top: 50px;\r\n background-color: $primary_color;\r\n @extend .center-flex;\r\n}","\r\n$primary_color: #242a33;\r\n$second_color: #1A1B1E;\r\n$third_color:#25262b;\r\n","\r\n@use \"../../vars\" as *;\r\n\r\n.header{\r\n width: 100%;\r\n height: 140px;\r\n background-color: $primary_color;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.logo{\r\n width: 200px;\r\n margin-left: 40px;\r\n height: 70%;\r\n}","\r\n@use \"../../../index.scss\" as *;\r\n\r\n.row{\r\n width: 95%;\r\n padding: 30px 0px;\r\n border-radius: 20px;\r\n margin: 10px;\r\n @extend .center-flex;\r\n}\r\n\r\n.name{\r\n font-size: 2.3em;\r\n font-weight: bolder;\r\n margin-right: 10px;\r\n margin-bottom: 13px;\r\n color:#FFF;\r\n}","\r\n@use \"../../../vars\" as *;\r\n\r\n.box{\r\n padding:30px;\r\n margin:5px;\r\n}\r\n\r\n.regex_text{\r\n padding: 10px;\r\n background-color: $third_color;\r\n border-radius: 15px;\r\n}"],"names":[],"sourceRoot":""}

6
frontend/build/static/js/main.3838510f.js → frontend/build/static/js/main.6378664a.js
View File

File diff suppressed because one or more lines are too long

0
frontend/build/static/js/main.3838510f.js.LICENSE.txt → frontend/build/static/js/main.6378664a.js.LICENSE.txt
View File

2
frontend/build/static/js/main.3838510f.js.map → frontend/build/static/js/main.6378664a.js.map
View File

File diff suppressed because one or more lines are too long

14
frontend/src/App.tsx
View File

@@ -6,9 +6,10 @@ import { Navigate, Outlet, Route, Routes } from 'react-router-dom';
import MainLayout from './components/MainLayout';
import { PasswordSend, ServerStatusResponse } from './js/models';
import { errorNotify, fireUpdateRequest, getstatus, login, setpassword } from './js/utils';
import HomePage from './pages/HomePage';
import ServiceDetails from './pages/ServiceDetails';
import NFRegex from './pages/NFRegex.tsx';
import ServiceDetails from './pages/NFRegex.tsx/ServiceDetails';
import io from 'socket.io-client';
import HomePage from './pages/HomePage';
const socket = io({transports: ["websocket", "polling"], path:"/sock" });
@@ -145,9 +146,12 @@ function App() {
}else if (systemStatus.status === "run" && systemStatus.loggined){
return <Routes>
<Route element={<MainLayout><Outlet /></MainLayout>}>
<Route index element={<HomePage />} />
<Route path=":srv" element={<ServiceDetails />} />
<Route path="*" element={<Navigate to="/" />} />
<Route element={<HomePage><Outlet /></HomePage>}>
<Route path="nfregex" element={<NFRegex><Outlet /></NFRegex>} >
<Route path=":srv" element={<ServiceDetails />} />
</Route>
</Route>
<Route path="*" element={<Navigate to="/nfregex" />} />
</Route>
</Routes>
}else{

33
frontend/src/components/Header/index.tsx
View File

@@ -1,13 +1,13 @@
import React, { useState } from 'react';
import { ActionIcon, Badge, Divider, Image, Menu, Space, Tooltip, FloatingTooltip, MediaQuery } from '@mantine/core';
import style from "./index.module.scss";
import { errorNotify, eventUpdateName, generalstats, logout } from '../../js/utils';
import { errorNotify, eventUpdateName, logout, nfregex } from '../../js/utils';
import { GeneralStats } from '../../js/models';
import { BsPlusLg } from "react-icons/bs"
import { AiFillHome } from "react-icons/ai"
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import AddNewRegex from '../AddNewRegex';
import AddNewService from '../AddNewService';
import { useNavigate, useParams } from 'react-router-dom';
import AddNewRegex from '../NFRegex/AddNewRegex';
import AddNewService from '../NFRegex/AddNewService';
import { FaLock } from 'react-icons/fa';
import { MdOutlineSettingsBackupRestore } from 'react-icons/md';
import { ImExit } from 'react-icons/im';
@@ -19,12 +19,11 @@ import ResetModal from './ResetModal';
function Header() {
const [generalStats, setGeneralStats] = useState<GeneralStats>({closed:0, regexes:0, services:0});
const location = useLocation()
const navigator = useNavigate()
const updateInfo = () => {
generalstats().then(res => {
nfregex.stats().then(res => {
setGeneralStats(res)
}).catch(
err => errorNotify("General Info Auto-Update failed!", err.toString())
@@ -92,18 +91,16 @@ function Header() {
</Menu>
<div style={{marginLeft:"20px"}}></div>
{ location.pathname !== "/"?
<Tooltip zIndex={0} label="Home" position='bottom' transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="teal" opened={tooltipHomeOpened} tooltipId="tooltip-home-id">
<ActionIcon color="teal" style={{marginRight:"10px"}}
size="xl" radius="md" variant="filled"
onClick={()=>navigator("/")}
aria-describedby="tooltip-home-id"
onFocus={() => setTooltipHomeOpened(false)} onBlur={() => setTooltipHomeOpened(false)}
onMouseEnter={() => setTooltipHomeOpened(true)} onMouseLeave={() => setTooltipHomeOpened(false)}>
<AiFillHome size="25px" />
</ActionIcon>
</Tooltip>
:null}
<Tooltip zIndex={0} label="Home" position='bottom' transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="teal" opened={tooltipHomeOpened} tooltipId="tooltip-home-id">
<ActionIcon color="teal" style={{marginRight:"10px"}}
size="xl" radius="md" variant="filled"
onClick={()=>navigator("/")}
aria-describedby="tooltip-home-id"
onFocus={() => setTooltipHomeOpened(false)} onBlur={() => setTooltipHomeOpened(false)}
onMouseEnter={() => setTooltipHomeOpened(true)} onMouseLeave={() => setTooltipHomeOpened(false)}>
<AiFillHome size="25px" />
</ActionIcon>
</Tooltip>
{ srv?
<Tooltip label="Add a new regex" zIndex={0} position='bottom' transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="blue" opened={tooltipAddOpened} tooltipId="tooltip-add-id">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"

8
frontend/src/components/AddNewRegex.tsx → frontend/src/components/NFRegex/AddNewRegex.tsx
View File

@@ -1,10 +1,10 @@
import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Modal } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import React, { useState } from 'react';
import { RegexAddForm } from '../js/models';
import { addregex, b64decode, b64encode, okNotify } from '../js/utils';
import { RegexAddForm } from '../../js/models';
import { b64decode, b64encode, nfregex, okNotify } from '../../js/utils';
import { ImCross } from "react-icons/im"
import FilterTypeSelector from './FilterTypeSelector';
import FilterTypeSelector from '../FilterTypeSelector';
type RegexAddInfo = {
@@ -54,7 +54,7 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
active: !values.deactive
}
setSubmitLoading(false)
addregex(request).then( res => {
nfregex.regexesadd(request).then( res => {
if (!res){
setSubmitLoading(false)
close();

8
frontend/src/components/AddNewService.tsx → frontend/src/components/NFRegex/AddNewService.tsx
View File

@@ -1,7 +1,7 @@
import { Button, Group, NumberInput, Space, TextInput, Notification, Modal, Switch, SegmentedControl, SelectItemProps, Autocomplete, AutocompleteItem } from '@mantine/core';
import { Button, Group, NumberInput, Space, TextInput, Notification, Modal, Switch, SegmentedControl, Autocomplete, AutocompleteItem } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import React, { useEffect, useState } from 'react';
import { addservice, okNotify, startservice, regex_ipv4, regex_ipv6, getipinterfaces } from '../js/utils';
import { okNotify, regex_ipv4, regex_ipv6, getipinterfaces, nfregex } from '../../js/utils';
import { ImCross } from "react-icons/im"
type ServiceAddForm = {
@@ -59,11 +59,11 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
const submitRequest = ({ name, port, autostart, proto, ip_int }:ServiceAddForm) =>{
setSubmitLoading(true)
addservice({name, port, proto, ip_int }).then( res => {
nfregex.servicesadd({name, port, proto, ip_int }).then( res => {
if (res.status === "ok" && res.service_id){
setSubmitLoading(false)
close();
if (autostart) startservice(res.service_id)
if (autostart) nfregex.servicestart(res.service_id)
okNotify(`Service ${name} has been added`, `Successfully added service with port ${port}`)
}else{
setSubmitLoading(false)

2
frontend/src/components/RegexView/index.module.scss → frontend/src/components/NFRegex/RegexView/index.module.scss
View File

@@ -1,5 +1,5 @@
@use "../../vars" as *;
@use "../../../vars" as *;
.box{
padding:30px;

12
frontend/src/components/RegexView/index.tsx → frontend/src/components/NFRegex/RegexView/index.tsx
View File

@@ -1,11 +1,11 @@
import { Grid, Text, Title, Badge, Space, ActionIcon, Tooltip } from '@mantine/core';
import React, { useState } from 'react';
import { RegexFilter } from '../../js/models';
import { activateregex, b64decode, deactivateregex, deleteregex, errorNotify, okNotify } from '../../js/utils';
import { RegexFilter } from '../../../js/models';
import { b64decode, errorNotify, nfregex, okNotify } from '../../../js/utils';
import style from "./index.module.scss";
import { BsTrashFill } from "react-icons/bs"
import YesNoModal from '../YesNoModal';
import FilterTypeSelector from '../FilterTypeSelector';
import YesNoModal from '../../YesNoModal';
import FilterTypeSelector from '../../FilterTypeSelector';
import { FaPause, FaPlay } from 'react-icons/fa';
@@ -22,7 +22,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
const [statusTooltipOpened, setStatusTooltipOpened] = useState(false);
const deleteRegex = () => {
deleteregex(regexInfo.id).then(res => {
nfregex.regexdelete(regexInfo.id).then(res => {
if(!res){
okNotify(`Regex ${regex_expr} deleted successfully!`,`Regex '${regex_expr}' ID:${regexInfo.id} has been deleted!`)
}else{
@@ -33,7 +33,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
const changeRegexStatus = () => {
(regexInfo.active?deactivateregex:activateregex)(regexInfo.id).then(res => {
(regexInfo.active?nfregex.regexdisable:nfregex.regexenable)(regexInfo.id).then(res => {
if(!res){
okNotify(`Regex ${regex_expr} ${regexInfo.active?"deactivated":"activated"} successfully!`,`Regex '${regex_expr}' ID:${regexInfo.id} has been ${regexInfo.active?"deactivated":"activated"}!`)
}else{

6
frontend/src/components/ServiceRow/RenameForm.tsx → frontend/src/components/NFRegex/ServiceRow/RenameForm.tsx
View File

@@ -1,9 +1,9 @@
import { Button, Group, Space, TextInput, Notification, Modal } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import React, { useEffect, useState } from 'react';
import { okNotify, renameservice } from '../../js/utils';
import { nfregex, okNotify } from '../../../js/utils';
import { ImCross } from "react-icons/im"
import { Service } from '../../js/models';
import { Service } from '../../../js/models';
function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:Service }) {
@@ -25,7 +25,7 @@ function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>v
const submitRequest = ({ name }:{ name:string }) => {
setSubmitLoading(true)
renameservice(service.service_id, name).then( res => {
nfregex.servicerename(service.service_id, name).then( res => {
if (!res){
setSubmitLoading(false)
close();

2
frontend/src/components/ServiceRow/index.module.scss → frontend/src/components/NFRegex/ServiceRow/index.module.scss
View File

@@ -1,5 +1,5 @@
@use "../../index.scss" as *;
@use "../../../index.scss" as *;
.row{
width: 95%;

13
frontend/src/components/ServiceRow/index.tsx → frontend/src/components/NFRegex/ServiceRow/index.tsx
View File

@@ -1,11 +1,11 @@
import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core';
import React, { useState } from 'react';
import { FaPlay, FaStop } from 'react-icons/fa';
import { Service } from '../../js/models';
import { Service } from '../../../js/models';
import { MdOutlineArrowForwardIos } from "react-icons/md"
import style from "./index.module.scss";
import YesNoModal from '../YesNoModal';
import { deleteservice, errorNotify, okNotify, regex_ipv4, startservice, stopservice } from '../../js/utils';
import YesNoModal from '../../YesNoModal';
import { errorNotify, nfregex, okNotify, regex_ipv4 } from '../../../js/utils';
import { BsTrashFill } from 'react-icons/bs';
import { BiRename } from 'react-icons/bi'
import RenameForm from './RenameForm';
@@ -25,7 +25,8 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
const stopService = async () => {
setButtonLoading(true)
await stopservice(service.service_id).then(res => {
await nfregex.servicestop(service.service_id).then(res => {
if(!res){
okNotify(`Service ${service.name} stopped successfully!`,`The service on ${service.port} has been stopped!`)
}else{
@@ -39,7 +40,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
const startService = async () => {
setButtonLoading(true)
await startservice(service.service_id).then(res => {
await nfregex.servicestart(service.service_id).then(res => {
if(!res){
okNotify(`Service ${service.name} started successfully!`,`The service on ${service.port} has been started!`)
}else{
@@ -52,7 +53,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
}
const deleteService = () => {
deleteservice(service.service_id).then(res => {
nfregex.servicedelete(service.service_id).then(res => {
if (!res){
okNotify("Service delete complete!",`The service ${service.name} has been deleted!`)
}else

109
frontend/src/js/utils.tsx
View File

@@ -54,6 +54,7 @@ export function fireUpdateRequest(){
window.dispatchEvent(new Event(eventUpdateName))
}
export async function resetfiregex(delete_data:boolean = false){
const { status } = await postapi("reset",{delete:delete_data}) as ServerResponse;
return (status === "ok"?undefined:status)
@@ -67,18 +68,6 @@ export async function getstatus(){
return await getapi(`status`) as ServerStatusResponse;
}
export async function generalstats(){
return await getapi("nfregex/stats") as GeneralStats;
}
export async function servicelist(){
return await getapi("nfregex/services") as Service[];
}
export async function serviceinfo(service_id:string){
return await getapi(`nfregex/service/${service_id}`) as Service;
}
export async function logout(){
window.localStorage.removeItem("access_token")
}
@@ -104,56 +93,56 @@ export async function login(data:PasswordSend) {
return status;
}
export async function deleteregex(regex_id:number){
const { status } = await getapi(`nfregex/regex/${regex_id}/delete`) as ServerResponse;
return status === "ok"?undefined:status
export const nfregex = {
stats: async () => {
return await getapi("nfregex/stats") as GeneralStats;
},
services: async () => {
return await getapi("nfregex/services") as Service[];
},
serviceinfo: async (service_id:string) => {
return await getapi(`nfregex/service/${service_id}`) as Service;
},
regexdelete: async (regex_id:number) => {
const { status } = await getapi(`nfregex/regex/${regex_id}/delete`) as ServerResponse;
return status === "ok"?undefined:status
},
regexenable: async (regex_id:number) => {
const { status } = await getapi(`nfregex/regex/${regex_id}/enable`) as ServerResponse;
return status === "ok"?undefined:status
},
regexdisable: async (regex_id:number) => {
const { status } = await getapi(`nfregex/regex/${regex_id}/disable`) as ServerResponse;
return status === "ok"?undefined:status
},
servicestart: async (service_id:string) => {
const { status } = await getapi(`nfregex/service/${service_id}/start`) as ServerResponse;
return status === "ok"?undefined:status
},
servicerename: async (service_id:string, name: string) => {
const { status } = await postapi(`nfregex/service/${service_id}/rename`,{ name }) as ServerResponse;
return status === "ok"?undefined:status
},
servicestop: async (service_id:string) => {
const { status } = await getapi(`nfregex/service/${service_id}/stop`) as ServerResponse;
return status === "ok"?undefined:status
},
servicesadd: async (data:ServiceAddForm) => {
return await postapi("nfregex/services/add",data) as ServiceAddResponse;
},
servicedelete: async (service_id:string) => {
const { status } = await getapi(`nfregex/service/${service_id}/delete`) as ServerResponse;
return status === "ok"?undefined:status
},
regexesadd: async (data:RegexAddForm) => {
const { status } = await postapi("nfregex/regexes/add",data) as ServerResponse;
return status === "ok"?undefined:status
},
serviceregexes: async (service_id:string) => {
return await getapi(`nfregex/service/${service_id}/regexes`) as RegexFilter[];
}
}
export async function activateregex(regex_id:number){
const { status } = await getapi(`nfregex/regex/${regex_id}/enable`) as ServerResponse;
return status === "ok"?undefined:status
}
export async function deactivateregex(regex_id:number){
const { status } = await getapi(`nfregex/regex/${regex_id}/disable`) as ServerResponse;
return status === "ok"?undefined:status
}
export async function startservice(service_id:string){
const { status } = await getapi(`nfregex/service/${service_id}/start`) as ServerResponse;
return status === "ok"?undefined:status
}
export async function renameservice(service_id:string, name: string){
const { status } = await postapi(`nfregex/service/${service_id}/rename`,{ name }) as ServerResponse;
return status === "ok"?undefined:status
}
export async function stopservice(service_id:string){
const { status } = await getapi(`nfregex/service/${service_id}/stop`) as ServerResponse;
return status === "ok"?undefined:status
}
export async function addservice(data:ServiceAddForm) {
return await postapi("nfregex/services/add",data) as ServiceAddResponse;
}
export async function deleteservice(service_id:string) {
const { status } = await getapi(`nfregex/service/${service_id}/delete`) as ServerResponse;
return status === "ok"?undefined:status
}
export async function addregex(data:RegexAddForm) {
const { status } = await postapi("nfregex/regexes/add",data) as ServerResponse;
return status === "ok"?undefined:status
}
export async function serviceregexlist(service_id:string){
return await getapi(`nfregex/service/${service_id}/regexes`) as RegexFilter[];
}
export function errorNotify(title:string, description:string ){
showNotification({
autoClose: 2000,

52
frontend/src/pages/HomePage.tsx Executable file → Normal file
View File

@@ -1,52 +1,6 @@
import { ActionIcon, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { BsPlusLg } from "react-icons/bs";
import { useNavigate } from 'react-router-dom';
import ServiceRow from '../components/ServiceRow';
import { Service } from '../js/models';
import { errorNotify, eventUpdateName, fireUpdateRequest, servicelist } from '../js/utils';
import AddNewService from '../components/AddNewService';
import { useWindowEvent } from '@mantine/hooks';
import React from "react"
function HomePage() {
const [services, setServices] = useState<Service[]>([]);
const [loader, setLoader] = useState(true);
const navigator = useNavigate()
const [open, setOpen] = useState(false);
const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
const updateInfo = async () => {
await servicelist().then(res => {
setServices(res)
}).catch(err => {
errorNotify("Home Page Auto-Update failed!", err.toString())
})
setLoader(false)
}
useWindowEvent(eventUpdateName, updateInfo)
useEffect(fireUpdateRequest,[])
const closeModal = () => {setOpen(false);}
return <div id="service-list" className="center-flex-row">
<LoadingOverlay visible={loader} />
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.service_id} onClick={()=>{
navigator("/"+srv.service_id)
}} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
<Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
<div className='center-flex'>
<Tooltip label="Add a new service" transition="pop" transitionDuration={200} /*openDelay={500}*/ zIndex={0} transitionTimingFunction="ease" color="blue" opened={tooltipAddServOpened} tooltipId="tooltip-addServ-id">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)}
onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
</Tooltip>
</div>
</>}
<AddNewService opened={open} onClose={closeModal} />
</div>
export default function HomePage({ children }: { children: any }) {
return children
}
export default HomePage;

15
frontend/src/pages/ServiceDetails.tsx → frontend/src/pages/NFRegex.tsx/ServiceDetails.tsx
View File

@@ -1,12 +1,12 @@
import { ActionIcon, Grid, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import RegexView from '../components/RegexView';
import ServiceRow from '../components/ServiceRow';
import AddNewRegex from '../components/AddNewRegex';
import RegexView from '../../components/NFRegex/RegexView';
import ServiceRow from '../../components/NFRegex/ServiceRow';
import AddNewRegex from '../../components/NFRegex/AddNewRegex';
import { BsPlusLg } from "react-icons/bs";
import { RegexFilter, Service } from '../js/models';
import { errorNotify, eventUpdateName, fireUpdateRequest, serviceinfo, serviceregexlist } from '../js/utils';
import { RegexFilter, Service } from '../../js/models';
import { errorNotify, eventUpdateName, fireUpdateRequest, nfregex } from '../../js/utils';
import { useWindowEvent } from '@mantine/hooks';
function ServiceDetails() {
@@ -30,7 +30,7 @@ function ServiceDetails() {
const updateInfo = async () => {
if (!srv) return
let error = false;
await serviceinfo(srv).then(res => {
await nfregex.serviceinfo(srv).then(res => {
setServiceInfo(res)
}).catch(
err =>{
@@ -38,7 +38,8 @@ function ServiceDetails() {
navigator("/")
})
if (error) return
await serviceregexlist(srv).then(res => {
await nfregex.serviceregexes(srv).then(res => {
setRegexesList(res)
}).catch(
err => errorNotify(`Updater for ${srv} service failed [Regex list]!`, err.toString())

56
frontend/src/pages/NFRegex.tsx/index.tsx Executable file
View File

@@ -0,0 +1,56 @@
import { ActionIcon, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { BsPlusLg } from "react-icons/bs";
import { useNavigate, useParams } from 'react-router-dom';
import ServiceRow from '../../components/NFRegex/ServiceRow';
import { Service } from '../../js/models';
import { errorNotify, eventUpdateName, fireUpdateRequest, nfregex } from '../../js/utils';
import AddNewService from '../../components/NFRegex/AddNewService';
import { useWindowEvent } from '@mantine/hooks';
function NFRegex({ children }: { children: any }) {
const [services, setServices] = useState<Service[]>([]);
const [loader, setLoader] = useState(true);
const navigator = useNavigate()
const [open, setOpen] = useState(false);
const {srv} = useParams()
const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
const updateInfo = async () => {
await nfregex.services().then(res => {
setServices(res)
}).catch(err => {
errorNotify("Home Page Auto-Update failed!", err.toString())
})
setLoader(false)
}
useWindowEvent(eventUpdateName, updateInfo)
useEffect(fireUpdateRequest,[])
const closeModal = () => {setOpen(false);}
return <div id="service-list" className="center-flex-row">
{srv?children:<>
<LoadingOverlay visible={loader} />
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.service_id} onClick={()=>{
navigator("/nfregex/"+srv.service_id)
}} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
<Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
<div className='center-flex'>
<Tooltip label="Add a new service" transition="pop" transitionDuration={200} /*openDelay={500}*/ zIndex={0} transitionTimingFunction="ease" color="blue" opened={tooltipAddServOpened} tooltipId="tooltip-addServ-id">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)}
onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
</Tooltip>
</div>
</>}
<AddNewService opened={open} onClose={closeModal} />
</>}
</div>
}
export default NFRegex;