mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-07-27 12:18:59 +00:00
Merge pull request #17 from AnsoCode/feature/observability-remediation-v2
fix: Observability UI & TTY Parsing
This commit is contained in:
Anso
@@ -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:** 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.
|
||||
- **Fixed:** Docker raw byte multiplex headers leaking into global logs stream.
|
||||
- **Changed:** Relocated historical CPU/RAM charts to the Home Dashboard and normalized data values (CPU relative to host cores, RAM to GB).
|
||||
- **Added:** Dozzle-style Action Bar to Global Logs with multi-select stack filtering, search, and STDOUT/STDERR toggles.
|
||||
|
||||
+35
-32
@@ -791,42 +791,45 @@ app.get('/api/logs/global', async (req: Request, res: Response) => {
|
||||
|
||||
try {
|
||||
const container = dockerController.getDocker().getContainer(c.Id);
|
||||
const inspect = await container.inspect();
|
||||
const isTty = inspect.Config.Tty;
|
||||
const logsBuffer = await container.logs({ stdout: true, stderr: true, tail: 100, timestamps: true }) as Buffer;
|
||||
|
||||
let offset = 0;
|
||||
while (offset < logsBuffer.length) {
|
||||
const parseAndPushLog = (line: string, source: string) => {
|
||||
if (!line.trim()) return;
|
||||
const timeMatch = line.match(/^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d+Z)\s+(.*)/);
|
||||
let cleanMessage = line;
|
||||
let timestampMs = Date.now();
|
||||
|
||||
if (timeMatch) {
|
||||
timestampMs = new Date(timeMatch[1]).getTime();
|
||||
cleanMessage = timeMatch[2];
|
||||
}
|
||||
|
||||
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';
|
||||
|
||||
allLogs.push({ stackName, containerName, source, level, message: cleanMessage, timestampMs });
|
||||
};
|
||||
|
||||
if (isTty) {
|
||||
// No multiplex headers. Just split by newline.
|
||||
const payload = logsBuffer.toString('utf-8').replace(/[\u0000-\u0008\u000B-\u001F\u007F-\u009F]/g, "");
|
||||
payload.split('\n').forEach(line => parseAndPushLog(line, 'STDOUT'));
|
||||
} else {
|
||||
// Parse 8-byte Docker multiplex header
|
||||
const streamType = logsBuffer[offset]; // 1 = stdout, 2 = stderr
|
||||
const length = logsBuffer.readUInt32BE(offset + 4);
|
||||
offset += 8;
|
||||
let offset = 0;
|
||||
while (offset < logsBuffer.length) {
|
||||
const streamType = logsBuffer[offset];
|
||||
const length = logsBuffer.readUInt32BE(offset + 4);
|
||||
offset += 8;
|
||||
if (offset + length > logsBuffer.length) break;
|
||||
|
||||
if (offset + length > logsBuffer.length) break;
|
||||
const payload = logsBuffer.slice(offset, offset + length).toString('utf-8');
|
||||
offset += length;
|
||||
|
||||
const lines = payload.split('\n').filter(l => l.trim().length > 0);
|
||||
lines.forEach(line => {
|
||||
// Extract Docker ISO timestamp
|
||||
const timeMatch = line.match(/^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d+Z)\s+(.*)/);
|
||||
let timestampStr = "";
|
||||
let cleanMessage = line;
|
||||
let timestampMs = Date.now();
|
||||
|
||||
if (timeMatch) {
|
||||
const dateObj = new Date(timeMatch[1]);
|
||||
timestampMs = dateObj.getTime();
|
||||
const formattedDate = dateObj.toLocaleDateString('en-US', { month: 'short', day: '2-digit' });
|
||||
const formattedTime = dateObj.toLocaleTimeString('en-US', { hour12: false });
|
||||
timestampStr = `[${formattedDate} ${formattedTime}]`;
|
||||
cleanMessage = timeMatch[2];
|
||||
}
|
||||
|
||||
const source = streamType === 2 ? 'STDERR' : 'STDOUT';
|
||||
let level = source === 'STDERR' ? 'ERROR' : 'INFO';
|
||||
if (cleanMessage.toLowerCase().includes('warn')) level = 'WARN';
|
||||
|
||||
allLogs.push({ stackName, containerName, source, level, message: cleanMessage, timestampStr, timestampMs });
|
||||
});
|
||||
const payload = logsBuffer.slice(offset, offset + length).toString('utf-8');
|
||||
offset += length;
|
||||
payload.split('\n').forEach(line => parseAndPushLog(line, streamType === 2 ? 'STDERR' : 'STDOUT'));
|
||||
}
|
||||
}
|
||||
} catch (err) { /* ignore */ }
|
||||
}));
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { useEffect, useState, useMemo } from 'react';
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
@@ -13,7 +12,6 @@ interface LogEntry {
|
||||
source: string;
|
||||
level: string;
|
||||
message: string;
|
||||
timestampStr: string;
|
||||
timestampMs: number;
|
||||
}
|
||||
|
||||
@@ -79,7 +77,7 @@ export function GlobalObservabilityView() {
|
||||
|
||||
const handleDownload = () => {
|
||||
if (filteredLogs.length === 0) return;
|
||||
const blob = new Blob([filteredLogs.map(l => `${l.timestampStr} [${l.stackName} | ${l.containerName}] ${l.level}: ${l.message}`).join('\n')], { type: 'text/plain;charset=utf-8' });
|
||||
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' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
@@ -91,105 +89,83 @@ export function GlobalObservabilityView() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-background text-foreground overflow-hidden p-6 space-y-4">
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Global Logs</h1>
|
||||
<p className="text-muted-foreground mt-1">Centralized log viewer across all containers.</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button variant="outline" size="sm" onClick={handleClearLogs}>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Clear
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={handleDownload} disabled={filteredLogs.length === 0}>
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Download
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={fetchData} disabled={loading}>
|
||||
<RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
|
||||
Refresh
|
||||
</Button>
|
||||
<div className="flex flex-col h-full w-full relative group bg-[#0A0A0A] text-gray-300">
|
||||
{/* Floating Action Bar */}
|
||||
<div className="absolute top-2 right-6 z-10 flex gap-2 transition-opacity duration-200 opacity-0 group-hover:opacity-100 focus-within:opacity-100 bg-background/90 backdrop-blur-sm border border-border shadow-md rounded-md p-1 pr-1">
|
||||
<div className="relative flex items-center">
|
||||
<Search className="absolute left-2.5 h-3.5 w-3.5 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search logs..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-8 h-8 text-sm w-48 bg-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="h-8 text-sm">
|
||||
<Filter className="w-3.5 h-3.5 mr-2" />
|
||||
Stacks ({selectedStacks.length === 0 ? 'All' : selectedStacks.length})
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-48">
|
||||
{uniqueStacks.map(stack => (
|
||||
<DropdownMenuCheckboxItem
|
||||
key={stack}
|
||||
checked={selectedStacks.includes(stack)}
|
||||
onCheckedChange={() => handleStackToggle(stack)}
|
||||
>
|
||||
{stack}
|
||||
</DropdownMenuCheckboxItem>
|
||||
))}
|
||||
{uniqueStacks.length === 0 && (
|
||||
<div className="px-2 py-1.5 text-sm text-muted-foreground">No stacks found</div>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<Select value={streamFilter} onValueChange={(val: any) => setStreamFilter(val)}>
|
||||
<SelectTrigger className="w-[110px] h-8 text-sm">
|
||||
<SelectValue placeholder="Stream" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="ALL">All Streams</SelectItem>
|
||||
<SelectItem value="STDOUT">STDOUT</SelectItem>
|
||||
<SelectItem value="STDERR">STDERR</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Button variant="outline" size="sm" onClick={handleClearLogs} className="h-8 text-sm px-2">
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={handleDownload} disabled={filteredLogs.length === 0} className="h-8 text-sm px-2">
|
||||
<Download className="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card className="flex-1 flex flex-col overflow-hidden min-h-[400px] border-muted">
|
||||
{/* Action Bar */}
|
||||
<CardHeader className="py-3 px-4 border-b bg-muted/30">
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
|
||||
<div className="relative flex-1 max-w-sm">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search logs..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-9 h-9"
|
||||
/>
|
||||
</div>
|
||||
{loading && logs.length === 0 && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black/50 z-20">
|
||||
<RefreshCw className="w-6 h-6 text-primary animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="h-9">
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
Stacks ({selectedStacks.length === 0 ? 'All' : selectedStacks.length})
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-48">
|
||||
{uniqueStacks.map(stack => (
|
||||
<DropdownMenuCheckboxItem
|
||||
key={stack}
|
||||
checked={selectedStacks.includes(stack)}
|
||||
onCheckedChange={() => handleStackToggle(stack)}
|
||||
>
|
||||
{stack}
|
||||
</DropdownMenuCheckboxItem>
|
||||
))}
|
||||
{uniqueStacks.length === 0 && (
|
||||
<div className="px-2 py-1.5 text-sm text-muted-foreground">No stacks found</div>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<Select value={streamFilter} onValueChange={(val: any) => setStreamFilter(val)}>
|
||||
<SelectTrigger className="w-[120px] h-9">
|
||||
<SelectValue placeholder="Stream" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="ALL">All Streams</SelectItem>
|
||||
<SelectItem value="STDOUT">STDOUT</SelectItem>
|
||||
<SelectItem value="STDERR">STDERR</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<ScrollArea className="flex-1 p-4">
|
||||
{filteredLogs.length > 0 ? (
|
||||
filteredLogs.map((log, idx) => (
|
||||
<div key={idx} className="mb-1 leading-relaxed whitespace-pre-wrap break-all hover:bg-white/5 px-2 py-0.5 rounded -mx-2 font-mono text-xs">
|
||||
<span className="text-gray-500 mr-2">[{new Date(log.timestampMs).toLocaleTimeString([], { hour12: true })}]</span>
|
||||
<span className="text-blue-400 font-semibold mr-2">[{log.containerName}]</span>
|
||||
<span className={`mr-2 font-bold ${log.level === 'ERROR' ? 'text-red-500' : log.level === 'WARN' ? 'text-yellow-500' : 'text-green-500'}`}>{log.level}:</span>
|
||||
<span className={log.source === 'STDERR' ? 'text-red-300' : 'text-gray-300'}>{log.message}</span>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-gray-500 italic p-4 text-center mt-10">
|
||||
{logs.length === 0 ? "No active logs found." : "No logs match the current filters."}
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
{/* Terminal Window */}
|
||||
<CardContent className="p-0 overflow-hidden bg-[#0A0A0A] text-gray-300 flex-1 flex flex-col relative">
|
||||
{loading && logs.length === 0 && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black/50 z-10">
|
||||
<RefreshCw className="w-6 h-6 text-primary animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
<ScrollArea className="flex-1 p-4">
|
||||
{filteredLogs.length > 0 ? (
|
||||
filteredLogs.map((log, idx) => (
|
||||
<div key={idx} className="mb-1 leading-relaxed whitespace-pre-wrap break-all hover:bg-white/5 px-2 py-0.5 rounded -mx-2 font-mono text-xs">
|
||||
<span className="text-gray-500 mr-2">{log.timestampStr}</span>
|
||||
<span className="text-blue-400 font-semibold mr-2">[{log.stackName} | {log.containerName}]</span>
|
||||
<span className={`mr-2 font-bold ${log.level === 'ERROR' ? 'text-red-500' : log.level === 'WARN' ? 'text-yellow-500' : 'text-green-500'}`}>{log.level}:</span>
|
||||
<span className={log.source === 'STDERR' ? 'text-red-300' : 'text-gray-300'}>{log.message}</span>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-gray-500 italic p-4 text-center mt-10">
|
||||
{logs.length === 0 ? "No active logs found." : "No logs match the current filters."}
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user