fixed history for gRPC

Author: nancyddao

grpc_mockData/client.js

@@ -17,13 +17,19 @@ function main() {
     "localhost:50051",
     grpc.credentials.createInsecure()
   );
+  // set request value
   // CLI prompt or hard code the variable for the message "name": "string"
   let user;
+  // returns an array containing the command line arguments passed when the Node.js process was launched
+  // starts on 2 because process.argv contains the whole command-line invocation
+  // argv[0] and argv[1] will be node example.js
   if (process.argv.length >= 3) {
     user = process.argv[2];
   } else {
     user = "world";
   }
+  
+  // create metadata
   const meta = new grpc.Metadata();
   meta.add("testing", "metadata is working");
 
@@ -45,19 +51,22 @@ function main() {
     } else {
       console.log(response);
     }
-    // client.close();
-  });
-  stream.write({ name: "hello first stream" });
-  stream.write({ name: "hello 2nd stream" });
-  stream.end({ name: "hello end stream" });
-
+    client.close();
+  })
+  stream.write({ name: 'hello 1st client side stream'});
+  stream.write({name: 'hello 2nd client side stream' })
+  // ends client streaming
+  stream.end({ name: 'hello end client side stream'})
+ 
   // bidi streaming
   const streamBidi = client.sayHelloBidi(meta);
+  // reads streaming data
   streamBidi.on("error", console.error);
   streamBidi.on("data", console.log);
   streamBidi.on("end", () => client.close());
-
-  streamBidi.write({ name: "hello bidi stream 1" });
-  streamBidi.end({ name: "hello bidi stream 2" });
+  // write data
+  streamBidi.write ({ name: 'hello 1st bi-di stream'});
+  // ends data
+  streamBidi.end({ name: 'hello 2nd bi-di stream'})
 }
 main();

grpc_mockData/server.js

@@ -26,54 +26,73 @@ const dataStream = [
  * Implements the SayHello RPC method.
  */
 
-
+// Unary stream
+// ctx = watch execution context
 function sayHello(ctx) {
+  // create new metadata
   let metadata = new grpc.Metadata();
   metadata.set('it', 'works?')
   metadata.set('indeed', 'it do')
-  console.dir(ctx.metadata, { depth: 3, colors: true });
+  // Watcher creates a watch execution context for the watch
+  // The execution context provides scripts and templates with access to the watch metadata
+  console.log("received metadata from client request", ctx.metadata)
+  // console.dir(ctx.metadata, { depth: 3, colors: true });
   console.log(`got sayHello request name: ${ctx.req.name}`);
+  
+  // an alias to ctx.response.res
+  // This is set only in case of DUPLEX calls, to the the gRPC call reference itself
   ctx.res = { message: "Hello " + ctx.req.name };
-  // let metadata = new grpc.Metadata();
-  // metadata.set('it', 'does?')
-  metadata.set('UNARY', 'yes')
 
+  // send response header metadata object directly as an argument and that is set and sent
+  metadata.set('UNARY', 'yes')
   ctx.sendMetadata(metadata)
+
   console.log(`set sayHello response: ${ctx.res.message}`);
 }
 
+// Server-Side Stream
+// used highland library to manage asynchronous data
 async function sayHellos(ctx) {
+  // create new metadata
   let metadata = new grpc.Metadata();
   metadata.set('it', 'works?')
   metadata.set('indeed', 'it do')
+  // The execution context provides scripts and templates with access to the watch metadata
   console.dir(ctx.metadata, { depth: 3, colors: true });
+  // converts a request into strings
   console.log(`got sayHellos request name:`, JSON.stringify(ctx.req, null, 4));
+
+  // alias for ctx.request.req
+  // In case of UNARY and RESPONSE_STREAM calls it is simply the gRPC call's request
   let reqMessages = {"message": 'hello!!! ' + ctx.req.name}
   dataStream.push(reqMessages)
   reqMessages = dataStream
-  console.log('what is this?????', reqMessages)
   let streamData = await hl(reqMessages)
   ctx.res = streamData;
   metadata.set('serverStream', 'indeed')
   dataStream.pop()
 
+  // send response header metadata object directly as an argument and that is set and sent
   ctx.sendMetadata(metadata)
 
   console.log(`done sayHellos`);
+  // ends server stream
   ctx.res.end()
-  // dataStream = [];
 }
 
+// Client-Side stream
 function sayHelloCs (ctx) {
+  // create new metadata
   let metadata = new grpc.Metadata();
   metadata.set('it', 'works?')
   metadata.set('indeed', 'it do')
   metadata.set('clientStream', 'indubitably')
+  // The execution context provides scripts and templates with access to the watch metadata
   console.dir(ctx.metadata, { depth: 3, colors: true })
   console.log('got sayHelloClients')
-  let counter = 0
-  // console.log("ctx content:",ctx.req)
+  let counter = 0;
   let messages = [];
+  // client streaming calls to write messages and end writing before you can get the response
   return new Promise((resolve, reject) => {
     hl(ctx.req)
       .map(message => {
@@ -82,10 +101,8 @@ function sayHelloCs (ctx) {
         ctx.response.res = { message: 'Client stream: ' + message.name }
         messages.push(message.name)
         ctx.sendMetadata(metadata)
-
-
-
       })
+      // returns all the elements as an array
       .collect()
       .toCallback((err, result) => {
         if (err) return reject(err)
@@ -97,11 +114,14 @@ function sayHelloCs (ctx) {
   })
 }
 
+// Bi-Di stream
 function sayHelloBidi(ctx) {
+  // create new metadata
   let metadata = new grpc.Metadata();
   metadata.set('it', 'works?')
   metadata.set('indeed', 'it do')
   console.log("got sayHelloBidi");
+  // The execution context provides scripts and templates with access to the watch metadata
   console.dir(ctx.metadata, { depth: 3, colors: true });
   let counter = 0;
   ctx.req.on("data", d => {
@@ -112,9 +132,10 @@ function sayHelloBidi(ctx) {
   });
   metadata.set('bidiStream', 'ohyes')
   ctx.sendMetadata(metadata);
+  // calls end to client before closing server
   ctx.req.on("end", () => {
     console.log(`done sayHelloBidi counter ${counter}`);
-
+    // ends server stream
     ctx.res.end();
   });
 }

src/client/components/composer/NewRequest/GRPCAutoInputForm.jsx

@@ -1,8 +1,6 @@
 import React, { Component } from 'react';
 import dropDownArrow from '../../../../assets/icons/arrow_drop_down_white_192x192.png'
 import GRPCBodyEntryForm from "./GRPCBodyEntryForm.jsx";
-import { VariablesInAllowedPositionRule } from 'graphql/validation';
-import ReactDOM from "react-dom";
 
 class GRPCAutoInputForm extends Component {
   constructor(props) {

src/client/components/composer/protos/saveProto.proto

@@ -1,111 +1,29 @@
-// Copyright 2015 gRPC authors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
 syntax = "proto3";
 
-option java_multiple_files = true;
-option java_package = "io.grpc.examples.routeguide";
-option java_outer_classname = "RouteGuideProto";
-option objc_class_prefix = "RTG";
-
-package routeguide;
-
-// Interface exported by the server.
-service RouteGuide {
-  // A simple RPC.
-  //
-  // Obtains the feature at a given position.
-  //
-  // A feature with an empty name is returned if there's no feature at the given
-  // position.
-  rpc GetFeature(Point) returns (Feature) {}
-
-  // A server-to-client streaming RPC.
-  //
-  // Obtains the Features available within the given Rectangle.  Results are
-  // streamed rather than returned at once (e.g. in a response message with a
-  // repeated field), as the rectangle may cover a large area and contain a
-  // huge number of features.
-  rpc ListFeatures(Rectangle) returns (stream Feature) {}
+package helloworld;
 
-  // A client-to-server streaming RPC.
-  //
-  // Accepts a stream of Points on a route being traversed, returning a
-  // RouteSummary when traversal is completed.
-  rpc RecordRoute(stream Point) returns (RouteSummary) {}
-
-  // A Bidirectional streaming RPC.
-  //
-  // Accepts a stream of RouteNotes sent while a route is being traversed,
-  // while receiving other RouteNotes (e.g. from other users).
-  rpc RouteChat(stream RouteNote) returns (stream RouteNote) {}
-}
-
-// Points are represented as latitude-longitude pairs in the E7 representation
-// (degrees multiplied by 10**7 and rounded to the nearest integer).
-// Latitudes should be in the range +/- 90 degrees and longitude should be in
-// the range +/- 180 degrees (inclusive).
-message Point {
-  int32 latitude = 1;
-  int32 longitude = 2;
+// The greeting service definition.
+service Greeter {
+  // Sends a greeting
+  rpc SayHello (HelloRequest) returns (HelloReply) {}
+  rpc SayHelloCS (stream HelloRequest) returns (HelloReply) {}
+  rpc SayHellos (HelloRequest) returns (stream HelloReply) {}
+  rpc SayHelloBidi (stream HelloRequest) returns (stream HelloReply) {}
 }
 
-// A latitude-longitude rectangle, represented as two diagonally opposite
-// points "lo" and "hi".
-message Rectangle {
-  // One corner of the rectangle.
-  Point lo = 1;
-
-  // The other corner of the rectangle.
-  Point hi = 2;
+service Butler {
+  // Sends a greeting
+  rpc SayHello (HelloRequest) returns (HelloReply) {}
+  rpc SayHelloCS (stream HelloRequest) returns (HelloReply) {}
+  rpc SayHellos (HelloRequest) returns (stream HelloReply) {}
+  rpc SayHelloBidi (stream HelloRequest) returns (stream HelloReply) {}
 }
-
-// A feature names something at a given point.
-//
-// If a feature could not be named, the name is empty.
-message Feature {
-  // The name of the feature.
+// The request message containing the user's name.
+message HelloRequest {
   string name = 1;
-
-  // The point where the feature is detected.
-  Point location = 2;
-}
-
-// A RouteNote is a message sent while at a given point.
-message RouteNote {
-  // The location from which the message is sent.
-  Point location = 1;
-
-  // The message to be sent.
-  string message = 2;
 }
 
-// A RouteSummary is received in response to a RecordRoute rpc.
-//
-// It contains the number of individual points received, the number of
-// detected features, and the total distance covered as the cumulative sum of
-// the distance between each point.
-message RouteSummary {
-  // The number of points received.
-  int32 point_count = 1;
-
-  // The number of known features passed while traversing the route.
-  int32 feature_count = 2;
-
-  // The distance covered in metres.
-  int32 distance = 3;
-
-  // The duration of the traversal in seconds.
-  int32 elapsed_time = 4;
+// The response message containing the greetings
+message HelloReply {
+  string message = 1;
 }

src/client/components/display/History.jsx

@@ -79,7 +79,7 @@ class History extends Component {
     this.props.setNewRequestBody(requestBodyObj);
     this.props.setNewRequestStreams(requestStreamsObj)
     // for gRPC 
-    if (this.props.content.gRPC) {
+    if (this.props.content && this.props.content.gRPC) {
       // need to place logic in callback otherwise code won't work and returns null
       this.setState({
         ...this.state

src/client/components/display/RequestTabs.jsx

@@ -12,6 +12,11 @@ class RequestTabs extends Component {
   }
 
   handleTabSelect(val) {
+    let headers = "Request Headers"
+    if (this.props.requestContent.bodyType === 'GRPC') {
+      headers = "Request Metadata"
+    }
+
     switch (val) {
       case "Request Body":
         this.setState({
@@ -28,7 +33,7 @@ class RequestTabs extends Component {
           openTab: val
         });
         break;
-      case "Request Headers":
+      case headers:
         this.setState({
           openTab: val
         });
@@ -73,7 +78,7 @@ class RequestTabs extends Component {
         : <p className="reqResContent" key={`reqResContent${this.props.requestContent.id}`} >No Request Variables</p>
     }
 
-    else if (this.state.openTab === "Request Headers") {
+    else if (this.state.openTab === headers) {
       tabContentShown = [];
       if (this.props.requestContent.headers && this.props.requestContent.headers.length > 0) {
         this.props.requestContent.headers.forEach((cur, idx) => {
@@ -86,7 +91,7 @@ class RequestTabs extends Component {
         });
       }
       else {
-        tabContentShown.push(<p className="reqResContent" key={`reqResContent${this.props.requestContent.id}`} >No Request Headers</p>)
+      tabContentShown.push(<p className="reqResContent" key={`reqResContent${this.props.requestContent.id}`} >No {headers}</p>)
       }
     }
 

src/client/components/display/ResponseEventsDisplay.jsx

@@ -19,12 +19,29 @@ const ResponseEventsDisplay = ({ response }) => {
       <div className="okay" dangerouslySetInnerHTML={{__html: createDOMPurify.sanitize(events[0])}} />
     )
   }
+  else if (events.length > 1) {
+    if (events) {
+      displayContents.push(
+        <div className="json-response" key="jsonresponsediv">
+          <JSONPretty data={events} space="4" theme={{
+            main: 'line-height:1.3; color: midnightblue; background:#RRGGBB; overflow:auto;',
+            key: 'color:#0089D0;', // bluetwo
+            string: 'color:#15B78F;',// greenone
+            value: 'color:#fd971f;', // a nice orange
+            boolean: 'color:#E00198;', // gqlpink
+          }}
+          />
+        </div>
+      );
+    }
+    
+  }
   // Otherwise, render a single display
   else {
     if (events) {
       displayContents.push(
         <div className="json-response" key="jsonresponsediv">
-          <JSONPretty data={events} space="4" theme={{
+          <JSONPretty data={events[0]} space="4" theme={{
             main: 'line-height:1.3; color: midnightblue; background:#RRGGBB; overflow:auto;',
             key: 'color:#0089D0;', // bluetwo
             string: 'color:#15B78F;',// greenone