Add outgoing payload size to flipper network plugin

Summary:
Flipper network plugin does not show request payload size at all, only the response.

I was trying to use flipper to check the compression ratio and overall analytics log size, but wasn't able to it, so fixed the network plugin

Reviewed By: lblasa

Differential Revision: D34062808

fbshipit-source-id: f4d4395eece9d41380b8ac6f834a014315c5db66

desktop/plugins/public/network/index.tsx

@@ -49,6 +49,7 @@ import {
   convertRequestToCurlCommand,
   getHeaderValue,
   getResponseLength,
+  getRequestLength,
   formatStatus,
   formatBytes,
   formatDuration,
@@ -553,6 +554,7 @@ function updateRequestWithResponseInfo(
     responseData: decodeBody(response.headers, response.data),
     responseIsMock: response.isMock,
     responseLength: getResponseLength(response),
+    requestLength: getRequestLength(request),
     duration: response.timestamp - request.requestTime.getTime(),
     insights: response.insights ?? undefined,
   };
@@ -675,9 +677,16 @@ const baseColumns: DataTableColumn<Request>[] = [
     formatters: formatStatus,
     align: 'right',
   },
+  {
+    key: 'requestLength',
+    title: 'Request Size',
+    width: 100,
+    formatters: formatBytes,
+    align: 'right',
+  },
   {
     key: 'responseLength',
-    title: 'Size',
+    title: 'Response Size',
     width: 100,
     formatters: formatBytes,
     align: 'right',

desktop/plugins/public/network/types.tsx

@@ -28,6 +28,7 @@ export interface Request {
   responseHeaders?: Array<Header>;
   responseData?: string | Uint8Array | undefined;
   responseLength?: number;
+  requestLength?: number;
   responseIsMock?: boolean;
   duration?: number;
   insights?: Insights;

desktop/plugins/public/network/utils.tsx

@@ -197,14 +197,26 @@ function escapedString(str: string) {
   return "'" + str + "'";
 }
 
-export function getResponseLength(request: ResponseInfo): number {
-  const lengthString = request.headers
-    ? getHeaderValue(request.headers, 'content-length')
+export function getResponseLength(response: ResponseInfo): number {
+  const lengthString = response.headers
+    ? getHeaderValue(response.headers, 'content-length')
     : undefined;
   if (lengthString) {
     return parseInt(lengthString, 10);
-  } else if (request.data) {
-    return Buffer.byteLength(request.data, 'base64');
+  } else if (response.data) {
+    return Buffer.byteLength(response.data, 'base64');
+  }
+  return 0;
+}
+
+export function getRequestLength(request: Request): number {
+  const lengthString = request.requestHeaders
+    ? getHeaderValue(request.requestHeaders, 'content-length')
+    : undefined;
+  if (lengthString) {
+    return parseInt(lengthString, 10);
+  } else if (request.requestData) {
+    return Buffer.byteLength(request.requestData, 'base64');
   }
   return 0;
 }