From 5d0e0137d540b16101764eb301e91dac119c40f2 Mon Sep 17 00:00:00 2001 From: Lorenzo Blasa Date: Thu, 16 Mar 2023 07:35:44 -0700 Subject: [PATCH] Better performance metrics Summary: Current metrics are deltas from an initial set timestamp. This works but is limiting or affecting the overall accuracy of them. The aim of this task is to replace the deltas with actual measurements for the operations. This way we can add/remove operations in between which will not create any impact of them. Reviewed By: LukeDefeo Differential Revision: D44026823 fbshipit-source-id: fd7d62c4eab86bab8239b44beecd5c133f6d11c7 --- .../ui-debugger/components/PerfStats.tsx | 65 +++++++++---------- desktop/plugins/public/ui-debugger/index.tsx | 27 +++++++- desktop/plugins/public/ui-debugger/types.tsx | 18 +++++ 3 files changed, 74 insertions(+), 36 deletions(-) diff --git a/desktop/plugins/public/ui-debugger/components/PerfStats.tsx b/desktop/plugins/public/ui-debugger/components/PerfStats.tsx index ea3e1d657..4d06a912a 100644 --- a/desktop/plugins/public/ui-debugger/components/PerfStats.tsx +++ b/desktop/plugins/public/ui-debugger/components/PerfStats.tsx @@ -7,31 +7,31 @@ * @format */ -import {PerfStatsEvent} from '../types'; +import {PerformanceStatsEvent} from '../types'; import React from 'react'; import {DataSource, DataTable, DataTableColumn} from 'flipper-plugin'; -export function PerfStats(props: {events: DataSource}) { +export function PerfStats(props: { + events: DataSource; +}) { return ( - dataSource={props.events} columns={columns} /> + + dataSource={props.events} + columns={columns} + /> ); } -function formatDiff(start: number, end: number): string { - const ms = end - start; +function formatDiff(ms: number): string { return `${ms.toFixed(0)}ms`; } -const columns: DataTableColumn[] = [ +const columns: DataTableColumn[] = [ { key: 'txId', title: 'TXID', - onRender: (row: PerfStatsEvent) => { - try { - return new Date(row.txId).toISOString(); - } catch { - return row.txId; - } + onRender: (row: PerformanceStatsEvent) => { + return row.txId; }, }, { @@ -45,53 +45,50 @@ const columns: DataTableColumn[] = [ { key: 'start', title: 'Start', - onRender: (row: PerfStatsEvent) => { + onRender: (row: PerformanceStatsEvent) => { return new Date(row.start).toISOString(); }, }, { - key: 'traversalComplete', + key: 'traversalMS', title: 'Traversal time (Main thread)', - onRender: (row: PerfStatsEvent) => { - return formatDiff(row.start, row.traversalComplete); + onRender: (row: PerformanceStatsEvent) => { + return formatDiff(row.traversalMS); }, }, { - key: 'snapshotComplete', + key: 'snapshotMS', title: 'Snapshot time (Main thread)', - onRender: (row: PerfStatsEvent) => { - return formatDiff(row.traversalComplete, row.snapshotComplete); + onRender: (row: PerformanceStatsEvent) => { + return formatDiff(row.snapshotMS); }, }, { - key: 'queuingComplete', + key: 'queuingMS', title: 'Queuing time', - onRender: (row: PerfStatsEvent) => { - return formatDiff(row.snapshotComplete, row.queuingComplete); + onRender: (row: PerformanceStatsEvent) => { + return formatDiff(row.queuingMS); }, }, { - key: 'deferredComputationComplete', + key: 'deferredComputationMS', title: 'Deferred processing time', - onRender: (row: PerfStatsEvent) => { - return formatDiff(row.queuingComplete, row.deferredComputationComplete); + onRender: (row: PerformanceStatsEvent) => { + return formatDiff(row.deferredComputationMS); }, }, { - key: 'serializationComplete', + key: 'serializationMS', title: 'Serialization time', - onRender: (row: PerfStatsEvent) => { - return formatDiff( - row.deferredComputationComplete, - row.serializationComplete, - ); + onRender: (row: PerformanceStatsEvent) => { + return formatDiff(row.serializationMS); }, }, { - key: 'socketComplete', + key: 'socketMS', title: 'Socket send time', - onRender: (row: PerfStatsEvent) => { - return formatDiff(row.serializationComplete, row.socketComplete); + onRender: (row: PerformanceStatsEvent) => { + return formatDiff(row.socketMS); }, }, ]; diff --git a/desktop/plugins/public/ui-debugger/index.tsx b/desktop/plugins/public/ui-debugger/index.tsx index 181083ffa..2f2b602fd 100644 --- a/desktop/plugins/public/ui-debugger/index.tsx +++ b/desktop/plugins/public/ui-debugger/index.tsx @@ -21,7 +21,7 @@ import { FrameworkEventType, Metadata, MetadataId, - PerfStatsEvent, + PerformanceStatsEvent, Snapshot, UINode, } from './types'; @@ -73,11 +73,34 @@ export function plugin(client: PluginClient) { }); }); - const perfEvents = createDataSource([], { + const perfEvents = createDataSource([], { key: 'txId', limit: 10 * 1024, }); + + /** + * The message handling below is a temporary measure for a couple of weeks until + * clients migrate to the newer message/format. + */ client.onMessage('perfStats', (event) => { + const stat = { + txId: event.txId, + observerType: event.observerType, + nodesCount: event.nodesCount, + start: event.start, + traversalMS: event.traversalComplete - event.start, + snapshotMS: event.snapshotComplete - event.traversalComplete, + queuingMS: event.queuingComplete - event.snapshotComplete, + deferredComputationMS: + event.deferredComputationComplete - event.queuingComplete, + serializationMS: + event.serializationComplete - event.deferredComputationComplete, + socketMS: event.socketComplete - event.serializationComplete, + }; + client.logger.track('performance', 'subtreeUpdate', stat, 'ui-debugger'); + perfEvents.append(stat); + }); + client.onMessage('performanceStats', (event) => { client.logger.track('performance', 'subtreeUpdate', event, 'ui-debugger'); perfEvents.append(event); }); diff --git a/desktop/plugins/public/ui-debugger/types.tsx b/desktop/plugins/public/ui-debugger/types.tsx index 8ae301b48..3bb079d41 100644 --- a/desktop/plugins/public/ui-debugger/types.tsx +++ b/desktop/plugins/public/ui-debugger/types.tsx @@ -12,6 +12,7 @@ export type Events = { subtreeUpdate: SubtreeUpdateEvent; coordinateUpdate: CoordinateUpdateEvent; perfStats: PerfStatsEvent; + performanceStats: PerformanceStatsEvent; metadataUpdate: UpdateMetadataEvent; }; @@ -47,6 +48,10 @@ export type InitEvent = { frameworkEventMetadata?: FrameworkEventMetadata[]; }; +/** + * @deprecated This performance event should not be used and soon will + * be removed. PerformanceStatsEvent should be used instead. + */ export type PerfStatsEvent = { txId: number; observerType: string; @@ -60,6 +65,19 @@ export type PerfStatsEvent = { nodesCount: number; }; +export type PerformanceStatsEvent = { + txId: number; + observerType: string; + nodesCount: number; + start: number; + traversalMS: number; + snapshotMS: number; + queuingMS: number; + deferredComputationMS: number; + serializationMS: number; + socketMS: number; +}; + export type UpdateMetadataEvent = { attributeMetadata: Record; };