FrameworkEventsInspector

Summary:
As events get bigger, this change includes the following:
- Dedicated event inspector
- Stacktrace viewer for events with stacktrace attribution
- Stacktrace viewer is displayed within a new BottomPanel. BottomPanel can display any React component and can be reused in the future in different use cases.

Reviewed By: LukeDefeo

Differential Revision: D44628768

fbshipit-source-id: 71a9ef87e71c9a17f58c2544a1aa356eed14ed27

desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx

@@ -7,33 +7,25 @@
  * @format
  */
 
-import React from 'react';
+import React, {ReactNode} from 'react';
 // eslint-disable-next-line rulesdir/no-restricted-imports-clone
 import {Glyph} from 'flipper';
-import {
-  Layout,
-  Tab,
-  Tabs,
-  theme,
-  usePlugin,
-  useValue,
-  TimelineDataDescription,
-} from 'flipper-plugin';
-
+import {Layout, Tab, Tabs, theme, usePlugin, useValue} from 'flipper-plugin';
 import {Id, Metadata, MetadataId, UINode} from '../../types';
-
 import {IdentityInspector} from './inspector/IdentityInspector';
 import {AttributesInspector} from './inspector/AttributesInspector';
 import {Tooltip} from 'antd';
 import {NoData} from './inspector/NoData';
 import {plugin} from '../../index';
+import {FrameworkEventsInspector} from './inspector/FrameworkEventsInspector';
 
 type Props = {
   nodes: Map<Id, UINode>;
   metadata: Map<MetadataId, Metadata>;
+  showExtra: (element: ReactNode) => void;
 };
 
-export const Inspector: React.FC<Props> = ({nodes, metadata}) => {
+export const Inspector: React.FC<Props> = ({nodes, metadata, showExtra}) => {
   const instance = usePlugin(plugin);
   const selectedNodeId = useValue(instance.uiState.selectedNode);
   const frameworkEvents = useValue(instance.frameworkEvents);
@@ -43,7 +35,7 @@ export const Inspector: React.FC<Props> = ({nodes, metadata}) => {
     return <NoData message="Please select a node to view its details" />;
   }
 
-  const events = selectedNodeId
+  const selectedFrameworkEvents = selectedNodeId
     ? frameworkEvents?.get(selectedNodeId)
     : undefined;
 
@@ -96,7 +88,7 @@ export const Inspector: React.FC<Props> = ({nodes, metadata}) => {
             metadata={metadata}
           />
         </Tab>
-        {events && (
+        {selectedFrameworkEvents && (
           <Tab
             key={'events'}
             tab={
@@ -110,19 +102,10 @@ export const Inspector: React.FC<Props> = ({nodes, metadata}) => {
                 </Layout.Horizontal>
               </Tooltip>
             }>
-            <TimelineDataDescription
-              timeline={{
-                time: events.map((e) => {
-                  return {
-                    moment: e.timestamp,
-                    display: e.type.slice(e.type.lastIndexOf(':') + 1),
-                    color: theme.primaryColor,
-                    key: e.timestamp.toString(),
-                    properties: e.payload as any,
-                  };
-                }),
-                current: '',
-              }}
+            <FrameworkEventsInspector
+              node={selectedNode}
+              events={selectedFrameworkEvents}
+              showExtra={showExtra}
             />
           </Tab>
         )}