Show real data on the builder detail page

Get data for the recent builds on a specific builder, and display
it in the table in a nice way.

2 files changed, 60 insertions, 26 deletions

diff --git a/js/main.js b/js/main.js
index 77d5c86..8afcf2a 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,6 +1,16 @@
 var apiBase = 'http://ciat.baserock.org:8010/json';
 var app = angular.module('ciat', ['ngRoute']);
 
+function checkInArray(array, key) {
+    if (array) {
+        if (array.indexOf(key) > -1) {
+            return true;
+        }
+    }
+    return false;
+}
+
+
 app.config(['$httpProvider', function($httpProvider) {
         $httpProvider.defaults.useXDomain = true;
         delete $httpProvider.defaults.headers.common['X-Requested-With'];
@@ -20,15 +30,6 @@ app.config(['$routeProvider', function($routeProvider) {
 }]);
 
 app.controller('VisualisationController', function($scope, $http, $q, $interval) {
-        function checkInArray(array, key) {
-            if (array) {
-                if (array.indexOf(key) > -1) {
-                    return true;
-                }
-            }
-            return false;
-        }
-
         function load() {
             $scope.steps = [];
             $scope.integrations = [];
@@ -183,11 +184,29 @@ app.controller('VisualisationController', function($scope, $http, $q, $interval)
 
 app.controller('BuilderDetailController',
     function($scope, $http, $routeParams) {
-        $http.get(apiBase + '/builders/' + $routeParams.name).then(function(builder) {
+        var builderUrl = apiBase + '/builders/' + $routeParams.name;
+
+        // GET details of the builder
+        $http.get(builderUrl).then(function(builder) {
             $scope.builder = {
                 name: $routeParams.name,
                 data: builder.data
             };
         });
+
+        $scope.builds = [];
+        // GET list of all builds from this builder
+        $http.get(builderUrl + '/builds/_all').then(function(response) {
+            for (var n in response.data) {
+                var build_data = response.data[n];
+                $scope.builds.push({
+                    success: checkInArray(build_data.text, 'successful'),
+                    number: n,
+                    startTime: build_data.times[0],
+                    finishTime: build_data.times[1],
+                    data: build_data
+                });
+            }
+        });
     }
 );
diff --git a/partials/builder_detail.html b/partials/builder_detail.html
index 8eae351..f4b694e 100644
--- a/partials/builder_detail.html
+++ b/partials/builder_detail.html
@@ -4,24 +4,39 @@
             <h3 class="panel-title"><strong>{{builder.name}}</strong></h3>
         </div>
         <div class="panel-body">
-            <p><strong>State:</strong> {{builder.data.state}}</p>
-            <p><strong>Recent Builds:</strong></p>
-            <table class="table table-striped table-hover">
-            <thead><strong>
-                <td>Time</td>
-                <td>Revision</td>
-                <td>Result</td>
-                <td>Number</td>
-            </strong>
+            <p><strong>State:</strong> {{builder.data.state == 'building' ? 'In progress' : 'Idle'}}</p>
+            <p><strong>Recent Jobs:</strong></p>
+            <table class="table table-striped table-hover"
+                   ng-if="builds.length > 0">
+            <thead>
+                <td><strong>Job ID</strong></td>
+                <td><strong>Start Time</strong></td>
+                <td><strong>Elapsed Time</strong></td>
+                <!-- TODO <td><strong>Definitions SHA</strong></td> -->
+                <td><strong>Result</strong></td>
             </thead>
             <tbody>
-                <!-- TODO: Load all builds into $scope.builds rather than
-                           using builder.data.cachedBuilds -->
-                <tr ng-repeat="build in builder.data.cachedBuilds">
-                    <td>build.time</td>
-                    <td>build.revision</td>
-                    <td>build.result</td>
-                    <td>{{build}}</td>
+                <tr ng-repeat="build in builds">
+                    <td>{{build.number}}</td>
+                    <td>{{build.startTime * 1000 | date: 'EEE dd MMM yyyy, HH:mm:ss'}}</td>
+                    <td>
+                        <span ng-if="build.finishTime">
+                        {{(build.finishTime - build.startTime) * 1000 | date: 'HH:mm:ss'}}
+                        </span>
+                    </td>
+                    <!-- <td>{{build.definitions_sha}}</td> -->
+                    <td>
+                        <span class="label"
+                              ng-if="build.finishTime"
+                              ng-class="{'label-success': build.success,
+                                         'label-danger': !build.success}">
+                            {{build.success ? 'Successful' : 'Failed'}}
+                        </span>
+                        <span class="label label-warning"
+                              ng-if="!build.finishTime">
+                            In progress
+                        </span>
+                    </td>
                 </tr>
             </tbody>
             </table>