From 3c22cd216cdd6601a10647ea73ceb51970b0d4d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Mon, 22 Dec 2014 16:25:16 +0100 Subject: [PATCH] Add the Policy page for the details of a policy score --- front/src/css/dashboard.css | 72 -------------------- front/src/css/main.css | 82 +++++++++++++++++++++- front/src/css/rule.css | 58 ++++++++++++++++ front/src/js/controllers/ruleCtrl.js | 32 ++++++++- front/src/js/controllers/timelineCtrl.js | 6 +- front/src/less/dashboard.less | 74 -------------------- front/src/less/main.less | 86 +++++++++++++++++++++++- front/src/less/rule.less | 68 +++++++++++++++++++ front/src/main.html | 2 +- front/src/views/dashboard.html | 2 +- front/src/views/resultSubHeader.html | 2 +- front/src/views/rule.html | 39 +++++++++++ front/src/views/timeline.html | 4 +- 13 files changed, 372 insertions(+), 155 deletions(-) diff --git a/front/src/css/dashboard.css b/front/src/css/dashboard.css index 5a6147d..0dd2187 100644 --- a/front/src/css/dashboard.css +++ b/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%; } diff --git a/front/src/css/main.css b/front/src/css/main.css index b807d79..5a8e4a7 100644 --- a/front/src/css/main.css +++ b/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; diff --git a/front/src/css/rule.css b/front/src/css/rule.css index e69de29..f9636e7 100644 --- a/front/src/css/rule.css +++ b/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; +} diff --git a/front/src/js/controllers/ruleCtrl.js b/front/src/js/controllers/ruleCtrl.js index 7ad7a97..f41ae8d 100644 --- a/front/src/js/controllers/ruleCtrl.js +++ b/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(); }]); \ No newline at end of file diff --git a/front/src/js/controllers/timelineCtrl.js b/front/src/js/controllers/timelineCtrl.js index 8d4b18c..66c568a 100644 --- a/front/src/js/controllers/timelineCtrl.js +++ b/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(); }]); \ No newline at end of file diff --git a/front/src/less/dashboard.less b/front/src/less/dashboard.less index bdaa76b..74d6d05 100644 --- a/front/src/less/dashboard.less +++ b/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%; diff --git a/front/src/less/main.less b/front/src/less/main.less index f471fd0..5d4abdf 100644 --- a/front/src/less/main.less +++ b/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; } diff --git a/front/src/less/rule.less b/front/src/less/rule.less index e69de29..4ed2958 100644 --- a/front/src/less/rule.less +++ b/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; + } +} \ No newline at end of file diff --git a/front/src/main.html b/front/src/main.html index 72b719d..51277bb 100644 --- a/front/src/main.html +++ b/front/src/main.html @@ -30,7 +30,7 @@ -
+

Yellow Lab Tools is an open source project by Gaël Métais, based on Phantomas.
If you like it, give it a ★ on GitHub!

diff --git a/front/src/views/dashboard.html b/front/src/views/dashboard.html index cfb3f01..9aa74e8 100644 --- a/front/src/views/dashboard.html +++ b/front/src/views/dashboard.html @@ -1,5 +1,5 @@
-
+

Grades

diff --git a/front/src/views/resultSubHeader.html b/front/src/views/resultSubHeader.html index e583b36..e429366 100644 --- a/front/src/views/resultSubHeader.html +++ b/front/src/views/resultSubHeader.html @@ -2,6 +2,6 @@
New test -
Grades
+
Dashboard
JS Timeline
\ No newline at end of file diff --git a/front/src/views/rule.html b/front/src/views/rule.html index e69de29..06c5f4b 100644 --- a/front/src/views/rule.html +++ b/front/src/views/rule.html @@ -0,0 +1,39 @@ +
+
+
+

Score for rule:
{{rule.policy.label}}

+ +
+ +
{{rule.score}}/100
+
+
+

The page has a real problem with this rule

+ + + +

(Abnormality score: {{rule.abnormalityScore}})

+
+ +

Value

+ {{rule.value}} + +

Why this rule?

+
+ +
+

List of offenders

+
    +
  • + {{offender}} +
    • +
+
+
+
+

404

+ Rule "{{policyName}}"" not found +
+ +
Back to dashboard
+
\ No newline at end of file diff --git a/front/src/views/timeline.html b/front/src/views/timeline.html index f3fcb25..de7894f 100644 --- a/front/src/views/timeline.html +++ b/front/src/views/timeline.html @@ -1,5 +1,5 @@
-
+

Javascript Timeline

This graph gives a quick view of when the Javascript interactions with the DOM occur during the loading of the page.

@@ -144,4 +144,6 @@
{{node.data.timestamp | number: 0}} ms
+ +
Back to dashboard
\ No newline at end of file