JavaScript in AIPscan doesn't follow a consistent standard

[ross-spencer]

Highlighted in #99 (review) linting might benefit this work. As much as anything it will add consistency for developers with different levels of experience, and is good practice for approaching code-review, i.e. automating as much as possible removes subjectivity.

We can also see improvements that can be made, e.g. using one flavor jslint on our tasks.js today:

jslint AIPscan/static/js/tasks.js

AIPscan/static/js/tasks.js
 #1 Expected exactly one space between ')' and '{'.
    function new_fetch_job(storageServiceId){ // Line 1, Pos 41
 #2 Missing 'use strict' statement.
    $.ajax({ // Line 2, Pos 3
 #3 Expected 'type' at column 9, not column 5.
    type: 'POST', // Line 3, Pos 5
 #4 Expected 'url' at column 9, not column 5.
    url: '/aggregator/new_fetch_job/' + storageServiceId, // Line 4, Pos 5
 #5 Expected 'datatype' at column 9, not column 5.
    datatype: "json", // Line 5, Pos 5
 #6 Expected 'success' at column 9, not column 5.
    success: function(data) { // Line 6, Pos 5
 #7 Expected exactly one space between 'function' and '('.
    success: function(data) { // Line 6, Pos 22
 #8 Expected '$' at column 13, not column 7.
    $('#console').css('background-color', '#000'); // Line 7, Pos 7
 #9 Expected '$' at column 13, not column 7.
    $('#console').prepend('<div class="log">Fetch job started ' + data["timestamp"] + '</div>'); // Line 8, Pos 7
#10 ['timestamp'] is better written in dot notation.
    $('#console').prepend('<div class="log">Fetch job started ' + data["timestamp"] + '</div>'); // Line 8, Pos 74
#11 Expected '$' at column 13, not column 7.
    $('#console').append('<div class="log">Downloading package lists</div>') // Line 9, Pos 7
#12 Expected ';' and instead saw 'var'.
    $('#console').append('<div class="log">Downloading package lists</div>') // Line 9, Pos 79
#13 Expected 'var' at column 13, not column 7.
    var showcount = false // Line 10, Pos 7
#14 Expected ';' and instead saw 'package_list_task_status'.
    var showcount = false // Line 10, Pos 28
#15 Expected 'package_list_task_status' at column 13, not column 7.
    package_list_task_status(data["taskId"], showcount, data["fetchJobId"]); // Line 11, Pos 7
#16 ['taskId'] is better written in dot notation.
    package_list_task_status(data["taskId"], showcount, data["fetchJobId"]); // Line 11, Pos 37
#17 ['fetchJobId'] is better written in dot notation.
    package_list_task_status(data["taskId"], showcount, data["fetchJobId"]); // Line 11, Pos 64
#18 Expected '}' at column 9, not column 7.
    }, // Line 12, Pos 7
#19 Expected 'error' at column 9, not column 5.
    error: function() { // Line 13, Pos 5
#20 Expected exactly one space between 'function' and '('.
    error: function() { // Line 13, Pos 20
#21 Expected 'alert' at column 13, not column 7.
    alert('Unexpected error'); // Line 14, Pos 7
#22 Expected '}' at column 9, not column 7.
    } // Line 15, Pos 7
#23 Expected '}' at column 5, not column 3.
    }); // Line 16, Pos 3
#24 Expected exactly one space between ')' and '{'.
    function package_list_task_status(taskId, showcount, fetchJobId){ // Line 19, Pos 65
#25 Missing 'use strict' statement.
    const status_pending = 'PENDING' // Line 20, Pos 3
#26 Unexpected 'const'.
    const status_pending = 'PENDING' // Line 20, Pos 3
#27 Stopping. (24% scanned).
     // Line 20, Pos 9

A proposal here is to:

• identify a good linter, e.g. eslint, jslint.
• Optionally identify a good style, e.g. google-style, airbnb-stype (options in eslint).
• Add linting to tox, example here.
• Submit a PR to include tox changes, update github actions, and correct existing issues.

This may rely on #102
Related to #43

[ross-spencer]

Related to #97 where a consistent standard and testing practice for JavaScript would be good to put in place as AIPscan's UI evolves.

[mcantelon]

Use of prettier, via a pre-commit hook, would probably be a good starting place.

https://github.com/pre-commit/mirrors-prettier

We can format CSS using it as well. And eslint supports prettier's format so if we need its capabilities we can potentially add it too.

[mcantelon]

A fix was merged (using prettier for JS/CSS checking): #279