initial commit
This commit is contained in:
commit
8a67761c9a
83 changed files with 15510 additions and 0 deletions
288
components/records-list.tsx
Normal file
288
components/records-list.tsx
Normal file
|
|
@ -0,0 +1,288 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { RecordForm } from './record-form';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
import { Plus, Trash2, Edit, Loader2, FileWarning } from 'lucide-react';
|
||||
import { Badge } from './ui/badge';
|
||||
|
||||
interface DNSRecord {
|
||||
id: string;
|
||||
type: string;
|
||||
name: string;
|
||||
data: string;
|
||||
priority?: number;
|
||||
ttl: number;
|
||||
}
|
||||
|
||||
interface RecordsListProps {
|
||||
apiKey: string;
|
||||
domain: string;
|
||||
}
|
||||
|
||||
export function RecordsList({ apiKey, domain }: RecordsListProps) {
|
||||
const [records, setRecords] = useState<DNSRecord[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isAddingRecord, setIsAddingRecord] = useState(false);
|
||||
const [editingRecord, setEditingRecord] = useState<DNSRecord | null>(null);
|
||||
const [deletingRecordId, setDeletingRecordId] = useState<string | null>(null);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const { toast } = useToast();
|
||||
|
||||
const fetchRecords = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch(`/api/vultr/domains/${domain}/records`, {
|
||||
headers: {
|
||||
'X-API-Key': apiKey,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch records');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setRecords(data.records || []);
|
||||
} catch (error) {
|
||||
console.error('Error fetching records:', error);
|
||||
toast({
|
||||
title: 'Error',
|
||||
description: 'Failed to fetch DNS records.',
|
||||
variant: 'destructive',
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (domain) {
|
||||
fetchRecords();
|
||||
}
|
||||
}, [domain, apiKey]);
|
||||
|
||||
const handleDeleteRecord = async () => {
|
||||
if (!deletingRecordId) return;
|
||||
|
||||
try {
|
||||
setIsDeleting(true);
|
||||
const response = await fetch(
|
||||
`/api/vultr/domains/${domain}/records/${deletingRecordId}`,
|
||||
{
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'X-API-Key': apiKey,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to delete record');
|
||||
}
|
||||
|
||||
toast({
|
||||
title: 'Success',
|
||||
description: 'DNS record deleted successfully.',
|
||||
});
|
||||
|
||||
// Refresh the records list
|
||||
fetchRecords();
|
||||
} catch (error) {
|
||||
console.error('Error deleting record:', error);
|
||||
toast({
|
||||
title: 'Error',
|
||||
description: 'Failed to delete DNS record.',
|
||||
variant: 'destructive',
|
||||
});
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
setDeletingRecordId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const getRecordTypeColor = (type: string) => {
|
||||
const types: Record<string, string> = {
|
||||
A: 'bg-blue-500/10 text-blue-500 dark:bg-blue-500/20',
|
||||
AAAA: 'bg-purple-500/10 text-purple-500 dark:bg-purple-500/20',
|
||||
CNAME: 'bg-green-500/10 text-green-500 dark:bg-green-500/20',
|
||||
MX: 'bg-amber-500/10 text-amber-500 dark:bg-amber-500/20',
|
||||
TXT: 'bg-slate-500/10 text-slate-500 dark:bg-slate-500/20',
|
||||
NS: 'bg-indigo-500/10 text-indigo-500 dark:bg-indigo-500/20',
|
||||
SRV: 'bg-rose-500/10 text-rose-500 dark:bg-rose-500/20',
|
||||
CAA: 'bg-cyan-500/10 text-cyan-500 dark:bg-cyan-500/20',
|
||||
};
|
||||
|
||||
return types[type] || 'bg-gray-500/10 text-gray-500 dark:bg-gray-500/20';
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<Skeleton className="h-10 w-32" />
|
||||
<Skeleton className="h-10 w-24" />
|
||||
</div>
|
||||
<div className="border rounded-md">
|
||||
<div className="h-12 border-b px-4 flex items-center">
|
||||
<Skeleton className="h-4 w-full" />
|
||||
</div>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="h-16 border-b px-4 flex items-center">
|
||||
<Skeleton className="h-4 w-full" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isAddingRecord || editingRecord) {
|
||||
return (
|
||||
<RecordForm
|
||||
apiKey={apiKey}
|
||||
domain={domain}
|
||||
record={editingRecord}
|
||||
onCancel={() => {
|
||||
setIsAddingRecord(false);
|
||||
setEditingRecord(null);
|
||||
}}
|
||||
onSuccess={() => {
|
||||
setIsAddingRecord(false);
|
||||
setEditingRecord(null);
|
||||
fetchRecords();
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-medium">DNS Records</h3>
|
||||
<Button onClick={() => setIsAddingRecord(true)}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Record
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{records.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-full py-12 text-center">
|
||||
<FileWarning className="h-12 w-12 text-muted-foreground opacity-50 mb-4" />
|
||||
<h3 className="text-lg font-medium">No DNS Records Found</h3>
|
||||
<p className="text-sm text-muted-foreground mt-2 max-w-md">
|
||||
This domain doesn't have any DNS records yet. Click the "Add Record" button to create your first record.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<ScrollArea className="h-[calc(100vh-300px)]">
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Type</TableHead>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Value</TableHead>
|
||||
<TableHead>TTL</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{records.map((record) => (
|
||||
<TableRow key={record.id}>
|
||||
<TableCell>
|
||||
<Badge className={`font-medium ${getRecordTypeColor(record.type)}`}>
|
||||
{record.type}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="font-medium">{record.name || '@'}</div>
|
||||
{record.priority !== undefined && (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Priority: {record.priority}
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="max-w-[200px] truncate" title={record.data}>
|
||||
{record.data}
|
||||
</TableCell>
|
||||
<TableCell>{record.ttl}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setEditingRecord(record)}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
<span className="sr-only">Edit</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setDeletingRecordId(record.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
<span className="sr-only">Delete</span>
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
|
||||
<AlertDialog open={!!deletingRecordId} onOpenChange={(open) => !open && setDeletingRecordId(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This will permanently delete this DNS record. This action cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleDeleteRecord}
|
||||
disabled={isDeleting}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
{isDeleting ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Deleting...
|
||||
</>
|
||||
) : (
|
||||
'Delete'
|
||||
)}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue