Sebastian Krüger
e0cfd371c0
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>
89 lines
3.0 KiB
TypeScript
89 lines
3.0 KiB
TypeScript
'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>
|
|
);
|
|
}
|