From 72e5a364445c79bfc989307f6c2743e0058164b3 Mon Sep 17 00:00:00 2001 From: nfebe Date: Wed, 14 Jan 2026 21:49:56 +0100 Subject: [PATCH] feat: Add DNS management UI - Add DNS section to sidebar navigation - Add DnsZonesView for PowerDNS zone/record management - Add DnsExternalView for external DNS providers - Add API clients for PowerDNS and external DNS providers - Add DNS store for state management - Add routes for /dns/zones and /dns/external Signed-off-by: nfebe --- src/layouts/DashboardLayout.vue | 25 + src/router/index.ts | 10 + src/services/api.ts | 148 ++++ src/stores/dns.ts | 200 +++++ src/views/DnsExternalView.vue | 1082 +++++++++++++++++++++++ src/views/DnsZonesView.vue | 1428 +++++++++++++++++++++++++++++++ 6 files changed, 2893 insertions(+) create mode 100644 src/stores/dns.ts create mode 100644 src/views/DnsExternalView.vue create mode 100644 src/views/DnsZonesView.vue diff --git a/src/layouts/DashboardLayout.vue b/src/layouts/DashboardLayout.vue index c66e5fe..4edb1eb 100644 --- a/src/layouts/DashboardLayout.vue +++ b/src/layouts/DashboardLayout.vue @@ -116,6 +116,22 @@ +
+
+ + DNS + +
+
+ Zones + External Providers +
+
+
@@ -268,6 +284,7 @@ const expandedGroups = reactive({ docker: true, system: false, databases: false, + dns: false, security: false, extensions: false, admin: false, @@ -321,6 +338,8 @@ const currentPageTitle = computed(() => { databases: "Database Servers", security: "Security & Monitoring", certificates: "SSL Certificates", + "dns-zones": "DNS Zones", + "dns-external": "External DNS Providers", apps: "Installed Apps", templates: "Templates", marketplace: "App Marketplace", @@ -351,6 +370,12 @@ const breadcrumbs = computed(() => { } else if (routeName === "certificates") { crumbs.push({ label: "Security", path: "" }); crumbs.push({ label: "Certificates", path: "" }); + } else if (routeName === "dns-zones") { + crumbs.push({ label: "DNS", path: "" }); + crumbs.push({ label: "Zones", path: "" }); + } else if (routeName === "dns-external") { + crumbs.push({ label: "DNS", path: "" }); + crumbs.push({ label: "External Providers", path: "" }); } else if (["apps", "marketplace"].includes(routeName)) { crumbs.push({ label: "Apps", path: "" }); crumbs.push({ label: currentPageTitle.value, path: "" }); diff --git a/src/router/index.ts b/src/router/index.ts index 2d988c2..9b8188c 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -114,6 +114,16 @@ const routes: RouteRecordRaw[] = [ name: "cron-jobs", component: () => import("@/views/CronJobsView.vue"), }, + { + path: "dns/zones", + name: "dns-zones", + component: () => import("@/views/DnsZonesView.vue"), + }, + { + path: "dns/external", + name: "dns-external", + component: () => import("@/views/DnsExternalView.vue"), + }, ], }, ]; diff --git a/src/services/api.ts b/src/services/api.ts index b5c3794..5f6b6ff 100644 --- a/src/services/api.ts +++ b/src/services/api.ts @@ -952,3 +952,151 @@ export const schedulerApi = { params: limit ? { limit } : undefined, }), }; + +// DNS Types +export interface DNSCredentialField { + name: string; + label: string; + type: string; + required: boolean; + help_text?: string; +} + +export interface DNSProvider { + name: string; + display_name: string; + provider: string; + credentials: DNSCredentialField[]; +} + +export interface DNSZone { + id: string; + name: string; + status: string; + name_servers?: string[]; + record_count?: number; +} + +export interface DNSRecord { + id: string; + zone_id: string; + type: string; + name: string; + content: string; + ttl: number; + priority?: number; + proxied?: boolean; +} + +export interface DNSRecordCreate { + type: string; + name: string; + content: string; + ttl: number; + priority?: number; + proxied?: boolean; +} + +export interface DNSRecordUpdate { + content?: string; + ttl?: number; + priority?: number; + proxied?: boolean; +} + +export const dnsApi = { + getProviders: () => apiClient.get<{ providers: DNSProvider[] }>("/dns/providers"), + + getProviderInfo: (provider: string) => + apiClient.get<{ + name: string; + display_name: string; + provider: string; + credentials: DNSCredentialField[]; + }>(`/dns/${provider}/info`), + + validateCredentials: (provider: string, credentials: Record) => + apiClient.post<{ valid: boolean; error?: string }>(`/dns/${provider}/validate`, { credentials }), + + listZones: (provider: string, credentials: Record) => + apiClient.post<{ zones: DNSZone[] }>(`/dns/${provider}/zones`, { credentials }), + + getZone: (provider: string, zoneId: string, credentials: Record) => + apiClient.post(`/dns/${provider}/zones/${zoneId}`, { credentials }), + + listRecords: (provider: string, zoneId: string, credentials: Record) => + apiClient.post<{ records: DNSRecord[] }>(`/dns/${provider}/zones/${zoneId}/records`, { credentials }), + + createRecord: (provider: string, zoneId: string, credentials: Record, record: DNSRecordCreate) => + apiClient.post(`/dns/${provider}/zones/${zoneId}/records/create`, { + credentials, + record, + }), + + updateRecord: ( + provider: string, + zoneId: string, + recordId: string, + credentials: Record, + record: DNSRecordUpdate, + ) => + apiClient.put(`/dns/${provider}/zones/${zoneId}/records/${recordId}`, { + credentials, + record, + }), + + deleteRecord: (provider: string, zoneId: string, recordId: string, credentials: Record) => + apiClient.delete(`/dns/${provider}/zones/${zoneId}/records/${recordId}`, { + data: { credentials }, + }), +}; + +// PowerDNS Types +export interface PowerDNSZone { + id: string; + name: string; + kind: string; + serial: number; + dnssec: boolean; + rrsets?: PowerDNSRRSet[]; +} + +export interface PowerDNSRRSet { + name: string; + type: string; + ttl: number; + changetype?: "REPLACE" | "DELETE"; + records: PowerDNSRecordContent[]; +} + +export interface PowerDNSRecordContent { + content: string; + disabled: boolean; +} + +export interface PowerDNSZoneCreate { + name: string; + kind: string; + nameservers?: string[]; +} + +export const powerDnsApi = { + getStatus: () => apiClient.get<{ running: boolean; version?: string }>("/dns/powerdns/status"), + + enableService: () => apiClient.post<{ message: string }>("/dns/powerdns/enable"), + + disableService: () => apiClient.post<{ message: string }>("/dns/powerdns/disable"), + + restartService: () => apiClient.post<{ message: string }>("/dns/powerdns/restart"), + + listZones: () => apiClient.get<{ zones: PowerDNSZone[] }>("/dns/powerdns/zones"), + + getZone: (zoneId: string) => apiClient.get(`/dns/powerdns/zones/${zoneId}`), + + createZone: (zone: PowerDNSZoneCreate) => apiClient.post("/dns/powerdns/zones", zone), + + deleteZone: (zoneId: string) => apiClient.delete(`/dns/powerdns/zones/${zoneId}`), + + updateRecords: (zoneId: string, rrsets: PowerDNSRRSet[]) => + apiClient.patch(`/dns/powerdns/zones/${zoneId}`, { rrsets }), +}; diff --git a/src/stores/dns.ts b/src/stores/dns.ts new file mode 100644 index 0000000..596cdc9 --- /dev/null +++ b/src/stores/dns.ts @@ -0,0 +1,200 @@ +import { defineStore } from "pinia"; +import { ref, computed } from "vue"; +import { + dnsApi, + type DNSProvider, + type DNSZone, + type DNSRecord, + type DNSRecordCreate, + type DNSRecordUpdate, +} from "@/services/api"; + +export const useDnsStore = defineStore("dns", () => { + const providers = ref([]); + const zones = ref([]); + const records = ref([]); + const loading = ref(false); + const error = ref(""); + + const selectedProvider = ref(""); + const selectedZone = ref(null); + const credentials = ref>({}); + const credentialsValid = ref(false); + + const currentProvider = computed(() => providers.value.find((p) => p.provider === selectedProvider.value)); + + const fetchProviders = async () => { + loading.value = true; + error.value = ""; + + try { + const response = await dnsApi.getProviders(); + providers.value = response.data.providers || []; + } catch (e: any) { + error.value = e.response?.data?.error || e.message || "Failed to load providers"; + } finally { + loading.value = false; + } + }; + + const validateCredentials = async () => { + if (!selectedProvider.value) return false; + + loading.value = true; + error.value = ""; + credentialsValid.value = false; + + try { + const response = await dnsApi.validateCredentials(selectedProvider.value, credentials.value); + credentialsValid.value = response.data.valid; + if (!response.data.valid && response.data.error) { + error.value = response.data.error; + } + return response.data.valid; + } catch (e: any) { + error.value = e.response?.data?.error || e.message || "Failed to validate credentials"; + return false; + } finally { + loading.value = false; + } + }; + + const fetchZones = async () => { + if (!selectedProvider.value || !credentialsValid.value) return; + + loading.value = true; + error.value = ""; + + try { + const response = await dnsApi.listZones(selectedProvider.value, credentials.value); + zones.value = response.data.zones || []; + } catch (e: any) { + error.value = e.response?.data?.error || e.message || "Failed to load zones"; + } finally { + loading.value = false; + } + }; + + const fetchRecords = async (zoneId: string) => { + if (!selectedProvider.value || !credentialsValid.value) return; + + loading.value = true; + error.value = ""; + + try { + const response = await dnsApi.listRecords(selectedProvider.value, zoneId, credentials.value); + records.value = response.data.records || []; + } catch (e: any) { + error.value = e.response?.data?.error || e.message || "Failed to load records"; + } finally { + loading.value = false; + } + }; + + const createRecord = async (zoneId: string, record: DNSRecordCreate) => { + if (!selectedProvider.value || !credentialsValid.value) return null; + + loading.value = true; + error.value = ""; + + try { + const response = await dnsApi.createRecord(selectedProvider.value, zoneId, credentials.value, record); + await fetchRecords(zoneId); + return response.data; + } catch (e: any) { + error.value = e.response?.data?.error || e.message || "Failed to create record"; + return null; + } finally { + loading.value = false; + } + }; + + const updateRecord = async (zoneId: string, recordId: string, record: DNSRecordUpdate) => { + if (!selectedProvider.value || !credentialsValid.value) return null; + + loading.value = true; + error.value = ""; + + try { + const response = await dnsApi.updateRecord(selectedProvider.value, zoneId, recordId, credentials.value, record); + await fetchRecords(zoneId); + return response.data; + } catch (e: any) { + error.value = e.response?.data?.error || e.message || "Failed to update record"; + return null; + } finally { + loading.value = false; + } + }; + + const deleteRecord = async (zoneId: string, recordId: string) => { + if (!selectedProvider.value || !credentialsValid.value) return false; + + loading.value = true; + error.value = ""; + + try { + await dnsApi.deleteRecord(selectedProvider.value, zoneId, recordId, credentials.value); + await fetchRecords(zoneId); + return true; + } catch (e: any) { + error.value = e.response?.data?.error || e.message || "Failed to delete record"; + return false; + } finally { + loading.value = false; + } + }; + + const selectProvider = (provider: string) => { + selectedProvider.value = provider; + credentials.value = {}; + credentialsValid.value = false; + zones.value = []; + records.value = []; + selectedZone.value = null; + }; + + const selectZone = async (zone: DNSZone) => { + selectedZone.value = zone; + await fetchRecords(zone.id); + }; + + const clearZone = () => { + selectedZone.value = null; + records.value = []; + }; + + const reset = () => { + selectedProvider.value = ""; + credentials.value = {}; + credentialsValid.value = false; + zones.value = []; + records.value = []; + selectedZone.value = null; + error.value = ""; + }; + + return { + providers, + zones, + records, + loading, + error, + selectedProvider, + selectedZone, + credentials, + credentialsValid, + currentProvider, + fetchProviders, + validateCredentials, + fetchZones, + fetchRecords, + createRecord, + updateRecord, + deleteRecord, + selectProvider, + selectZone, + clearZone, + reset, + }; +}); diff --git a/src/views/DnsExternalView.vue b/src/views/DnsExternalView.vue new file mode 100644 index 0000000..57c61db --- /dev/null +++ b/src/views/DnsExternalView.vue @@ -0,0 +1,1082 @@ + + + + + diff --git a/src/views/DnsZonesView.vue b/src/views/DnsZonesView.vue new file mode 100644 index 0000000..349cdbc --- /dev/null +++ b/src/views/DnsZonesView.vue @@ -0,0 +1,1428 @@ +