jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add button to get to table mode from node level stream

Browse Source 
Reviewed By: lblasa

Differential Revision: D48348325

fbshipit-source-id: f54815226dc230aa2d3c2bafdae8edfa829bf3fe
This commit is contained in:
Luke De Feo
2023-08-21 04:24:16 -07:00
committed by Facebook GitHub Bot
parent 4918d21df8
commit 756a289883
2 changed files with 17 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -123,6 +123,7 @@ export const Inspector: React.FC<Props> = ({
</Tooltip> </Tooltip>
}> }>
<FrameworkEventsInspector <FrameworkEventsInspector
onSetViewMode={instance.uiActions.onSetViewMode}
frameworkEventMetadata={frameworkEventMetadata} frameworkEventMetadata={frameworkEventMetadata}
node={selectedNode} node={selectedNode}
events={selectedFrameworkEvents} events={selectedFrameworkEvents}

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

@@ -22,25 +22,29 @@ import {
} from '../../../ClientTypes'; } from '../../../ClientTypes';
import React, {ReactNode, useState} from 'react'; import React, {ReactNode, useState} from 'react';
import {StackTraceInspector} from './StackTraceInspector'; 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 {frameworkEventSeparator} from '../../shared/FrameworkEventsTreeSelect';
import { import {
buildTreeSelectData, buildTreeSelectData,
FrameworkEventsTreeSelect, FrameworkEventsTreeSelect,
} from '../../shared/FrameworkEventsTreeSelect'; } from '../../shared/FrameworkEventsTreeSelect';
import {uniqBy} from 'lodash'; import {uniqBy} from 'lodash';
import {TableOutlined} from '@ant-design/icons';
import {ViewMode} from '../../../DesktopTypes';
type Props = { type Props = {
node: ClientNode; node: ClientNode;
events: readonly FrameworkEvent[]; events: readonly FrameworkEvent[];
showExtra?: (title: string, element: ReactNode) => void; showExtra?: (title: string, element: ReactNode) => void;
frameworkEventMetadata: Map<FrameworkEventType, FrameworkEventMetadata>; frameworkEventMetadata: Map<FrameworkEventType, FrameworkEventMetadata>;
onSetViewMode: (viewMode: ViewMode) => void;
}; };
export const FrameworkEventsInspector: React.FC<Props> = ({ export const FrameworkEventsInspector: React.FC<Props> = ({
node, node,
events, events,
showExtra, showExtra,
frameworkEventMetadata, frameworkEventMetadata,
onSetViewMode,
}) => { }) => {
const allThreads = uniqBy(events, 'thread').map((event) => event.thread); const allThreads = uniqBy(events, 'thread').map((event) => event.thread);
const [filteredThreads, setFilteredThreads] = useState<Set<string>>( const [filteredThreads, setFilteredThreads] = useState<Set<string>>(
@@ -64,6 +68,17 @@ export const FrameworkEventsInspector: React.FC<Props> = ({
return ( return (
<Layout.Container gap="small" padv="small"> <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>
<Collapse.Panel header="Filter events" key="1"> <Collapse.Panel header="Filter events" key="1">
<Layout.Container gap="tiny"> <Layout.Container gap="tiny">