Merge branch 'master' into stackplots-destroy

* removed DEPRECATION warnings
* test fixes
* added spec reporter to debug failing tests  and fixed couple specs
* disabled failFast to see all failing tests
* disabled fail test and  change timeoutInterval to 5000
* removed unused debounce import

Co-authored-by: Andrew Henry <akhenry@gmail.com>

.circleci/config.yml

@@ -42,6 +42,7 @@ jobs:
             - ~/.npm
             - ~/.cache
             - node_modules
+      - run: npm run lint
       - run: npm run test:coverage -- --browsers=<<parameters.browser>> || <<parameters.always-pass>>
       - store_test_results:
           path: dist/reports/tests/

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,6 +2,7 @@
 
 * [ ] Have you followed the guidelines in our [Contributing document](https://github.com/nasa/openmct/blob/master/CONTRIBUTING.md)?
 * [ ] Have you checked to ensure there aren't other open [Pull Requests](https://github.com/nasa/openmct/pulls) for the same update/change?
+* [ ] Is this change backwards compatible? For example, developers won't need to change how they are calling the API or how they've extended core plugins such as Tables or Plots.
 
 ### Author Checklist
 

CONTRIBUTING.md

@@ -317,6 +317,7 @@ checklist).
 ### Reviewer Checklist
 
 * [ ] Changes appear to address issue?
+* [ ] Changes appear not to be breaking changes?
 * [ ] Appropriate unit tests included?
 * [ ] Code style and in-line documentation are appropriate?
 * [ ] Commit messages meet standards?

karma.conf.js

@@ -25,7 +25,7 @@
 const devMode = process.env.NODE_ENV !== 'production';
 const browsers = [process.env.NODE_ENV === 'debug' ? 'ChromeDebugging' : 'ChromeHeadless'];
 const coverageEnabled = process.env.COVERAGE === 'true';
-const reporters = ['progress', 'html', 'junit'];
+const reporters = ['spec', 'html', 'junit'];
 
 if (coverageEnabled) {
     reporters.push('coverage-istanbul');
@@ -60,7 +60,7 @@ module.exports = (config) => {
         client: {
             jasmine: {
                 random: false,
-                timeoutInterval: 30000
+                timeoutInterval: 5000
             }
         },
         customLaunchers: {
@@ -88,11 +88,6 @@ module.exports = (config) => {
             outputFile: "test-results.xml",
             useBrowserName: false
         },
-        browserConsoleLogOptions: {
-            level: "error",
-            format: "%b %T: %m",
-            terminal: true
-        },
         coverageIstanbulReporter: {
             fixWebpackSourcePaths: true,
             dir: process.env.CIRCLE_ARTIFACTS
@@ -105,6 +100,15 @@ module.exports = (config) => {
                 }
             }
         },
+        specReporter: {
+            maxLogLines: 5,
+            suppressErrorSummary: true,
+            suppressFailed: false,
+            suppressPassed: false,
+            suppressSkipped: true,
+            showSpecTiming: true,
+            failFast: false
+        },
         preprocessors: {
             'indexTest.js': ['webpack', 'sourcemap']
         },

package.json

@@ -41,6 +41,7 @@
     "karma-jasmine": "4.0.1",
     "karma-junit-reporter": "2.0.1",
     "karma-sourcemap-loader": "0.3.8",
+    "karma-spec-reporter": "0.0.32",
     "karma-webpack": "4.0.2",
     "location-bar": "^3.0.1",
     "lodash": "^4.17.12",
@@ -64,6 +65,7 @@
     "uuid": "^3.3.3",
     "v8-compile-cache": "^1.1.0",
     "vue": "2.5.6",
+    "vue-eslint-parser": "7.11.0",
     "vue-loader": "^15.2.6",
     "vue-template-compiler": "2.5.6",
     "webpack": "^4.16.2",

platform/commonUI/edit/src/capabilities/EditorCapability.js

@@ -50,8 +50,6 @@ define(
          * or finish() are called.
          */
         EditorCapability.prototype.edit = function () {
-            console.warn('DEPRECATED: cannot edit via edit capability, use openmct.editor instead.');
-
             if (!this.openmct.editor.isEditing()) {
                 this.openmct.editor.edit();
                 this.domainObject.getCapability('status').set('editing', true);
@@ -82,8 +80,6 @@ define(
          * @returns {*}
          */
         EditorCapability.prototype.save = function () {
-            console.warn('DEPRECATED: cannot save via edit capability, use openmct.editor instead.');
-
             return Promise.resolve();
         };
 
@@ -95,8 +91,6 @@ define(
          * @returns {*}
          */
         EditorCapability.prototype.finish = function () {
-            console.warn('DEPRECATED: cannot finish via edit capability, use openmct.editor instead.');
-
             return Promise.resolve();
         };
 

platform/commonUI/formats/src/UTCTimeFormat.js

@@ -25,15 +25,14 @@ define([
 ], function (
     moment
 ) {
-
-    var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss.SSS",
-        DATE_FORMATS = [
-            DATE_FORMAT,
-            DATE_FORMAT + "Z",
-            "YYYY-MM-DD HH:mm:ss",
-            "YYYY-MM-DD HH:mm",
-            "YYYY-MM-DD"
-        ];
+    const DATE_FORMAT = "YYYY-MM-DD HH:mm:ss.SSS";
+    const DATE_FORMATS = [
+        DATE_FORMAT,
+        DATE_FORMAT + "Z",
+        "YYYY-MM-DD HH:mm:ss",
+        "YYYY-MM-DD HH:mm",
+        "YYYY-MM-DD"
+    ];
 
     /**
      * @typedef Scale
@@ -53,15 +52,27 @@ define([
         this.key = "utc";
     }
 
+    /**
+     * @param {string} formatString
+     * @returns the value of formatString if the value is a string type and exists in the DATE_FORMATS array; otherwise the DATE_FORMAT value.
+     */
+    function validateFormatString(formatString) {
+        return typeof formatString === 'string' && DATE_FORMATS.includes(formatString) ? formatString : DATE_FORMAT;
+    }
+
     /**
      * @param {number} value The value to format.
-     * @returns {string} the formatted date(s). If multiple values were requested, then an array of
+     * @param {string} formatString The string format to format. Default "YYYY-MM-DD HH:mm:ss.SSS" + "Z"
+     * @returns {string} the formatted date(s) according to the proper parameter of formatString or the default value of "YYYY-MM-DD HH:mm:ss.SSS" + "Z".
+     * If multiple values were requested, then an array of
      * formatted values will be returned. Where a value could not be formatted, `undefined` will be returned at its position
      * in the array.
      */
-    UTCTimeFormat.prototype.format = function (value) {
+    UTCTimeFormat.prototype.format = function (value, formatString) {
         if (value !== undefined) {
-            return moment.utc(value).format(DATE_FORMAT) + "Z";
+            const format = validateFormatString(formatString);
+
+            return moment.utc(value).format(format) + (formatString ? '' : 'Z');
         } else {
             return value;
         }

platform/forms/src/MCTFileInput.js

@@ -44,11 +44,9 @@ define(
                         setText(result.name);
                         scope.ngModel[scope.field] = result;
                         control.$setValidity("file-input", true);
-                        scope.$digest();
                     }, function () {
                         setText('Select File');
                         control.$setValidity("file-input", false);
-                        scope.$digest();
                     });
                 }
 

src/MCT.js

@@ -288,8 +288,6 @@ define([
         this.install(this.plugins.ObjectInterceptors());
         this.install(this.plugins.NonEditableFolder());
         this.install(this.plugins.DeviceClassifier());
-
-        this._isVue = true;
     }
 
     MCT.prototype = Object.create(EventEmitter.prototype);

src/adapter/actions/LegacyActionAdapter.js

@@ -28,8 +28,6 @@ export default function LegacyActionAdapter(openmct, legacyActions) {
             return true;
         }
 
-        console.warn(`DEPRECATION WARNING: Action ${action.definition.key} in bundle ${action.bundle.path} is non-contextual and should be migrated.`);
-
         return false;
     }
 

src/adapter/bundle.js

@@ -29,7 +29,6 @@ define([
     './capabilities/APICapabilityDecorator',
     './policies/AdaptedViewPolicy',
     './runs/AlternateCompositionInitializer',
-    './runs/TypeDeprecationChecker',
     './runs/LegacyTelemetryProvider',
     './runs/RegisterLegacyTypes',
     './services/LegacyObjectAPIInterceptor',
@@ -46,7 +45,6 @@ define([
     APICapabilityDecorator,
     AdaptedViewPolicy,
     AlternateCompositionInitializer,
-    TypeDeprecationChecker,
     LegacyTelemetryProvider,
     RegisterLegacyTypes,
     LegacyObjectAPIInterceptor,
@@ -135,10 +133,6 @@ define([
                     }
                 ],
                 runs: [
-                    {
-                        implementation: TypeDeprecationChecker,
-                        depends: ["types[]"]
-                    },
                     {
                         implementation: AlternateCompositionInitializer,
                         depends: ["openmct"]

src/adapter/runs/RegisterLegacyTypes.js

@@ -4,12 +4,6 @@ define([
 
 ) {
     function RegisterLegacyTypes(types, openmct) {
-        types.forEach(function (legacyDefinition) {
-            if (!openmct.types.get(legacyDefinition.key)) {
-                console.warn(`DEPRECATION WARNING: Migrate type ${legacyDefinition.key} from ${legacyDefinition.bundle.path} to use the new Types API.  Legacy type support will be removed soon.`);
-            }
-        });
-
         openmct.types.importLegacyTypes(types);
     }
 

src/adapter/runs/TypeDeprecationChecker.js

@@ -1,46 +0,0 @@
-/*****************************************************************************
- * Open openmct, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open openmct is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open openmct includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-
-], function (
-
-) {
-
-    function checkForDeprecatedFunctionality(typeDef) {
-        if (Object.prototype.hasOwnProperty.call(typeDef, 'telemetry')) {
-            console.warn(
-                'DEPRECATION WARNING: Telemetry data on type '
-                + 'registrations will be deprecated in a future version, '
-                + 'please convert to a custom telemetry metadata provider '
-                + 'for type: ' + typeDef.key
-            );
-        }
-    }
-
-    function TypeDeprecationChecker(types) {
-        types.forEach(checkForDeprecatedFunctionality);
-    }
-
-    return TypeDeprecationChecker;
-
-});

src/adapter/services/MissingModelCompatibilityDecorator.js

@@ -81,8 +81,14 @@ define([
                     return models;
                 }
 
-                //Temporary fix for missing models - don't retry using this.apiFetch
-                return models;
+                return this.apiFetch(missingIds)
+                    .then(function (apiResults) {
+                        Object.keys(apiResults).forEach(function (k) {
+                            models[k] = apiResults[k];
+                        });
+
+                        return models;
+                    });
             }.bind(this));
     };
 

src/adapter/views/LegacyViewProvider.js

@@ -15,8 +15,6 @@ define([
     };
 
     function LegacyViewProvider(legacyView, openmct, convertToLegacyObject) {
-        console.warn(`DEPRECATION WARNING: Migrate ${legacyView.key} from ${legacyView.bundle.path} to use the new View APIs.  Legacy view support will be removed soon.`);
-
         return {
             key: legacyView.key,
             name: legacyView.name,

src/adapter/views/TypeInspectorViewProvider.js

@@ -4,7 +4,6 @@ define([
 
 ) {
     function TypeInspectorViewProvider(typeDefinition, openmct, convertToLegacyObject) {
-        console.warn(`DEPRECATION WARNING: Migrate ${typeDefinition.key} from ${typeDefinition.bundle.path} to use the new Inspector View APIs.  Legacy Inspector view support will be removed soon.`);
         let representation = openmct.$injector.get('representations[]')
             .filter((r) => r.key === typeDefinition.inspector)[0];
 

src/api/actions/ActionsAPI.js

@@ -110,7 +110,7 @@ class ActionsAPI extends EventEmitter {
         return actionsObject;
     }
 
-    _groupAndSortActions(actionsArray = []) {
+    _groupAndSortActions(actionsArray) {
         if (!Array.isArray(actionsArray) && typeof actionsArray === 'object') {
             actionsArray = Object.keys(actionsArray).map(key => actionsArray[key]);
         }

src/api/objects/ConflictError.js

@@ -1,2 +0,0 @@
-export default class ConflictError extends Error {
-}

src/api/objects/ObjectAPI.js

@@ -26,7 +26,6 @@ import RootRegistry from './RootRegistry';
 import RootObjectProvider from './RootObjectProvider';
 import EventEmitter from 'EventEmitter';
 import InterceptorRegistry from './InterceptorRegistry';
-import ConflictError from './ConflictError';
 
 /**
  * Utilities for loading, saving, and manipulating domain objects.
@@ -35,7 +34,6 @@ import ConflictError from './ConflictError';
  */
 
 function ObjectAPI(typeRegistry, openmct) {
-    this.openmct = openmct;
     this.typeRegistry = typeRegistry;
     this.eventEmitter = new EventEmitter();
     this.providers = {};
@@ -49,10 +47,6 @@ function ObjectAPI(typeRegistry, openmct) {
     this.interceptorRegistry = new InterceptorRegistry();
 
     this.SYNCHRONIZED_OBJECT_TYPES = ['notebook', 'plan'];
-
-    this.errors = {
-        Conflict: ConflictError
-    };
 }
 
 /**
@@ -187,16 +181,13 @@ ObjectAPI.prototype.get = function (identifier, abortSignal) {
 
     let objectPromise = provider.get(identifier, abortSignal).then(result => {
         delete this.cache[keystring];
-
         result = this.applyGetInterceptors(identifier, result);
-
-        return result;
-    }).catch((result) => {
-        console.warn(`Failed to retrieve ${keystring}:`, result);
-
-        delete this.cache[keystring];
-
-        result = this.applyGetInterceptors(identifier);
+        if (result.isMutable) {
+            result.$refresh(result);
+        } else {
+            let mutableDomainObject = this._toMutable(result);
+            mutableDomainObject.$refresh(result);
+        }
 
         return result;
     });
@@ -300,7 +291,6 @@ ObjectAPI.prototype.isPersistable = function (idOrKeyString) {
 ObjectAPI.prototype.save = function (domainObject) {
     let provider = this.getProvider(domainObject.identifier);
     let savedResolve;
-    let savedReject;
     let result;
 
     if (!this.isPersistable(domainObject.identifier)) {
@@ -310,18 +300,19 @@ ObjectAPI.prototype.save = function (domainObject) {
     } else {
         const persistedTime = Date.now();
         if (domainObject.persisted === undefined) {
-            result = new Promise((resolve, reject) => {
+            result = new Promise((resolve) => {
                 savedResolve = resolve;
-                savedReject = reject;
             });
             domainObject.persisted = persistedTime;
-            provider.create(domainObject)
-                .then((response) => {
+            const newObjectPromise = provider.create(domainObject);
+            if (newObjectPromise) {
+                newObjectPromise.then(response => {
                     this.mutate(domainObject, 'persisted', persistedTime);
                     savedResolve(response);
-                }).catch((error) => {
-                    savedReject(error);
                 });
+            } else {
+                result = Promise.reject(`[ObjectAPI][save] Object provider returned ${newObjectPromise} when creating new object.`);
+            }
         } else {
             domainObject.persisted = persistedTime;
             this.mutate(domainObject, 'persisted', persistedTime);

src/api/telemetry/TelemetryAPI.js

@@ -180,12 +180,6 @@ define([
      * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
      */
     TelemetryAPI.prototype.canProvideTelemetry = function (domainObject) {
-        console.warn(
-            'DEPRECATION WARNING: openmct.telemetry.canProvideTelemetry '
-            + 'will not be supported in future versions of Open MCT.  Please '
-            + 'use openmct.telemetry.isTelemetryObject instead.'
-        );
-
         return Boolean(this.findSubscriptionProvider(domainObject))
                || Boolean(this.findRequestProvider(domainObject));
     };
@@ -483,10 +477,6 @@ define([
      * @returns {Object<String, {TelemetryValueFormatter}>}
      */
     TelemetryAPI.prototype.getFormatMap = function (metadata) {
-        if (!metadata) {
-            return {};
-        }
-
         if (!this.formatMapCache.has(metadata)) {
             const formatMap = metadata.values().reduce(function (map, valueMetadata) {
                 map[valueMetadata.key] = this.getValueFormatter(valueMetadata);

src/api/telemetry/TelemetryCollection.js

@@ -130,13 +130,8 @@ export class TelemetryCollection extends EventEmitter {
         this.options.onPartialResponse = this._processNewTelemetry.bind(this);
 
         try {
-            if (this.requestAbort) {
-                this.requestAbort.abort();
-            }
-
             this.requestAbort = new AbortController();
             this.options.signal = this.requestAbort.signal;
-            this.emit('requestStarted');
             historicalData = await this.historicalProvider.request(this.domainObject, this.options);
         } catch (error) {
             if (error.name !== 'AbortError') {
@@ -145,7 +140,6 @@ export class TelemetryCollection extends EventEmitter {
             }
         }
 
-        this.emit('requestEnded');
         this.requestAbort = undefined;
 
         this._processNewTelemetry(historicalData);

src/api/telemetry/TelemetryMetadataManager.js

@@ -31,11 +31,6 @@ define([
         valueMetadata.hints = valueMetadata.hints || {};
 
         if (Object.prototype.hasOwnProperty.call(valueMetadata.hints, 'x')) {
-            console.warn(
-                'DEPRECATION WARNING: `x` hints should be replaced with '
-                + '`domain` hints moving forward.  '
-                + 'https://github.com/nasa/openmct/issues/1546'
-            );
             if (!Object.prototype.hasOwnProperty.call(valueMetadata.hints, 'domain')) {
                 valueMetadata.hints.domain = valueMetadata.hints.x;
             }
@@ -44,11 +39,6 @@ define([
         }
 
         if (Object.prototype.hasOwnProperty.call(valueMetadata.hints, 'y')) {
-            console.warn(
-                'DEPRECATION WARNING: `y` hints should be replaced with '
-                + '`range` hints moving forward.  '
-                + 'https://github.com/nasa/openmct/issues/1546'
-            );
             if (!Object.prototype.hasOwnProperty.call(valueMetadata.hints, 'range')) {
                 valueMetadata.hints.range = valueMetadata.hints.y;
             }

src/api/types/TypeRegistry.js

@@ -63,12 +63,6 @@ define(['./Type'], function (Type) {
      */
     TypeRegistry.prototype.standardizeType = function (typeDef) {
         if (Object.prototype.hasOwnProperty.call(typeDef, 'label')) {
-            console.warn(
-                'DEPRECATION WARNING typeDef: ' + typeDef.label + '.  '
-                + '`label` is deprecated in type definitions.  Please use '
-                + '`name` instead.  This will cause errors in a future version '
-                + 'of Open MCT.  For more information, see '
-                + 'https://github.com/nasa/openmct/issues/1568');
             if (!typeDef.name) {
                 typeDef.name = typeDef.label;
             }

src/installDefaultBundles.js

@@ -41,6 +41,7 @@ const DEFAULTS = [
     'platform/forms',
     'platform/identity',
     'platform/persistence/aggregator',
+    'platform/persistence/queue',
     'platform/policy',
     'platform/entanglement',
     'platform/search',

src/plugins/CouchDBSearchFolder/pluginSpec.js

@@ -32,7 +32,7 @@ describe('the plugin', function () {
     let openmct;
     let composition;
 
-    beforeEach(() => {
+    beforeEach((done) => {
 
         openmct = createOpenMct();
 
@@ -47,6 +47,11 @@ describe('the plugin', function () {
             }
         }));
 
+        openmct.on('start', done);
+        openmct.startHeadless();
+
+        composition = openmct.composition.get({identifier});
+
         spyOn(couchPlugin.couchProvider, 'getObjectsByFilter').and.returnValue(Promise.resolve([
             {
                 identifier: {
@@ -61,19 +66,6 @@ describe('the plugin', function () {
                 }
             }
         ]));
-
-        spyOn(couchPlugin.couchProvider, "get").and.callFake((id) => {
-            return Promise.resolve({
-                identifier: id
-            });
-        });
-
-        return new Promise((resolve) => {
-            openmct.once('start', resolve);
-            openmct.startHeadless();
-        }).then(() => {
-            composition = openmct.composition.get({identifier});
-        });
     });
 
     afterEach(() => {

src/plugins/LADTable/components/LADRow.vue

@@ -96,11 +96,11 @@ export default {
 
         this.timestampKey = this.openmct.time.timeSystem().key;
 
-        this.valueMetadata = this.metadata ? this
+        this.valueMetadata = this
             .metadata
-            .valuesForHints(['range'])[0] : undefined;
+            .valuesForHints(['range'])[0];
 
-        this.valueKey = this.valueMetadata ? this.valueMetadata.key : undefined;
+        this.valueKey = this.valueMetadata.key;
 
         this.unsubscribe = this.openmct
             .telemetry
@@ -151,10 +151,7 @@ export default {
                     size: 1,
                     strategy: 'latest'
                 })
-                .then((array) => this.updateValues(array[array.length - 1]))
-                .catch((error) => {
-                    console.warn('Error fetching data', error);
-                });
+                .then((array) => this.updateValues(array[array.length - 1]));
         },
         updateBounds(bounds, isTick) {
             this.bounds = bounds;

src/plugins/LADTable/components/LADTable.vue

@@ -73,9 +73,8 @@ export default {
         hasUnits() {
             let itemsWithUnits = this.items.filter((item) => {
                 let metadata = this.openmct.telemetry.getMetadata(item.domainObject);
-                const valueMetadatas = metadata ? metadata.valueMetadatas : [];
 
-                return this.metadataHasUnits(valueMetadatas);
+                return this.metadataHasUnits(metadata.valueMetadatas);
 
             });
 

src/plugins/condition/components/inspector/ConditionalStylesView.vue

@@ -30,10 +30,10 @@
             <div v-if="staticStyle"
                  class="c-inspect-styles__style"
             >
-                <style-editor class="c-inspect-styles__editor"
-                              :style-item="staticStyle"
-                              :is-editing="isEditing"
-                              @persist="updateStaticStyle"
+                <StyleEditor class="c-inspect-styles__editor"
+                             :style-item="staticStyle"
+                             :is-editing="isEditing"
+                             @persist="updateStaticStyle"
                 />
             </div>
             <button
@@ -87,10 +87,10 @@
                 <condition-description :show-label="true"
                                        :condition="getCondition(conditionStyle.conditionId)"
                 />
-                <style-editor class="c-inspect-styles__editor"
-                              :style-item="conditionStyle"
-                              :is-editing="isEditing"
-                              @persist="updateConditionalStyle"
+                <StyleEditor class="c-inspect-styles__editor"
+                             :style-item="conditionStyle"
+                             :is-editing="isEditing"
+                             @persist="updateConditionalStyle"
                 />
             </div>
         </div>
@@ -240,10 +240,10 @@ export default {
             }
 
             let vm = new Vue({
+                components: {ConditionSetSelectorDialog},
                 provide: {
                     openmct: this.openmct
                 },
-                components: {ConditionSetSelectorDialog},
                 data() {
                     return {
                         handleItemSelection

src/plugins/condition/components/inspector/StylesView.vue

@@ -40,13 +40,13 @@
             <div v-if="staticStyle"
                  class="c-inspect-styles__style"
             >
-                <style-editor class="c-inspect-styles__editor"
-                              :style-item="staticStyle"
-                              :is-editing="allowEditing"
-                              :mixed-styles="mixedStyles"
-                              :non-specific-font-properties="nonSpecificFontProperties"
-                              @persist="updateStaticStyle"
-                              @save-style="saveStyle"
+                <StyleEditor class="c-inspect-styles__editor"
+                             :style-item="staticStyle"
+                             :is-editing="allowEditing"
+                             :mixed-styles="mixedStyles"
+                             :non-specific-font-properties="nonSpecificFontProperties"
+                             @persist="updateStaticStyle"
+                             @save-style="saveStyle"
                 />
             </div>
             <button
@@ -108,12 +108,12 @@
                 <condition-description :show-label="true"
                                        :condition="getCondition(conditionStyle.conditionId)"
                 />
-                <style-editor class="c-inspect-styles__editor"
-                              :style-item="conditionStyle"
-                              :non-specific-font-properties="nonSpecificFontProperties"
-                              :is-editing="allowEditing"
-                              @persist="updateConditionalStyle"
-                              @save-style="saveStyle"
+                <StyleEditor class="c-inspect-styles__editor"
+                             :style-item="conditionStyle"
+                             :non-specific-font-properties="nonSpecificFontProperties"
+                             :is-editing="allowEditing"
+                             @persist="updateConditionalStyle"
+                             @save-style="saveStyle"
                 />
             </div>
         </div>
@@ -556,10 +556,10 @@ export default {
             }
 
             let vm = new Vue({
+                components: {ConditionSetSelectorDialog},
                 provide: {
                     openmct: this.openmct
                 },
-                components: {ConditionSetSelectorDialog},
                 data() {
                     return {
                         handleItemSelection

src/plugins/condition/pluginSpec.js

@@ -98,8 +98,6 @@ describe('the plugin', function () {
 
         conditionSetDefinition.initialize(mockConditionSetDomainObject);
 
-        spyOn(openmct.objects, "save").and.returnValue(Promise.resolve(true));
-
         openmct.on('start', done);
         openmct.startHeadless();
     });

src/plugins/conditionWidget/components/condition-widget.scss

@@ -38,12 +38,16 @@ a.c-condition-widget {
 
 // Make Condition Widget expand when in a hidden frame Layout context
 // For both static and Flexible Layouts
-.c-so-view--no-frame > .c-so-view__object-view > .c-condition-widget {
-    @include abs();
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
+.c-so-view--conditionWidget.c-so-view--no-frame {
+    .c-condition-widget {
+        @include abs();
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+    }
+
+    .c-so-view__frame-controls { display: none; }
 }
 
 // Add some margin when a Condition Widget is in a Flexible Layout

src/plugins/displayLayout/components/display-layout.scss

@@ -47,8 +47,8 @@
 
 .is-editing {
     .l-shell__main-container {
-        &[s-selected],
-        &[s-selected-parent] {
+        [s-selected],
+        [s-selected-parent] {
             // Display grid and allow edit marquee to display in main layout holder when editing
             > .l-layout {
                 background: $editUIGridColorBg;

src/plugins/filters/components/FiltersView.vue

@@ -101,7 +101,7 @@ export default {
         addChildren(domainObject) {
             let keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
             let metadata = this.openmct.telemetry.getMetadata(domainObject);
-            let metadataWithFilters = metadata ? metadata.valueMetadatas.filter(value => value.filters) : [];
+            let metadataWithFilters = metadata.valueMetadatas.filter(value => value.filters);
             let hasFiltersWithKeyString = this.persistedFilters[keyString] !== undefined;
             let mutateFilters = false;
             let childObject = {

src/plugins/imagery/components/Compass/pluginSpec.js

@@ -39,10 +39,13 @@ describe("The Compass component", () => {
             sunAngle: 30
         };
         let propsData = {
-            containerWidth: 600,
-            containerHeight: 600,
             naturalAspectRatio: 0.9,
-            image: imageDatum
+            image: imageDatum,
+            sizedImageDimensions: {
+                width: 100,
+                height: 100
+            },
+            compassRoseSizingClasses: '--rose-small --rose-min'
         };
 
         app = new Vue({
@@ -51,13 +54,13 @@ describe("The Compass component", () => {
                 return propsData;
             },
             template: `<Compass
-                :container-width="containerWidth"
-                :container-height="containerHeight"
+                :compass-rose-sizing-classes="compassRoseSizingClasses"
+                :image="image"
                 :natural-aspect-ratio="naturalAspectRatio"
-                :image="image" />`
+                :sized-image-dimensions="sizedImageDimensions"
+            />`
         });
         instance = app.$mount();
-
     });
 
     afterAll(() => {

src/plugins/imagery/components/ImageryView.vue

@@ -84,18 +84,18 @@
                 />
             </div>
         </div>
-        <div class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-buttons">
-            <button class="c-nav c-nav--prev"
-                    title="Previous image"
-                    :disabled="isPrevDisabled"
-                    @click="prevImage()"
-            ></button>
-            <button class="c-nav c-nav--next"
-                    title="Next image"
-                    :disabled="isNextDisabled"
-                    @click="nextImage()"
-            ></button>
-        </div>
+
+        <button class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-button c-nav c-nav--prev"
+                title="Previous image"
+                :disabled="isPrevDisabled"
+                @click="prevImage()"
+        ></button>
+
+        <button class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-button c-nav c-nav--next"
+                title="Next image"
+                :disabled="isNextDisabled"
+                @click="nextImage()"
+        ></button>
 
         <div class="c-imagery__control-bar">
             <div class="c-imagery__time">

src/plugins/imagery/components/imagery-view.scss

@@ -285,17 +285,17 @@
     }
 }
 
-.c-imagery__prev-next-buttons {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    pointer-events: none;
+.c-imagery__prev-next-button {
+    pointer-events: all;
     position: absolute;
     top: 50%;
-    transform: translateY(-75%);
+    transform: translateY(-75%); // 75% due to transform: rotation approach to the button
 
-    .c-nav {
-        pointer-events: all;
+    &.c-nav {
+        position: absolute;
+
+        &--prev { left: 0; }
+        &--next { right: 0; }
     }
 
     .s-status-taking-snapshot & {

src/plugins/imagery/mixins/imageryData.js

@@ -159,7 +159,7 @@ export default {
             let image = { ...datum };
             image.formattedTime = this.formatTime(datum);
             image.url = this.formatImageUrl(datum);
-            image.time = this.parseTime(image.formattedTime);
+            image.time = datum[this.timeKey];
             image.imageDownloadName = this.getImageDownloadName(datum);
 
             return image;

src/plugins/imagery/pluginSpec.js

@@ -220,7 +220,7 @@ describe("The Imagery View Layouts", () => {
         });
 
         spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([]));
-        spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
+        spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve(imageryObject));
 
         originalRouterPath = openmct.router.path;
 
@@ -370,18 +370,15 @@ describe("The Imagery View Layouts", () => {
             });
         });
 
-        xit("should show that an image is not new", (done) => {
+        it("should show that an image is not new", (done) => {
             const target = imageTelemetry[2].url;
             parent.querySelectorAll(`img[src='${target}']`)[0].click();
 
             Vue.nextTick(() => {
-                // used in code, need to wait to the 500ms here too
-                setTimeout(() => {
-                    const imageIsNew = isNew(parent);
+                const imageIsNew = isNew(parent);
 
-                    expect(imageIsNew).toBeFalse();
-                    done();
-                }, REFRESH_CSS_MS);
+                expect(imageIsNew).toBeFalse();
+                done();
             });
         });
 

src/plugins/licenses/Licenses.vue

@@ -45,8 +45,7 @@
     </div>
 </div>
 </template>
-<style lang="sass">
-</style>
+
 <script>
 import packages from './third-party-licenses.json';
 

src/plugins/notebook/components/NotebookEmbed.vue

@@ -180,13 +180,9 @@ export default {
                 this.openmct.notifications.alert(message);
             }
 
-            if (this.openmct.editor.isEditing()) {
-                this.previewEmbed();
-            } else {
-                const relativeHash = hash.slice(hash.indexOf('#'));
-                const url = new URL(relativeHash, `${location.protocol}//${location.host}${location.pathname}`);
-                this.openmct.router.navigate(url.hash);
-            }
+            const relativeHash = hash.slice(hash.indexOf('#'));
+            const url = new URL(relativeHash, `${location.protocol}//${location.host}${location.pathname}`);
+            this.openmct.router.navigate(url.hash);
         },
         formatTime(unixTime, timeFormat) {
             return Moment.utc(unixTime).format(timeFormat);

src/plugins/notebook/monkeyPatchObjectAPIForNotebooks.js

@@ -1,72 +0,0 @@
-import {NOTEBOOK_TYPE} from './notebook-constants';
-
-export default function (openmct) {
-    const apiSave = openmct.objects.save.bind(openmct.objects);
-
-    openmct.objects.save = async (domainObject) => {
-        if (domainObject.type !== NOTEBOOK_TYPE) {
-            return apiSave(domainObject);
-        }
-
-        const localMutable = openmct.objects._toMutable(domainObject);
-        let result;
-
-        try {
-            result = await apiSave(localMutable);
-        } catch (error) {
-            if (error instanceof openmct.objects.errors.Conflict) {
-                result = resolveConflicts(localMutable, openmct);
-            } else {
-                result = Promise.reject(error);
-            }
-        } finally {
-            openmct.objects.destroyMutable(localMutable);
-        }
-
-        return result;
-    };
-}
-
-function resolveConflicts(localMutable, openmct) {
-    return openmct.objects.getMutable(localMutable.identifier).then((remoteMutable) => {
-        const localEntries = localMutable.configuration.entries;
-        remoteMutable.$refresh(remoteMutable);
-        applyLocalEntries(remoteMutable, localEntries);
-
-        openmct.objects.destroyMutable(remoteMutable);
-
-        return true;
-    });
-}
-
-function applyLocalEntries(mutable, entries) {
-    Object.entries(entries).forEach(([sectionKey, pagesInSection]) => {
-        Object.entries(pagesInSection).forEach(([pageKey, localEntries]) => {
-            const remoteEntries = mutable.configuration.entries[sectionKey][pageKey];
-            const mergedEntries = [].concat(remoteEntries);
-            let shouldMutate = false;
-
-            const locallyAddedEntries = _.differenceBy(localEntries, remoteEntries, 'id');
-            const locallyModifiedEntries = _.differenceWith(localEntries, remoteEntries, (localEntry, remoteEntry) => {
-                return localEntry.id === remoteEntry.id && localEntry.text === remoteEntry.text;
-            });
-
-            locallyAddedEntries.forEach((localEntry) => {
-                mergedEntries.push(localEntry);
-                shouldMutate = true;
-            });
-
-            locallyModifiedEntries.forEach((locallyModifiedEntry) => {
-                let mergedEntry = mergedEntries.find(entry => entry.id === locallyModifiedEntry.id);
-                if (mergedEntry !== undefined) {
-                    mergedEntry.text = locallyModifiedEntry.text;
-                    shouldMutate = true;
-                }
-            });
-
-            if (shouldMutate) {
-                mutable.$set(`configuration.entries.${sectionKey}.${pageKey}`, mergedEntries);
-            }
-        });
-    });
-}

src/plugins/notebook/plugin.js

@@ -2,7 +2,6 @@ import CopyToNotebookAction from './actions/CopyToNotebookAction';
 import Notebook from './components/Notebook.vue';
 import NotebookSnapshotIndicator from './components/NotebookSnapshotIndicator.vue';
 import SnapshotContainer from './snapshot-container';
-import monkeyPatchObjectAPIForNotebooks from './monkeyPatchObjectAPIForNotebooks.js';
 
 import { notebookImageMigration } from '../notebook/utils/notebook-migration';
 import { NOTEBOOK_TYPE } from './notebook-constants';
@@ -166,7 +165,5 @@ export default function NotebookPlugin() {
                 return domainObject;
             }
         });
-
-        monkeyPatchObjectAPIForNotebooks(openmct);
     };
 }

src/plugins/notebook/pluginSpec.js

@@ -154,8 +154,6 @@ describe("Notebook plugin:", () => {
             testObjectProvider.get.and.returnValue(Promise.resolve(notebookViewObject));
             openmct.objects.addProvider('test-namespace', testObjectProvider);
             testObjectProvider.observe.and.returnValue(() => {});
-            testObjectProvider.create.and.returnValue(Promise.resolve(true));
-            testObjectProvider.update.and.returnValue(Promise.resolve(true));
 
             return openmct.objects.getMutable(notebookViewObject.identifier).then((mutableObject) => {
                 mutableNotebookObject = mutableObject;

src/plugins/notebook/utils/notebook-entries.js

@@ -125,7 +125,7 @@ export function addNotebookEntry(openmct, domainObject, notebookStorage, embed =
     const newEntries = addEntryIntoPage(notebookStorage, entries, entry);
 
     addDefaultClass(domainObject, openmct);
-    domainObject.configuration.entries = newEntries;
+    openmct.objects.mutate(domainObject, 'configuration.entries', newEntries);
 
     return id;
 }

src/plugins/notebook/utils/notebook-storage.js

@@ -96,6 +96,9 @@ export function setDefaultNotebookPageId(pageId) {
 
 export function validateNotebookStorageObject() {
     const notebookStorage = getDefaultNotebook();
+    if (!notebookStorage) {
+        return true;
+    }
 
     let valid = false;
     if (notebookStorage) {

src/plugins/performanceIndicator/pluginSpec.js

@@ -34,7 +34,7 @@ describe('the plugin', () => {
     let countFramesPromise;
 
     beforeEach((done) => {
-        openmct = createOpenMct(false);
+        openmct = createOpenMct();
 
         element = document.createElement('div');
         child = document.createElement('div');

src/plugins/persistence/couch/CouchChangesFeed.js

@@ -15,16 +15,12 @@
 
         port.onmessage = async function (event) {
             if (event.data.request === 'close') {
-                console.log('Closing connection');
                 connections.splice(event.data.connectionId - 1, 1);
                 if (connections.length <= 0) {
                     // abort any outstanding requests if there's nobody listening to it.
                     controller.abort();
                 }
 
-                console.log('Closed.');
-                connected = false;
-
                 return;
             }
 
@@ -33,9 +29,68 @@
                     return;
                 }
 
-                do {
-                    await self.listenForChanges(event.data.url, event.data.body, port);
-                } while (connected);
+                connected = true;
+
+                let url = event.data.url;
+                let body = event.data.body;
+                let error = false;
+                // feed=continuous maintains an indefinitely open connection with a keep-alive of HEARTBEAT milliseconds until this client closes the connection
+                // style=main_only returns only the current winning revision of the document
+
+                const response = await fetch(url, {
+                    method: 'POST',
+                    headers: {
+                        "Content-Type": 'application/json'
+                    },
+                    signal,
+                    body
+                });
+
+                let reader;
+
+                if (response.body === undefined) {
+                    error = true;
+                } else {
+                    reader = response.body.getReader();
+                }
+
+                while (!error) {
+                    const {done, value} = await reader.read();
+                    //done is true when we lose connection with the provider
+                    if (done) {
+                        error = true;
+                    }
+
+                    if (value) {
+                        let chunk = new Uint8Array(value.length);
+                        chunk.set(value, 0);
+                        const decodedChunk = new TextDecoder("utf-8").decode(chunk).split('\n');
+                        if (decodedChunk.length && decodedChunk[decodedChunk.length - 1] === '') {
+                            decodedChunk.forEach((doc, index) => {
+                                try {
+                                    if (doc) {
+                                        const objectChanges = JSON.parse(doc);
+                                        connections.forEach(function (connection) {
+                                            connection.postMessage({
+                                                objectChanges
+                                            });
+                                        });
+                                    }
+                                } catch (decodeError) {
+                                    //do nothing;
+                                    console.log(decodeError);
+                                }
+                            });
+                        }
+                    }
+
+                }
+
+                if (error) {
+                    port.postMessage({
+                        error
+                    });
+                }
             }
         };
 
@@ -48,64 +103,4 @@
         console.log('Error on feed');
     };
 
-    self.listenForChanges = async function (url, body, port) {
-        connected = true;
-        let error = false;
-        // feed=continuous maintains an indefinitely open connection with a keep-alive of HEARTBEAT milliseconds until this client closes the connection
-        // style=main_only returns only the current winning revision of the document
-
-        console.log('Opening changes feed connection.');
-        const response = await fetch(url, {
-            method: 'POST',
-            headers: {
-                "Content-Type": 'application/json'
-            },
-            signal,
-            body
-        });
-
-        let reader;
-
-        if (response.body === undefined) {
-            error = true;
-        } else {
-            reader = response.body.getReader();
-        }
-
-        while (!error) {
-            const {done, value} = await reader.read();
-            //done is true when we lose connection with the provider
-            if (done) {
-                error = true;
-            }
-
-            if (value) {
-                let chunk = new Uint8Array(value.length);
-                chunk.set(value, 0);
-                const decodedChunk = new TextDecoder("utf-8").decode(chunk).split('\n');
-                console.log('Received chunk');
-                if (decodedChunk.length && decodedChunk[decodedChunk.length - 1] === '') {
-                    decodedChunk.forEach((doc, index) => {
-                        try {
-                            if (doc) {
-                                const objectChanges = JSON.parse(doc);
-                                connections.forEach(function (connection) {
-                                    connection.postMessage({
-                                        objectChanges
-                                    });
-                                });
-                            }
-                        } catch (decodeError) {
-                            //do nothing;
-                            console.log(decodeError);
-                        }
-                    });
-                }
-            }
-
-        }
-
-        console.log('Done reading changes feed');
-    };
-
 }());

src/plugins/persistence/couch/CouchObjectProvider.js

@@ -29,7 +29,7 @@ const ID = "_id";
 const HEARTBEAT = 50000;
 const ALL_DOCS = "_all_docs?include_docs=true";
 
-class CouchObjectProvider {
+export default class CouchObjectProvider {
     constructor(openmct, options, namespace) {
         options = this._normalize(options);
         this.openmct = openmct;
@@ -74,6 +74,13 @@ class CouchObjectProvider {
         if (event.data.type === 'connection') {
             this.changesFeedSharedWorkerConnectionId = event.data.connectionId;
         } else {
+            const error = event.data.error;
+            if (error && Object.keys(this.observers).length > 0) {
+                this.observeObjectChanges();
+
+                return;
+            }
+
             let objectChanges = event.data.objectChanges;
             objectChanges.identifier = {
                 namespace: this.namespace,
@@ -119,12 +126,11 @@ class CouchObjectProvider {
         }
 
         return fetch(this.url + '/' + subPath, fetchOptions)
-            .then((response) => {
-                if (response.status === CouchObjectProvider.HTTP_CONFLICT) {
-                    throw new this.openmct.objects.errors.Conflict(`Conflict persisting ${fetchOptions.body.name}`);
-                }
-
-                return response.json();
+            .then(response => response.json())
+            .then(function (response) {
+                return response;
+            }, function () {
+                return undefined;
             });
     }
 
@@ -555,18 +561,12 @@ class CouchObjectProvider {
         let intermediateResponse = this.getIntermediateResponse();
         const key = model.identifier.key;
         this.enqueueObject(key, model, intermediateResponse);
-        if (!this.objectQueue[key].pending) {
-            this.objectQueue[key].pending = true;
-            const queued = this.objectQueue[key].dequeue();
-            let document = new CouchDocument(key, queued.model);
-            this.request(key, "PUT", document).then((response) => {
-                console.log('create check response', key);
-                this.checkResponse(response, queued.intermediateResponse, key);
-            }).catch(error => {
-                queued.intermediateResponse.reject(error);
-                this.objectQueue[key].pending = false;
-            });
-        }
+        this.objectQueue[key].pending = true;
+        const queued = this.objectQueue[key].dequeue();
+        let document = new CouchDocument(key, queued.model);
+        this.request(key, "PUT", document).then((response) => {
+            this.checkResponse(response, queued.intermediateResponse, key);
+        });
 
         return intermediateResponse.promise;
     }
@@ -581,9 +581,6 @@ class CouchObjectProvider {
             let document = new CouchDocument(key, queued.model, this.objectQueue[key].rev);
             this.request(key, "PUT", document).then((response) => {
                 this.checkResponse(response, queued.intermediateResponse, key);
-            }).catch((error) => {
-                queued.intermediateResponse.reject(error);
-                this.objectQueue[key].pending = false;
             });
         }
     }
@@ -597,7 +594,3 @@ class CouchObjectProvider {
         return intermediateResponse.promise;
     }
 }
-
-CouchObjectProvider.HTTP_CONFLICT = 409;
-
-export default CouchObjectProvider;

src/plugins/persistence/couch/pluginSpec.js

@@ -49,7 +49,7 @@ describe('the plugin', () => {
             filter: {},
             disableObserve: true
         };
-        openmct = createOpenMct(false);
+        openmct = createOpenMct();
 
         openmct.$injector = jasmine.createSpyObj('$injector', ['get']);
         mockIdentifierService = jasmine.createSpyObj(

src/plugins/plan/pluginSpec.js

@@ -36,7 +36,15 @@ describe('the plugin', function () {
         appHolder.style.width = '640px';
         appHolder.style.height = '480px';
 
-        openmct = createOpenMct();
+        const timeSystemOptions = {
+            timeSystemKey: 'utc',
+            bounds: {
+                start: 1597160002854,
+                end: 1597181232854
+            }
+        };
+
+        openmct = createOpenMct(timeSystemOptions);
         openmct.install(new PlanPlugin());
 
         planDefinition = openmct.types.get('plan').definition;
@@ -48,7 +56,6 @@ describe('the plugin', function () {
         child.style.width = '640px';
         child.style.height = '480px';
         element.appendChild(child);
-
         openmct.on('start', done);
         openmct.start(appHolder);
     });
@@ -72,7 +79,6 @@ describe('the plugin', function () {
     });
 
     describe('the plan view', () => {
-
         it('provides a plan view', () => {
             const testViewObject = {
                 id: "test-object",
@@ -83,7 +89,6 @@ describe('the plugin', function () {
             let planView = applicableViews.find((viewProvider) => viewProvider.key === 'plan.view');
             expect(planView).toBeDefined();
         });
-
     });
 
     describe('the plan view displays activities', () => {
@@ -155,12 +160,22 @@ describe('the plugin', function () {
             expect(labelEl.innerHTML).toEqual('TEST-GROUP');
         });
 
-        it('displays the activities and their labels', () => {
-            const rectEls = element.querySelectorAll('.c-plan__contents rect');
-            expect(rectEls.length).toEqual(2);
-            const textEls = element.querySelectorAll('.c-plan__contents text');
-            expect(textEls.length).toEqual(3);
+        it('displays the activities and their labels', (done) => {
+            const bounds = {
+                start: 1597160002854,
+                end: 1597181232854
+            };
+
+            openmct.time.bounds(bounds);
+
+            Vue.nextTick(() => {
+                const rectEls = element.querySelectorAll('.c-plan__contents rect');
+                expect(rectEls.length).toEqual(2);
+                const textEls = element.querySelectorAll('.c-plan__contents text');
+                expect(textEls.length).toEqual(3);
+
+                done();
+            });
         });
     });
-
 });

src/plugins/plot/ColorSwatch.vue

@@ -21,57 +21,67 @@
 -->
 <template>
 <div class="u-contents">
-    <div v-if="canEdit"
-         class="grid-row"
+    <ul v-if="canEdit"
+        class="l-inspector-part"
     >
-        <div class="grid-cell label"
-             :title="editTitle"
-        >{{ shortLabel }}</div>
-        <div class="grid-cell value">
-            <div class="c-click-swatch c-click-swatch--menu"
-                 @click="toggleSwatch()"
-            >
-                <span class="c-color-swatch"
-                      :style="{ background: currentColor }"
+        <h2 v-if="heading"
+            :title="heading"
+        >{{ heading }}</h2>
+        <li class="grid-row">
+            <div class="grid-cell label"
+                 :title="editTitle"
+            >{{ shortLabel }}</div>
+            <div class="grid-cell value">
+                <div class="c-click-swatch c-click-swatch--menu"
+                     @click="toggleSwatch()"
                 >
-                </span>
-            </div>
-            <div class="c-palette c-palette--color">
-                <div v-show="swatchActive"
-                     class="c-palette__items"
-                >
-                    <div v-for="group in colorPaletteGroups"
-                         :key="group.id"
-                         class="u-contents"
+                    <span class="c-color-swatch"
+                          :style="{ background: currentColor }"
                     >
-                        <div v-for="color in group"
-                             :key="color.id"
-                             class="c-palette__item"
-                             :class="{ 'selected': currentColor === color.hexString }"
-                             :style="{ background: color.hexString }"
-                             @click="setColor(color)"
+                    </span>
+                </div>
+                <div class="c-palette c-palette--color">
+                    <div v-show="swatchActive"
+                         class="c-palette__items"
+                    >
+                        <div v-for="group in colorPaletteGroups"
+                             :key="group.id"
+                             class="u-contents"
                         >
+                            <div v-for="color in group"
+                                 :key="color.id"
+                                 class="c-palette__item"
+                                 :class="{ 'selected': currentColor === color.hexString }"
+                                 :style="{ background: color.hexString }"
+                                 @click="setColor(color)"
+                            >
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </div>
-    <div v-else
-         class="grid-row"
+        </li>
+    </ul>
+    <ul v-else
+        class="l-inspector-part"
     >
-        <div class="grid-cell label"
-             :title="viewTitle"
-        >{{ shortLabel }}</div>
-        <div class="grid-cell value">
-            <span class="c-color-swatch"
-                  :style="{
-                      'background': currentColor
-                  }"
-            >
-            </span>
-        </div>
-    </div>
+        <h2 v-if="heading"
+            :title="heading"
+        >{{ heading }}</h2>
+        <li class="grid-row">
+            <div class="grid-cell label"
+                 :title="viewTitle"
+            >{{ shortLabel }}</div>
+            <div class="grid-cell value">
+                <span class="c-color-swatch"
+                      :style="{
+                          'background': currentColor
+                      }"
+                >
+                </span>
+            </div>
+        </li>
+    </ul>
 </div>
 </template>
 
@@ -104,6 +114,12 @@ export default {
             default() {
                 return 'Color';
             }
+        },
+        heading: {
+            type: String,
+            default() {
+                return '';
+            }
         }
     },
     data() {

src/plugins/plot/barGraph/BarGraphCompositionPolicy.js

@@ -39,10 +39,6 @@ export default function BarGraphCompositionPolicy(openmct) {
         return metadata.values().length > 0 && hasAggregateDomainAndRange(metadata);
     }
 
-    function hasNoChildren(parentObject) {
-        return parentObject.composition && parentObject.composition.length < 1;
-    }
-
     return {
         allow: function (parent, child) {
             if ((parent.type === BAR_GRAPH_KEY)

src/plugins/plot/barGraph/BarGraphView.vue

@@ -107,7 +107,7 @@ export default {
                 };
                 this.openmct.objects.mutate(
                     this.domainObject,
-                    `configuration.barStyles[${key}]`,
+                    `configuration.barStyles[${this.key}]`,
                     this.domainObject.configuration.barStyles[key]
                 );
             } else {
@@ -150,10 +150,6 @@ export default {
         },
         getAxisMetadata(telemetryObject) {
             const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
-            if (!metadata) {
-                return {};
-            }
-
             const yAxisMetadata = metadata.valuesForHints(['range'])[0];
             //Exclude 'name' and 'time' based metadata specifically, from the x-Axis values by using range hints only
             const xAxisMetadata = metadata.valuesForHints(['range']);
@@ -259,9 +255,6 @@ export default {
                     data.forEach((datum) => {
                         this.processData(telemetryObject, datum, axisMetadata);
                     });
-                })
-                .catch((error) => {
-                    console.warn(`Error fetching data`, error);
                 });
         },
         subscribeToObject(telemetryObject) {

src/plugins/plot/barGraph/inspector/BarGraphOptions.vue

@@ -33,9 +33,9 @@
     </li>
     <ColorSwatch v-if="expanded"
                  :current-color="currentColor"
-                 title="Manually set the color for this bar graph series."
-                 edit-title="Manually set the color for this bar graph series"
-                 view-title="The color for this bar graph series."
+                 title="Manually set the color for this bar graph."
+                 edit-title="Manually set the color for this bar graph"
+                 view-title="The color for this bar graph."
                  short-label="Color"
                  class="grid-properties"
                  @colorSet="setColor"

src/plugins/plot/barGraph/inspector/Options.vue

@@ -20,13 +20,15 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<ul class="c-tree">
-    <h2 title="Display properties for this object">Bar Graph Series</h2>
-    <bar-graph-options v-for="series in domainObject.composition"
-                       :key="series.key"
-                       :item="series"
-    />
-</ul>
+<div>
+    <ul class="c-tree">
+        <li v-for="series in domainObject.composition"
+            :key="series.key"
+        >
+            <bar-graph-options :item="series" />
+        </li>
+    </ul>
+</div>
 </template>
 
 <script>

src/plugins/plot/chart/MctChart.vue

@@ -19,6 +19,9 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
+
+<!-- eslint-disable vue/no-v-html -->
+
 <template>
 <div class="gl-plot-chart-area">
     <span v-html="canvasTemplate"></span>

src/plugins/plot/configuration/PlotSeries.js

@@ -82,17 +82,12 @@ export default class PlotSeries extends Model {
             .openmct
             .telemetry
             .getMetadata(options.domainObject);
-
         this.formats = options
             .openmct
             .telemetry
             .getFormatMap(this.metadata);
 
-        //if the object is missing or doesn't have metadata for some reason
-        let range = {};
-        if (this.metadata) {
-            range = this.metadata.valuesForHints(['range'])[0];
-        }
+        const range = this.metadata.valuesForHints(['range'])[0];
 
         return {
             name: options.domainObject.name,
@@ -196,10 +191,7 @@ export default class PlotSeries extends Model {
                     .uniq(true, point => [this.getXVal(point), this.getYVal(point)].join())
                     .value();
                 this.reset(newPoints);
-            }.bind(this))
-            .catch((error) => {
-                console.warn('Error fetching data', error);
-            });
+            }.bind(this));
         /* eslint-enable you-dont-need-lodash-underscore/concat */
     }
     /**
@@ -207,9 +199,7 @@ export default class PlotSeries extends Model {
      */
     onXKeyChange(xKey) {
         const format = this.formats[xKey];
-        if (format) {
-            this.getXVal = format.parse.bind(format);
-        }
+        this.getXVal = format.parse.bind(format);
     }
     /**
      * Update y formatter on change, default to stepAfter interpolation if

src/plugins/plot/configuration/YAxisModel.js

@@ -184,7 +184,7 @@ export default class YAxisModel extends Model {
         this.set('values', yMetadata.values);
         if (!label) {
             const labelName = series.map(function (s) {
-                return s.metadata ? s.metadata.value(s.get('yKey')).name : '';
+                return s.metadata.value(s.get('yKey')).name;
             }).reduce(function (a, b) {
                 if (a === undefined) {
                     return b;
@@ -204,7 +204,7 @@ export default class YAxisModel extends Model {
             }
 
             const labelUnits = series.map(function (s) {
-                return s.metadata ? s.metadata.value(s.get('yKey')).units : '';
+                return s.metadata.value(s.get('yKey')).units;
             }).reduce(function (a, b) {
                 if (a === undefined) {
                     return b;

src/plugins/plot/pluginSpec.js

@@ -37,7 +37,6 @@ describe("the plugin", function () {
     let openmct;
     let telemetryPromise;
     let telemetryPromiseResolve;
-    let cleanupFirst;
     let mockObjectPath;
     let telemetrylimitProvider;
 
@@ -77,9 +76,16 @@ describe("the plugin", function () {
                 'some-other-key': 'some-other-value 3'
             }
         ];
-        cleanupFirst = [];
 
-        openmct = createOpenMct();
+        const timeSystem = {
+            timeSystemKey: 'utc',
+            bounds: {
+                start: 0,
+                end: 4
+            }
+        };
+
+        openmct = createOpenMct(timeSystem);
 
         telemetryPromise = new Promise((resolve) => {
             telemetryPromiseResolve = resolve;
@@ -146,11 +152,6 @@ describe("the plugin", function () {
             disconnect() {}
         });
 
-        openmct.time.timeSystem("utc", {
-            start: 0,
-            end: 4
-        });
-
         openmct.types.addType("test-object", {
             creatable: true
         });
@@ -170,19 +171,8 @@ describe("the plugin", function () {
             end: 1
         });
 
-        // Needs to be in a timeout because plots use a bunch of setTimeouts, some of which can resolve during or after
-        // teardown, which causes problems
-        // This is hacky, we should find a better approach here.
-        setTimeout(() => {
-            //Cleanup code that needs to happen before dom elements start being destroyed
-            cleanupFirst.forEach(cleanup => cleanup());
-            cleanupFirst = [];
-            document.body.removeChild(element);
-
-            configStore.deleteAll();
-
-            resetApplicationState(openmct).then(done).catch(done);
-        });
+        configStore.deleteAll();
+        resetApplicationState(openmct).then(done).catch(done);
     });
 
     describe("the plot views", () => {
@@ -395,10 +385,6 @@ describe("the plugin", function () {
             plotView = plotViewProvider.view(testTelemetryObject, [testTelemetryObject]);
             plotView.show(child, true);
 
-            cleanupFirst.push(() => {
-                plotView.destroy();
-            });
-
             return Vue.nextTick();
         });
 
@@ -418,12 +404,23 @@ describe("the plugin", function () {
             expect(legend.length).toBe(6);
         });
 
-        it("Renders X-axis ticks for the telemetry object", () => {
-            let xAxisElement = element.querySelectorAll(".gl-plot-axis-area.gl-plot-x .gl-plot-tick-wrapper");
-            expect(xAxisElement.length).toBe(1);
+        it("Renders X-axis ticks for the telemetry object", (done) => {
+            const configId = openmct.objects.makeKeyString(testTelemetryObject.identifier);
+            const config = configStore.get(configId);
+            config.xAxis.set('displayRange', {
+                min: 0,
+                max: 4
+            });
 
-            let ticks = xAxisElement[0].querySelectorAll(".gl-plot-tick");
-            expect(ticks.length).toBe(5);
+            Vue.nextTick(() => {
+                let xAxisElement = element.querySelectorAll(".gl-plot-axis-area.gl-plot-x .gl-plot-tick-wrapper");
+                expect(xAxisElement.length).toBe(1);
+
+                let ticks = xAxisElement[0].querySelectorAll(".gl-plot-tick");
+                expect(ticks.length).toBe(5);
+
+                done();
+            });
         });
 
         it("Renders Y-axis options for the telemetry object", () => {
@@ -750,11 +747,6 @@ describe("the plugin", function () {
                 template: "<stacked-plot></stacked-plot>"
             });
 
-            cleanupFirst.push(() => {
-                component.$destroy();
-                component = undefined;
-            });
-
             return telemetryPromise
                 .then(Vue.nextTick())
                 .then(() => {
@@ -780,12 +772,21 @@ describe("the plugin", function () {
             expect(legend.length).toBe(6);
         });
 
-        xit("Renders X-axis ticks for the telemetry object", () => {
+        it("Renders X-axis ticks for the telemetry object", (done) => {
             let xAxisElement = element.querySelectorAll(".gl-plot-axis-area.gl-plot-x .gl-plot-tick-wrapper");
             expect(xAxisElement.length).toBe(1);
 
-            let ticks = xAxisElement[0].querySelectorAll(".gl-plot-tick");
-            expect(ticks.length).toBe(5);
+            config.xAxis.set('displayRange', {
+                min: 0,
+                max: 4
+            });
+
+            Vue.nextTick(() => {
+                let ticks = xAxisElement[0].querySelectorAll(".gl-plot-tick");
+                expect(ticks.length).toBe(5);
+
+                done();
+            });
         });
 
         it("Renders Y-axis ticks for the telemetry object", (done) => {

src/plugins/plot/stackedPlot/StackedPlot.vue

@@ -52,22 +52,24 @@
         >
         </button>
     </div>
-    <stacked-plot-item v-for="object in compositionObjects"
-                       :key="object.id"
-                       class="c-plot--stacked-container"
-                       :object="object"
-                       :options="options"
-                       :grid-lines="gridLines"
-                       :cursor-guide="cursorGuide"
-                       :plot-tick-width="maxTickWidth"
-                       @plotTickWidth="onTickWidthChange"
-                       @loadingUpdated="loadingUpdated"
-    />
+    <div class="l-view-section">
+        <stacked-plot-item v-for="object in compositionObjects"
+                           :key="object.id"
+                           class="c-plot--stacked-container"
+                           :object="object"
+                           :options="options"
+                           :grid-lines="gridLines"
+                           :cursor-guide="cursorGuide"
+                           :plot-tick-width="maxTickWidth"
+                           @plotTickWidth="onTickWidthChange"
+                           @loadingUpdated="loadingUpdated"
+        />
+    </div>
 </div>
 </template>
 
 <script>
-import eventHelpers from '../lib/eventHelpers';
+
 import StackedPlotItem from './StackedPlotItem.vue';
 import ImageExporter from '../../../exporters/ImageExporter';
 
@@ -102,8 +104,6 @@ export default {
         this.destroy();
     },
     mounted() {
-        eventHelpers.extend(this);
-
         this.imageExporter = new ImageExporter(this.openmct);
 
         this.tickWidthMap = {};
@@ -118,7 +118,6 @@ export default {
             this.loading = loaded;
         },
         destroy() {
-            this.stopListening();
             this.composition.off('add', this.addChild);
             this.composition.off('remove', this.removeChild);
             this.composition.off('reorder', this.compositionReorder);

src/plugins/plot/stackedPlot/StackedPlotItem.vue

@@ -75,6 +75,11 @@ export default {
     mounted() {
         this.updateView();
     },
+    beforeDestroy() {
+        if (this.component) {
+            this.component.$destroy();
+        }
+    },
     methods: {
         updateComponentProp(prop, value) {
             if (this.component) {

src/plugins/tabs/tabs.js

@@ -48,17 +48,17 @@ define([
                             components: {
                                 TabsComponent: TabsComponent.default
                             },
-                            data() {
-                                return {
-                                    isEditing: editMode
-                                };
-                            },
                             provide: {
                                 openmct,
                                 domainObject,
                                 objectPath,
                                 composition: openmct.composition.get(domainObject)
                             },
+                            data() {
+                                return {
+                                    isEditing: editMode
+                                };
+                            },
                             template: '<tabs-component :isEditing="isEditing"></tabs-component>'
                         });
                     },

src/plugins/telemetryTable/TelemetryTable.js

@@ -60,17 +60,18 @@ define([
             this.addTelemetryObject = this.addTelemetryObject.bind(this);
             this.removeTelemetryObject = this.removeTelemetryObject.bind(this);
             this.removeTelemetryCollection = this.removeTelemetryCollection.bind(this);
-            this.incrementOutstandingRequests = this.incrementOutstandingRequests.bind(this);
-            this.decrementOutstandingRequests = this.decrementOutstandingRequests.bind(this);
             this.resetRowsFromAllData = this.resetRowsFromAllData.bind(this);
             this.isTelemetryObject = this.isTelemetryObject.bind(this);
+            this.refreshData = this.refreshData.bind(this);
             this.updateFilters = this.updateFilters.bind(this);
-            this.clearData = this.clearData.bind(this);
             this.buildOptionsFromConfiguration = this.buildOptionsFromConfiguration.bind(this);
 
             this.filterObserver = undefined;
 
             this.createTableRowCollections();
+
+            openmct.time.on('bounds', this.refreshData);
+            openmct.time.on('timeSystem', this.refreshData);
         }
 
         /**
@@ -140,6 +141,8 @@ define([
             let columnMap = this.getColumnMapForObject(keyString);
             let limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
 
+            this.incrementOutstandingRequests();
+
             const telemetryProcessor = this.getTelemetryProcessor(keyString, columnMap, limitEvaluator);
             const telemetryRemover = this.getTelemetryRemover();
 
@@ -148,13 +151,13 @@ define([
             this.telemetryCollections[keyString] = this.openmct.telemetry
                 .requestCollection(telemetryObject, requestOptions);
 
-            this.telemetryCollections[keyString].on('requestStarted', this.incrementOutstandingRequests);
-            this.telemetryCollections[keyString].on('requestEnded', this.decrementOutstandingRequests);
             this.telemetryCollections[keyString].on('remove', telemetryRemover);
             this.telemetryCollections[keyString].on('add', telemetryProcessor);
-            this.telemetryCollections[keyString].on('clear', this.clearData);
+            this.telemetryCollections[keyString].on('clear', this.tableRows.clear);
             this.telemetryCollections[keyString].load();
 
+            this.decrementOutstandingRequests();
+
             this.telemetryObjects[keyString] = {
                 telemetryObject,
                 keyString,
@@ -265,6 +268,17 @@ define([
             this.emit('object-removed', objectIdentifier);
         }
 
+        refreshData(bounds, isTick) {
+            if (!isTick && this.tableRows.outstandingRequests === 0) {
+                this.tableRows.clear();
+                this.tableRows.sortBy({
+                    key: this.openmct.time.timeSystem().key,
+                    direction: 'asc'
+                });
+                this.tableRows.resubscribe();
+            }
+        }
+
         clearData() {
             this.tableRows.clear();
             this.emit('refresh');
@@ -364,6 +378,9 @@ define([
             let keystrings = Object.keys(this.telemetryCollections);
             keystrings.forEach(this.removeTelemetryCollection);
 
+            this.openmct.time.off('bounds', this.refreshData);
+            this.openmct.time.off('timeSystem', this.refreshData);
+
             if (this.filterObserver) {
                 this.filterObserver();
             }

src/plugins/telemetryTable/components/table-configuration.vue

@@ -131,8 +131,7 @@ export default {
             objects.forEach(object => this.addColumnsForObject(object, false));
         },
         addColumnsForObject(telemetryObject) {
-            const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
-            let metadataValues = metadata ? metadata.values() : [];
+            let metadataValues = this.openmct.telemetry.getMetadata(telemetryObject).values();
             metadataValues.forEach(metadatum => {
                 let column = new TelemetryTableColumn(this.openmct, metadatum);
                 this.tableConfiguration.addSingleColumnForObject(telemetryObject, column);

src/plugins/telemetryTable/components/table-footer-indicator.vue

@@ -105,8 +105,7 @@ export default {
                 composition.load().then((domainObjects) => {
                     domainObjects.forEach(telemetryObject => {
                         let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-                        const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
-                        let metadataValues = metadata ? metadata.values() : [];
+                        let metadataValues = this.openmct.telemetry.getMetadata(telemetryObject).values();
                         let filters = this.filteredTelemetry[keyString];
 
                         if (filters !== undefined) {

src/plugins/telemetryTable/components/table.vue

@@ -125,6 +125,7 @@
     <div
         class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar u-style-receiver js-style-receiver"
         :class="{
+            'loading': loading,
             'is-paused' : paused
         }"
     >
@@ -361,7 +362,7 @@ export default {
             autoScroll: true,
             sortOptions: {},
             filters: {},
-            loading: false,
+            loading: true,
             scrollable: undefined,
             tableEl: undefined,
             headersHolderEl: undefined,
@@ -421,14 +422,6 @@ export default {
         }
     },
     watch: {
-        loading: {
-            handler(isLoading) {
-                if (this.viewActionsCollection) {
-                    let action = isLoading ? 'disable' : 'enable';
-                    this.viewActionsCollection[action](['export-csv-all']);
-                }
-            }
-        },
         markedRows: {
             handler(newVal, oldVal) {
                 this.$emit('marked-rows-updated', newVal, oldVal);
@@ -535,7 +528,6 @@ export default {
             if (!this.updatingView) {
                 this.updatingView = true;
                 requestAnimationFrame(() => {
-
                     let start = 0;
                     let end = VISIBLE_ROW_COUNT;
                     let tableRows = this.table.tableRows.getRows();
@@ -1027,12 +1019,6 @@ export default {
                 this.viewActionsCollection.disable(['export-csv-marked', 'unmark-all-rows']);
             }
 
-            if (this.loading) {
-                this.viewActionsCollection.disable(['export-csv-all']);
-            } else {
-                this.viewActionsCollection.enable(['export-csv-all']);
-            }
-
             if (this.paused) {
                 this.viewActionsCollection.hide(['pause-data']);
                 this.viewActionsCollection.show(['play-data']);

src/plugins/telemetryTable/pluginSpec.js

@@ -222,9 +222,13 @@ describe("the plugin", () => {
             openmct.router.path = originalRouterPath;
         });
 
-        it("Renders a row for every telemetry datum returned", () => {
+        it("Renders a row for every telemetry datum returned", (done) => {
             let rows = element.querySelectorAll('table.c-telemetry-table__body tr');
-            expect(rows.length).toBe(3);
+            Vue.nextTick(() => {
+                expect(rows.length).toBe(3);
+
+                done();
+            });
         });
 
         it("Renders a column for every item in telemetry metadata", () => {

src/plugins/timeConductor/Conductor.vue

@@ -168,13 +168,16 @@ export default {
             }
         },
         zoom(bounds) {
-            this.isZooming = true;
-            this.formattedBounds.start = this.timeFormatter.format(bounds.start);
-            this.formattedBounds.end = this.timeFormatter.format(bounds.end);
+            if (isNaN(bounds.start) || isNaN(bounds.end)) {
+                this.isZooming = false;
+            } else {
+                this.isZooming = true;
+                this.formattedBounds.start = this.timeFormatter.format(bounds.start);
+                this.formattedBounds.end = this.timeFormatter.format(bounds.end);
+            }
         },
         endZoom(bounds) {
             this.isZooming = false;
-
             if (bounds) {
                 this.openmct.time.bounds(bounds);
             } else {

src/plugins/timeConductor/ConductorHistory.vue

@@ -40,7 +40,7 @@ const LOCAL_STORAGE_HISTORY_KEY_FIXED = 'tcHistory';
 const LOCAL_STORAGE_HISTORY_KEY_REALTIME = 'tcHistoryRealtime';
 const DEFAULT_RECORDS = 10;
 
-import { getDuration } from "utils/duration";
+import { millisecondsToDHMS } from "utils/duration";
 
 export default {
     inject: ['openmct', 'configuration'],
@@ -142,7 +142,7 @@ export default {
                 let description = `${startTime} - ${this.formatTime(timespan.end)}`;
 
                 if (this.timeSystem.isUTCBased && !this.openmct.time.clock()) {
-                    name = `${startTime} ${getDuration(timespan.end - timespan.start)}`;
+                    name = `${startTime} ${millisecondsToDHMS(timespan.end - timespan.start)}`;
                 } else {
                     name = description;
                 }
@@ -263,7 +263,7 @@ export default {
                 format: format
             }).formatter;
 
-            return (isNegativeOffset ? '-' : '') + formatter.format(time);
+            return (isNegativeOffset ? '-' : '') + formatter.format(time, 'YYYY-MM-DD HH:mm:ss');
         },
         showHistoryMenu() {
             const elementBoundingClientRect = this.$refs.historyButton.getBoundingClientRect();

src/plugins/timeConductor/independent/IndependentTimeConductor.vue

@@ -151,23 +151,30 @@ export default {
             this.stopFollowingTimeContext();
             this.timeContext = this.openmct.time.getContextForView([this.domainObject]);
             this.timeContext.on('timeContext', this.setTimeContext);
-            this.timeContext.on('clock', this.setTimeOptions);
+            this.timeContext.on('clock', this.setViewFromClock);
         },
         stopFollowingTimeContext() {
             if (this.timeContext) {
                 this.timeContext.off('timeContext', this.setTimeContext);
-                this.timeContext.off('clock', this.setTimeOptions);
+                this.timeContext.off('clock', this.setViewFromClock);
             }
         },
-        setTimeOptions(clock) {
-            this.timeOptions.clockOffsets = this.timeOptions.clockOffsets || this.timeContext.clockOffsets();
-            this.timeOptions.fixedOffsets = this.timeOptions.fixedOffsets || this.timeContext.bounds();
-
+        setViewFromClock(clock) {
             if (!this.timeOptions.mode) {
-                this.mode = this.timeContext.clock() === undefined ? {key: 'fixed'} : {key: Object.create(this.timeContext.clock()).key};
-                this.registerIndependentTimeOffsets();
+                this.setTimeOptions(clock);
             }
         },
+        setTimeOptions() {
+            if (!this.timeOptions || !this.timeOptions.mode) {
+                this.mode = this.timeContext.clock() === undefined ? { key: 'fixed' } : { key: Object.create(this.timeContext.clock()).key};
+                this.timeOptions = {
+                    clockOffsets: this.timeContext.clockOffsets(),
+                    fixedOffsets: this.timeContext.bounds()
+                };
+            }
+
+            this.registerIndependentTimeOffsets();
+        },
         saveFixedOffsets(offsets) {
             const newOptions = Object.assign({}, this.timeOptions, {
                 fixedOffsets: offsets

src/plugins/timeConductor/independent/Mode.vue

@@ -20,8 +20,7 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 <template>
-<div v-if="modes.length > 1"
-     ref="modeMenuButton"
+<div ref="modeMenuButton"
      class="c-ctrl-wrapper c-ctrl-wrapper--menus-up"
 >
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">

src/plugins/timeline/TimelineObjectView.vue

@@ -88,7 +88,7 @@ export default {
             this.mutablePromise.then(() => {
                 this.openmct.objects.destroyMutable(this.domainObject);
             });
-        } else if (this.domainObject.isMutable) {
+        } else {
             this.openmct.objects.destroyMutable(this.domainObject);
         }
     },

src/plugins/timeline/pluginSpec.js

@@ -51,7 +51,15 @@ describe('the plugin', function () {
             }
         ];
 
-        openmct = createOpenMct();
+        const timeSystem = {
+            timeSystemKey: 'utc',
+            bounds: {
+                start: 1597160002854,
+                end: 1597181232854
+            }
+        };
+
+        openmct = createOpenMct(timeSystem);
         openmct.install(new TimelinePlugin());
 
         objectDef = openmct.types.get('time-strip').definition;
@@ -64,11 +72,6 @@ describe('the plugin', function () {
         child.style.height = '480px';
         element.appendChild(child);
 
-        openmct.time.timeSystem('utc', {
-            start: 1597160002854,
-            end: 1597181232854
-        });
-
         openmct.on('start', done);
         openmct.startHeadless();
     });
@@ -88,7 +91,6 @@ describe('the plugin', function () {
     });
 
     describe('the time-strip object', () => {
-
         it('is creatable', () => {
             expect(objectDef.creatable).toEqual(mockObject.creatable);
         });

src/styles/_controls.scss

@@ -453,12 +453,16 @@ select {
     }
 }
 
-.c-so-view--no-frame > .c-so-view__object-view > .c-hyperlink--button {
+.c-so-view--hyperlink.c-so-view--no-frame {
+  .c-hyperlink--button {
     @include abs();
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
+  }
+
+  .c-so-view__frame-controls { display: none; }
 }
 
 /******************************************************** MENUS */
@@ -1006,6 +1010,9 @@ input[type="range"] {
         transition: $transIn;
         opacity: 1;
         pointer-events: inherit;
+
+        &[disabled] { opacity: $controlDisabledOpacity; }
+
     }
 }
 

src/styles/_legacy-plots.scss

@@ -46,9 +46,6 @@ mct-plot {
 
 .c-plot,
 .gl-plot {
-    overflow: hidden;
-    min-height: 100px;
-
         .s-status-taking-snapshot & {
         .c-control-bar {
             display: none;
@@ -67,16 +64,17 @@ mct-plot {
 
 .c-plot {
     @include abs($mainViewPad);
-
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    min-height: $plotMinH;
 
     .c-control-bar {
         flex: 0 0 auto;
         margin-bottom: $interiorMargin;
     }
 
-    .l-view-section, .c-plot--stacked-container {
+    .l-view-section {
         display: flex;
         flex: 1 1 auto;
         flex-direction: column;
@@ -84,7 +82,18 @@ mct-plot {
         overflow-x: hidden;
     }
 
+    .c-plot--stacked-container {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        min-height: $plotMinH;
+        overflow: hidden;
+    }
+;
+
     &--stacked {
+        min-height: auto !important;
+
         .child-frame {
             .has-control-bar {
                 .c-control-bar {
@@ -124,7 +133,7 @@ mct-plot {
     .plot-wrapper-axis-and-display-area {
         position: relative;
         flex: 1 1 auto;
-        min-height: $plotMinH;
+        //min-height: $plotMinH;
     }
 
     .gl-plot-wrapper-display-area-and-x-axis {
@@ -465,6 +474,7 @@ mct-plot {
 .gl-plot-legend,
 .c-plot-legend {
     overflow: hidden;
+    flex: 0 0 auto; // Prevents clipping for all legend placements (top, bottom, etc.)
 
     &__wrapper {
         // Holds view-control and both collapsed and expanded legends

src/styles/_mixins.scss

@@ -599,8 +599,6 @@
 @mixin cArrowButtonBase($colorBg: transparent, $colorFg: $colorBtnFg, $filterHov: $filterHov) {
     // Copied from branch new-tree-refactor
 
-    flex: 0 0 auto;
-    position: relative;
     background: $colorBg;
 
     &:before {

src/ui/components/ObjectFrame.vue

@@ -160,9 +160,7 @@ export default {
         this.status = this.openmct.status.get(this.domainObject.identifier);
         this.removeStatusListener = this.openmct.status.observe(this.domainObject.identifier, this.setStatus);
         const provider = this.openmct.objectViews.get(this.domainObject, this.objectPath)[0];
-        if (provider) {
-            this.$refs.objectView.show(this.domainObject, provider.key, false, this.objectPath);
-        }
+        this.$refs.objectView.show(this.domainObject, provider.key, false, this.objectPath);
     },
     beforeDestroy() {
         this.removeStatusListener();
@@ -195,10 +193,8 @@ export default {
         },
         showMenuItems(event) {
             const sortedActions = this.openmct.actions._groupAndSortActions(this.menuActionItems);
-            if (sortedActions.length) {
-                const menuItems = this.openmct.menus.actionsToMenuItems(sortedActions, this.actionCollection.objectPath, this.actionCollection.view);
-                this.openmct.menus.showMenu(event.x, event.y, menuItems);
-            }
+            const menuItems = this.openmct.menus.actionsToMenuItems(sortedActions, this.actionCollection.objectPath, this.actionCollection.view);
+            this.openmct.menus.showMenu(event.x, event.y, menuItems);
         },
         setStatus(status) {
             this.status = status;

src/ui/inspector/InspectorStylesSpec.js

@@ -49,7 +49,6 @@ describe("the inspector", () => {
 
     beforeEach((done) => {
         openmct = createOpenMct();
-        spyOn(openmct.objects, 'save').and.returnValue(Promise.resolve(true));
         openmct.on('start', done);
         openmct.startHeadless();
     });
@@ -78,12 +77,12 @@ describe("the inspector", () => {
         expect(savedStylesViewComponent.$children[0].$children.length).toBe(0);
         stylesViewComponent.$children[0].saveStyle(mockStyle);
 
-        return stylesViewComponent.$nextTick().then(() => {
+        stylesViewComponent.$nextTick().then(() => {
             expect(savedStylesViewComponent.$children[0].$children.length).toBe(1);
         });
     });
 
-    xit("should allow a saved style to be applied", () => {
+    it("should allow a saved style to be applied", () => {
         spyOn(openmct.editor, 'isEditing').and.returnValue(true);
 
         selection = mockTelemetryTableSelection;
@@ -92,12 +91,12 @@ describe("the inspector", () => {
 
         stylesViewComponent.$children[0].saveStyle(mockStyle);
 
-        return stylesViewComponent.$nextTick().then(() => {
+        stylesViewComponent.$nextTick().then(() => {
             const styleSelectorComponent = savedStylesViewComponent.$children[0].$children[0];
 
             styleSelectorComponent.selectStyle();
 
-            return savedStylesViewComponent.$nextTick().then(() => {
+            savedStylesViewComponent.$nextTick().then(() => {
                 const styleEditorComponentIndex = stylesViewComponent.$children[0].$children.length - 1;
                 const styleEditorComponent = stylesViewComponent.$children[0].$children[styleEditorComponentIndex];
                 const styles = styleEditorComponent.$children.filter(component => component.options.value === mockStyle.color);
@@ -148,7 +147,7 @@ describe("the inspector", () => {
         stylesViewComponent = createViewComponent(StylesView, selection, openmct);
         savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
 
-        return stylesViewComponent.$nextTick().then(() => {
+        stylesViewComponent.$nextTick().then(() => {
             const styleEditorComponentIndex = stylesViewComponent.$children[0].$children.length - 1;
             const styleEditorComponent = stylesViewComponent.$children[0].$children[styleEditorComponentIndex];
             const saveStyleButtonIndex = styleEditorComponent.$children.length - 1;
@@ -169,7 +168,7 @@ describe("the inspector", () => {
         stylesViewComponent = createViewComponent(StylesView, selection, openmct);
         savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
 
-        return stylesViewComponent.$nextTick().then(() => {
+        stylesViewComponent.$nextTick().then(() => {
             const styleEditorComponentIndex = stylesViewComponent.$children[0].$children.length - 1;
             const styleEditorComponent = stylesViewComponent.$children[0].$children[styleEditorComponentIndex];
             const saveStyleButtonIndex = styleEditorComponent.$children.length - 1;
@@ -186,7 +185,7 @@ describe("the inspector", () => {
         stylesViewComponent = createViewComponent(StylesView, selection, openmct);
         savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
 
-        return stylesViewComponent.$nextTick().then(() => {
+        stylesViewComponent.$nextTick().then(() => {
             const styleEditorComponentIndex = stylesViewComponent.$children[0].$children.length - 1;
             const styleEditorComponent = stylesViewComponent.$children[0].$children[styleEditorComponentIndex];
             const saveStyleButtonIndex = styleEditorComponent.$children.length - 1;

src/ui/inspector/styles/StylesInspectorView.vue

@@ -54,15 +54,15 @@ export default {
                 let viewContainer = document.createElement('div');
                 this.$el.append(viewContainer);
                 this.component = new Vue({
+                    el: viewContainer,
+                    components: {
+                        StylesView
+                    },
                     provide: {
                         openmct: this.openmct,
                         selection: selection,
                         stylesManager: this.stylesManager
                     },
-                    el: viewContainer,
-                    components: {
-                        StylesView
-                    },
                     template: '<styles-view/>'
                 });
             }

src/ui/layout/AppLogo.vue

@@ -42,10 +42,10 @@ export default {
     methods: {
         launchAbout() {
             let vm = new Vue({
+                components: {AboutDialog},
                 provide: {
                     openmct: this.openmct
                 },
-                components: {AboutDialog},
                 template: '<about-dialog></about-dialog>'
             }).$mount();
 

src/ui/router/ApplicationRouterSpec.js

@@ -6,133 +6,74 @@ let child;
 let appHolder;
 let resolveFunction;
 
-let initialHash = '';
-
-xdescribe('Application router utility functions', () => {
-    beforeAll(done => {
+describe('Application router utility functions', () => {
+    beforeEach(done => {
         appHolder = document.createElement('div');
         appHolder.style.width = '640px';
         appHolder.style.height = '480px';
 
         openmct = createOpenMct();
         openmct.install(openmct.plugins.MyItems());
-        openmct.install(openmct.plugins.LocalTimeSystem());
-        openmct.install(openmct.plugins.UTCTimeSystem());
 
         element = document.createElement('div');
         child = document.createElement('div');
         element.appendChild(child);
 
-        openmct.on('start', done);
+        openmct.on('start', () => {
+            resolveFunction = () => {
+                const success = window.location.hash !== null && window.location.hash !== '';
+                if (success) {
+                    done();
+                }
+            };
+
+            openmct.router.on('change:hash', resolveFunction);
+            openmct.router.setLocationFromUrl();
+        });
+
         openmct.start(appHolder);
 
         document.body.append(appHolder);
     });
 
-    afterAll(() => {
-        openmct.router.setHash(initialHash);
+    afterEach(() => {
+        openmct.router.removeListener('change:hash', resolveFunction);
         appHolder.remove();
 
         return resetApplicationState(openmct);
     });
 
-    it('has initial hash when loaded', (done) => {
-        let success;
-        resolveFunction = () => {
-            openmct.router.setLocationFromUrl();
-            success = window.location.hash !== null;
-            if (success) {
-                initialHash = window.location.hash;
-                expect(success).toBe(true);
-
-                openmct.router.removeListener('change:hash', resolveFunction);
-                done();
-            }
-        };
-
-        openmct.router.on('change:hash', resolveFunction);
+    it('has initial hash when loaded', () => {
+        const success = window.location.hash !== null;
+        expect(success).toBe(true);
     });
 
-    it('The setSearchParam function sets an individual search parameter in the window location hash', (done) => {
-        let success;
+    it('The setSearchParam function sets an individual search parameter in the window location hash', () => {
         openmct.router.setSearchParam('testParam', 'testValue');
-        resolveFunction = () => {
-            success = window.location.hash.includes('testParam=testValue');
-            if (success) {
-                expect(success).toBe(true);
-
-                openmct.router.removeListener('change:hash', resolveFunction);
-                done();
-            }
-        };
-
-        openmct.router.on('change:hash', resolveFunction);
+        const searchParams = openmct.router.getAllSearchParams();
+        expect(searchParams.get('testParam')).toBe('testValue');
     });
 
-    it('The getSearchParam function returns the value of an individual search parameter in the window location hash', () => {
-        expect(openmct.router.getSearchParam('testParam')).toBe('testValue');
-    });
-
-    it('The deleteSearchParam function deletes an individual search parameter in the window location hash', (done) => {
-        let success;
+    it('The deleteSearchParam function deletes an individual search paramater in the window location hash', () => {
         openmct.router.deleteSearchParam('testParam');
-        resolveFunction = () => {
-            success = window.location.hash.includes('testParam=testValue') === false;
-            if (success) {
-                expect(success).toBe(true);
-
-                openmct.router.removeListener('change:hash', resolveFunction);
-                done();
-            }
-        };
-
-        openmct.router.on('change:hash', resolveFunction);
+        const searchParams = openmct.router.getAllSearchParams();
+        expect(searchParams.get('testParam')).toBe(null);
     });
 
-    it('The setSearchParam function sets an individual search parameters in the window location hash', (done) => {
-        let success;
+    it('The setSearchParam function sets a multiple individual search parameters in the window location hash', () => {
         openmct.router.setSearchParam('testParam1', 'testValue1');
         openmct.router.setSearchParam('testParam2', 'testValue2');
 
-        resolveFunction = () => {
-            const hasTestParam1 = window.location.hash.includes('testParam1=testValue1');
-            const hasTestParam2 = window.location.hash.includes('testParam2=testValue2');
-            success = hasTestParam1 && hasTestParam2;
-            if (success) {
-                expect(success).toBe(true);
-
-                openmct.router.removeListener('change:hash', resolveFunction);
-                done();
-            }
-        };
-
-        openmct.router.on('change:hash', resolveFunction);
+        const searchParams = openmct.router.getAllSearchParams();
+        expect(searchParams.get('testParam1')).toBe('testValue1');
+        expect(searchParams.get('testParam2')).toBe('testValue2');
     });
 
-    it('The setAllSearchParams function replaces all search parameters in the window location hash', (done) => {
-        let success;
-
+    it('The setAllSearchParams function replaces all search paramaters in the window location hash', () => {
         openmct.router.setSearchParam('testParam2', 'updatedtestValue2');
         openmct.router.setSearchParam('newTestParam3', 'newTestValue3');
 
-        resolveFunction = () => {
-            const hasupdatedValueForTestParam2 = window.location.hash.includes('testParam2=updatedtestValue2');
-            const hasNewTestParam3 = window.location.hash.includes('newTestParam3=newTestValue3');
-            success = hasupdatedValueForTestParam2 && hasNewTestParam3;
-            if (success) {
-                expect(success).toBe(true);
-
-                openmct.router.removeListener('change:hash', resolveFunction);
-                done();
-            }
-        };
-
-        openmct.router.on('change:hash', resolveFunction);
-    });
-
-    it('The getAllSearchParams function returns the values of all search parameters in the window location hash', () => {
-        let searchParams = openmct.router.getAllSearchParams();
-        expect(searchParams.get('testParam1')).toBe('testValue1');
+        const searchParams = openmct.router.getAllSearchParams();
         expect(searchParams.get('testParam2')).toBe('updatedtestValue2');
         expect(searchParams.get('newTestParam3')).toBe('newTestValue3');
     });

src/ui/router/Browse.js

@@ -119,11 +119,16 @@ define([
         function navigateToFirstChildOfRoot() {
             openmct.objects.get('ROOT')
                 .then(rootObject => {
-                    openmct.composition.get(rootObject).load()
+                    const composition = openmct.composition.get(rootObject);
+                    if (!composition) {
+                        return;
+                    }
+
+                    composition.load()
                         .then(children => {
                             let lastChild = children[children.length - 1];
                             if (!lastChild) {
-                                console.error('Unable to navigate to anything. No root objects found.');
+                                console.debug('Unable to navigate to anything. No root objects found.');
                             } else {
                                 let lastChildId = openmct.objects.makeKeyString(lastChild.identifier);
                                 openmct.router.setPath(`#/browse/${lastChildId}`);

src/utils/duration.js

@@ -20,7 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const ONE_MINUTE = 60 * 1000;
+const ONE_SECOND = 1000;
+const ONE_MINUTE = 60 * ONE_SECOND;
 const ONE_HOUR = ONE_MINUTE * 60;
 const ONE_DAY = ONE_HOUR * 24;
 
@@ -39,34 +40,20 @@ function toDoubleDigits(num) {
     }
 }
 
-export function getDuration(numericDuration) {
-    let result;
-    let age;
+function addTimeSuffix(value, suffix) {
+    return typeof value === 'number' && value > 0 ? `${value + suffix}` : '';
+}
 
-    if (numericDuration > ONE_DAY - 1) {
-        age = normalizeAge((numericDuration / ONE_DAY)).toFixed(2);
-        result = `+ ${age} day`;
+export function millisecondsToDHMS(numericDuration) {
+    const ms = numericDuration || 0;
+    const dhms = [
+        addTimeSuffix(Math.floor(normalizeAge(ms / ONE_DAY)), 'd'),
+        addTimeSuffix(Math.floor(normalizeAge((ms % ONE_DAY) / ONE_HOUR)), 'h'),
+        addTimeSuffix(Math.floor(normalizeAge((ms % ONE_HOUR) / ONE_MINUTE)), 'm'),
+        addTimeSuffix(Math.floor(normalizeAge((ms % ONE_MINUTE) / ONE_SECOND)), 's')
+    ].filter(Boolean).join(' ');
 
-        if (age !== 1) {
-            result += 's';
-        }
-    } else if (numericDuration > ONE_HOUR - 1) {
-        age = normalizeAge((numericDuration / ONE_HOUR).toFixed(2));
-        result = `+ ${age} hour`;
-
-        if (age !== 1) {
-            result += 's';
-        }
-    } else {
-        age = normalizeAge((numericDuration / ONE_MINUTE).toFixed(2));
-        result = `+ ${age} min`;
-
-        if (age !== 1) {
-            result += 's';
-        }
-    }
-
-    return result;
+    return `${ dhms ? '+' : ''} ${dhms}`;
 }
 
 export function getPreciseDuration(numericDuration) {

src/utils/testing.js

@@ -25,13 +25,26 @@ import MCT from 'MCT';
 let nativeFunctions = [];
 let mockObjects = setMockObjects();
 
-export function createOpenMct() {
+const DEFAULT_TIME_OPTIONS = {
+    timeSystemKey: 'utc',
+    bounds: {
+        start: 0,
+        end: 1
+    }
+};
+
+export function createOpenMct(timeSystemOptions = DEFAULT_TIME_OPTIONS) {
     const openmct = new MCT();
     openmct.install(openmct.plugins.LocalStorage());
     openmct.install(openmct.plugins.UTCTimeSystem());
-    openmct.time.timeSystem('utc', {
-        start: 0,
-        end: 1
+
+    const timeSystemKey = timeSystemOptions.timeSystemKey;
+    const start = timeSystemOptions.bounds.start;
+    const end = timeSystemOptions.bounds.end;
+
+    openmct.time.timeSystem(timeSystemKey, {
+        start,
+        end
     });
 
     return openmct;