Explode framework payload attribute into data table columns

Reviewed By: antonk52

Differential Revision: D48562431

fbshipit-source-id: 869e39da41986ee61e6bbebecfb4b36119881c64

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

@@ -17,7 +17,7 @@ import {
   usePlugin,
   useValue,
 } from 'flipper-plugin';
-import React, {useCallback, useEffect, useRef} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {FrameworkEvent, Id, NodeMap} from '../ClientTypes';
 import {plugin} from '../index';
 import {Button, Result, Tooltip} from 'antd';
@@ -60,6 +60,21 @@ export function FrameworkEventsTable({
     }
   }, [instance.uiActions, isTree, nodeId]);
 
+  const allColumns = useMemo(() => {
+    const customColumnKeys = instance.frameworkEventsCustomColumns.get();
+
+    const customColumns = [...customColumnKeys].map(
+      (customKey: string) =>
+        ({
+          key: customKey,
+          title: startCase(customKey),
+          onRender: (row: AugmentedFrameworkEvent) => row.payload?.[customKey],
+        } as DataTableColumn<AugmentedFrameworkEvent>),
+    );
+
+    return staticColumns.concat(customColumns);
+  }, [instance.frameworkEventsCustomColumns]);
+
   const onSelectRow = useCallback(
     (event: FrameworkEvent | undefined): void => {
       instance.uiActions.onFocusNode(event?.nodeId);
@@ -72,7 +87,7 @@ export function FrameworkEventsTable({
         dataSource={instance.frameworkEvents}
         tableManagerRef={managerRef}
         onSelect={onSelectRow}
-        columns={columns}
+        columns={allColumns}
         extraActions={
           <Tooltip title="Back to tree">
             <Button
@@ -101,7 +116,7 @@ export function FrameworkEventsTable({
   );
 }
 
-const columns: DataTableColumn<AugmentedFrameworkEvent>[] = [
+const staticColumns: DataTableColumn<AugmentedFrameworkEvent>[] = [
   {
     key: 'timestamp',
     onRender: (row: FrameworkEvent) => formatTimestampMillis(row.timestamp),
@@ -139,12 +154,4 @@ const columns: DataTableColumn<AugmentedFrameworkEvent>[] = [
     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/index.tsx

@@ -52,6 +52,7 @@ export function plugin(client: PluginClient<Events>) {
     indices: [['nodeId']],
     limit: 10000,
   });
+  const frameworkEventsCustomColumns = createState<Set<string>>(new Set());
 
   const frameworkEventMetadata = createState<
     Map<FrameworkEventType, FrameworkEventMetadata>
@@ -239,8 +240,14 @@ export function plugin(client: PluginClient<Events>) {
     frameScan: FrameScanEvent,
     nodes: Map<Id, ClientNode>,
   ) {
+    const customColumns = frameworkEventsCustomColumns.get();
     for (const frameworkEvent of frameScan.frameworkEvents ?? []) {
+      for (const key in frameworkEvent.payload) {
+        customColumns.add(key);
+      }
+
       const treeRoot = getNode(frameworkEvent.treeId, nodes);
+
       const treeRootFirstChild = getNode(first(treeRoot?.children), nodes);
       frameworkEvents.append({
         ...frameworkEvent,
@@ -248,6 +255,7 @@ export function plugin(client: PluginClient<Events>) {
         rootComponentName: treeRootFirstChild?.name,
       });
     }
+    frameworkEventsCustomColumns.set(customColumns);
 
     if (uiState.isPaused.get() === true) {
       return;
@@ -323,6 +331,7 @@ export function plugin(client: PluginClient<Events>) {
     nodes: nodesAtom,
     frameworkEvents,
     frameworkEventMetadata,
+    frameworkEventsCustomColumns,
     snapshot,
     metadata,
     perfEvents,