From 756a28988375821128b5c9457c8e1186dfa5ddc1 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Mon, 21 Aug 2023 04:24:16 -0700
Subject: [PATCH] Add button to get to table mode from node level stream

Reviewed By: lblasa

Differential Revision: D48348325

fbshipit-source-id: f54815226dc230aa2d3c2bafdae8edfa829bf3fe
---
 .../components/sidebar/Inspector.tsx            |  1 +
 .../inspector/FrameworkEventsInspector.tsx      | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx
index 03bec41ba..0f5fe96f6 100644
--- a/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx
@@ -123,6 +123,7 @@ export const Inspector: React.FC<Props> = ({
               </Tooltip>
             }>
             <FrameworkEventsInspector
+              onSetViewMode={instance.uiActions.onSetViewMode}
               frameworkEventMetadata={frameworkEventMetadata}
               node={selectedNode}
               events={selectedFrameworkEvents}
diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx
index add4d0bc3..9d5310eef 100644
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx
@@ -22,25 +22,29 @@ import {
 } from '../../../ClientTypes';
 import React, {ReactNode, useState} from 'react';
 import {StackTraceInspector} from './StackTraceInspector';
-import {Collapse, Descriptions, Select, Tag} from 'antd';
+import {Button, Collapse, Descriptions, Select, Tag} from 'antd';
 import {frameworkEventSeparator} from '../../shared/FrameworkEventsTreeSelect';
 import {
   buildTreeSelectData,
   FrameworkEventsTreeSelect,
 } from '../../shared/FrameworkEventsTreeSelect';
 import {uniqBy} from 'lodash';
+import {TableOutlined} from '@ant-design/icons';
+import {ViewMode} from '../../../DesktopTypes';
 
 type Props = {
   node: ClientNode;
   events: readonly FrameworkEvent[];
   showExtra?: (title: string, element: ReactNode) => void;
   frameworkEventMetadata: Map<FrameworkEventType, FrameworkEventMetadata>;
+  onSetViewMode: (viewMode: ViewMode) => void;
 };
 export const FrameworkEventsInspector: React.FC<Props> = ({
   node,
   events,
   showExtra,
   frameworkEventMetadata,
+  onSetViewMode,
 }) => {
   const allThreads = uniqBy(events, 'thread').map((event) => event.thread);
   const [filteredThreads, setFilteredThreads] = useState<Set<string>>(
@@ -64,6 +68,17 @@ export const FrameworkEventsInspector: React.FC<Props> = ({
 
   return (
     <Layout.Container gap="small" padv="small">
+      {node.tags.includes('TreeRoot') && (
+        <Button
+          type="ghost"
+          icon={<TableOutlined />}
+          size="middle"
+          onClick={() =>
+            onSetViewMode({mode: 'frameworkEventsTable', treeRootId: node.id})
+          }>
+          Explore all events
+        </Button>
+      )}
       <Collapse>
         <Collapse.Panel header="Filter events" key="1">
           <Layout.Container gap="tiny">