Add task-page

appengine/swarming/elements/res/imp/common/common-behavior.html

 <!--
   Copyright 2016 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.
 
   It contains the definition of the following Behaviors:
 
     SwarmingBehaviors.CommonBehavior
 
   To use it, include
@@ skipping 20 matching lines @@
 
       // _getJsonAsync makes an XHR to a url, parses the response as JSON
       // and sticks the resulting object into the property with the name given
       // by "bindTo". If busy is defined, the property with that name will be
       // set to true while the request is in flight and false afterwards.
       // request headers (e.g. authentication) and query params will be used if
       // provided. Query params is an object like {String:Array<String>}. On
       // error, bindTo will be set to false.  It is not set to undefined
       // because computed values in Polymer don't fire if a property is
       // undefined. Clients should check that bindTo is not falsey.
+      // To avoid multiple requests clobering one another, an object _jsonAsync
+      // is created on "this" to debounce requests - the most recent request
+      // will win out.
        _getJsonAsync: function(bindTo, url, busy, headers, params) {
-        if (!bindTo || !url) {
-          console.log("Need at least a polymer element to bind to and a url");
+        if (!bindTo || !url || !busy) {
+          console.log("Need at least a polymer element to bind to, a busy element, and a url");
           return;
         }
-        if (busy) {
-          this.set(busy, true);
-        }
+        this.set(busy, true);
+        var now = new Date();
+        this._jsonAsync = this._jsonAsync || {};
+        this._jsonAsync[bindTo] = now;
         if (params) {
           url = url + "?" + sk.query.fromParamSet(params);
         }
         sk.request("GET", url, "", headers).then(JSON.parse).then(function(json){
+          if (this._jsonAsync[bindTo] !== now) {
+            console.log("ignoring result because a second request happened.");
+            this.set(busy, false);
+            return;
+          }
           this.set(bindTo, json);
-          if (busy) {
-            this.set(busy, false);
-          }
+          this.set(busy, false);
         }.bind(this)).catch(function(reason){
           console.log("Reason for failure of request to " + url, reason);
+
+          if (this._jsonAsync[bindTo] !== now) {
+            console.log("ignoring failure because a second request happened.");
+            this.set(busy, false);
+            return;
+          }
           this.set(bindTo, false);
-          if (busy) {
-            this.set(busy, false);
-          }
+          this.set(busy, false);
         }.bind(this));
       },
 
       _humanDuration: function(timeInSecs) {
         return sk.human.strDuration(timeInSecs) || "0s";
       },
 
       _not: function(a) {
         return !a;
       },
@@ skipping 31 matching lines @@
           return "eons";
         }
         if (!second) {
           second = new Date();
         }
         return this._humanDuration((second.getTime() - first.getTime())/1000);
       },
     };
   })();
 </script>