Add template for waterfall state probe/display.

masters/master.chromium/templates/waterfall-state.html

+{% block status -%}
+
+<style>
+  #waterfall-status-draining {
+    background-color: orange;
+    font-size: 2em;
+    text-align: center;
+  }
+</style>
+
+<script>
+  // Regular expression to match the waterfall URL up through the master name.
+  //
+  // Input URL: https://build.chromium.org/p/chromium/console
+  // Output:    https://build.chromium.org/p/chromium/
+  var endpointRe = /(.+\/[ip]\/(.+)\/)/
+
+  function waterfallRoot() {
+    var match = endpointRe.exec(window.location.href);
+    if (match) {
+      return match[0] + "json/";
+    }
+    if (window.location.hostname === "localhost") {
+      // Running on developer system.
+      return window.location.origin + "/json/";
+    }
+    throw ("Unable to get waterfall root for: " + window.location.href);
+  }
+
+  // This implemntation originated from:
+  // http://www.html5rocks.com/en/tutorials/es6/promises/#toc-promisifying-xmlhttprequest
+  function get(url) {
+    return new Promise(function(resolve, reject) {
+      var req = new XMLHttpRequest();
+      req.open('GET', url);
+
+      req.onload = function() {
+        // This is called even on 404 etc
+        // so check the status
+        if (req.status == 200) {
+          // Resolve the promise with the response text
+          resolve(req.response);
+        }
+        else {
+          // Otherwise reject with the status text
+          // which will hopefully be a meaningful error
+          reject(Error(req.statusText));
+        }
+      };
+
+      // Handle network errors
+      req.onerror = function() {
+        reject(Error("Network Error"));
+      };
+
+      // Make the request
+      req.send();
+    });
+  }
+
+  function loadJson(endpoint) {
+    var url = waterfallRoot() + endpoint;
+    return get(url).then(function(response) {
+      return JSON.parse(response);
+    });
+  }
+
+  function getWaterfallStatus() {
+    if (typeof Promise === "undefined") {
+      console.log("Promises are not supported. Status will not be reported.")
+      return;
+    }
+
+    // Get a reference to our status element.
+    var st = document.getElementById("waterfall-status-draining");
+    if (!st) {
+      return;
+    }
+
+    loadJson("accepting_builds").then(function(response) {
+      st.style.display = (!!response.accepting_builds) ? ("none") : ("block");
+    });
+  }
+</script>
+
+<!-- Will be shown if the waterfall is draining. -->
+<div id="waterfall-status-draining" style="display: none">
+  The waterfall is currently
+  <a href="https://chromium.googlesource.com/infra/infra/+/master/doc/users/services/buildbot/index.md#Draining" target="_blank">
+  draining</a>.
+</div>
+
+<script>
+  getWaterfallStatus();
+</script>
+
+{% endblock %}