config_service: Changed lists from paper-items to paper-cards, fixed

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

 <!--
   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/app-layout/app-layout.html">
 <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../bower_components/paper-search/paper-search-bar.html">
+<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
+<link rel="import" href="../../bower_components/paper-styles/shadow.html">
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <link rel="import" href="config-set-card.html">
 
 <dom-module id="front-page">
   <template>
     <style>
       .center {
-        width: 50%;
+        width: 25%;
         margin: auto;
-        text-align: center;
       }
 
+      .config-card { 
+        padding-bottom: 1%;
+        animation: fadein 1.5s;
+      }
+
+      @keyframes fadein {
+        from {opacity: 0}
+        to {opacity: 1}
+      }
+
+      .loading { text-align: center; }
+
       .search-bar {
         padding-top: 7%;
         padding-bottom: 2%;
       }
 
       paper-search-bar {
-        border-style: solid;
-        border-width: 2px;
+        @apply --shadow-elevation-4dp;
         width: 40%;
         height: 100%;
         margin: auto;
       }
     </style>
 
     <iron-ajax
         auto
         id="requestConfigs"
         url="/_ah/api/config/v1/config-sets?include_last_import_attempt=true"
         handle-as="json"
         on-response="_onGotConfigSets"
         headers="[[auth_headers]]">
     </iron-ajax>
     
     <div class="search-bar">
-      <paper-search-bar query="{{query}}"></paper-search-bar>
+      <paper-search-bar 
+          query="{{query}}"
+          hide-filter-button="true"></paper-search-bar>
     </div>
     
     <div class="config-list">
       <template is="dom-if" if="[[isLoading]]">
-        <div class="center">Fetching config sets...</div>
+        <div class="center loading">
+          <paper-spinner active></paper-spinner>
+        </div>
       </template>
       <template is="dom-if" if="[[_not(isLoading)]]">
         <template is="dom-if" if="[[_isEmpty(searchResults)]]">
           <div class="center">No config sets found.</div>
         </template>
         <template is="dom-if" if="[[_not(_isEmpty(searchResults))]]">
           <template is="dom-repeat" items="[[searchResults]]" as="config">
-            <config-set-card 
-                name="[[config.config_set]]" 
-                last-import-attempt="[[_getLastImportAttempt(config.last_import_attempt)]]" 
-                on-tap="_handleClick">
-            </config-set-card>
+            <div class="center config-card">
+              <config-set-card
+                  name="[[config.config_set]]" 
+                  last-import-attempt="[[_getLastImportAttempt(config.last_import_attempt)]]">
+              </config-set-card>
+            </div>
           </template>
         </template>
       </template>
     </div>
   </template>
-
   <script>
     Polymer({
       is: 'front-page',
 
       properties: {
         configSetList: {
           type: Array,
           value: () => []
         },
 
         isLoading: {
           type: Boolean,
           value: true
         },
 
         query: {
           type: String,
           observer: '_updateSearchResults'
         },
 
         searchResults: {
           type: Array,
           value: () => []
         }
       },
 
+      _formatName: function(name) {
+        var tempName = name.substring(name.indexOf("/") + 1);
+        return tempName.includes("/") ?
+            tempName.substring(0, tempName.indexOf("/")) : tempName;
+      },
+
       _getLastImportAttempt: function(lastImportAttempt) {
         if (lastImportAttempt) {
           return lastImportAttempt;
         } else {
           return null;
         }
       },
 
       _isEmpty: function(array) {
         return array.length === 0;
       },
 
       _onGotConfigSets: function(event) {
         this.configSetList = event.detail.response.config_sets;
         this._updateSearchResults();
         this.isLoading = false;
       },
 
       _not: function(b) {
         return !b;
       },
 
       _updateSearchResults: function() {
-        this.searchResults = this.configSetList.filter(e => e.config_set.includes(this.query));
-      },
-
-      _handleClick: function(event) {
-        window.location = window.location.href + event.model.config.config_set;
+        // this method sorts search results by the name of the config set, that way

[Sergey Berezin, 2017/07/13 02:59:31]

nit: s/this/This/ (capitalize the first word).

+        // the list doesn't consist of all projects followed by all services due to
+        // the path beginning with "projects/" or "services/"
+        var tempResults = this.configSetList.filter(e => e.config_set.includes(this.query));
+        tempResults.sort(function(a, b) {
+          return this._formatName(a.config_set).localeCompare(this._formatName(b.config_set));
+        }.bind(this));
+        this.searchResults = tempResults;
       },
 
     });
   </script>
 </dom-module>