react-query + enable/disable firewall

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 { 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} />
     </>
 }

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 { 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}
     </>
 }
 

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 { 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 () => {
-        
-        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)
-    }
 
-    useWindowEvent(eventUpdateName, updateInfo)
-    useEffect(fireUpdateRequest,[])
+    const services = nfregexServiceQuery()
+
+    useEffect(()=> {
+        if(services.isError){
+            errorNotify("NFRegex Update failed!", getErrorMessage(services.error))
+        }
+        
+    },[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" /> 

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 { 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)
-    }
 
-    useWindowEvent(eventUpdateName, updateInfo)
-    useEffect(fireUpdateRequest,[])
+
+    const services = porthijackServiceQuery()
+
+    useEffect(()=>{
+        if(services.isError){
+            errorNotify("Porthijack Update failed!", getErrorMessage(services.error))
+        }
+    },[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}>

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

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 { 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 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)
-    }
+    const services = regexproxyServiceQuery()
 
-    useWindowEvent(eventUpdateName, updateInfo)
-    useEffect(fireUpdateRequest,[])
+    useEffect(()=> {
+        if(services.isError){
+            errorNotify("RegexProxy Update failed!", getErrorMessage(services.error))
+        }
+    },[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" />