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>
-      dataSource={props.events}
-      columns={allColumns}
-    />
+    <Layout.Container grow>
+      <DataTable<PerformanceStatsEvent>
+        dataSource={props.events}
+        columns={allColumns}
+      />
+      <DetailSidebar width={250}>
+        <DataInspector
+          data={{
+            ...Object.fromEntries(uiStateValues),
+            rootId: props.rootId,
+          }}></DataInspector>
+      </DetailSidebar>
+    </Layout.Container>
   );
 }