Migrate framework events backing data structure to datasource

Summary: This will allow us to build a nice table easily.

Reviewed By: lblasa

Differential Revision: D47520029

fbshipit-source-id: 3cdd776533b66688329171eb29b892e0b9153540

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

@@ -17,14 +17,12 @@ import {
 } from '../types';
 import React, {useMemo} from 'react';
 import {
-  Atom,
   DataInspector,
   DataSource,
   DataTable,
   DataTableColumn,
   DetailSidebar,
   Layout,
-  useValue,
 } from 'flipper-plugin';
 
 export function PerfStats(props: {
@@ -32,15 +30,13 @@ export function PerfStats(props: {
   nodes: Map<Id, UINode>;
   rootId?: Id;
   events: DataSource<DynamicPerformanceStatsEvent, number>;
-  frameworkEvents: Atom<Map<Id, FrameworkEvent[]>>;
+  frameworkEvents: DataSource<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);
@@ -65,7 +61,6 @@ export function PerfStats(props: {
     return columns;
   }, [props.events]);
 
-  const newLocal = [...frameworkEventsValue.entries()];
   return (
     <Layout.Container grow>
       <DataTable<PerformanceStatsEvent>
@@ -79,11 +74,7 @@ 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,
-            ),
+            frameworkEventsSize: props.frameworkEvents.size,
           }}></DataInspector>
       </DetailSidebar>
     </Layout.Container>