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

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<Events>) {
     });
   });
 
-  const perfEvents = createDataSource<PerfStatsEvent, 'txId'>([], {
+  const perfEvents = createDataSource<PerformanceStatsEvent, 'txId'>([], {
     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);
   });