Add Interfaces Page

client/src/App.vue

@@ -5,6 +5,7 @@ import { authenticate, logout, checkAuthentication, setup } from "./api";
 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 IEthernet from '~icons/bi/ethernet';
 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';
@@ -17,6 +18,7 @@ const navRoutes = {
   "/firewall/forwardrules": { icon: IRule, caption: "Rules" },
   "/firewall/sourcenatrules": { icon: ISNAT, caption: "SNAT" },
   "/firewall/destinationnatrules": { icon: IDNAT, caption: "DNAT" },
+  "/network/interfaces": { icon: IEthernet, caption: "Interfaces" },
   "/object/addresses": { icon: IAddress, caption: "Addresses" },
   "/object/services": { icon: IService, caption: "Services" },
 };

client/src/pages/network/Interfaces.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { apiCall } from "../../api";
+
+let interfaces = $ref({});
+const columns = [
+  {heading: 'Name', path: 'name'},
+  {heading: 'Type', path: 'type'},
+  {heading: 'Members', path: 'members'},
+  {heading: 'Addressing Mode', path: 'addressing_mode'},
+  {heading: 'Address', path: 'address'},
+];
+
+const displayData = $computed(() => {
+  let data: any;
+  data = [];
+  for (const name in interfaces) {
+    data.push({
+      name,
+      type: interfaces[name].type,
+      addressing_mode: interfaces[name].addressing_mode,
+      address: interfaces[name].address,
+      comment: interfaces[name].comment,
+    });
+  }
+  return data;
+}); 
+
+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("Network.GetInterfaces", {});
+  if (res.Error === null) {
+    console.debug("interfaces", res.Data.Interfaces);
+    interfaces = res.Data.Interfaces;
+  } else {
+    console.debug("error", res);
+  }
+}
+
+onMounted(async() => {
+  load();
+});
+
+</script>
+
+<template>
+  <TableView title="Interfaces" :columns="columns" :load-data="load" v-model:data="displayData" :table-props="{sort:true, sortSelf: true}"/>
+</template>