Add the Policy page for the details of a policy score

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>