Merge pull request #255 from kassens/relative-time

[relay] Switch timing information to relative times

Author: kassens

plugins/Relay/Query.js

@@ -35,6 +35,9 @@ class Query extends React.Component {
       backgroundColor: statusColors[status] || statusColors.error,
     };
 
+    const start = data.get('start');
+    const end = data.get('end');
+
     return (
       <tr onClick={this.props.onSelect} style={containerStyle}>
         <td style={styles.tdFirst}>
@@ -44,10 +47,10 @@ class Query extends React.Component {
           {data.get('name')}
         </td>
         <td style={styles.td}>
-          {new Date(data.get('start')).toLocaleTimeString()}
+          {Math.round(start) / 1000}s
         </td>
         <td style={styles.td}>
-          {data.get('end') - data.get('start')}ms
+          {Math.round(end - start)}ms
         </td>
       </tr>
     );

plugins/Relay/QueryViewer.js

@@ -54,11 +54,14 @@ class QueryViewer {
         </DetailPaneSection>;
     }
 
+    const start = data.get('start');
+    const end = data.get('end');
+
     return (
       <DetailPane header={data.get('type') + ': ' + data.get('name')}>
         <DetailPaneSection title="Start">
           <div>
-            {new Date(data.get('start')).toLocaleTimeString()}
+            {Math.round(start) / 1000}s since page load
           </div>
         </DetailPaneSection>
         <DetailPaneSection title="Status">
@@ -68,7 +71,7 @@ class QueryViewer {
         </DetailPaneSection>
         <DetailPaneSection title="Duration">
           <div>
-            {data.get('end') - data.get('start')}ms
+            {Math.round(end - start)}ms
           </div>
         </DetailPaneSection>
         <DetailPaneSection title="Query">

plugins/Relay/installRelayHook.js

@@ -62,22 +62,22 @@ function installRelayHook(window: Object) {
       response => {
         emit('relay:success', {
           id: id,
-          end: Date.now(),
+          end: performance.now(),
           response: response.response,
         });
       },
       error => {
         emit('relay:failure', {
           id: id,
-          end: Date.now(),
+          end: performance.now(),
           error: error,
         });
       },
     );
     return {
       id: id,
       name: request.getDebugName(),
-      start: Date.now(),
+      start: performance.now(),
       text: request.getQueryString(),
       type: type,
       variables: request.getVariables(),