Merge "Add summary info to home page."

app/js/controllers/home.js

@@ -9,6 +9,7 @@ function HomeCtrl(datasetService) {
 
   // ViewModel
   var vm = this;
+  vm.focus = 0;
 
   datasetService.list().then(function(response) {
     vm.tempest = response.data.tempest;

app/js/directives/tempest-summary.js

@@ -7,8 +7,11 @@ var directivesModule = require('./_index.js');
  */
 function tempestSummary() {
   var controller = function($scope, $attrs, datasetService) {
-    // TODO get extra data here
-    // (may require raw details, or extra metadata inside config.json)
+    $scope.$watch('dataset', function(dataset) {
+      var stats = dataset.stats;
+      $scope.stats = stats;
+      $scope.timeDiff = (new Date(stats.end) - new Date(stats.start)) / 1000;
+    });
   };
 
   return {

app/js/filters/seconds-time.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var d3 = require('d3');
+
+var filtersModule = require('./_index.js');
+
+var secondsToTime = function(seconds) {
+  var format = d3.format('02d');
+
+  var hours = Math.floor(seconds / 60 / 60);
+  seconds = seconds - (hours * 60 * 60);
+
+  var minutes = Math.floor(seconds / 60);
+  seconds = Math.floor(seconds - minutes * 60);
+
+  var ret = format(minutes) + ':' + format(seconds);
+  if (hours > 0) {
+    ret = hours + ':' + ret;
+  }
+
+  return ret;
+};
+
+filtersModule.filter('secondsToTime', function() { return secondsToTime; });

app/views/directives/tempest-summary.html

@@ -1,15 +1,55 @@
 <div class="panel panel-default">
     <div class="panel-heading">
-        <h3 class="panel-title">{{ dataset.name }}</h3>
+        <h3 class="panel-title">
+            {{dataset.name}}
+            <span class="text-muted" style="font-size: 65%">
+                {{stats.start | date:'d MMM, yyyy'}}
+            </span>
+        </h3>
     </div>
     <div class="panel-body">
-        More details go here
+        <div class="col-xs-3 text-center">
+            <span class="huge">{{timeDiff | secondsToTime}}</span>
+            <br>
+            runtime
+        </div>
+        <div class="col-xs-3 text-center">
+            <span class="huge">{{stats.count}}</span>
+            <br>
+            tests run
+        </div>
+        <div class="col-xs-3 text-center">
+            <span class="huge text-danger">{{stats.failures.length}}</span>
+            <br>
+            failed
+        </div>
+        <div class="col-xs-3 text-center">
+            <span class="huge text-primary">{{stats.skips.length}}</span>
+            <br>
+            skipped
+        </div>
     </div>
     <div class="panel-footer clearfix">
         <div class="btn-group pull-right">
             <a type="button"
                class="btn btn-default"
-               ui-sref="timeline({datasetId: dataset.id})">Timeline</a>
+               ui-sref="timeline({datasetId: dataset.id})">Details</a>
        </div>
     </div>
 </div>
+
+<div class="panel panel-danger" ng-if="stats.failures.length > 0">
+    <div class="panel-heading">
+        <h3 class="panel-title">Failures</h3>
+    </div>
+    <div class="list-group">
+        <a class="list-group-item" ng-repeat="fail in stats.failures">
+            <h4 class="list-group-item-heading">
+                {{fail.name | split:'.' | slice:-2 | join:'.'}}
+            </h4>
+            <p class="list-group-item-text">
+                {{fail.details}}
+            </p>
+        </a>
+    </ul>
+</div>

app/views/home.html

@@ -15,7 +15,7 @@
     </div>
     <div class="row" ng-if="!!home.tempest.length">
         <div class="col-lg-8">
-            <tempest-summary ng-if="home.tempest.length >= 1" dataset="home.tempest[0]"></tempest-summary>
+            <tempest-summary ng-if="home.tempest.length >= 1" dataset="home.tempest[home.focus]"></tempest-summary>
         </div>
         <div class="col-lg-4" ng-if="home.tempest.length > 1">
             <div class="panel panel-default">
@@ -23,14 +23,24 @@
                     <h3 class="panel-title">Additional Datasets</h3>
                 </div>
 
-                <div class="list-group">
-                    <a class="list-group-item"
-                       ng-repeat="dataset in home.tempest"
-                       ng-if="$index > 0"
-                       ui-sref="timeline({datasetId: dataset.id})">
+                <ul class="list-group">
+                    <li class="list-group-item"
+                        ng-repeat="dataset in home.tempest"
+                        ng-if="$index != home.focus"
+                        ng-click="home.focus = $index"
+                        style="cursor: pointer">
                         {{ dataset.name }}
-                    </a>
-                </div>
+
+                        <small class="text-muted" style="font-size: 75%">
+                            {{dataset.stats.start | date:'MM/d/yyyy'}}
+                        </small>
+
+                        <a class="btn btn-default btn-xs pull-right"
+                           ui-sref="timeline({datasetId: dataset.id})">
+                            Details
+                        </a>
+                    </li>
+                </ul>
             </div>
         </div>
     </div>