Bump core openmct dependency (#184)

.webpack/webpack.common.js

@@ -41,6 +41,8 @@ const config = {
              * Globals
             **/
             "openmct": path.join(__dirname, '..', "node_modules/openmct/dist/openmct.js"),
+            // this is a core openmct alias required to resolve '@' in core components
+            "@": path.join(__dirname, '..', "node_modules/openmct/src"),
             "saveAs": "file-saver/src/FileSaver.js",
             "EventEmitter": "eventemitter3",
             "bourbon": "bourbon.scss",
@@ -53,6 +55,7 @@ const config = {
             "services": path.join(__dirname, '..', "src/services"),
             "lib": path.join(__dirname, '..', "src/lib"),
             "tables": path.join(__dirname, '..', "src/tables"),
+            "utils": path.join(__dirname, '..', "src/utils"),
             /**
              * Open MCT Folder View Components
             **/
@@ -72,16 +75,19 @@ const config = {
              /**
              * Telemetry Table Components
             **/
-            "openmct.tables.components.Table": path.join(__dirname, '..', "node_modules/openmct/src/plugins/telemetryTable/components/table.vue"),
-            "openmct.tables.components.TableConfiguration": path.join(__dirname, '..', "node_modules/openmct/src/plugins/telemetryTable/components/table-configuration.vue"),
+            "openmct.tables.components.Table": path.join(__dirname, '..', "node_modules/openmct/src/plugins/telemetryTable/components/TableComponent.vue"),
+            "openmct.tables.components.TableConfiguration": path.join(__dirname, '..', "node_modules/openmct/src/plugins/telemetryTable/components/TableConfiguration.vue"),
+            "vue": "vue/dist/vue.esm-bundler.js"
         }
     },
     plugins: [
         new webpack.DefinePlugin({
             __VISTA_VERSION__: `'${packageDefinition.version}'`,
             __VISTA_BUILD_DATE__: `'${new Date()}'`,
             __VISTA_REVISION__: `'${gitRevision}'`,
-            __VISTA_BUILD_BRANCH__: `'${gitBranch}'`
+            __VISTA_BUILD_BRANCH__: `'${gitBranch}'`,
+            __VUE_OPTIONS_API__: true, // enable/disable Options API support, default: true
+            __VUE_PROD_DEVTOOLS__: false // enable/disable devtools support in production, default: false
         }),
         new VueLoaderPlugin(),
         new MiniCssExtractPlugin({
@@ -98,13 +104,23 @@ const config = {
                     {
                         loader: 'css-loader'
                     },
-                    'resolve-url-loader',
-                    'sass-loader'
+                    {
+                        loader: 'resolve-url-loader'
+                    },
+                    {
+                        loader: 'sass-loader',
+                        options: { sourceMap: true }
+                    }
                 ]
             },
             {
                 test: /\.vue$/,
-                use: 'vue-loader'
+                loader: 'vue-loader',
+                options: {
+                    compilerOptions: {
+                        whitespace: 'preserve'
+                    }
+                }
             },
             {
                 test: /\.html$/,

.webpack/webpack.dev.js

@@ -21,11 +21,6 @@ module.exports = merge(common, {
     entry: {
         config: './config.js'
     },
-    resolve: {
-        alias: {
-            vue: path.join(__dirname, '..', 'node_modules/vue/dist/vue.js'),
-        }
-    },
     plugins: [
         new CopyWebpackPlugin({
             patterns: [

.webpack/webpack.prod.js

@@ -11,11 +11,5 @@ const path = require('path');
 
 /** @type {import('webpack').Configuration} */
 module.exports =  merge(common, {
-    mode: 'production',
-    resolve: {
-        alias: {
-            "vue": path.join(__dirname, '..', 'node_modules/vue/dist/vue.min.js'),
-        }
-    },
-    devtool: 'source-map'
+    mode: 'production'
 });

config.js

@@ -481,6 +481,22 @@
           }
         ],
         */
+        /**
+         * Table Performance Mode Configuration
+         * Can increase performance by limiting the maximum rows retained and displayed by tables
+         * Affects all bounded table types such as Telemetry and EVR tables
+         * Does not affect latest available tables such as Channel tables
+         * @typedef TablePerformanceOptions
+         * @type {object}
+         * @property {('performance'|'unlimited')} telemetryMode performance mode limits the maximum table rows
+         * @property {Boolean} persistModeChange whether changes in the UI are persisted with the table
+         * @property {Number} rowLimit the maximum number of rows in performance mode
+         */
+        tablePerformanceOptions: {
+          telemetryMode: 'unlimited',
+          persistModeChange: false,
+          rowLimit: 50
+        },
         /**
          * Developer Settings-- do not modify these unless you know what
          * they do!

index.html

@@ -20,5 +20,6 @@
     <link rel="icon" type="image/png" href="node_modules/openmct/dist/favicons/favicon-16x16.png" sizes="16x16" type="image/x-icon">
 </head>
 <body class="user-environ">
+    <div id="app"></div>
 </body>
 </html>

loader.js

@@ -70,14 +70,14 @@ define([
             }
         ));
         openmct.install(ClearDataIndicator.default(config.globalStalenessInterval));
-        openmct.install(CommandEventsViewPlugin.default());
-        openmct.install(MessagesPlugin.default());
-        openmct.install(ProductStatusPlugin.default());
+        openmct.install(CommandEventsViewPlugin.default(config.tablePerformanceOptions));
+        openmct.install(MessagesPlugin.default(config.tablePerformanceOptions));
+        openmct.install(ProductStatusPlugin.default(config.tablePerformanceOptions));
         openmct.install(openmct.plugins.UTCTimeSystem())
         openmct.install(openmct.plugins.Notebook());
         openmct.install(MetadataActionPlugin.default());
-        openmct.install(DictionaryViewPlugin.default());
-        openmct.install(PacketSummaryPlugin.default());
+        openmct.install(DictionaryViewPlugin.default(config.tablePerformanceOptions));
+        openmct.install(PacketSummaryPlugin.default(config.tablePerformanceOptions));
         openmct.install(ContainerViewPlugin.default());
         openmct.install(openmct.plugins.Clock(
             { useClockIndicator: false }

package.json

@@ -4,6 +4,7 @@
   "description": "Open MCT for MCWS",
   "devDependencies": {
     "@braintree/sanitize-url": "6.0.2",
+    "@vue/compiler-sfc": "3.3.8",
     "babel-loader": "8.2.3",
     "babel-plugin-istanbul": "6.1.1",
     "bower": "^1.7.7",
@@ -31,17 +32,16 @@
     "mini-css-extract-plugin": "2.6.0",
     "moment": "2.29.4",
     "node-bourbon": "^4.2.3",
-    "openmct": "nasa/openmct#omm-r5.2.0-rc3",
+    "openmct": "nasa/openmct#omm-release/5.3-next",
     "printj": "^1.2.1",
     "raw-loader": "^0.5.1",
     "resolve-url-loader": "5.0.0",
     "sass": "1.52.2",
     "sass-loader": "12.6.0",
     "source-map-loader": "^0.2.4",
     "style-loader": "^1.0.1",
-    "vue": "2.6.14",
-    "vue-loader": "15.9.8",
-    "vue-template-compiler": "2.6.14",
+    "vue": "3.3.8",
+    "vue-loader": "16.8.3",
     "webpack": "5.76.3",
     "webpack-cli": "5.0.0",
     "webpack-dev-server": "4.11.1",

src/AMMOSPlugins.js

@@ -97,7 +97,7 @@ define([
 
             mcwsClient.default.configure(options, identityPlugin.login);
 
-            openmct.install(MultipleHistoricalSessions.default());
+            openmct.install(MultipleHistoricalSessions.default(options.tablePerformanceOptions));
             openmct.install(RealtimeSessions.default());
 
             openmct.install(new HistoricalTelemetryPlugin(options));
@@ -108,12 +108,12 @@ define([
             openmct.install(new VenuePlugin.default(options));
             openmct.install(FrameWatchViewPlugin.default());
             openmct.install(FrameEventFilterViewPlugin.default());
-            openmct.install(new ChannelTablePlugin.default());
+            openmct.install(new ChannelTablePlugin.default(options.tablePerformanceOptions));
             openmct.install(new ChannelTableSetPlugin.default());
             openmct.install(new ChannelLimitsPlugin.default());
-            openmct.install(new FrameAccountabilityPlugin.default(options.frameAccountabilityExpectedVcidList));
-            openmct.install(EVRViewPlugin.default(options.taxonomy));
-            openmct.install(new AlarmsViewPlugin.default());
+            openmct.install(new FrameAccountabilityPlugin.default(options));
+            openmct.install(EVRViewPlugin.default(options));
+            openmct.install(new AlarmsViewPlugin.default(options.tablePerformanceOptions));
             openmct.install(MCWSIndicatorPlugin.default());
 
             if (window.openmctMCWSConfig.messageStreamUrl && window.openmctMCWSConfig.messageStreamUrl !== '') {

src/actionModifiers/ImportExportWithDatasets/ImportWithDatasetsFormComponent.vue

@@ -139,7 +139,7 @@ export default {
                 const referencedDatasetKeyString = this.makeKeyString(referencedDataset);
                 const datasetKeyString = this.makeKeyString(this.datasets[0]);
 
-                this.$set(this.mapping, referencedDatasetKeyString, datasetKeyString);
+                this.mapping[referencedDatasetKeyString] = datasetKeyString;
             });
         },
         makeKeyString(domainObject) {

src/actionModifiers/ImportExportWithDatasets/importWithDatasetsModifier.js

@@ -1,5 +1,5 @@
 import ImportWithDatasetsFormComponent from './ImportWithDatasetsFormComponent.vue';
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 import DatasetCache from 'services/dataset/DatasetCache';
 import Types from 'types/types';
 
@@ -9,6 +9,7 @@ function importWithDatasetsModifier(openmct) {
     let datasets;
     let referencedDatasets;
     let component;
+    let _destroy = null;
 
     const importAsJSONAction = openmct.actions._allActions['import.JSON'];
 
@@ -75,7 +76,7 @@ function importWithDatasetsModifier(openmct) {
                 onSave(domainObject, changes);
             })
             .catch(error => {
-                component.$destroy();
+                _destroy?.();
             });
     }
 
@@ -124,8 +125,7 @@ function importWithDatasetsModifier(openmct) {
     function getImportWithDatasetsFormController(openmct) {
         return {
             show(element, model, onChange) {
-                component = new Vue({
-                    el: element,
+                const componentDefinition = {
                     components: {
                         ImportWithDatasetsFormComponent
                     },
@@ -149,12 +149,19 @@ function importWithDatasetsModifier(openmct) {
                             this.hasImport = true
                         }
                     }
-                });
+                };
+                const componentOptions = { element };
 
-                return component;
+                const {
+                  componentInstance,
+                  destroy,
+                  el
+                } = mount(componentDefinition, componentOptions)
+
+                _destroy = destroy;
             },
             destroy() {
-                component.$destroy();
+                _destroy?.();
                 resetAction();
             }
         };
@@ -164,6 +171,7 @@ function importWithDatasetsModifier(openmct) {
         datasets = undefined;
         referencedDatasets = undefined;
         component = undefined;
+        _destroy = undefined;
     }
 
     function getReferencedDatasetsFromImport(json) {

src/alarmsView/alarms-view-timeout.vue → src/alarmsView/AlarmsAutoclear.vue

@@ -49,7 +49,7 @@ export default {
         this.unlisteners = [];
         this.openmct.editor.on('isEditing', this.toggleEdit);
     },
-    destroyed() {
+    beforeUnmount() {
         this.openmct.editor.off('isEditing', this.toggleEdit);
         this.unlisteners.forEach((unlisten) => unlisten());
     }

src/alarmsView/AlarmsAutoclearViewProvider.js

@@ -0,0 +1,61 @@
+import mount from 'utils/mountVueComponent';
+import AlarmsAutoclear from './AlarmsAutoclear.vue';
+import TelemetryTableConfiguration from 'openmct.tables.TelemetryTableConfiguration';
+
+export default class AlarmsAutoClearViewProvider {
+  constructor(openmct, options) {
+    this.key = 'vista.alarmsView-configuration';
+    this.name = 'Autoclear';
+
+    this.openmct = openmct;
+    this.options = options;
+    this._destroy = null;
+  }
+
+  canView(selection) {
+    if (selection.length === 0) {
+        return false;
+    }
+
+    const domainObject = selection[0][0].context.item;
+
+    return domainObject?.type === 'vista.alarmsView';
+  }
+
+  view(selection) {
+    const domainObject = selection[0][0].context.item;
+    const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct, this.options);
+
+    return {
+      show: function (element) {
+        const componentDefinition = {
+          provide: {
+            openmct,
+            tableConfiguration
+          },
+          components: {
+            AlarmsAutoclear
+          },
+          template: '<AlarmsAutoclear />'
+        };
+        const componentOptions = {
+          element
+        };
+
+        const {
+          componentInstance,
+          destroy,
+          el
+        } = mount(componentDefinition, componentOptions);
+
+        this._destroy = destroy;
+      },
+      priority: function () {
+        return openmct.priority.HIGH;
+      },
+      destroy: function () {
+        this._destroy?.();
+      }
+    }
+  }
+}