IP interface and Protocol + fix iptables

frontend/src/components/AddNewService.tsx

@@ -41,8 +41,7 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
  
     const submitRequest = ({ name, port, autostart, proto, ip_int }:ServiceAddForm) =>{
         setSubmitLoading(true)
-        const ipv6 = ip_int.match(regex_ipv4)?false:true
-        addservice({name, port, ipv6, proto, ip_int }).then( res => {
+        addservice({name, port, proto, ip_int }).then( res => {
             if (res.status === "ok" && res.service_id){
                 setSubmitLoading(false)
                 close();
@@ -69,7 +68,7 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
 
             <TextInput
                 label="Public IP Interface (ipv4/ipv6 + CIDR allowed)"
-                placeholder="10.40.20.0/8"
+                placeholder="10.1.1.0/24"
                 {...form.getInputProps('ip_int')}
             />
 
@@ -85,20 +84,21 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
             
             <Space h="md" />
 
-            <SegmentedControl
-                data={[
-                    { label: 'TCP', value: 'tcp' },
-                    { label: 'UDP', value: 'udp' },
-                ]}
-                {...form.getInputProps('proto')}
-            />
 
-            <Space h="xl" />
-
-            <Switch
-                label="Auto-Start Service"
-                {...form.getInputProps('autostart', { type: 'checkbox' })}
-            />        
+            <div className='center-flex'>
+                <Switch
+                    label="Auto-Start Service"
+                    {...form.getInputProps('autostart', { type: 'checkbox' })}
+                />  
+                <div className="flex-spacer"></div>
+                <SegmentedControl
+                    data={[
+                        { label: 'TCP', value: 'tcp' },
+                        { label: 'UDP', value: 'udp' },
+                    ]}
+                    {...form.getInputProps('proto')}
+                />
+            </div>      
 
             <Group position="right" mt="md">
                 <Button loading={submitLoading} type="submit">Add Service</Button>

frontend/src/components/ServiceRow/index.tsx

@@ -98,7 +98,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
                     <Space h="xs" />
                     <Badge color="violet" radius="sm" size="md" variant="filled">Regex: {service.n_regex}</Badge>
                     <Space h="xs" />
-                    <Badge color={service.ipv6?"pink":"cyan"} radius="sm" size="md" variant="filled">Protocol: {service.ipv6?"IPv6":"IPv4"}</Badge>
+                    <Badge color={service.ipv6?"pink":"cyan"} radius="sm" size="md" variant="filled">{service.ip_int} on {service.proto}</Badge>
                 </div>
                 <MediaQuery largerThan="md" styles={{ display: 'none' }}>
                     <div className='flex-spacer' />

frontend/src/js/models.ts

@@ -10,6 +10,8 @@ export type Service = {
     status:string,
     port:number,
     ipv6:boolean,
+    proto: string,
+    ip_int: string,
     n_packets:number,
     n_regex:number,
 }
@@ -17,7 +19,6 @@ export type Service = {
 export type ServiceAddForm = {
     name:string,
     port:number,
-    ipv6:boolean,
     proto:string,
     ip_int:string,
 }

frontend/src/pages/ServiceDetails.tsx

@@ -18,7 +18,9 @@ function ServiceDetails() {
         n_regex:0,
         name:"",
         ipv6:false,
-        status:"🤔"
+        status:"🤔",
+        ip_int: "",
+        proto: "tcp",
     })
 
     const [regexesList, setRegexesList] = useState<RegexFilter[]>([])