Restructurated frontend

2022-07-21 10:20:54 +02:00
parent 0ed8bb635e
commit acf9642f54
21 changed files with 183 additions and 181 deletions
--- a/frontend/src/pages/NFRegex.tsx/ServiceDetails.tsx
+++ b/frontend/src/pages/NFRegex.tsx/ServiceDetails.tsx
@@ -0,0 +1,85 @@
+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/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 { useWindowEvent } from '@mantine/hooks';
+
+function ServiceDetails() {
+    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 [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);
+
+    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?<AddNewRegex opened={open} onClose={closeModal} service={srv} />:null}
+
+
+    </div>
+}
+
+export default ServiceDetails;