@serve.zone/dcrouter 13.19.0 → 13.20.0

package/ts_web/elements/network/ops-view-routes.ts

@@ -15,16 +15,90 @@ import {
 
 // TLS dropdown options shared by create and edit dialogs
 const tlsModeOptions = [
-  { key: 'none', option: '(none — no TLS)' },
-  { key: 'passthrough', option: 'Passthrough' },
-  { key: 'terminate', option: 'Terminate' },
-  { key: 'terminate-and-reencrypt', option: 'Terminate & Re-encrypt' },
+  { key: 'none', option: '(none — plain TCP/HTTP, use for SSH)' },
+  { key: 'passthrough', option: 'Passthrough (TLS only)' },
+  { key: 'terminate', option: 'Terminate TLS' },
+  { key: 'terminate-and-reencrypt', option: 'Terminate & Re-encrypt TLS' },
 ];
 const tlsCertOptions = [
   { key: 'auto', option: 'Auto (ACME/Let\'s Encrypt)' },
   { key: 'custom', option: 'Custom certificate' },
 ];
 
+function getDropdownKey(value: any): string {
+  return typeof value === 'string' ? value : value?.key || '';
+}
+
+function parseTargetPort(value: any): number | undefined {
+  const parsed = typeof value === 'number'
+    ? value
+    : typeof value === 'string'
+      ? parseInt(value.trim(), 10)
+      : Number.NaN;
+  if (!Number.isInteger(parsed) || parsed < 1 || parsed > 65535) {
+    return undefined;
+  }
+  return parsed;
+}
+
+function getRouteTargetInputs(formEl: any) {
+  const textInputs = Array.from(formEl.querySelectorAll('dees-input-text')) as any[];
+  const checkboxInputs = Array.from(formEl.querySelectorAll('dees-input-checkbox')) as any[];
+  return {
+    hostInput: textInputs.find((input) => input.key === 'targetHost'),
+    portInput: textInputs.find((input) => input.key === 'targetPort'),
+    preservePortInput: checkboxInputs.find((input) => input.key === 'preserveMatchPort'),
+  };
+}
+
+function setupTargetInputState(formEl: any) {
+  const updateState = async () => {
+    const data = await formEl.collectFormData();
+    const contentEl = formEl.closest('.content') || formEl.parentElement;
+    const usesNetworkTarget = !!getDropdownKey(data.networkTargetRef);
+    const preserveMatchPort = !usesNetworkTarget && Boolean(data.preserveMatchPort);
+    const { hostInput, portInput, preservePortInput } = getRouteTargetInputs(formEl);
+    const hostDescription = usesNetworkTarget
+      ? 'Controlled by the selected network target'
+      : 'Used when no network target is selected';
+    const portDescription = usesNetworkTarget
+      ? 'Controlled by the selected network target'
+      : preserveMatchPort
+        ? 'Forwarded to the backend on the same port the client matched'
+      : 'Used when no network target is selected';
+
+    if (hostInput) {
+      hostInput.disabled = usesNetworkTarget;
+      hostInput.required = !usesNetworkTarget;
+      hostInput.description = hostDescription;
+    }
+    if (portInput) {
+      portInput.disabled = usesNetworkTarget || preserveMatchPort;
+      portInput.required = !usesNetworkTarget && !preserveMatchPort;
+      portInput.description = portDescription;
+    }
+    if (preservePortInput) {
+      preservePortInput.disabled = usesNetworkTarget;
+      preservePortInput.description = usesNetworkTarget
+        ? 'Unavailable when a network target is selected'
+        : 'Forward to the backend using the same port that matched this route';
+      if (usesNetworkTarget) {
+        preservePortInput.value = false;
+      }
+    }
+
+    const remoteIngressGroup = contentEl?.querySelector('.remoteIngressGroup') as HTMLElement | null;
+    if (remoteIngressGroup) {
+      remoteIngressGroup.style.display = Boolean(data.remoteIngressEnabled) ? 'flex' : 'none';
+    }
+
+    await formEl.updateRequiredStatus?.();
+  };
+
+  formEl.changeSubject.subscribe(() => updateState());
+  updateState();
+}
+
 /**
  * Toggle TLS form field visibility based on selected TLS mode and certificate type.
  */
@@ -411,10 +485,13 @@ export class OpsViewRoutes extends DeesElement {
       ? (Array.isArray(route.match.domains) ? route.match.domains : [route.match.domains])
       : [];
     const firstTarget = route.action.targets?.[0];
+    const currentPreserveMatchPort = firstTarget?.port === 'preserve';
     const currentTargetHost = firstTarget
       ? (Array.isArray(firstTarget.host) ? firstTarget.host[0] : firstTarget.host)
       : '';
-    const currentTargetPort = firstTarget?.port != null ? String(firstTarget.port) : '';
+    const currentTargetPort = typeof firstTarget?.port === 'number' ? String(firstTarget.port) : '';
+    const currentRemoteIngressEnabled = route.remoteIngress?.enabled === true;
+    const currentEdgeFilter = route.remoteIngress?.edgeFilter || [];
 
     // Compute current TLS state for pre-population
     const currentTls = (route.action as any).tls;
@@ -439,6 +516,11 @@ export class OpsViewRoutes extends DeesElement {
           <dees-input-dropdown .key=${'networkTargetRef'} .label=${'Network Target'} .options=${targetOptions} .selectedOption=${targetOptions.find((o) => o.key === (merged.metadata?.networkTargetRef || '')) || null}></dees-input-dropdown>
           <dees-input-text .key=${'targetHost'} .label=${'Target Host'} .description=${'Used when no network target is selected'} .value=${currentTargetHost}></dees-input-text>
           <dees-input-text .key=${'targetPort'} .label=${'Target Port'} .description=${'Used when no network target is selected'} .value=${currentTargetPort}></dees-input-text>
+          <dees-input-checkbox .key=${'preserveMatchPort'} .label=${'Preserve incoming port'} .value=${currentPreserveMatchPort}></dees-input-checkbox>
+          <dees-input-checkbox .key=${'remoteIngressEnabled'} .label=${'Enable Remote Ingress'} .value=${currentRemoteIngressEnabled}></dees-input-checkbox>
+          <div class="remoteIngressGroup" style="display: ${currentRemoteIngressEnabled ? 'flex' : 'none'}; flex-direction: column; gap: 16px;">
+            <dees-input-list .key=${'remoteIngressEdgeFilter'} .label=${'Edge Filter'} .description=${'Optional edge IDs or tags. Leave empty to allow all edges.'} .placeholder=${'Add edge ID or tag...'} .value=${currentEdgeFilter}></dees-input-list>
+          </div>
           <dees-input-dropdown .key=${'tlsMode'} .label=${'TLS Mode'} .options=${tlsModeOptions} .selectedOption=${tlsModeOptions.find((o) => o.key === currentTlsMode) || tlsModeOptions[0]}></dees-input-dropdown>
           <div class="tlsCertificateGroup" style="display: ${needsCert ? 'flex' : 'none'}; flex-direction: column; gap: 16px;">
             <dees-input-dropdown .key=${'tlsCertificate'} .label=${'Certificate'} .options=${tlsCertOptions} .selectedOption=${tlsCertOptions.find((o) => o.key === currentTlsCert) || tlsCertOptions[0]}></dees-input-dropdown>
@@ -470,6 +552,24 @@ export class OpsViewRoutes extends DeesElement {
               : [];
             const priority = formData.priority ? parseInt(formData.priority, 10) : undefined;
 
+            const profileKey = getDropdownKey(formData.sourceProfileRef);
+            const targetKey = getDropdownKey(formData.networkTargetRef);
+            const preserveMatchPort = !targetKey && Boolean(formData.preserveMatchPort);
+            const targetPort = preserveMatchPort
+              ? 'preserve'
+              : parseTargetPort(formData.targetPort)
+                ?? (targetKey ? parseTargetPort(currentTargetPort) ?? ports[0] : undefined);
+
+            if (targetPort === undefined) {
+              alert('Target Port must be a valid port number when no network target is selected.');
+              return;
+            }
+
+            const remoteIngressEnabled = Boolean(formData.remoteIngressEnabled);
+            const remoteIngressEdgeFilter: string[] = Array.isArray(formData.remoteIngressEdgeFilter)
+              ? formData.remoteIngressEdgeFilter.filter(Boolean)
+              : [];
+
             const updatedRoute: any = {
               name: formData.name,
               match: {
@@ -480,11 +580,17 @@ export class OpsViewRoutes extends DeesElement {
                 type: 'forward',
                 targets: [
                   {
-                    host: formData.targetHost || 'localhost',
-                    port: parseInt(formData.targetPort, 10) || 443,
+                    host: formData.targetHost || currentTargetHost || 'localhost',
+                    port: targetPort,
                   },
                 ],
               },
+              remoteIngress: remoteIngressEnabled
+                ? {
+                    enabled: true,
+                    ...(remoteIngressEdgeFilter.length > 0 ? { edgeFilter: remoteIngressEdgeFilter } : {}),
+                  }
+                : null,
               ...(priority != null && !isNaN(priority) ? { priority } : {}),
             };
 
@@ -508,15 +614,17 @@ export class OpsViewRoutes extends DeesElement {
             }
 
             const metadata: any = {};
-            const profileRefValue = formData.sourceProfileRef as any;
-            const profileKey = typeof profileRefValue === 'string' ? profileRefValue : profileRefValue?.key;
             if (profileKey) {
               metadata.sourceProfileRef = profileKey;
+            } else if (merged.metadata?.sourceProfileRef) {
+              metadata.sourceProfileRef = '';
+              metadata.sourceProfileName = '';
             }
-            const targetRefValue = formData.networkTargetRef as any;
-            const targetKey = typeof targetRefValue === 'string' ? targetRefValue : targetRefValue?.key;
             if (targetKey) {
               metadata.networkTargetRef = targetKey;
+            } else if (merged.metadata?.networkTargetRef) {
+              metadata.networkTargetRef = '';
+              metadata.networkTargetName = '';
             }
 
             await appstate.routeManagementStatePart.dispatchAction(
@@ -537,6 +645,7 @@ export class OpsViewRoutes extends DeesElement {
     if (editForm) {
       await editForm.updateComplete;
       setupTlsVisibility(editForm);
+      setupTargetInputState(editForm);
     }
   }
 
@@ -573,6 +682,11 @@ export class OpsViewRoutes extends DeesElement {
           <dees-input-dropdown .key=${'networkTargetRef'} .label=${'Network Target'} .options=${targetOptions}></dees-input-dropdown>
           <dees-input-text .key=${'targetHost'} .label=${'Target Host'} .description=${'Used when no network target is selected'} .value=${'localhost'}></dees-input-text>
           <dees-input-text .key=${'targetPort'} .label=${'Target Port'} .description=${'Used when no network target is selected'}></dees-input-text>
+          <dees-input-checkbox .key=${'preserveMatchPort'} .label=${'Preserve incoming port'} .value=${false}></dees-input-checkbox>
+          <dees-input-checkbox .key=${'remoteIngressEnabled'} .label=${'Enable Remote Ingress'} .value=${false}></dees-input-checkbox>
+          <div class="remoteIngressGroup" style="display: none; flex-direction: column; gap: 16px;">
+            <dees-input-list .key=${'remoteIngressEdgeFilter'} .label=${'Edge Filter'} .description=${'Optional edge IDs or tags. Leave empty to allow all edges.'} .placeholder=${'Add edge ID or tag...'}></dees-input-list>
+          </div>
           <dees-input-dropdown .key=${'tlsMode'} .label=${'TLS Mode'} .options=${tlsModeOptions} .selectedOption=${tlsModeOptions[0]}></dees-input-dropdown>
           <div class="tlsCertificateGroup" style="display: none; flex-direction: column; gap: 16px;">
             <dees-input-dropdown .key=${'tlsCertificate'} .label=${'Certificate'} .options=${tlsCertOptions} .selectedOption=${tlsCertOptions[0]}></dees-input-dropdown>
@@ -604,6 +718,24 @@ export class OpsViewRoutes extends DeesElement {
               : [];
             const priority = formData.priority ? parseInt(formData.priority, 10) : undefined;
 
+            const profileKey = getDropdownKey(formData.sourceProfileRef);
+            const targetKey = getDropdownKey(formData.networkTargetRef);
+            const preserveMatchPort = !targetKey && Boolean(formData.preserveMatchPort);
+            const targetPort = preserveMatchPort
+              ? 'preserve'
+              : parseTargetPort(formData.targetPort)
+                ?? (targetKey ? ports[0] : undefined);
+
+            if (targetPort === undefined) {
+              alert('Target Port must be a valid port number when no network target is selected.');
+              return;
+            }
+
+            const remoteIngressEnabled = Boolean(formData.remoteIngressEnabled);
+            const remoteIngressEdgeFilter: string[] = Array.isArray(formData.remoteIngressEdgeFilter)
+              ? formData.remoteIngressEdgeFilter.filter(Boolean)
+              : [];
+
             const route: any = {
               name: formData.name,
               match: {
@@ -615,10 +747,18 @@ export class OpsViewRoutes extends DeesElement {
                 targets: [
                   {
                     host: formData.targetHost || 'localhost',
-                    port: parseInt(formData.targetPort, 10) || 443,
+                    port: targetPort,
                   },
                 ],
               },
+              ...(remoteIngressEnabled
+                ? {
+                    remoteIngress: {
+                      enabled: true,
+                      ...(remoteIngressEdgeFilter.length > 0 ? { edgeFilter: remoteIngressEdgeFilter } : {}),
+                    },
+                  }
+                : {}),
               ...(priority != null && !isNaN(priority) ? { priority } : {}),
             };
 
@@ -641,13 +781,9 @@ export class OpsViewRoutes extends DeesElement {
 
             // Build metadata if profile/target selected
             const metadata: any = {};
-            const profileRefValue = formData.sourceProfileRef as any;
-            const profileKey = typeof profileRefValue === 'string' ? profileRefValue : profileRefValue?.key;
             if (profileKey) {
               metadata.sourceProfileRef = profileKey;
             }
-            const targetRefValue = formData.networkTargetRef as any;
-            const targetKey = typeof targetRefValue === 'string' ? targetRefValue : targetRefValue?.key;
             if (targetKey) {
               metadata.networkTargetRef = targetKey;
             }
@@ -669,6 +805,7 @@ export class OpsViewRoutes extends DeesElement {
     if (createForm) {
       await createForm.updateComplete;
       setupTlsVisibility(createForm);
+      setupTargetInputState(createForm);
     }
   }