feat: initial commit - Supervisor UI with Next.js 16 and Tailwind CSS 4
Some checks failed
Build and Push Docker Image to Gitea / build-and-push (push) Failing after 1m22s
Some checks failed
Build and Push Docker Image to Gitea / build-and-push (push) Failing after 1m22s
- Modern web interface for Supervisor process management - Built with Next.js 16 (App Router) and Tailwind CSS 4 - Full XML-RPC client implementation for Supervisor API - Real-time process monitoring with auto-refresh - Process control: start, stop, restart operations - Modern dashboard with system status and statistics - Dark/light theme with OKLCH color system - Docker multi-stage build with runtime env var configuration - Gitea CI/CD workflow for automated builds - Comprehensive documentation (README, IMPLEMENTATION, DEPLOYMENT) Features: - Backend proxy pattern for secure API communication - React Query for state management and caching - TypeScript strict mode with Zod validation - Responsive design with mobile support - Health check endpoint for monitoring - Non-root user security in Docker Environment Variables: - SUPERVISOR_HOST, SUPERVISOR_PORT - SUPERVISOR_USERNAME, SUPERVISOR_PASSWORD (optional) - Configurable at build-time and runtime 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
115
components/process/ProcessCard.tsx
Normal file
115
components/process/ProcessCard.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
'use client';
|
||||
|
||||
import { Play, Square, RotateCw, Activity } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { ProcessInfo, getProcessStateClass, formatUptime, canStartProcess, canStopProcess } from '@/lib/supervisor/types';
|
||||
import { useStartProcess, useStopProcess, useRestartProcess } from '@/lib/hooks/useSupervisor';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
|
||||
interface ProcessCardProps {
|
||||
process: ProcessInfo;
|
||||
}
|
||||
|
||||
export function ProcessCard({ process }: ProcessCardProps) {
|
||||
const startMutation = useStartProcess();
|
||||
const stopMutation = useStopProcess();
|
||||
const restartMutation = useRestartProcess();
|
||||
|
||||
const fullName = `${process.group}:${process.name}`;
|
||||
const isLoading = startMutation.isPending || stopMutation.isPending || restartMutation.isPending;
|
||||
const uptime = process.state === 20 ? formatUptime(process.start, process.now) : 'Not running';
|
||||
|
||||
const handleStart = () => startMutation.mutate({ name: fullName });
|
||||
const handleStop = () => stopMutation.mutate({ name: fullName });
|
||||
const handleRestart = () => restartMutation.mutate(fullName);
|
||||
|
||||
return (
|
||||
<Card className="transition-all hover:shadow-lg animate-fade-in">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-lg">{process.name}</CardTitle>
|
||||
<p className="text-sm text-muted-foreground mt-1">{process.group}</p>
|
||||
</div>
|
||||
<Badge
|
||||
className={cn(
|
||||
'ml-2',
|
||||
getProcessStateClass(process.state),
|
||||
'border px-3 py-1 font-mono text-xs'
|
||||
)}
|
||||
>
|
||||
{process.statename}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-4">
|
||||
{/* Metrics */}
|
||||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||
<div>
|
||||
<span className="text-muted-foreground">PID:</span>
|
||||
<span className="ml-2 font-mono">{process.pid || 'N/A'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Uptime:</span>
|
||||
<span className="ml-2 font-mono">{uptime}</span>
|
||||
</div>
|
||||
{process.exitstatus !== 0 && (
|
||||
<div className="col-span-2">
|
||||
<span className="text-muted-foreground">Exit Status:</span>
|
||||
<span className="ml-2 font-mono text-destructive">{process.exitstatus}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Error Description */}
|
||||
{process.spawnerr && (
|
||||
<div className="rounded-md bg-destructive/10 p-2 text-xs text-destructive border border-destructive/20">
|
||||
{process.spawnerr}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="success"
|
||||
onClick={handleStart}
|
||||
disabled={!canStartProcess(process.state) || isLoading}
|
||||
className="flex-1"
|
||||
>
|
||||
<Play className="h-4 w-4" />
|
||||
Start
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="warning"
|
||||
onClick={handleStop}
|
||||
disabled={!canStopProcess(process.state) || isLoading}
|
||||
className="flex-1"
|
||||
>
|
||||
<Square className="h-4 w-4" />
|
||||
Stop
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={handleRestart}
|
||||
disabled={process.state === 0 || isLoading}
|
||||
>
|
||||
<RotateCw className={cn('h-4 w-4', isLoading && 'animate-spin-slow')} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
{process.description && process.description !== 'pid ' + process.pid && (
|
||||
<p className="text-xs text-muted-foreground italic">
|
||||
{process.description}
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
88
components/process/SystemStatus.tsx
Normal file
88
components/process/SystemStatus.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
'use client';
|
||||
|
||||
import { Activity, Server, Hash, CheckCircle2, XCircle } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { useSystemInfo } from '@/lib/hooks/useSupervisor';
|
||||
import { SupervisorState } from '@/lib/supervisor/types';
|
||||
|
||||
export function SystemStatus() {
|
||||
const { data: systemInfo, isLoading, isError } = useSystemInfo();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="animate-pulse space-y-3">
|
||||
<div className="h-4 bg-muted rounded w-3/4"></div>
|
||||
<div className="h-4 bg-muted rounded w-1/2"></div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError || !systemInfo) {
|
||||
return (
|
||||
<Card className="border-destructive/50">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-2 text-destructive">
|
||||
<XCircle className="h-5 w-5" />
|
||||
<span>Failed to connect to Supervisor</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const isRunning = systemInfo.state.statecode === SupervisorState.RUNNING;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Server className="h-5 w-5 text-primary" />
|
||||
System Status
|
||||
</CardTitle>
|
||||
<Badge variant={isRunning ? 'success' : 'destructive'} className="gap-1">
|
||||
{isRunning ? (
|
||||
<CheckCircle2 className="h-3 w-3" />
|
||||
) : (
|
||||
<XCircle className="h-3 w-3" />
|
||||
)}
|
||||
{systemInfo.state.statename}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-muted-foreground flex items-center gap-2">
|
||||
<Activity className="h-4 w-4" />
|
||||
Version
|
||||
</span>
|
||||
<span className="font-mono">{systemInfo.supervisorVersion}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-muted-foreground flex items-center gap-2">
|
||||
<Hash className="h-4 w-4" />
|
||||
PID
|
||||
</span>
|
||||
<span className="font-mono">{systemInfo.pid}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-muted-foreground">API Version</span>
|
||||
<span className="font-mono">{systemInfo.apiVersion}</span>
|
||||
</div>
|
||||
{systemInfo.identification && (
|
||||
<div className="pt-2 border-t">
|
||||
<span className="text-muted-foreground text-xs">ID:</span>
|
||||
<p className="font-mono text-xs mt-1 text-foreground/80">
|
||||
{systemInfo.identification}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user