@serve.zone/dcrouter 5.4.3 → 5.4.5

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

@@ -52,8 +52,7 @@ export class OpsViewNetwork extends DeesElement {
   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
+  private historyLoaded = false; // Whether server-side throughput history has been loaded
 
   constructor() {
     super();
@@ -95,7 +94,7 @@ export class OpsViewNetwork extends DeesElement {
     // 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);
@@ -104,13 +103,61 @@ export class OpsViewNetwork extends DeesElement {
         y: 0,
       };
     });
-    
+
     this.trafficDataIn = [...emptyData];
     this.trafficDataOut = emptyData.map(point => ({ ...point }));
-    
+
     this.lastTrafficUpdateTime = now;
   }
 
+  /**
+   * Load server-side throughput history into the chart.
+   * Called once when history data first arrives from the Rust engine.
+   * This pre-populates the chart so users see historical data immediately
+   * instead of starting from all zeros.
+   */
+  private loadThroughputHistory() {
+    const history = this.networkState.throughputHistory;
+    if (!history || history.length === 0) return;
+
+    this.historyLoaded = true;
+
+    // Convert history points to chart data format (bytes/sec → Mbit/s)
+    const historyIn = history.map(p => ({
+      x: new Date(p.timestamp).toISOString(),
+      y: Math.round((p.in * 8) / 1000000 * 10) / 10,
+    }));
+    const historyOut = history.map(p => ({
+      x: new Date(p.timestamp).toISOString(),
+      y: Math.round((p.out * 8) / 1000000 * 10) / 10,
+    }));
+
+    // Use history as the chart data, keeping the most recent 60 points (5 min window)
+    const sliceStart = Math.max(0, historyIn.length - 60);
+    this.trafficDataIn = historyIn.slice(sliceStart);
+    this.trafficDataOut = historyOut.slice(sliceStart);
+
+    // If fewer than 60 points, pad the front with zeros
+    if (this.trafficDataIn.length < 60) {
+      const now = Date.now();
+      const range = 5 * 60 * 1000;
+      const bucketSize = range / 60;
+      const padCount = 60 - this.trafficDataIn.length;
+      const firstTimestamp = this.trafficDataIn.length > 0
+        ? new Date(this.trafficDataIn[0].x).getTime()
+        : now;
+
+      const padIn = Array.from({ length: padCount }, (_, i) => ({
+        x: new Date(firstTimestamp - ((padCount - i) * bucketSize)).toISOString(),
+        y: 0,
+      }));
+      const padOut = padIn.map(p => ({ ...p }));
+
+      this.trafficDataIn = [...padIn, ...this.trafficDataIn];
+      this.trafficDataOut = [...padOut, ...this.trafficDataOut];
+    }
+  }
+
   public static styles = [
     cssManager.defaultStyles,
     viewHostCss,
@@ -352,21 +399,6 @@ export class OpsViewNetwork extends DeesElement {
     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 {
@@ -376,16 +408,17 @@ export class OpsViewNetwork extends DeesElement {
   }
 
   private renderNetworkStats(): TemplateResult {
-    const reqPerSec = this.calculateRequestsPerSecond();
+    // Use server-side requests/sec from SmartProxy's Rust engine
+    const reqPerSec = this.networkState.requestsPerSecond || 0;
     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
+    // Track requests/sec history for the trend sparkline
+    this.requestsPerSecHistory.push(reqPerSec);
+    if (this.requestsPerSecHistory.length > 20) {
+      this.requestsPerSecHistory.shift();
+    }
     const trendData = [...this.requestsPerSecHistory];
-    
-    // If we don't have enough data, pad with zeros
     while (trendData.length < 20) {
       trendData.unshift(0);
     }
@@ -398,7 +431,7 @@ export class OpsViewNetwork extends DeesElement {
         type: 'number',
         icon: 'plug',
         color: activeConnections > 100 ? '#f59e0b' : '#22c55e',
-        description: `Total: ${this.statsState.serverStats?.totalConnections || 0}`,
+        description: `Total: ${this.networkState.requestsTotal || this.statsState.serverStats?.totalConnections || 0}`,
         actions: [
           {
             name: 'View Details',
@@ -416,7 +449,7 @@ export class OpsViewNetwork extends DeesElement {
         icon: 'chartLine',
         color: '#3b82f6',
         trendData: trendData,
-        description: `Average over last minute`,
+        description: `Total: ${this.formatNumber(this.networkState.requestsTotal || 0)} requests`,
       },
       {
         id: 'throughputIn',
@@ -462,20 +495,33 @@ export class OpsViewNetwork extends DeesElement {
     if (this.networkState.topIPs.length === 0) {
       return html``;
     }
-    
+
+    // Build per-IP bandwidth lookup
+    const bandwidthByIP = new Map<string, { in: number; out: number }>();
+    if (this.networkState.throughputByIP) {
+      for (const entry of this.networkState.throughputByIP) {
+        bandwidthByIP.set(entry.ip, { in: entry.in, out: entry.out });
+      }
+    }
+
     // 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%',
-        })}
+        .displayFunction=${(ipData: { ip: string; count: number }) => {
+          const bw = bandwidthByIP.get(ipData.ip);
+          return {
+            'IP Address': ipData.ip,
+            'Connections': ipData.count,
+            'Bandwidth In': bw ? this.formatBitsPerSecond(bw.in) : '0 bit/s',
+            'Bandwidth Out': bw ? this.formatBitsPerSecond(bw.out) : '0 bit/s',
+            'Share': totalConnections > 0 ? ((ipData.count / totalConnections) * 100).toFixed(1) + '%' : '0%',
+          };
+        }}
         heading1="Top Connected IPs"
-        heading2="IPs with most active connections"
+        heading2="IPs with most active connections and bandwidth"
         .pagination=${false}
         dataName="ip"
       ></dees-table>
@@ -515,13 +561,10 @@ export class OpsViewNetwork extends DeesElement {
       }
     }
     
-    // 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()
+    // Load server-side throughput history into chart (once)
+    if (!this.historyLoaded && this.networkState.throughputHistory && this.networkState.throughputHistory.length > 0) {
+      this.loadThroughputHistory();
+    }
   }
   
   private startTrafficUpdateTimer() {