add: filtering table of firewall + InterfaceSelector frontend fixes and improves

frontend/src/components/Firewall/ModeSelector.tsx

@@ -1,25 +1,27 @@
 import { SegmentedControl, SegmentedControlProps } from "@mantine/core";
-import { RuleMode } from "./utils";
+import { RuleMode, Table } from "./utils";
+import { table } from "console";
 
 
 
-export const ModeSelector = (props:Omit<SegmentedControlProps, "data">) => (
-    <SegmentedControl
+export const ModeSelector = (props:Omit<SegmentedControlProps, "data"> & { table: Table }) => {
+    const isFilterTable = props.table == Table.FILTER
+    return <SegmentedControl
         data={[
             {
                 value: RuleMode.IN,
-                label: 'IN',
+                label: isFilterTable?'IN':'PREROUTING',
             },
-            {
+            ...(isFilterTable?[{
                 value: RuleMode.FORWARD,
                 label: 'FWD',
-            },
+            }]:[]),
             {
                 value: RuleMode.OUT,
-                label: 'OUT',
+                label: isFilterTable?'OUT':'POSTROUTING',
             }
         ]}
         size={props.size?props.size:"xs"}
         {...props}
     />
-)
+}

frontend/src/components/Firewall/utils.ts

@@ -21,6 +21,11 @@ export enum RuleMode {
     FORWARD = "forward"
 }
 
+export enum Table {
+    MANGLE = "mangle",
+    FILTER = "filter",
+}
+
 export type Rule = {
     active: boolean
     name:string,
@@ -33,6 +38,7 @@ export type Rule = {
     port_dst_to: number,
     action: ActionType,
     mode: RuleMode,
+    table: Table
 }
 
 export type RuleInfo = {

frontend/src/components/InterfaceInput.tsx

@@ -1,5 +1,5 @@
 import { Combobox, TextInput, useCombobox } from "@mantine/core";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ipInterfacesQuery } from "../js/utils";
 
 interface ItemProps{
@@ -38,7 +38,7 @@ export const InterfaceInput = ({ initialCustomInterfaces, includeInterfaceNames,
         },
     });
 
-    const data = [...customIpInterfaces, ...interfaces]
+    const data = [...customIpInterfaces.filter(v => !interfaces.map(v => v.value).includes(v.value)), ...interfaces]
     const [selectedValue, setSelectedValue] = useState<string | null>(null);
     const [search, setSearch] = useState('');
     
@@ -52,12 +52,17 @@ export const InterfaceInput = ({ initialCustomInterfaces, includeInterfaceNames,
         return a.value.localeCompare(b.value)
     });
 
-    const options = filteredOptions.map((item) => (
+    const options = filteredOptions.sort( (a, b) => a.value == selectedValue? -1 : b.value == selectedValue? 1: a.value.localeCompare(b.value) ).map((item) => (
         <Combobox.Option value={item.value} key={item.value}>
-          ( <b>{item.netint}</b> ) -{">"} <b>{item.value}</b>
+          ( <b>{item.value == selectedValue ? "SELECTED" : item.netint}</b> ) -{">"} <b>{item.value}</b>
         </Combobox.Option>
     ));
 
+    useEffect(() => {
+        setSelectedValue(data.find((item) => item.value === defaultValue)?.value??null)
+        setSearch(defaultValue??'')
+    }, [])
+
     return <>
     <Combobox
         store={combobox}
@@ -81,9 +86,8 @@ export const InterfaceInput = ({ initialCustomInterfaces, includeInterfaceNames,
     <Combobox.Target>
         <TextInput
           style={{width:"100%"}}
-          defaultValue={defaultValue}
           rightSection={<Combobox.Chevron />}
-          value={value??(defaultValue?undefined:search)}
+          value={value??search}
           placeholder="10.1.1.1"
           rightSectionPointerEvents="none"
             onChange={(event) => {
@@ -107,7 +111,7 @@ export const InterfaceInput = ({ initialCustomInterfaces, includeInterfaceNames,
       </Combobox.Target>
 
       <Combobox.Dropdown>
-        <Combobox.Options mah={100} style={{ overflowY: 'auto' }}>
+        <Combobox.Options mah={200} style={{ overflowY: 'auto' }}>
           {options}
           {(exactOptionMatch==null) && search.trim().length > 0 && (
             <Combobox.Option value="$create">+ Use this: {search}</Combobox.Option>