@serve.zone/dcrouter 16.2.1 → 16.3.0

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/dcrouter',
-  version: '16.2.1',
+  version: '16.3.0',
   description: 'A multifaceted routing service handling mail and SMS delivery functions.'
 }

package/ts_web/elements/access/ops-view-apitokens.ts

@@ -133,7 +133,7 @@ export class OpsViewApiTokens extends DeesElement {
               name: 'Enable',
               iconName: 'lucide:play',
               type: ['inRow', 'contextmenu'] as any,
-              actionRelevancyCheckFunc: (actionData: any) => !actionData.item.enabled,
+              actionRelevancyCheckFunc: (token: any) => !token.enabled,
               actionFunc: async (actionData: any) => {
                 const token = actionData.item as interfaces.data.IApiTokenInfo;
                 await appstate.routeManagementStatePart.dispatchAction(
@@ -146,7 +146,7 @@ export class OpsViewApiTokens extends DeesElement {
               name: 'Disable',
               iconName: 'lucide:pause',
               type: ['inRow', 'contextmenu'] as any,
-              actionRelevancyCheckFunc: (actionData: any) => actionData.item.enabled,
+              actionRelevancyCheckFunc: (token: any) => token.enabled,
               actionFunc: async (actionData: any) => {
                 const token = actionData.item as interfaces.data.IApiTokenInfo;
                 await appstate.routeManagementStatePart.dispatchAction(

package/ts_web/elements/access/ops-view-gatewayclients.ts

@@ -97,7 +97,7 @@ export class OpsViewGatewayClients extends DeesElement {
             name: 'Enable',
             iconName: 'lucide:play',
             type: ['inRow', 'contextmenu'] as any,
-            actionRelevancyCheckFunc: (actionData: any) => !actionData.item.enabled,
+            actionRelevancyCheckFunc: (client: any) => !client.enabled,
             actionFunc: async (actionData: any) => {
               await appstate.routeManagementStatePart.dispatchAction(appstate.updateGatewayClientAction, {
                 id: actionData.item.id,
@@ -109,7 +109,7 @@ export class OpsViewGatewayClients extends DeesElement {
             name: 'Disable',
             iconName: 'lucide:pause',
             type: ['inRow', 'contextmenu'] as any,
-            actionRelevancyCheckFunc: (actionData: any) => actionData.item.enabled,
+            actionRelevancyCheckFunc: (client: any) => client.enabled,
             actionFunc: async (actionData: any) => {
               await appstate.routeManagementStatePart.dispatchAction(appstate.updateGatewayClientAction, {
                 id: actionData.item.id,

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

@@ -415,7 +415,7 @@ export class OpsViewNetworkActivity extends DeesElement {
         name: 'Block Network Range',
         iconName: 'lucide:network',
         type: ['contextmenu'] as any,
-        actionRelevancyCheckFunc: (actionData: any) => Boolean(this.getIpIntelligence(actionData.item.ip)?.networkRange),
+        actionRelevancyCheckFunc: (entry: any) => Boolean(this.getIpIntelligence(entry.ip)?.networkRange),
         actionFunc: async (actionData: any) => {
           const record = this.getIpIntelligence(actionData.item.ip);
           await this.createBlockRuleDialog('cidr', record!.networkRange!, 'Blocked network range from Network Activity');
@@ -425,7 +425,7 @@ export class OpsViewNetworkActivity extends DeesElement {
         name: 'Block ASN',
         iconName: 'lucide:radio-tower',
         type: ['contextmenu'] as any,
-        actionRelevancyCheckFunc: (actionData: any) => Boolean(this.getIpIntelligence(actionData.item.ip)?.asn),
+        actionRelevancyCheckFunc: (entry: any) => Boolean(this.getIpIntelligence(entry.ip)?.asn),
         actionFunc: async (actionData: any) => {
           const record = this.getIpIntelligence(actionData.item.ip);
           await this.createBlockRuleDialog('asn', String(record!.asn), 'Blocked ASN from Network Activity');
@@ -435,7 +435,7 @@ export class OpsViewNetworkActivity extends DeesElement {
         name: 'Block Organization',
         iconName: 'lucide:building-2',
         type: ['contextmenu'] as any,
-        actionRelevancyCheckFunc: (actionData: any) => Boolean(this.getIpOrganization(this.getIpIntelligence(actionData.item.ip))),
+        actionRelevancyCheckFunc: (entry: any) => Boolean(this.getIpOrganization(this.getIpIntelligence(entry.ip))),
         actionFunc: async (actionData: any) => {
           const record = this.getIpIntelligence(actionData.item.ip);
           await this.createBlockRuleDialog('organization', this.getIpOrganization(record), 'Blocked organization from Network Activity');
@@ -445,7 +445,7 @@ export class OpsViewNetworkActivity extends DeesElement {
         name: 'View Intelligence',
         iconName: 'lucide:info',
         type: ['doubleClick', 'contextmenu'] as any,
-        actionRelevancyCheckFunc: (actionData: any) => Boolean(this.getIpIntelligence(actionData.item.ip)),
+        actionRelevancyCheckFunc: (entry: any) => Boolean(this.getIpIntelligence(entry.ip)),
         actionFunc: async (actionData: any) => {
           await this.showIpIntelligenceDetails(actionData.item.ip);
         },
@@ -467,7 +467,7 @@ export class OpsViewNetworkActivity extends DeesElement {
         name: 'Block Organization',
         iconName: 'lucide:building-2',
         type: ['contextmenu'] as any,
-        actionRelevancyCheckFunc: (actionData: any) => Boolean(actionData.item.organization),
+        actionRelevancyCheckFunc: (entry: any) => Boolean(entry.organization),
         actionFunc: async (actionData: any) => {
           await this.createBlockRuleDialog('organization', actionData.item.organization, 'Blocked organization from Network Activity');
         },

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

@@ -12,6 +12,10 @@ 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';
+import {
+  redirectMatchesOwner,
+  type TRouteOwnerFilter,
+} from './route-view-filters.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -23,6 +27,8 @@ declare global {
 export class OpsViewRedirects extends DeesElement {
   @property({ type: Boolean })
   accessor embedded = false;
+  @property({ type: String })
+  accessor ownerFilter: TRouteOwnerFilter = 'all';
 
   @state()
   accessor routeState: appstate.IRouteManagementState = appstate.routeManagementStatePart.getState()!;
@@ -72,7 +78,9 @@ export class OpsViewRedirects extends DeesElement {
   ];
 
   public render(): TemplateResult {
-    const redirects = this.routeState.httpRedirects || [];
+    const redirects = (this.routeState.httpRedirects || []).filter((redirect) => {
+      return redirectMatchesOwner(redirect, this.routeState.mergedRoutes, this.ownerFilter);
+    });
     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;

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

@@ -344,7 +344,7 @@ export class OpsViewRemoteIngress extends DeesElement {
               name: 'Enable',
               iconName: 'lucide:play',
               type: ['inRow', 'contextmenu'] as any,
-              actionRelevancyCheckFunc: (actionData: any) => !actionData.item.enabled,
+              actionRelevancyCheckFunc: (endpoint: any) => !endpoint.enabled,
               actionFunc: async (actionData: any) => {
                 const edge = actionData.item as interfaces.data.IRemoteIngress;
                 await appstate.remoteIngressStatePart.dispatchAction(
@@ -357,7 +357,7 @@ export class OpsViewRemoteIngress extends DeesElement {
               name: 'Disable',
               iconName: 'lucide:pause',
               type: ['inRow', 'contextmenu'] as any,
-              actionRelevancyCheckFunc: (actionData: any) => actionData.item.enabled,
+              actionRelevancyCheckFunc: (endpoint: any) => endpoint.enabled,
               actionFunc: async (actionData: any) => {
                 const edge = actionData.item as interfaces.data.IRemoteIngress;
                 await appstate.remoteIngressStatePart.dispatchAction(

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

@@ -1,9 +1,17 @@
 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,
+  routeMatchesOwner,
+  type TRouteOwnerFilter,
+} from './route-view-filters.js';
 import type {
   IRoutePathClassOption as ISzRoutePathClassOption,
   IRouteSourcePolicyPreset as ISzRouteSourcePolicyPreset,
@@ -21,9 +29,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 +336,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;
@@ -433,6 +414,25 @@ export class OpsViewRoutes extends DeesElement {
         gap: 24px;
       }
 
+      .routeFilters {
+        display: flex;
+        align-items: flex-start;
+        gap: 16px;
+        flex-wrap: wrap;
+      }
+
+      .routeFilter {
+        min-width: 0;
+        max-width: 100%;
+        overflow-x: auto;
+      }
+
+      @media (max-width: 760px) {
+        .routeFilters {
+          flex-direction: column;
+        }
+      }
+
       .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,41 +467,41 @@ 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) => {
+      return routeMatchesOwner(route, this.ownerFilter);
+    });
 
-    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 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: 'Total Routes',
+        title: 'Standard Routes',
         type: 'number',
-        value: mergedRoutes.length,
+        value: filteredRoutes.length,
         icon: 'lucide:route',
-        description: 'All configured routes',
+        description: 'Matching non-special routes',
         color: '#3b82f6',
       },
       {
         id: 'configRoutes',
         title: 'System Routes',
         type: 'number',
-        value: configCount,
+        value: systemCount,
         icon: 'lucide:settings',
         description: 'From config, email, and DNS',
         color: '#8b5cf6',
       },
       {
-        id: 'operatorRoutes',
-        title: 'Operator Routes',
+        id: 'userRoutes',
+        title: 'User Routes',
         type: 'number',
-        value: operatorCount,
+        value: userCount,
         icon: 'lucide:code',
-        description: 'Created directly by operators',
+        description: 'Created directly by users',
         color: '#0ea5e9',
       },
       {
@@ -515,20 +515,6 @@ export class OpsViewRoutes extends DeesElement {
       },
     ];
 
-    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;
-      }
-    });
-
     // Map filtered routes to sz-route-list-view format
     const szRoutes = filteredRoutes.map((mr) => {
       const tags = [...(mr.route.tags || [])];
@@ -549,69 +535,97 @@ 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`
-        <dees-statsgrid
-          .tiles=${statsTiles}
-          .gridActions=${[
-            {
-              name: 'Add Route',
-              iconName: 'lucide:plus',
-              action: () => this.showCreateRouteDialog(),
-            },
-            {
-              name: 'Refresh',
-              iconName: 'lucide:refreshCw',
-              action: () => this.refreshData(),
-            },
-          ]}
-        ></dees-statsgrid>
-
-        <dees-appui-tabs
-          .tabs=${this.ownerTabs}
-          .selectedTab=${this.getSelectedOwnerTab()}
-        ></dees-appui-tabs>
-
-        ${warnings.length > 0
+        <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>
+
+        ${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>`
+                : ''}
+              <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`
+                    <div class="warnings-bar">
+                      ${warnings.map(
+                        (warning) => html`
+                          <div class="warning-item">
+                            <span class="warning-icon">&#9888;</span>
+                            <span>${warning.message}</span>
+                          </div>
+                        `,
+                      )}
+                    </div>
+                  `
+                : ''}
+
+              ${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>
                     </div>
-                  `,
-                )}
-              </div>
+                  `}
             `
           : ''}
 
-        ${szRoutes.length > 0
+        ${this.activeSection === 'all' || this.activeSection === 'special'
           ? 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)}
-              ></sz-route-list-view>
+              <ops-view-special-forwards
+                .ownerFilter=${this.ownerFilter}
+              ></ops-view-special-forwards>
             `
-          : html`
-              <div class="empty-state">
-                <p>No ${this.getOwnerFilterLabel().toLowerCase()} routes</p>
-                <p>Choose another ownership filter or add an operator route.</p>
-              </div>
-            `}
-        `}
+          : ''}
+
+        ${this.activeSection === 'all' || this.activeSection === 'redirects'
+          ? html`
+              <ops-view-redirects
+                .embedded=${true}
+                .ownerFilter=${this.ownerFilter}
+              ></ops-view-redirects>
+            `
+          : ''}
       </div>
     `;
   }
@@ -1107,28 +1121,52 @@ export class OpsViewRoutes extends DeesElement {
     appstate.routeManagementStatePart.dispatchAction(appstate.fetchMergedRoutesAction, 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 getOwnerFilterLabel(): string {
-    return this.getSelectedOwnerTab().key;
+  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 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 +1185,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 +1256,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() {
+    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 appstate.routeManagementStatePart.dispatchAction(appstate.fetchMergedRoutesAction, null);
   }
 }