Version 3.3.0

Also bumps pa11y-webservice to the latest version.

.github/workflows/tests.yml

@@ -0,0 +1,50 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests.
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Build and lint
+
+on:
+  push:
+    branches: # Run actions when code is committed to these branches
+      - master
+  pull_request:
+    branches: # Run actions when a PR is pushed based on one of these branches
+      - master
+
+jobs:
+  checkout_and_test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        include:
+          - node-version: 8.x
+            lint: true # Linter is run only once to shorten the total build time
+          - node-version: 10.x
+          - node-version: 12.x
+
+    steps:
+      - name: Checkout code from ${{ github.repository }}
+        uses: actions/checkout@v2
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: MongoDB in GitHub Actions
+        uses: supercharge/mongodb-github-action@1.3.0
+        with:
+          mongodb-version: 3.4
+      - name: Install dependencies
+        run: npm i
+      - name: Run linter
+        if: ${{ matrix.lint }}
+        run: make lint
+      - name: Create test config
+        run: cp config/test.sample.json config/test.json
+      - name: Start test app
+        run: NODE_ENV=test node index.js &
+      - name: Wait / Sleep
+        uses: jakejarvis/wait-action@v0.1.0
+        with:
+          time: '10s'
+      - name: Run tests
+        run: make ci

.travis.yml

@@ -1,24 +0,0 @@
-
-# Language/versions
-language: node_js
-matrix:
-  include:
-    - node_js: '8'
-    - node_js: '10'
-    - node_js: '12'
-
-# Build only master (and pull-requests)
-branches:
-  only:
-    - master
-
-# Services setup
-services:
-  - mongodb
-
-# Build script
-before_script:
-  - cp config/test.sample.json config/test.json
-  - NODE_ENV=test node index.js &
-  - sleep 5 # give server time to start
-script: 'make ci'

CHANGELOG.md

@@ -1,6 +1,19 @@
-
 # Changelog
 
+## 3.3.0 (2021-04-27)
+
+* Add new list view to the dashboard (thanks @sangitamane)
+* Upgrade express-hbs to the latest version in order to address several potential vulnerabilities
+* Fixes a MongoDB "ObjectID generation failed" error.
+* Update pa11y-webservice to version 3.2.1 and pa11y to version 5.3.1
+
+## 3.2.0 (2020-10-05)
+
+* Update pa11y to version 5.3.0, which means better compatibility with sites using AMD modules
+* Update pa11y-webservice to version 3.2.0, which adds the ability to configure the number of workers running pa11y tests
+* Update several dependencies
+* Replace chalk with kleur
+
 ## 3.1.0 (2019-09-27)
 
 * Display the task ID before each line of output, so it's clear to which task a line of output belongs to when they run in parallel.

README.md

@@ -139,7 +139,7 @@ If you're opening issues related to these, please mention the version that the i
 ## License
 
 Pa11y Dashboard is licensed under the [GNU General Public License 3.0][info-license].<br/>
-Copyright &copy; 2013–2019, Team Pa11y and contributors
+Copyright &copy; 2013–2020, Team Pa11y and contributors
 
 [gpl]: http://www.gnu.org/licenses/gpl-3.0.html
 [mongo]: http://www.mongodb.org/

app.js

@@ -92,7 +92,6 @@ function initApp(config, callback) {
 
 	// Load routes
 	require('./route/index')(app);
-	require('./route/task/index')(app);
 	require('./route/result/download')(app);
 	if (!config.readonly) {
 		require('./route/new')(app);
@@ -102,6 +101,8 @@ function initApp(config, callback) {
 		require('./route/task/ignore')(app);
 		require('./route/task/unignore')(app);
 	}
+	// Needs to be loaded after `/route/new`
+	require('./route/task/index')(app);
 	// Needs to be loaded after `/route/task/edit`
 	require('./route/result/index')(app);
 

index.js

@@ -14,7 +14,7 @@
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 'use strict';
 
-const chalk = require('chalk');
+const kleur = require('kleur');
 const config = require('./config');
 
 process.on('SIGINT', () => {
@@ -29,16 +29,16 @@ require('./app')(config, (error, app) => {
 	}
 
 	console.log('');
-	console.log(chalk.underline.magenta('Pa11y Dashboard started'));
-	console.log(chalk.grey('mode: %s'), process.env.NODE_ENV);
-	console.log(chalk.grey('uri:  %s'), app.address);
+	console.log(kleur.underline().magenta('Pa11y Dashboard started'));
+	console.log(kleur.grey('mode: %s'), process.env.NODE_ENV);
+	console.log(kleur.grey('uri:  %s'), app.address);
 
 	app.on('route-error', error => {
 		const stack = (error.stack ? error.stack.split('\n') : [error.message]);
-		const msg = chalk.red(stack.shift());
+		const msg = kleur.red(stack.shift());
 		console.error('');
 		console.error(msg);
-		console.error(chalk.grey(stack.join('\n')));
+		console.error(kleur.grey(stack.join('\n')));
 	});
 
 	// Start the webservice if required
@@ -50,11 +50,11 @@ require('./app')(config, (error, app) => {
 			}
 
 			console.log('');
-			console.log(chalk.underline.cyan('Pa11y Webservice started'));
-			console.log(chalk.grey('mode:     %s'), process.env.NODE_ENV);
-			console.log(chalk.grey('uri:      %s'), webservice.server.info.uri);
-			console.log(chalk.grey('database: %s'), config.webservice.database);
-			console.log(chalk.grey('cron:     %s'), config.webservice.cron);
+			console.log(kleur.underline().cyan('Pa11y Webservice started'));
+			console.log(kleur.grey('mode:     %s'), process.env.NODE_ENV);
+			console.log(kleur.grey('uri:      %s'), webservice.server.info.uri);
+			console.log(kleur.grey('database: %s'), config.webservice.database);
+			console.log(kleur.grey('cron:     %s'), config.webservice.cron);
 		});
 	}
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pa11y-dashboard",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "private": true,
   "description": "Pa11y Dashboard is a visual web interface to the Pa11y accessibility reporter",
   "keywords": [
@@ -26,26 +26,26 @@
   },
   "dependencies": {
     "body-parser": "~1.19.0",
-    "chalk": "~2.4.2",
     "compression": "~1.7.4",
-    "express-hbs": "~2.1.2",
     "express": "~4.17.1",
+    "express-hbs": "~2.4.0",
     "http-headers": "~3.0.2",
-    "moment": "~2.24.0",
+    "kleur": "~4.1.2",
+    "moment": "~2.29.0",
+    "pa11y-webservice": "~3.2.1",
     "pa11y-webservice-client-node": "~2.0.0",
-    "pa11y-webservice": "~3.1.2",
-    "underscore": "~1.9.1"
+    "underscore": "~1.11.0"
   },
   "devDependencies": {
     "bower": "^1.8.8",
     "cheerio": "^1.0.0-rc.3",
-    "eslint": "^6.4.0",
-    "less": "^3.10.3",
-    "mocha": "^6.2.0",
+    "eslint": "^6.8.0",
+    "less": "^3.11.1",
+    "mocha": "^7.2.0",
     "pa11y-lint-config": "^1.2.1",
     "proclaim": "^3.6.0",
-    "request": "^2.88.0",
-    "uglify-js": "^3.6.0"
+    "request": "^2.88.2",
+    "uglify-js": "^3.11.0"
   },
   "scripts": {
     "start": "node index.js",

public/js/site.js

@@ -27,6 +27,8 @@ $(document).ready(function(){
     var graphContainer = $('[data-role="graph"]');
     var dateSelectDropdownMenu = $('[data-role="date-select-dropdown-menu"]');
     var legend = graphContainer.parent('.graph-container').find('.dashedLegend');
+	var list = localStorage.getItem("listview") || "";    // get choice or nothing
+
 
     var graphOptions = {
         series: {
@@ -397,4 +399,38 @@ $(document).ready(function(){
 		$.fn.collapse.Constructor.prototype.keydown
 	);
 
+	// List View
+	$('.btn-list').click(function () {
+		var elements = $("#grid-container .task-card");
+		for (i = 0; i < elements.length; i++) {
+			$(elements[i]).removeClass('col-md-4 col-sm-6');
+			$(elements[i]).addClass('col-md-12');
+			$(elements[i]).find('.gridview:nth-child(1)').addClass('listview col-md-9 col-sm-8');
+			$(elements[i]).find('.gridview:nth-child(2)').addClass('listview col-md-3 col-sm-4 task-actions clearfix');
+			$(elements[i]).find('.gridview').removeClass('gridview');
+		};
+		$('.view-btn').removeClass('btn-default')
+		$(this).addClass('btn-default');
+		localStorage.setItem("listview", "yes") //save the choice
+	});
+
+	// Grid View
+	$('.btn-grid').click(function () {
+		var elements = $("#grid-container .task-card");
+		for (i = 0; i < elements.length; i++) {
+			$(elements[i]).removeClass('col-md-12');
+			$(elements[i]).addClass('col-md-4 col-sm-6');
+			$(elements[i]).find('.listview').addClass('gridview')
+			$(elements[i]).find('.listview:nth-child(1)').removeClass('listview col-md-9 col-sm-8');
+			$(elements[i]).find('.listview:nth-child(2)').removeClass('listview col-md-3 col-sm-4 task-actions clearfix');
+		};
+		$('.view-btn').removeClass('btn-default')
+		$(this).addClass('btn-default')
+		localStorage.setItem("listview", "") //clears the choice
+	});
+
+	//load the view as per user's choice
+	if (list === 'yes') {
+		$('.btn-list').trigger('click');
+	}
 });

public/less/ie8and.less

@@ -3,7 +3,7 @@
 // Amend the width of container if you want to here
 @container-md-ie8: @container-md;
 
-@grid-adjustment: percentage(@grid-gutter-width / @container-md-ie8);
+@grid-adjustment: percentage((@grid-gutter-width / @container-md-ie8));
 
 .ie7, .ie8 {
   * {

public/less/site.less

@@ -221,12 +221,6 @@
 		text-decoration: none;
 		background-color: darken(@gray-lighter, 2%);
 	}
-  .h3 {
-	text-overflow: ellipsis;
-	overflow: hidden;
-	width: 100%;
-	white-space: nowrap;
-  }
 	.task-stats li {
 		padding: 7px 0 6px 0;
 		text-align: center;
@@ -235,6 +229,23 @@
 	.dropdown-menu {
 		top: 25px;
 	}
+	.gridview {
+		.h3 {
+			text-overflow: ellipsis;
+			overflow: hidden;
+			width: 100%;
+			white-space: nowrap;
+		}
+		.h4 {
+			display: none;
+		}
+	}
+	.listview {
+		padding-left: 0;
+	}
+	.last-run {
+		clear: both;
+	}
 }
 
 /* Badges */
@@ -723,3 +734,22 @@ ul.date-links {
 .popover-content {
 	overflow-x: auto;
 }
+
+/*list and grid view buttons */
+.view-btn {
+	&.btn-default, &.btn-default:hover, &.btn-default:focus {
+		color: #ffffff;
+	}
+	&:hover {
+		color: #000000;
+	}
+	&:last-child:not(:first-child) {
+		border-bottom-left-radius: 0;
+		border-top-left-radius: 0;
+		margin-left: -3px;
+	}
+	&:first-child:not(:last-child) {
+		border-bottom-right-radius: 0;
+		border-top-right-radius: 0;
+	}
+}

public/less/variables-flatly.less

@@ -233,7 +233,7 @@
 @navbar-default-bg: @brand-primary;
 @navbar-default-border: darken(@navbar-default-bg, 6.5%);
 @navbar-border-radius: @border-radius-base;
-@navbar-padding-horizontal: floor(@grid-gutter-width / 2); // ~15px
+@navbar-padding-horizontal: floor((@grid-gutter-width / 2)); // ~15px
 @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
 
 // Navbar links

public/less/variables.less

@@ -247,7 +247,7 @@
 @navbar-height: 50px;
 @navbar-margin-bottom: @line-height-computed;
 @navbar-border-radius: @border-radius-base;
-@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
+@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
 @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
 
 @navbar-default-color: #777;

test/integration/route/index.js

@@ -41,10 +41,18 @@ describe.only('GET /', function() {
 	it('should display all of the expected tasks', function() {
 		const tasks = this.last.dom('[data-test=task]');
 		assert.strictEqual(tasks.length, 4);
-		assert.match(tasks.eq(0).text(), /npg home\s+\(wcag2aa\)/i);
-		assert.match(tasks.eq(1).text(), /npg home\s+\(wcag2aaa\)/i);
-		assert.match(tasks.eq(2).text(), /nature news\s+\(section508\)/i);
-		assert.match(tasks.eq(3).text(), /z integration test\s+\(wcag2aa\)/i);
+		assert.equal(tasks.eq(0).find('.h3').text(), 'NPG Home');
+		assert.equal(tasks.eq(0).find('.h4').text(), 'nature.com');
+		assert.equal(tasks.eq(0).find('.h5').text(), '(WCAG2AA)');
+		assert.equal(tasks.eq(1).find('.h3').text(), 'NPG Home');
+		assert.equal(tasks.eq(1).find('.h4').text(), 'nature.com');
+		assert.equal(tasks.eq(1).find('.h5').text(), '(WCAG2AAA)');
+		assert.equal(tasks.eq(2).find('.h3').text(), 'Nature News');
+		assert.equal(tasks.eq(2).find('.h4').text(), 'nature.com/news');
+		assert.equal(tasks.eq(2).find('.h5').text(), '(Section508)');
+		assert.equal(tasks.eq(3).find('.h3').text(), 'Z Integration Test');
+		assert.equal(tasks.eq(3).find('.h4').text(), 'localhost:8132');
+		assert.equal(tasks.eq(3).find('.h5').text(), '(WCAG2AA)');
 	});
 
 	it('should have links to each task', function() {

view/partial/tasks.html

@@ -14,8 +14,12 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 }}
+<div class="col-md-12 task-card clearfix">
+	<button class="btn view-btn btn-grid btn-default"><i class="glyphicon glyphicon-th"></i> Grid</button>
+	<button class="btn view-btn btn-list"><i class="glyphicon glyphicon-align-justify "></i> List</button>
 
-<ul class="list-unstyled clearfix crunch-bottom">
+</div>
+<ul class="list-unstyled clearfix crunch-bottom" id="grid-container">
 
 	{{#unless readonly}}
 		<li class="col-md-4 col-sm-6 task-card add-task">
@@ -28,9 +32,14 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	{{#each tasks}}
 		<li class="col-md-4 col-sm-6 task-card" data-test="task" data-role="task" data-keywords="{{lowercase name}} {{lowercase standard}} {{simplify-url url}}">
 			<a class="well task-card-link crunch-bottom" title="Details for URL {{simplify-url url}}" href="{{href}}">
+				<div class="gridview">
 					<p class="h3">{{name}}</p>
+					<p class="h4">{{simplify-url url}}</p>
 					<p class="h5">({{standard}})</p>
+				</div>
+
 				{{#if lastResult}}
+				<div class="gridview">
 					<ul class="clearfix list-unstyled floated-list task-stats">
 						{{#lastResult}}
 							<li class="danger" title="Number of errors ({{count.error}})">{{count.error}}<span class="stat-type">Errors</span></li>
@@ -38,7 +47,8 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 							<li class="info last" title="Number of notices ({{count.notice}})">{{count.notice}}<span class="stat-type">Notices</span></li>
 						{{/lastResult}}
 					</ul>
-				Last run {{date-format lastResult.date format="DD MMM YYYY"}}
+				</div>
+				<div class="last-run">Last run {{date-format lastResult.date format="DD MMM YYYY"}}</div>
 				{{else}}
 					<p class="no-results">No results</p>
 				{{/if}}