Add DNs Server Frontend

client/src/App.vue

@@ -11,6 +11,7 @@ import ISNAT from '~icons/mdi/arrow-expand-right';
 import IDNAT from '~icons/mdi/arrow-collapse-right';
 import IConfig from '~icons/grommet-icons/document-config';
 import IStaticRoutes from '~icons/material-symbols/drive-folder-upload-outline-sharp';
+import IDNSServer from '~icons/carbon/server-dns';
 import ITimeServer from '~icons/carbon/server-time';
 
 enum NavState { Open, Reduced, Collapsed };
@@ -26,6 +27,7 @@ const navRoutes = {
   "/object/addresses": { icon: IAddress, caption: "Addresses" },
   "/object/services": { icon: IService, caption: "Services" },
   "/service/dhcpv4servers": { icon: IService, caption: "DHCP v4" },
+  "/service/dnsservers": { icon: IDNSServer, caption: "DNS Server" },
   "/service/ntpservers": { icon: ITimeServer, caption: "NTP Server" },
   "/config/config": { icon: IConfig, caption: "Config" },
 };

client/src/definitions.ts

@@ -192,5 +192,20 @@ export const editTypes: { [key: string]: { [key: string]: any } } = {
         },
       ],
     },
+    "dnsservers": {
+      name: "DNSServer",
+      validationSchema: toFormValidator(
+        zod.object({
+        }),
+      ),
+      sections: [
+        {
+          fields: [
+            { key: "interface", label: "Interface", as: "SingleSelect", props: { searchProvider: GetInterfaces } },
+            { key: "comment", label: "Comment", as: "MultilineTextBox" },
+          ],
+        },
+      ],
+    },
   },
 };

client/src/pages/service/DNSServers.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { apiCall } from "../../api";
+import getPlugins from '../../plugins';
+const p = getPlugins();
+
+let servers = $ref([]);
+let loading = $ref(false);
+let selection = $ref([] as number[]);
+
+const columns = [
+  {heading: 'Interface', path: 'interface'},
+  {heading: 'Comment', path: 'comment'},
+];
+
+async function load(){
+  let res = await apiCall("Service.GetDNSServers", {});
+  if (res.Error === null) {
+    servers = res.Data.dns_servers;
+    console.debug("rules", servers);
+  } else {
+    console.debug("error", res);
+  }
+}
+
+async function deleteRule(){
+  let res = await apiCall("Service.DeleteDNSServer", {index: selection[0]});
+  if (res.Error === null) {
+    console.debug("deleted server");
+    p.toast.success("Deleted DNS Server");
+  } else {
+    console.debug("error", res);
+  }
+  load();
+}
+
+onMounted(async() => {
+  load();
+});
+
+</script>
+
+<template>
+  <div>
+    <TableView title="DNS Servers" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="servers" :table-props="{sort:true, sortSelf: true}">
+      <button @click="load">Refresh</button>
+      <router-link class="button" to="/service/dnsservers/edit">Create</router-link>
+      <router-link class="button" :class="{ disabled: selection.length != 1 }" :to="'/service/dnsservers/edit/' + selection[0]">Edit</router-link>
+      <button @click="deleteRule" :disabled="selection.length != 1">Delete</button>
+    </TableView>
+  </div>
+</template>