feat(dees-chart-log): add xterm search addon support and enhance chart log demo with structured/raw (Docker-like) logs and themeable styles

2026-01-12 23:41:43 +00:00
parent 13ed06872a
commit d2925871fd
15 changed files with 988 additions and 227 deletions
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@design.estate/dees-catalog',
-  version: '3.35.1',
+  version: '3.36.0',
  description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }
--- a/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts
+++ b/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts
@@ -1,16 +1,18 @@
-import { html } from '@design.estate/dees-element';
+import { html, css, cssManager } from '@design.estate/dees-element';
 import type { DeesChartLog } from '../dees-chart-log/dees-chart-log.js';
 import '@design.estate/dees-wcctools/demotools';

 export const demoFunc = () => {
  return html`
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
-      // Get the log element
-      const logElement = elementArg.querySelector('dees-chart-log') as DeesChartLog;
-      let intervalId: number;
+      // Get the log elements
+      const structuredLog = elementArg.querySelector('#structured-log') as DeesChartLog;
+      const rawLog = elementArg.querySelector('#raw-log') as DeesChartLog;
+      let structuredIntervalId: number;
+      let rawIntervalId: number;

      const serverSources = ['Server', 'Database', 'API', 'Auth', 'Cache', 'Queue', 'WebSocket', 'Scheduler'];
-      
+
      const logTemplates = {
        debug: [
          'Loading module: {{module}}',
@@ -49,14 +51,30 @@ export const demoFunc = () => {
        ],
      };

+      // Docker-like raw log lines with ANSI colors
+      const dockerLogTemplates = [
+        '\x1b[90m2024-01-15T10:23:45.123Z\x1b[0m \x1b[36mINFO\x1b[0m  [nginx] GET /api/health 200 - 2ms',
+        '\x1b[90m2024-01-15T10:23:45.456Z\x1b[0m \x1b[33mWARN\x1b[0m  [redis] Connection pool running low: 3/10',
+        '\x1b[90m2024-01-15T10:23:45.789Z\x1b[0m \x1b[31mERROR\x1b[0m [mongodb] Query timeout after 30000ms',
+        '\x1b[90m2024-01-15T10:23:46.012Z\x1b[0m \x1b[36mINFO\x1b[0m  [app] Processing batch job #{{jobId}}',
+        '\x1b[90m2024-01-15T10:23:46.345Z\x1b[0m \x1b[32mOK\x1b[0m    [health] All services healthy',
+        '\x1b[90m2024-01-15T10:23:46.678Z\x1b[0m \x1b[36mINFO\x1b[0m  [kafka] Message consumed from topic: events',
+        '\x1b[90m2024-01-15T10:23:47.001Z\x1b[0m \x1b[35mDEBUG\x1b[0m [grpc] Request received: GetUser(id={{userId}})',
+        '\x1b[90m2024-01-15T10:23:47.234Z\x1b[0m \x1b[31mERROR\x1b[0m [auth] Token validation failed: expired',
+        '\x1b[90m2024-01-15T10:23:47.567Z\x1b[0m \x1b[33mWARN\x1b[0m  [rate-limit] IP {{ip}} approaching rate limit',
+        '\x1b[90m2024-01-15T10:23:47.890Z\x1b[0m \x1b[36mINFO\x1b[0m  [websocket] Client connected: session={{session}}',
+        // Multi-line log entry like stack traces
+        '\x1b[31mError: Connection refused\x1b[0m\n    at TcpConnection.connect (/app/node_modules/pg/lib/connection.js:12:15)\n    at Pool.connect (/app/node_modules/pg/lib/pool.js:45:23)\n    at async DatabaseService.query (/app/src/db/service.ts:89:12)',
+      ];
+
      const generateRandomLog = () => {
        const levels: Array<'debug' | 'info' | 'warn' | 'error' | 'success'> = ['debug', 'info', 'warn', 'error', 'success'];
-        const weights = [0.2, 0.5, 0.15, 0.1, 0.05]; // Weighted probability
-        
+        const weights = [0.2, 0.5, 0.15, 0.1, 0.05];
+
        const random = Math.random();
        let cumulative = 0;
        let level: typeof levels[0] = 'info';
-        
+
        for (let i = 0; i < weights.length; i++) {
          cumulative += weights[i];
          if (random < cumulative) {
@@ -68,7 +86,7 @@ export const demoFunc = () => {
        const source = serverSources[Math.floor(Math.random() * serverSources.length)];
        const templates = logTemplates[level];
        const template = templates[Math.floor(Math.random() * templates.length)];
-        
+
        // Replace placeholders with random values
        const message = template
          .replace('{{module}}', ['express', 'mongoose', 'redis', 'socket.io'][Math.floor(Math.random() * 4)])
@@ -92,17 +110,30 @@ export const demoFunc = () => {
          .replace('{{port}}', String(3000 + Math.floor(Math.random() * 10)))
          .replace('{{size}}', String(Math.floor(Math.random() * 500) + 100));

-        logElement.addLog(level, message, source);
+        structuredLog.addLog(level, message, source);
      };

-      const startSimulation = () => {
-        if (!intervalId) {
-          // Generate logs at random intervals between 500ms and 2500ms
+      const generateDockerLog = () => {
+        const template = dockerLogTemplates[Math.floor(Math.random() * dockerLogTemplates.length)];
+        const now = new Date().toISOString();
+
+        const logLine = template
+          .replace(/2024-01-15T10:23:\d{2}\.\d{3}Z/g, now)
+          .replace('{{jobId}}', String(Math.floor(Math.random() * 10000)))
+          .replace('{{userId}}', String(Math.floor(Math.random() * 10000)))
+          .replace('{{ip}}', `192.168.1.${Math.floor(Math.random() * 255)}`)
+          .replace('{{session}}', Math.random().toString(36).substring(2, 11));
+
+        rawLog.writelnRaw(logLine);
+      };
+
+      const startStructuredSimulation = () => {
+        if (!structuredIntervalId) {
          const scheduleNext = () => {
            generateRandomLog();
            const nextDelay = Math.random() * 2000 + 500;
-            intervalId = window.setTimeout(() => {
-              if (intervalId) {
+            structuredIntervalId = window.setTimeout(() => {
+              if (structuredIntervalId) {
                scheduleNext();
              }
            }, nextDelay);
@@ -111,10 +142,32 @@ export const demoFunc = () => {
        }
      };

-      const stopSimulation = () => {
-        if (intervalId) {
-          window.clearTimeout(intervalId);
-          intervalId = null;
+      const stopStructuredSimulation = () => {
+        if (structuredIntervalId) {
+          window.clearTimeout(structuredIntervalId);
+          structuredIntervalId = null;
+        }
+      };
+
+      const startRawSimulation = () => {
+        if (!rawIntervalId) {
+          const scheduleNext = () => {
+            generateDockerLog();
+            const nextDelay = Math.random() * 1000 + 200;
+            rawIntervalId = window.setTimeout(() => {
+              if (rawIntervalId) {
+                scheduleNext();
+              }
+            }, nextDelay);
+          };
+          scheduleNext();
+        }
+      };
+
+      const stopRawSimulation = () => {
+        if (rawIntervalId) {
+          window.clearTimeout(rawIntervalId);
+          rawIntervalId = null;
        }
      };

@@ -122,49 +175,103 @@ export const demoFunc = () => {
      const buttons = elementArg.querySelectorAll('dees-button');
      buttons.forEach(button => {
        const text = button.textContent?.trim();
-        if (text === 'Add Single Log') {
-          button.addEventListener('click', () => generateRandomLog());
-        } else if (text === 'Start Simulation') {
-          button.addEventListener('click', () => startSimulation());
-        } else if (text === 'Stop Simulation') {
-          button.addEventListener('click', () => stopSimulation());
+        switch (text) {
+          case 'Add Structured Log':
+            button.addEventListener('click', () => generateRandomLog());
+            break;
+          case 'Start Structured':
+            button.addEventListener('click', () => startStructuredSimulation());
+            break;
+          case 'Stop Structured':
+            button.addEventListener('click', () => stopStructuredSimulation());
+            break;
+          case 'Add Docker Log':
+            button.addEventListener('click', () => generateDockerLog());
+            break;
+          case 'Start Docker':
+            button.addEventListener('click', () => startRawSimulation());
+            break;
+          case 'Stop Docker':
+            button.addEventListener('click', () => stopRawSimulation());
+            break;
        }
      });
    }}>
      <style>
-      .demoBox {
-        position: relative;
-        background: #000000;
-        height: 100%;
-        width: 100%;
-        padding: 40px;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-      }
-      .controls {
-        display: flex;
-        gap: 10px;
-        flex-wrap: wrap;
-      }
-      .info {
-        color: #888;
-        font-size: 12px;
-        font-family: 'Geist Sans', sans-serif;
-      }
-    </style>
+        ${css`
+          .demoBox {
+            position: relative;
+            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 5%)')};
+            height: 100%;
+            width: 100%;
+            padding: 40px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .section {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+          }
+          .section-title {
+            color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+            font-size: 14px;
+            font-weight: 600;
+            font-family: 'Geist Sans', sans-serif;
+          }
+          .section-description {
+            color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+            font-size: 12px;
+            font-family: 'Geist Sans', sans-serif;
+          }
+          .controls {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+          }
+        `}
+      </style>
    <div class="demoBox">
-      <div class="controls">
-        <dees-button>Add Single Log</dees-button>
-        <dees-button>Start Simulation</dees-button>
-        <dees-button>Stop Simulation</dees-button>
+      <!-- Structured Logs Section -->
+      <div class="section">
+        <div class="section-title">Structured Logs (ILogEntry)</div>
+        <div class="section-description">
+          Structured log entries with level, message, and source. Supports search and keyword highlighting.
+        </div>
+        <div class="controls">
+          <dees-button>Add Structured Log</dees-button>
+          <dees-button>Start Structured</dees-button>
+          <dees-button>Stop Structured</dees-button>
+        </div>
+        <dees-chart-log
+          id="structured-log"
+          .label=${'Production Server Logs'}
+          .highlightKeywords=${['error', 'failed', 'timeout']}
+          .showMetrics=${true}
+        ></dees-chart-log>
+      </div>
+
+      <!-- Raw Logs Section -->
+      <div class="section">
+        <div class="section-title">Raw Logs (Docker/Container Style)</div>
+        <div class="section-description">
+          Raw log output with ANSI escape sequences for real Docker/container logs.
+        </div>
+        <div class="controls">
+          <dees-button>Add Docker Log</dees-button>
+          <dees-button>Start Docker</dees-button>
+          <dees-button>Stop Docker</dees-button>
+        </div>
+        <dees-chart-log
+          id="raw-log"
+          .label=${'Docker Container Logs'}
+          .mode=${'raw'}
+          .showMetrics=${false}
+        ></dees-chart-log>
      </div>
-      <div class="info">Simulating realistic server logs with various levels and sources</div>
-      <dees-chart-log
-        .label=${'Production Server Logs'}
-      ></dees-chart-log>
    </div>
    </dees-demowrapper>
  `;
-};
+};
--- a/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts
+++ b/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts
--- a/ts_web/services/DeesServiceLibLoader.ts
+++ b/ts_web/services/DeesServiceLibLoader.ts
@@ -25,6 +25,24 @@ export interface IXtermFitAddonBundle {
  FitAddon: typeof FitAddon;
 }

+/**
+ * Bundle type for xterm-addon-search
+ * SearchAddon is loaded from CDN, so we use a minimal interface
+ */
+export interface IXtermSearchAddonBundle {
+  SearchAddon: new () => IXtermSearchAddon;
+}
+
+/**
+ * Minimal interface for xterm SearchAddon
+ */
+export interface IXtermSearchAddon {
+  activate(terminal: Terminal): void;
+  dispose(): void;
+  findNext(term: string, searchOptions?: { regex?: boolean; wholeWord?: boolean; caseSensitive?: boolean; incremental?: boolean }): boolean;
+  findPrevious(term: string, searchOptions?: { regex?: boolean; wholeWord?: boolean; caseSensitive?: boolean; incremental?: boolean }): boolean;
+}
+
 /**
 * Bundle type for Tiptap editor and extensions
 */
@@ -56,6 +74,7 @@ export class DeesServiceLibLoader {
  // Cached library references
  private xtermLib: IXtermBundle | null = null;
  private xtermFitAddonLib: IXtermFitAddonBundle | null = null;
+  private xtermSearchAddonLib: IXtermSearchAddonBundle | null = null;
  private highlightJsLib: HLJSApi | null = null;
  private apexChartsLib: typeof ApexChartsType | null = null;
  private tiptapLib: ITiptapBundle | null = null;
@@ -63,6 +82,7 @@ export class DeesServiceLibLoader {
  // Loading promises to prevent duplicate concurrent loads
  private xtermLoadingPromise: Promise<IXtermBundle> | null = null;
  private xtermFitAddonLoadingPromise: Promise<IXtermFitAddonBundle> | null = null;
+  private xtermSearchAddonLoadingPromise: Promise<IXtermSearchAddonBundle> | null = null;
  private highlightJsLoadingPromise: Promise<HLJSApi> | null = null;
  private apexChartsLoadingPromise: Promise<typeof ApexChartsType> | null = null;
  private tiptapLoadingPromise: Promise<ITiptapBundle> | null = null;
@@ -134,6 +154,32 @@ export class DeesServiceLibLoader {
    return this.xtermFitAddonLoadingPromise;
  }

+  /**
+   * Load xterm-addon-search from CDN
+   * @returns Promise resolving to SearchAddon class
+   */
+  public async loadXtermSearchAddon(): Promise<IXtermSearchAddonBundle> {
+    if (this.xtermSearchAddonLib) {
+      return this.xtermSearchAddonLib;
+    }
+
+    if (this.xtermSearchAddonLoadingPromise) {
+      return this.xtermSearchAddonLoadingPromise;
+    }
+
+    this.xtermSearchAddonLoadingPromise = (async () => {
+      const url = `${CDN_BASE}/xterm-addon-search@${CDN_VERSIONS.xtermAddonSearch}/+esm`;
+      const module = await import(/* @vite-ignore */ url);
+
+      this.xtermSearchAddonLib = {
+        SearchAddon: module.SearchAddon,
+      };
+      return this.xtermSearchAddonLib;
+    })();
+
+    return this.xtermSearchAddonLoadingPromise;
+  }
+
  /**
   * Inject xterm CSS styles into the document head
   */
@@ -257,6 +303,7 @@ export class DeesServiceLibLoader {
    await Promise.all([
      this.loadXterm(),
      this.loadXtermFitAddon(),
+      this.loadXtermSearchAddon(),
      this.loadHighlightJs(),
      this.loadApexCharts(),
      this.loadTiptap(),
@@ -266,12 +313,14 @@ export class DeesServiceLibLoader {
  /**
   * Check if a specific library is already loaded
   */
-  public isLoaded(library: 'xterm' | 'xtermFitAddon' | 'highlightJs' | 'apexCharts' | 'tiptap'): boolean {
+  public isLoaded(library: 'xterm' | 'xtermFitAddon' | 'xtermSearchAddon' | 'highlightJs' | 'apexCharts' | 'tiptap'): boolean {
    switch (library) {
      case 'xterm':
        return this.xtermLib !== null;
      case 'xtermFitAddon':
        return this.xtermFitAddonLib !== null;
+      case 'xtermSearchAddon':
+        return this.xtermSearchAddonLib !== null;
      case 'highlightJs':
        return this.highlightJsLib !== null;
      case 'apexCharts':
--- a/ts_web/services/index.ts
+++ b/ts_web/services/index.ts
@@ -1,3 +1,3 @@
 export { DeesServiceLibLoader } from './DeesServiceLibLoader.js';
-export type { IXtermBundle, IXtermFitAddonBundle, ITiptapBundle } from './DeesServiceLibLoader.js';
+export type { IXtermBundle, IXtermFitAddonBundle, IXtermSearchAddonBundle, IXtermSearchAddon, ITiptapBundle } from './DeesServiceLibLoader.js';
 export { CDN_BASE, CDN_VERSIONS } from './versions.js';
--- a/ts_web/services/versions.ts
+++ b/ts_web/services/versions.ts
@@ -5,6 +5,7 @@
 export const CDN_VERSIONS = {
  xterm: '5.3.0',
  xtermAddonFit: '0.8.0',
+  xtermAddonSearch: '0.13.0',
  highlightJs: '11.11.1',
  apexcharts: '5.3.6',
  tiptap: '2.23.0',