Add timestamp columns to network inspector

Summary: Adds requestTimestamp, and responseTimestamp which is hidden by default.

Reviewed By: passy

Differential Revision: D14088403

fbshipit-source-id: c451a428d8068c5bfce199cda5502361c12d1667

src/plugins/network/index.js

@@ -6,6 +6,7 @@
  */
 
 import type {TableHighlightedRows, TableRows, TableBodyRow} from 'flipper';
+import {padStart} from 'lodash';
 
 import {
   ContextMenu,
@@ -59,6 +60,8 @@ export type Header = {|
 |};
 
 const COLUMN_SIZE = {
+  requestTimestamp: 100,
+  responseTimestamp: 100,
   domain: 'flex',
   method: 100,
   status: 70,
@@ -66,7 +69,23 @@ const COLUMN_SIZE = {
   duration: 100,
 };
 
+const COLUMN_ORDER = [
+  {key: 'requestTimestamp', visible: true},
+  {key: 'responseTimestamp', visible: false},
+  {key: 'domain', visible: true},
+  {key: 'method', visible: true},
+  {key: 'status', visible: true},
+  {key: 'size', visible: true},
+  {key: 'duration', visible: true},
+];
+
 const COLUMNS = {
+  requestTimestamp: {
+    value: 'Request Time',
+  },
+  responseTimestamp: {
+    value: 'Response Time',
+  },
   domain: {
     value: 'Domain',
   },
@@ -224,6 +243,19 @@ type NetworkTableState = {|
   sortedRows: TableRows,
 |};
 
+function formatTimestamp(timestamp: number): string {
+  const date = new Date(timestamp);
+  return `${padStart(date.getHours().toString(), 2, '0')}:${padStart(
+    date.getMinutes().toString(),
+    2,
+    '0',
+  )}:${padStart(date.getSeconds().toString(), 2, '0')}.${padStart(
+    date.getMilliseconds().toString(),
+    3,
+    '0',
+  )}`;
+}
+
 function buildRow(request: Request, response: ?Response): ?TableBodyRow {
   if (request == null) {
     return;
@@ -234,6 +266,18 @@ function buildRow(request: Request, response: ?Response): ?TableBodyRow {
 
   return {
     columns: {
+      requestTimestamp: {
+        value: (
+          <TextEllipsis>{formatTimestamp(request.timestamp)}</TextEllipsis>
+        ),
+      },
+      responseTimestamp: {
+        value: (
+          <TextEllipsis>
+            {response && formatTimestamp(response.timestamp)}
+          </TextEllipsis>
+        ),
+      },
       domain: {
         value: (
           <TextEllipsis>{friendlyName ? friendlyName : domain}</TextEllipsis>
@@ -358,6 +402,7 @@ class NetworkTable extends PureComponent<NetworkTableProps, NetworkTableState> {
           floating={false}
           columnSizes={COLUMN_SIZE}
           columns={COLUMNS}
+          columnOrder={COLUMN_ORDER}
           rows={this.state.sortedRows}
           onRowHighlighted={this.props.onRowHighlighted}
           highlightedRows={this.props.highlightedRows}

src/plugins/network/package.json

@@ -5,7 +5,8 @@
   "license": "MIT",
   "dependencies": {
     "pako": "^1.0.6",
-    "xml-beautifier": "^0.4.0"
+    "xml-beautifier": "^0.4.0",
+    "lodash": "^4.17.11"
   },
   "icon": "internet",
   "bugs": {

src/plugins/network/yarn.lock

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+lodash@^4.17.11:
+  version "4.17.11"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
+  integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
+
 pako@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"