Sebastian Krüger
5c028cdc11
All checks were successful
Build and Push Docker Image to Gitea / build-and-push (push) Successful in 58s
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)
81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useProcesses } from '@/lib/hooks/useSupervisor';
|
|
import { ProcessCard } from '@/components/process/ProcessCard';
|
|
import { GroupView } from '@/components/groups/GroupView';
|
|
import { GroupSelector } from '@/components/groups/GroupSelector';
|
|
import { RefreshCw, AlertCircle } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
export default function ProcessesPage() {
|
|
const [viewMode, setViewMode] = useState<'flat' | 'grouped'>('flat');
|
|
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>
|
|
<div className="flex items-center gap-4">
|
|
<GroupSelector viewMode={viewMode} onViewModeChange={setViewMode} />
|
|
<Button variant="outline" onClick={() => refetch()}>
|
|
<RefreshCw className="h-4 w-4 mr-2" />
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
</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>
|
|
) : viewMode === 'grouped' ? (
|
|
<GroupView processes={processes || []} />
|
|
) : (
|
|
<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>
|
|
);
|
|
}
|