config_service: Fixed multiple ajax requests in the front page while the page determines whether a …

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">
@@ skipping 30 matching lines @@
 
       paper-search-bar {
         @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}}"
@@ skipping 39 matching lines @@
         },
 
         query: {
           type: String,
           observer: '_updateSearchResults'
         },
 
         searchResults: {
           type: Array,
           value: () => []
+        },
+
+        user: {
+          type: Object,
+          value: () => null,
+          notify: true,
+          observer: '_fetchConfigs'
         }
       },
 
+      _fetchConfigs: function() {
+        // If the google auth API has been initialized,
+        // and the user is not signed in, then generate the
+        // ajax request. If the google auth API has been
+        // initialized, and the user is signed in, we wait for
+        // the auth headers to be set, and then generate the
+        // ajax request to get the config sets.
+        if (this.initialized && this.user) {
+          if (this.user.getBasicProfile()){
+            window.setTimeout(function() {

[Ryan Tseng, 2017/07/14 18:52:30]

Can we bind to and event where the auth_header being set instead?  Timers are
usually only used as a last resort.

+              if (this.auth_headers) {
+                this.isLoading = true;
+                this.$.requestConfigs.generateRequest();
+              } else {
+                this._fetchConfigs.bind(this);
+              }
+            }.bind(this), 50);
+          } else {
+            this.isLoading = true;
+            this.$.requestConfigs.generateRequest();
+          }
+        }
+      },
+
       _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 {
@@ skipping 22 matching lines @@
         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>