Convert OMM to OMM Plugin & Integrate Build Tool Functionality

.webpack/webpack.common.js

@@ -1,32 +1,36 @@
-const path = require('path');
-const packageDefinition = require('../package.json');
-const webpack = require('webpack');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+import { execSync } from 'node:child_process';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import pkg from '../package.json' with { type: 'json' };
 
-const { VueLoaderPlugin } = require('vue-loader');
+import webpack from 'webpack';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+
+import { VueLoaderPlugin } from 'vue-loader';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
 let gitRevision = 'error-retrieving-revision';
 let gitBranch = 'error-retrieving-branch';
 
 try {
-  gitRevision = require('child_process').execSync('git rev-parse HEAD').toString().trim();
-  gitBranch = require('child_process')
-    .execSync('git rev-parse --abbrev-ref HEAD')
-    .toString()
-    .trim();
+  gitRevision = execSync('git rev-parse HEAD').toString().trim();
+  gitBranch = execSync('git rev-parse --abbrev-ref HEAD').toString().trim();
 } catch (err) {
   console.warn('Error retreiving git info', err);
 }
 
 /** @type {import('webpack').Configuration} */
 const config = {
-  context: path.join(__dirname, '..'),
+  context: join(__dirname, '..'),
   entry: {
-    'openmct-mcws': './loader.js'
+    'openmct-mcws-plugin': './plugin.js'
+  },
+  experiments: {
+    outputModule: true, // Enables the feature
   },
   output: {
     library: {
-      name: 'openmctMCWS',
-      type: 'umd'
+      type: 'module'
     },
     filename: '[name].js',
     hashFunction: 'xxhash64',
@@ -38,79 +42,79 @@ const config = {
        * Open MCT Source Paths
        * TODO FIXME these rely on openmct core source paths becase we extend core code directly
        */
-      '@': path.join(__dirname, '..', 'node_modules/openmct/src'),
-      objectUtils: path.join(
+      '@': join(__dirname, '..', 'node_modules/openmct/src'),
+      objectUtils: join(
         __dirname,
         '..',
         'node_modules/openmct/src/api/objects/object-utils.js'
       ),
-      utils: path.join(__dirname, '..', 'node_modules/openmct/src/utils'),
-      'openmct.views.FolderGridViewComponent': path.join(
+      utils: join(__dirname, '..', 'node_modules/openmct/src/utils'),
+      'openmct.views.FolderGridViewComponent': join(
         __dirname,
         '..',
         'node_modules/openmct/src/plugins/folderView/components/GridView.vue'
       ),
-      'openmct.views.FolderListViewComponent': path.join(
+      'openmct.views.FolderListViewComponent': join(
         __dirname,
         '..',
         'node_modules/openmct/src/plugins/folderView/components/ListView.vue'
       ),
-      'openmct.tables.TelemetryTable': path.join(
+      'openmct.tables.TelemetryTable': join(
         __dirname,
         '..',
         'node_modules/openmct/src/plugins/telemetryTable/TelemetryTable.js'
       ),
-      'openmct.tables.TelemetryTableColumn': path.join(
+      'openmct.tables.TelemetryTableColumn': join(
         __dirname,
         '..',
         'node_modules/openmct/src/plugins/telemetryTable/TelemetryTableColumn.js'
       ),
-      'openmct.tables.TelemetryTableRow': path.join(
+      'openmct.tables.TelemetryTableRow': join(
         __dirname,
         '..',
         'node_modules/openmct/src/plugins/telemetryTable/TelemetryTableRow.js'
       ),
-      'openmct.tables.TelemetryTableConfiguration': path.join(
+      'openmct.tables.TelemetryTableConfiguration': join(
         __dirname,
         '..',
         'node_modules/openmct/src/plugins/telemetryTable/TelemetryTableConfiguration.js'
       ),
-      'openmct.tables.collections.TableRowCollection': path.join(
+      'openmct.tables.collections.TableRowCollection': join(
         __dirname,
         '..',
         'node_modules/openmct/src/plugins/telemetryTable/collections/TableRowCollection.js'
       ),
-      'openmct.tables.components.Table': path.join(
+      'openmct.tables.components.Table': join(
         __dirname,
         '..',
         'node_modules/openmct/src/plugins/telemetryTable/components/TableComponent.vue'
       ),
-      'openmct.tables.components.TableConfiguration': path.join(
+      'openmct.tables.components.TableConfiguration': join(
         __dirname,
         '..',
         'node_modules/openmct/src/plugins/telemetryTable/components/TableConfiguration.vue'
       ),
       /**
        * Globals
        **/
-      openmct: path.join(__dirname, '..', 'node_modules/openmct/dist/openmct.js'),
+      openmct: join(__dirname, '..', 'node_modules/openmct/dist/openmct.js'),
       saveAs: 'file-saver/src/FileSaver.js',
       bourbon: 'bourbon.scss',
-      printj: path.join(__dirname, '..', 'node_modules/printj/dist/printj.min.js'),
+      printj: join(__dirname, '..', 'node_modules/printj/dist/printj.min.js'),
       /**
        * OMM Paths
        **/
-      types: path.join(__dirname, '..', 'src/types'),
-      services: path.join(__dirname, '..', 'src/services'),
-      lib: path.join(__dirname, '..', 'src/lib'),
-      tables: path.join(__dirname, '..', 'src/tables'),
-      ommUtils: path.join(__dirname, '..', 'src/utils'),
+      types: join(__dirname, '..', 'src/types'),
+      services: join(__dirname, '..', 'src/services'),
+      lib: join(__dirname, '..', 'src/lib'),
+      tables: join(__dirname, '..', 'src/tables'),
+      ommUtils: join(__dirname, '..', 'src/utils'),
       vue: 'vue/dist/vue.esm-bundler.js'
     }
   },
   plugins: [
     new webpack.DefinePlugin({
-      __OMM_VERSION__: `'${packageDefinition.version}'`,
+      __OMM_VERSION__: `'${pkg.version}'`,
       __OMM_BUILD_DATE__: `'${new Date()}'`,
       __OMM_REVISION__: `'${gitRevision}'`,
       __OMM_BUILD_BRANCH__: `'${gitBranch}'`,
@@ -182,4 +186,4 @@ const config = {
   stats: 'errors-warnings'
 };
 
-module.exports = config;
+export default config;

.webpack/webpack.prod.js

@@ -3,10 +3,10 @@ This configuration should be used for production installs.
 It is the default webpack configuration.
 */
 
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common');
+import { merge } from 'webpack-merge';
+import common from './webpack.common.js';
 
 /** @type {import('webpack').Configuration} */
-module.exports = merge(common, {
+export default merge(common, {
   mode: 'production'
 });

README.md

@@ -1,8 +1,9 @@
-# Open MCT for MCWS
-Open Mission Control Technologies for Mission Control Web Services (Open MCT for MCWS) is a next-generation web-based mission control framework for visualization of data on desktop and mobile devices. Open MCT for MCWS is built on the [Open MCT Framework](https://github.com/nasa/openmct), and includes adapter code for using MCWS as a telemetry and persistence provider. Open MCT is developed at NASA Ames Research Center in Silicon Valley, in collaboration with NASA AMMOS and the Jet Propulsion Laboratory, California Institute of Technology (under its contract with NASA, 80NM0018D0004).
+# Open MCT for MCWS Plugin
+Open Mission Control Technologies for Mission Control Web Services Plugin (Open MCT for MCWS) is used with Open MCT, a next-generation web-based mission control framework for visualization of data on desktop and mobile devices. Open MCT for MCWS Plugin is built for the [Open MCT Framework](https://github.com/nasa/openmct), and includes adapter code for using MCWS as a telemetry and persistence provider. Open MCT is developed at NASA Ames Research Center in Silicon Valley, in collaboration with NASA AMMOS and the Jet Propulsion Laboratory, California Institute of Technology (under its contract with NASA, 80NM0018D0004).
 
 ## Configuration
-Various configurations and customizations are available by editing `config.js`. Descriptions of each configuration reside with the configuration in the file.
+Various configurations and customizations are available by editing `recipes/default.yaml`.
+Development configurations and customizations are available by editing `recipes/development.yaml`.
 
 ### AMMOS configurations
 1. `camUrl`: The url to the CAM server, if CAM is to be used for authentication.
@@ -11,6 +12,9 @@ Various configurations and customizations are available by editing `config.js`.
 
 ## Development
 
+### Prerequisite
+You will need to install the [Open MCT Configurator](https://github.com/akhenry/openmct-configurator)
+
 ### 1. Install Open MCT for MCWS
 In a terminal, run this command to install Open MCT for MCWS and its dependencies. This may take a few minutes.
 
@@ -20,24 +24,19 @@ If you've installed Open MCT for MCWS locally before, first run this command.
 
     npm run clean
 
-### 2. Modify config.js
-Uncomment the `proxyUrl` setting in `config.js`. It is located under Developer 
-Settings near the end of the file.
-
-### 3. Run Open MCT for MCWS locally
-
-    npm start
+### 2. Modify development.yaml
+If necessary, make any modifications to `development.yaml`, such as adding Open MCT core plugins or modifying settings for the Openmct for MCWS Plugin
 
-With that running, browse to http://localhost:8080/ to access Open MCT for MCWS.
+### 3. Build Open MCT with the Open MCT for MCWS Plugin locally using Open MCT Configurator
 
-### 4. Rebuilding SASS stylesheets
+    npm run build:prod 
+    mct build --recipe recipes/development.yaml --instance development
+    npm run serve
 
-    npm run build:prod
-
-With the stylesheets rebuilt, you can reload your browser (assuming the server is running) to see the rebuilt CSS.
+With that running, browse to http://localhost:8080/ to access Open MCT with the Open MCT for MCWS Plugin
 
 ## Development MCWS server
-To connect Open MCT for MCWS to MCWS, either run a local mock server, run MCWS locally, or connect to a remote instance of MCWS.
+To connect Open MCT to MCWS, either run a local mock server, run MCWS locally, or connect to a remote instance of MCWS.
 
 ## Running a mock MCWS server
 An example mock mcws server - https://github.com/davetsay/mcws-test-server
@@ -50,6 +49,7 @@ Refer to MCWS documentation.
 Running a development server requires that you are on the JPL network so that
 you can access a development MCWS server. You'll need to retrieve an authentication cookie 
 and make a small modification to your Open MCT for MCWS configuration; here's how.
+
 ### 1. Get your CAM cookie
 To get past CAM, you will need to export an environment variable, 
 `COOKIE`, that contains your CAM authentication cookie. Instructions for 
@@ -72,8 +72,10 @@ Running the tests creates a code coverage report in `target/coverage`.
 ## Building for production
 
     npm install
-    mvn clean install
+    npm run build:prod 
+    mct build --recipe recipes/default.yaml --instance default
 
+TODO: UPDATE THIS sentence, possibly with compressing the necessary files into a war.
 This will create a deployable artifact, `openmct_client.war` in the `target` 
 directory.