From 5ef37684eb40151eb962c09962aebf4995d92247 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Wed, 19 Jul 2023 08:58:20 -0700
Subject: [PATCH] Report framework events in diagnostics

Reviewed By: lblasa

Differential Revision: D47520032

fbshipit-source-id: c88f57f3a9c81e32c8c4c3ac46f523407bd44463
---
 .../public/ui-debugger/components/PerfStats.tsx      | 12 ++++++++++++
 .../plugins/public/ui-debugger/components/main.tsx   |  1 +
 2 files changed, 13 insertions(+)

diff --git a/desktop/plugins/public/ui-debugger/components/PerfStats.tsx b/desktop/plugins/public/ui-debugger/components/PerfStats.tsx
index f8b101a03..3907b2cac 100644
--- a/desktop/plugins/public/ui-debugger/components/PerfStats.tsx
+++ b/desktop/plugins/public/ui-debugger/components/PerfStats.tsx
@@ -13,15 +13,18 @@ import {
   UIState,
   Id,
   UINode,
+  FrameworkEvent,
 } from '../types';
 import React, {useMemo} from 'react';
 import {
+  Atom,
   DataInspector,
   DataSource,
   DataTable,
   DataTableColumn,
   DetailSidebar,
   Layout,
+  useValue,
 } from 'flipper-plugin';
 
 export function PerfStats(props: {
@@ -29,12 +32,15 @@ export function PerfStats(props: {
   nodes: Map<Id, UINode>;
   rootId?: Id;
   events: DataSource<DynamicPerformanceStatsEvent, number>;
+  frameworkEvents: Atom<Map<Id, FrameworkEvent[]>>;
 }) {
   const uiStateValues = Object.entries(props.uiState).map(([key, value]) => [
     key,
     value.get(),
   ]);
 
+  const frameworkEventsValue = useValue(props.frameworkEvents);
+
   const allColumns = useMemo(() => {
     if (props.events.size > 0) {
       const row = props.events.get(0);
@@ -59,6 +65,7 @@ export function PerfStats(props: {
     return columns;
   }, [props.events]);
 
+  const newLocal = [...frameworkEventsValue.entries()];
   return (
     <Layout.Container grow>
       <DataTable<PerformanceStatsEvent>
@@ -72,6 +79,11 @@ export function PerfStats(props: {
             rootId: props.rootId,
             nodesCount: props.nodes.size,
             rootNode: props.nodes.get(props.rootId ?? 'noroot'),
+            frameworkEvents: newLocal,
+            frameworkEventsSize: newLocal.reduce(
+              (acc, value) => acc + value[1].length,
+              0,
+            ),
           }}></DataInspector>
       </DetailSidebar>
     </Layout.Container>
diff --git a/desktop/plugins/public/ui-debugger/components/main.tsx b/desktop/plugins/public/ui-debugger/components/main.tsx
index 23655a9d9..01c76fbd3 100644
--- a/desktop/plugins/public/ui-debugger/components/main.tsx
+++ b/desktop/plugins/public/ui-debugger/components/main.tsx
@@ -54,6 +54,7 @@ export function Component() {
   if (showPerfStats)
     return (
       <PerfStats
+        frameworkEvents={instance.frameworkEvents}
         uiState={instance.uiState}
         rootId={rootId}
         nodes={nodes}