Import source: src/components/features/dns-editor
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,267 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import type { ColumnDef } from "@tanstack/react-table";
|
||||||
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { Copy, FileDown, FileUp, Plus, Trash2 } from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
import type { DnsRecord } from "@/api/contracts/models";
|
||||||
|
import { panelService } from "@/api/services/panel-service";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { DataTable } from "@/components/common/data-table";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { CodeEditor } from "@/components/common/code-editor";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
|
||||||
|
const columns: ColumnDef<DnsRecord>[] = [
|
||||||
|
{ accessorKey: "name", header: "Name" },
|
||||||
|
{ accessorKey: "ttl", header: "TTL" },
|
||||||
|
{ accessorKey: "class", header: "Class" },
|
||||||
|
{
|
||||||
|
accessorKey: "type",
|
||||||
|
header: "Type",
|
||||||
|
cell: ({ row }) => <Badge variant="outline">{row.original.type}</Badge>,
|
||||||
|
},
|
||||||
|
{ accessorKey: "record", header: "Record" },
|
||||||
|
{
|
||||||
|
accessorKey: "warning",
|
||||||
|
header: "Warnings",
|
||||||
|
cell: ({ row }) => row.original.warning ?? "None",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const dnsTypes: DnsRecord["type"][] = [
|
||||||
|
"A",
|
||||||
|
"AAAA",
|
||||||
|
"CNAME",
|
||||||
|
"MX",
|
||||||
|
"TXT",
|
||||||
|
"SRV",
|
||||||
|
"CAA",
|
||||||
|
"NS",
|
||||||
|
"PTR",
|
||||||
|
];
|
||||||
|
|
||||||
|
export function DnsEditor() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [dialogOpen, setDialogOpen] = useState(false);
|
||||||
|
const [record, setRecord] = useState<Partial<DnsRecord>>({
|
||||||
|
name: "api.example.com.",
|
||||||
|
ttl: 14400,
|
||||||
|
type: "A",
|
||||||
|
record: "198.51.100.40",
|
||||||
|
});
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const { data, isLoading } = useQuery({
|
||||||
|
queryKey: ["dns-records"],
|
||||||
|
queryFn: () => panelService.domains.records(),
|
||||||
|
});
|
||||||
|
const createRecord = useMutation({
|
||||||
|
mutationFn: () => panelService.domains.saveRecord(record),
|
||||||
|
onSuccess: async (response) => {
|
||||||
|
if (response.error) {
|
||||||
|
setError(response.error.message);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await queryClient.invalidateQueries({ queryKey: ["dns-records"] });
|
||||||
|
setDialogOpen(false);
|
||||||
|
setError("");
|
||||||
|
setRecord({
|
||||||
|
name: "api.example.com.",
|
||||||
|
ttl: 14400,
|
||||||
|
type: "A",
|
||||||
|
record: "198.51.100.40",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onError: (mutationError) => {
|
||||||
|
setError(
|
||||||
|
mutationError instanceof Error ? mutationError.message : "DNS record creation failed.",
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Card>
|
||||||
|
<CardContent className="space-y-2 p-3">
|
||||||
|
<div className="-mx-1 flex items-center gap-1.5 overflow-x-auto px-1 pb-1">
|
||||||
|
{["All", "A", "AAAA", "CNAME", "MX", "TXT", "SRV", "CAA", "NS", "PTR"].map(
|
||||||
|
(type) => (
|
||||||
|
<Button
|
||||||
|
key={type}
|
||||||
|
variant={type === "All" ? "default" : "outline"}
|
||||||
|
size="sm"
|
||||||
|
className="shrink-0"
|
||||||
|
>
|
||||||
|
{type}
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button size="sm">
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
Add record
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Add DNS record</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Create a DNS record in the active zone and refresh the zone editor.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<form
|
||||||
|
className="grid gap-3 sm:grid-cols-2"
|
||||||
|
onSubmit={(event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
setError("");
|
||||||
|
createRecord.mutate();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<label className="space-y-1 text-sm sm:col-span-2">
|
||||||
|
<span className="font-medium">Name</span>
|
||||||
|
<Input
|
||||||
|
value={record.name ?? ""}
|
||||||
|
onChange={(event) =>
|
||||||
|
setRecord((value) => ({ ...value, name: event.target.value }))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label className="space-y-1 text-sm">
|
||||||
|
<span className="font-medium">Type</span>
|
||||||
|
<Select
|
||||||
|
value={record.type ?? "A"}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
setRecord((current) => ({
|
||||||
|
...current,
|
||||||
|
type: value as DnsRecord["type"],
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{dnsTypes.map((type) => (
|
||||||
|
<SelectItem key={type} value={type}>
|
||||||
|
{type}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</label>
|
||||||
|
<label className="space-y-1 text-sm">
|
||||||
|
<span className="font-medium">TTL</span>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
min={60}
|
||||||
|
value={record.ttl ?? 14400}
|
||||||
|
onChange={(event) =>
|
||||||
|
setRecord((value) => ({
|
||||||
|
...value,
|
||||||
|
ttl: Number(event.target.value),
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label className="space-y-1 text-sm sm:col-span-2">
|
||||||
|
<span className="font-medium">Record value</span>
|
||||||
|
<Input
|
||||||
|
value={record.record ?? ""}
|
||||||
|
onChange={(event) =>
|
||||||
|
setRecord((value) => ({ ...value, record: event.target.value }))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
{record.type === "MX" || record.type === "SRV" ? (
|
||||||
|
<label className="space-y-1 text-sm">
|
||||||
|
<span className="font-medium">Priority</span>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
min={0}
|
||||||
|
value={record.priority ?? 10}
|
||||||
|
onChange={(event) =>
|
||||||
|
setRecord((value) => ({
|
||||||
|
...value,
|
||||||
|
priority: Number(event.target.value),
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
) : null}
|
||||||
|
{error ? (
|
||||||
|
<div className="rounded-md border border-destructive/30 bg-destructive/10 p-2 text-sm text-destructive sm:col-span-2">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
<div className="flex justify-end gap-2 sm:col-span-2">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setDialogOpen(false)}
|
||||||
|
disabled={createRecord.isPending}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" disabled={createRecord.isPending}>
|
||||||
|
{createRecord.isPending ? "Creating..." : "Create record"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
<Button size="sm" variant="outline">
|
||||||
|
<Copy className="h-4 w-4" />
|
||||||
|
Duplicate
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="outline">
|
||||||
|
<FileUp className="h-4 w-4" />
|
||||||
|
Import
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="outline">
|
||||||
|
<FileDown className="h-4 w-4" />
|
||||||
|
Export
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="destructive" className="sm:ml-auto">
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="skeleton h-80 rounded-lg border border-border/50" />
|
||||||
|
) : (
|
||||||
|
<DataTable
|
||||||
|
data={data?.data ?? []}
|
||||||
|
columns={columns}
|
||||||
|
searchPlaceholder="Filter by name or record"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<CodeEditor
|
||||||
|
title="Raw zone editor"
|
||||||
|
language="dns"
|
||||||
|
value={
|
||||||
|
"$TTL 14400\nexample.com. IN A 198.51.100.24\nwww IN CNAME example.com.\n@ IN MX 10 mail.example.com.\n"
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user