+
+
+ Enter a domain for this zone (e.g., company.internal,
+ intra.example.com)
+
+ setDomain(e.target.value)}
+ />
+
+
+
+
+ Advertise this zone and its records to peers that belong to the
+ following groups
+
+
+
+
+
+
+ Enable Search Domains
+
+ }
+ helpText={
+ "E.g., 'server.company.internal' will be accessible with 'server'"
+ }
+ />
+
+
+
+ Enable DNS Zone
+
+ }
+ helpText={"Use this switch to enable or disable the dns zone."}
+ />
+
+
+
+
+
+ Learn more about
+
+ DNS Zones
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/modules/dns/zones/DNSZonesProvider.tsx b/src/modules/dns/zones/DNSZonesProvider.tsx
new file mode 100644
index 00000000..c3b3e4d3
--- /dev/null
+++ b/src/modules/dns/zones/DNSZonesProvider.tsx
@@ -0,0 +1,264 @@
+import { notify } from "@components/Notification";
+import { useApiCall } from "@utils/api";
+import * as React from "react";
+import { useState } from "react";
+import { useSWRConfig } from "swr";
+import { useDialog } from "@/contexts/DialogProvider";
+import { DNSRecord, DNSZone } from "@/interfaces/DNS";
+import { Group } from "@/interfaces/Group";
+import DNSRecordModal from "@/modules/dns/zones/DNSRecordModal";
+import DNSZoneModal from "@/modules/dns/zones/DNSZoneModal";
+
+type Props = {
+ children?: React.ReactNode;
+};
+
+const DNSZonesContext = React.createContext(
+ {} as {
+ createZone: (zone: DNSZone) => Promise;
+ updateZone: (zone: DNSZone) => Promise;
+ deleteZone: (zone: DNSZone) => Promise;
+ openZoneModal: (
+ zone?: DNSZone,
+ initialDistributionGroups?: Group[],
+ ) => void;
+ openRecordModal: (zone: DNSZone, record?: DNSRecord) => void;
+ addRecord: (zone: DNSZone, record: DNSRecord) => Promise;
+ updateRecord: (zone: DNSZone, record: DNSRecord) => Promise;
+ deleteRecord: (zone: DNSZone, record: DNSRecord) => Promise;
+ askForRecord: (zone: DNSZone) => void;
+ },
+);
+
+export const DNSZonesProvider = ({ children }: Props) => {
+ const { mutate } = useSWRConfig();
+ const zoneRequest = useApiCall("/dns/zones", true);
+ const recordRequest = useApiCall("/dns/zones", true);
+ const [dnsModal, setDnsModal] = useState(false);
+ const [recordModal, setRecordModal] = useState(false);
+ const [currentZone, setCurrentZone] = useState();
+ const [currentRecord, setCurrentRecord] = useState();
+ const [initialDistributionGroups, setInitialDistributionGroups] =
+ useState();
+ const { confirm } = useDialog();
+
+ const createZone = async (zone: DNSZone): Promise => {
+ const promise = zoneRequest.post(zone).then((zone) => {
+ mutate("/dns/zones");
+ return Promise.resolve(zone);
+ });
+
+ notify({
+ title: `DNS Zone '${zone.domain}'`,
+ description: `DNS Zone was added successfully.`,
+ promise: promise,
+ loadingMessage: "Adding DNS Zone...",
+ });
+
+ return promise;
+ };
+
+ const updateZone = async (zone: DNSZone): Promise => {
+ if (!zone?.id) return Promise.reject("Can not update DNS Zone without ID");
+ const promise = zoneRequest.put(zone, `/${zone.id}`).then((zone) => {
+ mutate("/dns/zones");
+ return Promise.resolve(zone);
+ });
+
+ notify({
+ title: `DNS Zone '${zone.domain}'`,
+ description: `DNS Zone was updated successfully.`,
+ promise: promise,
+ loadingMessage: "Updating DNS Zone...",
+ });
+
+ return promise;
+ };
+
+ const deleteZone = async (zone: DNSZone): Promise => {
+ if (!zone?.id) return Promise.reject("Can not delete DNS Zone without ID");
+
+ const choice = await confirm({
+ title: `Delete zone '${zone.domain}'?`,
+ description:
+ "Are you sure you want to delete this zone? This action cannot be undone.",
+ confirmText: "Delete",
+ cancelText: "Cancel",
+ type: "danger",
+ maxWidthClass: "max-w-md",
+ });
+ if (!choice) return Promise.resolve(zone);
+
+ const promise = zoneRequest.del({}, `/${zone.id}`).then((zone) => {
+ mutate("/dns/zones");
+ return Promise.resolve(zone);
+ });
+
+ notify({
+ title: `DNS Zone '${zone.domain}'`,
+ description: `DNS Zone was deleted successfully.`,
+ promise: promise,
+ loadingMessage: "Deleting DNS Zone...",
+ });
+
+ return promise;
+ };
+
+ const addRecord = async (
+ zone: DNSZone,
+ record: DNSRecord,
+ ): Promise => {
+ if (!zone?.id)
+ return Promise.reject("Can not add DNS Record without DNS Zone");
+ const promise = recordRequest
+ .post(record, `/${zone.id}/records`)
+ .then((record) => {
+ mutate("/dns/zones");
+ return Promise.resolve(record);
+ });
+
+ notify({
+ title: `${record.type} Record '${record.name}'`,
+ description: `DNS Record was added successfully.`,
+ promise: promise,
+ loadingMessage: "Adding DNS Record...",
+ });
+
+ return promise;
+ };
+
+ const updateRecord = async (
+ zone: DNSZone,
+ record: DNSRecord,
+ ): Promise => {
+ if (!zone?.id)
+ return Promise.reject("Can not update DNS Record without DNS Zone");
+ if (!record?.id)
+ return Promise.reject("Can not update DNS Record without ID");
+ const promise = recordRequest
+ .put(record, `/${zone.id}/records/${record.id}`)
+ .then((record) => {
+ mutate("/dns/zones");
+ return Promise.resolve(record);
+ });
+
+ notify({
+ title: `${record.type} Record '${record.name}'`,
+ description: `DNS Record was updated successfully.`,
+ promise: promise,
+ loadingMessage: "Updating DNS Record...",
+ });
+
+ return promise;
+ };
+
+ const deleteRecord = async (
+ zone: DNSZone,
+ record: DNSRecord,
+ ): Promise => {
+ if (!zone?.id)
+ return Promise.reject("Can not delete DNS Record without DNS Zone");
+ if (!record?.id)
+ return Promise.reject("Can not delete DNS Record without ID");
+
+ const choice = await confirm({
+ title: `Delete record '${record.name}'?`,
+ description:
+ "Are you sure you want to delete this record? This action cannot be undone.",
+ confirmText: "Delete",
+ cancelText: "Cancel",
+ type: "danger",
+ maxWidthClass: "max-w-md",
+ });
+ if (!choice) return Promise.resolve(record);
+
+ const promise = recordRequest
+ .del({}, `/${zone.id}/records/${record.id}`)
+ .then((record) => {
+ mutate("/dns/zones");
+ return Promise.resolve(record);
+ });
+
+ notify({
+ title: `${record.type} Record '${record.name}'`,
+ description: `DNS Record was deleted successfully.`,
+ promise: promise,
+ loadingMessage: "Deleting DNS Record...",
+ });
+
+ return promise;
+ };
+
+ const openZoneModal = (zone?: DNSZone, distributionGroups?: Group[]) => {
+ if (zone) setCurrentZone(zone);
+ if (distributionGroups) setInitialDistributionGroups(distributionGroups);
+ setDnsModal(true);
+ };
+
+ const openRecordModal = (zone: DNSZone, record?: DNSRecord) => {
+ setCurrentZone(zone);
+ if (record) setCurrentRecord(record);
+ setRecordModal(true);
+ };
+
+ const askForRecord = async (zone: DNSZone) => {
+ const choice = await confirm({
+ title: `Add new record to '${zone.name}'?`,
+ description:
+ "Add either an A, AAAA or a CNAME record to control domain name resolution for your network.",
+ confirmText: "Add Record",
+ cancelText: "Later",
+ type: "default",
+ maxWidthClass: "max-w-md",
+ });
+ if (!choice) return;
+ openRecordModal(zone);
+ };
+
+ return (
+
+ {children}
+ {
+ setDnsModal(open);
+ if (!open) {
+ setCurrentZone(undefined);
+ setInitialDistributionGroups(undefined);
+ }
+ }}
+ onSuccessAdded={(z) => askForRecord(z)}
+ zone={currentZone}
+ initialDistributionGroups={initialDistributionGroups}
+ />
+ {currentZone && (
+ {
+ setRecordModal(open);
+ if (!open) {
+ setCurrentZone(undefined);
+ setCurrentRecord(undefined);
+ }
+ }}
+ zone={currentZone}
+ record={currentRecord}
+ />
+ )}
+
+ );
+};
+
+export const useDNSZones = () => React.useContext(DNSZonesContext);
diff --git a/src/modules/dns/zones/records/DNSRecordActionCell.tsx b/src/modules/dns/zones/records/DNSRecordActionCell.tsx
new file mode 100644
index 00000000..399206ee
--- /dev/null
+++ b/src/modules/dns/zones/records/DNSRecordActionCell.tsx
@@ -0,0 +1,40 @@
+import Button from "@components/Button";
+import { PenSquare, Trash2 } from "lucide-react";
+import * as React from "react";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { DNSRecord } from "@/interfaces/DNS";
+import { useDNSZones } from "@/modules/dns/zones/DNSZonesProvider";
+import { useDNSZone } from "@/modules/dns/zones/records/DNSRecordsTable";
+
+type Props = {
+ record: DNSRecord;
+};
+
+export const DNSRecordActionCell = ({ record }: Props) => {
+ const { permission } = usePermissions();
+ const { deleteRecord, openRecordModal } = useDNSZones();
+ const zone = useDNSZone();
+
+ return (
+
+
+
+
+ );
+};
diff --git a/src/modules/dns/zones/records/DNSRecordContentCell.tsx b/src/modules/dns/zones/records/DNSRecordContentCell.tsx
new file mode 100644
index 00000000..7e04974d
--- /dev/null
+++ b/src/modules/dns/zones/records/DNSRecordContentCell.tsx
@@ -0,0 +1,19 @@
+import CopyToClipboardText from "@components/CopyToClipboardText";
+import * as React from "react";
+import { DNSRecord } from "@/interfaces/DNS";
+
+type Props = {
+ record: DNSRecord;
+};
+
+export const DNSRecordContentCell = ({ record }: Props) => {
+ return (
+
+
+
+ {record.content}
+
+
+
+ );
+};
diff --git a/src/modules/dns/zones/records/DNSRecordNameCell.tsx b/src/modules/dns/zones/records/DNSRecordNameCell.tsx
new file mode 100644
index 00000000..3eed5c78
--- /dev/null
+++ b/src/modules/dns/zones/records/DNSRecordNameCell.tsx
@@ -0,0 +1,17 @@
+import CopyToClipboardText from "@components/CopyToClipboardText";
+import * as React from "react";
+import { DNSRecord } from "@/interfaces/DNS";
+
+type Props = {
+ record: DNSRecord;
+};
+
+export const DNSRecordNameCell = ({ record }: Props) => {
+ return (
+
+
+ {record.name}
+
+
+ );
+};
diff --git a/src/modules/dns/zones/records/DNSRecordTimeToLiveCell.tsx b/src/modules/dns/zones/records/DNSRecordTimeToLiveCell.tsx
new file mode 100644
index 00000000..0dccd9bf
--- /dev/null
+++ b/src/modules/dns/zones/records/DNSRecordTimeToLiveCell.tsx
@@ -0,0 +1,21 @@
+import { ClockIcon } from "lucide-react";
+import * as React from "react";
+import { DNSRecord } from "@/interfaces/DNS";
+import { getTTLLabel } from "@/modules/dns/zones/DNSRecordModal";
+
+type Props = {
+ record: DNSRecord;
+};
+
+export const DNSRecordTimeToLiveCell = ({ record }: Props) => {
+ return (
+
+
+ {getTTLLabel(record.ttl)}
+
+ );
+};
diff --git a/src/modules/dns/zones/records/DNSRecordTypeCell.tsx b/src/modules/dns/zones/records/DNSRecordTypeCell.tsx
new file mode 100644
index 00000000..5b8faaf9
--- /dev/null
+++ b/src/modules/dns/zones/records/DNSRecordTypeCell.tsx
@@ -0,0 +1,20 @@
+import Badge from "@components/Badge";
+import * as React from "react";
+import { DNSRecord } from "@/interfaces/DNS";
+
+type Props = {
+ record: DNSRecord;
+};
+
+export const DNSRecordTypeCell = ({ record }: Props) => {
+ return (
+
+ );
+};
diff --git a/src/modules/dns/zones/table/DNSZonesTable.tsx b/src/modules/dns/zones/table/DNSZonesTable.tsx
new file mode 100644
index 00000000..ff7e946f
--- /dev/null
+++ b/src/modules/dns/zones/table/DNSZonesTable.tsx
@@ -0,0 +1,303 @@
+import Button from "@components/Button";
+import ButtonGroup from "@components/ButtonGroup";
+import Card from "@components/Card";
+import InlineLink from "@components/InlineLink";
+import SquareIcon from "@components/SquareIcon";
+import { DataTable } from "@components/table/DataTable";
+import DataTableHeader from "@components/table/DataTableHeader";
+import DataTableRefreshButton from "@components/table/DataTableRefreshButton";
+import { DataTableRowsPerPage } from "@components/table/DataTableRowsPerPage";
+import GetStartedTest from "@components/ui/GetStartedTest";
+import NoResults from "@components/ui/NoResults";
+import { ColumnDef, SortingState } from "@tanstack/react-table";
+import { ExternalLinkIcon, PlusCircle } from "lucide-react";
+import { usePathname } from "next/navigation";
+import React, { useMemo } from "react";
+import { useSWRConfig } from "swr";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { useLocalStorage } from "@/hooks/useLocalStorage";
+import { DNS_ZONE_DOCS_LINK, DNSZone } from "@/interfaces/DNS";
+import { useDNSZones } from "@/modules/dns/zones/DNSZonesProvider";
+import DNSRecordsTable from "@/modules/dns/zones/records/DNSRecordsTable";
+import { DNSZonesActionCell } from "@/modules/dns/zones/table/DNSZonesActionCell";
+import { DNSZonesActiveCell } from "@/modules/dns/zones/table/DNSZonesActiveCell";
+import { DNSZonesGroupCell } from "@/modules/dns/zones/table/DNSZonesGroupCell";
+import { DNSZonesNameCell } from "@/modules/dns/zones/table/DNSZonesNameCell";
+import { DNSZonesRecordsCell } from "@/modules/dns/zones/table/DNSZonesRecordsCell";
+import { DNSZonesSearchDomainCell } from "@/modules/dns/zones/table/DNSZonesSearchDomainCell";
+import { Group } from "@/interfaces/Group";
+import DNSZoneIcon from "@/assets/icons/DNSZoneIcon";
+import { useGroups } from "@/contexts/GroupsProvider";
+
+export const DNSZonesColumns: ColumnDef[] = [
+ {
+ accessorKey: "domain",
+ header: ({ column }) => (
+ Zone
+ ),
+ sortingFn: "text",
+ cell: ({ row }) => ,
+ },
+ {
+ accessorKey: "enabled",
+ header: ({ column }) => (
+ Active
+ ),
+ cell: ({ row }) => ,
+ },
+ {
+ accessorKey: "records",
+ header: ({ column }) => (
+ Records
+ ),
+ sortingFn: "text",
+ cell: ({ row }) => ,
+ },
+ {
+ accessorKey: "distribution_groups",
+ header: ({ column }) => (
+ Distribution Groups
+ ),
+ cell: ({ row }) => ,
+ },
+ {
+ accessorKey: "enable_search_domain",
+ header: ({ column }) => (
+ Search Domain
+ ),
+ cell: ({ row }) => ,
+ },
+ {
+ accessorKey: "id",
+ header: () => "",
+ cell: ({ row }) => ,
+ },
+ {
+ id: "searchString",
+ accessorFn: (row) => {
+ return [
+ row?.groups_search,
+ row?.name,
+ row?.domain,
+ row?.records?.map((r) => r.name).join(""),
+ row?.records?.map((r) => r.content).join(""),
+ row?.records?.map((r) => r.type).join(""),
+ ]?.join("");
+ },
+ },
+];
+
+type Props = {
+ isLoading: boolean;
+ data?: DNSZone[];
+ headingTarget?: HTMLHeadingElement | null;
+ isGroupPage?: boolean;
+ distributionGroups?: Group[];
+};
+
+export default function DNSZonesTable({
+ data,
+ isLoading,
+ headingTarget,
+ isGroupPage = false,
+ distributionGroups,
+}: Props) {
+ const { mutate } = useSWRConfig();
+ const path = usePathname();
+ const { groups } = useGroups();
+
+ // Default sorting state of the table
+ const [sorting, setSorting] = useLocalStorage(
+ "netbird-table-sort" + path,
+ [
+ {
+ id: "domain",
+ desc: true,
+ },
+ {
+ id: "id",
+ desc: true,
+ },
+ ],
+ !isGroupPage,
+ );
+
+ const zonesWithGroups = useMemo(() => {
+ return (
+ data?.map((zone) => {
+ return {
+ ...zone,
+ groups_search: groups
+ ?.map((g) =>
+ zone?.distribution_groups?.includes(g?.id ?? "") ? g.name : "",
+ )
+ .join(""),
+ } as DNSZone;
+ }) ?? []
+ );
+ }, [data, groups]);
+
+ return (
+ {
+ const hasRecords = (zone?.records?.length ?? 0) > 0;
+ if (!hasRecords) return;
+ return (
+ <>
+
+
+
+ );
+ }}
+ getStartedCard={
+ isGroupPage ? (
+ }
+ className={"py-4"}
+ contentClassName={"max-w-lg"}
+ title={"This group is not used within any zones yet"}
+ description={
+ "Assign this group as a distribution group in your zones to see them listed here."
+ }
+ >
+
+
+
+
+ ) : (
+ }
+ color={"gray"}
+ size={"large"}
+ />
+ }
+ title={"Create New Zone"}
+ description={
+ "It looks like you don't have any zones. Control domain name resolution for your network by adding a zone."
+ }
+ button={
+
+
+
+ }
+ learnMore={
+ <>
+ Learn more about
+
+ DNS Zones
+
+
+
+ }
+ />
+ )
+ }
+ rightSide={() => (
+ <>
+ {data && data?.length > 0 && (
+