feat: detect and add simple coloring to json rows

adameska · Hettinger, David · commit e64f8c0deabb · 2025-11-18T11:14:11.000-06:00
Signed-off-by: Hettinger, David &lt;DHETTINGER@quad.com&gt;
diff --git a/packages/webview/src/component/pods/PodLogs.svelte b/packages/webview/src/component/pods/PodLogs.svelte
@@ -6,11 +6,12 @@ import type { Terminal } from '@xterm/xterm';
 import { getContext, onDestroy, onMount, tick } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
 import NoLogIcon from '/@/component/icons/NoLogIcon.svelte';
+import { detectJsonLogs } from '/@/component/terminal/json-colorizer';
 import {
-    ansi256Colours,
-    colorizeJSON,
-    colorizeLogLevel,
-    colourizedANSIContainerName,
+  ansi256Colours,
+  colorizeJSON,
+  colorizeLogLevel,
+  colourizedANSIContainerName,
 } from '/@/component/terminal/terminal-colors';
 import TerminalWindow from '/@/component/terminal/TerminalWindow.svelte';
 import { Streams } from '/@/stream/streams';
@@ -23,6 +24,12 @@ let { object }: Props = $props();
 // Logs has been initialized
 let noLogs = $state(true);
 
+// Track if logs are JSON format (auto-detected from first 10 lines)
+let isJsonFormat = $state<boolean | undefined>(undefined);
+// TODO once we have a toolbar in logs we can add a checkbox/hamburger menu for this setting
+let shouldColorizeLogs = $state<boolean>(true);
+let logBuffer: string[] = [];
+
 let logsTerminal = $state<Terminal>();
 
 let disposables: IDisposable[] = [];
@@ -32,6 +39,50 @@ const streams = getContext<Streams>(Streams);
 // if we run out of colours, we'll start from the beginning.
 const colourizedContainerName = new SvelteMap<string, string>();
 
+/**
+ * Colorizes and formats log lines with optional container prefix.
+ * Applies log level colorization and JSON colorization (if detected).
+ *
+ * @param data - Raw log data from stream
+ * @param containerName - Name of the container (for multi-container pods)
+ * @param maxNameLength - Maximum container name length for padding (0 for single container)
+ * @returns Formatted and colorized log lines
+ */
+const colorizeAndFormatLogs = (data: string, containerName?: string, maxNameLength: number = 0): string => {
+  let lines = data.split('\n');
+
+  if (shouldColorizeLogs) {
+    // Auto-detect JSON format from first batch of logs
+    if (isJsonFormat === undefined) {
+      logBuffer.push(...lines.filter(l => l.trim()));
+      if (logBuffer.length >= 10) {
+        isJsonFormat = detectJsonLogs(logBuffer);
+        logBuffer = []; // Clear buffer after detection
+      }
+    }
+
+    // Apply colorization: JSON first (if detected/only a few lines of logs), then log levels
+    lines =
+      isJsonFormat || true
+        ? lines.map(line => colorizeLogLevel(colorizeJSON(line)))
+        : lines.map(line => colorizeLogLevel(line));
+  }
+
+  // Add container prefix for multi-container pods
+  if (containerName && maxNameLength > 0) {
+    const padding = ' '.repeat(maxNameLength - containerName.length);
+    const colouredName = colourizedContainerName.get(containerName);
+    // All lines are prefixed, except the last one if it's empty
+    return lines
+      .map((line, index, arr) =>
+        index < arr.length - 1 || line.length > 0 ? `${padding}${colouredName}|${line}` : line,
+      )
+      .join('\n');
+  }
+
+  return lines.join('\n');
+};
+
 onMount(async () => {
   logsTerminal?.clear();
 
@@ -50,29 +101,14 @@ onMount(async () => {
     });
   }
 
-  const multiContainers =
-    containerCount > 1
-      ? (name: string, data: string, callback: (data: string) => void): void => {
-          const padding = ' '.repeat(maxNameLength - name.length);
-          const colouredName = colourizedContainerName.get(name);
-
-          // All lines are prefixed, except the last one if it's empty.
-          const lines = data
-            .split('\n')
-            .map(line => colorizeJSON(line))
-            .map(line => colorizeLogLevel(line))
-            .map((line, index, arr) =>
-              index < arr.length - 1 || line.length > 0 ? `${padding}${colouredName}|${line}` : line,
-            );
-          callback(lines.join('\n'));
-        }
-      : (_name: string, data: string, callback: (data: string) => void): void => {
-          const lines = data
-            .split('\n')
-            .map(line => colorizeJSON(line))
-            .map(line => colorizeLogLevel(line));
-          callback(lines.join('\n'));
-        };
+  const processLogData = (containerName: string, data: string, callback: (data: string) => void): void => {
+    const formattedLogs = colorizeAndFormatLogs(
+      data,
+      containerCount > 1 ? containerName : undefined,
+      containerCount > 1 ? maxNameLength : 0,
+    );
+    callback(formattedLogs);
+  };
 
   for (const containerName of object.spec?.containers.map(c => c.name) ?? []) {
     disposables.push(
@@ -81,7 +117,7 @@ onMount(async () => {
         object.metadata?.namespace ?? '',
         containerName,
         chunk => {
-          multiContainers(containerName, chunk.data, data => {
+          processLogData(containerName, chunk.data, data => {
             if (noLogs) {
               noLogs = false;
             }
diff --git a/packages/webview/src/component/terminal/json-colorizer.spec.ts b/packages/webview/src/component/terminal/json-colorizer.spec.ts
@@ -19,7 +19,7 @@
 import { describe, expect, test } from 'vitest';
 
 import type { JsonColorScheme } from './json-colorizer.js';
-import { JsonColorizer } from './json-colorizer.js';
+import { detectJsonLogs, JsonColorizer } from './json-colorizer.js';
 
 describe('JsonColorizer', () => {
   const colorScheme: JsonColorScheme = {
@@ -283,3 +283,157 @@ describe('JsonColorizer', () => {
     expect(result).toContain('\u001b[32m0.5\u001b[0m');
   });
 });
+
+describe('detectJsonLogs', () => {
+  test('should detect JSON logs when 80% or more lines are valid JSON', () => {
+    const logs = [
+      '{"timestamp":"2025-11-18T10:00:00Z","level":"info","message":"Starting application"}',
+      '{"timestamp":"2025-11-18T10:00:01Z","level":"info","message":"Connected to database"}',
+      '{"timestamp":"2025-11-18T10:00:02Z","level":"info","message":"Server listening on port 8080"}',
+      '{"timestamp":"2025-11-18T10:00:03Z","level":"debug","message":"Request received"}',
+      '{"timestamp":"2025-11-18T10:00:04Z","level":"debug","message":"Processing request"}',
+      '{"timestamp":"2025-11-18T10:00:05Z","level":"info","message":"Request completed"}',
+      '{"timestamp":"2025-11-18T10:00:06Z","level":"info","message":"Cache updated"}',
+      '{"timestamp":"2025-11-18T10:00:07Z","level":"info","message":"Background job started"}',
+      'Not a JSON line',
+      '{"timestamp":"2025-11-18T10:00:08Z","level":"info","message":"Job completed"}',
+    ];
+
+    expect(detectJsonLogs(logs)).toBe(true);
+  });
+
+  test('should not detect JSON logs when less than 80% are valid JSON', () => {
+    const logs = [
+      '{"timestamp":"2025-11-18T10:00:00Z","level":"info","message":"Starting"}',
+      '{"timestamp":"2025-11-18T10:00:01Z","level":"info","message":"Running"}',
+      'Regular log line without JSON',
+      'Another regular log line',
+      'Yet another non-JSON line',
+      'Still not JSON',
+      'Nope, not JSON either',
+      '{"timestamp":"2025-11-18T10:00:02Z","level":"info","message":"Done"}',
+      'More regular logs',
+      'Last regular log',
+    ];
+
+    expect(detectJsonLogs(logs)).toBe(false);
+  });
+
+  test('should handle empty log array', () => {
+    expect(detectJsonLogs([])).toBe(false);
+  });
+
+  test('should ignore empty lines when calculating ratio', () => {
+    const logs = [
+      '{"timestamp":"2025-11-18T10:00:00Z","level":"info","message":"Line 1"}',
+      '',
+      '{"timestamp":"2025-11-18T10:00:01Z","level":"info","message":"Line 2"}',
+      '',
+      '{"timestamp":"2025-11-18T10:00:02Z","level":"info","message":"Line 3"}',
+      '',
+      '{"timestamp":"2025-11-18T10:00:03Z","level":"info","message":"Line 4"}',
+      '',
+      '{"timestamp":"2025-11-18T10:00:04Z","level":"info","message":"Line 5"}',
+      '',
+      '{"timestamp":"2025-11-18T10:00:05Z","level":"info","message":"Line 6"}',
+      '',
+      '{"timestamp":"2025-11-18T10:00:06Z","level":"info","message":"Line 7"}',
+      '',
+      '{"timestamp":"2025-11-18T10:00:07Z","level":"info","message":"Line 8"}',
+      '',
+    ];
+
+    expect(detectJsonLogs(logs)).toBe(true);
+  });
+
+  test('should only check first 10 non-empty lines', () => {
+    const logs = [
+      '{"timestamp":"2025-11-18T10:00:00Z","level":"info","message":"Line 1"}',
+      '{"timestamp":"2025-11-18T10:00:01Z","level":"info","message":"Line 2"}',
+      '{"timestamp":"2025-11-18T10:00:02Z","level":"info","message":"Line 3"}',
+      '{"timestamp":"2025-11-18T10:00:03Z","level":"info","message":"Line 4"}',
+      '{"timestamp":"2025-11-18T10:00:04Z","level":"info","message":"Line 5"}',
+      '{"timestamp":"2025-11-18T10:00:05Z","level":"info","message":"Line 6"}',
+      '{"timestamp":"2025-11-18T10:00:06Z","level":"info","message":"Line 7"}',
+      '{"timestamp":"2025-11-18T10:00:07Z","level":"info","message":"Line 8"}',
+      '{"timestamp":"2025-11-18T10:00:08Z","level":"info","message":"Line 9"}',
+      '{"timestamp":"2025-11-18T10:00:09Z","level":"info","message":"Line 10"}',
+      // These lines after the 10th should be ignored
+      'Not JSON line 11',
+      'Not JSON line 12',
+      'Not JSON line 13',
+    ];
+
+    expect(detectJsonLogs(logs)).toBe(true);
+  });
+
+  test('should detect JSON with nested objects', () => {
+    const logs = [
+      '{"user":{"id":123,"name":"John"},"action":"login"}',
+      '{"user":{"id":124,"name":"Jane"},"action":"logout"}',
+      '{"data":{"key":"value","nested":{"deep":"data"}},"timestamp":"2025-11-18"}',
+      '{"array":[1,2,3],"object":{"a":"b"}}',
+      '{"simple":"test","number":42}',
+      '{"bool":true,"null":null}',
+      '{"str":"value","num":123}',
+      '{"x":1,"y":2}',
+      '{"foo":"bar"}',
+      '{"last":"one"}',
+    ];
+
+    expect(detectJsonLogs(logs)).toBe(true);
+  });
+
+  test('should not detect lines with braces but no key-value pairs', () => {
+    const logs = [
+      'Processing {item}',
+      'Found {value} in cache',
+      'Error: {error message}',
+      'Debug: {info}',
+      'Status: {ok}',
+      'Result: {success}',
+      'Output: {data}',
+      'Input: {params}',
+      'Config: {settings}',
+      'State: {ready}',
+    ];
+
+    expect(detectJsonLogs(logs)).toBe(false);
+  });
+
+  test('should detect exactly 80% threshold', () => {
+    const logs = [
+      '{"valid":"json","line":1}',
+      '{"valid":"json","line":2}',
+      '{"valid":"json","line":3}',
+      '{"valid":"json","line":4}',
+      '{"valid":"json","line":5}',
+      '{"valid":"json","line":6}',
+      '{"valid":"json","line":7}',
+      '{"valid":"json","line":8}',
+      'Not JSON line 9',
+      'Not JSON line 10',
+    ];
+
+    // 8 out of 10 = 80%
+    expect(detectJsonLogs(logs)).toBe(true);
+  });
+
+  test('should not detect just below 80% threshold', () => {
+    const logs = [
+      '{"valid":"json","line":1}',
+      '{"valid":"json","line":2}',
+      '{"valid":"json","line":3}',
+      '{"valid":"json","line":4}',
+      '{"valid":"json","line":5}',
+      '{"valid":"json","line":6}',
+      '{"valid":"json","line":7}',
+      'Not JSON line 8',
+      'Not JSON line 9',
+      'Not JSON line 10',
+    ];
+
+    // 7 out of 10 = 70%
+    expect(detectJsonLogs(logs)).toBe(false);
+  });
+});
diff --git a/packages/webview/src/component/terminal/json-colorizer.ts b/packages/webview/src/component/terminal/json-colorizer.ts
@@ -209,3 +209,46 @@ export class JsonColorizer {
     return undefined;
   }
 }
+
+/**
+ * Checks if a string appears to be valid JSON.
+ * A valid JSON line should have both { and } and contain at least one key-value pair pattern.
+ *
+ * @param line - The line to check
+ * @returns true if the line appears to be JSON
+ */
+export function isValidJSON(line: string): boolean {
+  const trimmed = line.trim();
+  if (!trimmed) return false;
+
+  // Check for basic JSON structure: has { and } and contains key-value patterns
+  const hasBraces = trimmed.includes('{') && trimmed.includes('}');
+  if (!hasBraces) return false;
+
+  // Look for key-value pair pattern: "key": value or "key":value
+  const kvpPattern = /"[^"]+"\s*:\s*[^,}]+/;
+  return kvpPattern.test(trimmed);
+}
+
+/**
+ * Detects if log lines are predominantly JSON format.
+ * Checks the first 10 non-empty lines and returns true if at least 80% are valid JSON.
+ *
+ * @param lines - Array of log lines to analyze
+ * @returns true if logs should be treated as JSON format
+ */
+export function detectJsonLogs(lines: string[]): boolean {
+  const samplesToCheck = 10;
+  const threshold = 0.8; // 80%
+
+  // Filter out empty lines and take first 10
+  const nonEmptyLines = lines.filter(line => line.trim().length > 0).slice(0, samplesToCheck);
+
+  // Need at least a few lines to make a determination
+  if (nonEmptyLines.length === 0) return false;
+
+  const jsonCount = nonEmptyLines.filter(line => isValidJSON(line)).length;
+  const jsonRatio = jsonCount / nonEmptyLines.length;
+
+  return jsonRatio >= threshold;
+}
