Instant Update fixed

2022-06-15 19:44:41 +02:00
parent 0f912ce1b9
commit 591b500a9a
14 changed files with 800 additions and 3464 deletions
--- a/frontend/src/components/AddNewRegex.tsx
+++ b/frontend/src/components/AddNewRegex.tsx
@@ -2,7 +2,7 @@ import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, To
 import { useForm } from '@mantine/hooks';
 import React, { useState } from 'react';
 import { RegexAddForm } from '../js/models';
-import { addregex, b64encode, getHumanReadableRegex, okNotify } from '../js/utils';
+import { addregex, b64encode, fireUpdateRequest, getHumanReadableRegex, okNotify } from '../js/utils';
 import { ImCross } from "react-icons/im"
 import FilterTypeSelector from './FilterTypeSelector';

@@ -64,6 +64,7 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
            if (!res){
                setSubmitLoading(false)
                close();
+                fireUpdateRequest();
                okNotify(`Regex ${getHumanReadableRegex(request.regex)} has been added`, `Successfully added ${request.is_blacklist?"blacklist":"whitelist"} regex to ${request.service_id} service`)
            }else if (res.toLowerCase() === "invalid regex"){
                setSubmitLoading(false)
--- a/frontend/src/components/AddNewService.tsx
+++ b/frontend/src/components/AddNewService.tsx
@@ -2,7 +2,7 @@ import { Button, Group, NumberInput, Space, TextInput, Notification, Modal } fro
 import { useForm } from '@mantine/hooks';
 import React, { useState } from 'react';
 import { ServiceAddForm } from '../js/models';
-import { addservice, okNotify } from '../js/utils';
+import { addservice, fireUpdateRequest, okNotify } from '../js/utils';
 import { ImCross } from "react-icons/im"

 function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void }) {
@@ -33,6 +33,7 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
            if (!res){
                setSubmitLoading(false)
                close();
+                fireUpdateRequest();
                okNotify(`Service ${values.name} has been added`, `Successfully added ${values.name} with port ${values.port}`)
            }else{
                setSubmitLoading(false)
--- a/frontend/src/components/Header/index.tsx
+++ b/frontend/src/components/Header/index.tsx
@@ -1,17 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { ActionIcon, Badge, Button, Divider, Group, Image, Menu, Modal, Notification, Space, Switch, TextInput, Tooltip, FloatingTooltip, MediaQuery } from '@mantine/core';
 import style from "./Header.module.scss";
-import { changepassword, errorNotify, generalstats, logout, okNotify } from '../../js/utils';
-import { ChangePassword, GeneralStats, update_freq } from '../../js/models';
+import { changepassword, errorNotify, eventUpdateName, generalstats, logout, okNotify } from '../../js/utils';
+import { ChangePassword, GeneralStats } 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';
-import { MdSettings } from 'react-icons/md';
 import { FaLock } from 'react-icons/fa';
 import { ImCross, ImExit } from 'react-icons/im';
-import { useForm } from '@mantine/hooks';
+import { useForm, useWindowEvent } from '@mantine/hooks';


 function Header() {
@@ -29,11 +28,7 @@ function Header() {
    )
  }

-  useEffect(()=>{
-      updateInfo()
-      const updater = setInterval(updateInfo, update_freq)
-      return () => { clearInterval(updater) }
-  }, []);
+  useWindowEvent(eventUpdateName, updateInfo)
  
  const logout_action = () => {
    logout().then(r => {
@@ -74,7 +69,7 @@ function Header() {

  const {srv_id} = useParams()
  const [open, setOpen] = useState(false);
-  const closeModal = () => {setOpen(false);updateInfo();}
+  const closeModal = () => {setOpen(false);}

  return <div id="header-page" className={style.header}>
        <FloatingTooltip zIndex={0} label="Home" transition="pop" transitionDuration={200} openDelay={1000} transitionTimingFunction="ease" color="dark" position="right" >
--- a/frontend/src/components/MainLayout.tsx
+++ b/frontend/src/components/MainLayout.tsx
@@ -6,7 +6,7 @@ import Header from './Header';
 function MainLayout({ children }:{ children:any }) {
  return <>
      
-            <Header />
+            <Header/>
            <Space h="xl" />
            <Container size="xl" style={{minHeight:"57.5vh"}}>
                {children}
--- a/frontend/src/components/RegexView/index.tsx
+++ b/frontend/src/components/RegexView/index.tsx
@@ -1,7 +1,7 @@
 import { Grid, Text, Title, Badge, Space, ActionIcon, Tooltip } from '@mantine/core';
 import React, { useState } from 'react';
 import { RegexFilter } from '../../js/models';
-import { deleteregex, errorNotify, getHumanReadableRegex, okNotify } from '../../js/utils';
+import { deleteregex, errorNotify, fireUpdateRequest, getHumanReadableRegex, okNotify } from '../../js/utils';
 import style from "./RegexView.module.scss";
 import { BsTrashFill } from "react-icons/bs"
 import YesNoModal from '../YesNoModal';
@@ -28,6 +28,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
    deleteregex(regexInfo.id).then(res => {
      if(!res){
        okNotify(`Regex ${regex_expr} deleted successfully!`,`Regex '${regex_expr}' ID:${regexInfo.id} has been deleted!`)
+        fireUpdateRequest()
      }else{
        errorNotify(`Regex ${regex_expr} deleation failed!`,`Error: ${res}`)
      }
--- a/frontend/src/components/ServiceRow/index.tsx
+++ b/frontend/src/components/ServiceRow/index.tsx
@@ -5,7 +5,7 @@ import { Service } from '../../js/models';
 import { MdOutlineArrowForwardIos } from "react-icons/md"
 import style from "./ServiceRow.module.scss";
 import YesNoModal from '../YesNoModal';
-import { errorNotify, okNotify, pauseservice, startservice, stopservice, servicelist } from '../../js/utils';
+import { errorNotify, fireUpdateRequest, okNotify, pauseservice, startservice, stopservice } from '../../js/utils';

 //"status":"stop"/"wait"/"active"/"pause",
 function ServiceRow({ service, onClick, additional_buttons }:{ service:Service, onClick?:()=>void, additional_buttons?:any }) {
@@ -18,18 +18,6 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
        case "pause": status_color = "cyan"; break;
    }

-    
-    const [services, setServices] = useState<Service[]>([]);
-    const [loader, setLoader] = useState(true);
-    const updateInfo = async () => {
-        await servicelist().then(res => {
-            setServices(res)    
-        }).catch(err => {
-            errorNotify("Home Page Auto-Update failed!", err.toString())
-        })
-        setLoader(false)
-    }
-
    const [stopModal, setStopModal] = useState(false);
    const [buttonLoading, setButtonLoading] = useState(false)

@@ -38,7 +26,7 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
        await stopservice(service.id).then(res => {
            if(!res){
                okNotify(`Service ${service.id} stopped successfully!`,`The service ${service.name} has been stopped!`)
-                updateInfo();
+                fireUpdateRequest();
            }else{
                errorNotify(`An error as occurred during the stopping of the service ${service.id}`,`Error: ${res}`)
            }
@@ -53,7 +41,7 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
        await startservice(service.id).then(res => {
            if(!res){
                okNotify(`Service ${service.id} started successfully!`,`The service ${service.name} has been started!`)
-                updateInfo();
+                fireUpdateRequest();
            }else{
                errorNotify(`An error as occurred during the starting of the service ${service.id}`,`Error: ${res}`)
            }
@@ -68,7 +56,7 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
        await pauseservice(service.id).then(res => {
            if(!res){
                okNotify(`Service ${service.id} paused successfully!`,`The service ${service.name} has been paused (Transparent mode)!`)
-                updateInfo();
+                fireUpdateRequest();
            }else{
                errorNotify(`An error as occurred during the pausing of the service ${service.id}`,`Error: ${res}`)
            }
@@ -162,7 +150,7 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
        <YesNoModal
            title='Are you sure to stop this service?'
            description={`You are going to delete the service '${service.id}', causing the firewall to stop. This will cause the shutdown of your service ⚠️!`}
-            onClose={()=>{setStopModal(false);updateInfo();}}
+            onClose={()=>{setStopModal(false);}}
            action={stopService}
            opened={stopModal}
        />