Basic Working Addresses and Services Table

client/src/pages/object/Addresses.vue

@@ -19,6 +19,41 @@ async function load(){
   }
 }
 
+const displayData = $computed(() => {
+  let data: any;
+  data = [];
+  for (const name in addresses) {
+    data.push({
+      name,
+      value: getAddressValue(addresses[name]),
+      type: addresses[name].type,
+      comment: addresses[name].comment,
+    });
+  }
+  return data;
+});
+
+function getAddressValue(s: any): string {
+  let value: string;
+  switch (s.type) {
+  case "host":
+    value = s.host;
+    break;
+  case "range":
+    value = s.range;
+    break;
+  case "network":
+    value = s.network;
+    break;
+  case "group":
+    value = s.children;
+    break;
+  default:
+    value = "unkown";
+  }
+  return value;
+}
+
 onMounted(async() => {
   load();
 });
@@ -30,6 +65,6 @@ onMounted(async() => {
     <PageHeader title="Addresses">
       <button @click="load">Load Addresses</button>
     </PageHeader>
-    <NiceTable :columns="columns" v-model:data="addresses"/>
+    <NiceTable :columns="columns" v-model:data="displayData"/>
   </div>
 </template>

client/src/pages/object/Services.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { apiCall } from "../../api";
 
-let services = $ref([]);
+let services = $ref({});
 const columns = [
   {heading: 'Name', path: 'name'},
   {heading: 'Type', path: 'type'},
@@ -9,11 +9,51 @@ const columns = [
   {heading: 'Comment', path: 'comment'},
 ];
 
+const displayData = $computed(() => {
+  let data: any;
+  data = [];
+  for (const name in services) {
+    data.push({
+      name,
+      value: getServiceValue(services[name]),
+      type: services[name].type,
+      comment: services[name].comment,
+    });
+  }
+  return data;
+});
+
+function getServiceValue(s: any): string {
+  let value: string;
+  switch (s.type) {
+  case "tcp":
+  case "udp":
+    value = getServicePortRange(s);
+    break;
+  case "icmp":
+    value = "icmp";
+    break;
+  case "group":
+    value = s.children;
+    break;
+  default:
+    value = "unkown";
+  }
+  return value;
+}
+
+function getServicePortRange(s:any): string {
+  if (s.dport_end) {
+    return s.dport_start + "-" + s.dport_end;
+  }
+  return s.dport_start;
+}
+
 async function load(){
   let res = await apiCall("Object.GetServices", {});
   if (res.Error === null) {
+    console.debug("services", res.Data.Services);
     services = res.Data.Services;
-    console.debug("services", services);
   } else {
     console.debug("error", res);
   }
@@ -27,9 +67,9 @@ onMounted(async() => {
 
 <template>
   <div>
-    <PageHeader title="services">
+    <PageHeader title="Services">
       <button @click="load">Load Services</button>
     </PageHeader>
-    <NiceTable :columns="columns" v-model:data="services"/>
+    <NiceTable :columns="columns" v-model:data="displayData" :sort="true" :sort-self="true"/>
   </div>
 </template>