Log view updates

Author: Timothy Dodd

src/LogMkAgent/Services/LogWatcher.cs

@@ -324,6 +324,11 @@ private async Task ReadNewLinesAsync(PodInfo info, CancellationToken stoppingTok
         var foundRecent = false;
         var linesProcessed = 0;
         var logLines = new List<LogLine>();
+        
+        // Multi-line buffering
+        LogLine? pendingLogLine = null;
+        var multiLineBuffer = new StringBuilder();
+        var lastTimestamp = DateTimeOffset.MinValue;
 
         try
         {
@@ -346,12 +351,30 @@ private async Task ReadNewLinesAsync(PodInfo info, CancellationToken stoppingTok
                 if (string.IsNullOrWhiteSpace(line))
                     continue;
 
-                var processedLine = ProcessLogLine(line, info, podSettings, deploymentSettings, ref foundRecent);
-                if (processedLine != null)
+                // Check if this line is a continuation of the previous log entry
+                if (IsLineContinuation(line, info, lastTimestamp))
                 {
-                    logLines.Add(processedLine);
-                    linesProcessed++;
+                    // Add to the buffer for the current pending log entry
+                    if (pendingLogLine != null)
+                    {
+                        multiLineBuffer.AppendLine(line);
+                        continue;
+                    }
+                }
 
+                // If we have a pending log entry, finalize it
+                if (pendingLogLine != null)
+                {
+                    // Append any buffered continuation lines
+                    if (multiLineBuffer.Length > 0)
+                    {
+                        pendingLogLine.Line += Environment.NewLine + multiLineBuffer.ToString().TrimEnd();
+                        multiLineBuffer.Clear();
+                    }
+                    
+                    logLines.Add(pendingLogLine);
+                    linesProcessed++;
+                    
                     // Batch processing to avoid overwhelming the system
                     if (logLines.Count >= 100)
                     {
@@ -362,6 +385,29 @@ private async Task ReadNewLinesAsync(PodInfo info, CancellationToken stoppingTok
                         logLines.Clear();
                     }
                 }
+
+                // Process the new log line
+                var processedLine = ProcessLogLine(line, info, podSettings, deploymentSettings, ref foundRecent);
+                if (processedLine != null)
+                {
+                    pendingLogLine = processedLine;
+                    lastTimestamp = processedLine.TimeStamp;
+                }
+                else
+                {
+                    pendingLogLine = null;
+                }
+            }
+
+            // Finalize any pending log entry
+            if (pendingLogLine != null)
+            {
+                if (multiLineBuffer.Length > 0)
+                {
+                    pendingLogLine.Line += Environment.NewLine + multiLineBuffer.ToString().TrimEnd();
+                }
+                logLines.Add(pendingLogLine);
+                linesProcessed++;
             }
 
             // Process remaining lines
@@ -564,6 +610,53 @@ private static int MinNonNegative(params int[] values)
         var validValues = values.Where(v => v >= 0);
         return validValues.Any() ? validValues.Min() : -1;
     }
+    
+    private bool IsLineContinuation(string line, PodInfo info, DateTimeOffset lastTimestamp)
+    {
+        if (string.IsNullOrWhiteSpace(line))
+            return false;
+            
+        // Parse container format to get the actual log content
+        var cleanLine = RemoveANSIEscapeRegex.Replace(line, string.Empty);
+        var processedLine = ParseContainerLogFormat(line, cleanLine);
+        
+        // Check if line has a timestamp at the beginning
+        var timestamp = ParseTimestamp(line);
+        if (timestamp.HasValue)
+        {
+            // If timestamps are very close (within 100ms), it might be a continuation
+            var timeDiff = Math.Abs((timestamp.Value - lastTimestamp).TotalMilliseconds);
+            if (timeDiff > 100)
+                return false;
+        }
+        
+        // Common patterns for continuation lines:
+        // 1. Stack trace lines starting with "at "
+        if (processedLine.TrimStart().StartsWith("at ", StringComparison.OrdinalIgnoreCase))
+            return true;
+            
+        // 2. Lines starting with whitespace (indented)
+        if (processedLine.Length > 0 && char.IsWhiteSpace(processedLine[0]))
+            return true;
+            
+        // 3. Lines that look like stack trace file references
+        if (processedLine.Contains("file:///") && processedLine.Contains(".mjs:"))
+            return true;
+            
+        // 4. Lines that are just closing braces or brackets
+        if (processedLine.Trim() == "}" || processedLine.Trim() == "]" || processedLine.Trim() == ")")
+            return true;
+            
+        // 5. Lines without any log level indicators
+        var logLevel = GetLogLevelCached(processedLine);
+        if (logLevel == LogLevel.Any && !timestamp.HasValue)
+        {
+            // No log level and no timestamp - likely a continuation
+            return true;
+        }
+        
+        return false;
+    }
 
     public override void Dispose()
     {

src/LogMkWeb/src/app/_components/dropdown/dropdown.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, ElementRef, HostListener, viewChild, forwardRef, signal, inject, input, output, computed } from '@angular/core';
+import { Component, ElementRef, HostListener, viewChild, forwardRef, signal, inject, input, output, computed, effect } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { LucideAngularModule } from 'lucide-angular';
 
@@ -150,6 +150,18 @@ export class DropdownComponent implements ControlValueAccessor {
 
   private onChange = (value: any) => {};
   private onTouched = () => {};
+  private lastWrittenValue: any = null;
+  
+  constructor() {
+    // Effect to update selected items when options change
+    effect(() => {
+      const options = this.processedOptions();
+      if (options.length > 0 && this.lastWrittenValue !== null) {
+        // Re-apply the last written value now that we have options
+        this.writeValue(this.lastWrittenValue);
+      }
+    });
+  }
 
   isSelected(option: DropdownOption): boolean {
     if (this.multiple()) {
@@ -220,17 +232,27 @@ export class DropdownComponent implements ControlValueAccessor {
 
   // ControlValueAccessor implementation
   writeValue(value: any): void {
+    this.lastWrittenValue = value;
+    
     if (this.multiple()) {
       const values = Array.isArray(value) ? value : [];
       const options = this.processedOptions();
-      const selectedItems = values.map(v => 
-        options.find(opt => opt.value === v)
-      ).filter(Boolean) as DropdownOption[];
-      this.selectedItems.set(selectedItems);
+      
+      // If options aren't loaded yet, store the raw values
+      if (options.length === 0 && values.length > 0) {
+        // Create temporary options from the values
+        const tempItems = values.map(v => ({ value: v, label: v }));
+        this.selectedItems.set(tempItems);
+      } else {
+        const selectedItems = values.map(v => 
+          options.find(opt => opt.value === v) || { value: v, label: v }
+        ).filter(Boolean) as DropdownOption[];
+        this.selectedItems.set(selectedItems);
+      }
     } else {
       this.selectedValue.set(value);
       const option = this.processedOptions().find(opt => opt.value === value);
-      this.selectedLabel.set(option?.label || '');
+      this.selectedLabel.set(option?.label || value || '');
     }
   }
 

src/LogMkWeb/src/app/_pages/main-log-page/_services/log-filter-state.ts

@@ -5,6 +5,7 @@ interface FilterState {
   selectedPod: string[] | null;
   searchString: string;
   selectedTimeRange: string | null; // Store as ISO string for localStorage
+  customTimeRange: { start: string; end: string } | null; // Custom time range from graph clicks
 }
 
 @Injectable({
@@ -17,6 +18,7 @@ export class LogFilterState {
   selectedPod = signal<string[] | null>(null);
   searchString = signal<string>('');
   selectedTimeRange = signal<Date | null>(null);
+  customTimeRange = signal<{ start: Date; end: Date } | null>(null);
 
   constructor() {
     this.loadFromStorage();
@@ -37,6 +39,14 @@ export class LogFilterState {
         if (state.selectedTimeRange) {
           this.selectedTimeRange.set(new Date(state.selectedTimeRange));
         }
+        
+        // Convert custom time range back to Date objects
+        if (state.customTimeRange) {
+          this.customTimeRange.set({
+            start: new Date(state.customTimeRange.start),
+            end: new Date(state.customTimeRange.end)
+          });
+        }
       }
     } catch (error) {
       console.warn('Failed to load filter state from localStorage:', error);
@@ -46,11 +56,16 @@ export class LogFilterState {
   private setupAutoSave(): void {
     // Save to localStorage whenever any filter changes
     effect(() => {
+      const customRange = this.customTimeRange();
       const state: FilterState = {
         selectedLogLevel: this.selectedLogLevel(),
         selectedPod: this.selectedPod(),
         searchString: this.searchString(),
-        selectedTimeRange: this.selectedTimeRange()?.toISOString() || null
+        selectedTimeRange: this.selectedTimeRange()?.toISOString() || null,
+        customTimeRange: customRange ? {
+          start: customRange.start.toISOString(),
+          end: customRange.end.toISOString()
+        } : null
       };
 
       try {
@@ -66,5 +81,21 @@ export class LogFilterState {
     this.selectedPod.set(null);
     this.searchString.set('');
     this.selectedTimeRange.set(null);
+    this.customTimeRange.set(null);
+  }
+
+  setCustomTimeRange(start: Date, end: Date): void {
+    this.customTimeRange.set({ start, end });
+    // Clear the regular time range when setting custom range
+    this.selectedTimeRange.set(null);
+  }
+
+  // Get the effective time range (custom takes priority over regular)
+  getEffectiveTimeRange(): Date | { start: Date; end: Date } | null {
+    const custom = this.customTimeRange();
+    if (custom) {
+      return custom;
+    }
+    return this.selectedTimeRange();
   }
 }

src/LogMkWeb/src/app/_pages/main-log-page/log-filter-controls/log-filter-controls.component.ts

@@ -1,5 +1,5 @@
 
-import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { startOfToday, subDays, subHours, subMonths } from 'date-fns'; // Import date-fns for date manipulations
@@ -51,15 +51,28 @@ import { LogFilterState } from '../_services/log-filter-state';
     </div>
     <div>
       <lucide-icon name="clock"></lucide-icon>
-      <app-dropdown
-        id="time-filter-select"
-        [items]="timeFilters"
-        [ngModel]="selectedTimeFilter()"
-        (ngModelChange)="selectedTimeFilter.set($event)"
-        bindLabel="label"
-        [bindValue]="null"
-        placeholder="Select time range"
-      ></app-dropdown>
+      @if (customTimeRangeDisplay()) {
+        <div class="d-flex align-items-center gap-2 form-control bg-primary text-white">
+          <span class="flex-grow-1 text-truncate" title="{{ customTimeRangeDisplay() }}">
+            📊 {{ customTimeRangeDisplay() }}
+          </span>
+          <button class="btn btn-sm btn-outline-light ms-auto" 
+                  (click)="clearCustomTimeRange()" 
+                  title="Clear chart selection">
+            ✕
+          </button>
+        </div>
+      } @else {
+        <app-dropdown
+          id="time-filter-select"
+          [items]="timeFilters"
+          [ngModel]="selectedTimeFilter()"
+          (ngModelChange)="selectedTimeFilter.set($event)"
+          bindLabel="label"
+          [bindValue]="null"
+          placeholder="Select time range"
+        ></app-dropdown>
+      }
     </div>
   `,
   styleUrl: './log-filter-controls.component.scss',
@@ -73,6 +86,25 @@ export class LogFilterControlsComponent {
   pods = signal<string[]>([]);
   searchString = signal<string>('');
   selectedTimeFilter = signal<TimeFilter | null>(null);
+
+  customTimeRangeDisplay = computed(() => {
+    const customRange = this.logFilterState.customTimeRange();
+    if (!customRange) return null;
+    
+    const start = customRange.start.toLocaleString(undefined, { 
+      month: 'short', 
+      day: 'numeric', 
+      hour: '2-digit', 
+      minute: '2-digit' 
+    });
+    const end = customRange.end.toLocaleString(undefined, { 
+      month: 'short', 
+      day: 'numeric', 
+      hour: '2-digit', 
+      minute: '2-digit' 
+    });
+    return `${start} - ${end}`;
+  });
   timeFilters: TimeFilter[] = [
     { label: 'Any', value: null },
     { label: 'Last Hour', value: subHours(startOfToday(), 1) },
@@ -115,6 +147,10 @@ export class LogFilterControlsComponent {
       this.pods.set(pods.map((p) => p.name));
     });
   }
+
+  clearCustomTimeRange(): void {
+    this.logFilterState.customTimeRange.set(null);
+  }
 }
 
 export interface TimeFilter {

src/LogMkWeb/src/app/_pages/main-log-page/log-stats/log-stats.component.scss

@@ -3,7 +3,12 @@
   width: 100%;
   height: 140px;
 
-  canvas {
+  .chart-canvas {
     width: 100%;
+    cursor: pointer;
+    
+    &:hover {
+      opacity: 0.9;
+    }
   }
 }