2025-11-23 18:23:51 +01:00
|
|
|
'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}`);
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
2025-11-23 18:48:23 +01:00
|
|
|
|
|
|
|
|
// 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}`);
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
feat: implement Phase 2 - Process Groups Management
Features added:
- Group-based process organization with collapsible cards
- Batch operations for groups (Start All, Stop All, Restart All)
- Group statistics display (running, stopped, fatal counts)
- Dedicated /groups page for group-centric management
- View toggle in /processes page (Flat view | Grouped view)
Implementation details:
- Created group API routes: /api/supervisor/groups/[name]/{start,stop,restart}
- Added React Query hooks: useStartProcessGroup, useStopProcessGroup, useRestartProcessGroup
- Created components: GroupCard, GroupView, GroupSelector
- Updated Navbar with Groups navigation link
- Integrated grouped view in processes page with toggle
Phase 2 complete (6-8 hours estimated)
2025-11-23 19:08:10 +01:00
|
|
|
|
|
|
|
|
// Process Group Management
|
|
|
|
|
|
|
|
|
|
async function startProcessGroup(name: string, wait: boolean = true): Promise<{ success: boolean; message: string; results: any[] }> {
|
|
|
|
|
const response = await fetch(`/api/supervisor/groups/${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 group');
|
|
|
|
|
}
|
|
|
|
|
return response.json();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function stopProcessGroup(name: string, wait: boolean = true): Promise<{ success: boolean; message: string; results: any[] }> {
|
|
|
|
|
const response = await fetch(`/api/supervisor/groups/${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 group');
|
|
|
|
|
}
|
|
|
|
|
return response.json();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function restartProcessGroup(name: string, wait: boolean = true): Promise<{ success: boolean; message: string; results: any[] }> {
|
|
|
|
|
const response = await fetch(`/api/supervisor/groups/${encodeURIComponent(name)}/restart`, {
|
|
|
|
|
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 restart process group');
|
|
|
|
|
}
|
|
|
|
|
return response.json();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function useStartProcessGroup() {
|
|
|
|
|
const queryClient = useQueryClient();
|
|
|
|
|
|
|
|
|
|
return useMutation({
|
|
|
|
|
mutationFn: ({ name, wait }: { name: string; wait?: boolean }) => startProcessGroup(name, wait),
|
|
|
|
|
onSuccess: (data) => {
|
|
|
|
|
toast.success(data.message);
|
|
|
|
|
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
|
|
|
|
|
},
|
|
|
|
|
onError: (error: Error) => {
|
|
|
|
|
toast.error(`Failed to start process group: ${error.message}`);
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function useStopProcessGroup() {
|
|
|
|
|
const queryClient = useQueryClient();
|
|
|
|
|
|
|
|
|
|
return useMutation({
|
|
|
|
|
mutationFn: ({ name, wait }: { name: string; wait?: boolean }) => stopProcessGroup(name, wait),
|
|
|
|
|
onSuccess: (data) => {
|
|
|
|
|
toast.success(data.message);
|
|
|
|
|
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
|
|
|
|
|
},
|
|
|
|
|
onError: (error: Error) => {
|
|
|
|
|
toast.error(`Failed to stop process group: ${error.message}`);
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function useRestartProcessGroup() {
|
|
|
|
|
const queryClient = useQueryClient();
|
|
|
|
|
|
|
|
|
|
return useMutation({
|
|
|
|
|
mutationFn: ({ name, wait }: { name: string; wait?: boolean }) => restartProcessGroup(name, wait),
|
|
|
|
|
onSuccess: (data) => {
|
|
|
|
|
toast.success(data.message);
|
|
|
|
|
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
|
|
|
|
|
},
|
|
|
|
|
onError: (error: Error) => {
|
|
|
|
|
toast.error(`Failed to restart process group: ${error.message}`);
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|