@serve.zone/dcrouter 16.3.0 → 16.4.0

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

@@ -25,7 +25,7 @@ declare global {
 
 @customElement('ops-view-redirects')
 export class OpsViewRedirects extends DeesElement {
-  @property({ type: Boolean })
+  @property({ type: Boolean, reflect: true })
   accessor embedded = false;
   @property({ type: String })
   accessor ownerFilter: TRouteOwnerFilter = 'all';
@@ -59,6 +59,12 @@ export class OpsViewRedirects extends DeesElement {
     cssManager.defaultStyles,
     viewHostCss,
     css`
+      :host([embedded]) {
+        margin: 0;
+        max-width: none;
+        padding: 0;
+      }
+
       .redirectsContainer {
         display: flex;
         flex-direction: column;
@@ -137,7 +143,9 @@ export class OpsViewRedirects extends DeesElement {
     return html`
       ${this.embedded ? '' : html`<dees-heading level="3">Redirects</dees-heading>`}
       <div class="redirectsContainer">
-        <dees-statsgrid .tiles=${statsTiles}></dees-statsgrid>
+        ${this.embedded
+          ? ''
+          : html`<dees-statsgrid .tiles=${statsTiles}></dees-statsgrid>`}
 
         ${redirects.length > 0
           ? html`
@@ -158,14 +166,7 @@ export class OpsViewRedirects extends DeesElement {
                   'Covered By': redirect.coveredByRouteNames.join(', ') || '-',
                   Notes: this.formatNotes(redirect),
                 })}
-                .dataActions=${[
-                  {
-                    name: 'Refresh',
-                    iconName: 'lucide:RefreshCw',
-                    type: ['header' as const],
-                    actionFunc: async () => this.refreshData(),
-                  },
-                ]}
+                .dataActions=${this.getTableActions()}
               ></dees-table>
             `
           : html`
@@ -174,14 +175,7 @@ export class OpsViewRedirects extends DeesElement {
                 .heading2=${'Runtime redirects derived from enabled HTTPS routes'}
                 .data=${[]}
                 .displayFunction=${() => ({})}
-                .dataActions=${[
-                  {
-                    name: 'Refresh',
-                    iconName: 'lucide:RefreshCw',
-                    type: ['header' as const],
-                    actionFunc: async () => this.refreshData(),
-                  },
-                ]}
+                .dataActions=${this.getTableActions()}
               ></dees-table>
               <div class="empty-state">
                 <p>No derived redirects</p>
@@ -196,6 +190,19 @@ export class OpsViewRedirects extends DeesElement {
     await appstate.routeManagementStatePart.dispatchAction(appstate.fetchHttpRedirectsAction, null);
   }
 
+  private getTableActions() {
+    return this.embedded
+      ? []
+      : [
+          {
+            name: 'Refresh',
+            iconName: 'lucide:refreshCw',
+            type: ['header' as const],
+            actionFunc: async () => this.refreshData(),
+          },
+        ];
+  }
+
   private formatStatus(status: interfaces.data.THttpRedirectStatus): string {
     return status.charAt(0).toUpperCase() + status.slice(1);
   }

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

@@ -9,9 +9,14 @@ 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,
@@ -387,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);
@@ -416,12 +420,13 @@ export class OpsViewRoutes extends DeesElement {
 
       .routeFilters {
         display: flex;
-        align-items: flex-start;
+        align-items: flex-end;
         gap: 16px;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
       }
 
       .routeFilter {
+        flex: 0 1 auto;
         min-width: 0;
         max-width: 100%;
         overflow-x: auto;
@@ -430,6 +435,11 @@ export class OpsViewRoutes extends DeesElement {
       @media (max-width: 760px) {
         .routeFilters {
           flex-direction: column;
+          align-items: stretch;
+        }
+
+        .routeFilter {
+          width: 100%;
         }
       }
 
@@ -468,55 +478,24 @@ export class OpsViewRoutes extends DeesElement {
   public render(): TemplateResult {
     const { mergedRoutes, warnings } = this.routeState;
     const standardRoutes = mergedRoutes.filter((route) => !route.metadata?.managedRouteKind);
-    const filteredRoutes = standardRoutes.filter((route) => {
+    const filteredStandardRoutes = standardRoutes.filter((route) => {
       return routeMatchesOwner(route, this.ownerFilter);
     });
-
-    const disabledCount = filteredRoutes.filter((route) => !route.enabled).length;
-    const systemCount = filteredRoutes.filter((route) => getRouteOwner(route) === 'system').length;
-    const userCount = filteredRoutes.filter((route) => getRouteOwner(route) === 'operator').length;
-
-    const statsTiles: IStatsTile[] = [
-      {
-        id: 'totalRoutes',
-        title: 'Standard Routes',
-        type: 'number',
-        value: filteredRoutes.length,
-        icon: 'lucide:route',
-        description: 'Matching non-special routes',
-        color: '#3b82f6',
-      },
-      {
-        id: 'configRoutes',
-        title: 'System Routes',
-        type: 'number',
-        value: systemCount,
-        icon: 'lucide:settings',
-        description: 'From config, email, and DNS',
-        color: '#8b5cf6',
-      },
-      {
-        id: 'userRoutes',
-        title: 'User Routes',
-        type: 'number',
-        value: userCount,
-        icon: 'lucide:code',
-        description: 'Created directly by users',
-        color: '#0ea5e9',
-      },
-      {
-        id: 'disabled',
-        title: 'Disabled',
-        type: 'number',
-        value: disabledCount,
-        icon: 'lucide:pauseCircle',
-        description: 'Currently disabled routes',
-        color: disabledCount > 0 ? '#ef4444' : '#6b7280',
-      },
-    ];
+    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');
@@ -554,26 +533,17 @@ export class OpsViewRoutes extends DeesElement {
           </div>
         </div>
 
+        <dees-statsgrid
+          id="routeStats"
+          .tiles=${statsTiles}
+          .gridActions=${this.getGridActions()}
+        ></dees-statsgrid>
+
         ${this.activeSection === 'all' || this.activeSection === 'standard'
           ? html`
               ${this.activeSection === 'all'
                 ? html`<dees-heading level="4">Standard Routes</dees-heading>`
                 : ''}
-              <dees-statsgrid
-                .tiles=${statsTiles}
-                .gridActions=${[
-                  {
-                    name: 'Add Route',
-                    iconName: 'lucide:plus',
-                    action: () => this.showCreateRouteDialog(),
-                  },
-                  {
-                    name: 'Refresh',
-                    iconName: 'lucide:refreshCw',
-                    action: () => this.refreshData(),
-                  },
-                ]}
-              ></dees-statsgrid>
 
               ${warnings.length > 0
                 ? html`
@@ -590,29 +560,29 @@ export class OpsViewRoutes extends DeesElement {
                   `
                 : ''}
 
-              ${szRoutes.length > 0
+              <sz-route-list-view
+                .routes=${szRoutes}
+                .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`
-                    <sz-route-list-view
-                      .routes=${szRoutes}
-                      .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>
-                  `
-                : html`
                     <div class="empty-state">
                       <p>No standard routes match these filters</p>
-                      <p>Choose another ownership filter or add a user route.</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>
             `
@@ -630,6 +600,170 @@ export class OpsViewRoutes extends DeesElement {
     `;
   }
 
+  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;
@@ -967,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>
@@ -1117,8 +1251,15 @@ 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 getSelectedRouteTypeOption(): string {
@@ -1279,6 +1420,6 @@ export class OpsViewRoutes extends DeesElement {
       }));
     }
 
-    await appstate.routeManagementStatePart.dispatchAction(appstate.fetchMergedRoutesAction, null);
+    await this.refreshData();
   }
 }