@serve.zone/dcrouter 16.2.1 → 16.4.0

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

@@ -1,9 +1,22 @@
 import * as appstate from '../../appstate.js';
 import * as interfaces from '../../../dist_ts_interfaces/index.js';
 import { viewHostCss } from '../shared/css.js';
-import { type DeesAppuiTabs, type IStatsTile } from '@design.estate/dees-catalog';
+import {
+  type DeesInputMultitoggle,
+  type IStatsTile,
+} from '@design.estate/dees-catalog';
 import './ops-view-redirects.js';
 import './ops-view-special-forwards.js';
+import {
+  getRouteOwner,
+  redirectMatchesOwner,
+  routeMatchesOwner,
+  type TRouteOwnerFilter,
+} from './route-view-filters.js';
+import {
+  letsEncryptHttp01ManagedRouteKind,
+  showLetsEncryptHttp01ForwardDialog,
+} from './special-forward-dialog.js';
 import type {
   IRoutePathClassOption as ISzRoutePathClassOption,
   IRouteSourcePolicyPreset as ISzRouteSourcePolicyPreset,
@@ -21,9 +34,10 @@ import {
   type TemplateResult,
 } from '@design.estate/dees-element';
 
-type TRoutesSection = 'standard' | 'special' | 'redirects';
-type TRouteOwnerFilter = 'all' | 'operator' | 'gatewayClient' | 'system';
-type IMenuItem = DeesAppuiTabs['tabs'][number];
+type TRoutesSection = 'all' | 'standard' | 'redirects' | 'special';
+
+const routeTypeOptions = ['All', 'Standard', 'Redirect', 'Special'];
+const routeOwnerOptions = ['All', 'User', 'Gateway Client', 'System'];
 
 // TLS dropdown options shared by create and edit dialogs
 const tlsModeOptions = [
@@ -327,34 +341,6 @@ export class OpsViewRoutes extends DeesElement {
   @state() accessor activeSection: TRoutesSection = 'standard';
   @state() accessor ownerFilter: TRouteOwnerFilter = 'all';
 
-  private readonly sectionTabs: IMenuItem[] = [
-    {
-      key: 'Standard Routes',
-      iconName: 'lucide:route',
-      action: () => this.setRouteView('standard'),
-    },
-    {
-      key: 'Special Forwards',
-      iconName: 'lucide:split',
-      action: () => this.setRouteView('special'),
-    },
-    {
-      key: 'Redirects',
-      iconName: 'lucide:cornerDownRight',
-      action: () => this.setRouteView('redirects'),
-    },
-  ];
-
-  private readonly ownerTabs: IMenuItem[] = [
-    { key: 'All', action: () => this.setRouteOwnerFilter('all') },
-    { key: 'Operator', action: () => this.setRouteOwnerFilter('operator') },
-    {
-      key: 'Gateway Client',
-      action: () => this.setRouteOwnerFilter('gatewayClient'),
-    },
-    { key: 'System', action: () => this.setRouteOwnerFilter('system') },
-  ];
-
   private readonly popStateHandler = () => {
     const urlState = this.readUrlState();
     this.activeSection = urlState.section;
@@ -406,8 +392,7 @@ export class OpsViewRoutes extends DeesElement {
       .select((s) => s.isLoggedIn)
       .subscribe((isLoggedIn) => {
         if (isLoggedIn) {
-          appstate.routeManagementStatePart.dispatchAction(appstate.fetchMergedRoutesAction, null);
-          appstate.profilesTargetsStatePart.dispatchAction(appstate.fetchProfilesAndTargetsAction, null);
+          void this.refreshData();
         }
       });
     this.rxSubscriptions.push(loginSub);
@@ -433,6 +418,31 @@ export class OpsViewRoutes extends DeesElement {
         gap: 24px;
       }
 
+      .routeFilters {
+        display: flex;
+        align-items: flex-end;
+        gap: 16px;
+        flex-wrap: nowrap;
+      }
+
+      .routeFilter {
+        flex: 0 1 auto;
+        min-width: 0;
+        max-width: 100%;
+        overflow-x: auto;
+      }
+
+      @media (max-width: 760px) {
+        .routeFilters {
+          flex-direction: column;
+          align-items: stretch;
+        }
+
+        .routeFilter {
+          width: 100%;
+        }
+      }
+
       .warnings-bar {
         background: ${cssManager.bdTheme('rgba(255, 170, 0, 0.08)', 'rgba(255, 170, 0, 0.1)')};
         border: 1px solid ${cssManager.bdTheme('rgba(255, 170, 0, 0.25)', 'rgba(255, 170, 0, 0.3)')};
@@ -467,70 +477,25 @@ export class OpsViewRoutes extends DeesElement {
 
   public render(): TemplateResult {
     const { mergedRoutes, warnings } = this.routeState;
-
-    const disabledCount = mergedRoutes.filter((mr) => !mr.enabled).length;
-    const configCount = mergedRoutes.filter((mr) => mr.origin !== 'api').length;
-    const operatorCount = mergedRoutes.filter((mr) => {
-      return mr.origin === 'api'
-        && mr.metadata?.ownerType !== 'gatewayClient'
-        && !mr.metadata?.managedRouteKind;
-    }).length;
-
-    const statsTiles: IStatsTile[] = [
-      {
-        id: 'totalRoutes',
-        title: 'Total Routes',
-        type: 'number',
-        value: mergedRoutes.length,
-        icon: 'lucide:route',
-        description: 'All configured routes',
-        color: '#3b82f6',
-      },
-      {
-        id: 'configRoutes',
-        title: 'System Routes',
-        type: 'number',
-        value: configCount,
-        icon: 'lucide:settings',
-        description: 'From config, email, and DNS',
-        color: '#8b5cf6',
-      },
-      {
-        id: 'operatorRoutes',
-        title: 'Operator Routes',
-        type: 'number',
-        value: operatorCount,
-        icon: 'lucide:code',
-        description: 'Created directly by operators',
-        color: '#0ea5e9',
-      },
-      {
-        id: 'disabled',
-        title: 'Disabled',
-        type: 'number',
-        value: disabledCount,
-        icon: 'lucide:pauseCircle',
-        description: 'Currently disabled routes',
-        color: disabledCount > 0 ? '#ef4444' : '#6b7280',
-      },
-    ];
-
     const standardRoutes = mergedRoutes.filter((route) => !route.metadata?.managedRouteKind);
-    const filteredRoutes = standardRoutes.filter((route) => {
-      switch (this.ownerFilter) {
-        case 'operator':
-          return route.origin === 'api' && route.metadata?.ownerType !== 'gatewayClient';
-        case 'gatewayClient':
-          return route.metadata?.ownerType === 'gatewayClient';
-        case 'system':
-          return route.origin !== 'api' || route.metadata?.ownerType === 'system';
-        default:
-          return true;
-      }
+    const filteredStandardRoutes = standardRoutes.filter((route) => {
+      return routeMatchesOwner(route, this.ownerFilter);
+    });
+    const filteredSpecialRoutes = mergedRoutes.filter((route) => {
+      return route.metadata?.managedRouteKind === letsEncryptHttp01ManagedRouteKind
+        && routeMatchesOwner(route, this.ownerFilter);
+    });
+    const filteredRedirects = (this.routeState.httpRedirects || []).filter((redirect) => {
+      return redirectMatchesOwner(redirect, mergedRoutes, this.ownerFilter);
     });
+    const statsTiles = this.getStatsTiles(
+      filteredStandardRoutes,
+      filteredSpecialRoutes,
+      filteredRedirects,
+    );
 
     // Map filtered routes to sz-route-list-view format
-    const szRoutes = filteredRoutes.map((mr) => {
+    const szRoutes = filteredStandardRoutes.map((mr) => {
       const tags = [...(mr.route.tags || [])];
       tags.push(mr.origin);
       if (!mr.enabled) tags.push('disabled');
@@ -549,73 +514,256 @@ export class OpsViewRoutes extends DeesElement {
       <dees-heading level="3">Route Management</dees-heading>
 
       <div class="routesContainer">
-        <dees-appui-tabs
-          .tabs=${this.sectionTabs}
-          .selectedTab=${this.getSelectedSectionTab()}
-        ></dees-appui-tabs>
-
-        ${this.activeSection === 'special'
-          ? html`<ops-view-special-forwards></ops-view-special-forwards>`
-          : this.activeSection === 'redirects'
-            ? html`<ops-view-redirects .embedded=${true}></ops-view-redirects>`
-            : html`
+        <div class="routeFilters">
+          <div class="routeFilter">
+            <dees-input-multitoggle
+              id="routeTypeFilter"
+              .label=${'Type'}
+              .options=${routeTypeOptions}
+              .value=${this.getSelectedRouteTypeOption()}
+            ></dees-input-multitoggle>
+          </div>
+          <div class="routeFilter">
+            <dees-input-multitoggle
+              id="routeOwnerFilter"
+              .label=${'Owner'}
+              .options=${routeOwnerOptions}
+              .value=${this.getSelectedOwnerOption()}
+            ></dees-input-multitoggle>
+          </div>
+        </div>
+
         <dees-statsgrid
+          id="routeStats"
           .tiles=${statsTiles}
-          .gridActions=${[
-            {
-              name: 'Add Route',
-              iconName: 'lucide:plus',
-              action: () => this.showCreateRouteDialog(),
-            },
-            {
-              name: 'Refresh',
-              iconName: 'lucide:refreshCw',
-              action: () => this.refreshData(),
-            },
-          ]}
+          .gridActions=${this.getGridActions()}
         ></dees-statsgrid>
 
-        <dees-appui-tabs
-          .tabs=${this.ownerTabs}
-          .selectedTab=${this.getSelectedOwnerTab()}
-        ></dees-appui-tabs>
-
-        ${warnings.length > 0
+        ${this.activeSection === 'all' || this.activeSection === 'standard'
           ? html`
-              <div class="warnings-bar">
-                ${warnings.map(
-                  (w) => html`
-                    <div class="warning-item">
-                      <span class="warning-icon">&#9888;</span>
-                      <span>${w.message}</span>
+              ${this.activeSection === 'all'
+                ? html`<dees-heading level="4">Standard Routes</dees-heading>`
+                : ''}
+
+              ${warnings.length > 0
+                ? html`
+                    <div class="warnings-bar">
+                      ${warnings.map(
+                        (warning) => html`
+                          <div class="warning-item">
+                            <span class="warning-icon">&#9888;</span>
+                            <span>${warning.message}</span>
+                          </div>
+                        `,
+                      )}
                     </div>
-                  `,
-                )}
-              </div>
-            `
-          : ''}
+                  `
+                : ''}
 
-        ${szRoutes.length > 0
-          ? html`
               <sz-route-list-view
                 .routes=${szRoutes}
-                .showActionsFilter=${(route: { id?: string; name?: string }) => this.canEditRoute(route)}
-                @route-click=${(e: CustomEvent) => this.handleRouteClick(e)}
-                @route-edit=${(e: CustomEvent) => this.handleRouteEdit(e)}
-                @route-delete=${(e: CustomEvent) => this.handleRouteDelete(e)}
+                .showActionsFilter=${(route: { id?: string; name?: string }) =>
+                  this.canEditRoute(route)}
+                @route-click=${(event: CustomEvent) => this.handleRouteClick(event)}
+                @route-edit=${(event: CustomEvent) => this.handleRouteEdit(event)}
+                @route-delete=${(event: CustomEvent) => this.handleRouteDelete(event)}
               ></sz-route-list-view>
+              ${szRoutes.length === 0
+                ? html`
+                    <div class="empty-state">
+                      <p>No standard routes match these filters</p>
+                      <p>Choose another ownership filter or add a User Route.</p>
+                    </div>
+                  `
+                : ''}
+            `
+          : ''}
+
+        ${this.activeSection === 'all' || this.activeSection === 'special'
+          ? html`
+              <ops-view-special-forwards
+                .embedded=${true}
+                .ownerFilter=${this.ownerFilter}
+              ></ops-view-special-forwards>
+            `
+          : ''}
+
+        ${this.activeSection === 'all' || this.activeSection === 'redirects'
+          ? html`
+              <ops-view-redirects
+                .embedded=${true}
+                .ownerFilter=${this.ownerFilter}
+              ></ops-view-redirects>
             `
-          : html`
-              <div class="empty-state">
-                <p>No ${this.getOwnerFilterLabel().toLowerCase()} routes</p>
-                <p>Choose another ownership filter or add an operator route.</p>
-              </div>
-            `}
-        `}
+          : ''}
       </div>
     `;
   }
 
+  private getStatsTiles(
+    standardRoutes: interfaces.data.IMergedRoute[],
+    specialRoutes: interfaces.data.IMergedRoute[],
+    redirects: interfaces.data.IHttpRedirectInfo[],
+  ): IStatsTile[] {
+    if (this.activeSection === 'all') {
+      const disabledCount = [...standardRoutes, ...specialRoutes]
+        .filter((route) => !route.enabled).length;
+      return [
+        {
+          id: 'allStandardRoutes',
+          title: 'Standard',
+          type: 'number',
+          value: standardRoutes.length,
+          icon: 'lucide:route',
+          description: 'Matching standard routes',
+          color: '#3b82f6',
+        },
+        {
+          id: 'allSpecialRoutes',
+          title: 'Special',
+          type: 'number',
+          value: specialRoutes.length,
+          icon: 'lucide:wandSparkles',
+          description: 'Matching managed special forwards',
+          color: '#8b5cf6',
+        },
+        {
+          id: 'allRedirects',
+          title: 'Redirects',
+          type: 'number',
+          value: redirects.length,
+          icon: 'lucide:cornerDownRight',
+          description: 'Matching derived redirects',
+          color: '#0ea5e9',
+        },
+        {
+          id: 'allDisabledRoutes',
+          title: 'Disabled',
+          type: 'number',
+          value: disabledCount,
+          icon: 'lucide:circlePause',
+          description: 'Disabled Standard and Special routes',
+          color: disabledCount > 0 ? '#ef4444' : '#6b7280',
+        },
+      ];
+    }
+
+    if (this.activeSection === 'redirects') {
+      const activeCount = redirects.filter((redirect) => redirect.status === 'active').length;
+      const coveredCount = redirects.filter((redirect) => redirect.status === 'covered').length;
+      const skippedCount = redirects.filter((redirect) => redirect.status === 'skipped').length;
+      return [
+        {
+          id: 'matchingRedirects',
+          title: 'Matching',
+          type: 'number',
+          value: redirects.length,
+          icon: 'lucide:cornerDownRight',
+          description: 'Redirects in this owner scope',
+          color: '#3b82f6',
+        },
+        {
+          id: 'activeRedirects',
+          title: 'Active',
+          type: 'number',
+          value: activeCount,
+          icon: 'lucide:circleCheck',
+          description: 'Generated at runtime',
+          color: '#22c55e',
+        },
+        {
+          id: 'coveredRedirects',
+          title: 'Covered',
+          type: 'number',
+          value: coveredCount,
+          icon: 'lucide:shieldCheck',
+          description: 'Handled by explicit HTTP routes',
+          color: '#8b5cf6',
+        },
+        {
+          id: 'skippedRedirects',
+          title: 'Skipped',
+          type: 'number',
+          value: skippedCount,
+          icon: 'lucide:triangleAlert',
+          description: 'Overlaps explicit HTTP routes',
+          color: skippedCount > 0 ? '#f59e0b' : '#6b7280',
+        },
+      ];
+    }
+
+    const routes = this.activeSection === 'special' ? specialRoutes : standardRoutes;
+    const enabledCount = routes.filter((route) => route.enabled).length;
+    const disabledCount = routes.length - enabledCount;
+    const readOnlyCount = routes.filter((route) => getRouteOwner(route) !== 'operator').length;
+    const scopeName = this.activeSection === 'special' ? 'Special' : 'Standard';
+    return [
+      {
+        id: `matching${scopeName}Routes`,
+        title: 'Matching',
+        type: 'number',
+        value: routes.length,
+        icon: 'lucide:route',
+        description: `${scopeName} routes in this owner scope`,
+        color: '#3b82f6',
+      },
+      {
+        id: `enabled${scopeName}Routes`,
+        title: 'Enabled',
+        type: 'number',
+        value: enabledCount,
+        icon: 'lucide:circleCheck',
+        description: 'Currently active',
+        color: '#22c55e',
+      },
+      {
+        id: `disabled${scopeName}Routes`,
+        title: 'Disabled',
+        type: 'number',
+        value: disabledCount,
+        icon: 'lucide:circlePause',
+        description: 'Configured but inactive',
+        color: disabledCount > 0 ? '#f59e0b' : '#6b7280',
+      },
+      {
+        id: `readOnly${scopeName}Routes`,
+        title: 'Read-only',
+        type: 'number',
+        value: readOnlyCount,
+        icon: 'lucide:lockKeyhole',
+        description: 'Managed by gateway clients or system',
+        color: '#8b5cf6',
+      },
+    ];
+  }
+
+  private getGridActions() {
+    const canCreateUserRoutes = this.ownerFilter === 'all' || this.ownerFilter === 'operator';
+    return [
+      ...(canCreateUserRoutes && (this.activeSection === 'standard' || this.activeSection === 'all')
+        ? [{
+            name: 'Add User Route',
+            iconName: 'lucide:plus',
+            action: () => this.showCreateRouteDialog(),
+          }]
+        : []),
+      ...(canCreateUserRoutes && (this.activeSection === 'special' || this.activeSection === 'all')
+        ? [{
+            name: 'Add User Special Forward',
+            iconName: 'lucide:wandSparkles',
+            action: () => showLetsEncryptHttp01ForwardDialog({
+              targets: this.profilesTargetsState.targets,
+            }),
+          }]
+        : []),
+      {
+        name: 'Refresh',
+        iconName: 'lucide:refreshCw',
+        action: () => this.refreshData(),
+      },
+    ];
+  }
+
   private async handleRouteClick(e: CustomEvent) {
     const clickedRoute = e.detail;
     if (!clickedRoute) return;
@@ -953,7 +1101,7 @@ export class OpsViewRoutes extends DeesElement {
     ];
 
     const createModal = await DeesModal.createAndShow({
-      heading: 'Add Route',
+      heading: 'Add User Route',
       content: html`
         <dees-form>
           <dees-input-text .key=${'name'} .label=${'Route Name'} .required=${true}></dees-input-text>
@@ -1103,32 +1251,63 @@ export class OpsViewRoutes extends DeesElement {
     }
   }
 
-  private refreshData() {
-    appstate.routeManagementStatePart.dispatchAction(appstate.fetchMergedRoutesAction, null);
+  private async refreshData(): Promise<void> {
+    await Promise.all([
+      appstate.routeManagementStatePart.dispatchAction(appstate.fetchMergedRoutesAction, null),
+      appstate.routeManagementStatePart.dispatchAction(appstate.fetchHttpRedirectsAction, null),
+      appstate.profilesTargetsStatePart.dispatchAction(
+        appstate.fetchProfilesAndTargetsAction,
+        null,
+      ),
+    ]);
   }
 
-  private getSelectedSectionTab(): IMenuItem {
-    const index = this.activeSection === 'special'
-      ? 1
-      : this.activeSection === 'redirects'
-        ? 2
-        : 0;
-    return this.sectionTabs[index];
+  private getSelectedRouteTypeOption(): string {
+    switch (this.activeSection) {
+      case 'all':
+        return 'All';
+      case 'redirects':
+        return 'Redirect';
+      case 'special':
+        return 'Special';
+      default:
+        return 'Standard';
+    }
   }
 
-  private getSelectedOwnerTab(): IMenuItem {
-    const index = this.ownerFilter === 'operator'
-      ? 1
-      : this.ownerFilter === 'gatewayClient'
-        ? 2
-        : this.ownerFilter === 'system'
-          ? 3
-          : 0;
-    return this.ownerTabs[index];
+  private getSelectedOwnerOption(): string {
+    switch (this.ownerFilter) {
+      case 'operator':
+        return 'User';
+      case 'gatewayClient':
+        return 'Gateway Client';
+      case 'system':
+        return 'System';
+      default:
+        return 'All';
+    }
+  }
+
+  private handleRouteTypeChange(toggle: DeesInputMultitoggle): void {
+    const section: TRoutesSection = toggle.selectedOption === 'All'
+      ? 'all'
+      : toggle.selectedOption === 'Redirect'
+        ? 'redirects'
+        : toggle.selectedOption === 'Special'
+          ? 'special'
+          : 'standard';
+    this.setRouteView(section);
   }
 
-  private getOwnerFilterLabel(): string {
-    return this.getSelectedOwnerTab().key;
+  private handleRouteOwnerChange(toggle: DeesInputMultitoggle): void {
+    const owner: TRouteOwnerFilter = toggle.selectedOption === 'User'
+      ? 'operator'
+      : toggle.selectedOption === 'Gateway Client'
+        ? 'gatewayClient'
+        : toggle.selectedOption === 'System'
+          ? 'system'
+          : 'all';
+    this.setRouteOwnerFilter(owner);
   }
 
   private setRouteView(section: TRoutesSection): void {
@@ -1147,7 +1326,11 @@ export class OpsViewRoutes extends DeesElement {
     const params = new URL(window.location.href).searchParams;
     const tabParam = params.get('tab');
     const ownerParam = params.get('owner');
-    const section: TRoutesSection = tabParam === 'special' || tabParam === 'redirects'
+    const section: TRoutesSection = (
+      tabParam === 'all'
+      || tabParam === 'special'
+      || tabParam === 'redirects'
+    )
       ? tabParam
       : 'standard';
     const owner: TRouteOwnerFilter = (
@@ -1214,12 +1397,29 @@ export class OpsViewRoutes extends DeesElement {
   }
 
   private isSystemManagedRoute(merged: interfaces.data.IMergedRoute): boolean {
-    return merged.origin !== 'api'
-      || merged.metadata?.ownerType === 'gatewayClient'
+    return getRouteOwner(merged) !== 'operator'
       || Boolean(merged.metadata?.managedRouteKind);
   }
 
   async firstUpdated() {
-    await appstate.routeManagementStatePart.dispatchAction(appstate.fetchMergedRoutesAction, null);
+    const typeToggle = this.shadowRoot?.querySelector(
+      '#routeTypeFilter',
+    ) as DeesInputMultitoggle | null;
+    const ownerToggle = this.shadowRoot?.querySelector(
+      '#routeOwnerFilter',
+    ) as DeesInputMultitoggle | null;
+
+    if (typeToggle) {
+      this.rxSubscriptions.push(typeToggle.changeSubject.subscribe((toggle) => {
+        this.handleRouteTypeChange(toggle);
+      }));
+    }
+    if (ownerToggle) {
+      this.rxSubscriptions.push(ownerToggle.changeSubject.subscribe((toggle) => {
+        this.handleRouteOwnerChange(toggle);
+      }));
+    }
+
+    await this.refreshData();
   }
 }