Merge pull request #283 from kassens/group-relay-requests

[relay] Group queries by request

Author: kassens

plugins/Relay/QueryList.js

@@ -27,15 +27,34 @@ class QueryList extends React.Component {
     if (!this.props.queries.count()) {
       return <div style={styles.empty}>No Relay Queries logged</div>;
     }
-    var rows = this.props.queries.valueSeq().map((q, i) => (
-      <Query
-        data={q}
-        isSelected={q.get('id') === this.props.selectedQuery}
-        key={q.get('id')}
-        oddRow={(i % 2) === 1}
-        onSelect={() => this.props.selectQuery(q.get('id'))}
-      />
-    )).toArray();
+
+    const rows = [];
+    let odd = false;
+    let lastRequestNumber = -1;
+    this.props.queries.forEach(query => {
+      const requestNumber = query.get('requestNumber');
+      if (lastRequestNumber !== requestNumber) {
+        lastRequestNumber = requestNumber;
+        rows.push(
+          <tr key={'request' + requestNumber}>
+            <td colSpan="4" style={styles.grouper}>
+              Request {requestNumber}
+            </td>
+          </tr>
+        );
+        odd = false;
+      }
+      rows.push(
+        <Query
+          data={query}
+          isSelected={query.get('id') === this.props.selectedQuery}
+          key={query.get('id')}
+          oddRow={odd}
+          onSelect={() => this.props.selectQuery(query.get('id'))}
+        />
+      );
+      odd = !odd;
+    });
 
     return (
       <div style={styles.container}>
@@ -62,6 +81,11 @@ var styles = {
     width: '100%',
   },
 
+  grouper: {
+    fontWeight: 'bold',
+    fontSize: 10,
+  },
+
   empty: {
     flex: 1,
     padding: 50,

plugins/Relay/installRelayHook.js

@@ -58,7 +58,12 @@ function installRelayHook(window: Object) {
     };
   }
 
-  function recordRequest(type: 'mutation' | 'query', request) {
+  function recordRequest(
+    type: 'mutation' | 'query',
+    start: number,
+    request,
+    requestNumber: number,
+  ) {
     var id = Math.random().toString(16).substr(2);
     request.then(
       response => {
@@ -85,22 +90,34 @@ function installRelayHook(window: Object) {
     return {
       id: id,
       name: request.getDebugName(),
-      start: performance.now(),
+      requestNumber: requestNumber,
+      start: start,
       text: textChunks,
       type: type,
       variables: request.getVariables(),
     };
   }
 
+  let requestNumber = 0;
+
   function instrumentRelayRequests(relayInternals: Object) {
     var NetworkLayer = relayInternals.NetworkLayer;
 
     decorate(NetworkLayer, 'sendMutation', mutation => {
-      emit('relay:pending', [recordRequest('mutation', mutation)]);
+      requestNumber++;
+      emit(
+        'relay:pending',
+        [recordRequest('mutation', performance.now(), mutation, requestNumber)]
+      );
     });
 
     decorate(NetworkLayer, 'sendQueries', queries => {
-      emit('relay:pending', queries.map(query => recordRequest('query', query)));
+      requestNumber++;
+      const start = performance.now();
+      emit(
+        'relay:pending',
+        queries.map(query => recordRequest('query', start, query, requestNumber))
+      );
     });
 
     var instrumented = {};