From 9af0f857498a7caf2b7e4b8c0faac649393c3bf5 Mon Sep 17 00:00:00 2001 From: SaelixCode Date: Fri, 6 Mar 2026 23:07:17 -0500 Subject: [PATCH] fix: refine log level parsing and implement bottom auto-scroll --- CHANGELOG.md | 3 +++ backend/src/index.ts | 18 +++++++++---- frontend/src/components/EditorLayout.tsx | 4 +-- .../components/GlobalObservabilityView.tsx | 27 ++++++++++++------- 4 files changed, 36 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e5df8ed0..60b695f5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## [Unreleased] +- **Fixed:** Global logs misclassifying INFO messages as errors due to naive string matching. +- **Changed:** Global logs now display chronologically (newest at bottom) with smooth auto-scrolling. +- **Changed:** Renamed Observability navigation tab to Logs. - **Fixed:** TTY container log streams failing to parse globally. - **Fixed:** Global logs displaying in UTC instead of local browser timezone. - **Changed:** Global Logs UI revamped to use a floating, hover-based action bar to maximize terminal space. diff --git a/backend/src/index.ts b/backend/src/index.ts index 5370d16a..4f6e6f5c 100644 --- a/backend/src/index.ts +++ b/backend/src/index.ts @@ -807,8 +807,16 @@ app.get('/api/logs/global', async (req: Request, res: Response) => { } let level = source === 'STDERR' ? 'ERROR' : 'INFO'; - if (cleanMessage.toLowerCase().includes('warn')) level = 'WARN'; - else if (cleanMessage.toLowerCase().includes('error') || cleanMessage.toLowerCase().includes('fail')) level = 'ERROR'; + + if (/\b(warn|warning)\b/i.test(cleanMessage)) { + level = 'WARN'; + } else if (/\b(error|err|fatal|exception)\b/i.test(cleanMessage)) { + level = 'ERROR'; + } + + if (/\[\s*(info|inf|debug|dbg)\s*\]/i.test(cleanMessage) || /^(info|debug)\b/i.test(cleanMessage)) { + level = 'INFO'; + } allLogs.push({ stackName, containerName, source, level, message: cleanMessage, timestampMs }); }; @@ -834,9 +842,9 @@ app.get('/api/logs/global', async (req: Request, res: Response) => { } catch (err) { /* ignore */ } })); - // Sort globally by timestamp descending and limit to 1000 lines to prevent payload bloat - allLogs.sort((a, b) => b.timestampMs - a.timestampMs); - res.json(allLogs.slice(0, 1000)); + // Sort globally by timestamp ascending (newest bottom) and limit to 2000 lines + allLogs.sort((a, b) => a.timestampMs - b.timestampMs); + res.json(allLogs.slice(-2000)); } catch (error) { res.status(500).json({ error: 'Failed to fetch global logs' }); } diff --git a/frontend/src/components/EditorLayout.tsx b/frontend/src/components/EditorLayout.tsx index da13bd4e..f8740ced 100644 --- a/frontend/src/components/EditorLayout.tsx +++ b/frontend/src/components/EditorLayout.tsx @@ -800,10 +800,10 @@ export default function EditorLayout() { size="sm" className="rounded-lg" onClick={() => setActiveView('global-observability')} - title="Global Observability" + title="Global Logs" > - Observability + Logs {/* Settings Modal Toggle */} diff --git a/frontend/src/components/GlobalObservabilityView.tsx b/frontend/src/components/GlobalObservabilityView.tsx index aee3dc06..ce0756c3 100644 --- a/frontend/src/components/GlobalObservabilityView.tsx +++ b/frontend/src/components/GlobalObservabilityView.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState, useMemo } from 'react'; +import { useEffect, useState, useMemo, useRef } from 'react'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; @@ -24,6 +24,7 @@ export function GlobalObservabilityView() { const [selectedStacks, setSelectedStacks] = useState([]); const [streamFilter, setStreamFilter] = useState<'ALL' | 'STDOUT' | 'STDERR'>('ALL'); const [clearedAt, setClearedAt] = useState(0); + const bottomRef = useRef(null); const fetchData = async () => { setLoading(true); @@ -45,6 +46,7 @@ export function GlobalObservabilityView() { return () => clearInterval(interval); }, []); + const uniqueStacks = useMemo(() => { const stacks = new Set(logs.map(l => l.stackName)); return Array.from(stacks).sort(); @@ -75,6 +77,10 @@ export function GlobalObservabilityView() { }); }, [logs, selectedStacks, streamFilter, searchQuery, clearedAt]); + useEffect(() => { + bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); + }, [filteredLogs]); + const handleDownload = () => { if (filteredLogs.length === 0) return; const blob = new Blob([filteredLogs.map(l => `[${new Date(l.timestampMs).toLocaleTimeString([], { hour12: true })}] [${l.containerName}] ${l.level}: ${l.message}`).join('\n')], { type: 'text/plain;charset=utf-8' }); @@ -152,14 +158,17 @@ export function GlobalObservabilityView() { {filteredLogs.length > 0 ? ( - filteredLogs.map((log, idx) => ( -
- [{new Date(log.timestampMs).toLocaleTimeString([], { hour12: true })}] - [{log.containerName}] - {log.level}: - {log.message} -
- )) + <> + {filteredLogs.map((log, idx) => ( +
+ [{new Date(log.timestampMs).toLocaleTimeString([], { hour12: true })}] + [{log.containerName}] + {log.level}: + {log.message} +
+ ))} +
+ ) : (
{logs.length === 0 ? "No active logs found." : "No logs match the current filters."}