Basic Rule Page

client/src/App.vue

@@ -10,7 +10,7 @@ const NavStateCount = 3;
 let navState = $ref(NavState.Open);
 const navRoutes = {
   "/": { icon: IDashboard, caption: "Dashboard" },
-  "/rules": { icon: IRule, caption: "Rules" },
+  "/firewall/rules": { icon: IRule, caption: "Rules" },
   "/addresses": { icon: IAddress, caption: "Addresses" },
 };
 

client/src/api.ts

@@ -15,8 +15,10 @@ export async function apiCall(method: string, params: Record<string, any>): Prom
   try {
     const result = await client.request({method, params});
     console.debug("api call result", result);
+    return { Data: result, Error: null};
   } catch (ex){
     console.debug("api call epic fail", ex);
+    return { Data: null, Error: ex};
   }
 }
 

client/src/pages/firewall/Rules.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { apiCall } from "../../api";
+
+let rules = $ref([]);
+
+async function loadRules(){
+  let res = await apiCall("Firewall.GetForwardRules", {});
+  if (res.Error === null) {
+    rules = res.Data.ForwardRules;
+    console.debug("rules", rules);
+  } else {
+    console.debug("error", res);
+  }
+}
+
+onMounted(async() => {
+  loadRules();
+});
+
+</script>
+
+<template>
+  <div>
+    <PageHeader title="Forward Rules">
+      <button @click="loadRules">Load Rules</button>
+    </PageHeader>
+    <NiceTable :columns="{name: 'Name', verdict: 'Verdict'}" :sort-self="false" v-model:data="rules"/>
+  </div>
+</template>