update

ts_web/elements/ops-view-network.ts

@@ -43,6 +43,10 @@ export class OpsViewNetwork extends DeesElement {
   @state()
   private 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
@@ -59,21 +63,35 @@ export class OpsViewNetwork extends DeesElement {
     this.startTrafficUpdateTimer();
   }
   
+  async connectedCallback() {
+    await super.connectedCallback();
+    
+    // When network view becomes visible, ensure we fetch network data
+    console.log('Network view connected - fetching initial data');
+    await appstate.networkStatePart.dispatchAction(appstate.fetchNetworkStatsAction, null);
+    
+    // Also update the active view state
+    appstate.uiStatePart.dispatchAction(appstate.setActiveViewAction, 'network');
+  }
+  
   async disconnectedCallback() {
     await super.disconnectedCallback();
     this.stopTrafficUpdateTimer();
   }
 
   private subscribeToStateParts() {
-    appstate.statsStatePart.state.subscribe((state) => {
+    // Subscribe and track unsubscribe functions
+    const statsUnsubscribe = appstate.statsStatePart.state.subscribe((state) => {
       this.statsState = state;
       this.updateNetworkData();
     });
+    this.rxSubscriptions.push(statsUnsubscribe);
     
-    appstate.networkStatePart.state.subscribe((state) => {
+    const networkUnsubscribe = appstate.networkStatePart.state.subscribe((state) => {
       this.networkState = state;
       this.updateNetworkData();
     });
+    this.rxSubscriptions.push(networkUnsubscribe);
   }
   
   private initializeTrafficData() {
@@ -169,6 +187,13 @@ export class OpsViewNetwork extends DeesElement {
   ];
 
   public render() {
+    console.log('Network view render - chart data points:', {
+      inPoints: this.trafficDataIn.length,
+      outPoints: this.trafficDataOut.length,
+      lastInValue: this.trafficDataIn[this.trafficDataIn.length - 1]?.y,
+      lastOutValue: this.trafficDataOut[this.trafficDataOut.length - 1]?.y
+    });
+    
     return html`
       <ops-sectionheading>Network Activity</ops-sectionheading>
       
@@ -278,7 +303,6 @@ export class OpsViewNetwork extends DeesElement {
           iconName: 'copy',
           action: async () => {
             await navigator.clipboard.writeText(request.id);
-            console.log('Request ID copied to clipboard');
           }
         }
       ]
@@ -366,6 +390,8 @@ export class OpsViewNetwork extends DeesElement {
     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];
@@ -466,25 +492,36 @@ export class OpsViewNetwork extends DeesElement {
   }
 
   private async updateNetworkData() {
-    // Convert connection data to network requests format
-    if (this.networkState.connections.length > 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 = [];
+    // 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
@@ -492,87 +529,58 @@ export class OpsViewNetwork extends DeesElement {
   }
 
   private updateTrafficData() {
+    // This method is called when network data updates
+    // The actual chart updates are handled by the timer calling addTrafficDataPoint()
+    console.log('UpdateTrafficData called - network data updated');
+  }
+  
+  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();
-    // Fixed 5 minute time range
-    const range = 5 * 60 * 1000; // 5 minutes
-    const bucketSize = range / 60; // 60 data points // 60 data points
     
-    // Check if enough time has passed to add a new data point
-    const timeSinceLastUpdate = now - this.lastTrafficUpdateTime;
-    const shouldAddNewPoint = timeSinceLastUpdate >= this.trafficUpdateInterval;
-    
-    console.log('UpdateTrafficData called:', {
-      networkRequestsCount: this.networkRequests.length,
-      timeSinceLastUpdate,
-      shouldAddNewPoint,
-      currentDataPoints: this.trafficDataIn.length
-    });
-    
-    if (!shouldAddNewPoint && this.trafficDataIn.length > 0) {
-      // Not enough time has passed, don't update
+    // Throttle chart updates to avoid excessive re-renders
+    if (now - this.lastChartUpdate < this.chartUpdateThreshold) {
       return;
     }
     
-    // Use real-time throughput data from SmartProxy (same as throughput tiles)
     const throughput = this.calculateThroughput();
     
     // Convert to Mbps (bytes * 8 / 1,000,000)
     const throughputInMbps = (throughput.in * 8) / 1000000;
     const throughputOutMbps = (throughput.out * 8) / 1000000;
     
-    console.log('Throughput calculation:', {
-      bytesInPerSecond: throughput.in,
-      bytesOutPerSecond: throughput.out,
-      throughputInMbps,
-      throughputOutMbps,
-      throughputTileValue: `${this.formatBitsPerSecond(throughput.in)} IN, ${this.formatBitsPerSecond(throughput.out)} OUT`
-    });
+    // Add new data points
+    const timestamp = new Date(now).toISOString();
     
-    if (this.trafficDataIn.length === 0) {
-      // Initialize if empty
-      this.initializeTrafficData();
+    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 {
-      // Add new data points for both in and out
-      const timestamp = new Date(now).toISOString();
-      
-      const newDataPointIn = {
-        x: timestamp,
-        y: Math.round(throughputInMbps * 10) / 10 // Round to 1 decimal place
-      };
-      
-      const newDataPointOut = {
-        x: timestamp,
-        y: Math.round(throughputOutMbps * 10) / 10 // Round to 1 decimal place
-      };
-      
-      // Create new arrays with existing data plus new points
-      const newTrafficDataIn = [...this.trafficDataIn, newDataPointIn];
-      const newTrafficDataOut = [...this.trafficDataOut, newDataPointOut];
-      
-      // Keep only the last 60 points
-      if (newTrafficDataIn.length > 60) {
-        newTrafficDataIn.shift(); // Remove oldest point
-        newTrafficDataOut.shift();
-      }
-      
-      this.trafficDataIn = newTrafficDataIn;
-      this.trafficDataOut = newTrafficDataOut;
-      this.lastTrafficUpdateTime = now;
-      
-      console.log('Added new traffic data points:', {
-        timestamp: timestamp,
-        throughputInMbps: newDataPointIn.y,
-        throughputOutMbps: newDataPointOut.y,
-        totalPoints: this.trafficDataIn.length
-      });
+      // Still filling up the initial data
+      this.trafficDataIn = [...this.trafficDataIn, newDataPointIn];
+      this.trafficDataOut = [...this.trafficDataOut, newDataPointOut];
     }
-  }
-  
-  private startTrafficUpdateTimer() {
-    this.stopTrafficUpdateTimer(); // Clear any existing timer
-    this.trafficUpdateTimer = setInterval(() => {
-      this.updateTrafficData();
-    }, 1000); // Check every second, but only update when interval has passed
+    
+    this.lastChartUpdate = now;
   }
   
   private stopTrafficUpdateTimer() {
@@ -581,5 +589,4 @@ export class OpsViewNetwork extends DeesElement {
       this.trafficUpdateTimer = null;
     }
   }
-  
 }