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>
72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { useProcesses } from '@/lib/hooks/useSupervisor';
|
|
import { ProcessCard } from '@/components/process/ProcessCard';
|
|
import { RefreshCw, AlertCircle } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
export default function ProcessesPage() {
|
|
const { data: processes, isLoading, isError, refetch } = useProcesses();
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<h1 className="text-3xl font-bold">Processes</h1>
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
{[1, 2, 3, 4, 5, 6].map((i) => (
|
|
<div key={i} className="h-64 bg-muted rounded-lg animate-pulse" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (isError) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<h1 className="text-3xl font-bold">Processes</h1>
|
|
<div className="flex flex-col items-center justify-center p-12 text-center">
|
|
<AlertCircle className="h-12 w-12 text-destructive mb-4" />
|
|
<h2 className="text-xl font-semibold mb-2">Failed to load processes</h2>
|
|
<p className="text-muted-foreground mb-4">
|
|
Could not connect to Supervisor. Please check your configuration.
|
|
</p>
|
|
<Button onClick={() => refetch()}>
|
|
<RefreshCw className="h-4 w-4 mr-2" />
|
|
Retry
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6 animate-fade-in">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">Processes</h1>
|
|
<p className="text-muted-foreground mt-1">
|
|
{processes?.length ?? 0} processes configured
|
|
</p>
|
|
</div>
|
|
<Button variant="outline" onClick={() => refetch()}>
|
|
<RefreshCw className="h-4 w-4 mr-2" />
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
|
|
{processes && processes.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center p-12 text-center border-2 border-dashed rounded-lg">
|
|
<p className="text-muted-foreground">No processes configured</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
{processes?.map((process) => (
|
|
<ProcessCard key={`${process.group}:${process.name}`} process={process} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|