Merge pull request #42 from oslabs-beta/linux

headers for gRPC, websocket message styling

Author: danst3in

src/client/components/containers/ResponseContainer.jsx

@@ -37,6 +37,11 @@ class ResponseContainer extends Component {
           openTab: val,
         });
         break;
+      case 'Response Metadata':
+        this.setState({
+          openTab: val,
+        });
+        break;
       case 'Response Headers':
         this.setState({
           openTab: val,
@@ -47,7 +52,7 @@ class ResponseContainer extends Component {
           openTab: val,
         });
         break;
-     
+
       default:
     }
   }
@@ -69,6 +74,7 @@ class ResponseContainer extends Component {
           && <ResponseEventsDisplay response={this.props.content.response} />
         }
         {this.state.openTab === 'Response Headers' && <ResponseHeadersDisplay responseContent={this.props.content.response} />}
+        {this.state.openTab === 'Response Metadata' && <ResponseHeadersDisplay responseContent={this.props.content.response} />}
         {this.state.openTab === 'Response Cookies' && <ResponseCookiesDisplay responseContent={this.props.content.response} />}
       </div>
     );

src/client/components/display/ResponseTabs.jsx

@@ -7,9 +7,14 @@ class ResponseTabs extends Component {
   }
 
   render() {
+    console.log('THETSHESTRKSDFKJHS', this.props.content)
     const events = 'Response Events';
     const cookies = 'Response Cookies';
     let headers = 'Response Headers';
+
+    if (this.props.content.gRPC === true ) {
+      headers = 'Response Metadata';
+    }
     return (
       <ul className="tab_list-response">
         <Tab onTabSelected={this.props.handleTabSelect} tabName={events} key="events" openTab={this.props.openResponseTab}/>
@@ -25,3 +30,5 @@ class ResponseTabs extends Component {
 }
 
 export default ResponseTabs;
+
+

src/client/components/display/WebSocketMessage.jsx

@@ -10,6 +10,7 @@ class WebSocketMessage extends Component {
   render() {
     const styles = {
       display: 'flex',
+      overflow: 'hidden',
       justifyContent: this.props.source === 'server' ? 'flex-start' : 'flex-end',
     };
 
@@ -22,7 +23,7 @@ class WebSocketMessage extends Component {
 
     return (
       <div style={styles} className={webSocketMessageClassNames}>
-        <div className={'websocket_message-data'}><div>{this.props.data}</div></div>
+        <div style={styles} className={'websocket_message-data'}><div>{this.props.data}</div></div>
         <div  className={'websocket_message-time'}>{`${hours}:${minutes}`}</div>
       </div>
     );

src/client/controllers/grpcController.js

@@ -174,7 +174,7 @@ grpcController.openGrpcConnection = (reqResObj, connectionArray) => {
           // request without overwrite
           reqResObj.connection = 'pending';
           reqResObj.connectionType = 'plain';
-          reqResObj.timeSent = Date.now();
+          reqResObj.timeReceived = Date.now();
           call.write(query);
           // add console log for completed write?
         }
@@ -214,7 +214,7 @@ grpcController.openGrpcConnection = (reqResObj, connectionArray) => {
           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)
+            console.log('reqres headers are now: ', reqResObj.response.headers)
           }
           store.default.dispatch(actions.reqResUpdate(reqResObj))
         })
@@ -240,7 +240,7 @@ grpcController.openGrpcConnection = (reqResObj, connectionArray) => {
             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)
+              console.log('reqres headers are now: ', reqResObj.response.headers)
             }
             store.default.dispatch(actions.reqResUpdate(reqResObj))
           });