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.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { useProcesses } from '@/lib/hooks/useSupervisor';
|
|
import { GroupView } from '@/components/groups/GroupView';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { RefreshCw, AlertCircle } from 'lucide-react';
|
|
|
|
export default function GroupsPage() {
|
|
const { data: processes, isLoading, isError, refetch } = useProcesses();
|
|
|
|
if (isError) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<h1 className="text-3xl font-bold">Process Groups</h1>
|
|
<Card className="border-destructive/50">
|
|
<CardContent className="p-12 text-center">
|
|
<AlertCircle className="h-12 w-12 text-destructive mx-auto 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()} variant="outline">
|
|
Try Again
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">Process Groups</h1>
|
|
<p className="text-muted-foreground mt-1">
|
|
Manage processes organized by groups with batch operations
|
|
</p>
|
|
</div>
|
|
|
|
<Button
|
|
onClick={() => refetch()}
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={isLoading}
|
|
className="gap-2"
|
|
>
|
|
<RefreshCw className={isLoading ? 'animate-spin h-4 w-4' : 'h-4 w-4'} />
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="space-y-6">
|
|
{[1, 2].map((i) => (
|
|
<Card key={i} className="animate-pulse">
|
|
<CardContent className="p-8">
|
|
<div className="h-8 bg-muted rounded w-1/3 mb-4"></div>
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{[1, 2, 3].map((j) => (
|
|
<div key={j} className="h-32 bg-muted rounded"></div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
) : processes && processes.length > 0 ? (
|
|
<GroupView processes={processes} />
|
|
) : (
|
|
<Card>
|
|
<CardContent className="p-12 text-center">
|
|
<p className="text-muted-foreground">No processes found</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|