Instant Update fixed

backend/app.py

@@ -333,18 +333,18 @@ if DEBUG:
 if __name__ == '__main__':
     db.check_integrity({
         'services': {
-            'status': 'VARCHAR(100)',
+            'status': 'VARCHAR(100) NOT NULL',
             'service_id': 'VARCHAR(100) PRIMARY KEY',
-            'internal_port': 'INT NOT NULL UNIQUE',
+            'internal_port': 'INT NOT NULL CHECK(internal_port > 0 and internal_port < 65536) UNIQUE',
-            'public_port': 'INT NOT NULL UNIQUE',
+            'public_port': 'INT NOT NULL CHECK(internal_port > 0 and internal_port < 65536) UNIQUE',
             'name': 'VARCHAR(100) NOT NULL'
         },
         'regexes': {
             'regex': 'TEXT NOT NULL',
-            'mode': 'VARCHAR(1)',
+            'mode': 'VARCHAR(1) NOT NULL',
             'service_id': 'VARCHAR(100) NOT NULL',
             'is_blacklist': 'VARCHAR(1) NOT NULL',
-            'blocked_packets': 'INTEGER NOT NULL DEFAULT 0',
+            'blocked_packets': 'INTEGER UNSIGNED NOT NULL DEFAULT 0',
             'regex_id': 'INTEGER PRIMARY KEY',
             'FOREIGN KEY (service_id)':'REFERENCES services (service_id)'
         },

frontend/package.json

@@ -24,9 +24,7 @@
     "react-router-dom": "^6.3.0",
     "sass": "^1.52.3",
     "typescript": "^4.7.3",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
-  },
-  "devDependencies": {
     "react-scripts": "5.0.1"
   },
   "scripts": {

frontend/src/App.tsx

@@ -4,8 +4,8 @@ import React, { useEffect, useState } from 'react';
 import { ImCross } from 'react-icons/im';
 import { Navigate, Outlet, Route, Routes } from 'react-router-dom';
 import MainLayout from './components/MainLayout';
-import { PasswordSend, ServerStatusResponse, update_freq } from './js/models';
+import { PasswordSend, ServerStatusResponse } from './js/models';
-import { getstatus, login, setpassword } from './js/utils';
+import { fireUpdateRequest, getstatus, login, setpassword } from './js/utils';
 import HomePage from './pages/HomePage';
 import ServiceDetails from './pages/ServiceDetails';
 
@@ -25,12 +25,17 @@ function App() {
       }).catch(err=>{
         setReqError(err.toString())
         setLoading(false)
-        setTimeout(getStatus, update_freq)
+        setTimeout(getStatus, 500)
       })
   }
 
   useEffect(getStatus,[])
 
+  useEffect(()=>{
+      const updater = setInterval(fireUpdateRequest,2000)
+      return () => clearInterval(updater)     
+  },[])
+
   const form = useForm({
     initialValues: {
         password:"",
@@ -40,7 +45,6 @@ function App() {
     }
   })
 
-
   if (loading){
     return <LoadingOverlay visible/>
   }else if (reqError){

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)

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)

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, errorNotify, eventUpdateName, generalstats, logout, okNotify } from '../../js/utils';
-import { ChangePassword, GeneralStats, update_freq } from '../../js/models';
+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(()=>{
+  useWindowEvent(eventUpdateName, updateInfo)
-      updateInfo()
-      const updater = setInterval(updateInfo, update_freq)
-      return () => { clearInterval(updater) }
-  }, []);
   
   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" >

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}

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}`)
       }

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}
         />

frontend/src/js/models.ts

@@ -1,8 +1,3 @@
-
-
-export const update_freq = 2000;
-export const notification_time = 1500;
-
 export type GeneralStats = {
     services:number,
     closed:number,

frontend/src/js/utils.tsx

@@ -1,10 +1,12 @@
 import { showNotification } from "@mantine/notifications";
 import { ImCross } from "react-icons/im";
 import { TiTick } from "react-icons/ti"
-import { GeneralStats, Service, ServiceAddForm, ServerResponse, RegexFilter, notification_time, RegexAddForm, ServerStatusResponse, PasswordSend, ChangePassword } from "./models";
+import { GeneralStats, Service, ServiceAddForm, ServerResponse, RegexFilter, RegexAddForm, ServerStatusResponse, PasswordSend, ChangePassword } from "./models";
 
 var Buffer = require('buffer').Buffer 
 
+export const eventUpdateName = "update-info"
+
 const custom_url = (!process.env.NODE_ENV || process.env.NODE_ENV === 'development')?"http://127.0.0.1:8080":""
 
 export async function getapi(path:string):Promise<any>{
@@ -42,6 +44,10 @@ export async function postapi(path:string,data:any):Promise<any>{
     });
 }
 
+export function fireUpdateRequest(){
+    window.dispatchEvent(new Event(eventUpdateName))
+}
+
 export async function getstatus(){
     return await getapi(`status`) as ServerStatusResponse;
 }
@@ -139,7 +145,7 @@ export function getHumanReadableRegex(regexB64:string){
 
 export function errorNotify(title:string, description:string ){
     showNotification({
-        autoClose: notification_time,
+        autoClose: 2000,
         title: title,
         message: description,
         color: 'red',
@@ -149,7 +155,7 @@ export function errorNotify(title:string, description:string ){
 
 export function okNotify(title:string, description:string ){
     showNotification({
-        autoClose: notification_time,
+        autoClose: 2000,
         title: title,
         message: description,
         color: 'teal',

frontend/src/pages/HomePage.tsx

@@ -1,11 +1,12 @@
-import { ActionIcon, LoadingOverlay, Modal, Space, Title, Tooltip } from '@mantine/core';
+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, update_freq } from '../js/models';
+import { Service } from '../js/models';
-import { errorNotify, servicelist } from '../js/utils';
+import { errorNotify, eventUpdateName, fireUpdateRequest, servicelist } from '../js/utils';
 import AddNewService from '../components/AddNewService';
+import { useWindowEvent } from '@mantine/hooks';
 
 
 function HomePage() {
@@ -24,13 +25,10 @@ function HomePage() {
         setLoader(false)
     }
 
-    useEffect(()=>{
+    useWindowEvent(eventUpdateName, updateInfo)
-        updateInfo()
+    useEffect(fireUpdateRequest,[])
-        const updater = setInterval(updateInfo, update_freq)
-        return () => { clearInterval(updater) }
-    }, []);
 
-    const closeModal = () => {setOpen(false);updateInfo();}
+    const closeModal = () => {setOpen(false);}
 
     return <div id="service-list" className="center-flex-row">
         <LoadingOverlay visible={loader} />

frontend/src/pages/ServiceDetails.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Grid, LoadingOverlay, Modal, Space, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, Grid, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
 import React, { useEffect, useState } from 'react';
 import { BsTrashFill } from 'react-icons/bs';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -7,9 +7,10 @@ import ServiceRow from '../components/ServiceRow';
 import AddNewRegex from '../components/AddNewRegex';
 import { BsPlusLg } from "react-icons/bs";
 import YesNoModal from '../components/YesNoModal';
-import { RegexFilter, Service, update_freq } from '../js/models';
+import { RegexFilter, Service } from '../js/models';
-import { deleteservice, errorNotify, okNotify, regenport, serviceinfo, serviceregexlist } from '../js/utils';
+import { deleteservice, errorNotify, eventUpdateName, fireUpdateRequest, okNotify, regenport, serviceinfo, serviceregexlist } from '../js/utils';
 import { BsArrowRepeat } from "react-icons/bs"
+import { useWindowEvent } from '@mantine/hooks';
 
 function ServiceDetails() {
     const {srv_id} = useParams()
@@ -24,6 +25,11 @@ function ServiceDetails() {
         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;
@@ -43,20 +49,11 @@ function ServiceDetails() {
         setLoader(false)
     }
 
-    const [regexesList, setRegexesList] = useState<RegexFilter[]>([])
+    useWindowEvent(eventUpdateName, updateInfo)
-    const [loader, setLoader] = useState(true);
+    useEffect(fireUpdateRequest,[])
-    const [open, setOpen] = useState(false);
-    const closeModal = () => {setOpen(false);updateInfo();}
 
     const navigator = useNavigate()
 
-    
-    useEffect(()=>{
-        updateInfo()
-        const updater = setInterval(updateInfo, update_freq)
-        return () => { clearInterval(updater) }
-    },[]);
-
     const [deleteModal, setDeleteModal] = useState(false)
     const [changePortModal, setChangePortModal] = useState(false)
     
@@ -109,7 +106,7 @@ function ServiceDetails() {
                 </div>
             </>:
             <Grid>
-                {regexesList.map( (regexInfo) => <Grid.Col key={regexInfo.id} lg={6} xs={12}><RegexView regexInfo={regexInfo}/></Grid.Col>)}
+                {regexesList.map( (regexInfo) => <Grid.Col key={regexInfo.id} lg={6} xs={12}><RegexView regexInfo={regexInfo} /></Grid.Col>)}
             </Grid>
         }