@serve.zone/dcrouter 7.4.3 → 8.1.0

package/ts_web/elements/ops-view-logs.ts

@@ -1,4 +1,3 @@
-import * as plugins from '../plugins.js';
 import * as shared from './shared/index.js';
 import * as appstate from '../appstate.js';
 
@@ -20,15 +19,6 @@ export class OpsViewLogs extends DeesElement {
     filters: {},
   };
 
-  @state()
-  accessor filterLevel: string | undefined;
-
-  @state()
-  accessor filterCategory: string | undefined;
-
-  @state()
-  accessor filterLimit: number = 100;
-
   private lastPushedCount = 0;
 
   constructor() {
@@ -44,63 +34,13 @@ export class OpsViewLogs extends DeesElement {
   public static styles = [
     cssManager.defaultStyles,
     shared.viewHostCss,
-    css`
-      .controls {
-        display: flex;
-        gap: 16px;
-        margin-bottom: 24px;
-        flex-wrap: wrap;
-      }
-
-      .filterGroup {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-    `,
+    css``,
   ];
 
   public render() {
     return html`
       <ops-sectionheading>Logs</ops-sectionheading>
 
-      <div class="controls">
-        <div class="filterGroup">
-          <dees-button
-            @click=${() => this.fetchLogs()}
-          >
-            Refresh Logs
-          </dees-button>
-        </div>
-
-        <div class="filterGroup">
-          <label>Level:</label>
-          <dees-input-dropdown
-            .options=${['all', 'debug', 'info', 'warn', 'error']}
-            .selectedOption=${'all'}
-            @selectedOption=${(e: any) => this.updateFilter('level', e.detail)}
-          ></dees-input-dropdown>
-        </div>
-
-        <div class="filterGroup">
-          <label>Category:</label>
-          <dees-input-dropdown
-            .options=${['all', 'smtp', 'dns', 'security', 'system', 'email']}
-            .selectedOption=${'all'}
-            @selectedOption=${(e: any) => this.updateFilter('category', e.detail)}
-          ></dees-input-dropdown>
-        </div>
-
-        <div class="filterGroup">
-          <label>Limit:</label>
-          <dees-input-dropdown
-            .options=${['50', '100', '200', '500']}
-            .selectedOption=${'100'}
-            @selectedOption=${(e: any) => this.updateFilter('limit', e.detail)}
-          ></dees-input-dropdown>
-        </div>
-      </div>
-
       <dees-chart-log
         .label=${'Application Logs'}
         .autoScroll=${true}
@@ -115,7 +55,7 @@ export class OpsViewLogs extends DeesElement {
     this.lastPushedCount = 0;
     // Only fetch if state is empty (streaming will handle new entries)
     if (this.logState.recentLogs.length === 0) {
-      this.fetchLogs();
+      await appstate.logStatePart.dispatchAction(appstate.fetchRecentLogsAction, { limit: 100 });
     }
   }
 
@@ -166,29 +106,4 @@ export class OpsViewLogs extends DeesElement {
     }));
   }
 
-  private async fetchLogs() {
-    await appstate.logStatePart.dispatchAction(appstate.fetchRecentLogsAction, {
-      limit: this.filterLimit,
-      level: this.filterLevel as 'debug' | 'info' | 'warn' | 'error' | undefined,
-      category: this.filterCategory as 'smtp' | 'dns' | 'security' | 'system' | 'email' | undefined,
-    });
-  }
-
-  private updateFilter(type: string, value: string) {
-    const resolved = value === 'all' ? undefined : value;
-
-    switch (type) {
-      case 'level':
-        this.filterLevel = resolved;
-        break;
-      case 'category':
-        this.filterCategory = resolved;
-        break;
-      case 'limit':
-        this.filterLimit = resolved ? parseInt(resolved, 10) : 100;
-        break;
-    }
-
-    this.fetchLogs();
-  }
 }

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

@@ -0,0 +1,389 @@
+import * as appstate from '../appstate.js';
+import * as interfaces from '../../dist_ts_interfaces/index.js';
+import { viewHostCss } from './shared/css.js';
+import { type IStatsTile } from '@design.estate/dees-catalog';
+
+import {
+  DeesElement,
+  css,
+  cssManager,
+  customElement,
+  html,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+@customElement('ops-view-routes')
+export class OpsViewRoutes extends DeesElement {
+  @state() accessor routeState: appstate.IRouteManagementState = {
+    mergedRoutes: [],
+    warnings: [],
+    apiTokens: [],
+    isLoading: false,
+    error: null,
+    lastUpdated: 0,
+  };
+
+  constructor() {
+    super();
+    const sub = appstate.routeManagementStatePart
+      .select((s) => s)
+      .subscribe((routeState) => {
+        this.routeState = routeState;
+      });
+    this.rxSubscriptions.push(sub);
+
+    // Re-fetch routes when user logs in (fixes race condition where
+    // the view is created before authentication completes)
+    const loginSub = appstate.loginStatePart
+      .select((s) => s.isLoggedIn)
+      .subscribe((isLoggedIn) => {
+        if (isLoggedIn) {
+          appstate.routeManagementStatePart.dispatchAction(appstate.fetchMergedRoutesAction, null);
+        }
+      });
+    this.rxSubscriptions.push(loginSub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      .routesContainer {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .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)')};
+        border-radius: 8px;
+        padding: 12px 16px;
+      }
+
+      .warning-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 4px 0;
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#b45309', '#fa0')};
+      }
+
+      .warning-icon {
+        flex-shrink: 0;
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 48px 24px;
+        color: ${cssManager.bdTheme('#6b7280', '#666')};
+      }
+
+      .empty-state p {
+        margin: 8px 0;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const { mergedRoutes, warnings } = this.routeState;
+
+    const hardcodedCount = mergedRoutes.filter((mr) => mr.source === 'hardcoded').length;
+    const programmaticCount = mergedRoutes.filter((mr) => mr.source === 'programmatic').length;
+    const disabledCount = mergedRoutes.filter((mr) => !mr.enabled).length;
+
+    const statsTiles: IStatsTile[] = [
+      {
+        id: 'totalRoutes',
+        title: 'Total Routes',
+        type: 'number',
+        value: mergedRoutes.length,
+        icon: 'lucide:route',
+        description: 'All configured routes',
+        color: '#3b82f6',
+      },
+      {
+        id: 'hardcoded',
+        title: 'Hardcoded',
+        type: 'number',
+        value: hardcodedCount,
+        icon: 'lucide:lock',
+        description: 'Routes from constructor config',
+        color: '#8b5cf6',
+      },
+      {
+        id: 'programmatic',
+        title: 'Programmatic',
+        type: 'number',
+        value: programmaticCount,
+        icon: 'lucide:code',
+        description: 'Routes added via API',
+        color: '#0ea5e9',
+      },
+      {
+        id: 'disabled',
+        title: 'Disabled',
+        type: 'number',
+        value: disabledCount,
+        icon: 'lucide:pauseCircle',
+        description: 'Currently disabled routes',
+        color: disabledCount > 0 ? '#ef4444' : '#6b7280',
+      },
+    ];
+
+    // Map merged routes to sz-route-list-view format
+    const szRoutes = mergedRoutes.map((mr) => {
+      const tags = [...(mr.route.tags || [])];
+      tags.push(mr.source);
+      if (!mr.enabled) tags.push('disabled');
+      if (mr.overridden) tags.push('overridden');
+
+      return {
+        ...mr.route,
+        enabled: mr.enabled,
+        tags,
+        id: mr.storedRouteId || mr.route.name || undefined,
+      };
+    });
+
+    return html`
+      <ops-sectionheading>Route Management</ops-sectionheading>
+
+      <div class="routesContainer">
+        <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(
+                  (w) => html`
+                    <div class="warning-item">
+                      <span class="warning-icon">&#9888;</span>
+                      <span>${w.message}</span>
+                    </div>
+                  `,
+                )}
+              </div>
+            `
+          : ''}
+
+        ${szRoutes.length > 0
+          ? html`
+              <sz-route-list-view
+                .routes=${szRoutes}
+                @route-click=${(e: CustomEvent) => this.handleRouteClick(e)}
+              ></sz-route-list-view>
+            `
+          : html`
+              <div class="empty-state">
+                <p>No routes configured</p>
+                <p>Add a programmatic route or check your constructor configuration.</p>
+              </div>
+            `}
+      </div>
+    `;
+  }
+
+  private async handleRouteClick(e: CustomEvent) {
+    const clickedRoute = e.detail;
+    if (!clickedRoute) return;
+
+    // Find the corresponding merged route
+    const merged = this.routeState.mergedRoutes.find(
+      (mr) => mr.route.name === clickedRoute.name,
+    );
+    if (!merged) return;
+
+    const { DeesModal } = await import('@design.estate/dees-catalog');
+
+    if (merged.source === 'hardcoded') {
+      const menuOptions = merged.enabled
+        ? [
+            {
+              name: 'Disable Route',
+              iconName: 'lucide:pause',
+              action: async (modalArg: any) => {
+                await appstate.routeManagementStatePart.dispatchAction(
+                  appstate.setRouteOverrideAction,
+                  { routeName: merged.route.name!, enabled: false },
+                );
+                await modalArg.destroy();
+              },
+            },
+            {
+              name: 'Close',
+              iconName: 'lucide:x',
+              action: async (modalArg: any) => await modalArg.destroy(),
+            },
+          ]
+        : [
+            {
+              name: 'Enable Route',
+              iconName: 'lucide:play',
+              action: async (modalArg: any) => {
+                await appstate.routeManagementStatePart.dispatchAction(
+                  appstate.setRouteOverrideAction,
+                  { routeName: merged.route.name!, enabled: true },
+                );
+                await modalArg.destroy();
+              },
+            },
+            {
+              name: 'Remove Override',
+              iconName: 'lucide:undo',
+              action: async (modalArg: any) => {
+                await appstate.routeManagementStatePart.dispatchAction(
+                  appstate.removeRouteOverrideAction,
+                  merged.route.name!,
+                );
+                await modalArg.destroy();
+              },
+            },
+            {
+              name: 'Close',
+              iconName: 'lucide:x',
+              action: async (modalArg: any) => await modalArg.destroy(),
+            },
+          ];
+
+      await DeesModal.createAndShow({
+        heading: `Route: ${merged.route.name}`,
+        content: html`
+          <div style="color: #ccc; padding: 8px 0;">
+            <p>Source: <strong style="color: #88f;">hardcoded</strong></p>
+            <p>Status: <strong>${merged.enabled ? 'Enabled' : 'Disabled (overridden)'}</strong></p>
+            <p style="color: #888; font-size: 13px;">Hardcoded routes cannot be edited or deleted, but they can be disabled via an override.</p>
+          </div>
+        `,
+        menuOptions,
+      });
+    } else {
+      // Programmatic route
+      await DeesModal.createAndShow({
+        heading: `Route: ${merged.route.name}`,
+        content: html`
+          <div style="color: #ccc; padding: 8px 0;">
+            <p>Source: <strong style="color: #0af;">programmatic</strong></p>
+            <p>Status: <strong>${merged.enabled ? 'Enabled' : 'Disabled'}</strong></p>
+            <p>ID: <code style="color: #888;">${merged.storedRouteId}</code></p>
+          </div>
+        `,
+        menuOptions: [
+          {
+            name: merged.enabled ? 'Disable' : 'Enable',
+            iconName: merged.enabled ? 'lucide:pause' : 'lucide:play',
+            action: async (modalArg: any) => {
+              await appstate.routeManagementStatePart.dispatchAction(
+                appstate.toggleRouteAction,
+                { id: merged.storedRouteId!, enabled: !merged.enabled },
+              );
+              await modalArg.destroy();
+            },
+          },
+          {
+            name: 'Delete',
+            iconName: 'lucide:trash-2',
+            action: async (modalArg: any) => {
+              await appstate.routeManagementStatePart.dispatchAction(
+                appstate.deleteRouteAction,
+                merged.storedRouteId!,
+              );
+              await modalArg.destroy();
+            },
+          },
+          {
+            name: 'Close',
+            iconName: 'lucide:x',
+            action: async (modalArg: any) => await modalArg.destroy(),
+          },
+        ],
+      });
+    }
+  }
+
+  private async showCreateRouteDialog() {
+    const { DeesModal } = await import('@design.estate/dees-catalog');
+
+    await DeesModal.createAndShow({
+      heading: 'Add Programmatic Route',
+      content: html`
+        <dees-form>
+          <dees-input-text .key=${'name'} .label=${'Route Name'} .required=${true}></dees-input-text>
+          <dees-input-text .key=${'ports'} .label=${'Ports (comma-separated)'} .required=${true}></dees-input-text>
+          <dees-input-text .key=${'domains'} .label=${'Domains (comma-separated, optional)'}></dees-input-text>
+          <dees-input-text .key=${'targetHost'} .label=${'Target Host'} .value=${'localhost'} .required=${true}></dees-input-text>
+          <dees-input-text .key=${'targetPort'} .label=${'Target Port'} .required=${true}></dees-input-text>
+        </dees-form>
+      `,
+      menuOptions: [
+        {
+          name: 'Cancel',
+          iconName: 'lucide:x',
+          action: async (modalArg: any) => await modalArg.destroy(),
+        },
+        {
+          name: 'Create',
+          iconName: 'lucide:plus',
+          action: async (modalArg: any) => {
+            const form = modalArg.shadowRoot?.querySelector('.content')?.querySelector('dees-form');
+            if (!form) return;
+            const formData = await form.collectFormData();
+            if (!formData.name || !formData.ports) return;
+
+            const ports = formData.ports.split(',').map((p: string) => parseInt(p.trim(), 10)).filter((p: number) => !isNaN(p));
+            const domains = formData.domains
+              ? formData.domains.split(',').map((d: string) => d.trim()).filter(Boolean)
+              : undefined;
+
+            const route: any = {
+              name: formData.name,
+              match: {
+                ports,
+                ...(domains && domains.length > 0 ? { domains } : {}),
+              },
+              action: {
+                type: 'forward',
+                targets: [
+                  {
+                    host: formData.targetHost || 'localhost',
+                    port: parseInt(formData.targetPort, 10),
+                  },
+                ],
+              },
+            };
+
+            await appstate.routeManagementStatePart.dispatchAction(
+              appstate.createRouteAction,
+              { route },
+            );
+            await modalArg.destroy();
+          },
+        },
+      ],
+    });
+  }
+
+  private refreshData() {
+    appstate.routeManagementStatePart.dispatchAction(appstate.fetchMergedRoutesAction, null);
+  }
+
+  async firstUpdated() {
+    await appstate.routeManagementStatePart.dispatchAction(appstate.fetchMergedRoutesAction, null);
+  }
+}

package/ts_web/plugins.ts

@@ -2,12 +2,16 @@
 import * as deesElement from '@design.estate/dees-element';
 import * as deesCatalog from '@design.estate/dees-catalog';
 
+// @serve.zone scope
+import * as szCatalog from '@serve.zone/catalog';
+
 // TypedSocket for real-time push communication
 import * as typedsocket from '@api.global/typedsocket';
 
 export {
   deesElement,
   deesCatalog,
+  szCatalog,
   typedsocket,
 }
 

package/ts_web/router.ts

@@ -3,11 +3,9 @@ import * as appstate from './appstate.js';
 
 const SmartRouter = plugins.domtools.plugins.smartrouter.SmartRouter;
 
-export const validViews = ['overview', 'network', 'emails', 'logs', 'configuration', 'security', 'certificates', 'remoteingress'] as const;
-export const validEmailFolders = ['queued', 'sent', 'failed', 'security'] as const;
+export const validViews = ['overview', 'network', 'emails', 'logs', 'routes', 'apitokens', 'configuration', 'security', 'certificates', 'remoteingress'] as const;
 
 export type TValidView = typeof validViews[number];
-export type TValidEmailFolder = typeof validEmailFolders[number];
 
 class AppRouter {
   private router: InstanceType<typeof SmartRouter>;
@@ -27,31 +25,10 @@ class AppRouter {
   }
 
   private setupRoutes(): void {
-    // Main views
     for (const view of validViews) {
-      if (view === 'emails') {
-        // Email root - default to queued
-        this.router.on('/emails', async () => {
-          this.updateViewState('emails');
-          this.updateEmailFolder('queued');
-        });
-
-        // Email with folder parameter
-        this.router.on('/emails/:folder', async (routeInfo) => {
-          const folder = routeInfo.params.folder as string;
-          if (validEmailFolders.includes(folder as TValidEmailFolder)) {
-            this.updateViewState('emails');
-            this.updateEmailFolder(folder as TValidEmailFolder);
-          } else {
-            // Invalid folder, redirect to queued
-            this.navigateTo('/emails/queued');
-          }
-        });
-      } else {
-        this.router.on(`/${view}`, async () => {
-          this.updateViewState(view);
-        });
-      }
+      this.router.on(`/${view}`, async () => {
+        this.updateViewState(view);
+      });
     }
 
     // Root redirect
@@ -61,60 +38,32 @@ class AppRouter {
   }
 
   private setupStateSync(): void {
-    // Sync URL when state changes programmatically (not from router)
     appstate.uiStatePart.state.subscribe((uiState) => {
       if (this.suppressStateUpdate) return;
 
       const currentPath = window.location.pathname;
-      const expectedPath = this.getExpectedPath(uiState.activeView);
+      const expectedPath = `/${uiState.activeView}`;
 
-      // Only update URL if it doesn't match current state
-      if (!currentPath.startsWith(expectedPath)) {
+      if (currentPath !== expectedPath) {
         this.suppressStateUpdate = true;
-        if (uiState.activeView === 'emails') {
-          const emailState = appstate.emailOpsStatePart.getState();
-          this.router.pushUrl(`/emails/${emailState.currentView}`);
-        } else {
-          this.router.pushUrl(`/${uiState.activeView}`);
-        }
+        this.router.pushUrl(expectedPath);
         this.suppressStateUpdate = false;
       }
     });
   }
 
-  private getExpectedPath(view: string): string {
-    if (view === 'emails') {
-      return '/emails';
-    }
-    return `/${view}`;
-  }
-
   private handleInitialRoute(): void {
     const path = window.location.pathname;
 
     if (!path || path === '/') {
-      // Redirect root to overview
       this.router.pushUrl('/overview');
     } else {
-      // Parse current path and update state
       const segments = path.split('/').filter(Boolean);
       const view = segments[0];
 
       if (validViews.includes(view as TValidView)) {
         this.updateViewState(view as TValidView);
-
-        if (view === 'emails' && segments[1]) {
-          const folder = segments[1];
-          if (validEmailFolders.includes(folder as TValidEmailFolder)) {
-            this.updateEmailFolder(folder as TValidEmailFolder);
-          } else {
-            this.updateEmailFolder('queued');
-          }
-        } else if (view === 'emails') {
-          this.updateEmailFolder('queued');
-        }
       } else {
-        // Invalid view, redirect to overview
         this.router.pushUrl('/overview');
       }
     }
@@ -132,18 +81,6 @@ class AppRouter {
     this.suppressStateUpdate = false;
   }
 
-  private updateEmailFolder(folder: TValidEmailFolder): void {
-    this.suppressStateUpdate = true;
-    const currentState = appstate.emailOpsStatePart.getState();
-    if (currentState.currentView !== folder) {
-      appstate.emailOpsStatePart.setState({
-        ...currentState,
-        currentView: folder as appstate.IEmailOpsState['currentView'],
-      });
-    }
-    this.suppressStateUpdate = false;
-  }
-
   public navigateTo(path: string): void {
     this.router.pushUrl(path);
   }
@@ -156,22 +93,10 @@ class AppRouter {
     }
   }
 
-  public navigateToEmailFolder(folder: string): void {
-    if (validEmailFolders.includes(folder as TValidEmailFolder)) {
-      this.navigateTo(`/emails/${folder}`);
-    } else {
-      this.navigateTo('/emails/queued');
-    }
-  }
-
   public getCurrentView(): string {
     return appstate.uiStatePart.getState().activeView;
   }
 
-  public getCurrentEmailFolder(): string {
-    return appstate.emailOpsStatePart.getState().currentView;
-  }
-
   public destroy(): void {
     this.router.destroy();
     this.initialized = false;