Add "raw request gRPCurl" output (#241)

Implements [#3 Copy as
"grpcurl"](#3).

**Example:**

![image](https://user-images.githubusercontent.com/131102/233935060-f16c9128-50cb-43d9-b286-e69b5059c5e0.png)


**With highlights of the changes parts:**

![image](https://user-images.githubusercontent.com/131102/233935026-5b6ece0a-0084-483f-b354-bceb4d20d6b0.png)

---------

Co-authored-by: Darius Damalakas <[email protected]>
Co-authored-by: Scott Blum <[email protected]>

Author: 3 people

README.md

@@ -76,6 +76,12 @@ run `make install`.
 If you encounter compile errors, you could have out-dated versions of `grpcui`'s
 dependencies. You can update the dependencies by running `make updatedeps`.
 
+### Running without install 
+
+```
+go run ./cmd/grpcui/grpcui.go -plaintext localhost:9019
+```
+
 ## Usage
 The usage doc for the tool explains the numerous options:
 ```shell
@@ -250,4 +256,3 @@ protoc --proto_path=. \
 The `--descriptor_set_out` argument is what tells `protoc` to produce a protoset,
 and the `--include_imports` argument is necessary for the protoset to contain
 everything that `grpcui` needs to process and understand the schema.
-

internal/resources/webform/webform-sample.css

@@ -745,3 +745,15 @@ button#grpc-history-clear, button#grpc-history-save {
 #grpc-history-list .history-item-panel .history-detail-metadata td {
     padding-left: 12px;
 }
+
+.grpc-request-raw-container {
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+.grpc-curl-panel {
+    background-color: #fcfcfc;
+    border: 1px solid #dddddd;
+    padding: 1em;
+    margin-bottom: 1em;
+}

internal/resources/webform/webform-template.html

@@ -46,7 +46,7 @@ <h3>Examples</h3>
     <div id="grpc-request-response">
       <ul>
           <li id="#grpc-request-tab-button"><a href="#grpc-request-tab">Request Form</a></li>
-          <li id="#grpc-request-raw-tab-button"><a href="#grpc-request-raw-tab">Raw Request (JSON)</a></li>
+          <li id="#grpc-request-raw-tab-button"><a href="#grpc-request-raw-tab">Raw Request</a></li>
           <li id="#grpc-response-tab-button"><a href="#grpc-response-tab">Response</a></li>
           <li id="#grpc-history-tab-button"><a href="#grpc-history-tab">History</a></li>
       </ul>
@@ -70,8 +70,18 @@ <h3>Request Timeout</h3>
         <button class="grpc-invoke" disabled>Invoke</button>
       </div>
       <div class="grpc-tabcontent" id="grpc-request-raw-tab">
-        <textarea id="grpc-request-raw-text"></textarea><br/>
-        <button class="grpc-invoke" disabled>Invoke</button>
+        <div class="grpc-request-raw-container">
+          <h3>Request payload</h3>
+          <textarea id="grpc-request-raw-text"></textarea><br/>
+          <button class="grpc-invoke" disabled>Invoke</button>
+        </div>
+        <hr>
+        <div class="grpc-request-raw-container">
+          <h3>gRPCurl</h3>
+          <div id="grpc-curl" class="grpc-curl-panel">
+            <span><pre id="grpc-curl-text"></pre></span>
+          </div>
+        </div>
       </div>
       <div class="grpc-tabcontent" id="grpc-response-tab">
         <h3>Response Headers</h3>
@@ -132,6 +142,7 @@ <h3>Response Trailers</h3>
         {"name": "{{.Name}}", "value": "{{.Value}}"},
     {{- end}}
     ];
+    window.target = {{ .Target }};
 
     initGRPCForm(services, svcDescs, mtdDescs, '{{ .InvokeURI }}', '{{ .MetadataURI }}', {{ .Debug }}, headers);
 })();

internal/resources/webform/webform.js

@@ -154,6 +154,9 @@ window.initGRPCForm = function(services, svcDescs, mtdDescs, invokeURI, metadata
         // set raw request text
         updateJSONRequest(requestObj);
 
+        // init grpcCurl text
+        updateCurlCommand(requestObj);
+
         // enable the invoke button
         resetInvoke(true);
 
@@ -2087,14 +2090,24 @@ window.initGRPCForm = function(services, svcDescs, mtdDescs, invokeURI, metadata
         }
     }
 
-    var jsonRawTextArea = $("#grpc-request-raw-text");
+    let gRPCurlTextArea = $("#grpc-curl-text");
+    function updateCurlCommand(requestDataJson) {
+        let service = $("#grpc-service").val();
+        let method = $("#grpc-method").val();
+        gRPCurlTextArea.html(`<div>grpcurl -plaintext -d '${requestDataJson}' ${window.target} ${service}.${method}</div>`);
+    }
 
+    var jsonRawTextArea = $("#grpc-request-raw-text");
     function updateJSONRequest(req) {
-        jsonRawTextArea.val(JSON.stringify(req, null, 2));
+        let requestDataJson = JSON.stringify(req, null, 2);
+        jsonRawTextArea.val(requestDataJson);
+        updateCurlCommand(requestDataJson);
     }
 
     function validateJSON() {
-        var reqObj = JSON.parse($("#grpc-request-raw-text").val());
+        let requestDataJson = jsonRawTextArea.val();
+        updateCurlCommand(requestDataJson);
+        var reqObj = JSON.parse(requestDataJson);
         rebuildRequestForm(reqObj, false);
     }
 
@@ -2748,7 +2761,7 @@ window.initGRPCForm = function(services, svcDescs, mtdDescs, invokeURI, metadata
         formServiceSelected(() => {
             $("#grpc-method").val(item.method);
             formMethodSelected(() => {
-                jsonRawTextArea.val(JSON.stringify(item.request.data, null, 2));
+                updateJSONRequest(item.request.data)
                 validateJSON();
                 // remove all rows
                 $("tr").remove('.metadataRow');

standalone/standalone.go

@@ -78,7 +78,7 @@ func Handler(ch grpcdynamic.Channel, target string, methods []*desc.MethodDescri
 		DefaultMetadata: uiOpts.defaultMetadata,
 		Debug:           uiOpts.debug,
 	}
-	webFormHTML := grpcui.WebFormContentsWithOptions("invoke", "metadata", methods, formOpts)
+	webFormHTML := grpcui.WebFormContentsWithOptions("invoke", "metadata", target, methods, formOpts)
 	indexContents := getIndexContents(uiOpts.indexTmpl, target, webFormHTML, uiOpts.tmplResources)
 	indexResource := newResource("/", indexContents, "text/html; charset=utf-8", false)
 	indexResource.MustRevalidate = true

webform.go

@@ -56,8 +56,8 @@ var (
 //
 // The returned HTML form requires that the contents of WebFormScript() have
 // already been loaded as a script in the page.
-func WebFormContents(invokeURI, metadataURI string, descs []*desc.MethodDescriptor) []byte {
-	return WebFormContentsWithOptions(invokeURI, metadataURI, descs, WebFormOptions{})
+func WebFormContents(invokeURI, metadataURI string, target string, descs []*desc.MethodDescriptor) []byte {
+	return WebFormContentsWithOptions(invokeURI, metadataURI, target, descs, WebFormOptions{})
 }
 
 // WebFormOptions contains optional arguments when creating a gRPCui web form.
@@ -76,7 +76,7 @@ type WebFormOptions struct {
 // accepts an additional argument, options. This can be used to toggle the JS
 // code into debug logging and can also be used to define the set of metadata to
 // show in the web form by default (empty if unspecified).
-func WebFormContentsWithOptions(invokeURI, metadataURI string, descs []*desc.MethodDescriptor, opts WebFormOptions) []byte {
+func WebFormContentsWithOptions(invokeURI, metadataURI string, target string, descs []*desc.MethodDescriptor, opts WebFormOptions) []byte {
 	type metadataEntry struct {
 		Name, Value string
 	}
@@ -89,13 +89,15 @@ func WebFormContentsWithOptions(invokeURI, metadataURI string, descs []*desc.Met
 		MtdDescs        map[string]string
 		DefaultMetadata []metadataEntry
 		Debug           bool
+		Target          string
 	}{
 		InvokeURI:   invokeURI,
 		MetadataURI: metadataURI,
 		SvcDescs:    map[string]string{},
 		Methods:     map[string][]string{},
 		MtdDescs:    map[string]string{},
 		Debug:       os.Getenv("GRPC_WEBFORM_DEBUG") != "",
+		Target:      target,
 	}
 
 	if opts.Debug != nil {