@mks2508/mks-ui 0.3.2 → 0.4.0

package/src/react-ui/blocks/Terminal/parsing/HttpLogParser.ts

@@ -0,0 +1,248 @@
+/**
+ * HTTP log parser for specialized HTTP request detection.
+ *
+ * Detects and parses HTTP request logs with syntax highlighting
+ * for methods (GET, POST, etc.), routes, and parameters.
+ *
+ * @module components/devenv/terminal/parsing/HttpLogParser
+ */
+
+import type { IParsedLogEntry } from './LogParser.types';
+
+/**
+ * HTTP method enumeration.
+ */
+export type THttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE';
+
+/**
+ * Parsed HTTP request data.
+ */
+export interface IHttpParsedData {
+  /** HTTP method */
+  method: THttpMethod;
+
+  /** Request path/route */
+  path: string;
+
+  /** Query parameters extracted from path */
+  params?: Record<string, string>;
+
+  /** Whether request opens a multiline block (has brace) */
+  opensMultiline: boolean;
+}
+
+/**
+ * HTTP log parser class.
+ *
+ * Detects HTTP requests in log lines and extracts structured data.
+ * Supports various log formats:
+ *
+ * - `GET /api/endpoint`
+ * - `GET /api/endpoint/:param {`
+ * - `POST /api/users HTTP/1.1`
+ *
+ * @example
+ * ```ts
+ * const parser = new HttpLogParser();
+ * const parsed = parser.parseLine('GET /api/logs/containers/:name/stream {');
+ * // parsed.method = 'GET'
+ * // parsed.path = '/api/logs/containers/:name/stream'
+ * // parsed.opensMultiline = true
+ * ```
+ */
+export class HttpLogParser {
+  /** HTTP method pattern */
+  private readonly HTTP_PATTERN = /^(GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS|CONNECT|TRACE)\s+(.+?)(?:\s+(\{))?$/i;
+
+  /** URL path with parameters pattern */
+  private readonly PATH_PARAM_PATTERN = /:([a-zA-Z_][a-zA-Z0-9_]*)/g;
+
+  /**
+   * Parse a log line for HTTP request data.
+   *
+   * @param line - Log line to parse
+   * @returns Parsed HTTP data or null if not an HTTP line
+   */
+  parseLine(line: string): IHttpParsedData | null {
+    const match = line.match(this.HTTP_PATTERN);
+    if (!match) return null;
+
+    const [, method, path, hasBrace] = match;
+
+    return {
+      method: method.toUpperCase() as THttpMethod,
+      path: path.trim(),
+      params: this.extractPathParams(path),
+      opensMultiline: hasBrace === '{',
+    };
+  }
+
+  /**
+   * Check if a line is an HTTP request line.
+   *
+   * @param line - Line to check
+   * @returns true if line is an HTTP request
+   */
+  isHttpLine(line: string): boolean {
+    return this.HTTP_PATTERN.test(line);
+  }
+
+  /**
+   * Extract path parameters from a route path.
+   *
+   * @param path - Route path (e.g., `/api/users/:id`)
+   * @returns Object with parameter names
+   */
+  extractPathParams(path: string): Record<string, string> | undefined {
+    const matches = path.matchAll(this.PATH_PARAM_PATTERN);
+    const params: Record<string, string> = {};
+
+    for (const match of matches) {
+      params[match[1]] = `:${match[1]}`;
+    }
+
+    return Object.keys(params).length > 0 ? params : undefined;
+  }
+
+  /**
+   * Format HTTP method with syntax highlighting class.
+   *
+   * @param _method - HTTP method
+   * @returns CSS class for highlighting
+   */
+  getMethodClass(_method: THttpMethod): string {
+    // All methods get the same pink color
+    return 'text-pink-400 font-semibold';
+  }
+
+  /**
+   * Format path with syntax highlighting.
+   *
+   * @param path - Request path
+   * @returns CSS class for path highlighting
+   */
+  getPathClass(): string {
+    return 'text-cyan-400';
+  }
+
+  /**
+   * Highlight an HTTP request line.
+   *
+   * Returns an array of parts with their associated CSS classes.
+   *
+   * @param line - HTTP request line
+   * @returns Array of {text, className} parts
+   */
+  highlightLine(line: string): Array<{ text: string; className?: string }> {
+    const parts: Array<{ text: string; className?: string }> = [];
+
+    const match = line.match(this.HTTP_PATTERN);
+    if (!match) {
+      return [{ text: line }];
+    }
+
+    const [fullMatch, method, path, hasBrace] = match;
+    const beforeMethod = line.indexOf(fullMatch);
+
+    // Text before the HTTP request (timestamp, level, etc)
+    if (beforeMethod > 0) {
+      parts.push({ text: line.slice(0, beforeMethod) });
+    }
+
+    // HTTP method
+    parts.push({
+      text: method.toUpperCase(),
+      className: this.getMethodClass(method as THttpMethod),
+    });
+
+    // Space after method
+    parts.push({ text: ' ' });
+
+    // Path - highlight segments
+    const pathParts = this.highlightPath(path.trim());
+    parts.push(...pathParts);
+
+    // Opening brace if present
+    if (hasBrace) {
+      parts.push({
+        text: ' {',
+        className: 'text-yellow-500',
+      });
+    }
+
+    return parts;
+  }
+
+  /**
+   * Highlight path segments (routes and parameters).
+   *
+   * @param path - Path string
+   * @returns Highlighted parts
+   * @private
+   */
+  private highlightPath(path: string): Array<{ text: string; className?: string }> {
+    const parts: Array<{ text: string; className?: string }> = [];
+    let remaining = path;
+
+    while (remaining.length > 0) {
+      // Find next path parameter
+      const paramMatch = remaining.match(/^\/?:([a-zA-Z_][a-zA-Z0-9_]*)/);
+
+      if (paramMatch) {
+        // Text before parameter (path segments)
+        const beforeParam = remaining.slice(0, paramMatch.index);
+        if (beforeParam.length > 0) {
+          parts.push({ text: beforeParam, className: this.getPathClass() });
+        }
+
+        // Parameter
+        parts.push({
+          text: paramMatch[0],
+          className: 'text-purple-400 bg-purple-500/10 px-0.5 rounded',
+        });
+
+        remaining = remaining.slice(paramMatch[0].length);
+      } else {
+        // No more parameters, add remaining text
+        parts.push({ text: remaining, className: this.getPathClass() });
+        break;
+      }
+    }
+
+    return parts;
+  }
+
+  /**
+   * Parse a multiline HTTP request block.
+   *
+   * Combines the initial request line with continuation lines
+   * that form JSON or structured data.
+   *
+   * @param lines - Array of log lines
+   * @returns Parsed entry with HTTP data
+   */
+  parseHttpBlock(lines: string[]): IParsedLogEntry | null {
+    if (lines.length === 0) return null;
+
+    const firstLine = lines[0];
+    const httpData = this.parseLine(firstLine);
+
+    if (!httpData) return null;
+
+    // Combine all lines into the raw text
+    const raw = lines.join('\n');
+
+    return {
+      raw,
+      formatted: raw,
+      level: 'info',
+      line_number: 0, // Set by caller
+      is_stderr: false,
+      message: firstLine,
+      content_type: 'http',
+      http_method: httpData.method,
+      http_path: httpData.path,
+      is_continuation: false,
+    };
+  }
+}

package/src/react-ui/blocks/Terminal/parsing/LogParser.types.ts

@@ -0,0 +1,283 @@
+/**
+ * Log parser types for terminal log processing.
+ *
+ * Provides interfaces and types for parsing raw log strings into
+ * structured, formatted output with ANSI colorization, log level detection,
+ * timestamp extraction, and structured data handling.
+ *
+ * @module components/devenv/terminal/parsing/types
+ */
+
+/**
+ * Log level enumeration matching common logging frameworks.
+ *
+ * Ordered from least to most severe for filtering operations.
+ * Maps to Synthwave design system colors:
+ * - trace: gray (hsl(240, 10%, 50%))
+ * - debug: cyan (hsl(190, 100%, 50%))
+ * - info: blue (hsl(210, 100%, 60%))
+ * - warn: yellow (hsl(45, 100%, 50%))
+ * - error: red (hsl(350, 100%, 63%))
+ * - fatal: magenta (hsl(330, 85%, 43%))
+ */
+export type TLogLevel =
+  | 'trace'
+  | 'debug'
+  | 'info'
+  | 'warn'
+  | 'error'
+  | 'fatal'
+  | 'unknown';
+
+/**
+ * Content type for specialized syntax highlighting.
+ */
+export type TContentType = 'plain' | 'http' | 'json' | 'table' | 'error';
+
+/**
+ * Filter type for log level filtering.
+ *
+ * Extends TLogLevel to include 'all' for showing all logs.
+ */
+export type TLogLevelFilter = TLogLevel | 'all';
+
+/**
+ * Parsed log entry representing a single line from a log stream.
+ *
+ * Contains the original raw text along with parsed metadata including
+ * formatted text with ANSI codes, detected log level, timestamp, and
+ * any structured data extracted from JSON logs.
+ */
+export interface IParsedLogEntry {
+  /** Original raw text from log stream */
+  raw: string;
+
+  /** Parsed and formatted text with ANSI escape codes for xterm.js */
+  formatted: string;
+
+  /** Detected log level based on pattern matching */
+  level: TLogLevel;
+
+  /** ISO 8601 timestamp if present in the log line */
+  timestamp?: string;
+
+  /** Display-formatted timestamp (time, date, or relative) */
+  timestamp_display?: string;
+
+  /** Line number in the stream (1-indexed) */
+  line_number: number;
+
+  /** Whether this line is from stderr (vs stdout) */
+  is_stderr: boolean;
+
+  /** Structured data if log line contains valid JSON */
+  structured?: Record<string, unknown>;
+
+  /** Detected components/tags (e.g., ⦗COMPONENT⦘ ⦗LOGSROUTES⦘) */
+  tags?: string[];
+
+  /** Message content after removing metadata */
+  message?: string;
+
+  /** Whether this line is a continuation of a multiline JSON/structured entry */
+  is_continuation?: boolean;
+
+  /** Line number of parent entry if this is a continuation line */
+  parent_line_number?: number;
+
+  /** Content type for specialized syntax highlighting */
+  content_type?: TContentType;
+
+  /** HTTP method if this is an HTTP request line */
+  http_method?: string;
+
+  /** HTTP path if this is an HTTP request line */
+  http_path?: string;
+
+  /** Table data if this is part of a table */
+  table_data?: unknown;
+}
+
+/**
+ * Parser state for incremental parsing of streaming logs.
+ *
+ * Maintains buffer and context between chunks for proper
+ * multiline log aggregation.
+ */
+export interface IParserState {
+  /** Incomplete multiline log buffer */
+  buffer: string;
+
+  /** Current line number (continues across chunks) */
+  line_number: number;
+
+  /** Last detected level (for multiline continuation) */
+  last_level: TLogLevel;
+
+  /** Last detected timestamp (for multiline continuation) */
+  last_timestamp?: string;
+
+  /** Multiline aggregation state (persists across chunks) */
+  multiline_state?: {
+    /** Whether currently in multiline mode */
+    isMultiline: boolean;
+    /** Parent entry for continuation lines */
+    parentEntry?: {
+      line_number: number;
+      level: TLogLevel;
+    };
+    /** Current depth of nested braces/brackets */
+    depth: number;
+    /** Expected closing character */
+    expectedClose?: '}' | ']';
+  };
+}
+
+/**
+ * ANSI style information extracted from escape codes.
+ *
+ * Represents parsed ANSI SGR (Select Graphic Rendition) sequences
+ * for color and text styling.
+ */
+export interface IAnsiStyle {
+  /** Foreground color code (30-37, 90-97) or undefined */
+  fg_color?: number;
+
+  /** Background color code (40-47, 100-107) or undefined */
+  bg_color?: number;
+
+  /** Text modifiers: bold, dim, italic, underline, blink, inverse, hidden */
+  modifiers: string[];
+
+  /** Index in the styles array (for tracking order) */
+  index?: number;
+}
+
+/**
+ * ANSI parse result with converted text and extracted styles.
+ *
+ * Result of parsing ANSI escape codes from a text string.
+ */
+export interface IAnsiParseResult {
+  /** Text with ANSI codes converted to xterm.js format */
+  text: string;
+
+  /** Detected styles (for potential CSS mapping) */
+  styles: IAnsiStyle[];
+}
+
+/**
+ * Log level detection result with confidence scoring.
+ *
+ * Provides the detected level along with metadata about
+ * the match for filtering and display purposes.
+ */
+export interface ILogLevelDetection {
+  /** Detected log level */
+  level: TLogLevel;
+
+  /** Confidence score (0-1, higher = more certain) */
+  confidence: number;
+
+  /** Matched string that triggered the detection */
+  matched: string;
+
+  /** Position of match in the string (0-indexed) */
+  position: number;
+}
+
+/**
+ * Log parser options for customization.
+ *
+ * Configuration options for the LogParserService to customize
+ * parsing behavior for different log formats.
+ */
+export interface ILogParserOptions {
+  /** Enable ANSI escape code parsing (default: true) */
+  enable_ansi?: boolean;
+
+  /** Timestamp format for display (default: 'time') */
+  timestamp_format?: 'full' | 'time' | 'relative' | 'none';
+
+  /** Custom log level pattern overrides */
+  level_patterns?: Partial<Record<TLogLevel, RegExp>>;
+
+  /** Whether to detect and parse JSON structured logs (default: true) */
+  enable_structured?: boolean;
+
+  /** Whether to extract tags from log lines (default: true) */
+  enable_tags?: boolean;
+
+  /** Maximum line length before truncation (default: 10000) */
+  max_line_length?: number;
+}
+
+/**
+ * Log filter options for filtering parsed entries.
+ *
+ * Options for filtering log entries by level, time range, or content.
+ */
+export interface ILogFilterOptions {
+  /** Minimum log level to include (trace is most permissive) */
+  min_level?: TLogLevel;
+
+  /** Only include logs after this timestamp (ISO string) */
+  after?: string;
+
+  /** Only include logs before this timestamp (ISO string) */
+  before?: string;
+
+  /** Only include logs matching this regex pattern */
+  pattern?: RegExp;
+
+  /** Only include logs from stderr (if true) or stdout (if false) */
+  stderr_only?: boolean;
+
+  /** Only include logs containing specific tags */
+  tags?: string[];
+}
+
+/**
+ * Timestamp format options for display.
+ */
+export type TTimestampFormat = 'full' | 'time' | 'relative' | 'none';
+
+/**
+ * Log statistics for a collection of entries.
+ *
+ * Aggregate statistics about log entries for display in
+ * status bars and footers.
+ */
+export interface ILogStats {
+  /** Total number of log entries */
+  total: number;
+
+  /** Count per log level */
+  by_level: Partial<Record<TLogLevel, number>>;
+
+  /** Total bytes (raw text size) */
+  bytes: number;
+
+  /** Earliest timestamp (ISO string) */
+  earliest?: string;
+
+  /** Latest timestamp (ISO string) */
+  latest?: string;
+}
+
+/**
+ * Log export options for downloading logs.
+ */
+export interface ILogExportOptions {
+  /** Format for export */
+  format: 'raw' | 'json' | 'csv';
+
+  /** Whether to include ANSI codes in raw export */
+  include_ansi?: boolean;
+
+  /** Filter options to apply before export */
+  filter?: ILogFilterOptions;
+
+  /** Filename for download (without extension) */
+  filename?: string;
+}