50 lines
2.3 KiB
React
50 lines
2.3 KiB
React
import { AlertTriangle, X } from 'lucide-react';
|
|
|
|
export function RestoreModal({ snapshot, vmName, confirmText, onCancel, onConfirm, onTextChange, busy }) {
|
|
if (!snapshot) return null;
|
|
const canConfirm = confirmText === vmName && !busy;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
|
|
<div className="w-full max-w-lg rounded-md border border-red-900 bg-zinc-950 shadow-2xl">
|
|
<div className="flex items-center justify-between border-b border-red-950 px-4 py-3">
|
|
<div className="flex items-center gap-2 text-red-300">
|
|
<AlertTriangle className="h-5 w-5" />
|
|
<h2 className="text-sm font-semibold">Destructive Disk Restore</h2>
|
|
</div>
|
|
<button className="rounded-md p-1 text-zinc-400 hover:text-zinc-100" onClick={onCancel} type="button">
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
<div className="space-y-4 p-4">
|
|
<p className="text-sm leading-6 text-zinc-300">
|
|
Warning: The VM will be stopped and its current disk will be irreversibly overwritten with
|
|
snapshot <span className="font-mono text-red-200">{snapshot.id.slice(0, 8)}</span>. Incus config, profiles, devices, and metadata are not restored by this action.
|
|
</p>
|
|
<label className="block text-sm text-zinc-300">
|
|
Type <span className="font-mono text-zinc-100">{vmName}</span> to confirm.
|
|
<input
|
|
className="mt-2 h-10 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 text-zinc-100 outline-none focus:border-red-500"
|
|
onChange={(event) => onTextChange(event.target.value)}
|
|
value={confirmText}
|
|
/>
|
|
</label>
|
|
<div className="flex justify-end gap-2">
|
|
<button className="h-9 rounded-md border border-zinc-700 px-3 text-sm text-zinc-200" onClick={onCancel} type="button">
|
|
Cancel
|
|
</button>
|
|
<button
|
|
className="h-9 rounded-md border border-red-700 bg-red-950 px-3 text-sm text-red-100 hover:bg-red-900 disabled:hover:bg-red-950"
|
|
disabled={!canConfirm}
|
|
onClick={onConfirm}
|
|
type="button"
|
|
>
|
|
Confirm Disk Restore
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|