Adding gantt chart to Build Status page on Buildbot Masters

masters/master.chromiumos/templates/build.html

 <!--
 # Originally from config for buildbot.
 # See third_party/buildbot_8_4p1/COPYING
 -->
 
 {% extends "layout.html" %}
 {% import 'forms.html' as forms %}
 {% from "change_macros.html" import change with context %}
 
 {% 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()|escapejs }}',
+       '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() }}
 </h1>
 
 <div class="column">
 
 {% if not b.isFinished() %}
   <h2>Build In Progress:</h2>
 
@@ skipping 151 matching lines @@
         </li>
       {% endfor %}
     </ul>  
   </li>
 {% endfor %}
 
 {# Close out all open indentation sections. #}
 {% 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">
 
 <h2>Build Properties:</h2>
 
 <table class="info" width="100%">
 <tr><th>Name</th><th>Value</th><th>Source</th></tr>
 
 {% for p in properties %}
   {% if p.name != "blamelist" %}
@@ skipping 18 matching lines @@
   <tr><td class="left">End</td><td>{{ end }}</td></tr>
 {% endif %}
   <tr {{ 'class="alt"' if end else '' }}><td class="left">Elapsed</td><td>{{ elapsed }}</td></tr>
 </table>
 
 </div>
 
 <br style="clear:both"/>
   
 {% endblock %}