buildbot dashboard: Add time period selector

status/templates/buildbot_dash.html

Index: status/templates/buildbot_dash.html
diff --git a/status/templates/buildbot_dash.html b/status/templates/buildbot_dash.html
index a4d945fdb39bc8dc3838bebee0a19125c8e3c644..df1f28211498b60f83d47135b509651f12017963 100644
--- a/status/templates/buildbot_dash.html
+++ b/status/templates/buildbot_dash.html
@@ -15,6 +15,9 @@
       text-align: center;
       font-size: 15px;
     }
+    paper-button {
+      text-transform: none;
+    }
     h1 {
       font-size: 1.7em;
       margin-bottom: 2px;
@@ -215,7 +218,39 @@
         return stats;
       }
 
-      sk.WebComponentsReady.then(function() { reloadBuilds(); });
+      function updateTimePeriod(timePeriod) {
+        var now = Math.round(new Date().getTime() / 1000);
+        reloadBuilds(now - timePeriod * 3600, now);
+      }
+
+      sk.WebComponentsReady.then(function() {
+        $$$("#time_select_button").addEventListener("click", function(e) {
+          $$$("#time_select").open();
+        });
+        var timeMenu = $$$("#time_menu");
+        timeMenu.addEventListener("core-select", function(e) {
+          $$$("#time_select").close();
+          if (e.detail.isSelected) {
+            $$$("#time_select_label").innerHTML = e.detail.item.innerHTML;
+            updateTimePeriod(e.detail.item.getAttribute("value"));
+          }
+        });
+
+        // Load builds from the pre-selected time period.
+        var timePeriod = null;
+        for (var i = 0; i < timeMenu.children.length; i++) {
+          var child = timeMenu.children[i];
+          if (child.classList.contains("core-selected")) {
+            $$$("#time_select_label").innerHTML = child.innerHTML;
+            timePeriod = child.getAttribute("value");
+          }
+        }
+        if (timePeriod) {
+          updateTimePeriod(timePeriod);
+        } else {
+          throw "No time period provided! Can't load data.";
+        }
+      });
     })();
     </script>
   </head>
@@ -239,6 +274,21 @@
           </div>
         </div>
         <div id="chart_container" vertical layout>
+          <div class="controls">
+            Results from last
+            <paper-button id="time_select_button">
+              <div id="time_select_label"></div>
+              <core-icon icon="arrow-drop-down"></core-icon>
+            </paper-button>
+            <paper-dropdown id="time_select">
+              <core-menu id="time_menu" selected=0>
+                <paper-item value=24>24 hours</paper-item>
+                <paper-item value=72>3 days</paper-item>
+                <paper-item value=168>1 week</paper-item>
+                <paper-item value=336>2 weeks</paper-item>
+              </core-menu>
+            </paper-dropdown>
+          </div>
           <bar-chart-sk heading="Build Times" id="build_times_chart"></bar-chart-sk>
           <bar-chart-sk heading="Step Times" id="step_times_chart"></bar-chart-sk>
           <bar-chart-sk heading="Build Failure Rate" id="build_failure_rate_chart"></bar-chart-sk>