@serve.zone/dcrouter 2.12.4 → 5.0.3

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

@@ -14,7 +14,7 @@ import {
 @customElement('ops-view-logs')
 export class OpsViewLogs extends DeesElement {
   @state()
-  private logState: appstate.ILogState = {
+  accessor logState: appstate.ILogState = {
     recentLogs: [],
     isStreaming: false,
     filters: {},
@@ -48,7 +48,7 @@ export class OpsViewLogs extends DeesElement {
       }
 
       .logContainer {
-        background: #1e1e1e;
+        background: ${cssManager.bdTheme('#f8f9fa', '#1e1e1e')};
         border-radius: 8px;
         padding: 16px;
         max-height: 600px;
@@ -63,7 +63,7 @@ export class OpsViewLogs extends DeesElement {
       }
 
       .logTimestamp {
-        color: #7a7a7a;
+        color: ${cssManager.bdTheme('#7a7a7a', '#7a7a7a')};
         margin-right: 8px;
       }
 
@@ -76,33 +76,33 @@ export class OpsViewLogs extends DeesElement {
       }
 
       .logLevel.debug { 
-        color: #6a9955; 
-        background: rgba(106, 153, 85, 0.1);
+        color: ${cssManager.bdTheme('#6a9955', '#6a9955')}; 
+        background: ${cssManager.bdTheme('rgba(106, 153, 85, 0.1)', 'rgba(106, 153, 85, 0.1)')};
       }
       .logLevel.info { 
-        color: #569cd6; 
-        background: rgba(86, 156, 214, 0.1);
+        color: ${cssManager.bdTheme('#569cd6', '#569cd6')}; 
+        background: ${cssManager.bdTheme('rgba(86, 156, 214, 0.1)', 'rgba(86, 156, 214, 0.1)')};
       }
       .logLevel.warn { 
-        color: #ce9178; 
-        background: rgba(206, 145, 120, 0.1);
+        color: ${cssManager.bdTheme('#ce9178', '#ce9178')}; 
+        background: ${cssManager.bdTheme('rgba(206, 145, 120, 0.1)', 'rgba(206, 145, 120, 0.1)')};
       }
       .logLevel.error { 
-        color: #f44747; 
-        background: rgba(244, 71, 71, 0.1);
+        color: ${cssManager.bdTheme('#f44747', '#f44747')}; 
+        background: ${cssManager.bdTheme('rgba(244, 71, 71, 0.1)', 'rgba(244, 71, 71, 0.1)')};
       }
 
       .logCategory {
-        color: #c586c0;
+        color: ${cssManager.bdTheme('#c586c0', '#c586c0')};
         margin-right: 8px;
       }
 
       .logMessage {
-        color: #d4d4d4;
+        color: ${cssManager.bdTheme('#333', '#d4d4d4')};
       }
 
       .noLogs {
-        color: #7a7a7a;
+        color: ${cssManager.bdTheme('#7a7a7a', '#7a7a7a')};
         text-align: center;
         padding: 40px;
       }

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

@@ -0,0 +1,580 @@
+import { DeesElement, property, html, customElement, type TemplateResult, css, state, cssManager } from '@design.estate/dees-element';
+import * as appstate from '../appstate.js';
+import { viewHostCss } from './shared/css.js';
+import { type IStatsTile } from '@design.estate/dees-catalog';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ops-view-network': OpsViewNetwork;
+  }
+}
+
+interface INetworkRequest {
+  id: string;
+  timestamp: number;
+  method: string;
+  url: string;
+  hostname: string;
+  port: number;
+  protocol: 'http' | 'https' | 'tcp' | 'udp';
+  statusCode?: number;
+  duration: number;
+  bytesIn: number;
+  bytesOut: number;
+  remoteIp: string;
+  route?: string;
+}
+
+@customElement('ops-view-network')
+export class OpsViewNetwork extends DeesElement {
+  @state()
+  accessor statsState = appstate.statsStatePart.getState();
+
+  @state()
+  accessor networkState = appstate.networkStatePart.getState();
+
+
+  @state()
+  accessor networkRequests: INetworkRequest[] = [];
+
+  @state()
+  accessor trafficDataIn: Array<{ x: string | number; y: number }> = [];
+
+  @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 = 1000; // Minimum ms between chart updates
+  
+  private lastTrafficUpdateTime = 0;
+  private trafficUpdateInterval = 1000; // Update every 1 second
+  private requestCountHistory = new Map<number, number>(); // Track requests per time bucket
+  private trafficUpdateTimer: any = null;
+  private requestsPerSecHistory: number[] = []; // Track requests/sec over time for trend
+  
+  // Removed byte tracking - now using real-time data from SmartProxy
+
+  constructor() {
+    super();
+    this.subscribeToStateParts();
+    this.initializeTrafficData();
+    this.updateNetworkData();
+    this.startTrafficUpdateTimer();
+  }
+  
+  async connectedCallback() {
+    await super.connectedCallback();
+    
+    // When network view becomes visible, ensure we fetch network data
+    await appstate.networkStatePart.dispatchAction(appstate.fetchNetworkStatsAction, null);
+  }
+  
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    this.stopTrafficUpdateTimer();
+  }
+
+  private subscribeToStateParts() {
+    // Subscribe and track unsubscribe functions
+    const statsUnsubscribe = appstate.statsStatePart.state.subscribe((state) => {
+      this.statsState = state;
+      this.updateNetworkData();
+    });
+    this.rxSubscriptions.push(statsUnsubscribe);
+    
+    const networkUnsubscribe = appstate.networkStatePart.state.subscribe((state) => {
+      this.networkState = state;
+      this.updateNetworkData();
+    });
+    this.rxSubscriptions.push(networkUnsubscribe);
+  }
+  
+  private initializeTrafficData() {
+    const now = Date.now();
+    // Fixed 5 minute time range
+    const range = 5 * 60 * 1000; // 5 minutes
+    const bucketSize = range / 60; // 60 data points
+    
+    // Initialize with empty data points for both in and out
+    const emptyData = Array.from({ length: 60 }, (_, i) => {
+      const time = now - ((59 - i) * bucketSize);
+      return {
+        x: new Date(time).toISOString(),
+        y: 0,
+      };
+    });
+    
+    this.trafficDataIn = [...emptyData];
+    this.trafficDataOut = emptyData.map(point => ({ ...point }));
+    
+    this.lastTrafficUpdateTime = now;
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      .networkContainer {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+
+      .protocolBadge {
+        display: inline-flex;
+        align-items: center;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      .protocolBadge.http {
+        background: ${cssManager.bdTheme('#e3f2fd', '#1a2c3a')};
+        color: ${cssManager.bdTheme('#1976d2', '#5a9fd4')};
+      }
+
+      .protocolBadge.https {
+        background: ${cssManager.bdTheme('#e8f5e9', '#1a3a1a')};
+        color: ${cssManager.bdTheme('#388e3c', '#66bb6a')};
+      }
+
+      .protocolBadge.tcp {
+        background: ${cssManager.bdTheme('#fff3e0', '#3a2a1a')};
+        color: ${cssManager.bdTheme('#f57c00', '#ff9933')};
+      }
+
+      .protocolBadge.smtp {
+        background: ${cssManager.bdTheme('#f3e5f5', '#2a1a3a')};
+        color: ${cssManager.bdTheme('#7b1fa2', '#ba68c8')};
+      }
+
+      .protocolBadge.dns {
+        background: ${cssManager.bdTheme('#e0f2f1', '#1a3a3a')};
+        color: ${cssManager.bdTheme('#00796b', '#4db6ac')};
+      }
+
+      .statusBadge {
+        display: inline-flex;
+        align-items: center;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      .statusBadge.success {
+        background: ${cssManager.bdTheme('#e8f5e9', '#1a3a1a')};
+        color: ${cssManager.bdTheme('#388e3c', '#66bb6a')};
+      }
+
+      .statusBadge.error {
+        background: ${cssManager.bdTheme('#ffebee', '#3a1a1a')};
+        color: ${cssManager.bdTheme('#d32f2f', '#ff6666')};
+      }
+
+      .statusBadge.warning {
+        background: ${cssManager.bdTheme('#fff3e0', '#3a2a1a')};
+        color: ${cssManager.bdTheme('#f57c00', '#ff9933')};
+      }
+    `,
+  ];
+
+  public render() {
+    return html`
+      <ops-sectionheading>Network Activity</ops-sectionheading>
+      
+      <div class="networkContainer">
+        <!-- Stats Grid -->
+        ${this.renderNetworkStats()}
+
+        <!-- Traffic Chart -->
+        <dees-chart-area
+          .label=${'Network Traffic'}
+          .series=${[
+            {
+              name: 'Inbound',
+              data: this.trafficDataIn,
+              color: '#22c55e', // Green for download
+            },
+            {
+              name: 'Outbound',
+              data: this.trafficDataOut,
+              color: '#8b5cf6', // Purple for upload
+            }
+          ]}
+          .stacked=${false}
+          .yAxisFormatter=${(val: number) => `${val} Mbit/s`}
+          .tooltipFormatter=${(point: any) => {
+            const mbps = point.y || 0;
+            const seriesName = point.series?.name || 'Throughput';
+            const timestamp = new Date(point.x).toLocaleTimeString();
+            return `
+              <div style="padding: 8px;">
+                <div style="font-weight: bold; margin-bottom: 4px;">${timestamp}</div>
+                <div>${seriesName}: ${mbps.toFixed(2)} Mbit/s</div>
+              </div>
+            `;
+          }}
+        ></dees-chart-area>
+
+        <!-- Top IPs Section -->
+        ${this.renderTopIPs()}
+
+        <!-- Requests Table -->
+        <dees-table
+          .data=${this.networkRequests}
+          .displayFunction=${(req: INetworkRequest) => ({
+            Time: new Date(req.timestamp).toLocaleTimeString(),
+            Protocol: html`<span class="protocolBadge ${req.protocol}">${req.protocol.toUpperCase()}</span>`,
+            Method: req.method,
+            'Host:Port': `${req.hostname}:${req.port}`,
+            Path: this.truncateUrl(req.url),
+            Status: this.renderStatus(req.statusCode),
+            Duration: `${req.duration}ms`,
+            'In/Out': `${this.formatBytes(req.bytesIn)} / ${this.formatBytes(req.bytesOut)}`,
+            'Remote IP': req.remoteIp,
+          })}
+          .dataActions=${[
+            {
+              name: 'View Details',
+              iconName: 'magnifyingGlass',
+              type: ['inRow', 'doubleClick', 'contextmenu'],
+              actionFunc: async (actionData) => {
+                await this.showRequestDetails(actionData.item);
+              }
+            }
+          ]}
+          heading1="Recent Network Activity"
+          heading2="Recent network requests"
+          searchable
+          .pagination=${true}
+          .paginationSize=${50}
+          dataName="request"
+        ></dees-table>
+      </div>
+    `;
+  }
+
+  private async showRequestDetails(request: INetworkRequest) {
+    const { DeesModal } = await import('@design.estate/dees-catalog');
+    
+    await DeesModal.createAndShow({
+      heading: 'Request Details',
+      content: html`
+        <div style="padding: 20px;">
+          <dees-dataview-codebox
+            .heading=${'Request Information'}
+            progLang="json"
+            .codeToDisplay=${JSON.stringify({
+              id: request.id,
+              timestamp: new Date(request.timestamp).toISOString(),
+              protocol: request.protocol,
+              method: request.method,
+              url: request.url,
+              hostname: request.hostname,
+              port: request.port,
+              statusCode: request.statusCode,
+              duration: `${request.duration}ms`,
+              bytesIn: request.bytesIn,
+              bytesOut: request.bytesOut,
+              remoteIp: request.remoteIp,
+              route: request.route,
+            }, null, 2)}
+          ></dees-dataview-codebox>
+        </div>
+      `,
+      menuOptions: [
+        {
+          name: 'Copy Request ID',
+          iconName: 'copy',
+          action: async () => {
+            await navigator.clipboard.writeText(request.id);
+          }
+        }
+      ]
+    });
+  }
+
+
+  private renderStatus(statusCode?: number): TemplateResult {
+    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>`;
+  }
+
+  private truncateUrl(url: string, maxLength = 50): string {
+    if (url.length <= maxLength) return url;
+    return url.substring(0, maxLength - 3) + '...';
+  }
+
+
+  private formatNumber(num: number): string {
+    if (num >= 1000000) {
+      return (num / 1000000).toFixed(1) + 'M';
+    } else if (num >= 1000) {
+      return (num / 1000).toFixed(1) + 'K';
+    }
+    return num.toFixed(0);
+  }
+
+  private formatBytes(bytes: number): string {
+    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]}`;
+  }
+
+  private calculateRequestsPerSecond(): number {
+    // Calculate from actual request data in the last minute
+    const oneMinuteAgo = Date.now() - 60000;
+    const recentRequests = this.networkRequests.filter(req => req.timestamp >= oneMinuteAgo);
+    const reqPerSec = Math.round(recentRequests.length / 60);
+    
+    // Track history for trend (keep last 20 values)
+    this.requestsPerSecHistory.push(reqPerSec);
+    if (this.requestsPerSecHistory.length > 20) {
+      this.requestsPerSecHistory.shift();
+    }
+    
+    return reqPerSec;
+  }
+
+  private calculateThroughput(): { in: number; out: number } {
+    // Use real throughput data from network state
+    return {
+      in: this.networkState.throughputRate.bytesInPerSecond,
+      out: this.networkState.throughputRate.bytesOutPerSecond,
+    };
+  }
+
+  private renderNetworkStats(): TemplateResult {
+    const reqPerSec = this.calculateRequestsPerSecond();
+    const throughput = this.calculateThroughput();
+    const activeConnections = this.statsState.serverStats?.activeConnections || 0;
+    
+    // Throughput data is now available in the stats tiles
+
+    // Use request count history for the requests/sec trend
+    const trendData = [...this.requestsPerSecHistory];
+    
+    // If we don't have enough data, pad with zeros
+    while (trendData.length < 20) {
+      trendData.unshift(0);
+    }
+
+    const tiles: IStatsTile[] = [
+      {
+        id: 'connections',
+        title: 'Active Connections',
+        value: activeConnections,
+        type: 'number',
+        icon: 'plug',
+        color: activeConnections > 100 ? '#f59e0b' : '#22c55e',
+        description: `Total: ${this.statsState.serverStats?.totalConnections || 0}`,
+        actions: [
+          {
+            name: 'View Details',
+            iconName: 'magnifyingGlass',
+            action: async () => {
+            },
+          },
+        ],
+      },
+      {
+        id: 'requests',
+        title: 'Requests/sec',
+        value: reqPerSec,
+        type: 'trend',
+        icon: 'chartLine',
+        color: '#3b82f6',
+        trendData: trendData,
+        description: `Average over last minute`,
+      },
+      {
+        id: 'throughputIn',
+        title: 'Throughput In',
+        value: this.formatBitsPerSecond(throughput.in),
+        unit: '',
+        type: 'number',
+        icon: 'download',
+        color: '#22c55e',
+      },
+      {
+        id: 'throughputOut',
+        title: 'Throughput Out',
+        value: this.formatBitsPerSecond(throughput.out),
+        unit: '',
+        type: 'number',
+        icon: 'upload',
+        color: '#8b5cf6',
+      },
+    ];
+
+    return html`
+      <dees-statsgrid 
+        .tiles=${tiles}
+        .minTileWidth=${200}
+        .gridActions=${[
+          {
+            name: 'Export Data',
+            iconName: 'fileExport',
+            action: async () => {
+              console.log('Export feature coming soon');
+            },
+          },
+        ]}
+      ></dees-statsgrid>
+    `;
+  }
+
+  
+  private renderTopIPs(): TemplateResult {
+    if (this.networkState.topIPs.length === 0) {
+      return html``;
+    }
+    
+    // Calculate total connections across all top IPs
+    const totalConnections = this.networkState.topIPs.reduce((sum, ipData) => sum + ipData.count, 0);
+    
+    return html`
+      <dees-table
+        .data=${this.networkState.topIPs}
+        .displayFunction=${(ipData: { ip: string; count: number }) => ({
+          'IP Address': ipData.ip,
+          'Connections': ipData.count,
+          'Percentage': totalConnections > 0 ? ((ipData.count / totalConnections) * 100).toFixed(1) + '%' : '0%',
+        })}
+        heading1="Top Connected IPs"
+        heading2="IPs with most active connections"
+        .pagination=${false}
+        dataName="ip"
+      ></dees-table>
+    `;
+  }
+
+  private async updateNetworkData() {
+    // 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 || 
+                        newConnectionCount === 0 ||
+                        (newConnectionCount > 0 && this.networkRequests.length === 0);
+    
+    if (shouldUpdate) {
+      // Convert connection data to network requests format
+      if (newConnectionCount > 0) {
+        this.networkRequests = this.networkState.connections.map((conn, index) => ({
+          id: conn.id,
+          timestamp: conn.startTime,
+          method: 'GET', // Default method for proxy connections
+          url: '/',
+          hostname: conn.remoteAddress,
+          port: conn.protocol === 'https' ? 443 : 80,
+          protocol: conn.protocol === 'https' || conn.protocol === 'http' ? conn.protocol : 'tcp',
+          statusCode: conn.state === 'connected' ? 200 : undefined,
+          duration: Date.now() - conn.startTime,
+          bytesIn: conn.bytesReceived,
+          bytesOut: conn.bytesSent,
+          remoteIp: conn.remoteAddress,
+          route: 'proxy',
+        }));
+      } else {
+        this.networkRequests = [];
+      }
+    }
+    
+    // Generate traffic data based on request history
+    this.updateTrafficData();
+  }
+
+  private updateTrafficData() {
+    // This method is called when network data updates
+    // The actual chart updates are handled by the timer calling addTrafficDataPoint()
+  }
+  
+  private startTrafficUpdateTimer() {
+    this.stopTrafficUpdateTimer(); // Clear any existing timer
+    this.trafficUpdateTimer = setInterval(() => {
+      // Add a new data point every second
+      this.addTrafficDataPoint();
+    }, 1000); // Update every second
+  }
+  
+  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
+    };
+    
+    // Efficient array updates - modify in place when possible
+    if (this.trafficDataIn.length >= 60) {
+      // Remove oldest and add newest
+      this.trafficDataIn = [...this.trafficDataIn.slice(1), newDataPointIn];
+      this.trafficDataOut = [...this.trafficDataOut.slice(1), newDataPointOut];
+    } else {
+      // Still filling up the initial data
+      this.trafficDataIn = [...this.trafficDataIn, newDataPointIn];
+      this.trafficDataOut = [...this.trafficDataOut, newDataPointOut];
+    }
+    
+    this.lastChartUpdate = now;
+  }
+  
+  private stopTrafficUpdateTimer() {
+    if (this.trafficUpdateTimer) {
+      clearInterval(this.trafficUpdateTimer);
+      this.trafficUpdateTimer = null;
+    }
+  }
+}