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..dcdbc84c9da74862dee57d606e04f27ceeb23a9d
--- /dev/null
+++ b/appengine/config_service/ui/src/config-ui/front-page.html
@@ -0,0 +1,148 @@
+<!--
+  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"/>

[Ryan Tseng, 2017/06/12 22:26:20]

Use absolute URLs whenever possible.  Should be /images/chromium.png

+        <div class="title" main-title>Configuration Service (not fully implemented)</div>

[Ryan Tseng, 2017/06/12 22:26:20]

nit: 80 char

[cwpayton, 2017/06/12 23:40:04]

Done.

+      </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(isLoading)}}">

[Ryan Tseng, 2017/06/12 22:26:20]

does if="{{!isLoading}}" not work?

Also in general, it's preferred to have positive conditions first, then negative
(unless it makes more sense the other way)

[cwpayton, 2017/06/12 23:40:04]

if="{{!isLoading}}" does not work unfortunately. I did flip the conditionals to
positive first.

+        <template is="dom-if" if="{{_not(isEmpty)}}">
+          <template is="dom-repeat" items="[[searchList]]" as="config">
+            <config-card name="[[config.config_set]]"></config-card>
+          </template>
+        </template>
+        <template is="dom-if" if="{{isEmpty}}">
+          <config-card name="No config sets found."></config-card>
+        </template>
+      </template>
+      <template is="dom-if" if="{{isLoading}}">
+        <config-card name="Fetching configs sets..."></config-card>
+      </template>
+    </div>
+  </template>
+
+  <script>
+    Polymer({
+      is: 'front-page',
+
+      properties: {
+        configList: {
+          type: Array,
+          value: []
+        },
+
+        isEmpty: {
+          type: Boolean,
+          value: true
+        },
+
+        isLoading: {
+          type: Boolean,
+          value: true
+        },
+
+        search: {
+          type: String,
+          observer: '_searched'
+        },
+
+        searchList: {
+          type: Array,
+          value: []
+        },
+
+        url: {
+          type: String,
+          // TODO(cwpayton): Fix URL to reflect specific instances of the luci

[Ryan Tseng, 2017/06/12 22:26:20]

nit: 80 char

[cwpayton, 2017/06/12 23:40:04]

Done.

+          // config service (i.e., just "/_ah/api/..." instead of "https://luci...").
+          // Currently, this link is being left in on purpose in order to grab data
+          // for local instances, but this should change when deploying final product.
+          value: "https://luci-config.appspot.com/_ah/api/config/v1/config-sets"
+        }
+      },
+
+      _getConfigs: function(event) {
+        this.configList = event.detail.response.config_sets;
+        this.searchList = this._searched();
+        this.isLoading = false;
+        this.isEmpty = this.configList.length === 0;
+      },
+
+      _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>