@serve.zone/dcrouter 16.3.0 → 16.4.0

package/ts_web/elements/network/ops-view-special-forwards.ts

@@ -8,6 +8,7 @@ import {
   state,
   type TemplateResult,
 } from '@design.estate/dees-element';
+import { type IStatsTile } from '@design.estate/dees-catalog';
 import * as appstate from '../../appstate.js';
 import * as interfaces from '../../../dist_ts_interfaces/index.js';
 import { viewHostCss } from '../shared/css.js';
@@ -16,36 +17,18 @@ import {
   routeMatchesOwner,
   type TRouteOwnerFilter,
 } from './route-view-filters.js';
-
-const managedRouteKind = 'letsencrypt-http01-forward' as const;
-
-function getDropdownKey(value: unknown): string {
-  return typeof value === 'string'
-    ? value
-    : value && typeof value === 'object' && 'key' in value
-      ? String((value as { key: unknown }).key)
-      : '';
-}
-
-function getDomains(route: interfaces.data.IMergedRoute): string[] {
-  const domains = route.route.match.domains;
-  if (!domains) return [];
-  return Array.isArray(domains) ? domains : [domains];
-}
-
-function getTarget(route: interfaces.data.IMergedRoute): { host: string; port: number } | undefined {
-  const target = route.route.action.targets?.[0];
-  if (!target || typeof target.port !== 'number') return undefined;
-  const host = typeof target.host === 'string'
-    ? target.host
-    : Array.isArray(target.host)
-      ? target.host[0]
-      : undefined;
-  return host ? { host, port: target.port } : undefined;
-}
+import {
+  getSpecialForwardDomains,
+  getSpecialForwardTarget,
+  letsEncryptHttp01ManagedRouteKind,
+  showLetsEncryptHttp01ForwardDialog,
+} from './special-forward-dialog.js';
 
 @customElement('ops-view-special-forwards')
 export class OpsViewSpecialForwards extends DeesElement {
+  @property({ type: Boolean, reflect: true })
+  accessor embedded = false;
+
   @property({ type: String })
   accessor ownerFilter: TRouteOwnerFilter = 'all';
 
@@ -76,6 +59,12 @@ export class OpsViewSpecialForwards extends DeesElement {
         display: block;
       }
 
+      :host([embedded]) {
+        margin: 0;
+        max-width: none;
+        padding: 0;
+      }
+
       .specialForwardsContainer {
         display: flex;
         flex-direction: column;
@@ -106,12 +95,62 @@ export class OpsViewSpecialForwards extends DeesElement {
 
   public render(): TemplateResult {
     const forwards = this.routeState.mergedRoutes.filter((route) => {
-      return route.metadata?.managedRouteKind === managedRouteKind
+      return route.metadata?.managedRouteKind === letsEncryptHttp01ManagedRouteKind
         && routeMatchesOwner(route, this.ownerFilter);
     });
+    const enabledCount = forwards.filter((route) => route.enabled).length;
+    const disabledCount = forwards.length - enabledCount;
+    const readOnlyCount = forwards.filter((route) => getRouteOwner(route) !== 'operator').length;
+    const statsTiles: IStatsTile[] = [
+      {
+        id: 'matchingSpecialForwards',
+        title: 'Matching',
+        type: 'number',
+        value: forwards.length,
+        icon: 'lucide:route',
+        description: 'HTTP-01 forwards in this owner scope',
+        color: '#3b82f6',
+      },
+      {
+        id: 'enabledSpecialForwards',
+        title: 'Enabled',
+        type: 'number',
+        value: enabledCount,
+        icon: 'lucide:circleCheck',
+        description: 'Currently forwarding challenges',
+        color: '#22c55e',
+      },
+      {
+        id: 'disabledSpecialForwards',
+        title: 'Disabled',
+        type: 'number',
+        value: disabledCount,
+        icon: 'lucide:circlePause',
+        description: 'Configured but inactive',
+        color: disabledCount > 0 ? '#f59e0b' : '#6b7280',
+      },
+      {
+        id: 'readOnlySpecialForwards',
+        title: 'Read-only',
+        type: 'number',
+        value: readOnlyCount,
+        icon: 'lucide:lockKeyhole',
+        description: 'Managed by gateway clients or system',
+        color: '#8b5cf6',
+      },
+    ];
 
     return html`
+      ${this.embedded ? '' : html`<dees-heading level="3">Special Forwards</dees-heading>`}
       <div class="specialForwardsContainer">
+        ${this.embedded
+          ? ''
+          : html`
+              <dees-statsgrid
+                .tiles=${statsTiles}
+                .gridActions=${this.getHeaderActions()}
+              ></dees-statsgrid>
+            `}
         <div class="explanation">
           <strong>Let's Encrypt HTTP-01 Forward</strong> exposes only
           <code>/.well-known/acme-challenge/*</code> on public port 80. DCRouter manages the
@@ -128,7 +167,7 @@ export class OpsViewSpecialForwards extends DeesElement {
           .data=${forwards}
           .showColumnFilters=${true}
           .displayFunction=${(route: interfaces.data.IMergedRoute) => {
-            const target = getTarget(route);
+            const target = getSpecialForwardTarget(route);
             const owner = getRouteOwner(route);
             return {
               Status: route.enabled ? 'Enabled' : 'Disabled',
@@ -139,7 +178,7 @@ export class OpsViewSpecialForwards extends DeesElement {
                   ? 'Gateway Client'
                   : 'System',
               Name: route.route.name || route.id,
-              Domains: getDomains(route).join(', '),
+              Domains: getSpecialForwardDomains(route).join(', '),
               Path: route.route.match.path || '-',
               Target: route.metadata?.networkTargetName
                 || (target ? `${target.host}:${target.port}` : '-'),
@@ -147,22 +186,6 @@ export class OpsViewSpecialForwards extends DeesElement {
             };
           }}
           .dataActions=${[
-            ...(this.ownerFilter === 'all' || this.ownerFilter === 'operator'
-              ? [
-                  {
-                    name: 'Add HTTP-01 Forward',
-                    iconName: 'lucide:plus',
-                    type: ['header' as const],
-                    actionFunc: async () => this.showForwardDialog(),
-                  },
-                ]
-              : []),
-            {
-              name: 'Refresh',
-              iconName: 'lucide:refreshCw',
-              type: ['header' as const],
-              actionFunc: async () => this.refreshData(),
-            },
             {
               name: 'Edit',
               iconName: 'lucide:pencil',
@@ -171,7 +194,10 @@ export class OpsViewSpecialForwards extends DeesElement {
                 return getRouteOwner(route) === 'operator';
               },
               actionFunc: async (actionData: any) => {
-                await this.showForwardDialog(actionData.item as interfaces.data.IMergedRoute);
+                await showLetsEncryptHttp01ForwardDialog({
+                  existing: actionData.item as interfaces.data.IMergedRoute,
+                  targets: this.profilesTargetsState.targets,
+                });
               },
             },
             {
@@ -216,147 +242,30 @@ export class OpsViewSpecialForwards extends DeesElement {
     ]);
   }
 
-  private async showForwardDialog(existing?: interfaces.data.IMergedRoute): Promise<void> {
-    const { DeesModal } = await import('@design.estate/dees-catalog');
-    const target = existing ? getTarget(existing) : undefined;
-    const targetOptions = [
-      { key: '', option: '(none — inline target)' },
-      ...this.profilesTargetsState.targets.map((networkTarget) => ({
-        key: networkTarget.id,
-        option: `${networkTarget.name} (${
-          Array.isArray(networkTarget.host) ? networkTarget.host.join(', ') : networkTarget.host
-        }:${networkTarget.port})`,
-      })),
+  private getHeaderActions() {
+    return [
+      ...(this.ownerFilter === 'all' || this.ownerFilter === 'operator'
+        ? [{
+            name: 'Add User Special Forward',
+            iconName: 'lucide:plus',
+            action: async () => showLetsEncryptHttp01ForwardDialog({
+              targets: this.profilesTargetsState.targets,
+            }),
+          }]
+        : []),
+      {
+        name: 'Refresh',
+        iconName: 'lucide:refreshCw',
+        action: async () => this.refreshData(),
+      },
     ];
-    const selectedTarget = targetOptions.find((option) => {
-      return option.key === (existing?.metadata?.networkTargetRef || '');
-    }) || targetOptions[0];
-
-    await DeesModal.createAndShow({
-      heading: existing
-        ? `Edit HTTP-01 Forward: ${existing.route.name || existing.id}`
-        : 'Add Let\'s Encrypt HTTP-01 Forward',
-      content: html`
-        <dees-form>
-          <dees-input-text
-            .key=${'name'}
-            .label=${'Name'}
-            .value=${existing?.route.name || ''}
-            .required=${true}
-          ></dees-input-text>
-          <dees-input-list
-            .key=${'domains'}
-            .label=${'Domains'}
-            .description=${'Exact public hostnames; HTTP-01 does not support wildcards'}
-            .placeholder=${'Add domain...'}
-            .value=${existing ? getDomains(existing) : []}
-          ></dees-input-list>
-          <dees-input-dropdown
-            .key=${'networkTargetRef'}
-            .label=${'Network Target'}
-            .options=${targetOptions}
-            .selectedOption=${selectedTarget}
-          ></dees-input-dropdown>
-          <dees-input-text
-            .key=${'targetHost'}
-            .label=${'Inline Target Host'}
-            .description=${'Used only when no Network Target is selected'}
-            .value=${target?.host || ''}
-          ></dees-input-text>
-          <dees-input-text
-            .key=${'targetPort'}
-            .label=${'Inline Target Port'}
-            .description=${'Usually port 80 on the ACME responder'}
-            .value=${target ? String(target.port) : '80'}
-          ></dees-input-text>
-          <dees-input-checkbox
-            .key=${'remoteIngressEnabled'}
-            .label=${'Enable Remote Ingress'}
-            .value=${existing?.route.remoteIngress?.enabled === true}
-          ></dees-input-checkbox>
-          <dees-input-list
-            .key=${'remoteIngressEdgeFilter'}
-            .label=${'Remote Ingress Edge Filter'}
-            .description=${'Optional edge IDs or tags; leave empty for all edges'}
-            .placeholder=${'Add edge ID or tag...'}
-            .value=${existing?.route.remoteIngress?.edgeFilter || []}
-          ></dees-input-list>
-        </dees-form>
-      `,
-      menuOptions: [
-        {
-          name: 'Cancel',
-          iconName: 'lucide:x',
-          action: async (modalArg: any) => modalArg.destroy(),
-        },
-        {
-          name: existing ? 'Save' : 'Create',
-          iconName: existing ? 'lucide:check' : 'lucide:plus',
-          action: async (modalArg: any) => {
-            const form = modalArg.shadowRoot?.querySelector('.content')?.querySelector('dees-form');
-            if (!form) return;
-            const data = await form.collectFormData();
-            const name = String(data.name || '').trim();
-            const domains = Array.isArray(data.domains)
-              ? data.domains.map((domain: unknown) => String(domain).trim()).filter(Boolean)
-              : [];
-            const networkTargetRef = getDropdownKey(data.networkTargetRef).trim();
-            const targetHost = String(data.targetHost || '').trim();
-            const targetPort = Number.parseInt(String(data.targetPort || ''), 10);
-            if (!name || domains.length === 0) {
-              alert('Name and at least one domain are required.');
-              return;
-            }
-            if (
-              !networkTargetRef
-              && (!targetHost || !Number.isInteger(targetPort) || targetPort < 1 || targetPort > 65535)
-            ) {
-              alert('A valid inline target host and port are required.');
-              return;
-            }
-
-            const edgeFilter = Array.isArray(data.remoteIngressEdgeFilter)
-              ? data.remoteIngressEdgeFilter.map((entry: unknown) => String(entry).trim()).filter(Boolean)
-              : [];
-            const config: interfaces.data.ILetsEncryptHttp01ForwardConfig = {
-              name,
-              domains,
-              ...(networkTargetRef
-                ? { networkTargetRef }
-                : { target: { host: targetHost, port: targetPort } }),
-              ...(data.remoteIngressEnabled
-                ? {
-                    remoteIngress: {
-                      enabled: true,
-                      ...(edgeFilter.length ? { edgeFilter } : {}),
-                    },
-                  }
-                : {}),
-            };
-
-            if (existing) {
-              await appstate.routeManagementStatePart.dispatchAction(
-                appstate.updateLetsEncryptHttp01ForwardAction,
-                { id: existing.id, config, enabled: existing.enabled },
-              );
-            } else {
-              await appstate.routeManagementStatePart.dispatchAction(
-                appstate.createLetsEncryptHttp01ForwardAction,
-                { config },
-              );
-            }
-            await modalArg.destroy();
-          },
-        },
-      ],
-    });
   }
 
   private async confirmDelete(route: interfaces.data.IMergedRoute): Promise<void> {
     const { DeesModal } = await import('@design.estate/dees-catalog');
     await DeesModal.createAndShow({
       heading: `Delete Special Forward: ${route.route.name || route.id}`,
-      content: html`<p>This removes the managed HTTP-01 route for ${getDomains(route).join(', ')}.</p>`,
+      content: html`<p>This removes the managed HTTP-01 route for ${getSpecialForwardDomains(route).join(', ')}.</p>`,
       menuOptions: [
         {
           name: 'Cancel',

package/ts_web/elements/network/special-forward-dialog.ts

@@ -0,0 +1,174 @@
+import { html } from '@design.estate/dees-element';
+import * as appstate from '../../appstate.js';
+import * as interfaces from '../../../dist_ts_interfaces/index.js';
+
+export const letsEncryptHttp01ManagedRouteKind = 'letsencrypt-http01-forward' as const;
+
+export function getSpecialForwardDomains(
+  route: interfaces.data.IMergedRoute,
+): string[] {
+  const domains = route.route.match.domains;
+  if (!domains) return [];
+  return Array.isArray(domains) ? domains : [domains];
+}
+
+export function getSpecialForwardTarget(
+  route: interfaces.data.IMergedRoute,
+): { host: string; port: number } | undefined {
+  const target = route.route.action.targets?.[0];
+  if (!target || typeof target.port !== 'number') return undefined;
+  const host = typeof target.host === 'string'
+    ? target.host
+    : Array.isArray(target.host)
+      ? target.host[0]
+      : undefined;
+  return host ? { host, port: target.port } : undefined;
+}
+
+function getDropdownKey(value: unknown): string {
+  return typeof value === 'string'
+    ? value
+    : value && typeof value === 'object' && 'key' in value
+      ? String((value as { key: unknown }).key)
+      : '';
+}
+
+export async function showLetsEncryptHttp01ForwardDialog(options: {
+  existing?: interfaces.data.IMergedRoute;
+  targets: interfaces.data.INetworkTarget[];
+}): Promise<void> {
+  const { DeesModal } = await import('@design.estate/dees-catalog');
+  const { existing, targets } = options;
+  const target = existing ? getSpecialForwardTarget(existing) : undefined;
+  const targetOptions = [
+    { key: '', option: '(none — inline target)' },
+    ...targets.map((networkTarget) => ({
+      key: networkTarget.id,
+      option: `${networkTarget.name} (${
+        Array.isArray(networkTarget.host) ? networkTarget.host.join(', ') : networkTarget.host
+      }:${networkTarget.port})`,
+    })),
+  ];
+  const selectedTarget = targetOptions.find((option) => {
+    return option.key === (existing?.metadata?.networkTargetRef || '');
+  }) || targetOptions[0];
+
+  await DeesModal.createAndShow({
+    heading: existing
+      ? `Edit User HTTP-01 Forward: ${existing.route.name || existing.id}`
+      : 'Add User Let\'s Encrypt HTTP-01 Forward',
+    content: html`
+      <dees-form>
+        <dees-input-text
+          .key=${'name'}
+          .label=${'Name'}
+          .value=${existing?.route.name || ''}
+          .required=${true}
+        ></dees-input-text>
+        <dees-input-list
+          .key=${'domains'}
+          .label=${'Domains'}
+          .description=${'Exact public hostnames; HTTP-01 does not support wildcards'}
+          .placeholder=${'Add domain...'}
+          .value=${existing ? getSpecialForwardDomains(existing) : []}
+        ></dees-input-list>
+        <dees-input-dropdown
+          .key=${'networkTargetRef'}
+          .label=${'Network Target'}
+          .options=${targetOptions}
+          .selectedOption=${selectedTarget}
+        ></dees-input-dropdown>
+        <dees-input-text
+          .key=${'targetHost'}
+          .label=${'Inline Target Host'}
+          .description=${'Used only when no Network Target is selected'}
+          .value=${target?.host || ''}
+        ></dees-input-text>
+        <dees-input-text
+          .key=${'targetPort'}
+          .label=${'Inline Target Port'}
+          .description=${'Usually port 80 on the ACME responder'}
+          .value=${target ? String(target.port) : '80'}
+        ></dees-input-text>
+        <dees-input-checkbox
+          .key=${'remoteIngressEnabled'}
+          .label=${'Enable Remote Ingress'}
+          .value=${existing?.route.remoteIngress?.enabled === true}
+        ></dees-input-checkbox>
+        <dees-input-list
+          .key=${'remoteIngressEdgeFilter'}
+          .label=${'Remote Ingress Edge Filter'}
+          .description=${'Optional edge IDs or tags; leave empty for all edges'}
+          .placeholder=${'Add edge ID or tag...'}
+          .value=${existing?.route.remoteIngress?.edgeFilter || []}
+        ></dees-input-list>
+      </dees-form>
+    `,
+    menuOptions: [
+      {
+        name: 'Cancel',
+        iconName: 'lucide:x',
+        action: async (modalArg: any) => modalArg.destroy(),
+      },
+      {
+        name: existing ? 'Save' : 'Create',
+        iconName: existing ? 'lucide:check' : 'lucide:plus',
+        action: async (modalArg: any) => {
+          const form = modalArg.shadowRoot?.querySelector('.content')?.querySelector('dees-form');
+          if (!form) return;
+          const data = await form.collectFormData();
+          const name = String(data.name || '').trim();
+          const domains = Array.isArray(data.domains)
+            ? data.domains.map((domain: unknown) => String(domain).trim()).filter(Boolean)
+            : [];
+          const networkTargetRef = getDropdownKey(data.networkTargetRef).trim();
+          const targetHost = String(data.targetHost || '').trim();
+          const targetPort = Number.parseInt(String(data.targetPort || ''), 10);
+          if (!name || domains.length === 0) {
+            alert('Name and at least one domain are required.');
+            return;
+          }
+          if (
+            !networkTargetRef
+            && (!targetHost || !Number.isInteger(targetPort) || targetPort < 1 || targetPort > 65535)
+          ) {
+            alert('A valid inline target host and port are required.');
+            return;
+          }
+
+          const edgeFilter = Array.isArray(data.remoteIngressEdgeFilter)
+            ? data.remoteIngressEdgeFilter.map((entry: unknown) => String(entry).trim()).filter(Boolean)
+            : [];
+          const config: interfaces.data.ILetsEncryptHttp01ForwardConfig = {
+            name,
+            domains,
+            ...(networkTargetRef
+              ? { networkTargetRef }
+              : { target: { host: targetHost, port: targetPort } }),
+            ...(data.remoteIngressEnabled
+              ? {
+                  remoteIngress: {
+                    enabled: true,
+                    ...(edgeFilter.length ? { edgeFilter } : {}),
+                  },
+                }
+              : {}),
+          };
+
+          if (existing) {
+            await appstate.routeManagementStatePart.dispatchAction(
+              appstate.updateLetsEncryptHttp01ForwardAction,
+              { id: existing.id, config, enabled: existing.enabled },
+            );
+          } else {
+            await appstate.routeManagementStatePart.dispatchAction(
+              appstate.createLetsEncryptHttp01ForwardAction,
+              { config },
+            );
+          }
+          await modalArg.destroy();
+        },
+      },
+    ],
+  });
+}