Add the Policy page for the details of a policy score

front/src/css/dashboard.css

@@ -1,53 +1,9 @@
-.resultsMenu {
-  margin-top: 2em;
-}
-.resultsMenu .menuItem {
-  display: inline-block;
-  margin: 1em;
-  width: 8em;
-  height: 7em;
-  color: #fff;
-  border: 3px solid #fff;
-  border-radius: 0.5em;
-  cursor: pointer;
-  text-decoration: none;
-}
-.resultsMenu .back {
-  color: #5e2846;
-  border-color: #5e2846;
-}
-.resultsMenu .menuItem div {
-  padding-top: 0.5em;
-  font-size: 3em;
-}
-.resultsMenu .active,
-.resultsMenu .menuItem.active:hover {
-  color: #ffa319;
-  border-color: #ffa319;
-}
-.resultsMenu .menuItem:hover {
-  color: #ffa319;
-}
-.resultsMenu span {
-  position: relative;
-  top: 0.5em;
-}
 .testedUrl {
   color: inherit;
 }
 h4 {
   margin-bottom: 0.5em;
 }
-.summary,
-.metrics,
-.execution {
-  margin-top: 2em;
-  padding: 1em;
-  background: #fff;
-  color: #000;
-  border-radius: 0.5em;
-  text-align: left;
-}
 .notations {
   display: table;
   width: 80%;
@@ -100,34 +56,6 @@ h4 {
   margin: 0 auto;
   border-radius: 0.5em;
 }
-.notations .A {
-  /* green */
-  background: #0C4;
-}
-.notations .B {
-  /* green */
-  background: #CD0;
-}
-.notations .C {
-  /* yellow */
-  background: #FD2;
-}
-.notations .D {
-  /* orange */
-  background: #FA2;
-}
-.notations .E {
-  /* red */
-  background: #F60;
-}
-.notations .F {
-  /* red */
-  background: #F22;
-}
-.notations .NA {
-  /* Non applicable */
-  background: #CCC;
-}
 .notations .criteria .table {
   width: 100%;
 }

front/src/css/main.css

@@ -32,9 +32,89 @@ h1 span {
   width: 1em;
   color: #ffa319;
 }
+.resultsMenu {
+  margin-top: 2em;
+}
+.resultsMenu .menuItem {
+  display: inline-block;
+  margin: 1em;
+  width: 8em;
+  height: 7em;
+  color: #fff;
+  border: 3px solid #fff;
+  border-radius: 0.5em;
+  cursor: pointer;
+  text-decoration: none;
+}
+.resultsMenu .back {
+  color: #413;
+  border-color: #413;
+}
+.resultsMenu .menuItem div {
+  padding-top: 0.5em;
+  font-size: 3em;
+}
+.resultsMenu .active,
+.resultsMenu .menuItem.active:hover {
+  color: #ffa319;
+  border-color: #ffa319;
+}
+.resultsMenu .menuItem:hover {
+  color: #ffa319;
+}
+.resultsMenu span {
+  position: relative;
+  top: 0.5em;
+}
+/* Grade colors */
+.A {
+  /* green */
+  background: #0C4;
+}
+.B {
+  /* green */
+  background: #CD0;
+}
+.C {
+  /* yellow */
+  background: #FD2;
+}
+.D {
+  /* orange */
+  background: #FA2;
+}
+.E {
+  /* red */
+  background: #F60;
+}
+.F {
+  /* red */
+  background: #F22;
+}
+.NA {
+  /* Non applicable */
+  background: #CCC;
+}
+.board {
+  margin-top: 2em;
+  padding: 1em;
+  background: #fff;
+  color: #000;
+  border-radius: 0.5em;
+  text-align: left;
+}
+.backToDashboard {
+  text-align: center;
+}
+.backToDashboard a {
+  font-size: 0.9em;
+  display: block;
+  margin-top: 4em;
+  color: black;
+}
 .footer {
   padding: 3em;
-  color: #000;
+  color: #413;
 }
 .footer a {
   color: inherit;

front/src/css/rule.css

@@ -0,0 +1,58 @@
+.rule.board {
+  text-align: center;
+}
+.rule h2 span {
+  font-size: 1.5em;
+}
+.rule .scoreDisplay {
+  display: table;
+  border-spacing: 1em;
+  margin: 0 auto;
+}
+.rule .scoreDisplay > div {
+  display: table-cell;
+  vertical-align: middle;
+  font-weight: bold;
+  font-size: 1.5em;
+}
+.rule .scoreDisplay > div.score {
+  font-size: 2.5em;
+  height: 2em;
+  width: 2em;
+  border-radius: 0.5em;
+}
+.rule h3 {
+  margin-top: 2.5em;
+}
+.rule .icon-warning {
+  font-size: 2em;
+  color: #FF1919;
+}
+.rule .message {
+  width: 80%;
+  margin: 0 auto;
+}
+.rule .message p {
+  margin: 0.5em;
+}
+.rule ul {
+  list-style-type: none;
+  padding-left: 0;
+}
+.rule li:before {
+  content: '\25e6';
+  margin-right: 0.3em;
+  font-size: 1.2em;
+  position: relative;
+  top: 0.1em;
+}
+.rule .offenders li {
+  font-size: 0.8em;
+}
+.rule .notFound {
+  font-size: 1em;
+}
+.rule .notFound h2 {
+  font-size: 3em;
+  margin-bottom: 1em;
+}

front/src/js/controllers/ruleCtrl.js

@@ -1,5 +1,33 @@
 var ruleCtrl = angular.module('ruleCtrl', []);
 
-ruleCtrl.controller('RuleCtrl', ['$scope', function($scope) {
-    
+ruleCtrl.controller('RuleCtrl', ['$scope', '$rootScope', '$routeParams', '$location', '$sce', 'Menu', 'Results', function($scope, $rootScope, $routeParams, $location, $sce, Menu, Results) {
+    $scope.runId = $routeParams.runId;
+    $scope.policyName = $routeParams.policy;
+    $scope.Menu = Menu.setCurrentPage(null, $scope.runId);
+    $scope.rule = null;
+
+    function loadResults() {
+        // Load result if needed
+        if (!$rootScope.loadedResult || $rootScope.loadedResult.runId !== $routeParams.runId) {
+            Results.get({runId: $routeParams.runId}, function(result) {
+                $rootScope.loadedResult = result;
+                $scope.result = result;
+                init();
+            });
+        } else {
+            $scope.result = $rootScope.loadedResult;
+            init();
+        }
+    }
+
+    function init() {
+        $scope.rule = $scope.result.rules[$scope.policyName];
+        $scope.message = $sce.trustAsHtml($scope.rule.policy.message);
+    }
+
+    $scope.backToDashboard = function() {
+        $location.path('/result/' + $scope.runId);
+    };
+
+    loadResults();
 }]);

front/src/js/controllers/timelineCtrl.js

@@ -1,6 +1,6 @@
 var timelineCtrl = angular.module('timelineCtrl', []);
 
-timelineCtrl.controller('TimelineCtrl', ['$scope', '$rootScope', '$routeParams', '$timeout', 'Menu', 'Results', function($scope, $rootScope, $routeParams, $timeout, Menu, Results) {
+timelineCtrl.controller('TimelineCtrl', ['$scope', '$rootScope', '$routeParams', '$location', '$timeout', 'Menu', 'Results', function($scope, $rootScope, $routeParams, $location, $timeout, Menu, Results) {
     $scope.runId = $routeParams.runId;
     $scope.Menu = Menu.setCurrentPage('timeline', $scope.runId);
 
@@ -127,6 +127,10 @@ timelineCtrl.controller('TimelineCtrl', ['$scope', '$rootScope', '$routeParams',
         node.showDetails = !isOpen;
     };
 
+    $scope.backToDashboard = function() {
+        $location.path('/result/' + $scope.runId);
+    };
+
     loadResults();
 
 }]);

front/src/less/dashboard.less

@@ -1,40 +1,3 @@
-
-.resultsMenu {
-    margin-top: 2em;
-}
-
-.resultsMenu .menuItem {
-    display: inline-block;
-    margin: 1em;
-    width: 8em;
-    height: 7em;
-    color: #fff;
-    border: 3px solid #fff;
-    border-radius: 0.5em;
-    cursor: pointer;
-    text-decoration: none;
-}
-.resultsMenu .back {
-    color: #5e2846;
-    border-color: #5e2846;
-}
-.resultsMenu .menuItem div {
-    padding-top: 0.5em;
-    font-size: 3em;
-}
-.resultsMenu .active, .resultsMenu .menuItem.active:hover {
-    color: #ffa319;
-    border-color: #ffa319;
-}
-.resultsMenu .menuItem:hover {
-    color: #ffa319;
-}
-
-.resultsMenu span {
-    position: relative;
-    top: 0.5em;
-}
-
 .testedUrl {
     color: inherit;
 }
@@ -43,15 +6,6 @@ h4 {
     margin-bottom: 0.5em;
 }
 
-.summary, .metrics, .execution {
-    margin-top: 2em;
-    padding: 1em;
-    background: #fff;
-    color: #000;
-    border-radius: 0.5em;
-    text-align: left;
-}
-
 .notations {
     display: table;
     width: 80%;
@@ -94,34 +48,6 @@ h4 {
         border-radius: 0.5em;
     }
 }
-.notations .A {
-    /* green */
-    background: #0C4;
-}
-.notations .B {
-    /* green */
-    background: #CD0;
-}
-.notations .C {
-    /* yellow */
-    background: #FD2;
-}
-.notations .D {
-    /* orange */
-    background: #FA2;
-}
-.notations .E {
-    /* red */
-    background: #F60;
-}
-.notations .F {
-    /* red */
-    background: #F22;
-}
-.notations .NA {
-    /* Non applicable */
-    background: #CCC;
-}
 
 .notations .criteria .table {
     width: 100%;

front/src/less/main.less

@@ -28,9 +28,93 @@ h1 span {
     color: #ffa319;
 }
 
+.resultsMenu {
+    margin-top: 2em;
+}
+.resultsMenu .menuItem {
+    display: inline-block;
+    margin: 1em;
+    width: 8em;
+    height: 7em;
+    color: #fff;
+    border: 3px solid #fff;
+    border-radius: 0.5em;
+    cursor: pointer;
+    text-decoration: none;
+}
+.resultsMenu .back {
+    color: #413;
+    border-color: #413;
+}
+.resultsMenu .menuItem div {
+    padding-top: 0.5em;
+    font-size: 3em;
+}
+.resultsMenu .active, .resultsMenu .menuItem.active:hover {
+    color: #ffa319;
+    border-color: #ffa319;
+}
+.resultsMenu .menuItem:hover {
+    color: #ffa319;
+}
+.resultsMenu span {
+    position: relative;
+    top: 0.5em;
+}
+
+/* Grade colors */
+.A {
+    /* green */
+    background: #0C4;
+}
+.B {
+    /* green */
+    background: #CD0;
+}
+.C {
+    /* yellow */
+    background: #FD2;
+}
+.D {
+    /* orange */
+    background: #FA2;
+}
+.E {
+    /* red */
+    background: #F60;
+}
+.F {
+    /* red */
+    background: #F22;
+}
+.NA {
+    /* Non applicable */
+    background: #CCC;
+}
+
+.board {
+    margin-top: 2em;
+    padding: 1em;
+    background: #fff;
+    color: #000;
+    border-radius: 0.5em;
+    text-align: left;
+}
+
+.backToDashboard {
+    text-align: center;
+
+    a {
+        font-size: 0.9em;
+        display: block;
+        margin-top: 4em;
+        color: black;
+    }
+}
+
 .footer {
     padding: 3em;
-    color: #000;
+    color: #413;
     a {
         color: inherit;
     }

front/src/less/rule.less

@@ -0,0 +1,68 @@
+.rule.board {
+    text-align: center;
+}
+
+.rule h2 span {
+    font-size: 1.5em;
+}
+
+.rule .scoreDisplay {
+    display: table;
+    border-spacing: 1em;
+    margin: 0 auto;
+
+    > div {
+        display: table-cell;
+        vertical-align: middle;
+        font-weight: bold;
+        font-size: 1.5em;
+
+        &.score {
+            font-size: 2.5em;
+            height: 2em;
+            width: 2em;
+            border-radius: 0.5em;
+        }
+    }
+}
+
+.rule h3 {
+    margin-top: 2.5em;
+}
+
+.rule .icon-warning {
+    font-size: 2em;
+    color: #FF1919;
+}
+
+.rule .message {
+    width: 80%;
+    margin: 0 auto;
+    p {
+        margin: 0.5em;
+    }
+}
+
+.rule ul {
+    list-style-type: none;
+    padding-left: 0;
+}
+.rule li:before {
+    content:'\25e6';
+    margin-right: 0.3em;
+    font-size: 1.2em;
+    position: relative;
+    top: 0.1em;
+}
+
+.rule .offenders li {
+    font-size: 0.8em;
+}
+
+.rule .notFound {
+    font-size: 1em;
+    h2 {
+        font-size: 3em;
+        margin-bottom: 1em;
+    }
+}

front/src/main.html

@@ -30,7 +30,7 @@
 
 <body ng-app="YellowLabTools">
     <div id="header"><h1>Yellow Lab <span class="icon-lab"></span> Tools</h1></div>
-    <div id="body" ng-view></div>
+    <div id="body" ng-view autoscroll="true"></div>
     <div class="footer">
         <p><b>Yellow Lab Tools</b> is an open source project by <a href="http://www.gaelmetais.com" target="_blank">Gaël Métais</a>, based on <a href="https://github.com/macbre/phantomas" target="_blank">Phantomas</a>.<br>If you like it, <a href="https://github.com/gmetais/YellowLabTools" target="_blank" class="star">give it a <span>&#9733;</span> on GitHub</a>!</p>
     </div>

front/src/views/dashboard.html

@@ -1,5 +1,5 @@
 <div ng-include="'/front/views/resultSubHeader.html'"></div>
-<div class="summary">
+<div class="summary board">
     <h2>Grades</h2>
 
     <div class="notations">

front/src/views/resultSubHeader.html

@@ -2,6 +2,6 @@
 
 <div class="resultsMenu">
     <a class="menuItem back" href="/"><div class="icon-back"></div><span>New test<span></a>
-    <div class="menuItem" ng-class="{active: Menu.getCurrentPage() == 'dashboard'}" ng-click="Menu.changePage('dashboard')"><div class="icon-summary"></div><span>Grades</span></div>
+    <div class="menuItem" ng-class="{active: Menu.getCurrentPage() == 'dashboard'}" ng-click="Menu.changePage('dashboard')"><div class="icon-summary"></div><span>Dashboard</span></div>
     <div class="menuItem" ng-class="{active: Menu.getCurrentPage() == 'timeline'}" ng-click="Menu.changePage('timeline')"><div class="icon-spaghetti"></div><span>JS Timeline</span></div>
 </div>

front/src/views/rule.html

@@ -0,0 +1,39 @@
+<div ng-include="'/front/views/resultSubHeader.html'"></div>
+<div class="rule board">
+    <div ng-if="rule">
+        <h2>Score for rule:<br><span>{{rule.policy.label}}</span></h2>
+        
+        <div class="scoreDisplay">
+            <grade score="rule.score" class="score"></grade>
+            <div>{{rule.score}}/100</div>
+        </div>
+        <div ng-if="rule.abnormal">
+            <h3>The page has a real problem with this rule</h3>
+            <span class="icon-warning"></span>
+            <span ng-if="rule.abnormalityScore <= -100" class="icon-warning"></span>
+            <span ng-if="rule.abnormalityScore <= -300" class="icon-warning"></span>
+            <p>(Abnormality score: {{rule.abnormalityScore}})</p>
+        </div>
+
+        <h3>Value</h3>
+        {{rule.value}}
+
+        <h3>Why this rule?</h3>
+        <div ng-bind-html="message" class="message"></div>
+
+        <div class="offenders" ng-if="rule.offenders.length > 0">
+            <h3>List of offenders</h3>
+            <ul>
+                <li ng-repeat="offender in rule.offenders track by $index">
+                    {{offender}}
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div ng-if="!rule && rule !== null" class="notFound">
+        <h2>404</h2>
+        Rule "{{policyName}}"" not found
+    </div>
+
+    <div class="backToDashboard"><a href="#" ng-click="backToDashboard()">Back to dashboard</a></div>
+</div>

front/src/views/timeline.html

@@ -1,5 +1,5 @@
 <div ng-include="'/front/views/resultSubHeader.html'"></div>
-<div class="execution">
+<div class="execution board">
     <h2>Javascript Timeline</h2>
     <p>This graph gives a quick view of when the Javascript interactions with the DOM occur during the loading of the page.</p>
 
@@ -144,4 +144,6 @@
             <div class="startTime" ng-class="node.data.loadingStep">{{node.data.timestamp | number: 0}} ms</div>
         </div>
     </div>
+
+    <div class="backToDashboard"><a href="#" ng-click="backToDashboard()">Back to dashboard</a></div>
 </div>