Add onclick property on the rules on dashboard

front/src/css/dashboard.css

@@ -51,7 +51,7 @@ h4 {
 }
 .notations {
   display: table;
-  width: 90%;
+  width: 80%;
   margin: 0 10%;
   border-spacing: 1em;
 }
@@ -63,21 +63,25 @@ h4 {
   height: 2.5em;
   vertical-align: middle;
 }
-.notations .notation {
+.notations .category {
   font-weight: bold;
   text-align: center;
+  width: 20%;
 }
 .notations .criteria {
   font-weight: normal;
+  width: 75%;
 }
-.notations .A,
-.notations .B,
-.notations .C,
-.notations .D,
-.notations .E,
-.notations .F,
-.notations .NA {
+.notations .A.categoryScore,
+.notations .B.categoryScore,
+.notations .C.categoryScore,
+.notations .D.categoryScore,
+.notations .E.categoryScore,
+.notations .F.categoryScore,
+.notations .NA.categoryScore {
   width: 2.5em;
+  max-width: 2.5em;
+  min-width: 2.5em;
   font-size: 2em;
   text-align: center;
   border-radius: 0.5em;
@@ -95,6 +99,7 @@ h4 {
   font-size: 1em;
   color: transparent;
   margin: 0 auto;
+  border-radius: 0.5em;
 }
 .notations .A {
   /* green */
@@ -124,12 +129,18 @@ h4 {
   /* Non applicable */
   background: #CCC;
 }
-.notations .icon-eye {
-  color: #9c4274;
+.notations .criteria .table {
+  width: 100%;
+}
+.notations .criteria .table > div:hover > div {
+  background: #F1C40F;
   cursor: pointer;
 }
-.notations .criteria .table {
-  width: 75%;
+.notations .criteria .table > div:hover > div.info {
+  background: #FFF;
+}
+.notations .criteria .table > div:hover > div.info .icon-question {
+  color: #F1C40F;
 }
 .notations .criteria .grade {
   width: 10%;
@@ -141,23 +152,27 @@ h4 {
   width: 70%;
 }
 .notations .criteria .result {
-  width: 20%;
+  width: 18%;
   font-weight: bold;
   white-space: nowrap;
   text-align: center;
   vertical-align: middle;
 }
 .notations .warning .label,
-.notations .warning .result {
+.notations .warning .result,
+.notations .icon-warning {
   color: #FF1919;
 }
 .notations .criteria .info {
-  width: 10%;
+  width: 2%;
   text-align: center;
+  vertical-align: middle;
+  background: #FFF;
+  padding-left: 0.1em;
+  padding-right: 0.1em;
 }
 .notations .criteria .icon-question {
-  color: #f1c40f;
-  cursor: pointer;
+  color: transparent;
 }
 .timeline {
   margin: 2em 0 5em;
@@ -363,8 +378,9 @@ input.textFilter {
   color: #f1c40f;
   cursor: pointer;
 }
-.table .details .icon-warning {
-  cursor: pointer;
+.table .icon-warning {
+  display: inline-block;
+  width: 0.8em;
 }
 .detailsOverlay {
   position: absolute;
@@ -417,9 +433,6 @@ input.textFilter {
 .table > div > .startTime.domCreation {
   background: #ffe0cc;
 }
-.table .icon-warning {
-  color: #e74c3c;
-}
 /**** NgModal popin (have a look inside bower_components) ****/
 .ng-modal {
   position: fixed;

front/src/js/app.js

@@ -29,6 +29,14 @@ yltApp.config(['$routeProvider', '$locationProvider',
                 templateUrl: 'front/views/dashboard.html',
                 controller: 'DashboardCtrl'
             }).
+            when('/result/:runId/timeline', {
+                templateUrl: 'front/views/timeline.html',
+                controller: 'TimelineCtrl'
+            }).
+            when('/result/:runId/rule/:policy', {
+                templateUrl: 'front/views/rule.html',
+                controller: 'RuleCtrl'
+            }).
             otherwise({
                 redirectTo: '/'
             });

front/src/js/controllers/dashboardCtrl.js

@@ -1,6 +1,6 @@
 var dashboardCtrl = angular.module('dashboardCtrl', ['resultsFactory', 'menuService']);
 
-dashboardCtrl.controller('DashboardCtrl', ['$scope', '$routeParams', 'Results', 'Menu', function($scope, $routeParams, Results, Menu) {
+dashboardCtrl.controller('DashboardCtrl', ['$scope', '$routeParams', '$location', 'Results', 'Menu', function($scope, $routeParams, $location, Results, Menu) {
     $scope.runId = $routeParams.runId;
     $scope.Menu = Menu.setCurrentPage('dashboard', $scope.runId);
     
@@ -8,4 +8,8 @@ dashboardCtrl.controller('DashboardCtrl', ['$scope', '$routeParams', 'Results',
         $scope.result = result;
         console.log(result);
     });
+
+    $scope.showRulePage = function(ruleName) {
+        $location.path('/result/' + $scope.runId + '/rule/' + ruleName);
+    };
 }]);

front/src/less/dashboard.less

@@ -67,7 +67,7 @@ h4 {
 
 .notations {
     display: table;
-    width: 90%;
+    width: 80%;
     margin: 0 10%;
     border-spacing: 1em;
 }
@@ -79,16 +79,20 @@ h4 {
     height: 2.5em;
     vertical-align: middle;
 }
-.notations .notation {
+.notations .category {
     font-weight: bold;
     text-align: center;
+    width: 20%;
 }
 .notations .criteria {
     font-weight: normal;
+    width: 75%;
 }
 .A, .B, .C, .D, .E, .F, .NA {
-    .notations & {
+    .notations &.categoryScore {
         width: 2.5em;
+        max-width: 2.5em;
+        min-width: 2.5em;
         font-size: 2em;
         text-align: center;
         border-radius: 0.5em;
@@ -100,6 +104,7 @@ h4 {
         font-size: 1em;
         color: transparent;
         margin: 0 auto;
+        border-radius: 0.5em;
     }
 }
 .notations .A {
@@ -130,13 +135,19 @@ h4 {
     /* Non applicable */
     background: #CCC;
 }
-.notations .icon-eye {
-    color: #9c4274;
-    cursor: pointer;
-}
 
 .notations .criteria .table {
-    width: 75%;
+    width: 100%;
+    > div:hover > div {
+        background: #F1C40F;
+        cursor: pointer;
+        &.info {
+            background: #FFF;
+            .icon-question {
+                color: #F1C40F;
+            }
+        }
+    }
 }
 .notations .criteria .grade {
     width: 10%;
@@ -148,22 +159,25 @@ h4 {
     width: 70%;
 }
 .notations .criteria .result {
-    width: 20%;
+    width: 18%;
     font-weight: bold;
     white-space: nowrap;
     text-align: center;
     vertical-align: middle;
 }
-.notations .warning .label, .notations .warning .result {
+.notations .warning .label, .notations .warning .result, .notations .icon-warning {
     color: #FF1919;
 }
 .notations .criteria .info {
-    width: 10%;
+    width: 2%;
     text-align: center;
+    vertical-align: middle;
+    background: #FFF;
+    padding-left: 0.1em;
+    padding-right: 0.1em;
 }
 .notations .criteria .icon-question {
-    color: #f1c40f;
-    cursor: pointer;
+    color: transparent;
 }
 
 
@@ -387,8 +401,9 @@ input.textFilter {
     color: #f1c40f;
     cursor: pointer;
 }
-.table .details .icon-warning {
-    cursor: pointer;
+.table .icon-warning {
+    display: inline-block;
+    width: 0.8em;
 }
 
 .detailsOverlay {
@@ -443,10 +458,6 @@ input.textFilter {
     background: @domCreationBg;
 }
 
-.table .icon-warning {
-    color: #e74c3c;
-}
-
 
 /**** NgModal popin (have a look inside bower_components) ****/
 .ng-modal {

front/src/views/dashboard.html

@@ -4,16 +4,25 @@
 
     <div class="notations">
         <div ng-repeat="category in result.scoreProfiles.generic.categories">
-            <grade score="category.categoryScore"></grade>
-            <div class="notation">{{category.label}}</div>
+            <grade score="category.categoryScore" class="categoryScore"></grade>
+            <div class="category">{{category.label}}</div>
             <div class="criteria">
-                <div class="table">
-                    <div ng-repeat="ruleName in category.rules" ng-init="rule = result.rules[ruleName]" ng-class="{'warning': rule.abnormal}">
+                <div class="table" title="Click to see details">
+                    <div ng-repeat="ruleName in category.rules" 
+                         ng-init="rule = result.rules[ruleName]"
+                         ng-class="{'warning': rule.abnormal}"
+                         ng-click="showRulePage(ruleName)">
                         <div class="grade">
                             <grade score="rule.score"></grade>
                         </div>
                         <div class="label">{{rule.policy.label}}</div>
-                        <div class="result">{{rule.value}}</div>
+                        <div class="result">
+                            {{rule.value}}
+                            <span ng-if="rule.abnormal" class="icon-warning"></span>
+                            <span ng-if="rule.abnormalityScore <= -100" class="icon-warning"></span>
+                            <span ng-if="rule.abnormalityScore <= -300" class="icon-warning"></span>
+                        </div>
+                        <div class="info"><span class="icon-question"></span></div>
                     </div>
                 </div>
             </div>

lib/server/controllers/frontController.js

@@ -4,7 +4,7 @@ var express = require('express');
 var FrontController = function(app) {
     'use strict';
     
-    var routes = ['/', '/about', '/result/:runId', '/queue/:runId'];
+    var routes = ['/', '/about', '/result/:runId', '/result/:runId/timeline', '/result/:runId/rule/:policy', '/queue/:runId'];
     
     routes.forEach(function(route) {
         app.get(route, function(req, res) {