React Interface v1

frontend/src/components/Header/index.tsx

@@ -1,11 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import { ActionIcon, Badge } from '@mantine/core';
+import { ActionIcon, Badge, Modal } from '@mantine/core';
 import style from "./Header.module.scss";
 import { generalstats } from '../../js/utils';
-import { GeneralStats, update_freq } from '../../js/models';
+import { GeneralStats, notification_time, update_freq } from '../../js/models';
 import { BsPlusLg } from "react-icons/bs"
 import { AiFillHome } from "react-icons/ai"
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import AddNewRegex from '../AddNewRegex';
+import AddNewService from '../AddNewService';
+import { showNotification } from '@mantine/notifications';
+import { ImCross } from 'react-icons/im';
 
 function Header() {
   
@@ -14,17 +18,31 @@ function Header() {
 
   const navigator = useNavigate()
 
-  const updateInfo = () => {
-    generalstats().then(res => {
-      setGeneralStats(res)
-      setTimeout(updateInfo, update_freq)
-    }).catch(
-      err =>{
-        setTimeout(updateInfo, update_freq)}
-    )
+    const updateInfo = () => {
+      generalstats().then(res => {
+        setGeneralStats(res)
+      }).catch(
+        err =>{
+            showNotification({
+                autoClose: notification_time,
+                title: "General Info Auto-Update failed!",
+                message: "[ "+err+" ]",
+                color: 'red',
+                icon: <ImCross />,
+            });
+      })
   }
 
-  useEffect(updateInfo,[]);
+  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 className={style.logo} >LOGO</div>
@@ -40,7 +58,17 @@ function Header() {
               <AiFillHome size="25px" />
             </ActionIcon>
         :null}
-        <ActionIcon color="blue" size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
+        <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>
 }