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

Improve table view

Browse Source 
Summary:
added component name, root component name, duration, event type and better names

changelog: UIDebugger - added event debugger table view and side panel views

Reviewed By: lblasa

Differential Revision: D48559367

fbshipit-source-id: d357ecf654b4e443eac7673731a8be542e76dd48
This commit is contained in:
Luke De Feo
2023-08-23 01:51:31 -07:00
committed by Facebook GitHub Bot
parent 5f9000aa82
commit 206ef79cf9
8 changed files with 112 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -36,6 +36,7 @@ import {last, startCase, uniqBy} from 'lodash';
import {FilterOutlined, TableOutlined} from '@ant-design/icons';
import {ViewMode} from '../../../DesktopTypes';
import {MultiSelectableDropDownItem} from '../../shared/MultiSelectableDropDownItem';
import {formatDuration, formatTimestampMillis} from '../../../utils/timeUtils';
type Props = {
node: ClientNode;
@@ -233,7 +234,7 @@ function EventDetails({
<Tag color={threadToColor(event.thread)}>{event.thread}</Tag>
</Descriptions.Item>
<Descriptions.Item label="Timestamp">
{formatTimestamp(event.timestamp)}
{formatTimestampMillis(event.timestamp)}
</Descriptions.Item>
{event.duration && (
<Descriptions.Item label="Duration">
@@ -257,35 +258,14 @@ function EventDetails({
);
}
const options: Intl.DateTimeFormatOptions = {
export const options: Intl.DateTimeFormatOptions = {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
hour12: false,
};
function formatTimestamp(timestamp: number): string {
const date = new Date(timestamp);
const formattedDate = new Intl.DateTimeFormat('en-US', options).format(date);
const milliseconds = date.getMilliseconds();
return `${formattedDate}.${milliseconds.toString().padStart(3, '0')}`;
}
function formatDuration(nanoseconds: number): string {
if (nanoseconds < 1_000) {
return `${nanoseconds} nanoseconds`;
} else if (nanoseconds < 1_000_000) {
return `${(nanoseconds / 1_000).toFixed(2)} microseconds`;
} else if (nanoseconds < 1_000_000_000) {
return `${(nanoseconds / 1_000_000).toFixed(2)} milliseconds`;
} else if (nanoseconds < 1_000_000_000_000) {
return `${(nanoseconds / 1_000_000_000).toFixed(2)} seconds`;
} else {
return `${(nanoseconds / (1_000_000_000 * 60)).toFixed(2)} minutes`;
}
}
function eventTypeToName(eventType: string) {
export function eventTypeToName(eventType: string) {
return eventType.slice(eventType.lastIndexOf(frameworkEventSeparator) + 1);
}