Moduled Firegex, Merging pt1 (not finished and not working yet)

2022-07-21 20:25:39 +02:00
parent 3143f6e474
commit 63ba0e94e7
42 changed files with 2832 additions and 577 deletions
--- a/frontend/src/pages/NFRegex.tsx/ServiceDetails.tsx
+++ b/frontend/src/pages/NFRegex.tsx/ServiceDetails.tsx
@@ -5,8 +5,8 @@ import RegexView from '../../components/NFRegex/RegexView';
 import ServiceRow from '../../components/NFRegex/ServiceRow';
 import AddNewRegex from '../../components/NFRegex/AddNewRegex';
 import { BsPlusLg } from "react-icons/bs";
-import { RegexFilter, Service } from '../../js/models';
-import { errorNotify, eventUpdateName, fireUpdateRequest, nfregex } from '../../js/utils';
+import { nfregex, RegexFilter, Service } from '../../components/NFRegex/utils';
+import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
 import { useWindowEvent } from '@mantine/hooks';

 function ServiceDetails() {
--- a/frontend/src/pages/NFRegex.tsx/index.tsx
+++ b/frontend/src/pages/NFRegex.tsx/index.tsx
@@ -3,10 +3,11 @@ import React, { useEffect, useState } from 'react';
 import { BsPlusLg } from "react-icons/bs";
 import { useNavigate, useParams } from 'react-router-dom';
 import ServiceRow from '../../components/NFRegex/ServiceRow';
-import { GeneralStats, Service } from '../../js/models';
-import { errorNotify, eventUpdateName, fireUpdateRequest, nfregex } from '../../js/utils';
+import { GeneralStats, nfregex, Service } from '../../components/NFRegex/utils';
+import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
 import AddNewService from '../../components/NFRegex/AddNewService';
 import { useWindowEvent } from '@mantine/hooks';
+import AddNewRegex from '../../components/NFRegex/AddNewRegex';


 function NFRegex({ children }: { children: any }) {
@@ -17,6 +18,7 @@ function NFRegex({ children }: { children: any }) {
    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});

@@ -43,16 +45,30 @@ function NFRegex({ children }: { children: any }) {
    const closeModal = () => {setOpen(false);}

    return <>
-    
+    <Space h="sm" />
+    <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>
+        <Space w="xs" />
+        <Badge size="sm" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
+        <Space w="xs" />
+        <Badge size="sm" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
+        <Space w="xs" />
+        { srv?
+          <Tooltip label="Add a new regex" position='bottom' transition="pop" transitionDuration={200} transitionTimingFunction="ease" color="blue" opened={tooltipAddOpened}>
+            <ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled"
+             onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
+             onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size={18} /></ActionIcon>
+          </Tooltip>
+        : <Tooltip label="Add a new service" position='bottom' transition="pop" transitionDuration={200} transitionTimingFunction="ease" color="blue" opened={tooltipAddOpened}>
+            <ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled"
+             onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
+             onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size={18} /></ActionIcon>
+          </Tooltip>
+      }
+    </div>
    <div id="service-list" className="center-flex-row">
-        <Space h="sm" />
-        <div className='center-flex'>
-            <Badge color="green" size="lg" variant="filled">Services: {generalStats.services}</Badge>
-              <Space w="xs" />
-            <Badge size="lg" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
-              <Space w="xs" />
-            <Badge size="lg" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
-        </div>
        {srv?null:<>
            <LoadingOverlay visible={loader} />
            {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.service_id} onClick={()=>{
@@ -60,7 +76,7 @@ function NFRegex({ children }: { children: any }) {
            }} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
                <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> 
                <div className='center-flex'>
-                    <Tooltip label="Add a new service" transition="pop" transitionDuration={200} /*openDelay={500}*/ zIndex={0} transitionTimingFunction="ease" color="blue" opened={tooltipAddServOpened} tooltipId="tooltip-addServ-id">
+                    <Tooltip label="Add a new service" transition="pop" transitionDuration={200} transitionTimingFunction="ease" color="blue" opened={tooltipAddServOpened}>
                        <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
                            onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)}
                            onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
@@ -71,6 +87,10 @@ function NFRegex({ children }: { children: any }) {
        </>}
    </div>
    {srv?children:null}
+    {srv?
+        <AddNewRegex opened={open} onClose={closeModal} service={srv} />:
+        <AddNewService opened={open} onClose={closeModal} />
+    }
    </>
 }

--- a/frontend/src/pages/RegexProxy/HomePage.tsx
+++ b/frontend/src/pages/RegexProxy/HomePage.tsx
@@ -0,0 +1,53 @@
+import { ActionIcon, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
+import React, { useEffect, useState } from 'react';
+import { BsPlusLg } from "react-icons/bs";
+import { useNavigate } from 'react-router-dom';
+import ServiceRow from '../components/ServiceRow';
+import { Service } from '../js/models';
+import { errorNotify, eventUpdateName, fireUpdateRequest, servicelist } from '../js/utils';
+import AddNewService from '../components/AddNewService';
+import { useWindowEvent } from '@mantine/hooks';
+
+
+function HomePage() {
+
+    const [services, setServices] = useState<Service[]>([]);
+    const [loader, setLoader] = useState(true);
+    const navigator = useNavigate()
+    const [open, setOpen] = useState(false);
+    const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
+    
+    const updateInfo = async () => {
+        await servicelist().then(res => {
+            setServices(res)    
+        }).catch(err => {
+            errorNotify("Home Page Auto-Update failed!", err.toString())
+        })
+        setLoader(false)
+    }
+
+    useWindowEvent(eventUpdateName, updateInfo)
+    useEffect(fireUpdateRequest,[])
+
+    const closeModal = () => {setOpen(false);}
+
+    return <div id="service-list" className="center-flex-row">
+        <LoadingOverlay visible={loader} />
+        {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
+            navigator("/"+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" /> 
+            <div className='center-flex'>
+                <Tooltip label="Add a new service" transition="pop" transitionDuration={200} /*openDelay={500}*/ zIndex={0} transitionTimingFunction="ease" color="blue" opened={tooltipAddServOpened} tooltipId="tooltip-addServ-id">
+                    <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
+                        aria-describedby="tooltip-addSrv-id"
+                        onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)}
+                        onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
+                </Tooltip>
+            </div>
+        </>}
+        <AddNewService opened={open} onClose={closeModal} />
+    </div>
+}
+
+export default HomePage;
--- a/frontend/src/pages/RegexProxy/ServiceDetails.tsx
+++ b/frontend/src/pages/RegexProxy/ServiceDetails.tsx
@@ -0,0 +1,84 @@
+import { ActionIcon, Grid, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import RegexView from '../components/RegexView';
+import ServiceRow from '../components/ServiceRow';
+import AddNewRegex from '../components/AddNewRegex';
+import { BsPlusLg } from "react-icons/bs";
+import { RegexFilter, Service } from '../js/models';
+import { errorNotify, eventUpdateName, fireUpdateRequest, serviceinfo, serviceregexlist } from '../js/utils';
+import { useWindowEvent } from '@mantine/hooks';
+
+function ServiceDetails() {
+    const {srv_id} = useParams()
+
+    const [serviceInfo, setServiceInfo] = useState<Service>({
+        id:srv_id?srv_id:"",
+        internal_port:0,
+        n_packets:0,
+        n_regex:0,
+        name:srv_id?srv_id:"",
+        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_id) return
+        let error = false;
+        await serviceinfo(srv_id).then(res => {
+            setServiceInfo(res)
+        }).catch(
+          err =>{
+            error = true;
+            navigator("/")
+        })
+        if (error) return
+        await serviceregexlist(srv_id).then(res => {
+            setRegexesList(res)
+        }).catch(
+          err => errorNotify(`Updater for ${srv_id} 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} />
+        <ServiceRow service={serviceInfo} />
+        {regexesList.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" />
+                <div className='center-flex'>
+                    <Tooltip label="Add a new regex" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="blue" opened={tooltipAddRegexOpened} tooltipId="tooltip-AddRegex-id">
+                        <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
+                         aria-describedby="tooltip-AddRegex-id"
+                         onFocus={() => setTooltipAddRegexOpened(false)} onBlur={() => setTooltipAddRegexOpened(false)}
+                         onMouseEnter={() => setTooltipAddRegexOpened(true)} onMouseLeave={() => setTooltipAddRegexOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
+                    </Tooltip>
+                </div>
+            </>:
+            <Grid>
+                {regexesList.map( (regexInfo) => <Grid.Col key={regexInfo.id} lg={6} xs={12}><RegexView regexInfo={regexInfo} /></Grid.Col>)}
+            </Grid>
+        }
+
+        {srv_id?<AddNewRegex opened={open} onClose={closeModal} service={srv_id} />:null}
+
+
+    </div>
+}
+
+export default ServiceDetails;