94114eb821
Summary: Added new tree id to the framework event. Its currently optional. The tree id is the parent component tree / tree manager this tree belongs to, this is so we can view all tree events at once in the table. We ony show the context menu item when we have the tree root tag which is set for component tree only at this point. We can add for blok and ios later Reviewed By: lblasa Differential Revision: D48268120 fbshipit-source-id: 3dee06309b146a0392ca32fbb5e8231883b8439a
75 lines
1.7 KiB
TypeScript
75 lines
1.7 KiB
TypeScript
/**
|
|
* 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 {PartitionOutlined} from '@ant-design/icons';
|
|
import {
|
|
DataTable,
|
|
DataTableColumn,
|
|
DataTableManager,
|
|
Layout,
|
|
usePlugin,
|
|
} from 'flipper-plugin';
|
|
import React, {useEffect, useRef} from 'react';
|
|
import {FrameworkEvent, Id} from '../ClientTypes';
|
|
import {plugin} from '../index';
|
|
import {Button, Tooltip} from 'antd';
|
|
|
|
export function FrameworkEventsTable({treeId}: {treeId?: Id}) {
|
|
const instance = usePlugin(plugin);
|
|
|
|
const managerRef = useRef<DataTableManager<FrameworkEvent> | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (treeId != null) {
|
|
managerRef.current?.resetFilters();
|
|
managerRef.current?.addColumnFilter('treeId', treeId as string);
|
|
}
|
|
}, [treeId]);
|
|
|
|
return (
|
|
<Layout.Container grow>
|
|
<DataTable<FrameworkEvent>
|
|
dataSource={instance.frameworkEvents}
|
|
tableManagerRef={managerRef}
|
|
columns={columns}
|
|
extraActions={
|
|
<Tooltip title="Back to tree">
|
|
<Button
|
|
onClick={() => {
|
|
instance.uiActions.onSetViewMode({mode: 'default'});
|
|
}}
|
|
icon={<PartitionOutlined />}></Button>
|
|
</Tooltip>
|
|
}
|
|
/>
|
|
</Layout.Container>
|
|
);
|
|
}
|
|
|
|
const columns: DataTableColumn<FrameworkEvent>[] = [
|
|
{
|
|
key: 'timestamp',
|
|
onRender: (row: FrameworkEvent) => {
|
|
return new Date(row.timestamp).toLocaleTimeString();
|
|
},
|
|
},
|
|
{
|
|
key: 'treeId',
|
|
},
|
|
{
|
|
key: 'nodeId',
|
|
},
|
|
{
|
|
key: 'type',
|
|
},
|
|
{
|
|
key: 'thread',
|
|
},
|
|
];
|