Report framework events in diagnostics

Reviewed By: lblasa

Differential Revision: D47520032

fbshipit-source-id: c88f57f3a9c81e32c8c4c3ac46f523407bd44463
This commit is contained in:
Luke De Feo
2023-07-19 08:58:20 -07:00
committed by Facebook GitHub Bot
parent 9d0b8ac0fe
commit 5ef37684eb
2 changed files with 13 additions and 0 deletions

View File

@@ -13,15 +13,18 @@ import {
UIState, UIState,
Id, Id,
UINode, UINode,
FrameworkEvent,
} from '../types'; } from '../types';
import React, {useMemo} from 'react'; import React, {useMemo} from 'react';
import { import {
Atom,
DataInspector, DataInspector,
DataSource, DataSource,
DataTable, DataTable,
DataTableColumn, DataTableColumn,
DetailSidebar, DetailSidebar,
Layout, Layout,
useValue,
} from 'flipper-plugin'; } from 'flipper-plugin';
export function PerfStats(props: { export function PerfStats(props: {
@@ -29,12 +32,15 @@ export function PerfStats(props: {
nodes: Map<Id, UINode>; nodes: Map<Id, UINode>;
rootId?: Id; rootId?: Id;
events: DataSource<DynamicPerformanceStatsEvent, number>; events: DataSource<DynamicPerformanceStatsEvent, number>;
frameworkEvents: Atom<Map<Id, FrameworkEvent[]>>;
}) { }) {
const uiStateValues = Object.entries(props.uiState).map(([key, value]) => [ const uiStateValues = Object.entries(props.uiState).map(([key, value]) => [
key, key,
value.get(), value.get(),
]); ]);
const frameworkEventsValue = useValue(props.frameworkEvents);
const allColumns = useMemo(() => { const allColumns = useMemo(() => {
if (props.events.size > 0) { if (props.events.size > 0) {
const row = props.events.get(0); const row = props.events.get(0);
@@ -59,6 +65,7 @@ export function PerfStats(props: {
return columns; return columns;
}, [props.events]); }, [props.events]);
const newLocal = [...frameworkEventsValue.entries()];
return ( return (
<Layout.Container grow> <Layout.Container grow>
<DataTable<PerformanceStatsEvent> <DataTable<PerformanceStatsEvent>
@@ -72,6 +79,11 @@ export function PerfStats(props: {
rootId: props.rootId, rootId: props.rootId,
nodesCount: props.nodes.size, nodesCount: props.nodes.size,
rootNode: props.nodes.get(props.rootId ?? 'noroot'), rootNode: props.nodes.get(props.rootId ?? 'noroot'),
frameworkEvents: newLocal,
frameworkEventsSize: newLocal.reduce(
(acc, value) => acc + value[1].length,
0,
),
}}></DataInspector> }}></DataInspector>
</DetailSidebar> </DetailSidebar>
</Layout.Container> </Layout.Container>

View File

@@ -54,6 +54,7 @@ export function Component() {
if (showPerfStats) if (showPerfStats)
return ( return (
<PerfStats <PerfStats
frameworkEvents={instance.frameworkEvents}
uiState={instance.uiState} uiState={instance.uiState}
rootId={rootId} rootId={rootId}
nodes={nodes} nodes={nodes}