Refactor UI

Summary: Split our the mega component into separate parts in preparation for the visualizer

Reviewed By: lblasa

Differential Revision: D39509406

fbshipit-source-id: 0f867c1f8a91b7592673ae47ba2b5db4f3500732

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

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {PerfStatsEvent} from '../types';
+import React from 'react';
+import {DataSource, DataTable, DataTableColumn} from 'flipper-plugin';
+
+export function PerfStats(props: {events: DataSource<PerfStatsEvent, number>}) {
+  return (
+    <DataTable<PerfStatsEvent> dataSource={props.events} columns={columns} />
+  );
+}
+
+function formatDiff(start: number, end: number): string {
+  const ms = end - start;
+  return `${ms.toFixed(0)}ms`;
+}
+
+const columns: DataTableColumn<PerfStatsEvent>[] = [
+  {
+    key: 'txId',
+    title: 'TXID',
+  },
+  {
+    key: 'observerType',
+    title: 'Type',
+  },
+  {
+    key: 'nodesCount',
+    title: 'Total nodes',
+  },
+  {
+    key: 'start',
+    title: 'Start',
+    onRender: (row: PerfStatsEvent) => {
+      return new Date(row.start).toISOString();
+    },
+  },
+  {
+    key: 'traversalComplete',
+    title: 'Traversal time (Main thread)',
+    onRender: (row: PerfStatsEvent) => {
+      return formatDiff(row.start, row.traversalComplete);
+    },
+  },
+  {
+    key: 'queuingComplete',
+    title: 'Queuing time',
+    onRender: (row: PerfStatsEvent) => {
+      return formatDiff(row.traversalComplete, row.queuingComplete);
+    },
+  },
+  {
+    key: 'serializationComplete',
+    title: 'Serialization time',
+    onRender: (row: PerfStatsEvent) => {
+      return formatDiff(row.queuingComplete, row.serializationComplete);
+    },
+  },
+  {
+    key: 'socketComplete',
+    title: 'Socket send time',
+    onRender: (row: PerfStatsEvent) => {
+      return formatDiff(row.serializationComplete, row.socketComplete);
+    },
+  },
+];