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: (
+ {formatTimestamp(request.timestamp)}
+ ),
+ },
+ responseTimestamp: {
+ value: (
+
+ {response && formatTimestamp(response.timestamp)}
+
+ ),
+ },
domain: {
value: (
{friendlyName ? friendlyName : domain}
@@ -358,6 +402,7 @@ class NetworkTable extends PureComponent {
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"