React Interface v1

frontend/src/components/AddNewRegex.tsx

@@ -0,0 +1,82 @@
+import { Button, Group, NumberInput, Space, TextInput, Notification } from '@mantine/core';
+import { useForm } from '@mantine/hooks';
+import React, { useState } from 'react';
+import { ServiceAddForm } from '../js/models';
+import { addservice } from '../js/utils';
+import { ImCross } from "react-icons/im"
+
+function AddNewRegex({ closePopup, service }:{ closePopup:()=>void, service:string }) {
+
+    return <></>
+    /*    
+
+    const form = useForm({
+        initialValues: {
+            regex:"",
+            is_blacklist:true,
+            mode:"B"
+        },
+        validationRules:{
+            regex: (value) => value !== ""?true:false,
+            port: (value) => value>0 && value<65536
+        }
+    })
+
+    const [submitLoading, setSubmitLoading] = useState(false)
+    const [error, setError] = useState<string|null>(null)
+
+    const submitRequest = (values:ServiceAddForm) =>{
+        setSubmitLoading(true)
+        addservice(values).then( res => {
+            if (!res){
+                setSubmitLoading(false)
+                closePopup();
+            }else{
+                setSubmitLoading(false)
+                setError("Invalid request! [ "+res+" ]")
+            }
+        }).catch( err => {
+            setSubmitLoading(false)
+            setError("Request Failed! [ "+err+" ]")
+        })
+    }    
+
+
+  return <form onSubmit={form.onSubmit(submitRequest)}>
+        <TextInput
+            required
+            label="Service name"
+            placeholder="Challenge 01"
+            {...form.getInputProps('name')}
+        />
+        <Space h="md" />
+
+        <NumberInput
+            required
+            placeholder="8080"
+            min={1}
+            max={65535}
+            label="Service port"
+            {...form.getInputProps('port')}
+        />
+
+
+        <Space h="md" />
+
+        <Group position="right" mt="md">
+            <Button loading={submitLoading} type="submit">Add Service</Button>
+        </Group>
+
+        <Space h="md" />
+        
+        {error?<>
+        <Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}>
+            Error: {error}
+        </Notification><Space h="md" /></>:null}
+        
+    </form>
+    */
+
+}
+
+export default AddNewRegex;

frontend/src/components/AddNewService.tsx

@@ -0,0 +1,77 @@
+import { Button, Group, NumberInput, Space, TextInput, Notification } from '@mantine/core';
+import { useForm } from '@mantine/hooks';
+import React, { useState } from 'react';
+import { ServiceAddForm } from '../js/models';
+import { addservice } from '../js/utils';
+import { ImCross } from "react-icons/im"
+
+function AddNewService({ closePopup }:{ closePopup:()=>void }) {
+
+    const form = useForm({
+        initialValues: {
+            name:"",
+            port:1,
+        },
+        validationRules:{
+            name: (value) => value !== ""?true:false,
+            port: (value) => value>0 && value<65536
+        }
+    })
+
+    const [submitLoading, setSubmitLoading] = useState(false)
+    const [error, setError] = useState<string|null>(null)
+
+    const submitRequest = (values:ServiceAddForm) =>{
+        setSubmitLoading(true)
+        addservice(values).then( res => {
+            if (!res){
+                setSubmitLoading(false)
+                closePopup();
+            }else{
+                setSubmitLoading(false)
+                setError("Invalid request! [ "+res+" ]")
+            }
+        }).catch( err => {
+            setSubmitLoading(false)
+            setError("Request Failed! [ "+err+" ]")
+        })
+    }    
+
+
+  return <form onSubmit={form.onSubmit(submitRequest)}>
+        <TextInput
+            required
+            label="Service name"
+            placeholder="Challenge 01"
+            {...form.getInputProps('name')}
+        />
+        <Space h="md" />
+
+        <NumberInput
+            required
+            placeholder="8080"
+            min={1}
+            max={65535}
+            label="Service port"
+            {...form.getInputProps('port')}
+        />
+
+
+        <Space h="md" />
+
+        <Group position="right" mt="md">
+            <Button loading={submitLoading} type="submit">Add Service</Button>
+        </Group>
+
+        <Space h="md" />
+        
+        {error?<>
+        <Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}>
+            Error: {error}
+        </Notification><Space h="md" /></>:null}
+        
+    </form>
+
+}
+
+export default AddNewService;

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

frontend/src/components/MainLayout.tsx

@@ -1,37 +1,22 @@
-import { Container, MantineProvider } from '@mantine/core';
-import React, { useEffect, useState } from 'react';
-import { Service, update_freq } from '../js/models';
-import { servicelist } from '../js/utils';
+import { Container, MantineProvider, Space } from '@mantine/core';
+import { NotificationsProvider } from '@mantine/notifications';
+import React from 'react';
 import Footer from './Footer';
 import Header from './Header';
 
 function MainLayout({ children }:{ children:any }) {
-
-    const [services, setServices] = useState<Service[]>([]);
-  
-    const updateInfo = () => {
-      servicelist().then(res => {
-        setServices(res)
-        setTimeout(updateInfo, update_freq)
-      }).catch(
-        err =>{
-          setTimeout(updateInfo, update_freq)}
-      )
-    }
-  
-    useEffect(updateInfo,[]);
-
   return <>
-    <MantineProvider theme={{ colorScheme: 'dark' }} withGlobalStyles withNormalizeCSS>
-        <Header />
-        <div style={{marginTop:"50px"}}/>
-        <Container size="xl" style={{minHeight:"58vh"}}>
-            {children}
-        </Container>
-        <div style={{marginTop:"50px"}}/>
-        <Footer />
-    </MantineProvider>
-        
+      <MantineProvider theme={{ colorScheme: 'dark' }} withGlobalStyles withNormalizeCSS>
+        <NotificationsProvider>
+            <Header />
+            <Space h="xl" />
+            <Container size="xl" style={{minHeight:"57.5vh"}}>
+                {children}
+            </Container>
+            <Space h="xl" />
+            <Footer />
+        </NotificationsProvider>
+      </MantineProvider>
   </>
 }
 

frontend/src/components/RegexView/RegexView.module.scss

@@ -0,0 +1,6 @@
+
+
+.box{
+    padding:30px;
+    margin:5px;
+}

frontend/src/components/RegexView/index.tsx

@@ -0,0 +1,19 @@
+import { TextInput } from '@mantine/core';
+import React from 'react';
+import { RegexFilter } from '../../js/models';
+import { getHumanReadableRegex } from '../../js/utils';
+
+import style from "./RegexView.module.scss";
+
+
+function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
+  return <div className={style.box}>
+        <TextInput
+            disabled
+            value={getHumanReadableRegex(regexInfo.regex)}
+        />
+        
+  </div>
+}
+
+export default RegexView;

frontend/src/components/ServiceRow/index.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, Badge, Grid, Space, Title } from '@mantine/core';
 import React from 'react';
-import { FaPause, FaPlay } from 'react-icons/fa';
+import { FaPause, FaPlay, FaStop } from 'react-icons/fa';
 import { Service } from '../../js/models';
 import { MdOutlineArrowForwardIos } from "react-icons/md"
 import style from "./ServiceRow.module.scss";
@@ -19,7 +19,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
         <Grid className={style.row} style={{width:"100%"}}>
             <Grid.Col span={4}>
                 <div className="center-flex-row">
-                    <div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" variant="filled">:{service.public_port}</Badge></div>
+                    <div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.public_port}</Badge></div>
                     <Badge color={status_color} size="xl" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge>
                 </div>
             </Grid.Col>
@@ -32,7 +32,9 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
                 </div>
                 <Space w="xl" /><Space w="xl" />
                 <div className="center-flex">
-                    <ActionIcon color="red" size="xl" radius="md" variant="filled" disabled={!["wait","active"].includes(service.status)?true:false}><FaPause size="20px" /></ActionIcon>
+                    <ActionIcon color={service.status === "pause"?"yellow":"red"} size="xl" radius="md" variant="filled" disabled={!["wait","active","pause"].includes(service.status)?true:false}>
+                        {service.status === "pause"?<FaStop size="20px" />:<FaPause size="20px" />}
+                    </ActionIcon>
                     <Space w="md"/>
                     <ActionIcon color="teal" size="xl" radius="md" variant="filled" disabled={!["stop","pause"].includes(service.status)?true:false}><FaPlay size="20px" /></ActionIcon>
                 </div>