From 8cd2bb97bfb7956a1dab74a56a7f3c4ec34a6055 Mon Sep 17 00:00:00 2001
From: Lorenzo Blasa <lblasa@meta.com>
Date: Thu, 20 Apr 2023 09:11:55 -0700
Subject: [PATCH] Add payload size to performance stats event

Summary: Payload size is useful to understand how much data is going down the wire for frame updates.

Reviewed By: LukeDefeo

Differential Revision: D45114582

fbshipit-source-id: d0c2a01deb84a67017db88bd396b4859e08d0037
---
 .../public/ui-debugger/components/PerfStats.tsx    | 14 ++++++++++++++
 desktop/plugins/public/ui-debugger/types.tsx       |  1 +
 2 files changed, 15 insertions(+)

diff --git a/desktop/plugins/public/ui-debugger/components/PerfStats.tsx b/desktop/plugins/public/ui-debugger/components/PerfStats.tsx
index 4d06a912a..41ebd80bf 100644
--- a/desktop/plugins/public/ui-debugger/components/PerfStats.tsx
+++ b/desktop/plugins/public/ui-debugger/components/PerfStats.tsx
@@ -26,6 +26,10 @@ function formatDiff(ms: number): string {
   return `${ms.toFixed(0)}ms`;
 }
 
+function formatSize(bytes: number): string {
+  return `${(bytes / 1000).toFixed()}`;
+}
+
 const columns: DataTableColumn<PerformanceStatsEvent>[] = [
   {
     key: 'txId',
@@ -91,4 +95,14 @@ const columns: DataTableColumn<PerformanceStatsEvent>[] = [
       return formatDiff(row.socketMS);
     },
   },
+  {
+    key: 'payloadSize',
+    title: 'Payload Size (KB)',
+    onRender: (row: PerformanceStatsEvent) => {
+      if (!row.payloadSize) {
+        return 'NaN';
+      }
+      return formatSize(row.payloadSize);
+    },
+  },
 ];
diff --git a/desktop/plugins/public/ui-debugger/types.tsx b/desktop/plugins/public/ui-debugger/types.tsx
index 8948e02eb..89d504ac6 100644
--- a/desktop/plugins/public/ui-debugger/types.tsx
+++ b/desktop/plugins/public/ui-debugger/types.tsx
@@ -85,6 +85,7 @@ export type PerformanceStatsEvent = {
   deferredComputationMS: number;
   serializationMS: number;
   socketMS: number;
+  payloadSize?: number;
 };
 
 export type UpdateMetadataEvent = {