Add build failure rate chart on homepage

This change includes a new build failure rate chart on dashboard
homepage. This chart will show the normalized amount of failures when
compared to the amount of total builds.

We believe that this will help us identifying failure trends
independently on the amount of builds running at a given moment.

Change-Id: Ic723a2159e55d61e4648df5e0b01bf37bdf3bdad
Co-Authored-By: Caio Carrara <ccarrara@thoughtworks.com>

app/js/controllers/home.js

@@ -14,6 +14,7 @@ function HomeCtrl(healthService) {
     var projects = {};
     var passEntries = [];
     var failEntries = [];
+    var failRateEntries = [];
 
     for (var dateString in data.runs) {
       var date = dateString;
@@ -58,6 +59,11 @@ function HomeCtrl(healthService) {
         x: time,
         y: totalFail
       });
+
+      failRateEntries.push({
+        x: new Date(date).getTime(),
+        y: (totalFail / (totalFail + totalPass)) * 100
+      });
     }
 
     vm.chartData = [
@@ -65,6 +71,11 @@ function HomeCtrl(healthService) {
       { key: 'Failures', values: failEntries, color: "red" }
     ];
 
+    vm.chartDataRate = [
+      { key: '% Failures', values: failRateEntries }
+    ];
+
+
     vm.projects = Object.keys(projects).map(function(name) {
       return projects[name];
     });

app/js/directives/chart-line.js

@@ -29,6 +29,10 @@ function chartLine() {
 
       chart.xAxis.tickFormat(function(d) { return d3.time.format("%x")(new Date(d)); });
 
+      if (attrs.forcey) {
+        chart.forceY(JSON.parse(attrs.forcey));
+      }
+
       svg.datum(data).call(chart);
     };
 

app/views/home.html

@@ -9,10 +9,18 @@
         <div class="col-lg-12">
             <div class="panel panel-default">
                 <div class="panel-heading">
-                    <h3 class="panel-title">Builds</h3>
+                    <h3 class="panel-title">Total Builds</h3>
                 </div>
                 <div class="panel-body">
-                    <chart-line data="home.chartData" width="100%" height="450"></chart-line>
+                    <chart-line data="home.chartData" width="100%" height="250"></chart-line>
+                </div>
+            </div>
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <h3 class="panel-title">Build Failure Rate</h3>
+                </div>
+                <div class="panel-body">
+                    <chart-line data="home.chartDataRate" width="100%" height="250" forceY="[0,100]"></chart-line>
                 </div>
             </div>
         </div>