Firewall refactor

frontend/src/components/Firewall/ModeSelector.tsx

@@ -8,11 +8,15 @@ export const ModeSelector = (props:Omit<SegmentedControlProps, "data">) => (
         data={[
             {
                 value: RuleMode.IN,
-                label: 'Inbound',
+                label: 'IN',
+            },
+            {
+                value: RuleMode.FORWARD,
+                label: 'FWD',
             },
             {
                 value: RuleMode.OUT,
-                label: 'Outbound',
+                label: 'OUT',
             }
         ]}
         size={props.size?props.size:"xs"}

frontend/src/components/Firewall/ProtocolSelector.tsx

@@ -13,6 +13,10 @@ export const ProtocolSelector = (props:Omit<SegmentedControlProps, "data">) => (
                 value: Protocol.UDP,
                 label: 'UDP',
             },
+            {
+                value: Protocol.BOTH,
+                label: 'BOTH',
+            },
             {
                 value: Protocol.ANY,
                 label: 'ANY',

frontend/src/components/Firewall/utils.ts

@@ -5,6 +5,7 @@ import { getapi, postapi } from "../../js/utils"
 export enum Protocol {
     TCP = "tcp",
     UDP = "udp",
+    BOTH = "both",
     ANY = "any"
 }
 
@@ -15,16 +16,17 @@ export enum ActionType {
 }
 
 export enum RuleMode {
-    OUT = "O",
-    IN = "I",
+    OUT = "out",
+    IN = "in",
+    FORWARD = "forward"
 }
 
 export type Rule = {
     active: boolean
     name:string,
     proto: Protocol,
-    ip_src: string,
-    ip_dst: string,
+    src: string,
+    dst: string,
     port_src_from: number,
     port_dst_from: number,
     port_src_to: number,
@@ -48,6 +50,7 @@ export type FirewallSettings = {
     keep_rules: boolean,
     allow_loopback: boolean,
     allow_established: boolean,
+    allow_icmp: boolean
 }
 
 
@@ -74,16 +77,6 @@ export const firewall = {
     disable: async() => {
         return await getapi("firewall/disable") as ServerResponse;
     },
-    rulenable: async (rule_id:number) => {
-        return await getapi(`firewall/rule/${rule_id}/enable`) as ServerResponse;
-    },
-    ruledisable: async (rule_id:number) => {
-        return await getapi(`firewall/rule/${rule_id}/disable`) as ServerResponse;
-    },
-    rulerename: async (rule_id:number, name: string) => {
-        const { status } = await postapi(`firewall/rule/${rule_id}/rename`,{ name }) as ServerResponse;
-        return status === "ok"?undefined:status
-    },
     ruleset: async (data:RuleAddForm) => {
         return await postapi("firewall/rules/set", data) as ServerResponseListed;
     }

frontend/src/components/InterfaceInput.tsx

@@ -14,19 +14,26 @@ interface ItemProps extends AutocompleteItem {
 }
 
 interface InterfaceInputProps extends Omit<SelectProps, "data">{
-    initialCustomInterfaces?:AutocompleteItem[]
+    initialCustomInterfaces?:AutocompleteItem[],
+    includeInterfaceNames?:boolean
 }
 
-export const InterfaceInput = (props:InterfaceInputProps) => {
-
-    const { initialCustomInterfaces, ...propeties } = props
+export const InterfaceInput = ({ initialCustomInterfaces, includeInterfaceNames, ...props }:InterfaceInputProps) => {
 
     const [customIpInterfaces, setCustomIpInterfaces] = useState<AutocompleteItem[]>(initialCustomInterfaces??[]);
     const interfacesQuery = ipInterfacesQuery()
 
-    const interfaces = (!interfacesQuery.isLoading?
-            (interfacesQuery.data!.map(item => ({netint:item.name, value:item.addr, label:item.addr})) as AutocompleteItem[]):
-        [])
+    const getInterfaces = () => {
+        if (interfacesQuery.isLoading || !interfacesQuery.data) return []
+        if(includeInterfaceNames){
+            const result = interfacesQuery.data.map(item => ({netint:"IP", value:item.addr, label:item.addr})) as AutocompleteItem[]
+            interfacesQuery.data.map(item => item.name).filter((item, index, arr) => arr.indexOf(item) === index).forEach(item => result.push({netint:"INT", value:item, label:item}))
+            return result
+        }
+        return (interfacesQuery.data.map(item => ({netint:item.name, value:item.addr, label:item.addr})) as AutocompleteItem[])
+    }
+
+    const interfaces = getInterfaces()
 
     return <Select
         placeholder="10.1.1.1"
@@ -43,6 +50,6 @@ export const InterfaceInput = (props:InterfaceInputProps) => {
             return item;
         }}
         style={props.style?{width:"100%", ...props.style}:{width:"100%"}}
-        {...propeties}
+        {...props}
     />
 }