@serve.zone/dcrouter 13.2.2 → 13.4.0

package/ts_web/elements/email/ops-view-email-security.ts

@@ -0,0 +1,160 @@
+import * as appstate from '../../appstate.js';
+import { viewHostCss } from '../shared/css.js';
+
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { type IStatsTile } from '@design.estate/dees-catalog';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ops-view-email-security': OpsViewEmailSecurity;
+  }
+}
+
+@customElement('ops-view-email-security')
+export class OpsViewEmailSecurity extends DeesElement {
+  @state()
+  accessor statsState: appstate.IStatsState = appstate.statsStatePart.getState()!;
+
+  constructor() {
+    super();
+    const sub = appstate.statsStatePart
+      .select((s) => s)
+      .subscribe((s) => {
+        this.statsState = s;
+      });
+    this.rxSubscriptions.push(sub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      h2 {
+        margin: 32px 0 16px 0;
+        font-size: 24px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#333', '#ccc')};
+      }
+      dees-statsgrid {
+        margin-bottom: 32px;
+      }
+      .securityCard {
+        background: ${cssManager.bdTheme('#fff', '#222')};
+        border: 1px solid ${cssManager.bdTheme('#e9ecef', '#333')};
+        border-radius: 8px;
+        padding: 24px;
+        position: relative;
+        overflow: hidden;
+      }
+      .actionButton {
+        margin-top: 16px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const metrics = this.statsState.securityMetrics;
+
+    if (!metrics) {
+      return html`
+        <div class="loadingMessage">
+          <p>Loading security metrics...</p>
+        </div>
+      `;
+    }
+
+    const tiles: IStatsTile[] = [
+      {
+        id: 'malware',
+        title: 'Malware Detection',
+        value: metrics.malwareDetected,
+        type: 'number',
+        icon: 'lucide:BugOff',
+        color: metrics.malwareDetected > 0 ? '#ef4444' : '#22c55e',
+        description: 'Malware detected',
+      },
+      {
+        id: 'phishing',
+        title: 'Phishing Detection',
+        value: metrics.phishingDetected,
+        type: 'number',
+        icon: 'lucide:Fish',
+        color: metrics.phishingDetected > 0 ? '#ef4444' : '#22c55e',
+        description: 'Phishing attempts detected',
+      },
+      {
+        id: 'suspicious',
+        title: 'Suspicious Activities',
+        value: metrics.suspiciousActivities,
+        type: 'number',
+        icon: 'lucide:TriangleAlert',
+        color: metrics.suspiciousActivities > 5 ? '#ef4444' : '#f59e0b',
+        description: 'Suspicious activities detected',
+      },
+      {
+        id: 'spam',
+        title: 'Spam Detection',
+        value: metrics.spamDetected,
+        type: 'number',
+        icon: 'lucide:Ban',
+        color: '#f59e0b',
+        description: 'Spam emails blocked',
+      },
+    ];
+
+    return html`
+      <dees-heading level="hr">Email Security</dees-heading>
+
+      <dees-statsgrid
+        .tiles=${tiles}
+        .minTileWidth=${200}
+      ></dees-statsgrid>
+
+      <h2>Email Security Configuration</h2>
+      <div class="securityCard">
+        <dees-form>
+          <dees-input-checkbox
+            .key=${'enableSPF'}
+            .label=${'Enable SPF checking'}
+            .value=${true}
+          ></dees-input-checkbox>
+          <dees-input-checkbox
+            .key=${'enableDKIM'}
+            .label=${'Enable DKIM validation'}
+            .value=${true}
+          ></dees-input-checkbox>
+          <dees-input-checkbox
+            .key=${'enableDMARC'}
+            .label=${'Enable DMARC policy enforcement'}
+            .value=${true}
+          ></dees-input-checkbox>
+          <dees-input-checkbox
+            .key=${'enableSpamFilter'}
+            .label=${'Enable spam filtering'}
+            .value=${true}
+          ></dees-input-checkbox>
+        </dees-form>
+        <dees-button
+          class="actionButton"
+          type="highlighted"
+          @click=${() => this.saveEmailSecuritySettings()}
+        >
+          Save Settings
+        </dees-button>
+      </div>
+    `;
+  }
+
+  private async saveEmailSecuritySettings() {
+    // Config is read-only from the UI for now
+    alert('Email security settings are read-only. Update the dcrouter configuration file to change these settings.');
+  }
+}

package/ts_web/elements/{ops-view-emails.ts → email/ops-view-emails.ts}

@@ -1,8 +1,8 @@
 import { DeesElement, property, html, customElement, type TemplateResult, css, state, cssManager } from '@design.estate/dees-element';
-import * as plugins from '../plugins.js';
-import * as appstate from '../appstate.js';
-import * as shared from './shared/index.js';
-import * as interfaces from '../../dist_ts_interfaces/index.js';
+import * as plugins from '../../plugins.js';
+import * as appstate from '../../appstate.js';
+import * as shared from '../shared/index.js';
+import * as interfaces from '../../../dist_ts_interfaces/index.js';
 
 declare global {
   interface HTMLElementTagNameMap {

package/ts_web/elements/index.ts

@@ -1,16 +1,9 @@
 export * from './ops-dashboard.js';
-export * from './ops-view-overview.js';
-export * from './ops-view-network.js';
-export * from './ops-view-emails.js';
+export * from './overview/index.js';
+export * from './network/index.js';
+export * from './email/index.js';
 export * from './ops-view-logs.js';
-export * from './ops-view-config.js';
-export * from './ops-view-routes.js';
-export * from './ops-view-apitokens.js';
-export * from './ops-view-security.js';
+export * from './access/index.js';
+export * from './security/index.js';
 export * from './ops-view-certificates.js';
-export * from './ops-view-remoteingress.js';
-export * from './ops-view-vpn.js';
-export * from './ops-view-sourceprofiles.js';
-export * from './ops-view-networktargets.js';
-export * from './ops-view-targetprofiles.js';
-export * from './shared/index.js';
+export * from './shared/index.js';

package/ts_web/elements/network/index.ts

@@ -0,0 +1,7 @@
+export * from './ops-view-network-activity.js';
+export * from './ops-view-routes.js';
+export * from './ops-view-sourceprofiles.js';
+export * from './ops-view-networktargets.js';
+export * from './ops-view-targetprofiles.js';
+export * from './ops-view-remoteingress.js';
+export * from './ops-view-vpn.js';

package/ts_web/elements/{ops-view-network.ts → network/ops-view-network-activity.ts}

@@ -1,12 +1,12 @@
 import { DeesElement, property, html, customElement, type TemplateResult, css, state, cssManager } from '@design.estate/dees-element';
-import * as appstate from '../appstate.js';
-import * as interfaces from '../../dist_ts_interfaces/index.js';
-import { viewHostCss } from './shared/css.js';
+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';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'ops-view-network': OpsViewNetwork;
+    'ops-view-network-activity': OpsViewNetworkActivity;
   }
 }
 
@@ -26,14 +26,14 @@ interface INetworkRequest {
   route?: string;
 }
 
-@customElement('ops-view-network')
-export class OpsViewNetwork extends DeesElement {
+@customElement('ops-view-network-activity')
+export class OpsViewNetworkActivity extends DeesElement {
   /** How far back the traffic chart shows */
   private static readonly CHART_WINDOW_MS = 5 * 60 * 1000; // 5 minutes
   /** How often a new data point is added */
   private static readonly UPDATE_INTERVAL_MS = 1000; // 1 second
   /** Derived: max data points the buffer holds */
-  private static readonly MAX_DATA_POINTS = OpsViewNetwork.CHART_WINDOW_MS / OpsViewNetwork.UPDATE_INTERVAL_MS;
+  private static readonly MAX_DATA_POINTS = OpsViewNetworkActivity.CHART_WINDOW_MS / OpsViewNetworkActivity.UPDATE_INTERVAL_MS;
 
   @state()
   accessor statsState = appstate.statsStatePart.getState()!;
@@ -50,10 +50,10 @@ export class OpsViewNetwork extends DeesElement {
 
   @state()
   accessor trafficDataOut: Array<{ x: string | number; y: number }> = [];
-  
+
   // Track if we need to update the chart to avoid unnecessary re-renders
   private lastChartUpdate = 0;
-  private chartUpdateThreshold = OpsViewNetwork.UPDATE_INTERVAL_MS; // Minimum ms between chart updates
+  private chartUpdateThreshold = OpsViewNetworkActivity.UPDATE_INTERVAL_MS; // Minimum ms between chart updates
 
   private trafficUpdateTimer: any = null;
   private requestsPerSecHistory: number[] = []; // Track requests/sec over time for trend
@@ -101,17 +101,17 @@ export class OpsViewNetwork extends DeesElement {
       this.updateNetworkData();
     });
     this.rxSubscriptions.push(statsUnsubscribe);
-    
+
     const networkUnsubscribe = appstate.networkStatePart.select().subscribe((state) => {
       this.networkState = state;
       this.updateNetworkData();
     });
     this.rxSubscriptions.push(networkUnsubscribe);
   }
-  
+
   private initializeTrafficData() {
     const now = Date.now();
-    const { MAX_DATA_POINTS, UPDATE_INTERVAL_MS } = OpsViewNetwork;
+    const { MAX_DATA_POINTS, UPDATE_INTERVAL_MS } = OpsViewNetworkActivity;
 
     // Initialize with empty data points for both in and out
     const emptyData = Array.from({ length: MAX_DATA_POINTS }, (_, i) => {
@@ -148,7 +148,7 @@ export class OpsViewNetwork extends DeesElement {
       y: Math.round((p.out * 8) / 1000000 * 10) / 10,
     }));
 
-    const { MAX_DATA_POINTS, UPDATE_INTERVAL_MS } = OpsViewNetwork;
+    const { MAX_DATA_POINTS, UPDATE_INTERVAL_MS } = OpsViewNetworkActivity;
 
     // Use history as the chart data, keeping the most recent points within the window
     const sliceStart = Math.max(0, historyIn.length - MAX_DATA_POINTS);
@@ -285,8 +285,8 @@ export class OpsViewNetwork extends DeesElement {
 
   public render() {
     return html`
-      <dees-heading level="2">Network Activity</dees-heading>
-      
+      <dees-heading level="hr">Network Activity</dees-heading>
+
       <div class="networkContainer">
         <!-- Stats Grid -->
         ${this.renderNetworkStats()}
@@ -307,7 +307,7 @@ export class OpsViewNetwork extends DeesElement {
             }
           ]}
           .realtimeMode=${true}
-          .rollingWindow=${OpsViewNetwork.CHART_WINDOW_MS}
+          .rollingWindow=${OpsViewNetworkActivity.CHART_WINDOW_MS}
           .yAxisFormatter=${(val: number) => `${val} Mbit/s`}
         ></dees-chart-area>
 
@@ -323,7 +323,6 @@ export class OpsViewNetwork extends DeesElement {
         <!-- Requests Table -->
         <dees-table
           .data=${this.networkRequests}
-          .showColumnFilters=${true}
           .displayFunction=${(req: INetworkRequest) => ({
             Time: new Date(req.timestamp).toLocaleTimeString(),
             Protocol: html`<span class="protocolBadge ${req.protocol}">${req.protocol.toUpperCase()}</span>`,
@@ -358,7 +357,7 @@ export class OpsViewNetwork extends DeesElement {
 
   private async showRequestDetails(request: INetworkRequest) {
     const { DeesModal } = await import('@design.estate/dees-catalog');
-    
+
     await DeesModal.createAndShow({
       heading: 'Request Details',
       content: html`
@@ -401,10 +400,10 @@ export class OpsViewNetwork extends DeesElement {
     if (!statusCode) {
       return html`<span class="statusBadge warning">N/A</span>`;
     }
-    
+
     const statusClass = statusCode >= 200 && statusCode < 300 ? 'success' :
                        statusCode >= 400 ? 'error' : 'warning';
-    
+
     return html`<span class="statusBadge ${statusClass}">${statusCode}</span>`;
   }
 
@@ -427,26 +426,26 @@ export class OpsViewNetwork extends DeesElement {
     const units = ['B', 'KB', 'MB', 'GB'];
     let size = bytes;
     let unitIndex = 0;
-    
+
     while (size >= 1024 && unitIndex < units.length - 1) {
       size /= 1024;
       unitIndex++;
     }
-    
+
     return `${size.toFixed(1)} ${units[unitIndex]}`;
   }
-  
+
   private formatBitsPerSecond(bytesPerSecond: number): string {
     const bitsPerSecond = bytesPerSecond * 8; // Convert bytes to bits
     const units = ['bit/s', 'kbit/s', 'Mbit/s', 'Gbit/s'];
     let size = bitsPerSecond;
     let unitIndex = 0;
-    
+
     while (size >= 1000 && unitIndex < units.length - 1) {
       size /= 1000; // Use 1000 for bits (not 1024)
       unitIndex++;
     }
-    
+
     return `${size.toFixed(1)} ${units[unitIndex]}`;
   }
 
@@ -521,18 +520,9 @@ export class OpsViewNetwork extends DeesElement {
     ];
 
     return html`
-      <dees-statsgrid 
+      <dees-statsgrid
         .tiles=${tiles}
         .minTileWidth=${200}
-        .gridActions=${[
-          {
-            name: 'Export Data',
-            iconName: 'lucide:FileOutput',
-            action: async () => {
-              console.log('Export feature coming soon');
-            },
-          },
-        ]}
       ></dees-statsgrid>
     `;
   }
@@ -604,7 +594,6 @@ export class OpsViewNetwork extends DeesElement {
     return html`
       <dees-table
         .data=${this.networkState.topIPs}
-        .showColumnFilters=${true}
         .displayFunction=${(ipData: { ip: string; count: number }) => {
           const bw = bandwidthByIP.get(ipData.ip);
           return {
@@ -632,7 +621,6 @@ export class OpsViewNetwork extends DeesElement {
     return html`
       <dees-table
         .data=${backends}
-        .showColumnFilters=${true}
         .displayFunction=${(item: interfaces.data.IBackendInfo) => {
           const totalErrors = item.connectErrors + item.handshakeErrors + item.requestErrors;
           const protocolClass = item.protocol.toLowerCase().replace(/[^a-z0-9]/g, '');
@@ -735,12 +723,12 @@ export class OpsViewNetwork extends DeesElement {
     // Only update if connections changed significantly
     const newConnectionCount = this.networkState.connections.length;
     const oldConnectionCount = this.networkRequests.length;
-    
+
     // Check if we need to update the network requests array
-    const shouldUpdate = newConnectionCount !== oldConnectionCount || 
+    const shouldUpdate = newConnectionCount !== oldConnectionCount ||
                         newConnectionCount === 0 ||
                         (newConnectionCount > 0 && this.networkRequests.length === 0);
-    
+
     if (shouldUpdate) {
       // Convert connection data to network requests format
       if (newConnectionCount > 0) {
@@ -763,62 +751,62 @@ export class OpsViewNetwork extends DeesElement {
         this.networkRequests = [];
       }
     }
-    
+
     // Load server-side throughput history into chart (once)
     if (!this.historyLoaded && this.networkState.throughputHistory && this.networkState.throughputHistory.length > 0) {
       this.loadThroughputHistory();
     }
   }
-  
+
   private startTrafficUpdateTimer() {
     this.stopTrafficUpdateTimer(); // Clear any existing timer
     this.trafficUpdateTimer = setInterval(() => {
       this.addTrafficDataPoint();
-    }, OpsViewNetwork.UPDATE_INTERVAL_MS);
+    }, OpsViewNetworkActivity.UPDATE_INTERVAL_MS);
   }
-  
+
   private addTrafficDataPoint() {
     const now = Date.now();
-    
+
     // Throttle chart updates to avoid excessive re-renders
     if (now - this.lastChartUpdate < this.chartUpdateThreshold) {
       return;
     }
-    
+
     const throughput = this.calculateThroughput();
-    
+
     // Convert to Mbps (bytes * 8 / 1,000,000)
     const throughputInMbps = (throughput.in * 8) / 1000000;
     const throughputOutMbps = (throughput.out * 8) / 1000000;
-    
+
     // Add new data points
     const timestamp = new Date(now).toISOString();
-    
+
     const newDataPointIn = {
       x: timestamp,
       y: Math.round(throughputInMbps * 10) / 10
     };
-    
+
     const newDataPointOut = {
       x: timestamp,
       y: Math.round(throughputOutMbps * 10) / 10
     };
-    
+
     // In-place mutation then reassign for Lit reactivity (avoids 4 intermediate arrays)
-    if (this.trafficDataIn.length >= OpsViewNetwork.MAX_DATA_POINTS) {
+    if (this.trafficDataIn.length >= OpsViewNetworkActivity.MAX_DATA_POINTS) {
       this.trafficDataIn.shift();
       this.trafficDataOut.shift();
     }
     this.trafficDataIn = [...this.trafficDataIn, newDataPointIn];
     this.trafficDataOut = [...this.trafficDataOut, newDataPointOut];
-    
+
     this.lastChartUpdate = now;
   }
-  
+
   private stopTrafficUpdateTimer() {
     if (this.trafficUpdateTimer) {
       clearInterval(this.trafficUpdateTimer);
       this.trafficUpdateTimer = null;
     }
   }
-}
+}

package/ts_web/elements/{ops-view-networktargets.ts → network/ops-view-networktargets.ts}

@@ -7,9 +7,9 @@ import {
   state,
   cssManager,
 } from '@design.estate/dees-element';
-import * as appstate from '../appstate.js';
-import * as interfaces from '../../dist_ts_interfaces/index.js';
-import { viewHostCss } from './shared/css.js';
+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';
 
 declare global {
@@ -64,7 +64,7 @@ export class OpsViewNetworkTargets extends DeesElement {
     ];
 
     return html`
-      <dees-heading level="2">Network Targets</dees-heading>
+      <dees-heading level="hr">Network Targets</dees-heading>
       <div class="targetsContainer">
         <dees-statsgrid .tiles=${statsTiles}></dees-statsgrid>
         <dees-table

package/ts_web/elements/{ops-view-remoteingress.ts → network/ops-view-remoteingress.ts}

@@ -7,9 +7,9 @@ import {
   state,
   cssManager,
 } from '@design.estate/dees-element';
-import * as appstate from '../appstate.js';
-import * as interfaces from '../../dist_ts_interfaces/index.js';
-import { viewHostCss } from './shared/css.js';
+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';
 
 declare global {
@@ -174,7 +174,7 @@ export class OpsViewRemoteIngress extends DeesElement {
     ];
 
     return html`
-      <dees-heading level="2">Remote Ingress</dees-heading>
+      <dees-heading level="hr">Remote Ingress</dees-heading>
 
       ${this.riState.newEdgeId ? html`
         <div class="secretDialog">

package/ts_web/elements/{ops-view-routes.ts → network/ops-view-routes.ts}

@@ -1,6 +1,6 @@
-import * as appstate from '../appstate.js';
-import * as interfaces from '../../dist_ts_interfaces/index.js';
-import { viewHostCss } from './shared/css.js';
+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 {
@@ -200,7 +200,7 @@ export class OpsViewRoutes extends DeesElement {
     });
 
     return html`
-      <dees-heading level="2">Route Management</dees-heading>
+      <dees-heading level="hr">Route Management</dees-heading>
 
       <div class="routesContainer">
         <dees-statsgrid

package/ts_web/elements/{ops-view-sourceprofiles.ts → network/ops-view-sourceprofiles.ts}

@@ -7,9 +7,9 @@ import {
   state,
   cssManager,
 } from '@design.estate/dees-element';
-import * as appstate from '../appstate.js';
-import * as interfaces from '../../dist_ts_interfaces/index.js';
-import { viewHostCss } from './shared/css.js';
+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';
 
 declare global {
@@ -64,7 +64,7 @@ export class OpsViewSourceProfiles extends DeesElement {
     ];
 
     return html`
-      <dees-heading level="2">Source Profiles</dees-heading>
+      <dees-heading level="hr">Source Profiles</dees-heading>
       <div class="profilesContainer">
         <dees-statsgrid .tiles=${statsTiles}></dees-statsgrid>
         <dees-table

package/ts_web/elements/{ops-view-targetprofiles.ts → network/ops-view-targetprofiles.ts}

@@ -7,10 +7,10 @@ import {
   state,
   cssManager,
 } from '@design.estate/dees-element';
-import * as plugins from '../plugins.js';
-import * as appstate from '../appstate.js';
-import * as interfaces from '../../dist_ts_interfaces/index.js';
-import { viewHostCss } from './shared/css.js';
+import * as plugins from '../../plugins.js';
+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';
 
 declare global {
@@ -77,7 +77,7 @@ export class OpsViewTargetProfiles extends DeesElement {
     ];
 
     return html`
-      <dees-heading level="2">Target Profiles</dees-heading>
+      <dees-heading level="hr">Target Profiles</dees-heading>
       <div class="profilesContainer">
         <dees-statsgrid .tiles=${statsTiles}></dees-statsgrid>
         <dees-table

package/ts_web/elements/{ops-view-vpn.ts → network/ops-view-vpn.ts}

@@ -7,10 +7,10 @@ import {
   state,
   cssManager,
 } from '@design.estate/dees-element';
-import * as plugins from '../plugins.js';
-import * as appstate from '../appstate.js';
-import * as interfaces from '../../dist_ts_interfaces/index.js';
-import { viewHostCss } from './shared/css.js';
+import * as plugins from '../../plugins.js';
+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';
 
 /**
@@ -223,7 +223,7 @@ export class OpsViewVpn extends DeesElement {
     ];
 
     return html`
-      <dees-heading level="2">VPN</dees-heading>
+      <dees-heading level="hr">VPN</dees-heading>
       <div class="vpnContainer">
 
       ${this.vpnState.newClientConfig ? html`