Added report templates

workspace_tools/ci_templates/library_build/build_report.html

@@ -1,19 +1,26 @@
-<div>
+<div class="toggleshow{% if report.failing|length == 0 %} toggleshow-hide{% endif %}">
   <h3>
-    {% if report.failing|length > 0 %}
-    <span class="redbold">[FAIL]</span>
-    {% else %}
-    <span class="greenbold">[OK]</span>
-    {% endif %}
+    <a href="#" class="toggleshow-title">
+      <span class="toggleshow-arrow"></span>
+      {% if report.failing|length > 0 %}
+      <span class="redbold">[FAIL]</span>
+      {% else %}
+      <span class="greenbold">[OK]</span>
+      {% endif %}
 
-    {{report.target}} - Passing: {{report.passing|length}}, Failing: {{report.failing|length}}</h3>
-  <h4>Failing</h4>
-  {% with build = report.failing %}
-  {% include 'build_report_table.html' %}
-  {% endwith %}
+      {{report.target}} - Passing: {{report.passing|length}}, Failing: {{report.failing|length}}
+    </a>
+  </h3>
 
-  <h4>Passing</h4>
-  {% with build = report.passing %}
-  {% include 'build_report_table.html' %}
-  {% endwith %}
+  <div class="toggleshow-body">
+    <h4 class="redbold">Failing</h4>
+    {% with build = report.failing %}
+    {% include 'build_report_table.html' %}
+    {% endwith %}
+
+    <h4 class="greenbold">Passing</h4>
+    {% with build = report.passing %}
+    {% include 'build_report_table.html' %}
+    {% endwith %}
+  </div>
 </div>

workspace_tools/ci_templates/library_build/report.html

@@ -7,3 +7,57 @@
 {% for report in passing_builds %}
 {% include 'build_report.html' %}
 {% endfor %}
+
+<script>
+  var elements = document.querySelectorAll(".toggleshow"),
+      hideClass = 'toggleshow-hide';
+
+  for (var i = 0; i < elements.length; i++) {
+    var arrow = elements[i].querySelector(".toggleshow-arrow");
+    // Initial hide/show based on class
+    // Update arrow as well
+    if (containsClass(elements[i], 'toggleshow-hide')) {
+      toggleDisplay(elements[i]);
+      changeArrow(arrow, false);
+    } else {
+      changeArrow(arrow, true);
+    }
+
+    // Add click handler
+    addClick(elements[i], toggleDisplay);
+  }
+
+  function containsClass(element, className) {
+    var eleClassName = ' ' + elements[i].className + ' ';
+    return eleClassName.indexOf(' ' + className + ' ') > -1;
+  }
+
+  function toggleDisplay(parentElement) {
+    var body = parentElement.querySelector(".toggleshow-body"),
+        arrow = parentElement.querySelector(".toggleshow-arrow");
+
+    if (body.style.display == 'block' || body.style.display == '') {
+      body.style.display = 'none';
+      changeArrow(arrow, false);
+    } else {
+      body.style.display = 'block';
+      changeArrow(arrow, true);
+    }
+  }
+
+  function changeArrow(element, visible) {
+    if (visible) {
+      element.innerHTML = '&#9650';
+    } else {
+      element.innerHTML = '&#9660';
+    }
+  }
+
+  function addClick(parentElement, func) {
+    parentElement.querySelector(".toggleshow-title").addEventListener("click", function(e) {
+      func(parentElement);
+      e.preventDefault();
+      return false;
+    });
+  }
+</script>