From d5dc3f9c2a9baf29727f6e426f4fcc449313ead5 Mon Sep 17 00:00:00 2001
From: John Knox <jknox@fb.com>
Date: Fri, 15 Feb 2019 04:54:39 -0800
Subject: [PATCH] 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     | 45 ++++++++++++++++++++++++++++++++
 src/plugins/network/package.json |  3 ++-
 src/plugins/network/yarn.lock    |  5 ++++
 3 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/src/plugins/network/index.js b/src/plugins/network/index.js
index 17d89d231..6e1622281 100644
--- a/src/plugins/network/index.js
+++ b/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}
diff --git a/src/plugins/network/package.json b/src/plugins/network/package.json
index 41c6201a4..da2ec3eb8 100644
--- a/src/plugins/network/package.json
+++ b/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": {
diff --git a/src/plugins/network/yarn.lock b/src/plugins/network/yarn.lock
index c5c195e24..2d7639d99 100644
--- a/src/plugins/network/yarn.lock
+++ b/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"