Restructuring docker project

2022-06-12 22:28:16 +02:00
parent 67e5014d78
commit cff484a976
58 changed files with 357 additions and 407 deletions
--- a/frontend/src/components/Header/index.tsx
+++ b/frontend/src/components/Header/index.tsx
@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import { ActionIcon, Badge, Image, Modal } from '@mantine/core';
+import style from "./Header.module.scss";
+import { errorNotify, generalstats } from '../../js/utils';
+import { GeneralStats, update_freq } from '../../js/models';
+import { BsPlusLg } from "react-icons/bs"
+import { AiFillHome } from "react-icons/ai"
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import AddNewRegex from '../AddNewRegex';
+import AddNewService from '../AddNewService';
+
+
+function Header() {
+  
+  const [generalStats, setGeneralStats] = useState<GeneralStats>({closed:0, regexes:0, services:0});
+  const location = useLocation()
+
+  const navigator = useNavigate()
+
+    const updateInfo = () => {
+      generalstats().then(res => {
+        setGeneralStats(res)
+      }).catch(
+        err => errorNotify("General Info Auto-Update failed!", err.toString())
+      )
+  }
+
+  useEffect(()=>{
+      updateInfo()
+      const updater = setInterval(updateInfo, update_freq)
+      return () => { clearInterval(updater) }
+  }, []);
+
+
+  const {srv_id} = useParams()
+  const [open, setOpen] = useState(false);
+  const closeModal = () => {setOpen(false);}
+
+  return <div id="header-page" className={style.header}>
+        <div style={{ width: 240, marginLeft: 'auto', marginRight: 'auto', padding:"40px" }}>
+          <Image src="/header-logo.png" alt="Firegex logo" />
+        </div>
+        <div className="flex-spacer" />
+        <Badge color="green" size="lg" variant="filled">Services: {generalStats.services}</Badge>
+        <Badge style={{marginLeft:"10px"}} size="lg" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
+        <Badge style={{marginLeft:"10px"}} size="lg" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
+        <div style={{marginLeft:"20px"}}></div>
+        { location.pathname !== "/"?
+            <ActionIcon color="teal" style={{marginRight:"10px"}}
+              size="xl" radius="md" variant="filled"
+              onClick={()=>navigator("/")}>
+              <AiFillHome size="25px" />
+            </ActionIcon>
+        :null}
+        <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
+        {srv_id?
+          <Modal size="xl" title="Add a new regex filter" opened={open} onClose={closeModal} closeOnClickOutside={false} centered>
+            <AddNewRegex closePopup={closeModal} service={srv_id} />
+          </Modal>:
+          <Modal size="xl" title="Add a new service" opened={open} onClose={closeModal} closeOnClickOutside={false} centered>
+            <AddNewService closePopup={closeModal} />
+          </Modal>
+        }
+            
+        
+        <div style={{marginLeft:"40px"}}></div>
+  </div>
+}
+
+export default Header;