107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu'
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from '@/components/ui/alert-dialog'
|
|
import { MoreHorizontal, Trash2, RefreshCw, Copy } from 'lucide-react'
|
|
|
|
interface Machine {
|
|
id: string
|
|
name: string
|
|
hostname: string | null
|
|
os: string | null
|
|
osVersion: string | null
|
|
isOnline: boolean
|
|
accessKey: string
|
|
lastSeen: Date | null
|
|
}
|
|
|
|
interface MachineActionsProps {
|
|
machine: Machine
|
|
}
|
|
|
|
export function MachineActions({ machine }: MachineActionsProps) {
|
|
const [showDeleteDialog, setShowDeleteDialog] = useState(false)
|
|
const [isDeleting, setIsDeleting] = useState(false)
|
|
const router = useRouter()
|
|
|
|
const handleDelete = async () => {
|
|
setIsDeleting(true)
|
|
const res = await fetch(`/api/machines/${machine.id}`, { method: 'DELETE' })
|
|
if (res.ok) router.refresh()
|
|
setIsDeleting(false)
|
|
setShowDeleteDialog(false)
|
|
}
|
|
|
|
const copyAccessKey = () => navigator.clipboard.writeText(machine.accessKey)
|
|
|
|
return (
|
|
<>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8">
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
<span className="sr-only">Open menu</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={copyAccessKey}>
|
|
<Copy className="mr-2 h-4 w-4" />
|
|
Copy Access Key
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => router.refresh()}>
|
|
<RefreshCw className="mr-2 h-4 w-4" />
|
|
Refresh Status
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
onClick={() => setShowDeleteDialog(true)}
|
|
className="text-destructive focus:text-destructive"
|
|
>
|
|
<Trash2 className="mr-2 h-4 w-4" />
|
|
Delete Machine
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Delete machine?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
This will remove {`"${machine.name}"`} from your account. The agent on the remote machine will need to be re-registered.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={handleDelete}
|
|
disabled={isDeleting}
|
|
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
|
>
|
|
{isDeleting ? 'Deleting...' : 'Delete'}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</>
|
|
)
|
|
}
|