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

Netfliter Refactor

Browse Source
This commit is contained in:
nik012003
2022-07-07 21:08:02 +02:00
parent 2d06fc46d8
commit a97fea7005
16 changed files with 154 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/App.tsx
View File

@@ -130,7 +130,7 @@ function App() {
return <Routes>
<Route element={<MainLayout><Outlet /></MainLayout>}>
<Route index element={<HomePage />} />
<Route path=":srv_id" element={<ServiceDetails />} />
<Route path=":srv" element={<ServiceDetails />} />
<Route path="*" element={<Navigate to="/" />} />
</Route>
</Routes>

6
frontend/src/components/AddNewRegex.tsx
View File

@@ -15,7 +15,7 @@ type RegexAddInfo = {
deactive:boolean
}
function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:string }) {
function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:number }) {
const form = useForm({
initialValues: {
@@ -48,7 +48,7 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
const request:RegexAddForm = {
is_blacklist:values.type !== "whitelist",
is_case_sensitive: !values.is_case_insensitive,
service_id: service,
service_port: service,
mode: filter_mode?filter_mode:"B",
regex: b64encode(values.regex),
active: !values.deactive
@@ -59,7 +59,7 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
setSubmitLoading(false)
close();
fireUpdateRequest();
okNotify(`Regex ${b64decode(request.regex)} has been added`, `Successfully added ${request.is_case_sensitive?"case sensitive":"case insensitive"} ${request.is_blacklist?"blacklist":"whitelist"} regex to ${request.service_id} service`)
okNotify(`Regex ${b64decode(request.regex)} has been added`, `Successfully added ${request.is_case_sensitive?"case sensitive":"case insensitive"} ${request.is_blacklist?"blacklist":"whitelist"} regex to ${request.service_port} service`)
}else if (res.toLowerCase() === "invalid regex"){
setSubmitLoading(false)
form.setFieldError("regex", "Invalid Regex")

32
frontend/src/components/AddNewService.tsx
View File

@@ -8,8 +8,6 @@ type ServiceAddForm = {
name:string,
port:number,
autostart: boolean,
chosenInternalPort: boolean,
internalPort: number
}
function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void }) {
@@ -18,14 +16,11 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
initialValues: {
name:"",
port:8080,
internalPort:30001,
chosenInternalPort:false,
autostart: true
},
validationRules:{
name: (value) => value !== ""?true:false,
port: (value) => value>0 && value<65536,
internalPort: (value) => value>0 && value<65536,
}
})
@@ -38,15 +33,15 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
const [submitLoading, setSubmitLoading] = useState(false)
const [error, setError] = useState<string|null>(null)
const submitRequest = ({ name, port, autostart, chosenInternalPort, internalPort }:ServiceAddForm) =>{
const submitRequest = ({ name, port, autostart }:ServiceAddForm) =>{
setSubmitLoading(true)
addservice(chosenInternalPort?{ internalPort, name, port }:{ name, port }).then( res => {
addservice({name, port}).then( res => {
if (res.status === "ok"){
setSubmitLoading(false)
close();
fireUpdateRequest();
if (autostart) startservice(res.id)
okNotify(`Service ${name} has been added`, `Successfully added ${res.id} with port ${port}`)
if (autostart) startservice(port)
okNotify(`Service ${name} has been added`, `Successfully added service with port ${port}`)
}else{
setSubmitLoading(false)
setError("Invalid request! [ "+res.status+" ]")
@@ -75,18 +70,6 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
{...form.getInputProps('port')}
/>
{form.values.chosenInternalPort?<>
<Space h="md" />
<NumberInput
placeholder="8080"
min={1}
max={65535}
label="Internal Proxy Port"
{...form.getInputProps('internalPort')}
/>
<Space h="sm" />
</>:null}
<Space h="xl" />
<Switch
@@ -94,13 +77,6 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
{...form.getInputProps('autostart', { type: 'checkbox' })}
/>
<Space h="md" />
<Switch
label="Choose internal port"
{...form.getInputProps('chosenInternalPort', { type: 'checkbox' })}
/>
<Group position="right" mt="md">
<Button loading={submitLoading} type="submit">Add Service</Button>
</Group>

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

@@ -69,7 +69,9 @@ function Header() {
setLoadingBtn(false)
}
const {srv_id} = useParams()
const {srv} = useParams()
const service_port = srv?parseInt(srv):null
const [open, setOpen] = useState(false);
const closeModal = () => {setOpen(false);}
@@ -123,7 +125,7 @@ function Header() {
</ActionIcon>
</Tooltip>
:null}
{ srv_id?
{ service_port?
<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"
aria-describedby="tooltip-add-id"
@@ -138,8 +140,8 @@ function Header() {
</Tooltip>
}
{srv_id?
<AddNewRegex opened={open} onClose={closeModal} service={srv_id} />:
{service_port?
<AddNewRegex opened={open} onClose={closeModal} service={service_port} />:
<AddNewService opened={open} onClose={closeModal} />
}
<Modal size="xl" title="Change Firewall Password" opened={changePasswordModal} onClose={()=>setChangePasswordModal(false)} closeOnClickOutside={false} centered>

2
frontend/src/components/RegexView/index.tsx
View File

@@ -81,7 +81,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
/>
<Space h="md" />
<div className='center-flex'>
<Badge size="md" color="cyan" variant="filled">Service: {regexInfo.service_id}</Badge>
<Badge size="md" color="cyan" variant="filled">Service: {regexInfo.service_port}</Badge>
<Space w="xs" />
<Badge size="md" color={regexInfo.active?"lime":"red"} variant="filled">{regexInfo.active?"ACTIVE":"DISABLED"}</Badge>
<Space w="xs" />

107
frontend/src/components/ServiceRow/ChangePortModal.tsx
View File

@@ -1,107 +0,0 @@
import { Button, Group, NumberInput, Space, Notification, Modal, Center, Title } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import React, { useEffect, useState } from 'react';
import { changeports, fireUpdateRequest, okNotify } from '../../js/utils';
import { ImCross } from "react-icons/im"
import { Service } from '../../js/models';
import { FaLongArrowAltDown } from 'react-icons/fa';
type InputForm = {
internalPort:number,
port:number
}
function ChangePortModal({ service, opened, onClose }:{ service:Service, opened:boolean, onClose:()=>void }) {
const form = useForm({
initialValues: {
internalPort: service.internal_port,
port: service.public_port
},
validationRules:{
internalPort: (value) => value>0 && value<65536,
port: (value) => value>0 && value<65536
}
})
useEffect(()=>{
form.setValues({internalPort: service.internal_port, port:service.public_port})
},[opened])
const close = () =>{
onClose()
form.reset()
setError(null)
}
const [submitLoading, setSubmitLoading] = useState(false)
const [error, setError] = useState<string|null>(null)
const submitRequest = (data:InputForm) =>{
setSubmitLoading(true)
changeports(service.id, data).then( res => {
if (!res){
setSubmitLoading(false)
close();
fireUpdateRequest();
okNotify(`Internal port on ${service.name} service has changed in ${data.internalPort}`, `Successfully changed internal port of service with id ${service.id}`)
}else{
setSubmitLoading(false)
setError("Invalid request! [ "+res+" ]")
}
}).catch( err => {
setSubmitLoading(false)
setError("Request Failed! [ "+err+" ]")
})
}
return <Modal size="xl" title="Change Ports" opened={opened} onClose={close} closeOnClickOutside={false} centered>
<form onSubmit={form.onSubmit(submitRequest)}>
<NumberInput
placeholder="30001"
min={1}
max={65535}
label="Internal Proxy Port"
{...form.getInputProps('internalPort')}
/>
<Space h="xl" />
<Center><FaLongArrowAltDown size={50}/></Center>
<NumberInput
placeholder="8080"
min={1}
max={65535}
label="Public Service Port"
{...form.getInputProps('port')}
/>
<Space h="xl" />
<Center><Title order={5}>The change of the ports will cause a temporarily shutdown of the service! ⚠️</Title></Center>
<Space h="md" />
<Group position="right" mt="md">
<Button loading={submitLoading} disabled={
service.internal_port === form.values.internalPort && service.public_port === form.values.port
} type="submit">Change Port</Button>
</Group>
<Space h="md" />
{error?<>
<Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}>
Error: {error}
</Notification><Space h="md" /></>:null}
</form>
</Modal>
}
export default ChangePortModal;

115
frontend/src/components/ServiceRow/index.tsx
View File

@@ -1,15 +1,13 @@
import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core';
import React, { useState } from 'react';
import { FaPause, FaPlay, FaStop } from 'react-icons/fa';
import { FaPlay, FaStop } from 'react-icons/fa';
import { Service } from '../../js/models';
import { MdOutlineArrowForwardIos } from "react-icons/md"
import style from "./ServiceRow.module.scss";
import YesNoModal from '../YesNoModal';
import { deleteservice, errorNotify, fireUpdateRequest, okNotify, pauseservice, regenport, startservice, stopservice } from '../../js/utils';
import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs';
import { TbNumbers } from 'react-icons/tb';
import { deleteservice, errorNotify, fireUpdateRequest, okNotify, startservice, stopservice } from '../../js/utils';
import { BsTrashFill } from 'react-icons/bs';
import { BiRename } from 'react-icons/bi'
import ChangePortModal from './ChangePortModal';
//"status":"stop"/"wait"/"active"/"pause",
function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) {
@@ -17,68 +15,48 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
let status_color = "gray";
switch(service.status){
case "stop": status_color = "red"; break;
case "wait": status_color = "yellow"; break;
case "active": status_color = "teal"; break;
case "pause": status_color = "cyan"; break;
}
const [stopModal, setStopModal] = useState(false);
const [buttonLoading, setButtonLoading] = useState(false)
const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
const [deleteModal, setDeleteModal] = useState(false)
const [changePortModal, setChangePortModal] = useState(false)
const [choosePortModal, setChoosePortModal] = useState(false)
const stopService = async () => {
setButtonLoading(true)
await stopservice(service.id).then(res => {
await stopservice(service.port).then(res => {
if(!res){
okNotify(`Service ${service.id} stopped successfully!`,`The service ${service.name} has been stopped!`)
okNotify(`Service ${service.port} stopped successfully!`,`The service ${service.name} has been stopped!`)
fireUpdateRequest();
}else{
errorNotify(`An error as occurred during the stopping of the service ${service.id}`,`Error: ${res}`)
errorNotify(`An error as occurred during the stopping of the service ${service.port}`,`Error: ${res}`)
}
}).catch(err => {
errorNotify(`An error as occurred during the stopping of the service ${service.id}`,`Error: ${err}`)
errorNotify(`An error as occurred during the stopping of the service ${service.port}`,`Error: ${err}`)
})
setButtonLoading(false);
}
const startService = async () => {
setButtonLoading(true)
await startservice(service.id).then(res => {
await startservice(service.port).then(res => {
if(!res){
okNotify(`Service ${service.id} started successfully!`,`The service ${service.name} has been started!`)
okNotify(`Service ${service.port} started successfully!`,`The service ${service.name} has been started!`)
fireUpdateRequest();
}else{
errorNotify(`An error as occurred during the starting of the service ${service.id}`,`Error: ${res}`)
errorNotify(`An error as occurred during the starting of the service ${service.port}`,`Error: ${res}`)
}
}).catch(err => {
errorNotify(`An error as occurred during the starting of the service ${service.id}`,`Error: ${err}`)
errorNotify(`An error as occurred during the starting of the service ${service.port}`,`Error: ${err}`)
})
setButtonLoading(false)
}
const pauseService = async () => {
setButtonLoading(true)
await pauseservice(service.id).then(res => {
if(!res){
okNotify(`Service ${service.id} paused successfully!`,`The service ${service.name} has been paused (Transparent mode)!`)
fireUpdateRequest();
}else{
errorNotify(`An error as occurred during the pausing of the service ${service.id}`,`Error: ${res}`)
}
}).catch(err => {
errorNotify(`An error as occurred during the pausing of the service ${service.id}`,`Error: ${err}`)
})
setButtonLoading(false)
}
const deleteService = () => {
deleteservice(service.id).then(res => {
deleteservice(service.port).then(res => {
if (!res){
okNotify("Service delete complete!",`The service ${service.id} has been deleted!`)
okNotify("Service delete complete!",`The service ${service.port} has been deleted!`)
fireUpdateRequest();
}else
errorNotify("An error occurred while deleting a service",`Error: ${res}`)
@@ -88,32 +66,18 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
}
const changePort = () => {
regenport(service.id).then(res => {
if (!res){
okNotify("Service port regeneration completed!",`The service ${service.id} has changed the internal port!`)
fireUpdateRequest();
}else
errorNotify("An error occurred while changing the internal service port",`Error: ${res}`)
}).catch(err => {
errorNotify("An error occurred while changing the internal service port",`Error: ${err}`)
})
}
return <>
<Grid className={style.row} justify="flex-end" style={{width:"100%"}}>
<Grid.Col md={4} xs={12}>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}><div>
<div className="center-flex-row">
<div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.public_port}</Badge></div>
<Badge color={status_color} size="xl" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge>
<div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.port}</Badge></div>
</div>
</div></MediaQuery>
<MediaQuery largerThan="md" styles={{ display: 'none' }}><div>
<div className="center-flex">
<div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.public_port}</Badge></div>
<div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.port}</Badge></div>
<Space w="xl" />
<Badge color={status_color} size="xl" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge>
</div>
</div></MediaQuery>
@@ -146,35 +110,20 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
<Menu.Label><b>Rename service</b></Menu.Label>
<Menu.Item icon={<BiRename size={18} />} onClick={()=>{}}>Change service name</Menu.Item>
<Divider />
<Menu.Label><b>Change ports</b></Menu.Label>
<Menu.Item icon={<TbNumbers size={18} />} onClick={()=>setChoosePortModal(true)}>Change port</Menu.Item>
<Menu.Item icon={<BsArrowRepeat size={18} />} onClick={()=>setChangePortModal(true)}>Regen proxy port</Menu.Item>
<Divider />
<Menu.Label><b>Danger zone</b></Menu.Label>
<Menu.Item color="red" icon={<BsTrashFill size={18} />} onClick={()=>setDeleteModal(true)}>Delete Service</Menu.Item>
</Menu>
<Space w="md"/>
{["pause","wait"].includes(service.status)?
<Tooltip label="Stop service" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="orange" opened={tooltipStopOpened} tooltipId="tooltip-stop-id">
<ActionIcon color="yellow" loading={buttonLoading}
onClick={()=>setStopModal(true)} size="xl" radius="md" variant="filled"
disabled={service.status === "stop"}
aria-describedby="tooltip-stop-id"
onFocus={() => setTooltipStopOpened(false)} onBlur={() => setTooltipStopOpened(false)}
onMouseEnter={() => setTooltipStopOpened(true)} onMouseLeave={() => setTooltipStopOpened(false)}>
<FaStop size="20px" />
</ActionIcon>
</Tooltip>:
<Tooltip label={service.status === "stop"?"Start in pause mode":"Pause service"} zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color={service.status === "stop"?"cyan":"red"}>
<ActionIcon color={service.status === "stop"?"cyan":"red"} loading={buttonLoading}
onClick={pauseService} size="xl" radius="md" variant="filled"
/*disabled={service.status === "stop"}*/>
<FaPause size="20px" />
</ActionIcon>
</Tooltip>
}
<Space w="md"/>
<Tooltip label="Stop service" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="red" opened={tooltipStopOpened} tooltipId="tooltip-stop-id">
<ActionIcon color="red" loading={buttonLoading}
onClick={()=>setStopModal(true)} size="xl" radius="md" variant="filled"
disabled={service.status === "stop"}
aria-describedby="tooltip-stop-id"
onFocus={() => setTooltipStopOpened(false)} onBlur={() => setTooltipStopOpened(false)}
onMouseEnter={() => setTooltipStopOpened(true)} onMouseLeave={() => setTooltipStopOpened(false)}>
<FaStop size="20px" />
</ActionIcon>
</Tooltip>
<Space w="md"/>
<Tooltip label="Start service" transition="pop" zIndex={0} transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="teal">
<ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading}
@@ -196,7 +145,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
</Grid>
<YesNoModal
title='Are you sure to stop this service?'
description={`You are going to delete the service '${service.id}', causing the firewall to stop. This will cause the shutdown of your service! ⚠️`}
description={`You are going to delete the service '${service.port}', causing the firewall to stop. This will cause the shutdown of your service! ⚠️`}
onClose={()=>{setStopModal(false);}}
action={stopService}
opened={stopModal}
@@ -204,19 +153,11 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
<hr style={{width:"100%"}}/>
<YesNoModal
title='Are you sure to delete this service?'
description={`You are going to delete the service '${service.id}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}
description={`You are going to delete the service '${service.port}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}
onClose={()=>setDeleteModal(false) }
action={deleteService}
opened={deleteModal}
/>
<YesNoModal
title='Are you sure to change the proxy internal port?'
description={`You are going to change the proxy port '${service.internal_port}'. This will cause the shutdown of your service temporarily! ⚠️`}
onClose={()=>setChangePortModal(false)}
action={changePort}
opened={changePortModal}
/>
<ChangePortModal service={service} onClose={()=> setChoosePortModal(false)} opened={choosePortModal} />
</>
}

17
frontend/src/js/models.ts
View File

@@ -5,11 +5,9 @@ export type GeneralStats = {
}
export type Service = {
id:string,
name:string,
status:string,
public_port:number,
internal_port:number,
port:number,
n_packets:number,
n_regex:number,
}
@@ -23,15 +21,6 @@ export type ServiceAddForm = {
export type ServerResponse = {
status:string
}
export type ServerResponseWithID = {
status:string,
id:string
}
export type ChangePort = {
port?: number,
internalPort?: number
}
export type ServerResponseToken = {
status:string,
@@ -60,7 +49,7 @@ export type ChangePassword = {
export type RegexFilter = {
id:number,
service_id:string,
service_port:number,
regex:string
is_blacklist:boolean,
is_case_sensitive:boolean,
@@ -70,7 +59,7 @@ export type RegexFilter = {
}
export type RegexAddForm = {
service_id:string,
service_port:number,
regex:string,
is_case_sensitive:boolean,
is_blacklist:boolean,

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

@@ -1,7 +1,7 @@
import { showNotification } from "@mantine/notifications";
import { ImCross } from "react-icons/im";
import { TiTick } from "react-icons/ti"
import { GeneralStats, Service, ServiceAddForm, ServerResponse, RegexFilter, RegexAddForm, ServerStatusResponse, PasswordSend, ChangePassword, LoginResponse, ServerResponseToken, ServerResponseWithID, ChangePort } from "./models";
import { GeneralStats, Service, ServiceAddForm, ServerResponse, RegexFilter, RegexAddForm, ServerStatusResponse, PasswordSend, ChangePassword, LoginResponse, ServerResponseToken } from "./models";
var Buffer = require('buffer').Buffer
@@ -64,8 +64,8 @@ export async function servicelist(){
return await getapi("services") as Service[];
}
export async function serviceinfo(service_id:string){
return await getapi(`service/${service_id}`) as Service;
export async function serviceinfo(service_port:number){
return await getapi(`service/${service_port}`) as Service;
}
export async function logout(){
@@ -109,36 +109,22 @@ export async function deactivateregex(regex_id:number){
return status === "ok"?undefined:status
}
export async function startservice(service_id:string){
const { status } = await getapi(`service/${service_id}/start`) as ServerResponse;
export async function startservice(service_port:number){
const { status } = await getapi(`service/${service_port}/start`) as ServerResponse;
return status === "ok"?undefined:status
}
export async function stopservice(service_id:string){
const { status } = await getapi(`service/${service_id}/stop`) as ServerResponse;
return status === "ok"?undefined:status
}
export async function pauseservice(service_id:string){
const { status } = await getapi(`service/${service_id}/pause`) as ServerResponse;
return status === "ok"?undefined:status
}
export async function regenport(service_id:string){
const { status } = await getapi(`service/${service_id}/regen-port`) as ServerResponse;
return status === "ok"?undefined:status
}
export async function changeports(service_id:string, data:ChangePort){
const { status } = await postapi(`service/${service_id}/change-ports`,data) as ServerResponse;
export async function stopservice(service_port:number){
const { status } = await getapi(`service/${service_port}/stop`) as ServerResponse;
return status === "ok"?undefined:status
}
export async function addservice(data:ServiceAddForm) {
return await postapi("services/add",data) as ServerResponseWithID;
return await postapi("services/add",data) as ServerResponse;
}
export async function deleteservice(service_id:string) {
const { status } = await getapi(`service/${service_id}/delete`) as ServerResponse;
export async function deleteservice(service_port:number) {
const { status } = await getapi(`service/${service_port}/delete`) as ServerResponse;
return status === "ok"?undefined:status
}
@@ -148,8 +134,8 @@ export async function addregex(data:RegexAddForm) {
return status === "ok"?undefined:status
}
export async function serviceregexlist(service_id:string){
return await getapi(`service/${service_id}/regexes`) as RegexFilter[];
export async function serviceregexlist(service_port:number){
return await getapi(`service/${service_port}/regexes`) as RegexFilter[];
}

5
frontend/src/pages/HomePage.tsx
View File

@@ -33,14 +33,13 @@ function HomePage() {
return <div id="service-list" className="center-flex-row">
<LoadingOverlay visible={loader} />
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
navigator("/"+srv.id)
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.port} onClick={()=>{
navigator("/"+srv.port)
}} />):<><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"
aria-describedby="tooltip-addSrv-id"
onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)}
onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
</Tooltip>

20
frontend/src/pages/ServiceDetails.tsx
View File

@@ -10,15 +10,13 @@ import { errorNotify, eventUpdateName, fireUpdateRequest, serviceinfo, servicere
import { useWindowEvent } from '@mantine/hooks';
function ServiceDetails() {
const {srv_id} = useParams()
const {srv} = useParams()
const service_port = srv?parseInt(srv):null
const [serviceInfo, setServiceInfo] = useState<Service>({
id:srv_id?srv_id:"",
internal_port:0,
port:0,
n_packets:0,
n_regex:0,
name:srv_id?srv_id:"",
public_port:0,
name:"",
status:"🤔"
})
@@ -28,9 +26,9 @@ function ServiceDetails() {
const closeModal = () => {setOpen(false);updateInfo();}
const updateInfo = async () => {
if (!srv_id) return
if (!service_port) return
let error = false;
await serviceinfo(srv_id).then(res => {
await serviceinfo(service_port).then(res => {
setServiceInfo(res)
}).catch(
err =>{
@@ -38,10 +36,10 @@ function ServiceDetails() {
navigator("/")
})
if (error) return
await serviceregexlist(srv_id).then(res => {
await serviceregexlist(service_port).then(res => {
setRegexesList(res)
}).catch(
err => errorNotify(`Updater for ${srv_id} service failed [Regex list]!`, err.toString())
err => errorNotify(`Updater for ${service_port} service failed [Regex list]!`, err.toString())
)
setLoader(false)
}
@@ -75,7 +73,7 @@ function ServiceDetails() {
</Grid>
}
{srv_id?<AddNewRegex opened={open} onClose={closeModal} service={srv_id} />:null}
{service_port?<AddNewRegex opened={open} onClose={closeModal} service={service_port} />:null}
</div>