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 = {