config_service: improve landing page

appengine/config_service/ui/src/config-ui/front-page.html

Index: appengine/config_service/ui/src/config-ui/front-page.html
diff --git a/appengine/config_service/ui/src/config-ui/front-page.html b/appengine/config_service/ui/src/config-ui/front-page.html
new file mode 100644
index 0000000000000000000000000000000000000000..c212c22fabb3634e2fa8ba6b6e185ee75f52281e
--- /dev/null
+++ b/appengine/config_service/ui/src/config-ui/front-page.html
@@ -0,0 +1,133 @@
+<!--
+  Copyright 2017 The LUCI Authors. All rights reserved.
+  Use of this source code is governed under the Apache License, Version 2.0
+  that can be found in the LICENSE file.
+-->
+
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/app-layout/app-layout.html">
+<link rel="import" href="../../bower_components/paper-search/paper-search-bar.html">
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
+<link rel="import" href="config-card.html">
+
+<dom-module id="front-page">
+  <template>
+    <style>
+      app-toolbar {
+        background-color: #efefef;
+        color: #232323;
+      }
+
+      app-header {
+        @apply --layout-fixed-top;
+      }
+
+      .logo {
+        height: 100%;
+      }
+
+      .title {
+        padding-left: 1%;
+        font-size: 150%;
+        font-family: sans-serif;
+      }
+
+      .search-bar {
+        padding-top: 7%;
+        padding-bottom: 2%;
+      }
+
+      paper-search-bar {
+        border-style: solid;
+        border-width: 2px;
+        width: 40%;
+        height: 100%;
+        margin: auto;
+      }
+    </style>
+
+    <app-header reveals>
+      <app-toolbar>
+        <image class="logo" src="../../images/chromium.png"/>

[Sergey Berezin (google), 2017/06/12 20:01:41]

nit: how big is the icon file? It may be useful to scale it down to max.
expected resolution to save network bandwidth.

[cwpayton, 2017/06/12 21:49:33]

Done.

+        <div class="title" main-title>Configuration Service (not fully implemented)</div>
+      </app-toolbar>
+    </app-header>
+
+    <iron-ajax
+      auto
+      id="requestConfigs"
+      url="{{url}}"
+      handle-as="json"
+      on-response="_getConfigs">
+    </iron-ajax>
+
+    <div class="search-bar">
+      <paper-search-bar query="{{search}}"></paper-search-bar>
+    </div>
+    
+    <div class="config-list">
+      <template is="dom-if" if="{{_not(empty)}}">
+        <template is="dom-repeat" items="[[searchList]]" as="config">
+          <config-card name="[[config.config_set]]"></config-card>
+        </template>
+      </template>
+      <template is="dom-if" if="{{empty}}">
+        <config-card name="Fetching configs sets..."></config-card>

[Sergey Berezin (google), 2017/06/12 20:01:41]

For app instances that do not (yet) have config sets, this message will be
confusing. Perhaps, you want to distinguish not-yet-loaded state from
loaded-but-empty, so you can give a different message (like "no configs found").

In fact, renaming "empty" to "isLoading" (which is what it really is) and
checking searchList.length gives you all the combinations.

[cwpayton, 2017/06/12 21:49:33]

Done.

+      </template>
+    </div>
+  </template>
+
+  <script>
+    Polymer({
+      is: 'front-page',
+
+      properties: {
+        configList: {
+          type: Array,
+          value: []
+        },
+
+        empty: {

[Sergey Berezin (google), 2017/06/12 20:01:41]

s/empty/isLoading/ - see the comment above.

[cwpayton, 2017/06/12 21:49:33]

Done.

+          type: Boolean,
+          value: true
+        },
+
+        search: {
+          type: String,
+          observer: '_searched'
+        },
+
+        searchList: {
+          type: Array,
+          value: []
+        },
+
+        url: {
+          type: String,
+          value: "https://luci-config.appspot.com/_ah/api/config/v1/config-sets"

[Sergey Berezin (google), 2017/06/12 20:01:41]

So this UI will only work on luci-config instance. Would it still work if we
omit the server part of the URL? E.g. just "/_ah/api/..." ? This should then
work on any instance.

+        }
+      },
+
+      _getConfigs: function(event) {
+        this.configList = event.detail.response.config_sets;
+        this.searchList = this.configList;

[Sergey Berezin (google), 2017/06/12 20:01:41]

You may want to call _searched() here instead.
Consider this: a user opens the UI page on a slow network, and while configs are
still loading, types in a search query. 
Currently, once the configs load, they'll still display all the results, and
will only update once the user modifies the search query.
It would be better to start displaying already filtered results.

[cwpayton, 2017/06/12 21:49:33]

Done.

+        this.empty = false;
+      },
+
+      _not: function(bool) {
+        return (!(bool));
+      },
+
+      _searched: function() {
+        this.searchList = [];
+        this.configList.forEach((elem) => {
+          if (elem.config_set.includes(this.search)) {
+            this.searchList.push(elem);
+          }
+        });
+        return this.searchList;
+      }
+    });
+  </script>
+</dom-module>