diff --git a/src/app/(dashboard)/settings/page.tsx b/src/app/(dashboard)/settings/page.tsx index 149602f9..8f2c1db6 100644 --- a/src/app/(dashboard)/settings/page.tsx +++ b/src/app/(dashboard)/settings/page.tsx @@ -4,6 +4,7 @@ import { RestrictedAccess } from "@components/ui/RestrictedAccess"; import { VerticalTabs } from "@components/VerticalTabs"; import { AlertOctagonIcon, + ChartNoAxesCombined, FingerprintIcon, FolderGit2Icon, LockIcon, @@ -24,6 +25,7 @@ import IdentityProvidersTab from "@/modules/settings/IdentityProvidersTab"; import NetworkSettingsTab from "@/modules/settings/NetworkSettingsTab"; import PermissionsTab from "@/modules/settings/PermissionsTab"; import GroupsSettings from "@/modules/settings/GroupsSettings"; +import MetricsTab from "@/modules/settings/MetricsTab"; export default function NetBirdSettings() { const queryParams = useSearchParams(); @@ -78,6 +80,10 @@ export default function NetBirdSettings() { Clients + + + Metrics + )} @@ -95,6 +101,7 @@ export default function NetBirdSettings() { {account && } {account && } {account && } + {account && } {account && } diff --git a/src/interfaces/Account.ts b/src/interfaces/Account.ts index c87c55e5..5b429170 100644 --- a/src/interfaces/Account.ts +++ b/src/interfaces/Account.ts @@ -27,6 +27,7 @@ export interface Account { embedded_idp_enabled?: boolean; auto_update_version: string; auto_update_always: boolean; + metrics_push_enabled?: boolean; local_auth_disabled?: boolean; }; onboarding?: AccountOnboarding; diff --git a/src/modules/settings/MetricsTab.tsx b/src/modules/settings/MetricsTab.tsx new file mode 100644 index 00000000..fce180e9 --- /dev/null +++ b/src/modules/settings/MetricsTab.tsx @@ -0,0 +1,108 @@ +import Breadcrumbs from "@components/Breadcrumbs"; +import FancyToggleSwitch from "@components/FancyToggleSwitch"; +import InlineLink from "@components/InlineLink"; +import { notify } from "@components/Notification"; +import Paragraph from "@components/Paragraph"; +import * as Tabs from "@radix-ui/react-tabs"; +import { useApiCall } from "@utils/api"; +import { + ChartNoAxesCombined, + ExternalLinkIcon, +} from "lucide-react"; +import React, { useState } from "react"; +import { useSWRConfig } from "swr"; +import SettingsIcon from "@/assets/icons/SettingsIcon"; +import { usePermissions } from "@/contexts/PermissionsProvider"; +import { Account } from "@/interfaces/Account"; + +type Props = { + account: Account; +}; + +export default function MetricsTab({ account }: Readonly) { + const { permission } = usePermissions(); + const { mutate } = useSWRConfig(); + const saveRequest = useApiCall("/accounts/" + account.id, true); + + const [metricsPushEnabled, setMetricsPushEnabled] = useState( + account.settings?.metrics_push_enabled ?? false, + ); + + const toggleMetricsPush = async (toggle: boolean) => { + notify({ + title: "Metrics", + description: `Metrics push successfully ${ + toggle ? "enabled" : "disabled" + }.`, + promise: saveRequest + .put({ + id: account.id, + settings: { + ...account.settings, + metrics_push_enabled: toggle, + }, + }) + .then(() => { + setMetricsPushEnabled(toggle); + mutate("/accounts"); + }), + loadingMessage: "Updating metrics setting...", + }); + }; + + return ( + +
+ + } + /> + } + active + /> + +
+

Metrics

+ + Help us improve NetBird by sharing performance metrics + such as connection timing, sync duration, and login latency. + + + Learn more about{" "} + + Client Metrics + + + in our documentation. + +
+ + + + Share performance metrics + + } + helpText={ + "When enabled, clients will periodically send performance data to help us identify and fix issues." + } + disabled={!permission.settings.update} + /> +
+
+ ); +}