Improve table view

Summary:
added component name, root component name, duration, event type and better names

changelog: UIDebugger - added event debugger table view and side panel views

Reviewed By: lblasa

Differential Revision: D48559367

fbshipit-source-id: d357ecf654b4e443eac7673731a8be542e76dd48

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

@@ -16,14 +16,20 @@ import {
   usePlugin,
 } from 'flipper-plugin';
 import React, {useEffect, useRef} from 'react';
-import {FrameworkEvent, Id} from '../ClientTypes';
+import {FrameworkEvent, Id, NodeMap} from '../ClientTypes';
 import {plugin} from '../index';
 import {Button, Tooltip} from 'antd';
+import {AugmentedFrameworkEvent} from '../DesktopTypes';
+import {formatDuration, formatTimestampMillis} from '../utils/timeUtils';
+import {eventTypeToName} from './sidebar/inspector/FrameworkEventsInspector';
+import {startCase} from 'lodash';
 
-export function FrameworkEventsTable({nodeId}: {nodeId: Id}) {
+export function FrameworkEventsTable({nodeId}: {nodeId: Id; nodes: NodeMap}) {
   const instance = usePlugin(plugin);
 
-  const managerRef = useRef<DataTableManager<FrameworkEvent> | null>(null);
+  const managerRef = useRef<DataTableManager<AugmentedFrameworkEvent> | null>(
+    null,
+  );
 
   useEffect(() => {
     if (nodeId != null) {
@@ -52,23 +58,50 @@ export function FrameworkEventsTable({nodeId}: {nodeId: Id}) {
   );
 }
 
-const columns: DataTableColumn<FrameworkEvent>[] = [
+const columns: DataTableColumn<AugmentedFrameworkEvent>[] = [
   {
     key: 'timestamp',
-    onRender: (row: FrameworkEvent) => {
-      return new Date(row.timestamp).toLocaleTimeString();
-    },
-  },
-  {
-    key: 'treeId',
-  },
-  {
-    key: 'nodeId',
+    onRender: (row: FrameworkEvent) => formatTimestampMillis(row.timestamp),
+    title: 'Timestamp',
   },
   {
     key: 'type',
+    title: 'Event type',
+    onRender: (row: FrameworkEvent) => eventTypeToName(row.type),
+  },
+  {
+    key: 'duration',
+    title: 'Duration',
+    onRender: (row: FrameworkEvent) =>
+      row.duration != null ? formatDuration(row.duration) : null,
+  },
+  {
+    key: 'treeId',
+    title: 'TreeId',
+  },
+  {
+    key: 'rootComponentName',
+    title: 'Root component name',
+  },
+  {
+    key: 'nodeId',
+    title: 'Component ID',
+  },
+  {
+    key: 'nodeName',
+    title: 'Component name',
   },
   {
     key: 'thread',
+    title: 'Thread',
+    onRender: (row: FrameworkEvent) => startCase(row.thread),
+  },
+  {
+    key: 'payload',
+    title: 'Payload',
+    onRender: (row: FrameworkEvent) =>
+      Object.keys(row.payload ?? {}).length > 0
+        ? JSON.stringify(row.payload)
+        : null,
   },
 ];

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

@@ -103,7 +103,7 @@ export function Component() {
   }
 
   if (viewMode.mode === 'frameworkEventsTable') {
-    return <FrameworkEventsTable nodeId={viewMode.nodeId} />;
+    return <FrameworkEventsTable nodeId={viewMode.nodeId} nodes={nodes} />;
   }
 
   return (

desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx

@@ -36,6 +36,7 @@ import {last, startCase, uniqBy} from 'lodash';
 import {FilterOutlined, TableOutlined} from '@ant-design/icons';
 import {ViewMode} from '../../../DesktopTypes';
 import {MultiSelectableDropDownItem} from '../../shared/MultiSelectableDropDownItem';
+import {formatDuration, formatTimestampMillis} from '../../../utils/timeUtils';
 
 type Props = {
   node: ClientNode;
@@ -233,7 +234,7 @@ function EventDetails({
           <Tag color={threadToColor(event.thread)}>{event.thread}</Tag>
         </Descriptions.Item>
         <Descriptions.Item label="Timestamp">
-          {formatTimestamp(event.timestamp)}
+          {formatTimestampMillis(event.timestamp)}
         </Descriptions.Item>
         {event.duration && (
           <Descriptions.Item label="Duration">
@@ -257,35 +258,14 @@ function EventDetails({
   );
 }
 
-const options: Intl.DateTimeFormatOptions = {
+export const options: Intl.DateTimeFormatOptions = {
   hour: 'numeric',
   minute: 'numeric',
   second: 'numeric',
   hour12: false,
 };
-function formatTimestamp(timestamp: number): string {
-  const date = new Date(timestamp);
 
-  const formattedDate = new Intl.DateTimeFormat('en-US', options).format(date);
-  const milliseconds = date.getMilliseconds();
-
-  return `${formattedDate}.${milliseconds.toString().padStart(3, '0')}`;
-}
-
-function formatDuration(nanoseconds: number): string {
-  if (nanoseconds < 1_000) {
-    return `${nanoseconds} nanoseconds`;
-  } else if (nanoseconds < 1_000_000) {
-    return `${(nanoseconds / 1_000).toFixed(2)} microseconds`;
-  } else if (nanoseconds < 1_000_000_000) {
-    return `${(nanoseconds / 1_000_000).toFixed(2)} milliseconds`;
-  } else if (nanoseconds < 1_000_000_000_000) {
-    return `${(nanoseconds / 1_000_000_000).toFixed(2)} seconds`;
-  } else {
-    return `${(nanoseconds / (1_000_000_000 * 60)).toFixed(2)} minutes`;
-  }
-}
-function eventTypeToName(eventType: string) {
+export function eventTypeToName(eventType: string) {
   return eventType.slice(eventType.lastIndexOf(frameworkEventSeparator) + 1);
 }