WEBDIENSTE/YellowLabTools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add the Policy page for the details of a policy score

Browse Source
This commit is contained in:
Gaël Métais
2014-12-22 16:25:16 +01:00
parent cb20075599
commit 3c22cd216c
13 changed files with 372 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/css/dashboard.css
-72
View File
@@ -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
+81 -1
View File
@@ -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
+58
View File
@@ -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
+30 -2
View File
@@ -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
+5 -1
View File
@@ -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
-74
View File
@@ -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
+85 -1
View File
@@ -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
+68
View File
@@ -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
+1 -1
View File
@@ -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 -1
View File
@@ -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
+1 -1
View File
@@ -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
+39
View File
@@ -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
+3 -1
View File
@@ -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>