docs: service: http: Clean up JavaScript example

* Create docs page for HTTP service JavaScript example
* Fix port assignment for http service
* Add static file serving to HTTP service
* Add serving api.js from HTTP service
* Lint files with js-beautify
* Enforce linting in CI style check

Signed-off-by: John Andersen <[email protected]>

Author: pdxjohnny

.ci/run.sh

@@ -118,6 +118,11 @@ function run_whitespace() {
 
 function run_style() {
   black --check "${SRC_ROOT}"
+
+  for filename in $(git ls-files \*.js); do
+    echo "Checking JavaScript file \'${filename}\'"
+    diff <(js-beautify -n -s 2 "${filename}") "${filename}"
+  done
 }
 
 function run_docs() {

CHANGELOG.md

@@ -11,13 +11,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Test for `cached_download`
 - Directions on how to read the CI under the Git and GitHub page of the
   contributing documentation.
+- HTTP API
+  - Static file serving from a dirctory with `-static`
+  - `api.js` file serving with the `-js` flag
+  - Docs page for JavaScript example
+### Fixed
+- Port assignment for the HTTP API via the `-port` flag
 ### Changed
 - `repo`/`Repo` to `record`/`Record`
 - Definitions with a `spec` can use the `subspec` parameter to declare that they
   are a list or a dict where the values are of the `spec` type. Rather than the
   list or dict itself being of the `spec` type.
 - Fixed the URL mentioned in example to configure a model.
 - Sphinx doctests are now run in the CI in the DOCS task.
+- Lint JavaScript files with js-beautify and enforce with CI
 ### Removed
 - Unused imports
 

docs/contributing/style.rst

@@ -4,17 +4,29 @@ Style
 This document talks about code formatting, conventions, documentation, and any
 stylistic choices that we adhere to.
 
-File Formatting
----------------
+Try to run the formatters before every commit. This way, if you push up files
+for review, they are easy to read, even if your pull request isn't yet ready to
+merge.
 
-We run the `black <https://github.com/psf/black>`_ formatter on all files. Try
-to run it before every commit. This way, if you push up files for review, they
-are easy to read, even if your pull request isn't yet ready to merge.
+Python File Formatting
+----------------------
+
+Run the `black <https://github.com/psf/black>`_ formatter on all Python files.
 
 .. code-block:: console
 
     $ black .
 
+JavaScript File Formatting
+--------------------------
+
+Run the `js-beautify <https://github.com/beautify-web/js-beautify>`_ formatter
+on all JavaScript files. Use the following options.
+
+.. code-block:: console
+
+    $ js-beautify -r -n -s 2 file_to_format.js
+
 Imports
 -------
 

examples/maintained/main.js

@@ -1,4 +1,4 @@
-function populate_table(tableDOM, URLs) {
+function populate_table (tableDOM, URLs) {
   var row;
   var col;
   // Clear the table
@@ -35,23 +35,23 @@ function populate_table(tableDOM, URLs) {
   }
 }
 
-function refreshTable(tableDOM) {
+function refreshTable (tableDOM) {
   return fetch('cgi-bin/api.py?action=dump')
-  .then(function(response) {
-    return response.json()
-  })
-  .then(function(URLs) {
-    populate_table(tableDOM, URLs);
-  });
+    .then(function(response) {
+      return response.json()
+    })
+    .then(function(URLs) {
+      populate_table(tableDOM, URLs);
+    });
 }
 
-function setMaintenance(URL, maintained) {
+function setMaintenance (URL, maintained) {
   return fetch('cgi-bin/api.py?action=set' +
-    '&maintained=' + Number(maintained) +
-    '&URL=' + URL)
-  .then(function(response) {
-    return response.json()
-  }.bind(this));
+      '&maintained=' + Number(maintained) +
+      '&URL=' + URL)
+    .then(function(response) {
+      return response.json()
+    }.bind(this));
 }
 
 window.addEventListener('DOMContentLoaded', function(event) {
@@ -62,17 +62,17 @@ window.addEventListener('DOMContentLoaded', function(event) {
 
   maintainedDOM.addEventListener('click', function(event) {
     setMaintenance(URLDOM.value, true)
-    .then(function() {
-      refreshTable(tableDOM);
-    });
+      .then(function() {
+        refreshTable(tableDOM);
+      });
   });
 
   unmaintainedDOM.addEventListener('click', function(event) {
     setMaintenance(URLDOM.value, false)
-    .then(function() {
-      refreshTable(tableDOM);
-    });
+      .then(function() {
+        refreshTable(tableDOM);
+      });
   });
 
   refreshTable(tableDOM);
-});
+});

examples/maintained/ml.js

@@ -1,10 +1,10 @@
-function predict(URL) {
+function predict (URL) {
   return fetch('cgi-bin/api-ml.py?action=predict' +
-    '&maintained=' + Number(maintained) +
-    '&URL=' + URL)
-  .then(function(response) {
-    return response.json()
-  }.bind(this));
+      '&maintained=' + Number(maintained) +
+      '&URL=' + URL)
+    .then(function(response) {
+      return response.json()
+    }.bind(this));
 }
 
 window.addEventListener('DOMContentLoaded', function(event) {
@@ -14,8 +14,8 @@ window.addEventListener('DOMContentLoaded', function(event) {
 
   predictDOM.addEventListener('click', function(event) {
     predict(URLDOM.value)
-    .then(function() {
-      refreshTable(tableDOM);
-    });
+      .then(function() {
+        refreshTable(tableDOM);
+      });
   });
-});
+});

service/http/MANIFEST.in

@@ -1,2 +1,3 @@
 include README.md
 include LICENSE
+include dffml_service_http/api.js