RPC Explorer

server/static/rpcexplorer/rpc-explorer.html

Index: server/static/rpcexplorer/rpc-explorer.html
diff --git a/server/static/rpcexplorer/rpc-explorer.html b/server/static/rpcexplorer/rpc-explorer.html
new file mode 100644
index 0000000000000000000000000000000000000000..01991259037390556a63608737665ca31594b1ab
--- /dev/null
+++ b/server/static/rpcexplorer/rpc-explorer.html
@@ -0,0 +1,105 @@
+<!--
+  ~ // 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/app-router/app-router.html">
+<link rel="import" href="/static/common/third_party/polymer/polymer.html">
+
+<link rel="import" href="rpc-descriptor-util.html">
+<link rel="import" href="rpc-method.html">
+<link rel="import" href="rpc-service-list.html">
+<link rel="import" href="rpc-service.html">
+
+
+<!-- The `rpc-explorer` is the top-level element of RPC Explorer -->
+<dom-module id="rpc-explorer">
+  <template>
+    <style>
+      li[hidden] {
+        display: none;
+      }
+    </style>
+
+    <!-- Load server description -->
+    <rpc-call auto service="discovery.Discovery" method="Describe"
+              last-response="{{serverDescription}}">
+    </rpc-call>
+
+    <div class="navbar navbar-default" role="navigation">
+      <div class="navbar-header">
+        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+          <span class="sr-only">Toggle navigation</span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+        <span class="navbar-brand">
+          <span id="progress-spinner" class="not-spinning">
+            <a href="#">RPC Explorer</a>
+          </span>
+        </span>
+      </div>
+    </div>
+
+    <ol class="breadcrumb">
+      <li>
+        <a href="#">Home</a>
+      </li>
+      <li hidden="{{!service}}">
+        <a href="#/services/[[service]]">[[service]]</a>
+      </li>
+      <li hidden="{{!method}}">
+        <a href="#/services/[[service]]/[[method]">[[method]]</a>
+      </li>
+    </ol>
+
+    <app-router id="router" trailing-slash="ignore"
+                on-activate-route-end="_onRouted"
+                on-before-data-binding="_onRouteBinding">
+      <app-route path="/services" element="rpc-service-list"></app-route>
+      <app-route path="/services/:service" element="rpc-service"></app-route>
+      <app-route path="/services/:service/:method" element="rpc-method"></app-route>
+      <app-route path="*" redirect="/services"></app-route>
+    </app-router>
+  </template>
+
+  <script>
+    'use strict';
+
+    Polymer({
+      is: 'rpc-explorer',
+      properties: {
+        service: String,
+        method: String,
+        serverDescription: {
+          type: Object, // DescribeResponse message
+          observer: '_onServerDescriptionChanged'
+        }
+      },
+
+      _onRouteBinding: function(e) {
+        if (this.serverDescription) {
+          e.detail.model.description = this.serverDescription.description;
+          e.detail.model.serviceNames = this.serverDescription.services;
+        }
+      },
+
+      _onServerDescriptionChanged: function(e) {
+        if (this.serverDescription) {
+          rpcExplorer.descUtil.annotateSet(this.serverDescription.description);
+          // Recreate route model.
+          this.$.router.go(document.location.hash.substring(1));
+        }
+      },
+
+      _onRouted: function(e) {
+        var model = e.detail.model || {};
+        this.service = model.service || '';
+        this.method = model.method || '';
+      }
+    });
+  </script>
+</dom-module>