Merge pull request #56 from oslabs-beta/graph

Graph Roundtrip Updates
Timing is still not correct, but we will continue to improve it.

Author: danst3in

src/client/components/containers/ReqResContainer.jsx

@@ -23,7 +23,7 @@ class ReqResContainer extends Component {
   }
 
   render() {
-    
+    console.log(this.props.reqResArray)
     const reqResArr = this.props.reqResArray
       .map((reqRes, index) => {
         return <SingleReqResContainer

src/client/components/display/Graph.jsx

@@ -196,6 +196,20 @@ class Graph extends Component {
 
         // populate events
         switch (reqRes.connectionType) {
+          case 'GRPC': {
+            reqRes.response.times.forEach(message => {
+              if (message.timeSent && message.timeReceived) {
+
+                newEventCounter += 1;
+                dataSet.data.push({
+                  x: message.timeReceived - message.timeSent,
+                  y: index,
+                });
+              }
+            });
+
+            break;
+          }
           case 'SSE': {
             reqRes.response.events.forEach((event) => {
               if (Date.now() - event.timeReceived < this.state.timeFromNowToDisplay) {

src/client/components/display/ResponseEventsDisplay.jsx

@@ -8,7 +8,6 @@ import createDOMPurify from 'dompurify';
 const ResponseEventsDisplay = ({ response }) => {
   const { events, headers } = response;
   const displayContents = [];
-  // console.log('what is events' , events)
 
   // If it's an SSE, render event rows
 

src/client/controllers/grpcController.js

@@ -19,11 +19,9 @@ let grpcController = {};
 
 grpcController.openGrpcConnection = (reqResObj, connectionArray) => {
     //check for connection, if not open one
-    console.log(reqResObj)
-  if (false) {
-      //use existing connection
-  }
-  else {
+
+    reqResObj.connectionType = 'GRPC';
+    reqResObj.response.times = [];
 
     // build out variables from reqresObj properties
     let service = reqResObj.service;
@@ -72,13 +70,10 @@ grpcController.openGrpcConnection = (reqResObj, connectionArray) => {
       let keysArray;
       for (let messageIdx in foundService.messages) {
         let message = foundService.messages[messageIdx];
-        // console.log('message' , message)
 
         if (foundRpc.req === message.name || foundRpc.req === 'stream ' +message.name) {
-          // console.log('found matching message name')
           messageDefObj = message.def;
           keysArray = [];
-          // console.log('messagedef', message.def);
           Object.keys(messageDefObj).forEach((key)=>{
              keysArray.push(key)
            })
@@ -104,36 +99,39 @@ grpcController.openGrpcConnection = (reqResObj, connectionArray) => {
       // create client requested metadata key and value pair for each type of streaming
       let meta = new grpc.Metadata()
       let metaArr = reqResObj.request.headers;
-      // console.log("metaArr from grpcController line 100:", metaArr)
       for (let i = 0; i < metaArr.length; i+=1) {
         let currentHeader = metaArr[i];
         meta.add(currentHeader.key, currentHeader.value)
-        // console.log("meta header key, value", meta)
       }
 
       if (rpcType === 'UNARY') {
         let query = reqResObj.queryArr[0]
+        let time = {};
 
         // Open Connection and set time sent for Unary
         reqResObj.connection = 'open';
-        reqResObj.timeSent = Date.now();
+        
+        time.timeSent = Date.now();
         // make Unary call
         client[rpc](query, meta, (err, data)=> {
-          // console.log("query from line 122 in grpcController", query)
+
           if (err) {
             console.log('unary error' , err);
           }
           // Close Connection and set time received for Unary
-          reqResObj.timeReceived = Date.now();
+          reqResObj.timeSent = time.timeSent;
+
+          time.timeReceived =  Date.now();
+          reqResObj.timeReceived = time.timeReceived
+
           reqResObj.connection = 'closed';
-          reqResObj.connectionType = 'plain';
           reqResObj.response.events.push(data)
+          reqResObj.response.times.push(time)
           store.default.dispatch(actions.reqResUpdate(reqResObj));
 
 
         }) // metadata from server
         .on('metadata', (metadata) => {
-          // console.log("metadata from line 127", metadata)
           // if metadata is sent back from the server, analyze and handle
           let keys = Object.keys(metadata._internal_repr)
           for (let i = 0; i < keys.length; i += 1) {
@@ -147,8 +145,8 @@ grpcController.openGrpcConnection = (reqResObj, connectionArray) => {
       else if (rpcType === 'CLIENT STREAM') {
         // create call and open client stream connection
         reqResObj.connection = 'open';
-        reqResObj.connectionType = 'plain';
-        reqResObj.timeSent = Date.now();
+        let timeSent = Date.now();
+        reqResObj.timeSent = timeSent;
         let call = client[rpc](meta, function(error, response) {
           if (error) {
             console.log('error in client stream', error);
@@ -157,12 +155,16 @@ grpcController.openGrpcConnection = (reqResObj, connectionArray) => {
         else {
           //Close Connection for client Stream
           reqResObj.connection = 'closed';
-          reqResObj.connectionType = 'plain';
-          reqResObj.timeReceived = Date.now();
+          let curTime = Date.now()
+          reqResObj.response.times.forEach(time => {
+            time.timeReceived = curTime;
+            reqResObj.timeReceived = time.timeReceived;
+            reqResObj.response.events.push(time)
+
+          })
           reqResObj.response.events.push(response)
           store.default.dispatch(actions.reqResUpdate(reqResObj));
 
-          // console.log('in client stream response', response);
         }}).on('metadata', (metadata) => {
           // if metadata is sent back from the server, analyze and handle
           let keys = Object.keys(metadata._internal_repr)
@@ -173,39 +175,50 @@ grpcController.openGrpcConnection = (reqResObj, connectionArray) => {
           store.default.dispatch(actions.reqResUpdate(reqResObj))
         });
 
-        // debugging call methods
-        // console.log('call: ', call);
 
-        for (var i = 0; i < queryArr.length; i++) {
+        for (let i = 0; i < queryArr.length; i++) {
           let query = queryArr[i];
           // Open Connection for client Stream
           // this needs additional work to provide correct sent time for each
           // request without overwrite
+          let time = {};
+
           reqResObj.connection = 'pending';
-          reqResObj.connectionType = 'plain';
-          reqResObj.timeSent = Date.now();
+
+
+          time.timeSent = timeSent
+          reqResObj.response.times.push(time)
+
+
+          //reqResObj.connectionType = 'plain';
+         // reqResObj.timeSent = Date.now();
+
           call.write(query);
-          // add console log for completed write?
         }
         call.end();
       }
       else if (rpcType === 'SERVER STREAM') {
         let timesArr = [];
         // Open Connection for SERVER Stream
         reqResObj.connection = 'open';
-        reqResObj.connectionType = 'plain';
         reqResObj.timeSent = Date.now();
-        console.log('rpc', rpc, 'reqresquery', reqResObj.queryArr[0])
         const call = client[rpc](reqResObj.queryArr[0], meta);
         call.on("data", resp => {
-          // console.log('server streaming message:', data);
+          let time = {};
+          time.timeReceived = Date.now();
+          time.timeSent = reqResObj.timeSent;
           // add server response to reqResObj and dispatch to state/store
           reqResObj.response.events.push(resp)
-          timesArr.push(Date.now())
-          console.log('new time pushed: ', timesArr)
+
+          reqResObj.response.times.push(time)
+
+
+         // timesArr.push(Date.now())
+          //console.log('new time pushed: ', timesArr)
           // console.log('data response server stream',resp)
           // console.log(reqResObj.response.events)
 
+
           store.default.dispatch(actions.reqResUpdate(reqResObj));
         })
         call.on('error', () => {
@@ -215,19 +228,21 @@ grpcController.openGrpcConnection = (reqResObj, connectionArray) => {
         call.on('end', () => {
           // Close Connection for SERVER Stream
           reqResObj.connection = 'closed';
-          reqResObj.connectionType = 'plain';
-          reqResObj.timeReceived =Date.now();
-          reqResObj.timesArr = timesArr
+
+          reqResObj.timeReceived = Date.now();
+
+         // reqResObj.connectionType = 'plain';
+         // reqResObj.timeReceived =Date.now();
+         // reqResObj.timesArr = timesArr
+
           // no need to push response to reqResObj, no event expected from on 'end'
           store.default.dispatch(actions.reqResUpdate(reqResObj));
-          // console.log('server side stream completed')
         })
         call.on('metadata', (metadata) => {
           let keys = Object.keys(metadata._internal_repr)
           for (let i = 0; i < keys.length; i += 1) {
             let key = keys[i];
             reqResObj.response.headers[key] = metadata._internal_repr[key][0];
-            // console.log('reqred headers are now', reqResObj.response.headers)
 
           }
           store.default.dispatch(actions.reqResUpdate(reqResObj))
@@ -236,15 +251,17 @@ grpcController.openGrpcConnection = (reqResObj, connectionArray) => {
       //else BIDIRECTIONAL
       else {
         // Open duplex stream
+        let counter = 0;
         let call = client[rpc](meta);
         call.on('data', (response) => {
-        // console.log('Got server response "' + response );
+          let curTimeObj = reqResObj.response.times[counter];
+          counter++;
         //Close Individual Server Response for BIDIRECTIONAL Stream
         reqResObj.connection = 'pending';
-        reqResObj.connectionType = 'plain';
-        reqResObj.timeReceived = Date.now();
-        reqResObj.response.events.push(response)
-        // console.log(reqResObj.response.events)
+        curTimeObj.timeReceived = Date.now();
+        reqResObj.timeReceived = curTimeObj.timeReceived;
+        reqResObj.response.events.push(response);
+        reqResObj.response.times.push(curTimeObj);
         store.default.dispatch(actions.reqResUpdate(reqResObj));
 
 
@@ -255,8 +272,6 @@ grpcController.openGrpcConnection = (reqResObj, connectionArray) => {
               let key = keys[i];
               reqResObj.response.headers[key] = metadata._internal_repr[key][0];
 
-              // console.log('reqred headers are now', reqResObj.response.headers)
-
             }
             store.default.dispatch(actions.reqResUpdate(reqResObj))
           });
@@ -266,32 +281,29 @@ grpcController.openGrpcConnection = (reqResObj, connectionArray) => {
         call.on('end', (data)=> {
           //Close Final Server Connection for BIDIRECTIONAL Stream
           reqResObj.connection = 'closed';
-          reqResObj.connectionType = 'plain';
           reqResObj.timeReceived = Date.now();
           // no need to push response to reqResObj, no event expected from on 'end'
           store.default.dispatch(actions.reqResUpdate(reqResObj));
-          // console.log('server response ended', data)
         });
 
         for (var i = 0; i < queryArr.length; i++) {
+          let time = {};
           let query = queryArr[i];
           //Open Connection for BIDIRECTIONAL Stream
           if (i === 0){
             reqResObj.connection = 'open';
           } else {
             reqResObj.connection = 'pending';
           }
-          reqResObj.connectionType = 'plain';
-          reqResObj.timeSent = Date.now();
+          time.timeSent = Date.now();
+          reqResObj.timeSent = time.timeSent;
+          reqResObj.response.times.push(time)
           call.write(query);
         }
         call.end();
       }
     reqResObj.connection = 'closed';
-    reqResObj.connectionType = 'plain';
     reqResObj.timeReceived = Date.now();
     store.default.dispatch(actions.reqResUpdate(reqResObj));
-
-  }
 };
 export default grpcController;