@serve.zone/dcrouter 17.2.1 → 17.2.3

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

@@ -1,3 +1,8 @@
+import {
+  NETWORK_ACTIVITY_PROTOCOL_ORDER,
+  orderNetworkActivityProtocolNames,
+} from './network-activity-visuals.js';
+
 export interface IChartPoint {
   x: string | number;
   y: number;
@@ -14,9 +19,19 @@ export type TProtocolChartSeries = Array<{
   data: IChartPoint[];
 }>;
 
-export const PROTOCOL_ORDER = ['HTTP/1.1', 'HTTP/2', 'HTTP/3', 'WebSocket', 'Other'] as const;
+export const PROTOCOL_ORDER = NETWORK_ACTIVITY_PROTOCOL_ORDER;
 export const PROTOCOL_SERIES_ORDER = ['Total Active', ...PROTOCOL_ORDER] as const;
 
+const getProtocolSeriesOrder = (
+  protocolNamesArg: string[],
+): string[] => [
+  'Total Active',
+  ...orderNetworkActivityProtocolNames([
+    ...PROTOCOL_ORDER,
+    ...protocolNamesArg,
+  ]),
+];
+
 const toEpochSecond = (timestampArg: string | number): number => {
   const timestampMs = typeof timestampArg === 'number'
     ? timestampArg
@@ -59,7 +74,9 @@ export const mergeChartPoints = (
 
 export const createProtocolConnectionSeries = (
   historyArg: IProtocolConnectionHistoryPointLike[] = [],
-): TProtocolChartSeries => PROTOCOL_SERIES_ORDER.map((seriesName) => ({
+): TProtocolChartSeries => getProtocolSeriesOrder(
+  historyArg.flatMap((point) => Object.keys(point.protocols)),
+).map((seriesName) => ({
   name: seriesName,
   data: historyArg.map((point) => ({
     x: new Date(point.timestamp).toISOString(),
@@ -79,8 +96,12 @@ export const mergeProtocolConnectionHistory = (
     createProtocolConnectionSeries(canonicalHistoryArg)
       .map((series) => [series.name, series]),
   );
+  const seriesOrder = getProtocolSeriesOrder([
+    ...localSeriesArg.map((series) => series.name),
+    ...canonicalHistoryArg.flatMap((point) => Object.keys(point.protocols)),
+  ]);
 
-  return PROTOCOL_SERIES_ORDER.map((seriesName) => ({
+  return seriesOrder.map((seriesName) => ({
     name: seriesName,
     data: mergeChartPoints(
       localSeriesByName.get(seriesName)?.data ?? [],
@@ -92,10 +113,9 @@ export const mergeProtocolConnectionHistory = (
 
 export const getProtocolConnectionTotal = (
   protocolsArg: Record<string, number>,
-): number => (protocolsArg['HTTP/1.1'] ?? 0)
-  + (protocolsArg['HTTP/2'] ?? 0)
-  + (protocolsArg['HTTP/3'] ?? 0)
-  + (protocolsArg.Other ?? 0);
+): number => Object.entries(protocolsArg)
+  .filter(([name]) => name !== 'WebSocket')
+  .reduce((total, [, count]) => total + count, 0);
 
 export const appendProtocolConnectionSample = (
   localSeriesArg: TProtocolChartSeries,
@@ -104,7 +124,11 @@ export const appendProtocolConnectionSample = (
   maximumPointsArg: number,
 ): TProtocolChartSeries => {
   const localSeriesByName = new Map(localSeriesArg.map((series) => [series.name, series]));
-  return PROTOCOL_SERIES_ORDER.map((seriesName) => ({
+  const seriesOrder = getProtocolSeriesOrder([
+    ...localSeriesArg.map((series) => series.name),
+    ...Object.keys(protocolsArg),
+  ]);
+  return seriesOrder.map((seriesName) => ({
     name: seriesName,
     data: mergeChartPoints(
       localSeriesByName.get(seriesName)?.data ?? [],
@@ -123,4 +147,3 @@ export const shouldRestartNetworkActivityTimer = (
   isConnectedArg: boolean,
   documentHiddenArg: boolean,
 ): boolean => isConnectedArg && !documentHiddenArg;
-

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

@@ -0,0 +1,93 @@
+export const NETWORK_ACTIVITY_COLORS = {
+  'Total Active': '#64748b',
+  'HTTP/1.1': '#1976d2',
+  'HTTP/2': '#388e3c',
+  'HTTP/3': '#7b1fa2',
+  'WebSocket': '#f57c00',
+  'Other': '#757575',
+  'Inbound': '#22c55e',
+  'Outbound': '#8b5cf6',
+  'Requests/sec': '#3b82f6',
+} as const;
+
+export const NETWORK_ACTIVITY_PROTOCOL_ORDER = [
+  'HTTP/1.1',
+  'HTTP/2',
+  'HTTP/3',
+  'WebSocket',
+  'Other',
+] as const;
+
+export const PROTOCOL_CONNECTION_LEGEND_STATS: Array<'latest'> = ['latest'];
+export const PROTOCOL_CONNECTION_CHART_LINES: Array<'avg' | 'max'> = [];
+
+export const NETWORK_ACTIVITY_FALLBACK_COLORS = [
+  '#007aff',
+  '#32ade6',
+  '#af52de',
+  '#ff9500',
+  '#34c759',
+  '#ff2d55',
+] as const;
+
+const knownProtocolNames = new Set<string>(NETWORK_ACTIVITY_PROTOCOL_ORDER);
+
+export const getNetworkActivityColor = (
+  nameArg: string,
+  fallbackIndexArg = 0,
+): string => {
+  const canonicalColor = NETWORK_ACTIVITY_COLORS[
+    nameArg as keyof typeof NETWORK_ACTIVITY_COLORS
+  ];
+  if (canonicalColor) return canonicalColor;
+  const fallbackIndex = Math.max(0, Math.trunc(fallbackIndexArg));
+  return NETWORK_ACTIVITY_FALLBACK_COLORS[
+    fallbackIndex % NETWORK_ACTIVITY_FALLBACK_COLORS.length
+  ];
+};
+
+export const orderNetworkActivityProtocolNames = (
+  namesArg: string[],
+): string[] => {
+  const names = new Set(namesArg.filter((name) => name && name !== 'Total Active'));
+  const orderedKnown = NETWORK_ACTIVITY_PROTOCOL_ORDER
+    .filter((name) => name !== 'Other' && names.has(name));
+  const orderedUnknown = [...names]
+    .filter((name) => !knownProtocolNames.has(name))
+    .sort((nameA, nameB) => nameA.localeCompare(nameB));
+  return [
+    ...orderedKnown,
+    ...orderedUnknown,
+    ...(names.has('Other') ? ['Other'] : []),
+  ];
+};
+
+export const createNetworkProtocolDonutData = (
+  countsArg: Record<string, number>,
+  paletteProtocolNamesArg: string[] = [],
+): Array<{ name: string; value: number; color: string }> => {
+  const orderedNames = orderNetworkActivityProtocolNames(Object.keys(countsArg));
+  const paletteNames = orderNetworkActivityProtocolNames([
+    ...orderedNames,
+    ...paletteProtocolNamesArg,
+  ]);
+  const unknownNames = paletteNames.filter((name) => !knownProtocolNames.has(name));
+  return orderedNames
+    .filter((name) => (countsArg[name] ?? 0) > 0)
+    .map((name) => ({
+      name,
+      value: countsArg[name] ?? 0,
+      color: getNetworkActivityColor(name, unknownNames.indexOf(name)),
+    }));
+};
+
+export const colorNetworkProtocolSeries = <T extends { name: string }>(
+  seriesArg: T[],
+): Array<T & { color: string }> => {
+  const orderedNames = orderNetworkActivityProtocolNames(seriesArg.map((series) => series.name));
+  const unknownNames = orderedNames.filter((name) => !knownProtocolNames.has(name));
+  return seriesArg.map((series) => ({
+    ...series,
+    color: getNetworkActivityColor(series.name, unknownNames.indexOf(series.name)),
+  }));
+};

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

@@ -14,14 +14,14 @@ import {
   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',
-};
+import {
+  NETWORK_ACTIVITY_COLORS,
+  PROTOCOL_CONNECTION_CHART_LINES,
+  PROTOCOL_CONNECTION_LEGEND_STATS,
+  colorNetworkProtocolSeries,
+  createNetworkProtocolDonutData,
+  getNetworkActivityColor,
+} from './network-activity-visuals.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -181,13 +181,6 @@ export class OpsViewNetworkActivity extends DeesElement {
     };
   }
 
-  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);
@@ -239,6 +232,7 @@ export class OpsViewNetworkActivity extends DeesElement {
         display: flex;
         flex-direction: column;
         gap: 24px;
+        container-type: inline-size;
       }
 
 
@@ -345,8 +339,9 @@ export class OpsViewNetworkActivity extends DeesElement {
 
       .protocolChartGrid {
         display: grid;
-        grid-template-columns: 1fr;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 16px;
+        min-width: 0;
       }
 
       .protocolChartColumn {
@@ -356,6 +351,19 @@ export class OpsViewNetworkActivity extends DeesElement {
         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);
+        }
+      }
+
     `,
   ];
 
@@ -374,12 +382,12 @@ export class OpsViewNetworkActivity extends DeesElement {
             {
               name: 'Inbound',
               data: this.trafficDataIn,
-              color: '#22c55e',
+              color: NETWORK_ACTIVITY_COLORS.Inbound,
             },
             {
               name: 'Outbound',
               data: this.trafficDataOut,
-              color: '#8b5cf6',
+              color: NETWORK_ACTIVITY_COLORS.Outbound,
             }
           ]}
           .realtimeMode=${true}
@@ -587,7 +595,7 @@ export class OpsViewNetworkActivity extends DeesElement {
         value: activeConnections,
         type: 'number',
         icon: 'lucide:Plug',
-        color: activeConnections > 100 ? '#f59e0b' : '#22c55e',
+        color: NETWORK_ACTIVITY_COLORS['Total Active'],
         description: `Total: ${this.formatNumber(this.statsState.serverStats?.totalConnections || 0)} connections`,
         actions: [
           {
@@ -604,7 +612,7 @@ export class OpsViewNetworkActivity extends DeesElement {
         value: reqPerSec,
         type: 'trend',
         icon: 'lucide:ChartLine',
-        color: '#3b82f6',
+        color: NETWORK_ACTIVITY_COLORS['Requests/sec'],
         trendData: trendData,
         description: `Total: ${this.formatNumber(this.networkState.requestsTotal || 0)} requests`,
       },
@@ -615,7 +623,7 @@ export class OpsViewNetworkActivity extends DeesElement {
         unit: '',
         type: 'number',
         icon: 'lucide:Download',
-        color: '#22c55e',
+        color: NETWORK_ACTIVITY_COLORS.Inbound,
         description: `Total: ${this.formatBytes(this.networkState.totalBytes?.in || 0)}`,
       },
       {
@@ -625,7 +633,7 @@ export class OpsViewNetworkActivity extends DeesElement {
         unit: '',
         type: 'number',
         icon: 'lucide:Upload',
-        color: '#8b5cf6',
+        color: NETWORK_ACTIVITY_COLORS.Outbound,
         description: `Total: ${this.formatBytes(this.networkState.totalBytes?.out || 0)}`,
       },
     ];
@@ -642,28 +650,25 @@ export class OpsViewNetworkActivity extends DeesElement {
     const fp = this.networkState.frontendProtocols;
     const bp = this.networkState.backendProtocols;
 
-    const protoColors = PROTOCOL_COLORS;
-
-    const buildDonutData = (dist: interfaces.data.IProtocolDistribution | null) => {
-      if (!dist) return [];
-      const items: Array<{ name: string; value: number; color: string }> = [];
-      if (dist.h1Active > 0) items.push({ name: 'HTTP/1.1', value: dist.h1Active, color: protoColors['HTTP/1.1'] });
-      if (dist.h2Active > 0) items.push({ name: 'HTTP/2', value: dist.h2Active, color: protoColors['HTTP/2'] });
-      if (dist.h3Active > 0) items.push({ name: 'HTTP/3', value: dist.h3Active, color: protoColors['HTTP/3'] });
-      if (dist.wsActive > 0) items.push({ name: 'WebSocket', value: dist.wsActive, color: protoColors['WebSocket'] });
-      if (dist.otherActive > 0) items.push({ name: 'Other', value: dist.otherActive, color: protoColors['Other'] });
-      return items;
-    };
+    const buildDonutData = (
+      dist: interfaces.data.IProtocolDistribution | null,
+      historySeries: TProtocolChartSeries,
+    ) => dist
+      ? createNetworkProtocolDonutData(
+          this.getProtocolCounts(dist),
+          historySeries.map((series) => series.name),
+        )
+      : [];
 
-    const frontendData = buildDonutData(fp);
-    const backendData = buildDonutData(bp);
+    const frontendData = buildDonutData(fp, this.frontendConnectionSeries);
+    const backendData = buildDonutData(bp, this.backendConnectionSeries);
 
     return html`
       <div class="protocolChartGrid">
         <div class="protocolChartColumn">
           <dees-chart-donut
             .label=${'Frontend Protocols'}
-            .data=${frontendData.length > 0 ? frontendData : [{ name: 'No Traffic', value: 1, color: '#757575' }]}
+            .data=${frontendData.length > 0 ? frontendData : [{ name: 'No Traffic', value: 1, color: getNetworkActivityColor('Other') }]}
             .showLegend=${true}
             .showLabels=${true}
             .innerRadiusPercent=${'55%'}
@@ -671,7 +676,9 @@ export class OpsViewNetworkActivity extends DeesElement {
           ></dees-chart-donut>
           <dees-chart-area
             .label=${'Frontend Active Connections'}
-            .series=${this.getProtocolSeriesWithColors(this.frontendConnectionSeries)}
+            .series=${colorNetworkProtocolSeries(this.frontendConnectionSeries)}
+            .legendStats=${PROTOCOL_CONNECTION_LEGEND_STATS}
+            .chartLines=${PROTOCOL_CONNECTION_CHART_LINES}
             .realtimeMode=${true}
             .rollingWindow=${OpsViewNetworkActivity.CHART_WINDOW_MS}
             .yAxisFormatter=${(val: number) => `${Math.round(val)} active`}
@@ -680,7 +687,7 @@ export class OpsViewNetworkActivity extends DeesElement {
         <div class="protocolChartColumn">
           <dees-chart-donut
             .label=${'Backend Protocols'}
-            .data=${backendData.length > 0 ? backendData : [{ name: 'No Traffic', value: 1, color: '#757575' }]}
+            .data=${backendData.length > 0 ? backendData : [{ name: 'No Traffic', value: 1, color: getNetworkActivityColor('Other') }]}
             .showLegend=${true}
             .showLabels=${true}
             .innerRadiusPercent=${'55%'}
@@ -688,7 +695,9 @@ export class OpsViewNetworkActivity extends DeesElement {
           ></dees-chart-donut>
           <dees-chart-area
             .label=${'Backend Active Connections'}
-            .series=${this.getProtocolSeriesWithColors(this.backendConnectionSeries)}
+            .series=${colorNetworkProtocolSeries(this.backendConnectionSeries)}
+            .legendStats=${PROTOCOL_CONNECTION_LEGEND_STATS}
+            .chartLines=${PROTOCOL_CONNECTION_CHART_LINES}
             .realtimeMode=${true}
             .rollingWindow=${OpsViewNetworkActivity.CHART_WINDOW_MS}
             .yAxisFormatter=${(val: number) => `${Math.round(val)} active`}