fix(web): use dees-table for gateway domains and DNS records views

changelog.md

@@ -2,6 +2,13 @@
 
 ## Pending
 
+### Fixes
+
+- use `dees-table` for gateway domains and DNS records views (web)
+  - replace custom row grids with catalog tables, filtering, refresh, and row actions
+- use dees-table for gateway domains and DNS records views (web)
+  - replace custom row layouts with dees-table in gateway domains and DNS records views
+  - add table filtering, refresh actions, and row/context actions for dcrouter management
 
 ## 2026-05-20 - 1.26.2
 

ts_web/elements/ob-view-dns-records.ts

@@ -1,4 +1,5 @@
 import * as shared from './shared/index.js';
+import * as plugins from '../plugins.js';
 import * as appstate from '../appstate.js';
 import { appRouter } from '../router.js';
 import {
@@ -11,6 +12,8 @@ import {
   type TemplateResult,
 } from '@design.estate/dees-element';
 
+type TGatewayDnsRecord = appstate.INetworkState['gatewayDnsRecords'][number];
+
 @customElement('ob-view-dns-records')
 export class ObViewDnsRecords extends DeesElement {
   @state()
@@ -37,16 +40,11 @@ export class ObViewDnsRecords extends DeesElement {
     cssManager.defaultStyles,
     shared.viewHostCss,
     css`
-      .table { border: 1px solid var(--ci-shade-2, #e4e4e7); border-radius: 10px; overflow: hidden; }
-      .row { display: grid; grid-template-columns: 2fr 90px 2fr 90px 140px 220px; gap: 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--ci-shade-2, #e4e4e7); }
-      .row:last-child { border-bottom: none; }
-      .header { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--ci-shade-5, #71717a); background: var(--ci-shade-1, #f4f4f5); }
       .name { font-weight: 600; }
       .value { font-family: monospace; color: var(--ci-shade-5, #71717a); overflow-wrap: anywhere; }
+      .muted { color: var(--ci-shade-5, #71717a); font-size: 13px; }
       .badge { border-radius: 999px; padding: 3px 8px; background: var(--ci-shade-1, #f4f4f5); font-size: 12px; }
       .missing { color: #dc2626; }
-      a, button.link { color: var(--ci-primary, #2563eb); background: none; border: none; padding: 0; cursor: pointer; font: inherit; text-decoration: none; }
-      .actions { display: flex; gap: 12px; }
       .empty { padding: 32px; text-align: center; color: var(--ci-shade-5, #71717a); }
     `,
   ];
@@ -60,29 +58,60 @@ export class ObViewDnsRecords extends DeesElement {
     const records = this.networkState.gatewayDnsRecords;
     return html`
       <ob-sectionheading>DNS Records</ob-sectionheading>
-      <div class="table">
-        <div class="row header">
-          <span>Name</span>
-          <span>Type</span>
-          <span>Value</span>
-          <span>Status</span>
-          <span>Service</span>
-          <span>Actions</span>
-        </div>
-        ${records.length ? records.map((record) => html`
-          <div class="row ${record.status === 'missing' ? 'missing' : ''}">
-            <span class="name">${record.name}</span>
-            <span><span class="badge">${record.type}</span></span>
-            <span class="value">${record.value || '-'}</span>
-            <span>${record.status}</span>
-            <span>${record.serviceName || record.appId}</span>
-            <span class="actions">
-              <button class="link" @click=${() => appRouter.navigateToView('services')}>View service</button>
-              ${record.manageUrl ? html`<a href=${record.manageUrl} target="_blank" rel="noopener">Manage in dcrouter</a>` : ''}
-            </span>
-          </div>
-        `) : html`<div class="empty">No gateway DNS records found. Configure a dcrouter gateway in Settings.</div>`}
-      </div>
+      ${records.length
+        ? html`
+            <dees-table
+              .heading1=${'Gateway DNS Records'}
+              .heading2=${'DNS records published through dcrouter for Onebox services'}
+              .data=${records}
+              .showColumnFilters=${true}
+              .displayFunction=${(record: TGatewayDnsRecord) => ({
+                Name: html`
+                  <div>
+                    <div class="name">${record.name}</div>
+                    ${record.domainName ? html`<div class="muted">${record.domainName}</div>` : ''}
+                  </div>
+                `,
+                Type: html`<span class="badge">${record.type}</span>`,
+                Value: html`<span class="value">${record.value || '-'}</span>`,
+                Status: html`<span class=${record.status === 'missing' ? 'missing' : ''}>${record.status}</span>`,
+                Service: record.serviceName || record.appId || '-',
+              })}
+              .dataActions=${[
+                {
+                  name: 'Refresh',
+                  iconName: 'lucide:rotateCw',
+                  type: ['header'],
+                  actionFunc: async () => {
+                    await appstate.networkStatePart.dispatchAction(
+                      appstate.fetchGatewayDnsRecordsAction,
+                      null,
+                    );
+                  },
+                },
+                {
+                  name: 'View service',
+                  iconName: 'lucide:boxes',
+                  type: ['inRow', 'contextmenu'],
+                  actionFunc: async () => {
+                    appRouter.navigateToView('services');
+                  },
+                },
+                {
+                  name: 'Manage in dcrouter',
+                  iconName: 'lucide:externalLink',
+                  type: ['inRow', 'contextmenu'],
+                  actionRelevancyCheckFunc: (record: TGatewayDnsRecord) => !!record.manageUrl,
+                  actionFunc: async (actionData: plugins.deesCatalog.ITableActionDataArg<TGatewayDnsRecord>) => {
+                    if (actionData.item.manageUrl) {
+                      globalThis.open(actionData.item.manageUrl, '_blank', 'noopener');
+                    }
+                  },
+                },
+              ] as plugins.deesCatalog.ITableAction<TGatewayDnsRecord>[]}
+            ></dees-table>
+          `
+        : html`<div class="empty">No gateway DNS records found. Configure a dcrouter gateway in Settings.</div>`}
     `;
   }
 }

ts_web/elements/ob-view-domains.ts

@@ -1,4 +1,5 @@
 import * as shared from './shared/index.js';
+import * as plugins from '../plugins.js';
 import * as appstate from '../appstate.js';
 import {
   DeesElement,
@@ -10,6 +11,8 @@ import {
   type TemplateResult,
 } from '@design.estate/dees-element';
 
+type TGatewayDomain = appstate.INetworkState['gatewayDomains'][number];
+
 @customElement('ob-view-domains')
 export class ObViewDomains extends DeesElement {
   @state()
@@ -36,25 +39,9 @@ export class ObViewDomains extends DeesElement {
     cssManager.defaultStyles,
     shared.viewHostCss,
     css`
-      .table {
-        border: 1px solid var(--ci-shade-2, #e4e4e7);
-        border-radius: 10px;
-        overflow: hidden;
-      }
-      .row {
-        display: grid;
-        grid-template-columns: 2fr 1fr 120px 120px 140px;
-        gap: 16px;
-        align-items: center;
-        padding: 14px 16px;
-        border-bottom: 1px solid var(--ci-shade-2, #e4e4e7);
-      }
-      .row:last-child { border-bottom: none; }
-      .header { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--ci-shade-5, #71717a); background: var(--ci-shade-1, #f4f4f5); }
       .domain { font-weight: 600; }
       .muted { color: var(--ci-shade-5, #71717a); font-size: 13px; }
       .badge { border-radius: 999px; padding: 3px 8px; background: var(--ci-shade-1, #f4f4f5); font-size: 12px; }
-      a { color: var(--ci-primary, #2563eb); text-decoration: none; }
       .empty { padding: 32px; text-align: center; color: var(--ci-shade-5, #71717a); }
     `,
   ];
@@ -71,27 +58,51 @@ export class ObViewDomains extends DeesElement {
       <div class="muted" style="margin-bottom: 16px;">
         Domains are managed in dcrouter. Onebox shows gateway visibility for deployed services.
       </div>
-      <div class="table">
-        <div class="row header">
-          <span>Domain</span>
-          <span>Source</span>
-          <span>Authoritative</span>
-          <span>Services</span>
-          <span>Actions</span>
-        </div>
-        ${domains.length ? domains.map((domain) => html`
-          <div class="row">
-            <span>
-              <span class="domain">${domain.name}</span>
-              ${domain.providerId ? html`<div class="muted">Provider: ${domain.providerId}</div>` : ''}
-            </span>
-            <span><span class="badge">${domain.source || 'dcrouter'}</span></span>
-            <span>${domain.authoritative ? 'Yes' : 'No'}</span>
-            <span>${domain.serviceCount || 0}</span>
-            <span>${domain.manageUrl ? html`<a href=${domain.manageUrl} target="_blank" rel="noopener">Manage in dcrouter</a>` : '-'}</span>
-          </div>
-        `) : html`<div class="empty">No gateway domains found. Configure a dcrouter gateway in Settings.</div>`}
-      </div>
+      ${domains.length
+        ? html`
+            <dees-table
+              .heading1=${'Gateway Domains'}
+              .heading2=${'Domains imported from dcrouter gateway visibility'}
+              .data=${domains}
+              .showColumnFilters=${true}
+              .displayFunction=${(domain: TGatewayDomain) => ({
+                Domain: html`
+                  <div>
+                    <div class="domain">${domain.name}</div>
+                    ${domain.providerId ? html`<div class="muted">Provider: ${domain.providerId}</div>` : ''}
+                  </div>
+                `,
+                Source: html`<span class="badge">${domain.source || 'dcrouter'}</span>`,
+                Authoritative: domain.authoritative ? 'Yes' : 'No',
+                Services: domain.serviceCount || 0,
+              })}
+              .dataActions=${[
+                {
+                  name: 'Refresh',
+                  iconName: 'lucide:rotateCw',
+                  type: ['header'],
+                  actionFunc: async () => {
+                    await appstate.networkStatePart.dispatchAction(
+                      appstate.fetchGatewayDomainsAction,
+                      null,
+                    );
+                  },
+                },
+                {
+                  name: 'Manage in dcrouter',
+                  iconName: 'lucide:externalLink',
+                  type: ['inRow', 'contextmenu'],
+                  actionRelevancyCheckFunc: (domain: TGatewayDomain) => !!domain.manageUrl,
+                  actionFunc: async (actionData: plugins.deesCatalog.ITableActionDataArg<TGatewayDomain>) => {
+                    if (actionData.item.manageUrl) {
+                      globalThis.open(actionData.item.manageUrl, '_blank', 'noopener');
+                    }
+                  },
+                },
+              ] as plugins.deesCatalog.ITableAction<TGatewayDomain>[]}
+            ></dees-table>
+          `
+        : html`<div class="empty">No gateway domains found. Configure a dcrouter gateway in Settings.</div>`}
     `;
   }
 }