From 614f48dda31f20f0246d66ebb1f31a365ca72396 Mon Sep 17 00:00:00 2001
From: Jiyue Wang <jiyue@fb.com>
Date: Wed, 17 Apr 2019 10:05:17 -0700
Subject: [PATCH] Show server execution time in network plugin

Summary: the simpliest approach to render this metadata for debugging purpose

Reviewed By: bcuccioli

Differential Revision: D14974129

fbshipit-source-id: d816d1ef8dcd1bc333c4d0cdf70d6d9fb925bc03
---
 src/plugins/network/RequestDetails.js | 55 +++++++++++++++++++++------
 1 file changed, 44 insertions(+), 11 deletions(-)

diff --git a/src/plugins/network/RequestDetails.js b/src/plugins/network/RequestDetails.js
index bb6caa46f..78bdaa6b1 100644
--- a/src/plugins/network/RequestDetails.js
+++ b/src/plugins/network/RequestDetails.js
@@ -643,6 +643,30 @@ class GraphQLBatchFormatter {
 }
 
 class GraphQLFormatter {
+  parsedServerTimeForFirstFlush = (data: any) => {
+    const firstResponse =
+      Array.isArray(data) && data.length > 0 ? data[0] : data;
+    if (!firstResponse) {
+      return null;
+    }
+
+    const extensions = firstResponse['extensions'];
+    if (!extensions) {
+      return null;
+    }
+    const serverMetadata = extensions['server_metadata'];
+    if (!serverMetadata) {
+      return null;
+    }
+    const requestStartMs = serverMetadata['request_start_time_ms'];
+    const timeAtFlushMs = serverMetadata['time_at_flush_ms'];
+    return (
+      <WrappingText>
+        {'Server wall time for initial response (ms): ' +
+          (timeAtFlushMs - requestStartMs)}
+      </WrappingText>
+    );
+  };
   formatRequest = (request: Request) => {
     if (request.url.indexOf('graphql') > 0) {
       const data = querystring.parse(decodeBody(request));
@@ -674,21 +698,30 @@ class GraphQLFormatter {
       try {
         const data = JSON.parse(body);
         return (
-          <ManagedDataInspector
-            collapsed={true}
-            expandRoot={true}
-            data={data}
-          />
+          <div>
+            {this.parsedServerTimeForFirstFlush(data)}
+            <ManagedDataInspector
+              collapsed={true}
+              expandRoot={true}
+              data={data}
+            />
+          </div>
         );
       } catch (SyntaxError) {
         // Multiple top level JSON roots, map them one by one
-        const roots = body.replace(/}{/g, '}\r\n{').split('\n');
+        const parsedResponses = body
+          .replace(/}{/g, '}\r\n{')
+          .split('\n')
+          .map(json => JSON.parse(json));
         return (
-          <ManagedDataInspector
-            collapsed={true}
-            expandRoot={true}
-            data={roots.map(json => JSON.parse(json))}
-          />
+          <div>
+            {this.parsedServerTimeForFirstFlush(parsedResponses)}
+            <ManagedDataInspector
+              collapsed={true}
+              expandRoot={true}
+              data={parsedResponses}
+            />
+          </div>
         );
       }
     }