From 1c467e90ae58f8e387969ca868211dd215d14562 Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Sun, 26 Mar 2023 23:01:02 +0200
Subject: [PATCH] Add SNAT and DNAT PAge, Rename Rules

---
 client/src/App.vue                            |  6 ++-
 .../pages/firewall/DestinationNATRules.vue    | 38 +++++++++++++++++++
 .../firewall/{Rules.vue => ForwardRules.vue}  |  0
 client/src/pages/firewall/SourceNATRules.vue  | 38 +++++++++++++++++++
 4 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 client/src/pages/firewall/DestinationNATRules.vue
 rename client/src/pages/firewall/{Rules.vue => ForwardRules.vue} (100%)
 create mode 100644 client/src/pages/firewall/SourceNATRules.vue

diff --git a/client/src/App.vue b/client/src/App.vue
index 94459f2..3892b31 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -6,13 +6,17 @@ import IDashboard from '~icons/ri/dashboard-2-line';
 import IRule from '~icons/material-symbols/rule-folder-outline-sharp';
 import IAddress from '~icons/eos-icons/ip';
 import IService from '~icons/material-symbols/home-repair-service';
+import ISNAT from '~icons/mdi/arrow-expand-right';
+import IDNAT from '~icons/mdi/arrow-collapse-right';
 
 enum NavState { Open, Reduced, Collapsed };
 const NavStateCount = 3;
 let navState = $ref(NavState.Open);
 const navRoutes = {
   "/": { icon: IDashboard, caption: "Dashboard" },
-  "/firewall/rules": { icon: IRule, caption: "Rules" },
+  "/firewall/forwardrules": { icon: IRule, caption: "Rules" },
+  "/firewall/sourcenatrules": { icon: ISNAT, caption: "SNAT" },
+  "/firewall/destinationnatrules": { icon: IDNAT, caption: "DNAT" },
   "/object/addresses": { icon: IAddress, caption: "Addresses" },
   "/object/services": { icon: IService, caption: "Services" },
 };
diff --git a/client/src/pages/firewall/DestinationNATRules.vue b/client/src/pages/firewall/DestinationNATRules.vue
new file mode 100644
index 0000000..c64ef70
--- /dev/null
+++ b/client/src/pages/firewall/DestinationNATRules.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { apiCall } from "../../api";
+
+let rules = $ref([]);
+const columns = [
+  {heading: 'Name', path: 'name'},
+  {heading: 'Source', path: 'match.source_addresses'},
+  {heading: 'Destination', path: 'match.destination_addresses'},
+  {heading: 'Service', path: 'match.services'},
+  {heading: 'Verdict', path: 'verdict'},
+  {heading: 'Counter', path: 'counter'},
+  {heading: 'Comment', path: 'comment'},
+];
+
+async function loadRules(){
+  let res = await apiCall("Firewall.GetDestinationNATRules", {});
+  if (res.Error === null) {
+    rules = res.Data.DestinationNATRules;
+    console.debug("rules", rules);
+  } else {
+    console.debug("error", res);
+  }
+}
+
+onMounted(async() => {
+  loadRules();
+});
+
+</script>
+
+<template>
+  <div>
+    <PageHeader title="DNAT Rules">
+      <button @click="loadRules">Load Rules</button>
+    </PageHeader>
+    <NiceTable :columns="columns" v-model:data="rules"/>
+  </div>
+</template>
\ No newline at end of file
diff --git a/client/src/pages/firewall/Rules.vue b/client/src/pages/firewall/ForwardRules.vue
similarity index 100%
rename from client/src/pages/firewall/Rules.vue
rename to client/src/pages/firewall/ForwardRules.vue
diff --git a/client/src/pages/firewall/SourceNATRules.vue b/client/src/pages/firewall/SourceNATRules.vue
new file mode 100644
index 0000000..3b8c6bd
--- /dev/null
+++ b/client/src/pages/firewall/SourceNATRules.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { apiCall } from "../../api";
+
+let rules = $ref([]);
+const columns = [
+  {heading: 'Name', path: 'name'},
+  {heading: 'Source', path: 'match.source_addresses'},
+  {heading: 'Destination', path: 'match.destination_addresses'},
+  {heading: 'Service', path: 'match.services'},
+  {heading: 'Verdict', path: 'verdict'},
+  {heading: 'Counter', path: 'counter'},
+  {heading: 'Comment', path: 'comment'},
+];
+
+async function loadRules(){
+  let res = await apiCall("Firewall.GetSourceNATRules", {});
+  if (res.Error === null) {
+    rules = res.Data.SourceNATRules;
+    console.debug("rules", rules);
+  } else {
+    console.debug("error", res);
+  }
+}
+
+onMounted(async() => {
+  loadRules();
+});
+
+</script>
+
+<template>
+  <div>
+    <PageHeader title="SNAT Rules">
+      <button @click="loadRules">Load Rules</button>
+    </PageHeader>
+    <NiceTable :columns="columns" v-model:data="rules"/>
+  </div>
+</template>
\ No newline at end of file