react-query + enable/disable firewall

backend/modules/firewall/firewall.py

@@ -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()
 

backend/routers/firewall.py

@@ -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)
+@app.get('/rules', response_model=RuleInfo)
-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)
 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"}

backend/routers/nfregex.py

@@ -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,

backend/routers/porthijack.py

@@ -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"""

backend/routers/regexproxy.py

@@ -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,

frontend/package.json

@@ -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",

frontend/src/App.tsx

@@ -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:"",

frontend/src/components/AddNewRegex.tsx

@@ -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"

frontend/src/components/Firewall/utils.ts

@@ -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;
     }
 }

frontend/src/components/Header/ResetModal.tsx

@@ -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";
 

frontend/src/components/Header/ResetPasswordModal.tsx

@@ -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";

frontend/src/components/MainLayout.tsx

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

frontend/src/components/NFRegex/AddNewService.tsx

@@ -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';

frontend/src/components/NFRegex/ServiceRow/RenameForm.tsx

@@ -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';

frontend/src/components/NFRegex/ServiceRow/index.tsx

@@ -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 => {

frontend/src/components/NFRegex/utils.ts

@@ -1,12 +1,7 @@
 import { RegexFilter, ServerResponse } from "../../js/models"
 import { getapi, postapi } from "../../js/utils"
 import { RegexAddForm } from "../../js/models"
-
+import { useQuery, useQueryClient } from "@tanstack/react-query"
-export type GeneralStats = {
-    services:number,
-    closed:number,
-    regexes:number
-}
 
 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[];
     },

frontend/src/components/NavBar/index.tsx

@@ -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 [toggle, setToggleState] = useState(false);
-    const advancedPaths = ["regexproxy"]
+
-    const advancedSelected = advancedPaths.includes(getmainpath())
-    const toggle = (toggleState||advancedSelected)
     
     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>

frontend/src/components/PortAndInterface.tsx

@@ -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";

frontend/src/components/PortHijack/AddNewService.tsx

@@ -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';

frontend/src/components/PortHijack/ServiceRow/ChangeDestination.tsx

@@ -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';

frontend/src/components/PortHijack/ServiceRow/RenameForm.tsx

@@ -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';

frontend/src/components/PortHijack/utils.ts

@@ -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 () => {
+    services: async () : Promise<Service[]>  => {
-        return await getapi("porthijack/stats") as GeneralStats;
-    },
-    services: async () => {
         return await getapi("porthijack/services") as Service[];
     },
     serviceinfo: async (service_id:string) => {

frontend/src/components/RegexProxy/AddNewService.tsx

@@ -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';

frontend/src/components/RegexProxy/ServiceRow/RenameForm.tsx

@@ -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';

frontend/src/components/RegexProxy/ServiceRow/index.tsx

@@ -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";

frontend/src/components/RegexProxy/utils.ts

@@ -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[];
     },

frontend/src/components/RegexView/index.tsx

@@ -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";

frontend/src/index.tsx

@@ -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>
 );

frontend/src/js/utils.tsx

@@ -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(){
+export function fireUpdateRequest(){ //TODO: change me: specify what to update
-    window.dispatchEvent(new Event(eventUpdateName))
+    queryClient.invalidateQueries({ queryKey: [] })
 }
 
 

frontend/src/pages/Firewall/index.tsx

@@ -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 { firewall, firewallRulesQuery } from "../../components/Firewall/utils";
-import { errorNotify, eventUpdateName, fireUpdateRequest } from "../../js/utils";
+import { errorNotify, getErrorMessage } from "../../js/utils";
-import { useWindowEvent } from "@mantine/hooks";
 
 
 
 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} />
     </>
 }

frontend/src/pages/NFRegex/ServiceDetails.tsx

@@ -1,65 +1,27 @@
 import { ActionIcon, Grid, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
-import React, { useEffect, useState } from 'react';
+import { useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+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 { nfregexServiceQuery, nfregexServiceRegexesQuery } from '../../components/NFRegex/utils';
-import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
-import { useWindowEvent } from '@mantine/hooks';
-import { RegexFilter } from '../../js/models';
 
 function ServiceDetailsNFRegex() {
+
     const {srv} = useParams()
-    const [serviceInfo, setServiceInfo] = useState<Service>({
+    const [open, setOpen] = useState(false)
-        service_id: "",
+    const services = nfregexServiceQuery()
-        port:0,
+    const serviceInfo = services.data?.find(s => s.service_id == srv)
-        n_packets:0,
+    const [tooltipAddRegexOpened, setTooltipAddRegexOpened] = useState(false)
-        n_regex:0,
+    const regexesList = nfregexServiceRegexesQuery(srv??"")
-        name:"",
-        status:"🤔",
-        ip_int: "",
-        proto: "tcp",
-    })
 
-    const [regexesList, setRegexesList] = useState<RegexFilter[]>([])
+    if (!srv || !serviceInfo || regexesList.isError) return <Navigate to="/" replace />
-    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);
 
     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}
     </>
 }
 

frontend/src/pages/NFRegex/index.tsx

@@ -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 { nfregexServiceQuery } from '../../components/NFRegex/utils';
-import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/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 services = nfregexServiceQuery()
-    const updateInfo = async () => {
 
-        await Promise.all([
+    useEffect(()=> {
-            nfregex.stats().then(res => {
+        if(services.isError){
-                setGeneralStats(res)
+            errorNotify("NFRegex Update failed!", getErrorMessage(services.error))
-            }).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)
         }
         
-    useWindowEvent(eventUpdateName, updateInfo)
+    },[services.isError])
-    useEffect(fireUpdateRequest,[])
 
     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} />
+            <LoadingOverlay visible={services.isLoading} />
-            {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.service_id} onClick={()=>{
+            {(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" /> 

frontend/src/pages/PortHijack/index.tsx

@@ -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 { porthijackServiceQuery } from '../../components/PortHijack/utils';
-import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/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([
+    const services = porthijackServiceQuery()
-            porthijack.stats().then(res => {
+
-                setGeneralStats(res)
+    useEffect(()=>{
-            }).catch(
+        if(services.isError){
-                err => errorNotify("General Info Auto-Update failed!", err.toString())
+            errorNotify("Porthijack Update failed!", getErrorMessage(services.error))
-            ),
-            porthijack.services().then(res => {
-                setServices(res)    
-            }).catch(err => {
-                errorNotify("Home Page Auto-Update failed!", err.toString())
-            })
-        ])
-        setLoader(false)
         }
-
+    },[services.isError])
-    useWindowEvent(eventUpdateName, updateInfo)
-    useEffect(fireUpdateRequest,[])
 
     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} />
+            <LoadingOverlay visible={services.isLoading} />
-            {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>
+            {(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}>

frontend/src/pages/RegexProxy/ServiceDetails.tsx

@@ -1,64 +1,27 @@
 import { ActionIcon, Grid, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
-import React, { useEffect, useState } from 'react';
+import { useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { Navigate, useParams } from 'react-router-dom';
 import { BsPlusLg } from "react-icons/bs";
-import { useWindowEvent } from '@mantine/hooks';
+import { regexproxyServiceQuery, regexproxyServiceRegexesQuery } from '../../components/RegexProxy/utils';
-import { regexproxy, Service } from '../../components/RegexProxy/utils';
-import { RegexFilter } from '../../js/models';
-import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/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>({
+    if (!srv || !serviceInfo || regexesList.isError) return <Navigate to="/" replace />
-        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);
 
     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>

frontend/src/pages/RegexProxy/index.tsx

@@ -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 { regexproxyServiceQuery } from '../../components/RegexProxy/utils';
-import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/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 () => {
+    useEffect(()=> {
-        
+        if(services.isError){
-        await Promise.all([
+            errorNotify("RegexProxy Update failed!", getErrorMessage(services.error))
-            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)
         }
-
+    },[services.isError])
-    useWindowEvent(eventUpdateName, updateInfo)
-    useEffect(fireUpdateRequest,[])
 
     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} />
+            <LoadingOverlay visible={services.isLoading} />
-            {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
+            {(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" /> 

frontend/yarn.lock

@@ -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"