Improve table view

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

desktop/plugins/public/ui-debugger/utils/map.tsx

@@ -9,7 +9,10 @@
 
 import {ClientNode, Id} from '../ClientTypes';
 
-export function getNode(id: Id | undefined, nodes: Map<Id, ClientNode>) {
+export function getNode(
+  id: Id | undefined,
+  nodes: Map<Id, ClientNode>,
+): ClientNode | undefined {
   //map just returns undefined when you pass null or undefined as a key
   return nodes.get(id!);
 }

desktop/plugins/public/ui-debugger/utils/timeUtils.tsx

@@ -0,0 +1,33 @@
+/**
+ * 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 {options} from '../components/sidebar/inspector/FrameworkEventsInspector';
+
+export function formatTimestampMillis(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')}`;
+}
+
+export 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`;
+  }
+}