feat: Add DNS management UI #40

nfebe · 2026-01-14T21:01:17Z

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

sourceant · 2026-01-14T21:01:58Z

Code Review Summary

✨ This pull request introduces comprehensive DNS management capabilities, including support for external DNS providers (like Cloudflare, AWS Route 53, DigitalOcean) and a self-hosted PowerDNS server. The changes involve new navigation links, routing definitions, API interfaces, a Pinia store for external DNS, and two new Vue components for the respective DNS management UIs. The implementation generally follows good Vue practices for state and component management.

🚀 Key Improvements

Introduction of external DNS provider integration, offering flexibility.
Ability to host an authoritative DNS server with PowerDNS directly on the infrastructure.
Well-structured Pinia store (dns.ts) for managing external DNS state and interactions.
Clear separation of concerns between external and internal DNS management UIs.

💡 Minor Suggestions

Improve clarity of 'Auto' TTL value in the external DNS record form.
Add input validation for TTL values in the PowerDNS record form to prevent invalid entries.
Consider a more dynamic approach for provider icons instead of hardcoded mappings.

🚨 Critical Issues

Significant duplication of CSS styles and common UI component structures across DnsExternalView.vue and DnsZonesView.vue which impacts maintainability and consistency.

sourceant

Review complete. See the overview comment for a summary.

sourceant · 2026-01-14T21:01:59Z

src/stores/dns.ts

+    if (!selectedProvider.value || !credentialsValid.value) return null;
+
+    loading.value = true;
+    error.value = "";


It is good practice to clear previous errors at the beginning of an asynchronous action to prevent stale error messages from being displayed to the user if the new attempt fails silently or with a different error. This ensures the user always sees feedback relevant to their latest action.

Suggested change

error.value = "";

error.value = "";

sourceant · 2026-01-14T21:01:59Z

src/stores/dns.ts

+
+    loading.value = true;
+    error.value = "";
+


Similar to createRecord, clear any existing error messages before attempting an update operation to ensure the UI provides up-to-date feedback.

Suggested change

error.value = "";

sourceant · 2026-01-14T21:02:00Z

src/stores/dns.ts

+
+    loading.value = true;
+    error.value = "";
+


Ensure previous error messages are cleared before attempting a delete operation. This prevents confusion if a previous action failed and a new delete attempt is made.

Suggested change

error.value = "";

sourceant · 2026-01-14T21:02:00Z

src/views/DnsExternalView.vue

+  if (!dnsStore.selectedZone) return;
+
+  saving.value = true;
+


Clear any existing error messages from the store before attempting to save a new or updated record. This ensures that only errors pertinent to the current save operation are displayed, improving user feedback.

Suggested change

dnsStore.error = "";

saving.value = true;

sourceant · 2026-01-14T21:02:00Z

src/views/DnsZonesView.vue

+};
+
+const handleCreateZone = async () => {
+  saving.value = true;


Clear any existing error messages from the view before attempting to create a new DNS zone. This prevents displaying stale error feedback to the user.

Suggested change

saving.value = true;

error.value = "";

saving.value = true;

sourceant · 2026-01-14T21:02:00Z

src/views/DnsZonesView.vue

+const handleSaveRecord = async () => {
+  if (!selectedZone.value) return;
+
+  saving.value = true;


Clear any existing error messages from the view before attempting to save a new or updated DNS record. This prevents displaying stale error feedback to the user.

Suggested change

saving.value = true;

error.value = "";

saving.value = true;

sourceant · 2026-01-14T21:02:00Z

src/views/DnsZonesView.vue

+
+  saving.value = true;
+  error.value = "";
+
+  try {
+    const contents = recordForm.value.content
+      .split("\n")
+      .map((c) => c.trim())
+      .filter((c) => c);
+
+    const rrset: PowerDNSRRSet = {
+      name: recordForm.value.name.endsWith(".")
+        ? recordForm.value.name
+        : `${recordForm.value.name}.${selectedZone.value.name}`,
+      type: recordForm.value.type,
+      ttl: recordForm.value.ttl,
+      changetype: showEditRecordModal.value ? "REPLACE" : "REPLACE",
+      records: contents.map((content) => ({
+        content,
+        disabled: false,
+      })),
+    };


The PowerDNS API for updating records (updateRecords) expects MX and SRV record priorities to be part of the content string, not a separate field. Currently, the recordForm.priority value is captured but ignored when constructing the rrset for the API call, leading to a functional bug where priority is not applied. This correction ensures the priority is correctly formatted into the content string for these record types.

For example, an MX record content should be 10 mail.example.com, where 10 is the priority.

Suggested change

saving.value = true;

error.value = "";

try {

const contents = recordForm.value.content

.split("\n")

.map((c) => c.trim())

.filter((c) => c);

const rrset: PowerDNSRRSet = {

name: recordForm.value.name.endsWith(".")

? recordForm.value.name

: `${recordForm.value.name}.${selectedZone.value.name}`,

type: recordForm.value.type,

ttl: recordForm.value.ttl,

changetype: showEditRecordModal.value ? "REPLACE" : "REPLACE",

records: contents.map((content) => ({

content,

disabled: false,

})),

};

const formattedContents = contents.map((content) => {

if (['MX', 'SRV'].includes(recordForm.value.type) && recordForm.value.priority !== undefined && recordForm.value.priority !== null) {

return `${recordForm.value.priority} ${content}`;

}

return content;

});

const rrset: PowerDNSRRSet = {

name: recordForm.value.name.endsWith(".")

? recordForm.value.name

: `${recordForm.value.name}.${selectedZone.value.name}`,

type: recordForm.value.type,

ttl: recordForm.value.ttl,

changetype: "REPLACE",

records: formattedContents.map((content) => ({

content,

disabled: false,

})),

};

- 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 <fenn25.fn@gmail.com>

cloudflare-workers-and-pages · 2026-01-14T21:03:27Z

Deploying flatrun-ui with Cloudflare Pages

Latest commit:	`72e5a36`
Status:	✅ Deploy successful!
Preview URL:	https://e0c6f5bf.flatrun-ui.pages.dev
Branch Preview URL:	https://feat-dns-ui.flatrun-ui.pages.dev

View logs

sourceant

Review complete. See the overview comment for a summary.

sourceant · 2026-01-14T21:04:13Z

src/views/DnsExternalView.vue

+              <div class="form-group">
+                <label for="record-ttl">TTL</label>
+                <select id="record-ttl" v-model.number="recordForm.ttl">
+                  <option :value="1">Auto</option>


The value 1 for the "Auto" TTL option might be ambiguous without clear documentation or API context. Consider using 0 if it's the standard for "automatic" TTL or providing a more descriptive label to clarify what "Auto" means in this context (e.g., "Managed by Provider"). Ensure the backend API correctly interprets this 'Auto' value.

Suggested change

<option :value="1">Auto</option>

<option :value="0">Auto (Managed by Provider)</option>

sourceant bot approved these changes Jan 14, 2026

View reviewed changes

nfebe force-pushed the feat/dns-ui branch from 993e76b to 72e5a36 Compare January 14, 2026 21:03

sourceant bot approved these changes Jan 14, 2026

View reviewed changes

flatrun deleted a comment from openhands-ai bot Jan 14, 2026

	<option :value="1">Auto</option>
	<option :value="0">Auto (Managed by Provider)</option>

feat: Add DNS management UI #40

Are you sure you want to change the base?

feat: Add DNS management UI #40

Uh oh!

Conversation

nfebe commented Jan 14, 2026

Uh oh!

sourceant bot commented Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Summary

🚀 Key Improvements

💡 Minor Suggestions

🚨 Critical Issues

Uh oh!

sourceant bot left a comment

Choose a reason for hiding this comment

Uh oh!

sourceant bot Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

sourceant bot Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

sourceant bot Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

sourceant bot Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

sourceant bot Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

sourceant bot Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

sourceant bot Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

cloudflare-workers-and-pages bot commented Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying flatrun-ui with Cloudflare Pages

Uh oh!

sourceant bot left a comment

Choose a reason for hiding this comment

Uh oh!

sourceant bot Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sourceant bot commented Jan 14, 2026 •

edited

Loading

cloudflare-workers-and-pages bot commented Jan 14, 2026 •

edited

Loading