Netfliter Refactor

frontend/build/static/js/main.ecd16e7a.js.LICENSE.txt

@@ -0,0 +1,70 @@
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <https://feross.org>
+ * @license  MIT
+ */
+
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
+
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * React Router v6.3.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

frontend/package-lock.json

@@ -5185,6 +5185,7 @@
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
         "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -6541,7 +6542,8 @@
         "esprima": "^4.0.1",
         "estraverse": "^5.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1"
+        "optionator": "^0.8.1",
+        "source-map": "~0.6.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -9055,6 +9057,7 @@
         "@types/node": "*",
         "anymatch": "^3.0.3",
         "fb-watchman": "^2.0.0",
+        "fsevents": "^2.3.2",
         "graceful-fs": "^4.2.9",
         "jest-regex-util": "^27.5.1",
         "jest-serializer": "^27.5.1",
@@ -9777,6 +9780,7 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
       "dependencies": {
+        "graceful-fs": "^4.1.6",
         "universalify": "^2.0.0"
       },
       "optionalDependencies": {
@@ -12406,6 +12410,7 @@
         "eslint-webpack-plugin": "^3.1.1",
         "file-loader": "^6.2.0",
         "fs-extra": "^10.0.0",
+        "fsevents": "^2.3.2",
         "html-webpack-plugin": "^5.5.0",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^27.4.3",
@@ -12818,6 +12823,9 @@
       "version": "2.75.6",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.6.tgz",
       "integrity": "sha512-OEf0TgpC9vU6WGROJIk1JA3LR5vk/yvqlzxqdrE2CzzXnqKXNzbAwlWUXis8RS3ZPe7LAq+YUxsRa0l3r27MLA==",
+      "dependencies": {
+        "fsevents": "~2.3.2"
+      },
       "bin": {
         "rollup": "dist/bin/rollup"
       },

frontend/package.json

@@ -22,10 +22,10 @@
     "react-dom": "^18.1.0",
     "react-icons": "^4.4.0",
     "react-router-dom": "^6.3.0",
+    "react-scripts": "5.0.1",
     "sass": "^1.52.3",
     "typescript": "^4.7.3",
-    "web-vitals": "^2.1.4",
+    "web-vitals": "^2.1.4"
-    "react-scripts": "5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

frontend/src/App.tsx

@@ -130,7 +130,7 @@ function App() {
     return <Routes>
               <Route element={<MainLayout><Outlet /></MainLayout>}>
                 <Route index element={<HomePage />} />
-                <Route path=":srv_id" element={<ServiceDetails />} />
+                <Route path=":srv" element={<ServiceDetails />} />
                 <Route path="*" element={<Navigate to="/" />} />
               </Route>
           </Routes>

frontend/src/components/AddNewRegex.tsx

@@ -15,7 +15,7 @@ type RegexAddInfo = {
     deactive:boolean
 }
 
-function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:string }) { 
+function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:number }) { 
 
     const form = useForm({
         initialValues: {
@@ -48,7 +48,7 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
         const request:RegexAddForm = {
             is_blacklist:values.type !== "whitelist",
             is_case_sensitive: !values.is_case_insensitive,
-            service_id: service,
+            service_port: service,
             mode: filter_mode?filter_mode:"B",
             regex: b64encode(values.regex),
             active: !values.deactive
@@ -59,7 +59,7 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
                 setSubmitLoading(false)
                 close();
                 fireUpdateRequest();
-                okNotify(`Regex ${b64decode(request.regex)} has been added`, `Successfully added  ${request.is_case_sensitive?"case sensitive":"case insensitive"} ${request.is_blacklist?"blacklist":"whitelist"} regex to ${request.service_id} service`)
+                okNotify(`Regex ${b64decode(request.regex)} has been added`, `Successfully added  ${request.is_case_sensitive?"case sensitive":"case insensitive"} ${request.is_blacklist?"blacklist":"whitelist"} regex to ${request.service_port} service`)
             }else if (res.toLowerCase() === "invalid regex"){
                 setSubmitLoading(false)
                 form.setFieldError("regex", "Invalid Regex")

frontend/src/components/AddNewService.tsx

@@ -8,8 +8,6 @@ type ServiceAddForm = {
     name:string,
     port:number,
     autostart: boolean,
-    chosenInternalPort: boolean,
-    internalPort: number
 }
 
 function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void }) {
@@ -18,14 +16,11 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
         initialValues: {
             name:"",
             port:8080,
-            internalPort:30001,
-            chosenInternalPort:false,
             autostart: true
         },
         validationRules:{
             name: (value) => value !== ""?true:false,
             port: (value) => value>0 && value<65536,
-            internalPort: (value) => value>0 && value<65536,
         }
     })
 
@@ -38,15 +33,15 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
     const [submitLoading, setSubmitLoading] = useState(false)
     const [error, setError] = useState<string|null>(null)
  
-    const submitRequest = ({ name, port, autostart, chosenInternalPort, internalPort }:ServiceAddForm) =>{
+    const submitRequest = ({ name, port, autostart }:ServiceAddForm) =>{
         setSubmitLoading(true)
-        addservice(chosenInternalPort?{ internalPort, name, port }:{ name, port }).then( res => {
+        addservice({name, port}).then( res => {
             if (res.status === "ok"){
                 setSubmitLoading(false)
                 close();
                 fireUpdateRequest();
-                if (autostart) startservice(res.id)
+                if (autostart) startservice(port)
-                okNotify(`Service ${name} has been added`, `Successfully added ${res.id} with port ${port}`)
+                okNotify(`Service ${name} has been added`, `Successfully added service with port ${port}`)
             }else{
                 setSubmitLoading(false)
                 setError("Invalid request! [ "+res.status+" ]")
@@ -75,18 +70,6 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
                 {...form.getInputProps('port')}
             />
 
-            {form.values.chosenInternalPort?<>
-                <Space h="md" />
-                <NumberInput
-                    placeholder="8080"
-                    min={1}
-                    max={65535}
-                    label="Internal Proxy Port"
-                    {...form.getInputProps('internalPort')}
-                />
-                <Space h="sm" />
-            </>:null}
-
             <Space h="xl" />
 
             <Switch
@@ -94,13 +77,6 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
                 {...form.getInputProps('autostart', { type: 'checkbox' })}
             />
 
-            <Space h="md" />
-
-            <Switch
-                label="Choose internal port"
-                {...form.getInputProps('chosenInternalPort', { type: 'checkbox' })}
-            />
-
             <Group position="right" mt="md">
                 <Button loading={submitLoading} type="submit">Add Service</Button>
             </Group>

frontend/src/components/Header/index.tsx

@@ -69,7 +69,9 @@ function Header() {
     setLoadingBtn(false)
   }
 
-  const {srv_id} = useParams()
+  const {srv} = useParams()
+  const service_port = srv?parseInt(srv):null
+
   const [open, setOpen] = useState(false);
   const closeModal = () => {setOpen(false);}
 
@@ -123,7 +125,7 @@ function Header() {
             </ActionIcon>
           </Tooltip>
         :null}
-        { srv_id?
+        { service_port?
           <Tooltip label="Add a new regex" zIndex={0} position='bottom' transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="blue" opened={tooltipAddOpened} tooltipId="tooltip-add-id">
             <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
              aria-describedby="tooltip-add-id"
@@ -138,8 +140,8 @@ function Header() {
           </Tooltip>
       }
         
-        {srv_id?
+        {service_port?
-            <AddNewRegex opened={open} onClose={closeModal} service={srv_id} />:
+            <AddNewRegex opened={open} onClose={closeModal} service={service_port} />:
             <AddNewService opened={open} onClose={closeModal} />
         }
         <Modal size="xl" title="Change Firewall Password" opened={changePasswordModal} onClose={()=>setChangePasswordModal(false)} closeOnClickOutside={false} centered>

frontend/src/components/RegexView/index.tsx

@@ -81,7 +81,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
             />
             <Space h="md" />
             <div className='center-flex'>
-              <Badge size="md" color="cyan" variant="filled">Service: {regexInfo.service_id}</Badge>
+              <Badge size="md" color="cyan" variant="filled">Service: {regexInfo.service_port}</Badge>
               <Space w="xs" />
               <Badge size="md" color={regexInfo.active?"lime":"red"} variant="filled">{regexInfo.active?"ACTIVE":"DISABLED"}</Badge>
               <Space w="xs" />

frontend/src/components/ServiceRow/ChangePortModal.tsx

@@ -1,107 +0,0 @@
-import { Button, Group, NumberInput, Space, Notification, Modal, Center, Title } from '@mantine/core';
-import { useForm } from '@mantine/hooks';
-import React, { useEffect, useState } from 'react';
-import { changeports, fireUpdateRequest, okNotify } from '../../js/utils';
-import { ImCross } from "react-icons/im"
-import { Service } from '../../js/models';
-import { FaLongArrowAltDown } from 'react-icons/fa';
-
-type InputForm = {
-    internalPort:number,
-    port:number
-}
-
-function ChangePortModal({ service, opened, onClose }:{ service:Service, opened:boolean, onClose:()=>void }) {
-
-    const form = useForm({
-        initialValues: {
-            internalPort: service.internal_port,
-            port: service.public_port
-        },
-        validationRules:{
-            internalPort: (value) => value>0 && value<65536,
-            port: (value) => value>0 && value<65536 
-        }
-    })
-
-    useEffect(()=>{
-        form.setValues({internalPort: service.internal_port, port:service.public_port})
-    },[opened])
-
-    const close = () =>{
-        onClose()
-        form.reset()
-        setError(null)
-    }
-
-    const [submitLoading, setSubmitLoading] = useState(false)
-    const [error, setError] = useState<string|null>(null)
- 
-    const submitRequest = (data:InputForm) =>{
-        setSubmitLoading(true)
-        changeports(service.id, data).then( res => {
-            if (!res){
-                setSubmitLoading(false)
-                close();
-                fireUpdateRequest();
-                okNotify(`Internal port on ${service.name} service has changed in ${data.internalPort}`, `Successfully changed internal port of service with id ${service.id}`)
-            }else{
-                setSubmitLoading(false)
-                setError("Invalid request! [ "+res+" ]")
-            }
-        }).catch( err => {
-            setSubmitLoading(false)
-            setError("Request Failed! [ "+err+" ]")
-        })
-    }    
-
-
-  return <Modal size="xl" title="Change Ports" opened={opened} onClose={close} closeOnClickOutside={false} centered>
-    <form onSubmit={form.onSubmit(submitRequest)}>
-
-
-
-            <NumberInput
-                placeholder="30001"
-                min={1}
-                max={65535}
-                label="Internal Proxy Port"
-                {...form.getInputProps('internalPort')}
-            />    
-
-            <Space h="xl" />
-            <Center><FaLongArrowAltDown size={50}/></Center>
-            
-            <NumberInput
-                placeholder="8080"
-                min={1}
-                max={65535}
-                label="Public Service Port"
-                {...form.getInputProps('port')}
-            />
-
-            <Space h="xl" />
-
-            <Center><Title order={5}>The change of the ports will cause a temporarily shutdown of the service! ⚠️</Title></Center>
-
-            <Space h="md" />
-
-            <Group position="right" mt="md">
-                <Button loading={submitLoading} disabled={
-                    service.internal_port === form.values.internalPort && service.public_port === form.values.port
-                    } type="submit">Change Port</Button>
-            </Group>
-
-            <Space h="md" />
-            
-            {error?<>
-            <Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}>
-                Error: {error}
-            </Notification><Space h="md" /></>:null}
-            
-        </form>
-    </Modal>
-
-}
-
-export default ChangePortModal;

frontend/src/components/ServiceRow/index.tsx

@@ -1,15 +1,13 @@
 import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core';
 import React, { useState } from 'react';
-import { FaPause, FaPlay, FaStop } from 'react-icons/fa';
+import { FaPlay, FaStop } from 'react-icons/fa';
 import { Service } from '../../js/models';
 import { MdOutlineArrowForwardIos } from "react-icons/md"
 import style from "./ServiceRow.module.scss";
 import YesNoModal from '../YesNoModal';
-import { deleteservice, errorNotify, fireUpdateRequest, okNotify, pauseservice, regenport, startservice, stopservice } from '../../js/utils';
+import { deleteservice, errorNotify, fireUpdateRequest, okNotify, startservice, stopservice } from '../../js/utils';
-import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs';
+import { BsTrashFill } from 'react-icons/bs';
-import { TbNumbers } from 'react-icons/tb';
 import { BiRename } from 'react-icons/bi'
-import ChangePortModal from './ChangePortModal';
 
 //"status":"stop"/"wait"/"active"/"pause",
 function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) {
@@ -17,68 +15,48 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
     let status_color = "gray";
     switch(service.status){
         case "stop": status_color = "red"; break;
-        case "wait": status_color = "yellow"; break;
         case "active": status_color = "teal"; break;
-        case "pause": status_color = "cyan"; break;
     }
 
     const [stopModal, setStopModal] = useState(false);
     const [buttonLoading, setButtonLoading] = useState(false)
     const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
     const [deleteModal, setDeleteModal] = useState(false)
-    const [changePortModal, setChangePortModal] = useState(false)
-    const [choosePortModal, setChoosePortModal] = useState(false)
 
     const stopService = async () => {
         setButtonLoading(true)
-        await stopservice(service.id).then(res => {
+        await stopservice(service.port).then(res => {
             if(!res){
-                okNotify(`Service ${service.id} stopped successfully!`,`The service ${service.name} has been stopped!`)
+                okNotify(`Service ${service.port} stopped successfully!`,`The service ${service.name} has been stopped!`)
                 fireUpdateRequest();
             }else{
-                errorNotify(`An error as occurred during the stopping of the service ${service.id}`,`Error: ${res}`)
+                errorNotify(`An error as occurred during the stopping of the service ${service.port}`,`Error: ${res}`)
             }
         }).catch(err => {
-            errorNotify(`An error as occurred during the stopping of the service ${service.id}`,`Error: ${err}`)
+            errorNotify(`An error as occurred during the stopping of the service ${service.port}`,`Error: ${err}`)
         })
         setButtonLoading(false);
     }
 
     const startService = async () => {
         setButtonLoading(true)
-        await startservice(service.id).then(res => {
+        await startservice(service.port).then(res => {
             if(!res){
-                okNotify(`Service ${service.id} started successfully!`,`The service ${service.name} has been started!`)
+                okNotify(`Service ${service.port} started successfully!`,`The service ${service.name} has been started!`)
                 fireUpdateRequest();
             }else{
-                errorNotify(`An error as occurred during the starting of the service ${service.id}`,`Error: ${res}`)
+                errorNotify(`An error as occurred during the starting of the service ${service.port}`,`Error: ${res}`)
             }
         }).catch(err => {
-            errorNotify(`An error as occurred during the starting of the service ${service.id}`,`Error: ${err}`)
+            errorNotify(`An error as occurred during the starting of the service ${service.port}`,`Error: ${err}`)
         })
         setButtonLoading(false)
     }
 
-    const pauseService = async () => {
-        setButtonLoading(true)
-        await pauseservice(service.id).then(res => {
-            if(!res){
-                okNotify(`Service ${service.id} paused successfully!`,`The service ${service.name} has been paused (Transparent mode)!`)
-                fireUpdateRequest();
-            }else{
-                errorNotify(`An error as occurred during the pausing of the service ${service.id}`,`Error: ${res}`)
-            }
-        }).catch(err => {
-            errorNotify(`An error as occurred during the pausing of the service ${service.id}`,`Error: ${err}`)
-        })
-        setButtonLoading(false)
-        
-    }
-
     const deleteService = () => {
-        deleteservice(service.id).then(res => {
+        deleteservice(service.port).then(res => {
             if (!res){
-                okNotify("Service delete complete!",`The service ${service.id} has been deleted!`)
+                okNotify("Service delete complete!",`The service ${service.port} has been deleted!`)
                 fireUpdateRequest();
             }else
                 errorNotify("An error occurred while deleting a service",`Error: ${res}`)
@@ -88,32 +66,18 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
         
     }
 
-    const changePort = () => {
-        regenport(service.id).then(res => {
-            if (!res){
-                okNotify("Service port regeneration completed!",`The service ${service.id} has changed the internal port!`)
-                fireUpdateRequest();
-            }else
-                errorNotify("An error occurred while changing the internal service port",`Error: ${res}`)
-        }).catch(err => {
-            errorNotify("An error occurred while changing the internal service port",`Error: ${err}`)
-        })
-    }
-
     return <>
         <Grid className={style.row} justify="flex-end" style={{width:"100%"}}>
             <Grid.Col md={4} xs={12}>
                 <MediaQuery smallerThan="md" styles={{ display: 'none' }}><div>
                     <div className="center-flex-row">
-                        <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>
+                        <div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.port}</Badge></div>
-                        <Badge color={status_color} size="xl" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge>
                     </div>
                 </div></MediaQuery>
                 <MediaQuery largerThan="md" styles={{ display: 'none' }}><div>
                     <div className="center-flex">
-                        <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>
+                        <div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.port}</Badge></div>
                         <Space w="xl" />
-                        <Badge color={status_color} size="xl" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge>
                     </div>
                 </div></MediaQuery>
                 
@@ -146,18 +110,12 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
                         <Menu.Label><b>Rename service</b></Menu.Label>
                         <Menu.Item icon={<BiRename size={18} />} onClick={()=>{}}>Change service name</Menu.Item>
                         <Divider />
-                        <Menu.Label><b>Change ports</b></Menu.Label>
-                        <Menu.Item icon={<TbNumbers size={18} />} onClick={()=>setChoosePortModal(true)}>Change port</Menu.Item>
-                        <Menu.Item icon={<BsArrowRepeat size={18} />} onClick={()=>setChangePortModal(true)}>Regen proxy port</Menu.Item>
-                        <Divider />
                         <Menu.Label><b>Danger zone</b></Menu.Label>
                         <Menu.Item color="red" icon={<BsTrashFill size={18} />} onClick={()=>setDeleteModal(true)}>Delete Service</Menu.Item>
                     </Menu>
                     <Space w="md"/>                        
-                    {["pause","wait"].includes(service.status)?
+                    <Tooltip label="Stop service" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="red" opened={tooltipStopOpened} tooltipId="tooltip-stop-id">
-                        
+                        <ActionIcon color="red" loading={buttonLoading}
-                        <Tooltip label="Stop service" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="orange" opened={tooltipStopOpened} tooltipId="tooltip-stop-id">
-                            <ActionIcon color="yellow" loading={buttonLoading}
                         onClick={()=>setStopModal(true)} size="xl" radius="md" variant="filled"
                         disabled={service.status === "stop"}
                         aria-describedby="tooltip-stop-id"
@@ -165,16 +123,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
                         onMouseEnter={() => setTooltipStopOpened(true)} onMouseLeave={() => setTooltipStopOpened(false)}>
                             <FaStop size="20px" />
                         </ActionIcon>
-                        </Tooltip>:
-                        <Tooltip label={service.status === "stop"?"Start in pause mode":"Pause service"} zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color={service.status === "stop"?"cyan":"red"}>
-                            <ActionIcon color={service.status === "stop"?"cyan":"red"} loading={buttonLoading}
-                                    onClick={pauseService} size="xl" radius="md" variant="filled"
-                                    /*disabled={service.status === "stop"}*/>
-                                <FaPause size="20px" />
-                            </ActionIcon>
                     </Tooltip>
-                    }
-                    
                     <Space w="md"/>
                     <Tooltip label="Start service" transition="pop" zIndex={0} transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="teal">
                         <ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading}
@@ -196,7 +145,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
         </Grid>
         <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! ⚠️`}
+            description={`You are going to delete the service '${service.port}', causing the firewall to stop. This will cause the shutdown of your service! ⚠️`}
             onClose={()=>{setStopModal(false);}}
             action={stopService}
             opened={stopModal}
@@ -204,19 +153,11 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
         <hr style={{width:"100%"}}/>
         <YesNoModal
             title='Are you sure to delete this service?'
-            description={`You are going to delete the service '${service.id}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}
+            description={`You are going to delete the service '${service.port}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}
             onClose={()=>setDeleteModal(false) }
             action={deleteService}
             opened={deleteModal}
         />
-        <YesNoModal
-            title='Are you sure to change the proxy internal port?'
-            description={`You are going to change the proxy port '${service.internal_port}'. This will cause the shutdown of your service temporarily! ⚠️`}
-            onClose={()=>setChangePortModal(false)}
-            action={changePort}
-            opened={changePortModal}
-        />
-        <ChangePortModal service={service} onClose={()=> setChoosePortModal(false)} opened={choosePortModal} />
     </>
 }
 

frontend/src/js/models.ts

@@ -5,11 +5,9 @@ export type GeneralStats = {
 }
 
 export type Service = {
-    id:string,
     name:string,
     status:string,
-    public_port:number,
+    port:number,
-    internal_port:number,
     n_packets:number,
     n_regex:number,
 }
@@ -23,15 +21,6 @@ export type ServiceAddForm = {
 export type ServerResponse = {
     status:string
 }
-export type ServerResponseWithID = {
-    status:string,
-    id:string
-}
-
-export type ChangePort = {
-    port?: number,
-    internalPort?: number
-}
 
 export type ServerResponseToken = {
     status:string,
@@ -60,7 +49,7 @@ export type ChangePassword = {
 
 export type RegexFilter = {
     id:number,
-    service_id:string,
+    service_port:number,
     regex:string
     is_blacklist:boolean,
     is_case_sensitive:boolean,
@@ -70,7 +59,7 @@ export type RegexFilter = {
 }
 
 export type RegexAddForm = {
-    service_id:string,
+    service_port:number,
     regex:string,
     is_case_sensitive:boolean,
     is_blacklist:boolean,

frontend/src/js/utils.tsx

@@ -1,7 +1,7 @@
 import { showNotification } from "@mantine/notifications";
 import { ImCross } from "react-icons/im";
 import { TiTick } from "react-icons/ti"
-import { GeneralStats, Service, ServiceAddForm, ServerResponse, RegexFilter, RegexAddForm, ServerStatusResponse, PasswordSend, ChangePassword, LoginResponse, ServerResponseToken, ServerResponseWithID, ChangePort } from "./models";
+import { GeneralStats, Service, ServiceAddForm, ServerResponse, RegexFilter, RegexAddForm, ServerStatusResponse, PasswordSend, ChangePassword, LoginResponse, ServerResponseToken } from "./models";
 
 var Buffer = require('buffer').Buffer 
 
@@ -64,8 +64,8 @@ export async function servicelist(){
     return await getapi("services") as Service[];
 }
 
-export async function serviceinfo(service_id:string){
+export async function serviceinfo(service_port:number){
-    return await getapi(`service/${service_id}`) as Service;
+    return await getapi(`service/${service_port}`) as Service;
 }
 
 export async function logout(){
@@ -109,36 +109,22 @@ export async function deactivateregex(regex_id:number){
     return status === "ok"?undefined:status
 }
 
-export async function startservice(service_id:string){
+export async function startservice(service_port:number){
-    const { status } = await getapi(`service/${service_id}/start`) as ServerResponse;
+    const { status } = await getapi(`service/${service_port}/start`) as ServerResponse;
     return status === "ok"?undefined:status
 }
 
-export async function stopservice(service_id:string){
+export async function stopservice(service_port:number){
-    const { status } = await getapi(`service/${service_id}/stop`) as ServerResponse;
+    const { status } = await getapi(`service/${service_port}/stop`) as ServerResponse;
-    return status === "ok"?undefined:status
-}
-export async function pauseservice(service_id:string){
-    const { status } = await getapi(`service/${service_id}/pause`) as ServerResponse;
-    return status === "ok"?undefined:status
-}
-
-export async function regenport(service_id:string){
-    const { status } = await getapi(`service/${service_id}/regen-port`) as ServerResponse;
-    return status === "ok"?undefined:status
-}
-
-export async function changeports(service_id:string, data:ChangePort){
-    const { status } = await postapi(`service/${service_id}/change-ports`,data) as ServerResponse;
     return status === "ok"?undefined:status
 }
 
 export async function addservice(data:ServiceAddForm) {
-    return await postapi("services/add",data) as ServerResponseWithID;
+    return await postapi("services/add",data) as ServerResponse;
 }
 
-export async function deleteservice(service_id:string) {
+export async function deleteservice(service_port:number) {
-    const { status } = await getapi(`service/${service_id}/delete`) as ServerResponse;
+    const { status } = await getapi(`service/${service_port}/delete`) as ServerResponse;
     return status === "ok"?undefined:status
 }
 
@@ -148,8 +134,8 @@ export async function addregex(data:RegexAddForm) {
     return status === "ok"?undefined:status
 }
 
-export async function serviceregexlist(service_id:string){
+export async function serviceregexlist(service_port:number){
-    return await getapi(`service/${service_id}/regexes`) as RegexFilter[];
+    return await getapi(`service/${service_port}/regexes`) as RegexFilter[];
 }
 
 

frontend/src/pages/HomePage.tsx

@@ -33,14 +33,13 @@ function HomePage() {
 
     return <div id="service-list" className="center-flex-row">
         <LoadingOverlay visible={loader} />
-        {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
+        {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.port} onClick={()=>{
-            navigator("/"+srv.id)
+            navigator("/"+srv.port)
         }} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
             <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> 
             <div className='center-flex'>
                 <Tooltip label="Add a new service" transition="pop" transitionDuration={200} /*openDelay={500}*/ zIndex={0} transitionTimingFunction="ease" color="blue" opened={tooltipAddServOpened} tooltipId="tooltip-addServ-id">
                     <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
-                        aria-describedby="tooltip-addSrv-id"
                         onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)}
                         onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
                 </Tooltip>

frontend/src/pages/ServiceDetails.tsx

@@ -10,15 +10,13 @@ import { errorNotify, eventUpdateName, fireUpdateRequest, serviceinfo, servicere
 import { useWindowEvent } from '@mantine/hooks';
 
 function ServiceDetails() {
-    const {srv_id} = useParams()
+    const {srv} = useParams()
-
+    const service_port = srv?parseInt(srv):null
     const [serviceInfo, setServiceInfo] = useState<Service>({
-        id:srv_id?srv_id:"",
+        port:0,
-        internal_port:0,
         n_packets:0,
         n_regex:0,
-        name:srv_id?srv_id:"",
+        name:"",
-        public_port:0,
         status:"🤔"
     })
 
@@ -28,9 +26,9 @@ function ServiceDetails() {
     const closeModal = () => {setOpen(false);updateInfo();}
 
     const updateInfo = async () => {
-        if (!srv_id) return
+        if (!service_port) return
         let error = false;
-        await serviceinfo(srv_id).then(res => {
+        await serviceinfo(service_port).then(res => {
             setServiceInfo(res)
         }).catch(
           err =>{
@@ -38,10 +36,10 @@ function ServiceDetails() {
             navigator("/")
         })
         if (error) return
-        await serviceregexlist(srv_id).then(res => {
+        await serviceregexlist(service_port).then(res => {
             setRegexesList(res)
         }).catch(
-          err => errorNotify(`Updater for ${srv_id} service failed [Regex list]!`, err.toString())
+          err => errorNotify(`Updater for ${service_port} service failed [Regex list]!`, err.toString())
         )
         setLoader(false)
     }
@@ -75,7 +73,7 @@ function ServiceDetails() {
             </Grid>
         }
 
-        {srv_id?<AddNewRegex opened={open} onClose={closeModal} service={srv_id} />:null}
+        {service_port?<AddNewRegex opened={open} onClose={closeModal} service={service_port} />:null}
 
 
     </div>