Add controls to buildbot dashboard

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..b214319012ffe010e8e19e830fa8266ae1ac8809 100644
--- a/status/templates/buildbot_dash.html
+++ b/status/templates/buildbot_dash.html
@@ -15,14 +15,6 @@
       text-align: center;
       font-size: 15px;
     }
-    h1 {
-      font-size: 1.7em;
-      margin-bottom: 2px;
-      margin-top: 5px;
-    }
-    #maincontent {
-      padding: 10px;
-    }
     #spacer-left {
       width: 160px;
     }
@@ -36,188 +28,6 @@
       font-size: 1em;
     }
     </style>
-    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
-    <script type="text/javascript">
-    (function() {
-      var chartsReady = false;
-      var ChartsReady = new Promise(function(resolve, reject) {
-        if (chartsReady) {
-          resolve();
-        } else {
-          google.setOnLoadCallback(resolve);
-        }
-      })
-
-      google.load("visualization", "1.0", {"packages": ["corechart"]});
-      google.setOnLoadCallback(function() { chartsReady = true; });
-
-      var builds = [];
-      var buildTimes = {};
-      var stepTimes = {};
-      var buildResults = {};
-      var stepResults = {};
-
-      var blacklist = [];
-      var match = [];
-
-      var palette = [
-        "#03DCFB", "#00C2DD", "#008699", "#006C7C", "#00535E", // Blue
-        "#FFAE00", "#FFAE00", "#FAAB00", "#CA8A00", "#9A6900", // Yellow
-        "#FF1300", "#FF1300", "#FA1200", "#CA0F00", "#9A0B00", // Red
-      ];
-      var paletteRowLen = 5;
-      var colors = [
-        palette[2*paletteRowLen+3],
-        palette[1*paletteRowLen+3],
-        palette[0*paletteRowLen+3],
-      ];
-
-      function reloadBuilds(start, end) {
-        console.time("loadData");
-        url = "/json/builds";
-        if (!!start) {
-          url += "?start=" + start;
-          if (!!end) {
-            url += "&end=" + end;
-          }
-        }
-        document.getElementById("spinner").style.display = "flex";
-        document.getElementById("chart_container").style.display = "none";
-        sk.get(url).then(JSON.parse).then(function(json) {
-          console.timeEnd("loadData");
-          builds = json;
-          processBuilds();
-          document.getElementById("spinner").style.display = "none";
-          document.getElementById("chart_container").style.display = "flex";
-        });
-      }
-
-      function includeBuilder(builder) {
-        for (var i = 0; i < blacklist.length; i++) {
-          if (builder.match(blacklist[i])) {
-            return false;
-          }
-        }
-        for (var i = 0; i < match.length; i++) {
-          if (!builder.match(match[i])) {
-            return false;
-          }
-        }
-        return true;
-      }
-
-      function mean(data) {
-        // TODO(borenet): Use a more stable algorithm.
-        var sum = 0;
-        for (var i = 0; i < data.length; i++) {
-          sum += data[i];
-        }
-        return sum / data.length;
-      }
-
-      function processBuilds() {
-        console.time("processBuilds");
-        buildTimes = {};
-        stepTimes = {};
-        buildResults = {};
-        stepResults = {};
-
-        for (var i = 0; i < builds.length; i++) {
-          var build = builds[i];
-          if (!includeBuilder(build.Builder)) {
-            continue;
-          }
-
-          var duration = build.Finished - build.Started;
-          if (!buildTimes[build.Builder]) {
-            buildTimes[build.Builder] = [];
-          }
-          buildTimes[build.Builder].push(duration);
-
-          if (!buildResults[build.Builder]) {
-            buildResults[build.Builder] = [];
-          }
-          buildResults[build.Builder].push(build.Results == 0 ? 0 : 1);
-
-          for (var j = 0; j < build.Steps.length; j++) {
-            var step = build.Steps[j];
-            // Always exclude these steps.
-            if (step.Name == "steps" || step.Name == "Uncaught Exception") {
-              continue;
-            }
-            var stepDuration = step.Finished - step.Started;
-            if (!stepTimes[step.Name]) {
-              stepTimes[step.Name] = [];
-            }
-            stepTimes[step.Name].push(stepDuration);
-
-            if (!stepResults[step.Name]) {
-              stepResults[step.Name] = [];
-            }
-            stepResults[step.Name].push(step.Results == 0 ? 0 : 1);
-          }
-        }
-
-        console.timeEnd("processBuilds");
-        drawCharts();
-      }
-
-      function drawCharts() {
-        console.time("drawCharts");
-        // Draw charts.
-        ChartsReady.then(function() {
-          var chart = null;
-
-          // Build times.
-          chart = document.getElementById("build_times_chart");
-          chart.colors = colors;
-          chart.draw(
-              [["string", "Builder"],
-               ["number", "Time (s)"]],
-              generateStats(buildTimes, mean));
-
-          // Step times.
-          chart = document.getElementById("step_times_chart");
-          chart.colors = colors;
-          chart.draw(
-              [["string", "Step"],
-               ["number", "Time (s)"]],
-              generateStats(stepTimes, mean));
-
-          // Build failure rate.
-          chart = document.getElementById("build_failure_rate_chart");
-          chart.colors = colors;
-          chart.draw(
-              [["string", "Builder"],
-               ["number", "Failure Rate"]],
-              generateStats(buildResults, mean));
-
-          // Step failure rate.
-          chart = document.getElementById("step_failure_rate_chart");
-          chart.colors = colors;
-          chart.draw(
-              [["string", "Step"],
-               ["number", "Failure Rate"]],
-              generateStats(stepResults, mean));
-
-          console.timeEnd("drawCharts");
-        });
-      }
-
-      function generateStats(data, aggregator) {
-        var stats = [];
-        for (var series in data) {
-          stats.push([series, aggregator(data[series])]);
-        }
-        stats.sort(function(a, b) {
-          return b[1] - a[1];
-        });
-        return stats;
-      }
-
-      sk.WebComponentsReady.then(function() { reloadBuilds(); });
-    })();
-    </script>
   </head>
   <body fullbleed vertical layout unresolved>
     <core-header-panel flex>
@@ -232,19 +42,7 @@
           <login-sk></login-sk>
         </div>
       </core-toolbar>
-      <div id="maincontent" vertical layout>
-        <div id="spinner" horizontal layout center fit>
-          <div vertical layout center flex>
-            <paper-spinner active></paper-spinner>
-          </div>
-        </div>
-        <div id="chart_container" vertical layout>
-          <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>
-          <bar-chart-sk heading="Step Failure Rate" id="step_failure_rate_chart"></bar-chart-sk>
-        </div>
-      </div>
+      <buildbot-dash-sk></buildbot-dash-sk>
     </core-header-panel>
     <div horizontal layout>
       <div flex></div>