Show the analytics preview in telemetry settings

web/src/components/config-form/section-configs/telemetry.ts

@@ -3,9 +3,17 @@ import type { SectionConfigOverrides } from "./types";
 const telemetry: SectionConfigOverrides = {
   base: {
     sectionDocs: "/configuration/advanced/reference",
+    fieldDocs: {
+      analytics: "/configuration/advanced/analytics",
+    },
     restartRequired: ["version_check"],
-    fieldOrder: ["network_interfaces", "stats", "version_check"],
+    fieldOrder: ["analytics", "network_interfaces", "stats", "version_check"],
     advancedFields: [],
+    uiSchema: {
+      analytics: {
+        "ui:after": { render: "AnalyticsPreview" },
+      },
+    },
   },
 };
 

web/src/components/config-form/sectionExtras/AnalyticsPreview.tsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+import useSWR from "swr";
+import { useTranslation } from "react-i18next";
+import { LuChevronDown, LuChevronRight } from "react-icons/lu";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+
+export default function AnalyticsPreview() {
+  const { t } = useTranslation("views/settings");
+  const [open, setOpen] = useState(false);
+
+  // built on demand, since building runs every collector on the server
+  const { data, error } = useSWR<Record<string, unknown>>(
+    open ? "analytics/preview" : null,
+    { revalidateOnFocus: false },
+  );
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen} className="mt-2">
+      <CollapsibleTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-1">
+          {open ? (
+            <LuChevronDown className="size-4" />
+          ) : (
+            <LuChevronRight className="size-4" />
+          )}
+          {t("analyticsPreview.show")}
+        </Button>
+      </CollapsibleTrigger>
+      <div className="mt-1 text-xs text-muted-foreground">
+        {t("analyticsPreview.desc")}
+      </div>
+      <CollapsibleContent className="mt-2">
+        {error ? (
+          <div className="text-sm text-danger">
+            {t("analyticsPreview.error")}
+          </div>
+        ) : data ? (
+          <pre
+            data-testid="analytics-preview"
+            className="max-h-96 overflow-auto rounded-md bg-secondary p-3 text-xs"
+          >
+            {JSON.stringify(data, null, 2)}
+          </pre>
+        ) : (
+          <ActivityIndicator className="size-5" />
+        )}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

web/src/components/config-form/sectionExtras/registry.ts

@@ -1,4 +1,5 @@
 import type { ComponentType } from "react";
+import AnalyticsPreview from "./AnalyticsPreview";
 import SemanticSearchReindex from "./SemanticSearchReindex.tsx";
 import CameraReviewStatusToggles from "./CameraReviewStatusToggles";
 import ProxyRoleMap from "./ProxyRoleMap";
@@ -56,6 +57,9 @@ export const sectionRenderers: SectionRenderers = {
   birdseye: {
     BirdseyeCameraReorder,
   },
+  telemetry: {
+    AnalyticsPreview,
+  },
 };
 
 export default sectionRenderers;

web/src/types/frigateConfig.ts

@@ -649,6 +649,7 @@ export interface FrigateConfig {
   };
 
   telemetry: {
+    analytics: boolean;
     network_interfaces: string[];
     stats: {
       amd_gpu_stats: boolean;