Native UI scan

Summary: Added scheduler to scan the Native UI every 500 ms to test, Also added instrumentation in a separate event with the timings of each stage visualised in a Data table on desktop which can be accessed with ctrl+I. Currently this instrumentation event is sent every time but it could be a config option controlled from the desktop in the future

Reviewed By: lblasa

Differential Revision: D39205313

fbshipit-source-id: ca034171db6b062396b4ef28028aaa663c4d852a

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

@@ -7,35 +7,20 @@
  * @format
  */
 
-import React from 'react';
-import {Id, plugin, UINode} from '../index';
-import {usePlugin, useValue} from 'flipper-plugin';
+import React, {useState} from 'react';
+import {PerfStatsEvent, plugin} from '../index';
+import {
+  DataTable,
+  DataTableColumn,
+  Layout,
+  usePlugin,
+  useValue,
+} from 'flipper-plugin';
 import {Tree} from 'antd';
 import type {DataNode} from 'antd/es/tree';
 import {DownOutlined} from '@ant-design/icons';
-
-// function treeToAntTree(uiNode: UINode): DataNode {
-//   return {
-//     key: uiNode.id,
-//     title: uiNode.name,
-//     children: uiNode.children ? uiNode.children.map(treeToAntTree) : [],
-//   };
-// }
-
-// function treeToMap(uiNode: UINode): Map<Id, UINode> {
-//   const result = new Map<Id, UINode>();
-//
-//   function treeToMapRec(node: UINode): void {
-//     result.set(node.id, node);
-//     for (const child of node.children) {
-//       treeToMapRec(child);
-//     }
-//   }
-//
-//   treeToMapRec(uiNode);
-//
-//   return result;
-// }
+import {useHotkeys} from 'react-hotkeys-hook';
+import {Id, UINode} from '../types';
 
 function nodesToAntTree(root: Id, nodes: Map<Id, UINode>): DataNode {
   function uiNodeToAntNode(id: Id): DataNode {
@@ -50,26 +35,84 @@ function nodesToAntTree(root: Id, nodes: Map<Id, UINode>): DataNode {
   return uiNodeToAntNode(root);
 }
 
+function formatDiff(start: number, end: number): string {
+  const ms = end - start;
+  return `${ms.toFixed(0)}ms`;
+}
+
+export const columns: DataTableColumn<PerfStatsEvent>[] = [
+  {
+    key: 'txId',
+    title: 'TXID',
+  },
+  {
+    key: 'nodesCount',
+    title: 'Total nodes',
+  },
+  {
+    key: 'start',
+    title: 'Start',
+    onRender: (row: PerfStatsEvent) => {
+      console.log(row.start);
+      return new Date(row.start).toISOString();
+    },
+  },
+  {
+    key: 'scanComplete',
+    title: 'Scan time',
+    onRender: (row: PerfStatsEvent) => {
+      return formatDiff(row.start, row.scanComplete);
+    },
+  },
+  {
+    key: 'serializationComplete',
+    title: 'Serialization time',
+    onRender: (row: PerfStatsEvent) => {
+      return formatDiff(row.scanComplete, row.serializationComplete);
+    },
+  },
+  {
+    key: 'socketComplete',
+    title: 'Socket send time',
+    onRender: (row: PerfStatsEvent) => {
+      return formatDiff(row.serializationComplete, row.socketComplete);
+    },
+  },
+];
+
 export function Component() {
   const instance = usePlugin(plugin);
   const rootId = useValue(instance.rootId);
   const nodes = useValue(instance.nodes);
 
+  const [showPerfStats, setShowPerfStats] = useState(false);
+
+  useHotkeys('ctrl+i', () => setShowPerfStats((show) => !show));
+
+  if (showPerfStats)
+    return (
+      <DataTable<PerfStatsEvent>
+        dataSource={instance.perfEvents}
+        columns={columns}
+      />
+    );
+
   if (rootId) {
     const antTree = nodesToAntTree(rootId, nodes);
-    console.log(antTree);
-    console.log(rootId);
     return (
-      <Tree
-        showIcon
-        showLine
-        onSelect={(selected) => {
-          console.log(nodes.get(selected[0] as string));
-        }}
-        defaultExpandAll
-        switcherIcon={<DownOutlined />}
-        treeData={[antTree]}
-      />
+      <Layout.ScrollContainer>
+        <Tree
+          showIcon
+          showLine
+          onSelect={(selected) => {
+            console.log(nodes.get(selected[0] as string));
+          }}
+          defaultExpandAll
+          expandedKeys={[...nodes.keys()]}
+          switcherIcon={<DownOutlined />}
+          treeData={[antTree]}
+        />
+      </Layout.ScrollContainer>
     );
   }