@serve.zone/dcrouter 17.1.8 → 17.2.2

package/ts/opsserver/handlers/security.handler.ts

@@ -101,6 +101,8 @@ export class SecurityHandler {
               topASNs: networkStats.topASNs,
               totalDataTransferred: networkStats.totalDataTransferred,
               throughputHistory: networkStats.throughputHistory || [],
+              frontendConnectionHistory: networkStats.frontendConnectionHistory || [],
+              backendConnectionHistory: networkStats.backendConnectionHistory || [],
               throughputByIP,
               domainActivity: networkStats.domainActivity || [],
               requestsPerSecond: networkStats.requestsPerSecond || 0,
@@ -121,6 +123,8 @@ export class SecurityHandler {
             totalDataTransferred: { bytesIn: 0, bytesOut: 0 },
             throughputHistory: [],
             throughputByIP: [],
+            frontendConnectionHistory: [],
+            backendConnectionHistory: [],
             domainActivity: [],
             requestsPerSecond: 0,
             requestsTotal: 0,

package/ts/opsserver/handlers/stats.handler.ts

@@ -336,6 +336,8 @@ export class StatsHandler {
                   topASNs: stats.topASNs || [],
                   domainActivity: stats.domainActivity || [],
                   throughputHistory: stats.throughputHistory || [],
+                  frontendConnectionHistory: stats.frontendConnectionHistory || [],
+                  backendConnectionHistory: stats.backendConnectionHistory || [],
                   requestsPerSecond: stats.requestsPerSecond || 0,
                   requestsTotal: stats.requestsTotal || 0,
                   backends: stats.backends || [],

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/dcrouter',
-  version: '17.1.8',
+  version: '17.2.2',
   description: 'A multifaceted routing service handling mail and SMS delivery functions.'
 }

package/ts_web/appstate/network.ts

@@ -19,6 +19,8 @@ export interface INetworkState {
   ipIntelligence: interfaces.data.IIpIntelligenceRecord[];
   domainActivity: interfaces.data.IDomainActivity[];
   throughputHistory: Array<{ timestamp: number; in: number; out: number }>;
+  frontendConnectionHistory: interfaces.data.IProtocolConnectionHistoryPoint[];
+  backendConnectionHistory: interfaces.data.IProtocolConnectionHistoryPoint[];
   requestsPerSecond: number;
   requestsTotal: number;
   backends: interfaces.data.IBackendInfo[];
@@ -43,6 +45,8 @@ export const networkStatePart = await appState.getStatePart<INetworkState>(
     ipIntelligence: [],
     domainActivity: [],
     throughputHistory: [],
+    frontendConnectionHistory: [],
+    backendConnectionHistory: [],
     requestsPerSecond: 0,
     requestsTotal: 0,
     backends: [],
@@ -150,6 +154,8 @@ export const fetchNetworkStatsAction = networkStatePart.createAction(async (stat
       ipIntelligence: currentState.ipIntelligence,
       domainActivity: networkStatsResponse.domainActivity || [],
       throughputHistory: networkStatsResponse.throughputHistory || [],
+      frontendConnectionHistory: networkStatsResponse.frontendConnectionHistory || [],
+      backendConnectionHistory: networkStatsResponse.backendConnectionHistory || [],
       requestsPerSecond: networkStatsResponse.requestsPerSecond || 0,
       requestsTotal: networkStatsResponse.requestsTotal || 0,
       backends: networkStatsResponse.backends || [],

package/ts_web/appstate/runtime.ts

@@ -340,6 +340,8 @@ async function dispatchCombinedRefreshActionInner() {
         throughputByIP: network.topEndpoints.map(e => ({ ip: e.endpoint, in: e.bandwidth?.in || 0, out: e.bandwidth?.out || 0 })),
         domainActivity: network.domainActivity || [],
         throughputHistory: network.throughputHistory || [],
+        frontendConnectionHistory: network.frontendConnectionHistory || [],
+        backendConnectionHistory: network.backendConnectionHistory || [],
         requestsPerSecond: network.requestsPerSecond || 0,
         requestsTotal: network.requestsTotal || 0,
         backends: network.backends || [],

package/ts_web/elements/network/network-activity-history.ts

@@ -0,0 +1,126 @@
+export interface IChartPoint {
+  x: string | number;
+  y: number;
+}
+
+export interface IProtocolConnectionHistoryPointLike {
+  timestamp: number;
+  total: number;
+  protocols: Record<string, number>;
+}
+
+export type TProtocolChartSeries = Array<{
+  name: string;
+  data: IChartPoint[];
+}>;
+
+export const PROTOCOL_ORDER = ['HTTP/1.1', 'HTTP/2', 'HTTP/3', 'WebSocket', 'Other'] as const;
+export const PROTOCOL_SERIES_ORDER = ['Total Active', ...PROTOCOL_ORDER] as const;
+
+const toEpochSecond = (timestampArg: string | number): number => {
+  const timestampMs = typeof timestampArg === 'number'
+    ? timestampArg
+    : new Date(timestampArg).getTime();
+  return Math.floor(timestampMs / 1000);
+};
+
+export const getLatestHistoryEpochSecond = (
+  historyArg: Array<{ timestamp: number }>,
+): number => historyArg.reduce(
+  (latest, point) => Math.max(latest, Math.floor(point.timestamp / 1000)),
+  0,
+);
+
+export const mergeChartPoints = (
+  localPointsArg: IChartPoint[],
+  canonicalPointsArg: IChartPoint[],
+  maximumPointsArg: number,
+): IChartPoint[] => {
+  const pointsBySecond = new Map<number, IChartPoint>();
+  for (const point of localPointsArg) {
+    const epochSecond = toEpochSecond(point.x);
+    if (Number.isFinite(epochSecond)) {
+      pointsBySecond.set(epochSecond, point);
+    }
+  }
+  // Canonical engine samples win when a locally repeated cached sample used the same second.
+  for (const point of canonicalPointsArg) {
+    const epochSecond = toEpochSecond(point.x);
+    if (Number.isFinite(epochSecond)) {
+      pointsBySecond.set(epochSecond, point);
+    }
+  }
+
+  return [...pointsBySecond.entries()]
+    .sort(([secondA], [secondB]) => secondA - secondB)
+    .map(([, point]) => point)
+    .slice(-maximumPointsArg);
+};
+
+export const createProtocolConnectionSeries = (
+  historyArg: IProtocolConnectionHistoryPointLike[] = [],
+): TProtocolChartSeries => PROTOCOL_SERIES_ORDER.map((seriesName) => ({
+  name: seriesName,
+  data: historyArg.map((point) => ({
+    x: new Date(point.timestamp).toISOString(),
+    y: seriesName === 'Total Active'
+      ? point.total
+      : (point.protocols[seriesName] ?? 0),
+  })),
+}));
+
+export const mergeProtocolConnectionHistory = (
+  localSeriesArg: TProtocolChartSeries,
+  canonicalHistoryArg: IProtocolConnectionHistoryPointLike[],
+  maximumPointsArg: number,
+): TProtocolChartSeries => {
+  const localSeriesByName = new Map(localSeriesArg.map((series) => [series.name, series]));
+  const canonicalSeriesByName = new Map(
+    createProtocolConnectionSeries(canonicalHistoryArg)
+      .map((series) => [series.name, series]),
+  );
+
+  return PROTOCOL_SERIES_ORDER.map((seriesName) => ({
+    name: seriesName,
+    data: mergeChartPoints(
+      localSeriesByName.get(seriesName)?.data ?? [],
+      canonicalSeriesByName.get(seriesName)?.data ?? [],
+      maximumPointsArg,
+    ),
+  }));
+};
+
+export const getProtocolConnectionTotal = (
+  protocolsArg: Record<string, number>,
+): number => (protocolsArg['HTTP/1.1'] ?? 0)
+  + (protocolsArg['HTTP/2'] ?? 0)
+  + (protocolsArg['HTTP/3'] ?? 0)
+  + (protocolsArg.Other ?? 0);
+
+export const appendProtocolConnectionSample = (
+  localSeriesArg: TProtocolChartSeries,
+  timestampArg: string | number,
+  protocolsArg: Record<string, number>,
+  maximumPointsArg: number,
+): TProtocolChartSeries => {
+  const localSeriesByName = new Map(localSeriesArg.map((series) => [series.name, series]));
+  return PROTOCOL_SERIES_ORDER.map((seriesName) => ({
+    name: seriesName,
+    data: mergeChartPoints(
+      localSeriesByName.get(seriesName)?.data ?? [],
+      [{
+        x: timestampArg,
+        y: seriesName === 'Total Active'
+          ? getProtocolConnectionTotal(protocolsArg)
+          : (protocolsArg[seriesName] ?? 0),
+      }],
+      maximumPointsArg,
+    ),
+  }));
+};
+
+export const shouldRestartNetworkActivityTimer = (
+  isConnectedArg: boolean,
+  documentHiddenArg: boolean,
+): boolean => isConnectedArg && !documentHiddenArg;
+

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

@@ -4,6 +4,25 @@ import * as interfaces from '../../../dist_ts_interfaces/index.js';
 import { viewHostCss } from '../shared/css.js';
 import { type IStatsTile } from '@design.estate/dees-catalog';
 
+import {
+  appendProtocolConnectionSample,
+  createProtocolConnectionSeries,
+  getLatestHistoryEpochSecond,
+  mergeChartPoints,
+  mergeProtocolConnectionHistory,
+  shouldRestartNetworkActivityTimer,
+  type IChartPoint,
+  type TProtocolChartSeries,
+} from './network-activity-history.js';
+
+const PROTOCOL_COLORS: Record<string, string> = {
+  'HTTP/1.1': '#1976d2',
+  'HTTP/2': '#388e3c',
+  'HTTP/3': '#7b1fa2',
+  'WebSocket': '#f57c00',
+  'Other': '#757575',
+};
+
 declare global {
   interface HTMLElementTagNameMap {
     'ops-view-network-activity': OpsViewNetworkActivity;
@@ -12,8 +31,8 @@ declare global {
 
 @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 far back the realtime charts show */
+  private static readonly CHART_WINDOW_MS = 10 * 60 * 1000; // 10 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 */
@@ -27,10 +46,16 @@ export class OpsViewNetworkActivity extends DeesElement {
 
 
   @state()
-  accessor trafficDataIn: Array<{ x: string | number; y: number }> = [];
+  accessor trafficDataIn: IChartPoint[] = [];
+
+  @state()
+  accessor trafficDataOut: IChartPoint[] = [];
+
+  @state()
+  accessor frontendConnectionSeries: TProtocolChartSeries = createProtocolConnectionSeries();
 
   @state()
-  accessor trafficDataOut: Array<{ x: string | number; y: number }> = [];
+  accessor backendConnectionSeries: TProtocolChartSeries = createProtocolConnectionSeries();
 
   // Track if we need to update the chart to avoid unnecessary re-renders
   private lastChartUpdate = 0;
@@ -38,8 +63,10 @@ export class OpsViewNetworkActivity extends DeesElement {
 
   private trafficUpdateTimer: any = null;
   private requestsPerSecHistory: number[] = []; // Track requests/sec over time for trend
-  private historyLoaded = false; // Whether server-side throughput history has been loaded
   private visibilityHandler: (() => void) | null = null;
+  private lastThroughputHistoryEpochSecond = 0;
+  private lastFrontendHistoryEpochSecond = 0;
+  private lastBackendHistoryEpochSecond = 0;
 
   constructor() {
     super();
@@ -57,7 +84,16 @@ export class OpsViewNetworkActivity extends DeesElement {
       if (document.hidden) {
         this.stopTrafficUpdateTimer();
       } else {
-        this.startTrafficUpdateTimer();
+        void appstate.networkStatePart
+          .dispatchAction(appstate.fetchNetworkStatsAction, null)
+          .catch((error) => {
+            console.error('Failed to refresh network history after visibility resume:', error);
+          })
+          .finally(() => {
+            if (shouldRestartNetworkActivityTimer(this.isConnected, document.hidden)) {
+              this.startTrafficUpdateTimer();
+            }
+          });
       }
     };
     document.addEventListener('visibilitychange', this.visibilityHandler);
@@ -106,51 +142,92 @@ export class OpsViewNetworkActivity extends DeesElement {
     this.trafficDataOut = emptyData.map(point => ({ ...point }));
   }
 
-  /**
-   * 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,
+  private mergeThroughputHistory(): void {
+    const history = this.networkState.throughputHistory || [];
+    const latestHistoryEpochSecond = getLatestHistoryEpochSecond(history);
+    if (latestHistoryEpochSecond <= this.lastThroughputHistoryEpochSecond) return;
+
+    const canonicalIn = history.map((point) => ({
+      x: new Date(point.timestamp).toISOString(),
+      y: Math.round(((point.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,
+    const canonicalOut = history.map((point) => ({
+      x: new Date(point.timestamp).toISOString(),
+      y: Math.round(((point.out * 8) / 1000000) * 10) / 10,
     }));
 
-    const { MAX_DATA_POINTS, UPDATE_INTERVAL_MS } = OpsViewNetworkActivity;
+    this.trafficDataIn = mergeChartPoints(
+      this.trafficDataIn,
+      canonicalIn,
+      OpsViewNetworkActivity.MAX_DATA_POINTS,
+    );
+    this.trafficDataOut = mergeChartPoints(
+      this.trafficDataOut,
+      canonicalOut,
+      OpsViewNetworkActivity.MAX_DATA_POINTS,
+    );
+    this.lastThroughputHistoryEpochSecond = latestHistoryEpochSecond;
+  }
 
-    // Use history as the chart data, keeping the most recent points within the window
-    const sliceStart = Math.max(0, historyIn.length - MAX_DATA_POINTS);
-    this.trafficDataIn = historyIn.slice(sliceStart);
-    this.trafficDataOut = historyOut.slice(sliceStart);
-
-    // If fewer than MAX_DATA_POINTS, pad the front with zeros
-    if (this.trafficDataIn.length < MAX_DATA_POINTS) {
-      const now = Date.now();
-      const padCount = MAX_DATA_POINTS - 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) * UPDATE_INTERVAL_MS)).toISOString(),
-        y: 0,
-      }));
-      const padOut = padIn.map(p => ({ ...p }));
+  private getProtocolCounts(
+    distributionArg: interfaces.data.IProtocolDistribution,
+  ): Record<string, number> {
+    return {
+      'HTTP/1.1': distributionArg.h1Active,
+      'HTTP/2': distributionArg.h2Active,
+      'HTTP/3': distributionArg.h3Active,
+      'WebSocket': distributionArg.wsActive,
+      'Other': distributionArg.otherActive,
+    };
+  }
+
+  private getProtocolSeriesWithColors(seriesArg: TProtocolChartSeries) {
+    return seriesArg.map((series) => ({
+      ...series,
+      color: series.name === 'Total Active' ? '#ef4444' : (PROTOCOL_COLORS[series.name] ?? '#757575'),
+    }));
+  }
+
+  private mergeProtocolConnectionHistories(): void {
+    const frontendHistory = this.networkState.frontendConnectionHistory || [];
+    const latestFrontendEpochSecond = getLatestHistoryEpochSecond(frontendHistory);
+    if (latestFrontendEpochSecond > this.lastFrontendHistoryEpochSecond) {
+      this.frontendConnectionSeries = mergeProtocolConnectionHistory(
+        this.frontendConnectionSeries,
+        frontendHistory,
+        OpsViewNetworkActivity.MAX_DATA_POINTS,
+      );
+      this.lastFrontendHistoryEpochSecond = latestFrontendEpochSecond;
+    }
+
+    const backendHistory = this.networkState.backendConnectionHistory || [];
+    const latestBackendEpochSecond = getLatestHistoryEpochSecond(backendHistory);
+    if (latestBackendEpochSecond > this.lastBackendHistoryEpochSecond) {
+      this.backendConnectionSeries = mergeProtocolConnectionHistory(
+        this.backendConnectionSeries,
+        backendHistory,
+        OpsViewNetworkActivity.MAX_DATA_POINTS,
+      );
+      this.lastBackendHistoryEpochSecond = latestBackendEpochSecond;
+    }
+  }
 
-      this.trafficDataIn = [...padIn, ...this.trafficDataIn];
-      this.trafficDataOut = [...padOut, ...this.trafficDataOut];
+  private addProtocolConnectionDataPoints(timestampArg: string): void {
+    if (this.networkState.frontendProtocols) {
+      this.frontendConnectionSeries = appendProtocolConnectionSample(
+        this.frontendConnectionSeries,
+        timestampArg,
+        this.getProtocolCounts(this.networkState.frontendProtocols),
+        OpsViewNetworkActivity.MAX_DATA_POINTS,
+      );
+    }
+    if (this.networkState.backendProtocols) {
+      this.backendConnectionSeries = appendProtocolConnectionSample(
+        this.backendConnectionSeries,
+        timestampArg,
+        this.getProtocolCounts(this.networkState.backendProtocols),
+        OpsViewNetworkActivity.MAX_DATA_POINTS,
+      );
     }
   }
 
@@ -162,6 +239,7 @@ export class OpsViewNetworkActivity extends DeesElement {
         display: flex;
         flex-direction: column;
         gap: 24px;
+        container-type: inline-size;
       }
 
 
@@ -268,9 +346,31 @@ export class OpsViewNetworkActivity extends DeesElement {
 
       .protocolChartGrid {
         display: grid;
-        grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 16px;
+        min-width: 0;
+      }
+
+      .protocolChartColumn {
+        display: flex;
+        flex-direction: column;
         gap: 16px;
+        min-width: 0;
+      }
+
+      .protocolChartColumn > dees-chart-donut,
+      .protocolChartColumn > dees-chart-area {
+        width: 100%;
+        max-width: 100%;
+        min-width: 0;
       }
+
+      @container (max-width: 800px) {
+        .protocolChartGrid {
+          grid-template-columns: minmax(0, 1fr);
+        }
+      }
+
     `,
   ];
 
@@ -557,13 +657,7 @@ export class OpsViewNetworkActivity extends DeesElement {
     const fp = this.networkState.frontendProtocols;
     const bp = this.networkState.backendProtocols;
 
-    const protoColors: Record<string, string> = {
-      'HTTP/1.1': '#1976d2',
-      'HTTP/2': '#388e3c',
-      'HTTP/3': '#7b1fa2',
-      'WebSocket': '#f57c00',
-      'Other': '#757575',
-    };
+    const protoColors = PROTOCOL_COLORS;
 
     const buildDonutData = (dist: interfaces.data.IProtocolDistribution | null) => {
       if (!dist) return [];
@@ -581,22 +675,40 @@ export class OpsViewNetworkActivity extends DeesElement {
 
     return html`
       <div class="protocolChartGrid">
-        <dees-chart-donut
-          .label=${'Frontend Protocols'}
-          .data=${frontendData.length > 0 ? frontendData : [{ name: 'No Traffic', value: 1, color: '#757575' }]}
-          .showLegend=${true}
-          .showLabels=${true}
-          .innerRadiusPercent=${'55%'}
-          .valueFormatter=${(val: number) => `${val} active`}
-        ></dees-chart-donut>
-        <dees-chart-donut
-          .label=${'Backend Protocols'}
-          .data=${backendData.length > 0 ? backendData : [{ name: 'No Traffic', value: 1, color: '#757575' }]}
-          .showLegend=${true}
-          .showLabels=${true}
-          .innerRadiusPercent=${'55%'}
-          .valueFormatter=${(val: number) => `${val} active`}
-        ></dees-chart-donut>
+        <div class="protocolChartColumn">
+          <dees-chart-donut
+            .label=${'Frontend Protocols'}
+            .data=${frontendData.length > 0 ? frontendData : [{ name: 'No Traffic', value: 1, color: '#757575' }]}
+            .showLegend=${true}
+            .showLabels=${true}
+            .innerRadiusPercent=${'55%'}
+            .valueFormatter=${(val: number) => `${val} active`}
+          ></dees-chart-donut>
+          <dees-chart-area
+            .label=${'Frontend Active Connections'}
+            .series=${this.getProtocolSeriesWithColors(this.frontendConnectionSeries)}
+            .realtimeMode=${true}
+            .rollingWindow=${OpsViewNetworkActivity.CHART_WINDOW_MS}
+            .yAxisFormatter=${(val: number) => `${Math.round(val)} active`}
+          ></dees-chart-area>
+        </div>
+        <div class="protocolChartColumn">
+          <dees-chart-donut
+            .label=${'Backend Protocols'}
+            .data=${backendData.length > 0 ? backendData : [{ name: 'No Traffic', value: 1, color: '#757575' }]}
+            .showLegend=${true}
+            .showLabels=${true}
+            .innerRadiusPercent=${'55%'}
+            .valueFormatter=${(val: number) => `${val} active`}
+          ></dees-chart-donut>
+          <dees-chart-area
+            .label=${'Backend Active Connections'}
+            .series=${this.getProtocolSeriesWithColors(this.backendConnectionSeries)}
+            .realtimeMode=${true}
+            .rollingWindow=${OpsViewNetworkActivity.CHART_WINDOW_MS}
+            .yAxisFormatter=${(val: number) => `${Math.round(val)} active`}
+          ></dees-chart-area>
+        </div>
       </div>
     `;
   }
@@ -962,10 +1074,8 @@ export class OpsViewNetworkActivity extends DeesElement {
       this.requestsPerSecHistory.shift();
     }
 
-    // Load server-side throughput history into chart (once)
-    if (!this.historyLoaded && this.networkState.throughputHistory && this.networkState.throughputHistory.length > 0) {
-      this.loadThroughputHistory();
-    }
+    this.mergeThroughputHistory();
+    this.mergeProtocolConnectionHistories();
   }
 
   private startTrafficUpdateTimer() {
@@ -1005,13 +1115,17 @@ export class OpsViewNetworkActivity extends DeesElement {
       y: Math.round(throughputOutMbps * 10) / 10
     };
 
-    // In-place mutation then reassign for Lit reactivity (avoids 4 intermediate arrays)
-    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.trafficDataIn = mergeChartPoints(
+      this.trafficDataIn,
+      [newDataPointIn],
+      OpsViewNetworkActivity.MAX_DATA_POINTS,
+    );
+    this.trafficDataOut = mergeChartPoints(
+      this.trafficDataOut,
+      [newDataPointOut],
+      OpsViewNetworkActivity.MAX_DATA_POINTS,
+    );
+    this.addProtocolConnectionDataPoints(timestamp);
 
     this.lastChartUpdate = now;
   }