Adding gantt chart to Build Status page on Buildbot Masters

masters/master.chromium.perf.fyi/templates/build.html

Index: masters/master.chromium.perf.fyi/templates/build.html
diff --git a/masters/master.chromium.perf.fyi/templates/build.html b/masters/master.chromium.perf.fyi/templates/build.html
index ff34d0584c4f450dfc64612f5ddaa484487d5228..ebe31ef9b2379d69db11e2ef92a355c406c7d704 100644
--- a/masters/master.chromium.perf.fyi/templates/build.html
+++ b/masters/master.chromium.perf.fyi/templates/build.html
@@ -4,6 +4,17 @@
 
 {% block content %}
 
+<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+<script type="text/javascript" src="/gantt_chart.js"></script>
+<script type="text/javascript">
+  var rawSteps = [
+    {% for s in b.getSteps() %}
+      {'name': '{{ s.getName() }}',

[dsansome, 2016/11/08 04:49:11]

Do any step names contain ' characters?
Use the escapejs filter:
https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#escapejs

[philwright, 2016/11/09 04:58:38]

Done.

+       'start': new Date({{ s.getTimes()[0] }}*1000),
+       'end': new Date ({{ s.getTimes()[1] }}*1000)},
+    {% endfor %}
+  ];
+</script>
 <h1>
 Builder <a href="{{ path_to_builder }}">{{ b.getBuilder().getName() }}</a>
 Build #{{ b.getNumber() }}
@@ -185,7 +196,12 @@ Build #{{ b.getNumber() }}
 {% for _ in range(-1, nest_level) %}
  </li></ol>
 {% endfor %}
-
+  <div>
+    <button type="button" onclick="toggleChart(rawSteps);">
+      SHOW/HIDE Gantt Chart
+    </button>
+    <div id="chart_div"></div>
+  </div>
 </div>
 <div class="column">