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>
         )}

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

@@ -0,0 +1,76 @@
+/**
+ * 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 {Button} from 'antd';
+import {theme, TimelineDataDescription} from 'flipper-plugin';
+import {FrameworkEvent, UINode} from '../../../types';
+import React, {ReactNode, useState} from 'react';
+import {StackTraceInspector} from './StackTraceInspector';
+
+type Props = {
+  node: UINode;
+  events: FrameworkEvent[];
+  showExtra?: (element: ReactNode) => void;
+};
+export const FrameworkEventsInspector: React.FC<Props> = ({
+  node,
+  events,
+  showExtra,
+}) => {
+  const [selectedEvent, setSelectedEvent] = useState<FrameworkEvent>(
+    events[events.length - 1],
+  );
+
+  const showStacktrace = () => {
+    const attribution = selectedEvent.attribution;
+    if (attribution?.type === 'stacktrace') {
+      const stacktraceInspector = (
+        <StackTraceInspector
+          stacktrace={attribution.stacktrace}
+          tags={node.tags}
+        />
+      );
+      showExtra?.(stacktraceInspector);
+    }
+  };
+
+  const hasStacktrace = (event: FrameworkEvent) => {
+    return event.attribution?.type === 'stacktrace';
+  };
+
+  return (
+    <>
+      <TimelineDataDescription
+        key={node.id}
+        canSetCurrent={false}
+        onClick={(current) => {
+          const idx = parseInt(current, 10);
+          setSelectedEvent(events[idx]);
+        }}
+        timeline={{
+          time: events.map((e, idx) => {
+            return {
+              moment: e.timestamp,
+              display: e.type.slice(e.type.lastIndexOf(':') + 1),
+              color: theme.primaryColor,
+              key: idx.toString(),
+              properties: e.payload as any,
+            };
+          }),
+          current: (events.length - 1).toString(),
+        }}
+      />
+      {hasStacktrace(selectedEvent) && (
+        <Button type="ghost" onClick={showStacktrace}>
+          Stacktrace
+        </Button>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,47 @@
+/**
+ * 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 React from 'react';
+// eslint-disable-next-line rulesdir/no-restricted-imports-clone
+import {StackTrace} from 'flipper';
+import {Tag} from '../../../types';
+
+const FacebookLibraries = ['Facebook'];
+const CKFilter = ['UIDCKAnalyticsListener'];
+
+const REGEX =
+  /\d+\s+(?<library>[\s\w\.]+\w)\s+(?<address>0x\w+?)\s+(?<caller>.+) \+ (?<lineNumber>\d+)/;
+
+function isSystemLibrary(libraryName: string | null | undefined): boolean {
+  return libraryName ? !FacebookLibraries.includes(libraryName) : false;
+}
+
+type Props = {
+  stacktrace: string[];
+  tags: Tag[];
+};
+export const StackTraceInspector: React.FC<Props> = ({stacktrace, tags}) => {
+  const filters = tags.includes('CK') ? CKFilter : [];
+  return (
+    <StackTrace>
+      {stacktrace
+        ?.filter((line) => filters.every((filter) => !line.includes(filter)))
+        .map((line) => {
+          const trace = REGEX.exec(line)?.groups;
+          return {
+            bold: !isSystemLibrary(trace?.library),
+            library: trace?.library,
+            address: trace?.address,
+            caller: trace?.caller,
+            lineNumber: trace?.lineNumber,
+          };
+        }) ?? [{caller: 'No stacktrace available'}]}
+    </StackTrace>
+  );
+};