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

react-query + enable/disable firewall

Browse Source
This commit is contained in:
Domingo Dirutigliano
2023-09-24 05:48:54 +02:00
parent 732680753c
commit 4247dc181d
36 changed files with 283 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
backend/modules/firewall/firewall.py
View File

@@ -20,5 +20,8 @@ class FirewallManager:
async def reload(self):
async with self.lock:
if self.db.get("ENABLED", "0") == "1":
nft.set(map(Rule.from_dict, self.db.query('SELECT * FROM rules WHERE active = 1 ORDER BY rule_id;')), policy=self.db.get('POLICY', 'accept'))
else:
nft.reset()

35
backend/routers/firewall.py
View File

@@ -20,19 +20,21 @@ class RuleModel(BaseModel):
action: str
mode:str
class RuleForm(BaseModel):
class RuleFormAdd(BaseModel):
rules: list[RuleModel]
policy: str
class RuleInfo(BaseModel):
rules: list[RuleModel]
policy: str
enabled: bool
class RuleAddResponse(BaseModel):
status:str|list[dict]
class RenameForm(BaseModel):
name:str
class GeneralStatModel(BaseModel):
rules: int
app = APIRouter()
db = SQLite('db/firewall-rules.db', {
@@ -85,18 +87,27 @@ async def apply_changes():
await refresh_frontend()
return {'status': 'ok'}
@app.get('/stats', response_model=GeneralStatModel)
async def get_general_stats():
"""Get firegex general status about rules"""
return db.query("SELECT (SELECT COUNT(*) FROM rules) rules")[0]
@app.get('/rules', response_model=RuleForm)
@app.get('/rules', response_model=RuleInfo)
async def get_rule_list():
"""Get the list of existent firegex rules"""
return {
"policy": db.get("POLICY", "accept"),
"rules": db.query("SELECT active, name, proto, ip_src, ip_dst, port_src_from, port_dst_from, port_src_to, port_dst_to, action, mode FROM rules ORDER BY rule_id;")
"rules": db.query("SELECT active, name, proto, ip_src, ip_dst, port_src_from, port_dst_from, port_src_to, port_dst_to, action, mode FROM rules ORDER BY rule_id;"),
"enabled": db.get("ENABLED", "0") == "1"
}
@app.get('/enable', response_model=StatusMessageModel)
async def enable_firewall():
"""Request enabling the firewall"""
db.set("ENABLED", "1")
return await apply_changes()
@app.get('/disable', response_model=StatusMessageModel)
async def disable_firewall():
"""Request disabling the firewall"""
db.set("ENABLED", "0")
return await apply_changes()
@app.get('/rule/{rule_id}/disable', response_model=StatusMessageModel)
async def service_disable(rule_id: str):
"""Request disabling a specific rule"""
@@ -147,7 +158,7 @@ def parse_and_check_rule(rule:RuleModel):
@app.post('/rules/set', response_model=RuleAddResponse)
async def add_new_service(form: RuleForm):
async def add_new_service(form: RuleFormAdd):
"""Add a new service"""
if form.policy not in ["accept", "drop", "reject"]:
return {"status": "Invalid policy"}

16
backend/routers/nfregex.py
View File

@@ -10,11 +10,6 @@ from utils.sqlite import SQLite
from utils import ip_parse, refactor_name, refresh_frontend, PortType
from utils.models import ResetRequest, StatusMessageModel
class GeneralStatModel(BaseModel):
closed:int
regexes: int
services: int
class ServiceModel(BaseModel):
status: str
service_id: str
@@ -116,16 +111,6 @@ def gen_service_id():
firewall = FirewallManager(db)
@app.get('/stats', response_model=GeneralStatModel)
async def get_general_stats():
"""Get firegex general status about services"""
return db.query("""
SELECT
(SELECT COALESCE(SUM(blocked_packets),0) FROM regexes) closed,
(SELECT COUNT(*) FROM regexes) regexes,
(SELECT COUNT(*) FROM services) services
""")[0]
@app.get('/services', response_model=list[ServiceModel])
async def get_service_list():
"""Get the list of existent firegex services"""
@@ -200,6 +185,7 @@ async def service_rename(service_id: str, form: RenameForm):
@app.get('/service/{service_id}/regexes', response_model=list[RegexModel])
async def get_service_regexe_list(service_id: str):
"""Get the list of the regexes of a service"""
if not db.query("SELECT 1 FROM services s WHERE s.service_id = ?;", service_id): raise HTTPException(status_code=400, detail="This service does not exists!")
return db.query("""
SELECT
regex, mode, regex_id `id`, service_id, is_blacklist,

11
backend/routers/porthijack.py
View File

@@ -34,9 +34,6 @@ class ServiceAddResponse(BaseModel):
status:str
service_id: str|None = None
class GeneralStatModel(BaseModel):
services: int
app = APIRouter()
db = SQLite('db/port-hijacking.db', {
@@ -87,14 +84,6 @@ def gen_service_id():
firewall = FirewallManager(db)
@app.get('/stats', response_model=GeneralStatModel)
async def get_general_stats():
"""Get firegex general status about services"""
return db.query("""
SELECT
(SELECT COUNT(*) FROM services) services
""")[0]
@app.get('/services', response_model=list[ServiceModel])
async def get_service_list():
"""Get the list of existent firegex services"""

1
backend/routers/regexproxy.py
View File

@@ -196,6 +196,7 @@ class RegexModel(BaseModel):
@app.get('/service/{service_id}/regexes', response_model=list[RegexModel])
async def get_service_regexe_list(service_id: str):
"""Get the list of the regexes of a service"""
if not db.query("SELECT 1 FROM services s WHERE s.service_id = ?;", service_id): raise HTTPException(status_code=400, detail="This service does not exists!")
return db.query("""
SELECT
regex, mode, regex_id `id`, service_id, is_blacklist,

2
frontend/package.json
View File

@@ -11,6 +11,7 @@
"@mantine/notifications": "^6.0.13",
"@mantine/prism": "^6.0.13",
"@mantine/spotlight": "^6.0.13",
"@tanstack/react-query": "^4.35.3",
"@testing-library/dom": "^9.3.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
@@ -53,6 +54,7 @@
]
},
"devDependencies": {
"@tanstack/react-query-devtools": "^4.35.3",
"@vitejs/plugin-react": "^4.0.0",
"vite": "^4.3.9",
"vite-plugin-svgr": "^3.2.0",

7
frontend/src/App.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Loader, LoadingOverlay, Notification, Space, PasswordInput, Title } from '@mantine/core';
import { useForm } from '@mantine/form';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { ImCross } from 'react-icons/im';
import { Outlet, Route, Routes } from 'react-router-dom';
import MainLayout from './components/MainLayout';
@@ -52,11 +52,6 @@ function App() {
}
},[])
useEffect(()=>{
const updater = setInterval(fireUpdateRequest,6000)
return () => clearInterval(updater)
},[])
const form = useForm({
initialValues: {
password:"",

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

@@ -1,6 +1,6 @@
import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Modal } from '@mantine/core';
import { useForm } from '@mantine/form';
import React, { useState } from 'react';
import { useState } from 'react';
import { RegexAddForm } from '../js/models';
import { b64decode, b64encode, getapiobject, okNotify } from '../js/utils';
import { ImCross } from "react-icons/im"

26
frontend/src/components/Firewall/utils.ts
View File

@@ -1,10 +1,7 @@
import { RegexAddForm, RegexFilter, ServerResponse } from "../../js/models"
import { useQuery } from "@tanstack/react-query"
import { ServerResponse } from "../../js/models"
import { getapi, postapi } from "../../js/utils"
export type GeneralStats = {
rules:number,
}
export enum Protocol {
TCP = "tcp",
UDP = "udp",
@@ -37,6 +34,12 @@ export type Rule = {
}
export type RuleInfo = {
rules: Rule[]
policy: ActionType,
enabled: boolean
}
export type RuleAddForm = {
rules: Rule[]
policy: ActionType
}
@@ -46,14 +49,19 @@ export type ServerResponseListed = {
status:(ServerResponse & {rule_id:number})[]|string,
}
export const rulesQueryKey = ["firewall","rules"]
export const firewallRulesQuery = () => useQuery({queryKey:rulesQueryKey, queryFn:firewall.rules})
export const firewall = {
stats: async () => {
return await getapi("firewall/stats") as GeneralStats;
},
rules: async() => {
return await getapi("firewall/rules") as RuleInfo;
},
enable: async() => {
return await getapi("firewall/enable") as ServerResponse;
},
disable: async() => {
return await getapi("firewall/disable") as ServerResponse;
},
rulenable: async (rule_id:number) => {
return await getapi(`firewall/rule/${rule_id}/enable`) as ServerResponse;
},
@@ -64,7 +72,7 @@ export const firewall = {
const { status } = await postapi(`firewall/rule/${rule_id}/rename`,{ name }) as ServerResponse;
return status === "ok"?undefined:status
},
servicesadd: async (data:RuleInfo) => {
servicesadd: async (data:RuleAddForm) => {
return await postapi("firewall/rules/set", data) as ServerResponseListed;
}
}

2
frontend/src/components/Header/ResetModal.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Modal, Notification, Space, Switch, Text } from "@mantine/core";
import { useForm } from "@mantine/form";
import React, { useState } from "react"
import { useState } from "react"
import { ImCross } from "react-icons/im";
import { okNotify, resetfiregex } from "../../js/utils";

2
frontend/src/components/Header/ResetPasswordModal.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Modal, Notification, PasswordInput, Space, Switch } from "@mantine/core";
import { useForm } from "@mantine/form";
import React, { useState } from "react"
import { useState } from "react"
import { ImCross } from "react-icons/im";
import { ChangePassword } from "../../js/models";
import { changepassword, okNotify } from "../../js/utils";

4
frontend/src/components/MainLayout.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { ActionIcon, Container, Menu, Space, ThemeIcon } from '@mantine/core';
import { useEffect, useState } from 'react';
import { ActionIcon, Container, Menu, Space } from '@mantine/core';
import { AppShell } from '@mantine/core';
import NavBar from './NavBar';
import FooterPage from './Footer';

2
frontend/src/components/NFRegex/AddNewService.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Space, TextInput, Notification, Modal, Switch, SegmentedControl } from '@mantine/core';
import { useForm } from '@mantine/form';
import React, { useState } from 'react';
import { useState } from 'react';
import { okNotify, regex_ipv4, regex_ipv6 } from '../../js/utils';
import { ImCross } from "react-icons/im"
import { nfregex } from './utils';

2
frontend/src/components/NFRegex/ServiceRow/RenameForm.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Space, TextInput, Notification, Modal } from '@mantine/core';
import { useForm } from '@mantine/form';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { okNotify } from '../../../js/utils';
import { ImCross } from "react-icons/im"
import { nfregex, Service } from '../utils';

9
frontend/src/components/NFRegex/ServiceRow/index.tsx
View File

@@ -1,7 +1,7 @@
import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core';
import React, { useState } from 'react';
import { useState } from 'react';
import { FaPlay, FaStop } from 'react-icons/fa';
import { nfregex, Service } from '../utils';
import { nfregex, Service, serviceQueryKey } from '../utils';
import { MdOutlineArrowForwardIos } from "react-icons/md"
import style from "./index.module.scss";
import YesNoModal from '../../YesNoModal';
@@ -10,6 +10,7 @@ import { BsTrashFill } from 'react-icons/bs';
import { BiRename } from 'react-icons/bi'
import RenameForm from './RenameForm';
import { MenuDropDownWithButton } from '../../MainLayout';
import { useQueryClient } from '@tanstack/react-query';
function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) {
@@ -19,6 +20,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
case "active": status_color = "teal"; break;
}
const queryClient = useQueryClient()
const [buttonLoading, setButtonLoading] = useState(false)
const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
const [deleteModal, setDeleteModal] = useState(false)
@@ -30,6 +32,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
await nfregex.servicestop(service.service_id).then(res => {
if(!res){
okNotify(`Service ${service.name} stopped successfully!`,`The service on ${service.port} has been stopped!`)
queryClient.invalidateQueries(serviceQueryKey)
}else{
errorNotify(`An error as occurred during the stopping of the service ${service.port}`,`Error: ${res}`)
}
@@ -44,6 +47,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
await nfregex.servicestart(service.service_id).then(res => {
if(!res){
okNotify(`Service ${service.name} started successfully!`,`The service on ${service.port} has been started!`)
queryClient.invalidateQueries(serviceQueryKey)
}else{
errorNotify(`An error as occurred during the starting of the service ${service.port}`,`Error: ${res}`)
}
@@ -57,6 +61,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
nfregex.servicedelete(service.service_id).then(res => {
if (!res){
okNotify("Service delete complete!",`The service ${service.name} has been deleted!`)
queryClient.invalidateQueries(serviceQueryKey)
}else
errorNotify("An error occurred while deleting a service",`Error: ${res}`)
}).catch(err => {

17
frontend/src/components/NFRegex/utils.ts
View File

@@ -1,12 +1,7 @@
import { RegexFilter, ServerResponse } from "../../js/models"
import { getapi, postapi } from "../../js/utils"
import { RegexAddForm } from "../../js/models"
export type GeneralStats = {
services:number,
closed:number,
regexes:number
}
import { useQuery, useQueryClient } from "@tanstack/react-query"
export type Service = {
name:string,
@@ -31,12 +26,16 @@ export type ServiceAddResponse = {
service_id?: string,
}
export const serviceQueryKey = ["nfregex","services"]
export const statsQueryKey = ["nfregex","stats"]
export const nfregexServiceQuery = () => useQuery({queryKey:serviceQueryKey, queryFn:nfregex.services})
export const nfregexServiceRegexesQuery = (service_id:string) => useQuery({
queryKey:[...serviceQueryKey,service_id,"regexes"],
queryFn:() => nfregex.serviceregexes(service_id)
})
export const nfregex = {
stats: async () => {
return await getapi("nfregex/stats") as GeneralStats;
},
services: async () => {
return await getapi("nfregex/services") as Service[];
},

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

@@ -1,4 +1,4 @@
import { Box, Collapse, Divider, Group, MantineColor, Navbar, ScrollArea, Text, ThemeIcon, Title, UnstyledButton } from "@mantine/core";
import { Collapse, Divider, Group, MantineColor, Navbar, ScrollArea, Text, ThemeIcon, Title, UnstyledButton } from "@mantine/core";
import { useState } from "react";
import { IoMdGitNetwork } from "react-icons/io";
import { MdOutlineExpandLess, MdOutlineExpandMore, MdTransform } from "react-icons/md";
@@ -37,10 +37,8 @@ function NavBarButton({ navigate, closeNav, name, icon, color, disabled, onClick
}
export default function NavBar({ closeNav, opened }: {closeNav: () => void, opened: boolean}) {
const [toggleState, setToggleState] = useState(false);
const advancedPaths = ["regexproxy"]
const advancedSelected = advancedPaths.includes(getmainpath())
const toggle = (toggleState||advancedSelected)
const [toggle, setToggleState] = useState(false);
return <Navbar p="md" hiddenBreakpoint="md" hidden={!opened} width={{ md: 300 }}>
<Navbar.Section px="xs" mt="xs">
@@ -53,7 +51,7 @@ export default function NavBar({ closeNav, opened }: {closeNav: () => void, open
<NavBarButton navigate="nfregex" closeNav={closeNav} name="Netfilter Regex" color="lime" icon={<IoMdGitNetwork />} />
<NavBarButton navigate="porthijack" closeNav={closeNav} name="Hijack Port to Proxy" color="blue" icon={<GrDirections />} />
<Divider my="xs" label="Advanced" labelPosition="center" />
<NavBarButton closeNav={closeNav} name="Deprecated options" color="gray" icon={toggle ? <MdOutlineExpandLess /> : <MdOutlineExpandMore />} onClick={()=>setToggleState(!toggleState)} disabled={advancedSelected}/>
<NavBarButton closeNav={closeNav} name="Deprecated options" color="gray" icon={toggle ? <MdOutlineExpandLess /> : <MdOutlineExpandMore />} onClick={()=>setToggleState(!toggle)}/>
<Collapse in={toggle}>
<NavBarButton navigate="regexproxy" closeNav={closeNav} name="TCP Proxy Regex Filter" color="grape" icon={<MdTransform />} />
</Collapse>

2
frontend/src/components/PortAndInterface.tsx
View File

@@ -1,4 +1,4 @@
import { Autocomplete, AutocompleteItem, Select, Space, Title } from "@mantine/core"
import { AutocompleteItem, Select, Space, Title } from "@mantine/core"
import React, { useEffect, useState } from "react"
import { getipinterfaces } from "../js/utils";
import PortInput from "./PortInput";

2
frontend/src/components/PortHijack/AddNewService.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Space, TextInput, Notification, Modal, Switch, SegmentedControl } from '@mantine/core';
import { useForm } from '@mantine/form';
import React, { useState } from 'react';
import { useState } from 'react';
import { okNotify, regex_ipv6_no_cidr, regex_ipv4_no_cidr } from '../../js/utils';
import { ImCross } from "react-icons/im"
import { porthijack } from './utils';

2
frontend/src/components/PortHijack/ServiceRow/ChangeDestination.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Space, Notification, Modal } from '@mantine/core';
import { useForm } from '@mantine/form';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { okNotify, regex_ipv4_no_cidr, regex_ipv6_no_cidr } from '../../../js/utils';
import { ImCross } from "react-icons/im"
import { porthijack, Service } from '../utils';

2
frontend/src/components/PortHijack/ServiceRow/RenameForm.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Space, TextInput, Notification, Modal } from '@mantine/core';
import { useForm } from '@mantine/form';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { okNotify } from '../../../js/utils';
import { ImCross } from "react-icons/im"
import { porthijack, Service } from '../utils';

10
frontend/src/components/PortHijack/utils.ts
View File

@@ -1,5 +1,6 @@
import { ServerResponse } from "../../js/models"
import { getapi, postapi } from "../../js/utils"
import { UseQueryOptions, useQuery } from "@tanstack/react-query"
export type GeneralStats = {
services:number
@@ -27,11 +28,12 @@ export type ServiceAddForm = {
export type ServiceAddResponse = ServerResponse & { service_id: string }
export const queryKey = ["porthijack","services"]
export const porthijackServiceQuery = () => useQuery({queryKey, queryFn:porthijack.services})
export const porthijack = {
stats: async () => {
return await getapi("porthijack/stats") as GeneralStats;
},
services: async () => {
services: async () : Promise<Service[]> => {
return await getapi("porthijack/services") as Service[];
},
serviceinfo: async (service_id:string) => {

2
frontend/src/components/RegexProxy/AddNewService.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Space, TextInput, Notification, Modal, Switch } from '@mantine/core';
import { useForm } from '@mantine/form';
import React, { useState } from 'react';
import { useState } from 'react';
import { okNotify } from '../../js/utils';
import { ImCross } from "react-icons/im"
import { regexproxy } from './utils';

2
frontend/src/components/RegexProxy/ServiceRow/RenameForm.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Space, TextInput, Notification, Modal } from '@mantine/core';
import { useForm } from '@mantine/form';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { okNotify } from '../../../js/utils';
import { ImCross } from "react-icons/im"
import { regexproxy, Service } from '../utils';

2
frontend/src/components/RegexProxy/ServiceRow/index.tsx
View File

@@ -1,5 +1,5 @@
import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core';
import React, { useState } from 'react';
import { useState } from 'react';
import { FaPause, FaPlay, FaStop } from 'react-icons/fa';
import { MdOutlineArrowForwardIos } from "react-icons/md"
import style from "./ServiceRow.module.scss";

19
frontend/src/components/RegexProxy/utils.ts
View File

@@ -1,12 +1,7 @@
import { useQuery } from "@tanstack/react-query"
import { RegexAddForm, RegexFilter, ServerResponse } from "../../js/models"
import { getapi, postapi } from "../../js/utils"
export type GeneralStats = {
services:number,
closed:number,
regexes:number
}
export type Service = {
id:string,
name:string,
@@ -33,10 +28,16 @@ export type ChangePort = {
internalPort?: number
}
export const serviceQueryKey = ["regexproxy","services"]
export const regexproxyServiceQuery = () => useQuery({queryKey:serviceQueryKey, queryFn:regexproxy.services})
export const regexproxyServiceRegexesQuery = (service_id:string) => useQuery({
queryKey:[...serviceQueryKey,service_id,"regexes"],
queryFn:() => regexproxy.serviceregexes(service_id)
})
export const regexproxy = {
stats: async () => {
return await getapi("regexproxy/stats") as GeneralStats;
},
services: async() => {
return await getapi("regexproxy/services") as Service[];
},

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

@@ -1,5 +1,5 @@
import { Grid, Text, Title, Badge, Space, ActionIcon, Tooltip } from '@mantine/core';
import React, { useState } from 'react';
import { useState } from 'react';
import { RegexFilter } from '../../js/models';
import { b64decode, errorNotify, getapiobject, okNotify } from '../../js/utils';
import style from "./index.module.scss";

7
frontend/src/index.tsx
View File

@@ -5,15 +5,22 @@ import './index.scss';
import App from './App';
import { MantineProvider } from '@mantine/core';
import { Notifications } from '@mantine/notifications';
import {
QueryClientProvider,
} from '@tanstack/react-query'
import { queryClient } from './js/utils';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<QueryClientProvider client={queryClient}>
<MantineProvider theme={{ colorScheme: 'dark' }} withGlobalStyles withNormalizeCSS>
<Notifications />
<BrowserRouter>
<App />
</BrowserRouter>
</MantineProvider>
</QueryClientProvider>
);

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

@@ -6,17 +6,25 @@ import { nfregex } from "../components/NFRegex/utils";
import { regexproxy } from "../components/RegexProxy/utils";
import { ChangePassword, IpInterface, LoginResponse, PasswordSend, ServerResponse, ServerResponseToken, ServerStatusResponse } from "./models";
import { Buffer } from "buffer"
import { QueryClient } from "@tanstack/react-query";
export const IS_DEV = import.meta.env.DEV
export const eventUpdateName = "update-info"
export const regex_ipv6 = "^s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:)))(%.+)?s*(\\/([0-9]|[1-9][0-9]|1[0-1][0-9]|12[0-8]))?$";
export const regex_ipv6_no_cidr = "^s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:)))(%.+)?s*$";
export const regex_ipv4 = "^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(\\/(3[0-2]|[1-2][0-9]|[0-9]))?$"
export const regex_ipv4_no_cidr = "^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$"
export const DEV_IP_BACKEND = "192.168.230.3:4444"
export const DEV_IP_BACKEND = "192.168.231.3:4444"
export const queryClient = new QueryClient({ defaultOptions: { queries: {
staleTime: Infinity,
refetchInterval: 10*1000,
retry(failureCount, error) {
if (error == "Bad Request") return false;
return failureCount < 3;
},
} }})
export async function getapi(path:string):Promise<any>{
@@ -35,6 +43,19 @@ export async function getapi(path:string):Promise<any>{
});
}
export function getErrorMessage(e: any) {
let error = "Unknown error";
if (e.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
error = e.response.data.error;
} else {
// Something happened in setting up the request that triggered an Error
error = e.message || e.error;
}
return error;
}
export async function postapi(path:string,data:any,is_form:boolean=false):Promise<any>{
return await new Promise((resolve, reject) => {
fetch(`${IS_DEV?`http://${DEV_IP_BACKEND}`:""}/api/${path}`, {
@@ -80,8 +101,8 @@ export function HomeRedirector(){
return <Navigate to={path} />
}
export function fireUpdateRequest(){
window.dispatchEvent(new Event(eventUpdateName))
export function fireUpdateRequest(){ //TODO: change me: specify what to update
queryClient.invalidateQueries({ queryKey: [] })
}

41
frontend/src/pages/Firewall/index.tsx
View File

@@ -1,48 +1,35 @@
import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from "@mantine/core"
import { useEffect, useState } from "react";
import { BsPlusLg } from "react-icons/bs"
import { ActionType, GeneralStats, RuleInfo, firewall } from "../../components/Firewall/utils";
import { errorNotify, eventUpdateName, fireUpdateRequest } from "../../js/utils";
import { useWindowEvent } from "@mantine/hooks";
import { firewall, firewallRulesQuery } from "../../components/Firewall/utils";
import { errorNotify, getErrorMessage } from "../../js/utils";
export const Firewall = () => {
const [generalStats, setGeneralStats] = useState<GeneralStats>({ rules: 0 });
const [rules, setRules] = useState<RuleInfo>({rules:[], policy:ActionType.ACCEPT});
const [loader, setLoader] = useState(true);
const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
const [open, setOpen] = useState(false);
const rules = firewallRulesQuery()
const updateInfo = async () => {
await Promise.all([
firewall.stats().then(res => {
setGeneralStats(res)
}).catch(
err => errorNotify("General Info Auto-Update failed!", err.toString())
),
firewall.rules().then(res => {
setRules(res)
}).catch(err => {
errorNotify("Home Page Auto-Update failed!", err.toString())
})
])
setLoader(false)
}
useWindowEvent(eventUpdateName, updateInfo)
useEffect(fireUpdateRequest,[])
useEffect(()=> {
if(rules.isError)
errorNotify("Firewall Update failed!", getErrorMessage(rules.error))
},[rules.isError])
return <>
<Space h="sm" />
<div className='center-flex'>
<Title order={4}>Firewall Rules</Title>
<div className='flex-spacer' />
<Badge size="sm" color="green" variant="filled">Rules: {generalStats.rules}</Badge>
<div className='flex-spacer' />
<Badge size="sm" color="green" variant="filled">Rules: {rules.isLoading?0:rules.data?.rules.length}</Badge>
<Space w="xs" />
<Badge size="sm" color="yellow" variant="filled">Policy: {rules.isLoading?"unknown":rules.data?.policy}</Badge>
<Space w="xs" />
<Badge size="sm" color="violet" variant="filled">Enabled: {rules.isLoading?"?":(rules.data?.enabled?"🟢":"🔴")}</Badge>
<Space w="xs" />
<Tooltip label="Add a new rule" position='bottom' color="blue" opened={tooltipAddOpened}>
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled"
@@ -50,6 +37,6 @@ export const Firewall = () => {
onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size={18} /></ActionIcon>
</Tooltip>
</div>
<LoadingOverlay visible={loader} />
<LoadingOverlay visible={rules.isLoading} />
</>
}

66
frontend/src/pages/NFRegex/ServiceDetails.tsx
View File

@@ -1,65 +1,27 @@
import { ActionIcon, Grid, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useState } from 'react';
import { Navigate, useParams } from 'react-router-dom';
import RegexView from '../../components/RegexView';
import ServiceRow from '../../components/NFRegex/ServiceRow';
import AddNewRegex from '../../components/AddNewRegex';
import { BsPlusLg } from "react-icons/bs";
import { nfregex, Service } from '../../components/NFRegex/utils';
import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
import { useWindowEvent } from '@mantine/hooks';
import { RegexFilter } from '../../js/models';
import { nfregexServiceQuery, nfregexServiceRegexesQuery } from '../../components/NFRegex/utils';
function ServiceDetailsNFRegex() {
const {srv} = useParams()
const [serviceInfo, setServiceInfo] = useState<Service>({
service_id: "",
port:0,
n_packets:0,
n_regex:0,
name:"",
status:"🤔",
ip_int: "",
proto: "tcp",
})
const [open, setOpen] = useState(false)
const services = nfregexServiceQuery()
const serviceInfo = services.data?.find(s => s.service_id == srv)
const [tooltipAddRegexOpened, setTooltipAddRegexOpened] = useState(false)
const regexesList = nfregexServiceRegexesQuery(srv??"")
const [regexesList, setRegexesList] = useState<RegexFilter[]>([])
const [loader, setLoader] = useState(true);
const [open, setOpen] = useState(false);
const closeModal = () => {setOpen(false);updateInfo();}
const updateInfo = async () => {
if (!srv) return
let error = false;
await nfregex.serviceinfo(srv).then(res => {
setServiceInfo(res)
}).catch(
err =>{
error = true;
navigator("/")
})
if (error) return
await nfregex.serviceregexes(srv).then(res => {
setRegexesList(res)
}).catch(
err => errorNotify(`Updater for ${srv} service failed [Regex list]!`, err.toString())
)
setLoader(false)
}
useWindowEvent(eventUpdateName, updateInfo)
useEffect(fireUpdateRequest,[])
const navigator = useNavigate()
const [tooltipAddRegexOpened, setTooltipAddRegexOpened] = useState(false);
if (!srv || !serviceInfo || regexesList.isError) return <Navigate to="/" replace />
return <>
<LoadingOverlay visible={loader} />
<LoadingOverlay visible={regexesList.isLoading} />
<ServiceRow service={serviceInfo} />
{regexesList.length === 0?<>
{(!regexesList.data || regexesList.data.length == 0)?<>
<Space h="xl" />
<Title className='center-flex' align='center' order={3}>No regex found for this service! Add one by clicking the "+" buttons</Title>
<Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
@@ -73,11 +35,11 @@ function ServiceDetailsNFRegex() {
</div>
</>:
<Grid>
{regexesList.map( (regexInfo) => <Grid.Col key={regexInfo.id} lg={6} xs={12}><RegexView regexInfo={regexInfo} /></Grid.Col>)}
{regexesList.data?.map( (regexInfo) => <Grid.Col key={regexInfo.id} lg={6} xs={12}><RegexView regexInfo={regexInfo} /></Grid.Col>)}
</Grid>
}
{srv?<AddNewRegex opened={open} onClose={closeModal} service={srv} />:null}
{srv?<AddNewRegex opened={open} onClose={() => {setOpen(false);}} service={srv} />:null}
</>
}

41
frontend/src/pages/NFRegex/index.tsx
View File

@@ -1,45 +1,30 @@
import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { BsPlusLg } from "react-icons/bs";
import { useNavigate, useParams } from 'react-router-dom';
import ServiceRow from '../../components/NFRegex/ServiceRow';
import { GeneralStats, nfregex, Service } from '../../components/NFRegex/utils';
import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
import { nfregexServiceQuery } from '../../components/NFRegex/utils';
import { errorNotify, getErrorMessage } from '../../js/utils';
import AddNewService from '../../components/NFRegex/AddNewService';
import { useWindowEvent } from '@mantine/hooks';
import AddNewRegex from '../../components/AddNewRegex';
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 [tooltipAddOpened, setTooltipAddOpened] = useState(false);
const [generalStats, setGeneralStats] = useState<GeneralStats>({closed:0, regexes:0, services:0});
const updateInfo = async () => {
const services = nfregexServiceQuery()
await Promise.all([
nfregex.stats().then(res => {
setGeneralStats(res)
}).catch(
err => errorNotify("General Info Auto-Update failed!", err.toString())
),
nfregex.services().then(res => {
setServices(res)
}).catch(err => {
errorNotify("Home Page Auto-Update failed!", err.toString())
})
])
setLoader(false)
useEffect(()=> {
if(services.isError){
errorNotify("NFRegex Update failed!", getErrorMessage(services.error))
}
useWindowEvent(eventUpdateName, updateInfo)
useEffect(fireUpdateRequest,[])
},[services.isError])
const closeModal = () => {setOpen(false);}
@@ -48,11 +33,11 @@ function NFRegex({ children }: { children: any }) {
<div className='center-flex'>
<Title order={4}>Netfilter Regex</Title>
<div className='flex-spacer' />
<Badge size="sm" color="green" variant="filled">Services: {generalStats.services}</Badge>
<Badge size="sm" color="green" variant="filled">Services: {services.isLoading?0:services.data?.length}</Badge>
<Space w="xs" />
<Badge size="sm" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
<Badge size="sm" color="yellow" variant="filled">Filtered Connections: {services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_packets, 0)}</Badge>
<Space w="xs" />
<Badge size="sm" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
<Badge size="sm" color="violet" variant="filled">Regexes: {services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_regex, 0)}</Badge>
<Space w="xs" />
{ srv?
<Tooltip label="Add a new regex" position='bottom' color="blue" opened={tooltipAddOpened}>
@@ -69,8 +54,8 @@ function NFRegex({ children }: { children: any }) {
</div>
<div id="service-list" className="center-flex-row">
{srv?null:<>
<LoadingOverlay visible={loader} />
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.service_id} onClick={()=>{
<LoadingOverlay visible={services.isLoading} />
{(services.data && services.data?.length > 0)?services.data.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" />

40
frontend/src/pages/PortHijack/index.tsx
View File

@@ -1,41 +1,26 @@
import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { BsPlusLg } from "react-icons/bs";
import ServiceRow from '../../components/PortHijack/ServiceRow';
import { GeneralStats, porthijack, Service } from '../../components/PortHijack/utils';
import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
import { porthijackServiceQuery } from '../../components/PortHijack/utils';
import { errorNotify, getErrorMessage } from '../../js/utils';
import AddNewService from '../../components/PortHijack/AddNewService';
import { useWindowEvent } from '@mantine/hooks';
function PortHijack() {
const [services, setServices] = useState<Service[]>([]);
const [loader, setLoader] = useState(true);
const [open, setOpen] = useState(false);
const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
const [generalStats, setGeneralStats] = useState<GeneralStats>({services:0});
const updateInfo = async () => {
await Promise.all([
porthijack.stats().then(res => {
setGeneralStats(res)
}).catch(
err => errorNotify("General Info Auto-Update failed!", err.toString())
),
porthijack.services().then(res => {
setServices(res)
}).catch(err => {
errorNotify("Home Page Auto-Update failed!", err.toString())
})
])
setLoader(false)
const services = porthijackServiceQuery()
useEffect(()=>{
if(services.isError){
errorNotify("Porthijack Update failed!", getErrorMessage(services.error))
}
useWindowEvent(eventUpdateName, updateInfo)
useEffect(fireUpdateRequest,[])
},[services.isError])
const closeModal = () => {setOpen(false);}
@@ -44,7 +29,7 @@ function PortHijack() {
<div className='center-flex'>
<Title order={4}>Hijack port to proxy</Title>
<div className='flex-spacer' />
<Badge size="sm" color="yellow" variant="filled">Services: {generalStats.services}</Badge>
<Badge size="sm" color="yellow" variant="filled">Services: {services.isLoading?0:services.data?.length}</Badge>
<Space w="xs" />
<Tooltip label="Add a new service" position='bottom' color="blue" opened={tooltipAddOpened}>
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled"
@@ -53,8 +38,9 @@ function PortHijack() {
</Tooltip>
</div>
<div id="service-list" className="center-flex-row">
<LoadingOverlay visible={loader} />
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.service_id} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
<LoadingOverlay visible={services.isLoading} />
{(services.data && services.data.length > 0) ?services.data.map( srv => <ServiceRow service={srv} key={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" color="blue" opened={tooltipAddServOpened}>

65
frontend/src/pages/RegexProxy/ServiceDetails.tsx
View File

@@ -1,64 +1,27 @@
import { ActionIcon, Grid, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useState } from 'react';
import { Navigate, useParams } from 'react-router-dom';
import { BsPlusLg } from "react-icons/bs";
import { useWindowEvent } from '@mantine/hooks';
import { regexproxy, Service } from '../../components/RegexProxy/utils';
import { RegexFilter } from '../../js/models';
import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
import { regexproxyServiceQuery, regexproxyServiceRegexesQuery } from '../../components/RegexProxy/utils';
import ServiceRow from '../../components/RegexProxy/ServiceRow';
import AddNewRegex from '../../components/AddNewRegex';
import RegexView from '../../components/RegexView';
function ServiceDetailsProxyRegex() {
const {srv} = useParams()
const [open, setOpen] = useState(false)
const services = regexproxyServiceQuery()
const serviceInfo = services.data?.find(s => s.id == srv)
const [tooltipAddRegexOpened, setTooltipAddRegexOpened] = useState(false)
const regexesList = regexproxyServiceRegexesQuery(srv??"")
const [serviceInfo, setServiceInfo] = useState<Service>({
id:srv?srv:"",
internal_port:0,
n_packets:0,
n_regex:0,
name:srv?srv:"",
public_port:0,
status:"🤔"
})
const [regexesList, setRegexesList] = useState<RegexFilter[]>([])
const [loader, setLoader] = useState(true);
const [open, setOpen] = useState(false);
const closeModal = () => {setOpen(false);updateInfo();}
const updateInfo = async () => {
if (!srv) return
let error = false;
await regexproxy.serviceinfo(srv).then(res => {
setServiceInfo(res)
}).catch(
err =>{
error = true;
navigator("/")
})
if (error) return
await regexproxy.serviceregexes(srv).then(res => {
setRegexesList(res)
}).catch(
err => errorNotify(`Updater for ${srv} service failed [Regex list]!`, err.toString())
)
setLoader(false)
}
useWindowEvent(eventUpdateName, updateInfo)
useEffect(fireUpdateRequest,[])
const navigator = useNavigate()
const [tooltipAddRegexOpened, setTooltipAddRegexOpened] = useState(false);
if (!srv || !serviceInfo || regexesList.isError) return <Navigate to="/" replace />
return <div>
<LoadingOverlay visible={loader} />
<LoadingOverlay visible={regexesList.isLoading} />
<ServiceRow service={serviceInfo} />
{regexesList.length === 0?<>
{(!regexesList.data || regexesList.data.length == 0)?<>
<Space h="xl" />
<Title className='center-flex' align='center' order={3}>No regex found for this service! Add one by clicking the "+" buttons</Title>
<Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
@@ -72,11 +35,11 @@ function ServiceDetailsProxyRegex() {
</div>
</>:
<Grid>
{regexesList.map( (regexInfo) => <Grid.Col key={regexInfo.id} lg={6} xs={12}><RegexView regexInfo={regexInfo} /></Grid.Col>)}
{regexesList.data.map( (regexInfo) => <Grid.Col key={regexInfo.id} lg={6} xs={12}><RegexView regexInfo={regexInfo} /></Grid.Col>)}
</Grid>
}
{srv?<AddNewRegex opened={open} onClose={closeModal} service={srv} />:null}
{srv?<AddNewRegex opened={open} onClose={() => {setOpen(false)}} service={srv} />:null}
</div>

43
frontend/src/pages/RegexProxy/index.tsx
View File

@@ -1,46 +1,29 @@
import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { BsPlusLg } from "react-icons/bs";
import { useNavigate, useParams } from 'react-router-dom';
import ServiceRow from '../../components/RegexProxy/ServiceRow';
import { GeneralStats, regexproxy, Service } from '../../components/RegexProxy/utils';
import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
import { regexproxyServiceQuery } from '../../components/RegexProxy/utils';
import { errorNotify, getErrorMessage } from '../../js/utils';
import AddNewService from '../../components/RegexProxy/AddNewService';
import { useWindowEvent } from '@mantine/hooks';
import AddNewRegex from '../../components/AddNewRegex';
function RegexProxy({ 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 [tooltipAddOpened, setTooltipAddOpened] = useState(false);
const [generalStats, setGeneralStats] = useState<GeneralStats>({closed:0, regexes:0, services:0});
const services = regexproxyServiceQuery()
const updateInfo = async () => {
await Promise.all([
regexproxy.stats().then(res => {
setGeneralStats(res)
}).catch(
err => errorNotify("General Info Auto-Update failed!", err.toString())
),
regexproxy.services().then(res => {
setServices(res)
}).catch(err => {
errorNotify("Home Page Auto-Update failed!", err.toString())
})
])
setLoader(false)
useEffect(()=> {
if(services.isError){
errorNotify("RegexProxy Update failed!", getErrorMessage(services.error))
}
useWindowEvent(eventUpdateName, updateInfo)
useEffect(fireUpdateRequest,[])
},[services.isError])
const closeModal = () => {setOpen(false);}
@@ -49,11 +32,11 @@ function RegexProxy({ children }: { children: any }) {
<div className='center-flex'>
<Title order={4}>TCP Proxy Regex Filter (IPv4 Only)</Title>
<div className='flex-spacer' />
<Badge size="sm" color="green" variant="filled">Services: {generalStats.services}</Badge>
<Badge size="sm" color="green" variant="filled">Services: {services.isLoading?0:services.data?.length}</Badge>
<Space w="xs" />
<Badge size="sm" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
<Badge size="sm" color="yellow" variant="filled">Filtered Connections: {services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_packets, 0)}</Badge>
<Space w="xs" />
<Badge size="sm" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
<Badge size="sm" color="violet" variant="filled">Regexes: {services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_regex, 0)}</Badge>
<Space w="xs" />
{ srv?
<Tooltip label="Add a new regex" position='bottom' color="blue" opened={tooltipAddOpened}>
@@ -70,8 +53,8 @@ function RegexProxy({ children }: { children: any }) {
</div>
<div id="service-list" className="center-flex-row">
{srv?null:<>
<LoadingOverlay visible={loader} />
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
<LoadingOverlay visible={services.isLoading} />
{(services.data && services.data?.length > 0)?services.data.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
navigator("/regexproxy/"+srv.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" />

58
frontend/yarn.lock
View File

@@ -775,6 +775,35 @@
"@svgr/hast-util-to-babel-ast" "^7.0.0"
svg-parser "^2.0.4"
"@tanstack/match-sorter-utils@^8.7.0":
version "8.8.4"
resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz#0b2864d8b7bac06a9f84cb903d405852cc40a457"
integrity sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==
dependencies:
remove-accents "0.4.2"
"@tanstack/query-core@4.35.3":
version "4.35.3"
resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.35.3.tgz#1c127e66b4ad1beeac052db83a812d7cb67369e1"
integrity sha512-PS+WEjd9wzKTyNjjQymvcOe1yg8f3wYc6mD+vb6CKyZAKvu4sIJwryfqfBULITKCla7P9C4l5e9RXePHvZOZeQ==
"@tanstack/react-query-devtools@^4.35.3":
version "4.35.3"
resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-4.35.3.tgz#f03b39b613782a97794a42798d979c02ba51a7df"
integrity sha512-UvLT7qPzCuCZ3NfjwsOqDUVN84JvSOuW6ukrjZmSqgjPqVxD6ra/HUp1CEOatQY2TRvKCp8y1lTVu+trXM30fg==
dependencies:
"@tanstack/match-sorter-utils" "^8.7.0"
superjson "^1.10.0"
use-sync-external-store "^1.2.0"
"@tanstack/react-query@^4.35.3":
version "4.35.3"
resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.35.3.tgz#03d726ef6a19d426166427c6539b003dd9606d1b"
integrity sha512-UgTPioip/rGG3EQilXfA2j4BJkhEQsR+KAbF+KIuvQ7j4MkgnTCJF01SfRpIRNtQTlEfz/+IL7+jP8WA8bFbsw==
dependencies:
"@tanstack/query-core" "4.35.3"
use-sync-external-store "^1.2.0"
"@testing-library/dom@^8.5.0":
version "8.20.1"
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.1.tgz#2e52a32e46fc88369eef7eef634ac2a192decd9f"
@@ -1166,6 +1195,13 @@ convert-source-map@^1.5.0, convert-source-map@^1.7.0:
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
copy-anything@^3.0.2:
version "3.0.5"
resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-3.0.5.tgz#2d92dce8c498f790fa7ad16b01a1ae5a45b020a0"
integrity sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==
dependencies:
is-what "^4.1.8"
cosmiconfig@^7.0.0:
version "7.1.0"
resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
@@ -1716,6 +1752,11 @@ is-weakset@^2.0.1:
call-bind "^1.0.2"
get-intrinsic "^1.1.1"
is-what@^4.1.8:
version "4.1.15"
resolved "https://registry.yarnpkg.com/is-what/-/is-what-4.1.15.tgz#de43a81090417a425942d67b1ae86e7fae2eee0e"
integrity sha512-uKua1wfy3Yt+YqsD6mTUEa2zSi3G1oPlqTflgaPJ7z63vUGN5pxFpnQfeSLMFnJDEsdvOtkp1rUWkYjB4YfhgA==
isarray@^2.0.5:
version "2.0.5"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
@@ -2134,6 +2175,11 @@ regexp.prototype.flags@^1.5.0:
define-properties "^1.2.0"
functions-have-names "^1.2.3"
remove-accents@0.4.2:
version "0.4.2"
resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
resolve-from@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -2244,6 +2290,13 @@ stylis@4.2.0:
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
superjson@^1.10.0:
version "1.13.1"
resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.13.1.tgz#a0b6ab5d22876f6207fcb9d08b0cb2acad8ee5cd"
integrity sha512-AVH2eknm9DEd3qvxM4Sq+LTCkSXE2ssfh1t11MHMXyYXFQyQ1HLgVvV+guLTsaQnJU3gnaVo34TohHPulY/wLg==
dependencies:
copy-anything "^3.0.2"
supports-color@^5.3.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -2340,6 +2393,11 @@ use-sidecar@^1.1.2:
detect-node-es "^1.1.0"
tslib "^2.0.0"
use-sync-external-store@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
vite-plugin-svgr@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/vite-plugin-svgr/-/vite-plugin-svgr-3.2.0.tgz#920375aaf6635091c9ac8e467825f92d32544476"