webui: Integrate eslint-config-yscope and refactor accordingly.

components/webui/.meteor/packages

@@ -20,3 +20,4 @@ [email protected]  # Update client in development without reloading t
 [email protected]             # Define static page content in .html files
 react-meteor-data       # React higher-order component for reactively tracking Meteor data
 fourseven:scss
+meteortesting:mocha

components/webui/README.md

@@ -2,8 +2,12 @@
 
 ## Requirements
 
-* [Node.js 14](https://nodejs.org/download/release/v14.21.3/) (Meteor.js only
-  [supports](https://docs.meteor.com/install#prereqs-node) Node.js versions >= 10 and <= 14)
+* Node.js.
+  To manage different versions of Node.js, we recommend using
+[nvm (Node Version Manager)](https://github.com/nvm-sh/nvm).
+  * **Node.js 14** - For running Meteor. Meteor.js only
+    [supports](https://docs.meteor.com/install#prereqs-node) Node.js versions >= 10 and <= 14.
+  * **Node.js 18 or higher** - For linting.
 * [Meteor.js](https://docs.meteor.com/install.html#installation)
 
 ## Install the dependencies
@@ -15,6 +19,16 @@ meteor npm install
 If you ever add a package manually to `package.json` or `package.json` changes
 for some other reason, you should rerun this command.
 
+> ℹ️ When running this command, you might see warnings related to uninstalled `eslint-config-yscope` peer dependencies,
+> like the ones below:
+> ```
+> npm WARN [email protected] requires a peer of eslint@^8.57.0 but
+>  none is installed. You must install peer dependencies yourself.
+> ```
+> **These `eslint-config-yscope` warnings can be safely ignored.** They occur because the default npm version in
+> Node.js 14 does not automatically install peer dependencies. If needed, peer dependencies are automatically installed
+> when switching to Node.js version 18 or higher for linting purposes, as outlined in the [Linting](#linting) section.
+
 # Running in development
 
 The full functionality of the webui depends on other components in the CLP
@@ -44,3 +58,68 @@ package:
    ```
 5. The Web UI should now be available at `http://<webui.host>:<webui.port>`
    (e.g., http://localhost:4000).
+
+# Linting
+
+We enforce code quality and consistency across our project using ESLint. You can use the following
+npm scripts defined in `package.json` to check and fix linting issues.
+
+## Preparing Your Environment for Linting
+
+Due to specific dependencies, linting this project requires Node.js version 18 or higher. Follow
+these steps to set up your environment for linting:
+1. **Switch to Node.js Version 18 or Higher**
+
+    If you have not installed Node.js 18 or higher, use nvm to install it first:
+
+    ```shell
+    nvm install 18
+    ```
+
+    Switch to Node.js 18:
+
+    ```shell
+    nvm use 18
+    ```
+
+2. **Re-install Dependencies**
+
+    After switching to the correct Node.js version, re-install the project dependencies with the
+following command to prevent `npm` from checking the `package-lock.json` file version:
+
+    ```shell
+    npm install --no-package-lock
+    ```
+
+## Checking for Linting Errors
+
+To check for linting errors across the project, run the following command:
+
+```shell
+npm run lint
+```
+
+This command will run ESLint on the source code, reporting any linting errors without fixing them.
+
+## Automatically Fixing Linting Errors
+
+If you want to automatically fix linting errors that can be resolved by ESLint, use the following
+command:
+
+```shell
+npm run lint:fix
+```
+
+This command attempts to automatically fix any linting issues found in the same
+directories.
+
+## Linting Specific Files
+
+While the above commands lint multiple directories, you might sometimes need to lint specific files.
+You can do so by running ESLint directly with a custom file path, for example:
+
+```shell
+eslint path/to/src.js
+```
+
+Replace `path/to/src.js` with the path to the file you want to lint.

components/webui/client/main.html

@@ -4,10 +4,10 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:[email protected]&display=swap"
           rel="stylesheet">
-    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet'
-          type='text/css'>
+    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
+          rel="stylesheet">
 </head>
 
 <body>
-    <div id="root"></div>
+<div id="root"></div>
 </body>

components/webui/client/main.jsx

@@ -1,18 +1,21 @@
-import React from "react";
+import {Meteor} from "meteor/meteor";
+import {StrictMode} from "react";
+import ReactDOM from "react-dom/client";
+import {Router} from "react-router";
 
 import {createBrowserHistory} from "history";
-import {Meteor} from "meteor/meteor";
-import {render} from "react-dom";
-import {Router, Switch} from "react-router";
 
-import {App} from "/imports/ui/App.jsx";
+import {App} from "/imports/ui/App";
+
 
 Meteor.startup(() => {
-    const routes = (
-        <Router history={createBrowserHistory()}>
-            <App/>
-        </Router>
-    );
+    const root = ReactDOM.createRoot(document.getElementById("root"));
 
-    render(routes, document.getElementById("root"));
+    root.render(
+        <StrictMode>
+            <Router history={createBrowserHistory()}>
+                <App/>
+            </Router>
+        </StrictMode>
+    );
 });

components/webui/imports/api/constants.js

@@ -1,11 +1,12 @@
 /**
- * Enum for the CLP package's possible storage engines. These must match the values in
+ * Enum of the CLP package's possible storage engines. These must match the values in
  * clp_py_utils.clp_config.StorageEngine.
+ *
  * @enum {string}
  */
 const CLP_STORAGE_ENGINES = Object.freeze({
     CLP: "clp",
-    CLP_S: "clp-s"
+    CLP_S: "clp-s",
 });
 
 export {CLP_STORAGE_ENGINES};

components/webui/imports/api/ingestion/collections.js

@@ -1,8 +1,18 @@
 import {Mongo} from "meteor/mongo";
 
 
-const StatsCollection = new Mongo.Collection(Meteor.settings.public.StatsCollectionName);
+/**
+ * Enum representing the statistics collection IDs.
+ *
+ * @enum {string}
+ */
+const STATS_COLLECTION_ID = Object.freeze({
+    COMPRESSION: "compression",
+});
 
-const STATS_COLLECTION_ID_COMPRESSION = "compression_stats";
+const StatsCollection = new Mongo.Collection(Meteor.settings.public.StatsCollectionName);
 
-export {StatsCollection, STATS_COLLECTION_ID_COMPRESSION};
+export {
+    STATS_COLLECTION_ID,
+    StatsCollection,
+};

components/webui/imports/api/ingestion/server/StatsDbManager.js

@@ -1,21 +1,33 @@
-const CLP_ARCHIVES_TABLE_COLUMN_NAMES = {
+/**
+ * Enum of the column names for the `clp_archives` table.
+ *
+ * @enum {string}
+ */
+const CLP_ARCHIVES_TABLE_COLUMN_NAMES = Object.freeze({
     BEGIN_TIMESTAMP: "begin_timestamp",
     END_TIMESTAMP: "end_timestamp",
     UNCOMPRESSED_SIZE: "uncompressed_size",
     SIZE: "size",
-};
+});
 
-const CLP_FILES_TABLE_COLUMN_NAMES = {
+/**
+ * Enum of the column names for the `clp_files` table.
+ *
+ * @enum {string}
+ */
+const CLP_FILES_TABLE_COLUMN_NAMES = Object.freeze({
     ORIG_FILE_ID: "orig_file_id",
     NUM_MESSAGES: "num_messages",
-};
+});
 
 /**
  * Class for retrieving compression stats from the database.
  */
 class StatsDbManager {
     #sqlDbConnPool;
+
     #clpArchivesTableName;
+
     #clpFilesTableName;
 
     /**
@@ -24,7 +36,7 @@ class StatsDbManager {
      * @param {string} tableNames.clpArchivesTableName
      * @param {string} tableNames.clpFilesTableName
      */
-    constructor(sqlDbConnPool, {
+    constructor (sqlDbConnPool, {
         clpArchivesTableName,
         clpFilesTableName,
     }) {
@@ -35,7 +47,7 @@ class StatsDbManager {
     }
 
     /**
-     * @typedef {object} Stats
+     * @typedef {object} CompressionStats
      * @property {number|null} begin_timestamp
      * @property {number|null} end_timestamp
      * @property {number|null} total_uncompressed_size
@@ -46,26 +58,38 @@ class StatsDbManager {
 
     /**
      * Queries compression stats.
-     * @returns {Promise<Stats>}
+     *
+     * @return {Promise<CompressionStats>}
      * @throws {Error} on error.
      */
-    async getCompressionStats() {
-        const [queryStats] = await this.#sqlDbConnPool.query(
-            `SELECT a.begin_timestamp         AS begin_timestamp,
-                    a.end_timestamp           AS end_timestamp,
-                    a.total_uncompressed_size AS total_uncompressed_size,
-                    a.total_compressed_size   AS total_compressed_size,
-                    b.num_files               AS num_files,
-                    b.num_messages            AS num_messages
-             FROM (SELECT MIN(${CLP_ARCHIVES_TABLE_COLUMN_NAMES.BEGIN_TIMESTAMP})   AS begin_timestamp,
-                          MAX(${CLP_ARCHIVES_TABLE_COLUMN_NAMES.END_TIMESTAMP})     AS end_timestamp,
-                          SUM(${CLP_ARCHIVES_TABLE_COLUMN_NAMES.UNCOMPRESSED_SIZE}) AS total_uncompressed_size,
-                          SUM(${CLP_ARCHIVES_TABLE_COLUMN_NAMES.SIZE})              AS total_compressed_size
-                   FROM ${this.#clpArchivesTableName}) a,
-                  (SELECT NULLIF(COUNT(DISTINCT ${CLP_FILES_TABLE_COLUMN_NAMES.ORIG_FILE_ID}), 0) AS num_files,
-                          SUM(${CLP_FILES_TABLE_COLUMN_NAMES.NUM_MESSAGES})                       AS num_messages
-                   FROM ${this.#clpFilesTableName}) b;`,
-        );
+    async getCompressionStats () {
+        /* eslint-disable @stylistic/js/max-len */
+        const [queryStats] = await this.#sqlDbConnPool.query(`
+            SELECT
+                a.begin_timestamp         AS begin_timestamp,
+                a.end_timestamp           AS end_timestamp,
+                a.total_uncompressed_size AS total_uncompressed_size,
+                a.total_compressed_size   AS total_compressed_size,
+                b.num_files               AS num_files,
+                b.num_messages            AS num_messages
+            FROM
+            (
+                SELECT
+                    MIN(${CLP_ARCHIVES_TABLE_COLUMN_NAMES.BEGIN_TIMESTAMP})   AS begin_timestamp,
+                    MAX(${CLP_ARCHIVES_TABLE_COLUMN_NAMES.END_TIMESTAMP})     AS end_timestamp,
+                    SUM(${CLP_ARCHIVES_TABLE_COLUMN_NAMES.UNCOMPRESSED_SIZE}) AS total_uncompressed_size,
+                    SUM(${CLP_ARCHIVES_TABLE_COLUMN_NAMES.SIZE})              AS total_compressed_size
+                FROM ${this.#clpArchivesTableName}
+            ) a,
+            (
+                SELECT
+                    NULLIF(COUNT(DISTINCT ${CLP_FILES_TABLE_COLUMN_NAMES.ORIG_FILE_ID}), 0) AS num_files,
+                    SUM(${CLP_FILES_TABLE_COLUMN_NAMES.NUM_MESSAGES})                       AS num_messages
+                FROM ${this.#clpFilesTableName}
+            ) b;
+        `);
+        /* eslint-enable @stylistic/js/max-len */
+
         return queryStats[0];
     }
 }

components/webui/imports/api/ingestion/server/publications.js

@@ -1,14 +1,15 @@
-import {logger} from "/imports/utils/logger";
 import {Meteor} from "meteor/meteor";
 
-import {STATS_COLLECTION_ID_COMPRESSION, StatsCollection} from "../collections";
+import {logger} from "/imports/utils/logger";
+
+import {
+    STATS_COLLECTION_ID,
+    StatsCollection,
+} from "../collections";
 import StatsDbManager from "./StatsDbManager";
 
 
-/**
- * @type {number}
- */
-const STATS_REFRESH_INTERVAL_MS = 5000;
+const STATS_REFRESH_INTERVAL_MILLIS = 5000;
 
 /**
  * @type {StatsDbManager|null}
@@ -23,16 +24,16 @@ let refreshMeteorInterval = null;
 /**
  * Updates the compression statistics in the StatsCollection.
  *
- * @returns {Promise<void>}
+ * @return {Promise<void>}
  */
 const refreshCompressionStats = async () => {
-    if (Meteor.server.stream_server.all_sockets().length === 0) {
+    if (0 === Meteor.server.stream_server.all_sockets().length) {
         return;
     }
 
     const stats = await statsDbManager.getCompressionStats();
     const filter = {
-        id: STATS_COLLECTION_ID_COMPRESSION,
+        _id: STATS_COLLECTION_ID.COMPRESSION,
     };
     const modifier = {
         $set: stats,
@@ -45,6 +46,8 @@ const refreshCompressionStats = async () => {
 };
 
 /**
+ * Initializes the StatsDbManager and sets the refresh interval for compression stats updates.
+ *
  * @param {import("mysql2/promise").Pool} sqlDbConnPool
  * @param {object} tableNames
  * @param {string} tableNames.clpArchivesTableName
@@ -60,9 +63,15 @@ const initStatsDbManager = (sqlDbConnPool, {
         clpFilesTableName,
     });
 
-    refreshMeteorInterval = Meteor.setInterval(refreshCompressionStats, STATS_REFRESH_INTERVAL_MS);
+    refreshMeteorInterval = Meteor.setInterval(
+        refreshCompressionStats,
+        STATS_REFRESH_INTERVAL_MILLIS
+    );
 };
 
+/**
+ * De-initializes the StatsDbManager by clearing the refreshMeteorInterval.
+ */
 const deinitStatsDbManager = () => {
     if (null !== refreshMeteorInterval) {
         Meteor.clearInterval(refreshMeteorInterval);
@@ -74,19 +83,21 @@ const deinitStatsDbManager = () => {
  * Updates and publishes compression statistics.
  *
  * @param {string} publicationName
- *
- * @returns {Mongo.Cursor}
+ * @return {Mongo.Cursor}
  */
 Meteor.publish(Meteor.settings.public.StatsCollectionName, async () => {
     logger.debug(`Subscription '${Meteor.settings.public.StatsCollectionName}'`);
 
     await refreshCompressionStats();
 
     const filter = {
-        id: STATS_COLLECTION_ID_COMPRESSION,
+        _id: STATS_COLLECTION_ID.COMPRESSION,
     };
 
     return StatsCollection.find(filter);
 });
 
-export {initStatsDbManager, deinitStatsDbManager};
+export {
+    deinitStatsDbManager,
+    initStatsDbManager,
+};