Implemented insights tab in sidebar of networking plugin

Summary:
https://pxl.cl/Cd84

In React VR we got a case to explain developers why their requests took so long. To do this we export timings from Curl and send them in Flipper. This diff added visualization for this data. Any other platforms can use this feature by extending json which they send to Flipper.

Reviewed By: jknoxville

Differential Revision: D15804247

fbshipit-source-id: 9deea5c9f5f7c5416b42c476f7f0ed431c8dea04

src/plugins/network/RequestDetails.js

@@ -5,7 +5,7 @@
  * @format
  */
 
-import type {Request, Response, Header} from './types.js';
+import type {Request, Response, Header, Insights} from './types.js';
 
 import {
   Component,
@@ -19,6 +19,7 @@ import {
   colors,
 } from 'flipper';
 import {decodeBody, getHeaderValue} from './utils.js';
+import {formatBytes} from './index.js';
 
 import querystring from 'querystring';
 // $FlowFixMe
@@ -198,6 +199,11 @@ export default class RequestDetails extends Component<
             options={RequestDetails.BodyOptions}
           />
         </Panel>
+        {response && response.insights ? (
+          <Panel heading={'Insights'} floating={false} collapsed={true}>
+            <InsightsInspector insights={response.insights} />
+          </Panel>
+        ) : null}
       </RequestDetails.Container>
     );
   }
@@ -715,3 +721,60 @@ const BodyFormatters: Array<BodyFormatter> = [
 ];
 
 const TextBodyFormatters: Array<BodyFormatter> = [new JSONTextFormatter()];
+
+class InsightsInspector extends Component<{insights: Insights}> {
+  formatTime(value: number): string {
+    return `${value} ms`;
+  }
+
+  formatSpeed(value: number): string {
+    return `${formatBytes(value)}/sec`;
+  }
+
+  buildRow<T>(name: string, value: ?T, formatter: T => string): any {
+    return value
+      ? {
+          columns: {
+            key: {
+              value: <WrappingText>{name}</WrappingText>,
+            },
+            value: {
+              value: <WrappingText>{formatter(value)}</WrappingText>,
+            },
+          },
+          copyText: `${name}: ${formatter(value)}`,
+          key: name,
+        }
+      : null;
+  }
+
+  render() {
+    const insights = this.props.insights;
+    const {buildRow, formatTime, formatSpeed} = this;
+
+    const rows = [
+      buildRow('DNS lookup time', insights.dnsLookupTime, formatTime),
+      buildRow('Connect time', insights.connectTime, formatTime),
+      buildRow('SSL handshake time', insights.sslHandshakeTime, formatTime),
+      buildRow('Pretransfer time', insights.preTransferTime, formatTime),
+      buildRow('Redirect time', insights.redirectsTime, formatTime),
+      buildRow('First byte wait time', insights.timeToFirstByte, formatTime),
+      buildRow('Data transfer time', insights.transferTime, formatTime),
+      buildRow('Post processing time', insights.postProcessingTime, formatTime),
+      buildRow('Bytes transfered', insights.bytesTransfered, formatBytes),
+      buildRow('Transfer speed', insights.transferSpeed, formatSpeed),
+    ].filter(r => r != null);
+
+    return rows.length > 0 ? (
+      <ManagedTable
+        multiline={true}
+        columnSizes={KeyValueColumnSizes}
+        columns={KeyValueColumns}
+        rows={rows}
+        autoHeight={true}
+        floating={false}
+        zebra={false}
+      />
+    ) : null;
+  }
+}

src/plugins/network/types.js

@@ -23,9 +23,24 @@ export type Response = {|
   reason: string,
   headers: Array<Header>,
   data: ?string,
+  insights: ?Insights,
 |};
 
 export type Header = {|
   key: string,
   value: string,
 |};
+
+export type Insights = {|
+  dnsLookupTime: ?number,
+  connectTime: ?number,
+  sslHandshakeTime: ?number,
+  preTransferTime: ?number,
+  redirectsTime: ?number,
+  timeToFirstByte: ?number,
+  transferTime: ?number,
+  postProcessingTime: ?number,
+  // Amount of transferred data can be different from total size of payload.
+  bytesTransfered: ?number,
+  transferSpeed: ?number,
+|};