add: created components for rules visualization

frontend/src/components/Firewall/ActionTypeSelector.tsx

@@ -0,0 +1,23 @@
+import { SegmentedControl, SegmentedControlProps } from "@mantine/core";
+import { ActionType } from "./utils";
+
+
+export const ActionTypeSelector = (props:Omit<SegmentedControlProps, "data">) => (
+    <SegmentedControl
+        data={[
+            {
+                value: ActionType.ACCEPT,
+                label: 'Accept',
+            },
+            {
+                value: ActionType.REJECT,
+                label: 'Reject',
+            },
+            {
+                value: ActionType.DROP,
+                label: 'Drop',
+            }
+        ]}
+        {...props}
+    />
+)

frontend/src/components/Firewall/ModeSelector.tsx

@@ -0,0 +1,20 @@
+import { SegmentedControl, SegmentedControlProps } from "@mantine/core";
+import { RuleMode } from "./utils";
+
+
+
+export const ModeSelector = (props:Omit<SegmentedControlProps, "data">) => (
+    <SegmentedControl
+        data={[
+            {
+                value: RuleMode.IN,
+                label: 'IN',
+            },
+            {
+                value: RuleMode.OUT,
+                label: 'OUT',
+            }
+        ]}
+        {...props}
+    />
+)

frontend/src/components/Firewall/ProtocolSelector.tsx

@@ -0,0 +1,23 @@
+import { SegmentedControl, SegmentedControlProps } from "@mantine/core";
+import { Protocol } from "./utils";
+
+
+export const ProtocolSelector = (props:Omit<SegmentedControlProps, "data">) => (
+    <SegmentedControl
+        data={[
+            {
+                value: Protocol.TCP,
+                label: 'TCP',
+            },
+            {
+                value: Protocol.UDP,
+                label: 'UDP',
+            },
+            {
+                value: Protocol.ANY,
+                label: 'ANY',
+            }
+        ]}
+        {...props}
+    />
+)