RPC Explorer

server/static/rpcexplorer/rpc-method.html

+<!--
+  ~ // Copyright 2016 The Chromium Authors. All rights reserved.
+  ~ // Use of this source code is governed by a BSD-style license that can be
+  ~ // found in the LICENSE file.
+  ~
+  -->
+
+<link rel="import" href="/static/common/third_party/polymer/polymer.html">
+
+<link rel="import" href="rpc-descriptor-util.html">
+<link rel="import" href="rpc-editor.html">
+<link rel="import" href="rpc-error.html">
+
+<!-- The `rpc-method` is a service method page -->
+<dom-module id="rpc-method">
+  <template>
+    <style>
+      rpc-editor {
+        height: 300px;
+      }
+      button {
+        margin: 5px;
+      }
+    </style>
+
+    <div on-keypress="_onKeypress">
+      <rpc-call id="call" service="[[service]]" method="[[method]]"
+        request="[[requestObject]]"
+        on-response="_onResponse"></rpc-call>
+
+      <div>[[methodDesc.source_code_info.leading_comments]]</div>
+      <hr>
+
+      <p>Request:</p>
+      <div class="row">
+        <div class="col-md-7">
+          <rpc-editor value="{{requestText}}"
+            description="[[description]]"
+            root-type-name="[[requestTypeName]]"></rpc-editor>
+        </div>
+        <div class="col-md-3">
+          <p>Ctrl+Space for Autocomplete</p>
+          <p>Shift+Enter for Send</p>
+        </div>
+      </div>
+
+      <div>
+        <button on-click="send">Send</button>
+      </div>
+
+      <div class="alert alert-danger" role="alert" hidden="[[!error]]">
+        <template is="dom-if" if="[[error.isGrpcError]]">
+          Code: [[error.code]]
+          <template is="dom-if" if="[[error.codeName]]">
+            ([[error.codeName]])
+          </template>
+          <div>[[error.description]]</div>
+        </template>
+
+        <template is="dom-if" if="[[!error.isGrpcError]]">
+          [[error]]
+        </template>
+      </div>
+
+      <div class="row">
+        <div class="col-md-7">
+          <rpc-editor value="[[responseText]]"></rpc-editor>
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <script>
+    'use strict';
+
+    Polymer({
+      is: 'rpc-method',
+      properties: {
+        description: Object, // FileDescriptorSet message
+        service: String,
+        method: String,
+
+        methodDesc: {
+          type: Object,
+          computed: '_resolveMethod(description, service, method)'
+        },
+        requestTypeName: {
+          type: String,
+          computed: '_getRequestTypeName(methodDesc)'
+        },
+
+        request: {
+          // "request" query string parameter.
+          type: String,
+          value: '{}',
+          observer: 'onRequestChanged',
+          notify: true
+        },
+        requestText: String, // request editor text.
+        requestObject: Object, // parsed from requestText
+
+        responseText: String, // response editor text.
+        error: {
+          type: Object,
+          value: null
+        }
+      },
+
+      _resolveMethod: function(desc, service, method) {
+        if (!desc || !service || !method) {
+          return null;
+        }
+        var methodDesc = rpcExplorer.descUtil.resolve(
+          desc, service + '.' + method);
+        return methodDesc && methodDesc.type == 'method' && methodDesc.desc;
+      },
+      _getRequestTypeName: function(methodDesc) {
+        return methodDesc && rpcExplorer.descUtil.trimPrefixDot(methodDesc.input_type);

[Bons, 2016/02/13 17:18:28]

80 chars

[nodir, 2016/02/17 02:02:13]

Done.

+      },
+
+      onRequestChanged: function() {
+        // "request" query string parameter changed.

[Bons, 2016/02/13 17:18:27]

superfluous comment.

[nodir, 2016/02/17 02:02:13]

Done.

+        try {
+          this.requestObject = JSON.parse(this.request);
+        } catch (e) {
+          console.log('Invalid request: ' + this.request);
+          this.requestText = this.request;
+          return;
+        }
+
+        // Reformat the request read from query string parameter
+        // because it gets corrupted there.
+        this.requestText = JSON.stringify(this.requestObject, null, 4);
+      },
+
+      _onKeypress: function(e) {
+        if (e.key == 'Enter' && e.shiftKey) {
+          this.send();
+          e.preventDefault();
+        }
+      },
+
+      send: function() {
+        this.error = null;
+        try {
+          this.requestObject = JSON.parse(this.requestText);
+          console.log('Request: ', this.requestObject);

[Bons, 2016/02/13 17:18:27]

do you mean to keep this?

[nodir, 2016/02/17 02:02:13]

Removed, because network tab provides enough info

+
+          // Reformat request
+          this.requestText = JSON.stringify(this.requestObject, null, 4);
+
+          // Update URL without a refresh.
+          var newHash = (
+            '#/services/' + this.service + '/' + this.method +

[Bons, 2016/02/13 17:18:27]

four-space indent on continuing lines.

[nodir, 2016/02/17 02:02:13]

Done.

+            '?request=' + this.requestText);
+          history.replaceState(history.state, document.title, newHash);
+
+          // Actually send the request.
+          this.$.call.send();
+        } catch (e) {
+          this.error = e;
+          console.log('Error: ', this.error)

[Bons, 2016/02/13 17:18:27]

use console.error

[nodir, 2016/02/17 02:02:13]

Done.

+        }
+      },
+
+      _onResponse: function() {
+        var call = this.$.call;
+        console.log('Response: ', call.lastResponse, 'Error: ', call.lastError);

[Bons, 2016/02/13 17:18:27]

remove?

[nodir, 2016/02/17 02:02:13]

Done

+
+        if (call.lastResponse) {
+          this.responseText = JSON.stringify(call.lastResponse, null, 4);
+        } else {
+          this.responseText = '';
+        }
+
+        this.error = call.lastError;
+        if (this.error instanceof rpcExplorer.GrpcError) {
+          this.error = {
+            isGrpcError: true,
+            code: this.error.code,
+            codeName: rpcExplorer.CodeName(this.error.code),
+            description: this.error.description
+          };
+        }
+      }
+    });
+  </script>
+</dom-module>