@serve.zone/dcrouter 13.42.3 → 13.43.0

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

@@ -0,0 +1,202 @@
+import {
+  DeesElement,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  state,
+  cssManager,
+} from '@design.estate/dees-element';
+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';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ops-view-redirects': OpsViewRedirects;
+  }
+}
+
+@customElement('ops-view-redirects')
+export class OpsViewRedirects extends DeesElement {
+  @state()
+  accessor routeState: appstate.IRouteManagementState = appstate.routeManagementStatePart.getState()!;
+
+  constructor() {
+    super();
+    const routeSub = appstate.routeManagementStatePart.select().subscribe((routeState) => {
+      this.routeState = routeState;
+    });
+    this.rxSubscriptions.push(routeSub);
+
+    const loginSub = appstate.loginStatePart
+      .select((state) => state.isLoggedIn)
+      .subscribe((isLoggedIn) => {
+        if (isLoggedIn) {
+          void this.refreshData();
+        }
+      });
+    this.rxSubscriptions.push(loginSub);
+  }
+
+  async connectedCallback() {
+    await super.connectedCallback();
+    await this.refreshData();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      .redirectsContainer {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 48px 24px;
+        color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
+      }
+
+      .empty-state p {
+        margin: 8px 0;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const redirects = this.routeState.httpRedirects || [];
+    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;
+    const remoteIngressCount = redirects.filter((redirect) => redirect.remoteIngress).length;
+
+    const statsTiles: IStatsTile[] = [
+      {
+        id: 'totalRedirects',
+        title: 'Total Redirects',
+        type: 'number',
+        value: redirects.length,
+        icon: 'lucide:CornerDownRight',
+        description: 'Derived HTTP to HTTPS scopes',
+        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:AlertTriangle',
+        description: 'Overlaps explicit HTTP routes',
+        color: skippedCount > 0 ? '#f59e0b' : '#6b7280',
+      },
+      {
+        id: 'remoteIngressRedirects',
+        title: 'Remote Ingress',
+        type: 'number',
+        value: remoteIngressCount,
+        icon: 'lucide:Globe',
+        description: 'Also exposed to edge nodes',
+        color: '#0ea5e9',
+      },
+    ];
+
+    return html`
+      <dees-heading level="3">Redirects</dees-heading>
+      <div class="redirectsContainer">
+        <dees-statsgrid .tiles=${statsTiles}></dees-statsgrid>
+
+        ${redirects.length > 0
+          ? html`
+              <dees-table
+                .heading1=${'HTTP to HTTPS Redirects'}
+                .heading2=${'Runtime redirects derived from enabled HTTPS routes'}
+                .data=${redirects}
+                .showColumnFilters=${true}
+                .displayFunction=${(redirect: interfaces.data.IHttpRedirectInfo) => ({
+                  Status: this.formatStatus(redirect.status),
+                  'Domain Pattern': redirect.domainPattern,
+                  Path: redirect.pathPattern || '*',
+                  From: this.formatHttpTemplate(redirect, 'http'),
+                  To: this.formatHttpTemplate(redirect, 'https'),
+                  Code: redirect.statusCode,
+                  Priority: redirect.priority,
+                  'Source HTTPS Route': redirect.sourceRouteNames.join(', ') || '-',
+                  'Covered By': redirect.coveredByRouteNames.join(', ') || '-',
+                  Notes: this.formatNotes(redirect),
+                })}
+                .dataActions=${[
+                  {
+                    name: 'Refresh',
+                    iconName: 'lucide:RefreshCw',
+                    type: ['header' as const],
+                    actionFunc: async () => this.refreshData(),
+                  },
+                ]}
+              ></dees-table>
+            `
+          : html`
+              <dees-table
+                .heading1=${'HTTP to HTTPS Redirects'}
+                .heading2=${'Runtime redirects derived from enabled HTTPS routes'}
+                .data=${[]}
+                .displayFunction=${() => ({})}
+                .dataActions=${[
+                  {
+                    name: 'Refresh',
+                    iconName: 'lucide:RefreshCw',
+                    type: ['header' as const],
+                    actionFunc: async () => this.refreshData(),
+                  },
+                ]}
+              ></dees-table>
+              <div class="empty-state">
+                <p>No derived redirects</p>
+                <p>Enable HTTPS routes with explicit domains to generate HTTP to HTTPS redirects.</p>
+              </div>
+            `}
+      </div>
+    `;
+  }
+
+  private async refreshData(): Promise<void> {
+    await appstate.routeManagementStatePart.dispatchAction(appstate.fetchHttpRedirectsAction, null);
+  }
+
+  private formatStatus(status: interfaces.data.THttpRedirectStatus): string {
+    return status.charAt(0).toUpperCase() + status.slice(1);
+  }
+
+  private formatHttpTemplate(redirect: interfaces.data.IHttpRedirectInfo, protocol: 'http' | 'https'): string {
+    return `${protocol}://${redirect.domainPattern}${redirect.pathPattern || '{path}'}`;
+  }
+
+  private formatNotes(redirect: interfaces.data.IHttpRedirectInfo): string {
+    const notes = redirect.notes ? [redirect.notes] : [];
+    if (redirect.remoteIngress) {
+      notes.push('Remote Ingress enabled');
+    }
+    return notes.join(' ') || 'Generated from HTTPS route';
+  }
+}

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

@@ -293,6 +293,7 @@ export class OpsViewRoutes extends DeesElement {
   @state() accessor routeState: appstate.IRouteManagementState = {
     mergedRoutes: [],
     warnings: [],
+    httpRedirects: [],
     apiTokens: [],
     gatewayClients: [],
     isLoading: false,

package/ts_web/elements/ops-dashboard.ts

@@ -23,6 +23,7 @@ import { OpsViewConfig } from './overview/ops-view-config.js';
 // Network group
 import { OpsViewNetworkActivity } from './network/ops-view-network-activity.js';
 import { OpsViewRoutes } from './network/ops-view-routes.js';
+import { OpsViewRedirects } from './network/ops-view-redirects.js';
 import { OpsViewSourceProfiles } from './network/ops-view-sourceprofiles.js';
 import { OpsViewNetworkTargets } from './network/ops-view-networktargets.js';
 import { OpsViewTargetProfiles } from './network/ops-view-targetprofiles.js';
@@ -100,6 +101,7 @@ export class OpsDashboard extends DeesElement {
       subViews: [
         { slug: 'activity', name: 'Network Activity', iconName: 'lucide:activity', element: OpsViewNetworkActivity },
         { slug: 'routes', name: 'Routes', iconName: 'lucide:route', element: OpsViewRoutes },
+        { slug: 'redirects', name: 'Redirects', iconName: 'lucide:CornerDownRight', element: OpsViewRedirects },
         { slug: 'sourceprofiles', name: 'Source Profiles', iconName: 'lucide:shieldCheck', element: OpsViewSourceProfiles },
         { slug: 'networktargets', name: 'Network Targets', iconName: 'lucide:server', element: OpsViewNetworkTargets },
         { slug: 'targetprofiles', name: 'Target Profiles', iconName: 'lucide:target', element: OpsViewTargetProfiles },

package/ts_web/router.ts

@@ -9,7 +9,7 @@ const flatViews = ['logs'] as const;
 // Tabbed views and their valid subviews
 const subviewMap: Record<string, readonly string[]> = {
   overview: ['stats', 'configuration'] as const,
-  network: ['activity', 'routes', 'sourceprofiles', 'networktargets', 'targetprofiles', 'remoteingress', 'vpn'] as const,
+  network: ['activity', 'routes', 'redirects', 'sourceprofiles', 'networktargets', 'targetprofiles', 'remoteingress', 'vpn'] as const,
   email: ['log', 'security', 'domains'] as const,
   access: ['gatewayclients', 'apitokens', 'users'] as const,
   security: ['overview', 'blocked', 'authentication'] as const,