Files
supervisor-ui/lib/hooks/useSupervisor.ts
Sebastian Krüger 8273848837
Some checks failed
Build and Push Docker Image to Gitea / build-and-push (push) Failing after 54s
feat: complete Phase 1 - Full Log Viewer implementation
Phase 1 Complete: Log Viewer with Real-time Monitoring
======================================================

Features Added:
- Real-time log viewer with syntax highlighting (ERROR, WARNING, INFO)
- Play/Pause controls for auto-refresh
- Auto-scroll with user scroll detection
- Search and filter functionality with highlighting
- Process selector (all processes + supervisord main log)
- Stdout/Stderr log type switching
- Download logs to file
- Clear logs (process-specific or main log)
- Responsive layout with proper height handling

API Routes Added:
- GET /api/supervisor/logs - Read main supervisord log
- DELETE /api/supervisor/logs - Clear main log
- DELETE /api/supervisor/processes/[name]/logs - Clear process logs
- POST /api/supervisor/processes/logs/clear-all - Clear all logs

Hooks Added:
- useMainLog() - Query main supervisord log with auto-refresh
- useClearMainLog() - Mutation to clear main log
- useClearProcessLogs() - Mutation to clear process logs
- useClearAllLogs() - Mutation to clear all process logs

Components:
- LogViewer - Displays logs with syntax highlighting and search
- LogControls - Control panel with play/pause, auto-scroll, actions
- LogSearch - Search input with clear button
- Full logs page implementation with process/log type selection

UX Improvements:
- Color-coded log levels (red for errors, yellow for warnings, cyan for info)
- Search term highlighting in logs
- Auto-scroll with "Scroll to bottom" button when paused
- Confirmation dialogs for destructive actions
- Loading states and error handling
- Download logs with timestamped filenames

This completes the most requested feature (log viewing) with production-ready
functionality including real-time tailing, search, and management capabilities.

🤖 Generated with Claude Code (https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 18:48:23 +01:00

287 lines
9.0 KiB
TypeScript

'use client';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
import type { ProcessInfo, SystemInfo, LogTailResult } from '@/lib/supervisor/types';
// Query Keys
export const supervisorKeys = {
all: ['supervisor'] as const,
system: () => [...supervisorKeys.all, 'system'] as const,
processes: () => [...supervisorKeys.all, 'processes'] as const,
process: (name: string) => [...supervisorKeys.processes(), name] as const,
logs: (name: string, type: 'stdout' | 'stderr') =>
[...supervisorKeys.process(name), 'logs', type] as const,
};
// API Client Functions
async function fetchSystemInfo(): Promise<SystemInfo> {
const response = await fetch('/api/supervisor/system');
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to fetch system info');
}
return response.json();
}
async function fetchProcesses(): Promise<ProcessInfo[]> {
const response = await fetch('/api/supervisor/processes');
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to fetch processes');
}
return response.json();
}
async function fetchProcessInfo(name: string): Promise<ProcessInfo> {
const response = await fetch(`/api/supervisor/processes/${encodeURIComponent(name)}`);
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to fetch process info');
}
return response.json();
}
async function fetchProcessLogs(
name: string,
type: 'stdout' | 'stderr',
offset: number = -4096,
length: number = 4096
): Promise<LogTailResult> {
const response = await fetch(
`/api/supervisor/processes/${encodeURIComponent(name)}/logs/${type}?offset=${offset}&length=${length}`
);
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || `Failed to fetch ${type} logs`);
}
return response.json();
}
async function startProcess(name: string, wait: boolean = true): Promise<{ success: boolean; message: string }> {
const response = await fetch(`/api/supervisor/processes/${encodeURIComponent(name)}/start`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ wait }),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to start process');
}
return response.json();
}
async function stopProcess(name: string, wait: boolean = true): Promise<{ success: boolean; message: string }> {
const response = await fetch(`/api/supervisor/processes/${encodeURIComponent(name)}/stop`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ wait }),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to stop process');
}
return response.json();
}
async function restartProcess(name: string): Promise<{ success: boolean; message: string }> {
const response = await fetch(`/api/supervisor/processes/${encodeURIComponent(name)}/restart`, {
method: 'POST',
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to restart process');
}
return response.json();
}
// Custom Hooks
export function useSystemInfo() {
return useQuery({
queryKey: supervisorKeys.system(),
queryFn: fetchSystemInfo,
refetchInterval: 5000, // Refetch every 5 seconds
});
}
export function useProcesses(options?: { refetchInterval?: number }) {
return useQuery({
queryKey: supervisorKeys.processes(),
queryFn: fetchProcesses,
refetchInterval: options?.refetchInterval ?? 3000, // Default 3 seconds
});
}
export function useProcessInfo(name: string, enabled: boolean = true) {
return useQuery({
queryKey: supervisorKeys.process(name),
queryFn: () => fetchProcessInfo(name),
enabled,
refetchInterval: 3000,
});
}
export function useProcessLogs(
name: string,
type: 'stdout' | 'stderr',
options?: {
offset?: number;
length?: number;
enabled?: boolean;
refetchInterval?: number;
}
) {
return useQuery({
queryKey: [...supervisorKeys.logs(name, type), options?.offset, options?.length],
queryFn: () => fetchProcessLogs(name, type, options?.offset, options?.length),
enabled: options?.enabled ?? true,
refetchInterval: options?.refetchInterval ?? 2000,
});
}
export function useStartProcess() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: ({ name, wait }: { name: string; wait?: boolean }) => startProcess(name, wait),
onSuccess: (data, variables) => {
toast.success(data.message);
// Invalidate and refetch
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
queryClient.invalidateQueries({ queryKey: supervisorKeys.process(variables.name) });
},
onError: (error: Error) => {
toast.error(`Failed to start process: ${error.message}`);
},
});
}
export function useStopProcess() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: ({ name, wait }: { name: string; wait?: boolean }) => stopProcess(name, wait),
onSuccess: (data, variables) => {
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
queryClient.invalidateQueries({ queryKey: supervisorKeys.process(variables.name) });
},
onError: (error: Error) => {
toast.error(`Failed to stop process: ${error.message}`);
},
});
}
export function useRestartProcess() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (name: string) => restartProcess(name),
onSuccess: (data, name) => {
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
queryClient.invalidateQueries({ queryKey: supervisorKeys.process(name) });
},
onError: (error: Error) => {
toast.error(`Failed to restart process: ${error.message}`);
},
});
}
// Log Management
async function fetchMainLog(offset: number = -4096, length: number = 4096): Promise<{ logs: string }> {
const response = await fetch(`/api/supervisor/logs?offset=${offset}&length=${length}`);
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to fetch main log');
}
return response.json();
}
async function clearMainLog(): Promise<{ success: boolean; message: string }> {
const response = await fetch('/api/supervisor/logs', { method: 'DELETE' });
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to clear main log');
}
return response.json();
}
async function clearProcessLogs(name: string): Promise<{ success: boolean; message: string }> {
const response = await fetch(`/api/supervisor/processes/${encodeURIComponent(name)}/logs`, {
method: 'DELETE',
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to clear process logs');
}
return response.json();
}
async function clearAllLogs(): Promise<{ success: boolean; message: string }> {
const response = await fetch('/api/supervisor/processes/logs/clear-all', {
method: 'POST',
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to clear all logs');
}
return response.json();
}
export function useMainLog(options?: { offset?: number; length?: number; enabled?: boolean; refetchInterval?: number }) {
return useQuery({
queryKey: [...supervisorKeys.all, 'mainLog', options?.offset, options?.length],
queryFn: () => fetchMainLog(options?.offset, options?.length),
enabled: options?.enabled ?? true,
refetchInterval: options?.refetchInterval ?? 2000,
});
}
export function useClearMainLog() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: clearMainLog,
onSuccess: (data) => {
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: [...supervisorKeys.all, 'mainLog'] });
},
onError: (error: Error) => {
toast.error(`Failed to clear main log: ${error.message}`);
},
});
}
export function useClearProcessLogs() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (name: string) => clearProcessLogs(name),
onSuccess: (data, name) => {
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.process(name) });
},
onError: (error: Error) => {
toast.error(`Failed to clear process logs: ${error.message}`);
},
});
}
export function useClearAllLogs() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: clearAllLogs,
onSuccess: (data) => {
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.all });
},
onError: (error: Error) => {
toast.error(`Failed to clear all logs: ${error.message}`);
},
});
}