dees-catalog/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts

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 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}}',
          'Cache hit for key: {{key}}',
          'SQL query executed in {{time}}ms',
          'Request headers: {{headers}}',
          'Environment variable loaded: {{var}}',
        ],
        info: [
          'Request received: {{method}} {{path}}',
          'User {{userId}} authenticated successfully',
          'Processing job {{jobId}} from queue',
          'Scheduled task "{{task}}" started',
          'WebSocket connection established from {{ip}}',
        ],
        warn: [
          'Slow query detected: {{query}} ({{time}}ms)',
          'Memory usage at {{percent}}%',
          'Rate limit approaching for IP {{ip}}',
          'Deprecated API endpoint called: {{endpoint}}',
          'Certificate expires in {{days}} days',
        ],
        error: [
          'Database connection lost: {{error}}',
          'Failed to process request: {{error}}',
          'Authentication failed for user {{user}}',
          'File not found: {{path}}',
          'Service unavailable: {{service}}',
        ],
        success: [
          'Server started successfully on port {{port}}',
          'Database migration completed',
          'Backup completed: {{size}} MB',
          'SSL certificate renewed',
          'Health check passed: all systems operational',
        ],
      };

      // 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];

        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) {
            level = levels[i];
            break;
          }
        }

        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)])
          .replace('{{key}}', 'user:' + Math.floor(Math.random() * 1000))
          .replace('{{time}}', String(Math.floor(Math.random() * 500) + 50))
          .replace('{{headers}}', 'Content-Type: application/json, Authorization: Bearer ...')
          .replace('{{var}}', ['NODE_ENV', 'DATABASE_URL', 'API_KEY', 'PORT'][Math.floor(Math.random() * 4)])
          .replace('{{method}}', ['GET', 'POST', 'PUT', 'DELETE'][Math.floor(Math.random() * 4)])
          .replace('{{path}}', ['/api/users', '/api/auth/login', '/api/products', '/health'][Math.floor(Math.random() * 4)])
          .replace('{{userId}}', String(Math.floor(Math.random() * 10000)))
          .replace('{{jobId}}', 'job_' + Math.random().toString(36).substring(2, 11))
          .replace('{{task}}', ['cleanup', 'backup', 'report-generation', 'cache-refresh'][Math.floor(Math.random() * 4)])
          .replace('{{ip}}', `192.168.1.${Math.floor(Math.random() * 255)}`)
          .replace('{{query}}', 'SELECT * FROM users WHERE ...')
          .replace('{{percent}}', String(Math.floor(Math.random() * 30) + 70))
          .replace('{{endpoint}}', '/api/v1/legacy')
          .replace('{{days}}', String(Math.floor(Math.random() * 30) + 1))
          .replace('{{error}}', ['ECONNREFUSED', 'ETIMEDOUT', 'ENOTFOUND'][Math.floor(Math.random() * 3)])
          .replace('{{user}}', 'user_' + Math.floor(Math.random() * 1000))
          .replace('{{service}}', ['Redis', 'MongoDB', 'ElasticSearch'][Math.floor(Math.random() * 3)])
          .replace('{{port}}', String(3000 + Math.floor(Math.random() * 10)))
          .replace('{{size}}', String(Math.floor(Math.random() * 500) + 100));

        structuredLog.addLog(level, message, source);
      };

      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;
            structuredIntervalId = window.setTimeout(() => {
              if (structuredIntervalId) {
                scheduleNext();
              }
            }, nextDelay);
          };
          scheduleNext();
        }
      };

      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;
        }
      };

      // Wire up button click handlers
      const buttons = elementArg.querySelectorAll('dees-button');
      buttons.forEach(button => {
        const text = button.textContent?.trim();
        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>
        ${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">
      <!-- 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>
    </dees-demowrapper>
  `;
};