mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-06 00:47:52 +00:00
SaelixCode
428 lines
21 KiB
TypeScript
428 lines
21 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
} from './ui/dialog';
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "./ui/alert-dialog"
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from './ui/tabs';
|
|
import { Button } from './ui/button';
|
|
import { Badge } from './ui/badge';
|
|
import { apiFetch } from '@/lib/api';
|
|
import { toast } from 'sonner';
|
|
import { Trash2, AlertTriangle, MonitorX, PackageMinus, Network, HardDrive } from 'lucide-react';
|
|
import { formatBytes } from '@/lib/utils';
|
|
|
|
interface MaintenanceModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
interface ContainerInfo {
|
|
Id: string;
|
|
Names: string[];
|
|
State: string;
|
|
Status: string;
|
|
Image: string;
|
|
}
|
|
|
|
interface DockerUsage {
|
|
reclaimableImages: number;
|
|
reclaimableContainers: number;
|
|
reclaimableVolumes: number;
|
|
}
|
|
|
|
export default function MaintenanceModal({ isOpen, onClose }: MaintenanceModalProps) {
|
|
const [activeTab, setActiveTab] = useState<'ghosts' | 'system'>('ghosts');
|
|
|
|
// Docker Usage State
|
|
const [dockerUsage, setDockerUsage] = useState<DockerUsage | null>(null);
|
|
const [isLoadingUsage, setIsLoadingUsage] = useState(false);
|
|
|
|
// Ghost Hunter state
|
|
const [orphans, setOrphans] = useState<Record<string, ContainerInfo[]>>({});
|
|
const [isLoadingOrphans, setIsLoadingOrphans] = useState(false);
|
|
const [selectedOrphans, setSelectedOrphans] = useState<string[]>([]);
|
|
const [isPurging, setIsPurging] = useState(false);
|
|
|
|
// System Cleanup state
|
|
const [isPruning, setIsPruning] = useState(false);
|
|
const [pruneResult, setPruneResult] = useState<{ message: string; stdout: string; stderr: string } | null>(null);
|
|
|
|
// Confirm Modals state
|
|
const [purgeConfirmOpen, setPurgeConfirmOpen] = useState(false);
|
|
const [pruneConfirmOpen, setPruneConfirmOpen] = useState(false);
|
|
const [pruneTarget, setPruneTarget] = useState<'containers' | 'images' | 'networks' | 'volumes' | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (isOpen && activeTab === 'ghosts') {
|
|
fetchOrphans();
|
|
} else if (isOpen && activeTab === 'system') {
|
|
fetchDockerUsage();
|
|
setPruneResult(null); // Reset when tab changes
|
|
} else {
|
|
setPruneResult(null);
|
|
}
|
|
}, [isOpen, activeTab]);
|
|
|
|
const fetchDockerUsage = async () => {
|
|
setIsLoadingUsage(true);
|
|
try {
|
|
const res = await apiFetch('/system/docker-df');
|
|
const data = await res.json();
|
|
setDockerUsage(data);
|
|
} catch (error) {
|
|
console.error('Failed to fetch docker usage:', error);
|
|
} finally {
|
|
setIsLoadingUsage(false);
|
|
}
|
|
};
|
|
|
|
const fetchOrphans = async () => {
|
|
setIsLoadingOrphans(true);
|
|
try {
|
|
const res = await apiFetch('/system/orphans');
|
|
const data = await res.json();
|
|
setOrphans(data);
|
|
setSelectedOrphans([]);
|
|
} catch (error) {
|
|
console.error('Failed to fetch orphans:', error);
|
|
} finally {
|
|
setIsLoadingOrphans(false);
|
|
}
|
|
};
|
|
|
|
const toggleOrphanSelection = (containerId: string) => {
|
|
setSelectedOrphans(prev =>
|
|
prev.includes(containerId)
|
|
? prev.filter(id => id !== containerId)
|
|
: [...prev, containerId]
|
|
);
|
|
};
|
|
|
|
const selectAllOrphans = () => {
|
|
const allIds = Object.values(orphans).flat().map(c => c.Id);
|
|
if (selectedOrphans.length === allIds.length) {
|
|
setSelectedOrphans([]);
|
|
} else {
|
|
setSelectedOrphans(allIds);
|
|
}
|
|
};
|
|
|
|
const requestPurgeOrphans = () => {
|
|
if (selectedOrphans.length === 0) return;
|
|
setPurgeConfirmOpen(true);
|
|
};
|
|
|
|
const confirmPurgeOrphans = async () => {
|
|
setPurgeConfirmOpen(false);
|
|
setIsPurging(true);
|
|
try {
|
|
const res = await apiFetch('/system/prune/orphans', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ containerIds: selectedOrphans })
|
|
});
|
|
if (!res.ok) throw new Error('Purge failed');
|
|
|
|
await fetchOrphans(); // Refresh the list
|
|
toast.success(`Purged ${selectedOrphans.length} ghost container(s)`);
|
|
} catch (error) {
|
|
console.error('Failed to purge orphans:', error);
|
|
toast.error('Failed to purge selected containers.');
|
|
} finally {
|
|
setIsPurging(false);
|
|
}
|
|
};
|
|
|
|
const requestPruneSystem = (target: 'containers' | 'images' | 'networks' | 'volumes') => {
|
|
setPruneTarget(target);
|
|
setPruneConfirmOpen(true);
|
|
};
|
|
|
|
const confirmPruneSystem = async () => {
|
|
if (!pruneTarget) return;
|
|
setPruneConfirmOpen(false);
|
|
setIsPruning(true);
|
|
setPruneResult(null);
|
|
try {
|
|
const res = await apiFetch('/system/prune/system', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ target: pruneTarget })
|
|
});
|
|
const data = await res.json();
|
|
setPruneResult(data);
|
|
|
|
if (data.reclaimedBytes !== undefined) {
|
|
toast.success(`Prune complete! Reclaimed ${formatBytes(data.reclaimedBytes)}.`);
|
|
} else {
|
|
toast.success(`Successfully pruned ${pruneTarget}`);
|
|
}
|
|
|
|
await fetchDockerUsage();
|
|
} catch (error) {
|
|
console.error(`Failed to prune ${pruneTarget}: `, error);
|
|
toast.error(`Failed to prune ${pruneTarget}.`);
|
|
} finally {
|
|
setIsPruning(false);
|
|
setPruneTarget(null);
|
|
}
|
|
};
|
|
|
|
const totalOrphansCount = Object.values(orphans).flat().length;
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
|
<DialogContent className="max-w-4xl h-[80vh] flex flex-col">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<AlertTriangle className="w-5 h-5 text-yellow-500" />
|
|
System Janitor
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
Clean up orphaned containers and perform generic system maintenance.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<Tabs
|
|
value={activeTab}
|
|
onValueChange={(val) => setActiveTab(val as 'ghosts' | 'system')}
|
|
className="flex-1 flex flex-col min-h-0 mt-4"
|
|
>
|
|
<TabsList className="grid w-full grid-cols-2">
|
|
<TabsTrigger value="ghosts">Ghost Hunter</TabsTrigger>
|
|
<TabsTrigger value="system">System Cleanup</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="ghosts" className="flex-1 overflow-auto flex flex-col mt-4 border rounded-lg p-4 bg-muted/20">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h3 className="text-lg font-semibold flex items-center gap-2">
|
|
Detected Orphan Stacks <Badge variant="secondary">{totalOrphansCount}</Badge>
|
|
</h3>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={fetchOrphans}
|
|
disabled={isLoadingOrphans}
|
|
>
|
|
Refresh
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
onClick={requestPurgeOrphans}
|
|
disabled={selectedOrphans.length === 0 || isPurging}
|
|
>
|
|
<Trash2 className="w-4 h-4 mr-2" />
|
|
{isPurging ? 'Purging...' : `Purge Selected(${selectedOrphans.length})`}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{isLoadingOrphans ? (
|
|
<div className="flex-1 flex items-center justify-center text-muted-foreground">
|
|
Hunting for ghosts...
|
|
</div>
|
|
) : totalOrphansCount === 0 ? (
|
|
<div className="flex-1 flex flex-col items-center justify-center text-muted-foreground">
|
|
<MonitorX className="w-12 h-12 mb-2 opacity-50" />
|
|
<p>No orphaned containers detected.</p>
|
|
<p className="text-xs mt-1">Your system is clean!</p>
|
|
</div>
|
|
) : (
|
|
<div className="flex-1 overflow-y-auto">
|
|
<div className="mb-2 flex items-center gap-2 px-2">
|
|
<input
|
|
type="checkbox"
|
|
onChange={selectAllOrphans}
|
|
checked={selectedOrphans.length === totalOrphansCount && totalOrphansCount > 0}
|
|
className="rounded border-gray-300 focus:ring-primary"
|
|
/>
|
|
<span className="text-sm font-medium">Select All</span>
|
|
</div>
|
|
|
|
{Object.entries(orphans).map(([project, containers]) => (
|
|
<div key={project} className="mb-6 last:mb-0 bg-card rounded-lg border shadow-sm overflow-hidden">
|
|
<div className="bg-muted px-4 py-2 border-b font-medium text-sm flex items-center gap-2">
|
|
<span className="w-3 h-3 rounded-full bg-red-500/80"></span>
|
|
Project: {project}
|
|
</div>
|
|
<div className="divide-y">
|
|
{containers.map(container => (
|
|
<div key={container.Id} className="flex items-center gap-4 p-3 hover:bg-muted/50 transition-colors">
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedOrphans.includes(container.Id)}
|
|
onChange={() => toggleOrphanSelection(container.Id)}
|
|
className="rounded border-gray-300"
|
|
/>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-mono text-sm font-semibold truncate">
|
|
{container.Names[0]?.replace(/^\//, '') || container.Id.substring(0, 12)}
|
|
</span>
|
|
<Badge variant={container.State === 'running' ? 'default' : 'secondary'} className="text-[10px] h-4">
|
|
{container.State}
|
|
</Badge>
|
|
</div>
|
|
<div className="text-xs text-muted-foreground truncate mt-1">
|
|
Image: {container.Image}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="system" className="flex-1 mt-4 p-4 border rounded-lg bg-card overflow-y-auto">
|
|
<div className="rounded-xl border bg-card text-card-foreground shadow-sm mb-6 p-6">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<HardDrive className="w-5 h-5 text-muted-foreground" />
|
|
<h3 className="font-semibold text-lg">Reclaimable Space Summary</h3>
|
|
</div>
|
|
{isLoadingUsage && !dockerUsage ? (
|
|
<div className="text-sm text-muted-foreground animate-pulse">Calculating reclaimable space...</div>
|
|
) : dockerUsage ? (
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between items-center text-sm p-3 rounded-lg bg-muted/30 border">
|
|
<span className="flex items-center gap-2 font-medium">
|
|
<div className="w-3 h-3 rounded-full bg-orange-500 shadow-sm"></div> Stopped Containers
|
|
</span>
|
|
<span className="font-mono bg-background px-2 py-1 rounded shadow-sm border">{formatBytes(dockerUsage.reclaimableContainers)}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center text-sm p-3 rounded-lg bg-muted/30 border">
|
|
<span className="flex items-center gap-2 font-medium">
|
|
<div className="w-3 h-3 rounded-full bg-blue-500 shadow-sm"></div> Unused & Dangling Images
|
|
</span>
|
|
<span className="font-mono bg-background px-2 py-1 rounded shadow-sm border">{formatBytes(dockerUsage.reclaimableImages)}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center text-sm p-3 rounded-lg bg-muted/30 border">
|
|
<span className="flex items-center gap-2 font-medium">
|
|
<div className="w-3 h-3 rounded-full bg-purple-500 shadow-sm"></div> Unused Volumes
|
|
</span>
|
|
<span className="font-mono bg-background px-2 py-1 rounded shadow-sm border">{formatBytes(dockerUsage.reclaimableVolumes)}</span>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-sm text-muted-foreground">Reclaimable space data unavailable.</div>
|
|
)}
|
|
</div>
|
|
|
|
<h3 className="text-lg font-semibold mb-4">Global Docker Pruning</h3>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 mb-8">
|
|
<Button
|
|
variant="outline"
|
|
className="h-24 flex flex-col items-center justify-center gap-2"
|
|
onClick={() => requestPruneSystem('containers')}
|
|
disabled={isPruning}
|
|
>
|
|
<MonitorX className="w-6 h-6 text-orange-500" />
|
|
<div className="text-center">
|
|
<div className="font-bold">Prune Containers</div>
|
|
<div className="text-xs text-muted-foreground font-normal">Removes all stopped containers</div>
|
|
</div>
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outline"
|
|
className="h-24 flex flex-col items-center justify-center gap-2"
|
|
onClick={() => requestPruneSystem('images')}
|
|
disabled={isPruning}
|
|
>
|
|
<PackageMinus className="w-6 h-6 text-blue-500" />
|
|
<div className="text-center">
|
|
<div className="font-bold">Prune Images</div>
|
|
<div className="text-xs text-muted-foreground font-normal">Removes unused images</div>
|
|
</div>
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outline"
|
|
className="h-24 flex flex-col items-center justify-center gap-2"
|
|
onClick={() => requestPruneSystem('networks')}
|
|
disabled={isPruning}
|
|
>
|
|
<Network className="w-6 h-6 text-green-500" />
|
|
<div className="text-center">
|
|
<div className="font-bold">Prune Networks</div>
|
|
<div className="text-xs text-muted-foreground font-normal">Removes unused networks</div>
|
|
</div>
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outline"
|
|
className="h-24 flex flex-col items-center justify-center gap-2"
|
|
onClick={() => requestPruneSystem('volumes')}
|
|
disabled={isPruning}
|
|
>
|
|
<HardDrive className="w-6 h-6 text-purple-500" />
|
|
<div className="text-center">
|
|
<div className="font-bold">Prune Volumes</div>
|
|
<div className="text-xs text-muted-foreground font-normal">Removes unused volumes</div>
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
|
|
{pruneResult && (
|
|
<div className="bg-muted p-4 rounded-lg font-mono text-sm overflow-x-auto whitespace-pre-wrap">
|
|
<div className="font-bold mb-2">Result:</div>
|
|
<div className="text-green-600 dark:text-green-400">{pruneResult.message}</div>
|
|
{pruneResult.stdout && <div className="mt-2 text-foreground">{pruneResult.stdout}</div>}
|
|
{pruneResult.stderr && <div className="mt-2 text-red-500">{pruneResult.stderr}</div>}
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
</Tabs>
|
|
</DialogContent>
|
|
|
|
{/* Purge Ghost Containers Confirmation */}
|
|
<AlertDialog open={purgeConfirmOpen} onOpenChange={setPurgeConfirmOpen}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Forcefully Remove Containers</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Are you sure you want to forcefully remove {selectedOrphans.length} ghost container(s)?
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel onClick={() => setPurgeConfirmOpen(false)}>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90" onClick={confirmPurgeOrphans}>Remove</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
|
|
{/* Prune System Confirmation */}
|
|
<AlertDialog open={pruneConfirmOpen} onOpenChange={setPruneConfirmOpen}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Prune {pruneTarget}</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Are you sure you want to prune all unused {pruneTarget}? This cannot be undone.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel onClick={() => setPruneConfirmOpen(false)}>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90" onClick={confirmPruneSystem}>Prune</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</Dialog>
|
|
);
|
|
}
|