Debug events off by default, added an admin toggle to show them

Author: matt-aitken

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx

@@ -262,7 +262,6 @@ export default function Page() {
 function TraceView({ run, trace, maximumLiveReloadingSetting, resizable }: LoaderData) {
   const organization = useOrganization();
   const project = useProject();
-  const isAdmin = useHasAdminAccess();
   const { searchParams, replaceSearchParam } = useReplaceSearchParams();
   const selectedSpanId = searchParams.get("span") ?? undefined;
 
@@ -303,7 +302,7 @@ function TraceView({ run, trace, maximumLiveReloadingSetting, resizable }: Loade
           <TasksTreeView
             selectedId={selectedSpanId}
             key={events[0]?.id ?? "-"}
-            events={isAdmin ? events : events.filter((event) => !event.data.isDebug)}
+            events={events}
             parentRunFriendlyId={parentRunFriendlyId}
             onSelectedIdChanged={(selectedSpan) => {
               //instantly close the panel if no span is selected
@@ -463,8 +462,10 @@ function TasksTreeView({
   maximumLiveReloadingSetting,
   rootRun,
 }: TasksTreeViewProps) {
+  const isAdmin = useHasAdminAccess();
   const [filterText, setFilterText] = useState("");
   const [errorsOnly, setErrorsOnly] = useState(false);
+  const [showDebug, setShowDebug] = useState(false);
   const [showDurations, setShowDurations] = useState(true);
   const [scale, setScale] = useState(0);
   const parentRef = useRef<HTMLDivElement>(null);
@@ -484,7 +485,7 @@ function TasksTreeView({
     scrollToNode,
     virtualizer,
   } = useTree({
-    tree: events,
+    tree: showDebug ? events : events.filter((event) => !event.data.isDebug),
     selectedId,
     // collapsedIds,
     onSelectedIdChanged,
@@ -509,6 +510,14 @@ function TasksTreeView({
     <div className="grid h-full grid-rows-[2.5rem_1fr_3.25rem] overflow-hidden">
       <div className="flex items-center justify-between gap-2 border-b border-grid-dimmed px-2">
         <SearchField onChange={setFilterText} />
+        {isAdmin && (
+          <Switch
+            variant="small"
+            label="Debug"
+            checked={showDebug}
+            onCheckedChange={(e) => setShowDebug(e.valueOf())}
+          />
+        )}
         <Switch
           variant="small"
           label="Errors only"