React Interface v3

frontend/src/pages/HomePage.tsx

@@ -1,50 +1,22 @@
 import { Space, Title } from '@mantine/core';
-import { showNotification } from '@mantine/notifications';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import ServiceRow from '../components/ServiceRow';
-import { notification_time, Service, update_freq } from '../js/models';
-import { servicelist } from '../js/utils';
-import { ImCross } from "react-icons/im"
+import { Service, update_freq } from '../js/models';
+import { errorNotify, servicelist } from '../js/utils';
 
 
 function HomePage() {
 
-    const [services, setServices] = useState<Service[]>([
-        {
-            id:"ctfe",
-            internal_port:18080,
-            n_packets: 30,
-            n_regex: 40,
-            name:"CTFe",
-            public_port:80,
-            status:"pause"
-        },
-        {
-            id:"saas",
-            internal_port:18080,
-            n_packets: 30,
-            n_regex: 40,
-            name:"SaaS",
-            public_port:5000,
-            status:"active"
-        }
-    ]);
+    const [services, setServices] = useState<Service[]>([]);
     const navigator = useNavigate()
     
     const updateInfo = () => {
         servicelist().then(res => {
             setServices(res)
         }).catch(
-            err =>{
-                showNotification({
-                    autoClose: notification_time,
-                    title: "Home Page Auto-Update failed!",
-                    message: "[ "+err+" ]",
-                    color: 'red',
-                    icon: <ImCross />,
-                });
-        })
+            err => errorNotify("Home Page Auto-Update failed!", err.toString())
+        )
     }
 
     useEffect(()=>{

frontend/src/pages/ServiceDetails.tsx

@@ -1,13 +1,12 @@
 import { ActionIcon, Grid, Space, Title } from '@mantine/core';
-import { showNotification } from '@mantine/notifications';
 import React, { useEffect, useState } from 'react';
 import { BsTrashFill } from 'react-icons/bs';
-import { ImCross } from 'react-icons/im';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import RegexView from '../components/RegexView';
 import ServiceRow from '../components/ServiceRow';
-import { notification_time, RegexFilter, Service, update_freq } from '../js/models';
-import { serviceinfo, serviceregexlist } from '../js/utils';
+import YesNoModal from '../components/YesNoModal';
+import { RegexFilter, Service, update_freq } from '../js/models';
+import { errorNotify, serviceinfo, serviceregexlist } from '../js/utils';
 
 function ServiceDetails() {
     const {srv_id} = useParams()
@@ -22,24 +21,9 @@ function ServiceDetails() {
         status:"🤔"
     })
 
-    const [regexesList, setRegexesList] = useState<RegexFilter[]>([
-        {
-            id:3546,
-            is_blacklist:true,
-            mode:"B",
-            regex:"LipmbGFnX2NoZWNrLio=",
-            service_id:"ctfe",
-            n_packets:5,
-        },
-        {
-            id:3546,
-            is_blacklist:true,
-            mode:"B",
-            regex:"d2VkcmZoaXdlZGZoYnVp",
-            service_id:"ctfe",
-            n_packets: 54
-        }
-    ])
+    const [regexesList, setRegexesList] = useState<RegexFilter[]>([])
+
+    const navigator = useNavigate()
 
     const updateInfo = async () => {
         if (!srv_id) return
@@ -48,28 +32,17 @@ function ServiceDetails() {
             setServiceInfo(res)
         }).catch(
           err =>{
-              showNotification({
-                  autoClose: notification_time,
-                  title: `Updater for ${srv_id} service failed [General Info]!`,
-                  message: "[ "+err+" ]",
-                  color: 'red',
-                  icon: <ImCross />,
-              });
-              error = true;
+            errorNotify(`Updater for ${srv_id} service failed [General Info]!`, err.toString())
+            error = true;
+            navigator("/")
         })
         if (error) return
         await serviceregexlist(srv_id).then(res => {
             setRegexesList(res)
         }).catch(
           err =>{
-              showNotification({
-                  autoClose: notification_time,
-                  title: `Updater for ${srv_id} service failed [Regex list]!`,
-                  message: "[ "+err+" ]",
-                  color: 'red',
-                  icon: <ImCross />,
-              });
-              error = true;
+            errorNotify(`Updater for ${srv_id} service failed [Regex list]!`, err.toString())
+            error = true;
         })
     }
   
@@ -78,10 +51,12 @@ function ServiceDetails() {
         const updater = setInterval(updateInfo, update_freq)
         return () => { clearInterval(updater) }
     }, []);
+
+    const [deleteModal, setDeleteModal] = useState(false)
     
     return <>
         <ServiceRow service={serviceInfo} additional_buttons={<>
-            <ActionIcon color="red" onClick={()=>{}} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon>
+            <ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon>
             <Space w="md"/>
         </>}></ServiceRow>
         {regexesList.length === 0? 
@@ -90,6 +65,13 @@ function ServiceDetails() {
                 {regexesList.map( (regexInfo) => <Grid.Col key={regexInfo.id} span={6}><RegexView regexInfo={regexInfo}/></Grid.Col>)}
             </Grid>
         }
+        <YesNoModal
+            title='Are you sure to delete this service?'
+            description={`You are going to delete the service '${serviceInfo.id}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service ⚠️!`}
+            onClose={()=>setDeleteModal(false)}
+            action={()=>console.log("Delete the service please!")}
+            opened={deleteModal}
+        />
     </>
 }