@serve.zone/dcrouter 16.1.1 → 16.2.0

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

@@ -0,0 +1,352 @@
+import {
+  DeesElement,
+  css,
+  cssManager,
+  customElement,
+  html,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import * as appstate from '../../appstate.js';
+import * as interfaces from '../../../dist_ts_interfaces/index.js';
+import { viewHostCss } from '../shared/css.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;
+}
+
+@customElement('ops-view-special-forwards')
+export class OpsViewSpecialForwards extends DeesElement {
+  @state()
+  accessor routeState: appstate.IRouteManagementState = appstate.routeManagementStatePart.getState()!;
+
+  @state()
+  accessor profilesTargetsState: appstate.IProfilesTargetsState =
+    appstate.profilesTargetsStatePart.getState()!;
+
+  constructor() {
+    super();
+    this.rxSubscriptions.push(
+      appstate.routeManagementStatePart.select().subscribe((routeState) => {
+        this.routeState = routeState;
+      }),
+      appstate.profilesTargetsStatePart.select().subscribe((profilesTargetsState) => {
+        this.profilesTargetsState = profilesTargetsState;
+      }),
+    );
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      :host {
+        display: block;
+      }
+
+      .specialForwardsContainer {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+      }
+
+      .explanation {
+        padding: 14px 16px;
+        border: 1px solid var(--dees-color-border-default);
+        border-radius: 8px;
+        color: var(--dees-color-text-secondary);
+        font-size: 14px;
+        line-height: 1.5;
+      }
+
+      .explanation strong {
+        color: var(--dees-color-text-primary);
+      }
+
+      .error {
+        padding: 12px 16px;
+        border: 1px solid #ef4444;
+        border-radius: 8px;
+        color: #ef4444;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const forwards = this.routeState.mergedRoutes.filter((route) => {
+      return route.metadata?.managedRouteKind === managedRouteKind
+        && route.metadata.ownerType !== 'gatewayClient';
+    });
+
+    return html`
+      <div class="specialForwardsContainer">
+        <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
+          path, priority, protocol, and PUBLIC source profile; you choose domains and a target.
+        </div>
+
+        ${this.routeState.error
+          ? html`<div class="error">${this.routeState.error}</div>`
+          : ''}
+
+        <dees-table
+          .heading1=${'Special Forwards'}
+          .heading2=${'Server-managed routes for protocol-specific forwarding'}
+          .data=${forwards}
+          .showColumnFilters=${true}
+          .displayFunction=${(route: interfaces.data.IMergedRoute) => {
+            const target = getTarget(route);
+            return {
+              Status: route.enabled ? 'Enabled' : 'Disabled',
+              Type: 'Let\'s Encrypt HTTP-01',
+              Name: route.route.name || route.id,
+              Domains: getDomains(route).join(', '),
+              Path: route.route.match.path || '-',
+              Target: route.metadata?.networkTargetName
+                || (target ? `${target.host}:${target.port}` : '-'),
+              'Remote Ingress': route.route.remoteIngress?.enabled ? 'Enabled' : 'Disabled',
+            };
+          }}
+          .dataActions=${[
+            {
+              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',
+              type: ['inRow', 'contextmenu'] as any,
+              actionFunc: async (actionData: any) => {
+                await this.showForwardDialog(actionData.item as interfaces.data.IMergedRoute);
+              },
+            },
+            {
+              name: 'Enable / Disable',
+              iconName: 'lucide:power',
+              type: ['inRow', 'contextmenu'] as any,
+              actionFunc: async (actionData: any) => {
+                const route = actionData.item as interfaces.data.IMergedRoute;
+                await appstate.routeManagementStatePart.dispatchAction(
+                  appstate.toggleRouteAction,
+                  { id: route.id, enabled: !route.enabled },
+                );
+              },
+            },
+            {
+              name: 'Delete',
+              iconName: 'lucide:trash2',
+              type: ['inRow', 'contextmenu'] as any,
+              actionFunc: async (actionData: any) => {
+                await this.confirmDelete(actionData.item as interfaces.data.IMergedRoute);
+              },
+            },
+          ]}
+        ></dees-table>
+      </div>
+    `;
+  }
+
+  private async refreshData(): Promise<void> {
+    await Promise.all([
+      appstate.routeManagementStatePart.dispatchAction(appstate.fetchMergedRoutesAction, null),
+      appstate.profilesTargetsStatePart.dispatchAction(
+        appstate.fetchProfilesAndTargetsAction,
+        null,
+      ),
+    ]);
+  }
+
+  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})`,
+      })),
+    ];
+    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>`,
+      menuOptions: [
+        {
+          name: 'Cancel',
+          iconName: 'lucide:x',
+          action: async (modalArg: any) => modalArg.destroy(),
+        },
+        {
+          name: 'Delete',
+          iconName: 'lucide:trash2',
+          action: async (modalArg: any) => {
+            await appstate.routeManagementStatePart.dispatchAction(
+              appstate.deleteLetsEncryptHttp01ForwardAction,
+              route.id,
+            );
+            await modalArg.destroy();
+          },
+        },
+      ],
+    });
+  }
+}

package/ts_web/elements/ops-dashboard.ts

@@ -23,7 +23,6 @@ import { OpsViewConfig } from './overview/ops-view-config.js';
 // Network group
 import { OpsViewNetworkActivity } from './network/ops-view-network-activity.js';
 import { OpsViewRoutes } from './network/ops-view-routes.js';
-import { OpsViewRedirects } from './network/ops-view-redirects.js';
 import { OpsViewSourceProfiles } from './network/ops-view-sourceprofiles.js';
 import { OpsViewNetworkTargets } from './network/ops-view-networktargets.js';
 import { OpsViewTargetProfiles } from './network/ops-view-targetprofiles.js';
@@ -101,7 +100,6 @@ export class OpsDashboard extends DeesElement {
       subViews: [
         { slug: 'activity', name: 'Network Activity', iconName: 'lucide:activity', element: OpsViewNetworkActivity },
         { slug: 'routes', name: 'Routes', iconName: 'lucide:route', element: OpsViewRoutes },
-        { slug: 'redirects', name: 'Redirects', iconName: 'lucide:CornerDownRight', element: OpsViewRedirects },
         { slug: 'sourceprofiles', name: 'Source Profiles', iconName: 'lucide:shieldCheck', element: OpsViewSourceProfiles },
         { slug: 'networktargets', name: 'Network Targets', iconName: 'lucide:server', element: OpsViewNetworkTargets },
         { slug: 'targetprofiles', name: 'Target Profiles', iconName: 'lucide:target', element: OpsViewTargetProfiles },

package/ts_web/readme.md

@@ -27,6 +27,15 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
 | `security` | `overview`, `blocked`, `authentication` |
 | `domains` | `providers`, `domains`, `dns`, `certificates` |
 
+## Routes Navigation
+
+The `/network/routes` view uses two levels of tabs:
+
+- primary sections: **Standard Routes**, **Special Forwards**, and **Redirects**
+- ownership filters within Standard Routes: **All**, **Operator**, **Gateway Client**, and **System**
+
+Special Forwards create server-managed Let's Encrypt HTTP-01 routes for exact domains and a selected inline or Network Target backend. Redirects remain a derived runtime view. Tab state is stored in the `tab` and `owner` query parameters so deep links and browser history remain stable; the legacy `/network/redirects` URL is normalized to `/network/routes?tab=redirects`.
+
 ## Runtime Communication
 
 The dashboard talks to the dcrouter OpsServer through:

package/ts_web/router.ts

@@ -9,7 +9,7 @@ const flatViews = ['logs'] as const;
 // Tabbed views and their valid subviews
 const subviewMap: Record<string, readonly string[]> = {
   overview: ['stats', 'configuration'] as const,
-  network: ['activity', 'routes', 'redirects', 'sourceprofiles', 'networktargets', 'targetprofiles', 'remoteingress', 'vpn'] as const,
+  network: ['activity', 'routes', 'sourceprofiles', 'networktargets', 'targetprofiles', 'remoteingress', 'vpn'] as const,
   email: ['log', 'security', 'domains'] as const,
   access: ['gatewayclients', 'apitokens', 'users'] as const,
   security: ['overview', 'blocked', 'authentication'] as const,
@@ -102,6 +102,15 @@ class AppRouter {
   private handleInitialRoute(): void {
     const path = window.location.pathname;
 
+    if (path === '/network/redirects') {
+      const url = new URL(window.location.href);
+      url.pathname = '/network/routes';
+      url.searchParams.set('tab', 'redirects');
+      window.history.replaceState(window.history.state, '', url);
+      this.updateViewState('network', 'routes');
+      return;
+    }
+
     if (!path || path === '/') {
       this.router.pushUrl('/overview');
       return;