Add more diagnostic info to perf stats page

Summary: This will hopefully be useful for prod debugging where we have users with no data,

Reviewed By: lblasa

Differential Revision: D47053328

fbshipit-source-id: 37ecce885ebd93bf2ffdd67cf49cf33255dda429

desktop/plugins/public/ui-debugger/components/PerfStats.tsx

@@ -7,13 +7,32 @@
  * @format
  */
 
-import {PerformanceStatsEvent, DynamicPerformanceStatsEvent} from '../types';
+import {
+  PerformanceStatsEvent,
+  DynamicPerformanceStatsEvent,
+  UIState,
+  Id,
+} from '../types';
 import React, {useMemo} from 'react';
-import {DataSource, DataTable, DataTableColumn} from 'flipper-plugin';
+import {
+  DataInspector,
+  DataSource,
+  DataTable,
+  DataTableColumn,
+  DetailSidebar,
+  Layout,
+} from 'flipper-plugin';
 
 export function PerfStats(props: {
+  uiState: UIState;
+  rootId?: Id;
   events: DataSource<DynamicPerformanceStatsEvent, number>;
 }) {
+  const uiStateValues = Object.entries(props.uiState).map(([key, value]) => [
+    key,
+    value.get(),
+  ]);
+
   const allColumns = useMemo(() => {
     if (props.events.size > 0) {
       const row = props.events.get(0);
@@ -39,10 +58,19 @@ export function PerfStats(props: {
   }, [props.events]);
 
   return (
-    <DataTable<PerformanceStatsEvent>
+    <Layout.Container grow>
-      dataSource={props.events}
+      <DataTable<PerformanceStatsEvent>
-      columns={allColumns}
+        dataSource={props.events}
-    />
+        columns={allColumns}
+      />
+      <DetailSidebar width={250}>
+        <DataInspector
+          data={{
+            ...Object.fromEntries(uiStateValues),
+            rootId: props.rootId,
+          }}></DataInspector>
+      </DetailSidebar>
+    </Layout.Container>
   );
 }
 

desktop/plugins/public/ui-debugger/components/main.tsx

@@ -78,7 +78,14 @@ export function Component() {
     );
   }
 
-  if (showPerfStats) return <PerfStats events={instance.perfEvents} />;
+  if (showPerfStats)
+    return (
+      <PerfStats
+        uiState={instance.uiState}
+        rootId={rootId}
+        events={instance.perfEvents}
+      />
+    );
 
   if (rootId == null || streamState.state === 'RetryingAfterError') {
     return (

desktop/plugins/public/ui-debugger/index.tsx

@@ -27,6 +27,7 @@ import {
   StreamInterceptorError,
   StreamState,
   UINode,
+  UIState,
 } from './types';
 import {Draft} from 'immer';
 import {QueryClient, setLogger} from 'react-query';
@@ -43,20 +44,6 @@ type PendingData = {
   frame: FrameScanEvent | null;
 };
 
-type UIState = {
-  isPaused: Atom<boolean>;
-  streamState: Atom<StreamState>;
-  searchTerm: Atom<string>;
-  isContextMenuOpen: Atom<boolean>;
-  hoveredNodes: Atom<Id[]>;
-  selectedNode: Atom<Id | undefined>;
-  highlightedNodes: Atom<Set<Id>>;
-  focusedNode: Atom<Id | undefined>;
-  expandedNodes: Atom<Set<Id>>;
-  visualiserWidth: Atom<number>;
-  frameworkEventMonitoring: Atom<Map<FrameworkEventType, boolean>>;
-};
-
 export function plugin(client: PluginClient<Events>) {
   const rootId = createState<Id | undefined>(undefined);
 

desktop/plugins/public/ui-debugger/types.tsx

@@ -7,6 +7,22 @@
  * @format
  */
 
+import {Atom} from 'flipper-plugin';
+
+export type UIState = {
+  isPaused: Atom<boolean>;
+  streamState: Atom<StreamState>;
+  searchTerm: Atom<string>;
+  isContextMenuOpen: Atom<boolean>;
+  hoveredNodes: Atom<Id[]>;
+  selectedNode: Atom<Id | undefined>;
+  highlightedNodes: Atom<Set<Id>>;
+  focusedNode: Atom<Id | undefined>;
+  expandedNodes: Atom<Set<Id>>;
+  visualiserWidth: Atom<number>;
+  frameworkEventMonitoring: Atom<Map<FrameworkEventType, boolean>>;
+};
+
 export type StreamState =
   | {state: 'Ok'}
   | {state: 'RetryingAfterError'}