Merge branch 'master' into testing/styles

* remove redundant code

Co-authored-by: Henry Hsu <henry.hsu@nasa.gov>

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,43 @@
+<!--- This is for filing bugs. If you have a general question, please -->
+<!--- visit https://github.com/nasa/openmct/discussions -->
+
+---
+name: Bug Report
+about: File a Bug !
+
+---
+<!--- Focus on user impact in the title. Use the Summary Field to -->
+<!--- describe the problem technically. -->
+
+#### Summary
+<!--- A description of the issue encountered. When possible, a description -->
+<!--- of the impact of the issue. What use case does it impede?-->
+
+#### Expected vs Current Behavior
+<!--- Tell us what should have happened -->
+
+#### Impact Check List
+<!--- Please select from the following options -->
+
+- [ ] Data loss or misrepresented data?
+- [ ] Regression? Did this used to work or has it always been broken?
+- [ ] Is there a workaround available?
+- [ ] Does this impact a critical component?
+- [ ] Is this just a visual bug?
+
+#### Steps to Reproduce
+<!--- Provide a link to a live example, or an unambiguous set of steps to -->
+<!--- reproduce this bug. Include code to reproduce, if relevant -->
+1.
+2.
+3.
+4.
+
+#### Environment
+* Open MCT Version: <!--- date of build, version, or SHA -->
+* Deployment Type: <!--- npm dev? VIPER Dev? openmct-yams? -->
+* OS:
+* Browser:
+
+#### Additional Information
+<!--- Include any screenshots, gifs, or logs which will expedite triage -->

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,23 @@
+<!--- This is for filing enhancements or features. If you have a general -->
+<!--- question, please visit https://github.com/nasa/openmct/discussions -->
+
+---
+name: Feature Request
+about: Suggest an idea for this project
+
+---
+
+<!--
+Thank you for suggesting an idea to make Open MCT better.
+
+Please fill in as much of the template below as you're able.
+-->
+
+**Is your feature request related to a problem? Please describe.**
+<!-- Please describe the problem you are trying to solve. -->
+
+**Describe the solution you'd like**
+<!--- Please describe the desired behavior. -->
+
+**Describe alternatives you've considered**
+<!--- Please describe alternative solutions or features you have considered. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,12 @@
+### All Submissions:
+
+* [ ] 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?
+
+### Author Checklist
+
+* [ ] Changes address original issue?
+* [ ] Unit tests included and/or updated with changes?
+* [ ] Command line build passes?
+* [ ] Has this been smoke tested?
+* [ ] Testing instructions included in associated issue?

.github/workflows/lighthouse.yml

@@ -0,0 +1,18 @@
+name: lighthouse
+on:
+  workflow_dispatch:
+    inputs: 
+      version:
+        description: 'Which branch do you want to test?' # Limited to branch for now
+        required: false
+        default: 'master' 
+jobs:
+  lighthouse:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.inputs.version }}
+      - uses: actions/setup-node@v1
+      - run: npm install && npm install -g @lhci/cli #Don't want to include this in our deps
+      - run: lhci autorun

.gitignore

@@ -39,3 +39,8 @@ npm-debug.log
 
 # karma reports
 report.*.json
+
+# Lighthouse reports
+.lighthouseci
+
+package-lock.json

API.md

@@ -595,9 +595,17 @@ section.
 
 #### Limit Evaluators **draft**
 
-Limit evaluators allow a telemetry integrator to define how limits should be 
-applied to telemetry from a given domain object.  For an example of a limit 
-evaluator, take a look at `examples/generator/SinewaveLimitProvider.js`.
+Limit evaluators allow a telemetry integrator to define which limits exist for a 
+telemetry endpoint and how limits should be applied to telemetry from a given domain object.
+
+A limit evaluator can implement the `evalute` method which is used to define how limits
+should be applied to telemetry and the `getLimits` method which is used to specify 
+what the limit values are for different limit levels.
+
+Limit levels can be mapped to one of 5 colors for visualization: 
+`purple`, `red`, `orange`, `yellow` and `cyan`.
+
+For an example of a limit evaluator, take a look at `examples/generator/SinewaveLimitProvider.js`.
 
 ### Telemetry Consumer APIs **draft**
 

CONTRIBUTING.md

@@ -10,7 +10,7 @@ accept changes from external contributors.
 
 The short version:
 
-1. Write your contribution.
+1. Write your contribution or describe your idea in the form of an [GitHub issue](https://github.com/nasa/openmct/issues/new/choose) or [Starting a GitHub Discussion](https://github.com/nasa/openmct/discussions)
 2. Make sure your contribution meets code, test, and commit message
    standards as described below.
 3. Submit a pull request from a topic branch back to `master`. Include a check
@@ -18,6 +18,7 @@ The short version:
    for review.)
 4. Respond to any discussion. When the reviewer decides it's ready, they
    will merge back `master` and fill out their own check list.
+5. If you are a first-time contributor, please see [this discussion](https://github.com/nasa/openmct/discussions/3821) for further information.   
 
 ## Contribution Process
 
@@ -115,7 +116,7 @@ the pull request containing the reviewer checklist (from below) and complete
 the merge back to the master branch.
 
 Additionally:
-* Every pull request must link to the issue that it addresses. Eg. “Addresses #1234” or “Closes #1234”. This is the responsibility of the pull request’s __author__. If no issue exists, create one.
+* Every pull request must link to the issue that it addresses. Eg. “Addresses #1234” or “Closes #1234”. This is the responsibility of the pull request’s __author__. If no issue exists, [create one](https://github.com/nasa/openmct/issues/new/choose).
 * Every __author__ must include testing instructions. These instructions should identify the areas of code affected, and some minimal test steps. If addressing a bug, reproduction steps should be included, if they were not included in the original issue. If reproduction steps were included on the original issue, and are sufficient, refer to them.
 * A pull request that closes an issue should say so in the description. Including the text “Closes #1234” will cause the linked issue to be automatically closed when the pull request is merged. This is the responsibility of the pull request’s __author__.
 * When a pull request is merged, and the corresponding issue closed, the __reviewer__ must add the tag “unverified” to the original issue. This will indicate that although the issue is closed, it has not been tested yet.
@@ -296,23 +297,12 @@ these standards.
 
 Issues are tracked at https://github.com/nasa/openmct/issues.
 
-Issues should include:
-
-* A short description of the issue encountered.
-* A longer-form description of the issue encountered. When possible, steps to
-  reproduce the issue.
-* When possible, a description of the impact of the issue. What use case does
-  it impede?
-* An assessment of the severity of the issue.
-
 Issue severity is categorized as follows (in ascending order):
 
-* _Trivial_: Minimal impact on the usefulness and functionality of the
-  software; a "nice-to-have."
-* _(Unspecified)_: Major loss of functionality or impairment of use.
-* _Critical_: Large-scale loss of functionality or impairment of use,
-  such that remaining utility becomes marginal.
-* _Blocker_: Harmful or otherwise unacceptable behavior. Must fix.
+* _Trivial_: Minimal impact on the usefulness and functionality of the software; a "nice-to-have." Visual impact without functional impact,
+* _Medium_: Some impairment of use, but simple workarounds exist
+* _Critical_: Significant loss of functionality or impairment of use. Display of telemetry data is not affected though.
+* _Blocker_: Major functionality is impaired or lost, threatening mission success. Display of telemetry data is impaired or blocked by the bug, which could lead to loss of situational awareness.
 
 ## Check Lists
 
@@ -322,16 +312,19 @@ checklist).
 
 ### Author Checklist
 
-1. Changes address original issue?
-2. Unit tests included and/or updated with changes?
-3. Command line build passes?
-4. Changes have been smoke-tested?
-5. Testing instructions included?
+[Within PR Template](.github/PULL_REQUEST_TEMPLATE.md)
 
 ### Reviewer Checklist
 
-1. Changes appear to address issue?
-2. Appropriate unit tests included?
-3. Code style and in-line documentation are appropriate?
-4. Commit messages meet standards?
-5. Has associated issue been labelled `unverified`? (only applicable if this PR closes the issue)
+* [ ] Changes appear to address issue?
+* [ ] Appropriate unit tests included?
+* [ ] Code style and in-line documentation are appropriate?
+* [ ] Commit messages meet standards?
+* [ ] Has associated issue been labelled `unverified`? (only applicable if this PR closes the issue)
+* [ ] Has associated issue been labelled `bug`? (only applicable if this PR is for a bug fix)
+* [ ] List of Acceptance Tests Performed.
+
+Write out a small list of tests performed with just enough detail for another developer on the team 
+to execute. 
+
+i.e. ```When Clicking on Add button, new `object` appears in dropdown.```

README.md

@@ -44,7 +44,7 @@ The clearest examples for developing Open MCT plugins are in the
 our documentation.
 
 We want Open MCT to be as easy to use, install, run, and develop for as
-possible, and your feedback will help us get there! Feedback can be provided via [GitHub issues](https://github.com/nasa/openmct/issues), or by emailing us at [arc-dl-openmct@mail.nasa.gov](mailto:arc-dl-openmct@mail.nasa.gov).
+possible, and your feedback will help us get there! Feedback can be provided via [GitHub issues](https://github.com/nasa/openmct/issues/new/choose), [Starting a GitHub Discussion](https://github.com/nasa/openmct/discussions), or by emailing us at [arc-dl-openmct@mail.nasa.gov](mailto:arc-dl-openmct@mail.nasa.gov).
 
 ## Building Applications With Open MCT
 

app.js

@@ -7,14 +7,6 @@
  * node app.js [options]
  */
 
-class WatchRunPlugin {
-    apply(compiler) {
-        compiler.hooks.emit.tapAsync('WatchRunPlugin', (compilation, callback) => {
-            console.log('Begin compile at ' + new Date());
-            callback();
-        });
-    }
-}
 
 const options = require('minimist')(process.argv.slice(2));
 const express = require('express');
@@ -51,7 +43,7 @@ app.use('/proxyUrl', function proxyRequest(req, res, next) {
 const webpack = require('webpack');
 const webpackConfig = require('./webpack.config.js');
 webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
-webpackConfig.plugins.push(new WatchRunPlugin());
+webpackConfig.plugins.push(function() { this.plugin('watch-run', function(watching, callback) { console.log('Begin compile at ' + new Date()); callback(); }) });
 
 webpackConfig.entry.openmct = [
     'webpack-hot-middleware/client?reload=true',

docs/src/process/cycle.md

@@ -73,11 +73,11 @@ acceptance testing (e.g. by resolving any blockers found); any
 resources not needed for this effort should be used to begin work
 for the subsequent sprint.
 
-| Week  | Mon                       | Tue    | Wed | Thu                          | Fri         |
-|:-----:|:-------------------------:|:------:|:---:|:----------------------------:|:-----------:|
-| __1__ | Sprint plan               | Tag-up |     |                              |             |
-| __2__ |                           | Tag-up |     |                              | Code freeze |
-| __3__ | Per-sprint testing        | Triage |     | _Per-sprint testing*_        | Ship        |
+| Week  | Mon                       | Tue    | Wed | Thu                          | Fri                                   |
+|:-----:|:-------------------------:|:------:|:---:|:----------------------------:|:-------------------------------------:|
+| __1__ | Sprint plan               | Tag-up |     |                              |                                       |
+| __2__ |                           | Tag-up |     |                              | Code freeze  and sprint branch        |
+| __3__ | Per-sprint testing        | Triage |     | _Per-sprint testing*_        | Ship and merge sprint branch to master|
 
 * If necessary.
 
@@ -105,14 +105,20 @@ emphasis on testing.
     that team may begin work for that sprint during the
     third week, since testing and blocker resolution is unlikely
     to require all available resources.
+  * Testing success criteria identified per issue (where necessary). This could be in the form of acceptance tests on the issue or detailing performance tests, for example.
 * __Tag-up.__ Check in and status update among development team.
   May amend plan for sprint as-needed.
 * __Code freeze.__ Any new work from this sprint
   (features, bug fixes, enhancements) must be integrated by the
-  end of the second week of the sprint. After code freeze
-  (and until the end of the sprint) the only changes that should be
-  merged into the master branch should directly address issues
-  needed to pass acceptance testing.
+  end of the second week of the sprint. After code freeze, a sprint
+  branch will be created (and until the end of the sprint) the only 
+  changes that should be merged into the sprint branch should 
+  directly address issues needed to pass acceptance testing.
+  During this time, any other feature development will continue to
+  be merged into the master branch for the next sprint.
+* __Sprint branch merge to master.__ After acceptance testing, the sprint branch
+  will be merged back to the master branch. Any code conflicts that 
+  arise will be resolved by the team.
 * [__Per-release Testing.__](testing/plan.md#per-release-testing)
   Structured testing with predefined
   success criteria. No release should ship without passing
@@ -126,8 +132,8 @@ emphasis on testing.
   * [__Testathon.__](testing/plan.md#user-testing)
     Multi-user testing, involving as many users as
     is feasible, plus development team. Open-ended; should verify
-    completed work from this sprint, test exploratorily for
-    regressions, et cetera.
+    completed work from this sprint using the sprint branch, test 
+    exploratorily for regressions, et cetera.
   * [__Long-Duration Test.__](testing/plan.md#long-duration-testing) A
     test to verify that the software remains
     stable after running for longer durations. May include some
@@ -143,7 +149,7 @@ emphasis on testing.
   Subset of Pre-release Testing
   which should be performed before shipping at the end of any
   sprint. Time is allocated for a second round of
-  Pre-release Testing if the first round is not passed.
+  Pre-release Testing if the first round is not passed. Smoke tests collected from issues/PRs
 * __Triage.__ Team reviews issues from acceptance testing and uses
   success criteria to determine whether or not they should block
   release, then formulates a plan to address these issues before

docs/src/process/testing/plan.md

@@ -19,7 +19,7 @@ Testing for Open MCT includes:
 
 Manual, non-rigorous testing of the software and/or specific features
 of interest. Verifies that the software runs and that basic functionality
-is present.
+is present. The outcome of Smoke Testing should be a simplified list of Acceptance Tests which could be executed by another team member with sufficient context.
 
 ### Unit Testing
 
@@ -49,7 +49,7 @@ User testing will focus on the following activities:
 * General "trying to break things."
 
 During user testing, users will
-[report issues](https://github.com/nasa/openmctweb/blob/master/CONTRIBUTING.md#issue-reporting)
+[report issues](https://github.com/nasa/openmct/issues/new/choose)
 as they are encountered.
 
 Desired outcomes of user testing are:
@@ -71,7 +71,7 @@ usage. After twenty-four hours, the software is evaluated for:
   at the start of the test? Is it as responsive?
 
 Any defects or unexpected behavior identified during testing should be
-[reported as issues](https://github.com/nasa/openmctweb/blob/master/CONTRIBUTING.md#issue-reporting)
+[reported as issues](https://github.com/nasa/openmct/issues/new/choose)
 and reviewed for severity.
 
 ## Test Performance

docs/src/process/version.md

@@ -92,8 +92,8 @@ should update (or delegate the task of updating) Open MCT version
 numbers by the following process:
 
 1. Update version number in `package.json`
-  1. Create a new branch off the `master` branch.
-  2. Remove `-SNAPSHOT` suffix from the version in `package.json`.
+  1. Checkout branch created for the last sprint that has been successfully tested.
+  2. Remove a `-SNAPSHOT` suffix from the version in `package.json`.
   3. Verify that resulting version number meets semantic versioning
      requirements relative to previous stable version. Increment the 
      version number if necessary.
@@ -131,7 +131,8 @@ numbers by the following process:
   3. In `package.json` change package to be public (private: false)
   4. Test the package before publishing by doing `npm publish --dry-run` 
      if necessary.
-  5. Publish the package to the npmjs registry (e.g. `npm publish --access public`)
+  5. Publish the package to the npmjs registry (e.g. `npm publish --access public`) 
+     NOTE: Use the `--tag unstable` flag to the npm publishj if this is a prerelease.
   6. Confirm the package has been published (e.g. `https://www.npmjs.com/package/openmct`)
 5. Update snapshot status in `package.json`
   1. Create a new branch off the `master` branch.

example/generator/SinewaveLimitProvider.js

@@ -26,14 +26,26 @@ define([
 
 ) {
 
-    var RED = {
+    var PURPLE = {
+            sin: 2.2,
+            cos: 2.2
+        },
+        RED = {
             sin: 0.9,
             cos: 0.9
         },
+        ORANGE = {
+            sin: 0.7,
+            cos: 0.7
+        },
         YELLOW = {
             sin: 0.5,
             cos: 0.5
         },
+        CYAN = {
+            sin: 0.45,
+            cos: 0.45
+        },
         LIMITS = {
             rh: {
                 cssClass: "is-limit--upr is-limit--red",
@@ -93,5 +105,70 @@ define([
         };
     };
 
+    SinewaveLimitProvider.prototype.getLimits = function (domainObject) {
+
+        return {
+            limits: function () {
+                return Promise.resolve({
+                    WATCH: {
+                        low: {
+                            color: "cyan",
+                            sin: -CYAN.sin,
+                            cos: -CYAN.cos
+                        },
+                        high: {
+                            color: "cyan",
+                            ...CYAN
+                        }
+                    },
+                    WARNING: {
+                        low: {
+                            color: "yellow",
+                            sin: -YELLOW.sin,
+                            cos: -YELLOW.cos
+                        },
+                        high: {
+                            color: "yellow",
+                            ...YELLOW
+                        }
+                    },
+                    DISTRESS: {
+                        low: {
+                            color: "orange",
+                            sin: -ORANGE.sin,
+                            cos: -ORANGE.cos
+                        },
+                        high: {
+                            color: "orange",
+                            ...ORANGE
+                        }
+                    },
+                    CRITICAL: {
+                        low: {
+                            color: "red",
+                            sin: -RED.sin,
+                            cos: -RED.cos
+                        },
+                        high: {
+                            color: "red",
+                            ...RED
+                        }
+                    },
+                    SEVERE: {
+                        low: {
+                            color: "purple",
+                            sin: -PURPLE.sin,
+                            cos: -PURPLE.cos
+                        },
+                        high: {
+                            color: "purple",
+                            ...PURPLE
+                        }
+                    }
+                });
+            }
+        };
+    };
+
     return SinewaveLimitProvider;
 });

lighthouserc.yml

@@ -0,0 +1,96 @@
+---
+ci:
+  collect:
+    urls:
+    - http://localhost/
+    numberOfRuns: 5
+    settings:
+      onlyCategories:
+      - performance
+      - best-practices
+  upload:
+    target: temporary-public-storage
+  assert:
+    preset: lighthouse:recommended
+    assertions:
+      ### Applicable assertions
+      bootup-time:
+      - warn
+      - minScore: 0.88 #Original value was calculated at 0.88
+      dom-size: 
+      - error
+      - maxNumericValue: 200 #Original value was calculated at 188
+      first-contentful-paint:
+      - error
+      - minScore: 0.07 #Original value was calculated at 0.08
+      mainthread-work-breakdown:
+      - warn
+      - minScore: 0.8 #Original value was calculated at 0.8
+      unused-javascript:
+      - warn
+      - maxLength: 1
+      - error
+      - maxNumericValue: 2000 #Original value was calculated at 1855
+      unused-css-rules: warn
+      installable-manifest: warn
+      service-worker: warn
+      ### Disabled seo, accessibility, and pwa assertions, below
+      categories:seo: 'off'
+      categories:accessibility: 'off'
+      categories:pwa: 'off'
+      accesskeys: 'off'
+      apple-touch-icon: 'off'
+      aria-allowed-attr: 'off'
+      aria-command-name: 'off'
+      aria-hidden-body: 'off'
+      aria-hidden-focus: 'off'
+      aria-input-field-name: 'off'
+      aria-meter-name: 'off'
+      aria-progressbar-name: 'off'
+      aria-required-attr: 'off'
+      aria-required-children: 'off'
+      aria-required-parent: 'off'
+      aria-roles: 'off'
+      aria-toggle-field-name: 'off'
+      aria-tooltip-name: 'off'
+      aria-treeitem-name: 'off'
+      aria-valid-attr: 'off'
+      aria-valid-attr-value: 'off'
+      button-name: 'off'
+      bypass: 'off'
+      canonical: 'off'
+      color-contrast: 'off'
+      content-width: 'off'
+      crawlable-anchors: 'off'
+      csp-xss: 'off'
+      font-display: 'off'
+      font-size: 'off'
+      maskable-icon: 'off'
+      heading-order: 'off'
+      hreflang: 'off'
+      html-has-lang: 'off'
+      html-lang-valid: 'off'
+      http-status-code: 'off'
+      image-alt: 'off'
+      input-image-alt: 'off'
+      is-crawlable: 'off'
+      label: 'off'
+      link-name: 'off'
+      link-text: 'off'
+      list: 'off'
+      listitem: 'off'
+      meta-description: 'off'
+      meta-refresh: 'off'
+      meta-viewport: 'off'
+      object-alt: 'off'
+      plugins: 'off'
+      robots-txt: 'off'
+      splash-screen: 'off'
+      tabindex: 'off'
+      tap-targets: 'off'
+      td-headers-attr: 'off'
+      th-has-data-cells: 'off'
+      themed-omnibox: 'off'
+      valid-lang: 'off'
+      video-caption: 'off'
+      viewport: 'off'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "1.7.3-SNAPSHOT",
+  "version": "1.7.4-SNAPSHOT",
   "description": "The Open MCT core platform",
   "dependencies": {},
   "devDependencies": {
@@ -9,7 +9,7 @@
     "babel-eslint": "10.0.3",
     "comma-separated-values": "^3.6.4",
     "concurrently": "^3.6.1",
-    "copy-webpack-plugin": "^9.0.0",
+    "copy-webpack-plugin": "^4.5.2",
     "cross-env": "^6.0.3",
     "css-loader": "^1.0.0",
     "d3-array": "1.2.x",
@@ -48,19 +48,19 @@
     "karma-html-reporter": "0.2.7",
     "karma-jasmine": "3.3.1",
     "karma-sourcemap-loader": "0.3.7",
-    "karma-webpack": "^5.0.0",
+    "karma-webpack": "4.0.2",
     "location-bar": "^3.0.1",
     "lodash": "^4.17.12",
     "markdown-toc": "^0.11.7",
     "marked": "^0.3.5",
-    "mini-css-extract-plugin": "^1.6.0",
+    "mini-css-extract-plugin": "^0.4.1",
     "minimist": "^1.2.5",
     "moment": "2.25.3",
     "moment-duration-format": "^2.2.2",
     "moment-timezone": "0.5.28",
     "node-bourbon": "^4.2.3",
     "node-sass": "^4.14.1",
-    "painterro": "^1.0.35",
+    "painterro": "^1.2.56",
     "printj": "^1.2.1",
     "raw-loader": "^0.5.1",
     "request": "^2.69.0",
@@ -69,10 +69,10 @@
     "uuid": "^3.3.3",
     "v8-compile-cache": "^1.1.0",
     "vue": "2.5.6",
-    "vue-loader": "^15.9.7",
+    "vue-loader": "^15.2.6",
     "vue-template-compiler": "2.5.6",
-    "webpack": "^5.37.0",
-    "webpack-cli": "^3.3.12",
+    "webpack": "^4.16.2",
+    "webpack-cli": "^3.1.0",
     "webpack-dev-middleware": "^3.1.3",
     "webpack-hot-middleware": "^2.22.3",
     "zepto": "^1.2.0"

platform/commonUI/browse/bundle.js

@@ -24,7 +24,6 @@ define([
     "./src/navigation/NavigationService",
     "./src/navigation/NavigateAction",
     "./src/navigation/OrphanNavigationHandler",
-    "./src/windowing/NewTabAction",
     "./res/templates/browse.html",
     "./res/templates/browse-object.html",
     "./res/templates/browse/object-header.html",
@@ -37,7 +36,6 @@ define([
     NavigationService,
     NavigateAction,
     OrphanNavigationHandler,
-    NewTabAction,
     browseTemplate,
     browseObjectTemplate,
     objectHeaderTemplate,
@@ -128,23 +126,6 @@ define([
                         "depends": [
                             "navigationService"
                         ]
-                    },
-                    {
-                        "key": "window",
-                        "name": "Open In New Tab",
-                        "implementation": NewTabAction,
-                        "description": "Open in a new browser tab",
-                        "category": [
-                            "view-control",
-                            "contextual"
-                        ],
-                        "depends": [
-                            "urlService",
-                            "$window"
-                        ],
-                        "group": "windowing",
-                        "priority": 10,
-                        "cssClass": "icon-new-window"
                     }
                 ],
                 "runs": [

platform/commonUI/browse/test/windowing/NewTabActionSpec.js

@@ -1,75 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 MCT 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(
-    ["../../src/windowing/NewTabAction"],
-    function (NewTabAction) {
-
-        describe("The new tab action", function () {
-            var actionSelected,
-                actionCurrent,
-                mockWindow,
-                mockContextCurrent,
-                mockContextSelected,
-                mockUrlService;
-
-            beforeEach(function () {
-                mockWindow = jasmine.createSpyObj("$window", ["open", "location"]);
-
-                // Context if the current object is selected
-                // For example, when the top right new tab
-                // button is clicked, the user is using the
-                // current domainObject
-                mockContextCurrent = jasmine.createSpyObj("context", ["domainObject"]);
-
-                // Context if the selected object is selected
-                // For example, when an object in the left
-                // tree is opened in a new tab using the
-                // context menu
-                mockContextSelected = jasmine.createSpyObj("context", ["selectedObject",
-                    "domainObject"]);
-
-                // Mocks the urlService used to make the new tab's url from a
-                // domainObject and mode
-                mockUrlService = jasmine.createSpyObj("urlService", ["urlForNewTab"]);
-
-                // Action done using the current context or mockContextCurrent
-                actionCurrent = new NewTabAction(mockUrlService, mockWindow,
-                    mockContextCurrent);
-
-                // Action done using the selected context or mockContextSelected
-                actionSelected = new NewTabAction(mockUrlService, mockWindow,
-                    mockContextSelected);
-
-            });
-
-            it("new tab with current url is opened", function () {
-                actionCurrent.perform();
-            });
-
-            it("new tab with a selected url is opened", function () {
-                actionSelected.perform();
-            });
-
-        });
-    }
-);

platform/features/clock/bundle.js

@@ -23,13 +23,11 @@
 define([
     "moment-timezone",
     "./src/indicators/ClockIndicator",
-    "./src/indicators/FollowIndicator",
     "./src/services/TickerService",
     "./src/services/TimerService",
     "./src/controllers/ClockController",
     "./src/controllers/TimerController",
     "./src/controllers/RefreshingController",
-    "./src/actions/FollowTimerAction",
     "./src/actions/StartTimerAction",
     "./src/actions/RestartTimerAction",
     "./src/actions/StopTimerAction",
@@ -39,13 +37,11 @@ define([
 ], function (
     MomentTimezone,
     ClockIndicator,
-    FollowIndicator,
     TickerService,
     TimerService,
     ClockController,
     TimerController,
     RefreshingController,
-    FollowTimerAction,
     StartTimerAction,
     RestartTimerAction,
     StopTimerAction,
@@ -144,15 +140,6 @@ define([
                     }
                 ],
                 "actions": [
-                    {
-                        "key": "timer.follow",
-                        "implementation": FollowTimerAction,
-                        "depends": ["timerService"],
-                        "category": "contextual",
-                        "name": "Follow Timer",
-                        "cssClass": "icon-clock",
-                        "priority": "optional"
-                    },
                     {
                         "key": "timer.start",
                         "implementation": StartTimerAction,
@@ -299,10 +286,7 @@ define([
                         }
                     }
                 ],
-                "runs": [{
-                    "implementation": FollowIndicator,
-                    "depends": ["openmct", "timerService"]
-                }],
+                "runs": [],
                 "licenses": [
                     {
                         "name": "moment-duration-format",

platform/features/clock/test/actions/FollowTimerActionSpec.js

@@ -1,89 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 MCT 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([
-    "../../src/actions/FollowTimerAction"
-], function (FollowTimerAction) {
-    var TIMER_SERVICE_METHODS =
-        ['setTimer', 'getTimer', 'clearTimer', 'on', 'off'];
-
-    describe("The Follow Timer action", function () {
-        var testContext;
-        var testModel;
-        var testAdaptedObject;
-
-        beforeEach(function () {
-            testModel = {};
-            testContext = {
-                domainObject: jasmine.createSpyObj('domainObject', [
-                    'getModel',
-                    'useCapability'
-                ])
-            };
-            testAdaptedObject = { foo: 'bar' };
-            testContext.domainObject.getModel.and.returnValue(testModel);
-            testContext.domainObject.useCapability.and.callFake(function (c) {
-                return c === 'adapter' && testAdaptedObject;
-            });
-        });
-
-        it("is applicable to timers", function () {
-            testModel.type = "timer";
-            expect(FollowTimerAction.appliesTo(testContext)).toBe(true);
-        });
-
-        it("is inapplicable to non-timers", function () {
-            testModel.type = "folder";
-            expect(FollowTimerAction.appliesTo(testContext)).toBe(false);
-        });
-
-        describe("when instantiated", function () {
-            var mockTimerService;
-            var action;
-
-            beforeEach(function () {
-                mockTimerService = jasmine.createSpyObj(
-                    'timerService',
-                    TIMER_SERVICE_METHODS
-                );
-                action = new FollowTimerAction(mockTimerService, testContext);
-            });
-
-            it("does not interact with the timer service", function () {
-                TIMER_SERVICE_METHODS.forEach(function (method) {
-                    expect(mockTimerService[method]).not.toHaveBeenCalled();
-                });
-            });
-
-            describe("and performed", function () {
-                beforeEach(function () {
-                    action.perform();
-                });
-
-                it("sets the active timer", function () {
-                    expect(mockTimerService.setTimer)
-                        .toHaveBeenCalledWith(testAdaptedObject);
-                });
-            });
-        });
-    });
-});

platform/features/clock/test/indicators/FollowIndicatorSpec.js

@@ -1,96 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 MCT 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([
-    "../../src/indicators/FollowIndicator",
-    "../../src/services/TimerService",
-    "../../../../../src/MCT",
-    'zepto'
-], function (
-    FollowIndicator,
-    TimerService,
-    MCT,
-    $
-) {
-    xdescribe("The timer-following indicator", function () {
-        var timerService;
-        var openmct;
-
-        beforeEach(function () {
-            openmct = new MCT();
-            timerService = new TimerService(openmct);
-            spyOn(openmct.indicators, "add");
-        });
-
-        it("adds an indicator when installed", function () {
-            FollowIndicator(openmct, timerService);
-            expect(openmct.indicators.add).toHaveBeenCalled();
-        });
-
-        it("indicates that no timer is being followed", function () {
-            FollowIndicator(openmct, timerService);
-            var simpleIndicator = openmct.indicators.add.calls.mostRecent().args[0];
-            var element = simpleIndicator.element;
-            var text = $('.indicator-text', element).text().trim();
-            expect(text).toEqual('No timer being followed');
-        });
-
-        describe("when a timer is set", function () {
-            var testObject;
-            var simpleIndicator;
-
-            beforeEach(function () {
-                testObject = {
-                    identifier: {
-                        namespace: 'namespace',
-                        key: 'key'
-                    },
-                    name: "some timer!"
-                };
-                timerService.setTimer(testObject);
-                FollowIndicator(openmct, timerService);
-                simpleIndicator = openmct.indicators.add.calls.mostRecent().args[0];
-            });
-
-            it("displays the timer's name", function () {
-                var element = simpleIndicator.element;
-                var text = $('.indicator-text', element).text().trim();
-                expect(text).toEqual('Following timer ' + testObject.name);
-            });
-
-            it("displays the timer's name when it changes", function () {
-                var secondTimer = {
-                    identifier: {
-                        namespace: 'namespace',
-                        key: 'key2'
-                    },
-                    name: "Some other timer"
-                };
-                var element = simpleIndicator.element;
-                timerService.setTimer(secondTimer);
-                var text = $('.indicator-text', element).text().trim();
-                expect(text).toEqual('Following timer ' + secondTimer.name);
-            });
-
-        });
-    });
-});

src/MCT.js

@@ -274,6 +274,7 @@ define([
         this.install(ImageryPlugin.default());
         this.install(this.plugins.FlexibleLayout());
         this.install(this.plugins.GoToOriginalAction());
+        this.install(this.plugins.OpenInNewTabAction());
         this.install(this.plugins.ImportExport());
         this.install(this.plugins.WebPage());
         this.install(this.plugins.Condition());

src/adapter/runs/LegacyTelemetryProvider.js

@@ -161,6 +161,22 @@ define([
             evaluate: function (datum, property) {
                 return limitEvaluator.evaluate(datum, property && property.key);
             }
+
+        };
+    };
+
+    LegacyTelemetryProvider.prototype.getLimits = function (domainObject) {
+        const oldObject = this.instantiate(
+            utils.toOldFormat(domainObject),
+            utils.makeKeyString(domainObject.identifier)
+        );
+        const limitEvaluator = oldObject.getCapability("limit");
+
+        return {
+            limits: function () {
+                return limitEvaluator.limits();
+            }
+
         };
     };
 

src/adapter/services/ExportImageService.js

@@ -48,12 +48,12 @@ define(
          * Converts an HTML element into a PNG or JPG Blob.
          * @private
          * @param {node} element that will be converted to an image
-         * @param {string} type of image to convert the element to.
+         * @param {object} options Image options.
          * @returns {promise}
          */
-        ExportImageService.prototype.renderElement = function (element, imageType, className) {
+        ExportImageService.prototype.renderElement = function (element, {imageType, className, thumbnailSize}) {
+            const self = this;
             const dialogService = this.dialogService;
-
             const dialog = dialogService.showBlockingMessage({
                 title: "Capturing...",
                 hint: "Capturing an image",
@@ -90,7 +90,16 @@ define(
                 dialog.dismiss();
 
                 return new Promise(function (resolve, reject) {
-                    return canvas.toBlob(resolve, mimeType);
+                    if (thumbnailSize) {
+                        const thumbnail = self.getThumbnail(canvas, mimeType, thumbnailSize);
+
+                        return canvas.toBlob(blob => resolve({
+                            blob,
+                            thumbnail
+                        }), mimeType);
+                    }
+
+                    return canvas.toBlob(blob => resolve({ blob }), mimeType);
                 });
             }, function (error) {
                 console.log('error capturing image', error);
@@ -109,6 +118,17 @@ define(
             });
         };
 
+        ExportImageService.prototype.getThumbnail = function (canvas, mimeType, size) {
+            const thumbnailCanvas = document.createElement('canvas');
+            thumbnailCanvas.setAttribute('width', size.width);
+            thumbnailCanvas.setAttribute('height', size.height);
+            const ctx = thumbnailCanvas.getContext('2d');
+            ctx.globalCompositeOperation = "copy";
+            ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, size.width, size.height);
+
+            return thumbnailCanvas.toDataURL(mimeType);
+        };
+
         /**
          * Takes a screenshot of a DOM node and exports to JPG.
          * @param {node} element to be exported
@@ -119,9 +139,13 @@ define(
         ExportImageService.prototype.exportJPG = function (element, filename, className) {
             const processedFilename = replaceDotsWithUnderscores(filename);
 
-            return this.renderElement(element, "jpg", className).then(function (img) {
-                saveAs(img, processedFilename);
-            });
+            return this.renderElement(element, {
+                imageType: 'jpg',
+                className
+            })
+                .then(function (img) {
+                    saveAs(img.blob, processedFilename);
+                });
         };
 
         /**
@@ -134,9 +158,13 @@ define(
         ExportImageService.prototype.exportPNG = function (element, filename, className) {
             const processedFilename = replaceDotsWithUnderscores(filename);
 
-            return this.renderElement(element, "png", className).then(function (img) {
-                saveAs(img, processedFilename);
-            });
+            return this.renderElement(element, {
+                imageType: 'png',
+                className
+            })
+                .then(function (img) {
+                    saveAs(img.blob, processedFilename);
+                });
         };
 
         /**
@@ -146,8 +174,12 @@ define(
          * @returns {promise}
          */
 
-        ExportImageService.prototype.exportPNGtoSRC = function (element, className) {
-            return this.renderElement(element, "png", className);
+        ExportImageService.prototype.exportPNGtoSRC = function (element, options) {
+
+            return this.renderElement(element, {
+                imageType: 'png',
+                ...options
+            });
         };
 
         function replaceDotsWithUnderscores(filename) {

src/api/composition/CompositionCollection.js

@@ -215,12 +215,12 @@ define([
      * @memberof {module:openmct.CompositionCollection#}
      * @name load
      */
-    CompositionCollection.prototype.load = function () {
+    CompositionCollection.prototype.load = function (abortSignal) {
         this.cleanUpMutables();
 
         return this.provider.load(this.domainObject)
             .then(function (children) {
-                return Promise.all(children.map((c) => this.publicAPI.objects.get(c)));
+                return Promise.all(children.map((c) => this.publicAPI.objects.get(c, abortSignal)));
             }.bind(this))
             .then(function (childObjects) {
                 childObjects.forEach(c => this.add(c, true));

src/api/objects/ObjectAPI.js

@@ -45,6 +45,8 @@ function ObjectAPI(typeRegistry, openmct) {
     this.rootProvider = new RootObjectProvider(this.rootRegistry);
     this.cache = {};
     this.interceptorRegistry = new InterceptorRegistry();
+
+    this.SYNCHRONIZED_OBJECT_TYPES = ['notebook', 'plan'];
 }
 
 /**
@@ -404,11 +406,16 @@ ObjectAPI.prototype._toMutable = function (object) {
     let provider = this.getProvider(identifier);
 
     if (provider !== undefined
-        && provider.observe !== undefined) {
+        && provider.observe !== undefined
+        && this.SYNCHRONIZED_OBJECT_TYPES.includes(object.type)) {
         let unobserve = provider.observe(identifier, (updatedModel) => {
-            mutableObject.$refresh(updatedModel);
+            if (updatedModel.persisted > mutableObject.modified) {
+                //Don't replace with a stale model. This can happen on slow connections when multiple mutations happen
+                //in rapid succession and intermediate persistence states are returned by the observe function.
+                mutableObject.$refresh(updatedModel);
+            }
         });
-        mutableObject.$on('$destroy', () => {
+        mutableObject.$on('$_destroy', () => {
             unobserve();
         });
     }

src/api/objects/ObjectAPISpec.js

@@ -163,14 +163,22 @@ describe("The Object API", () => {
                     key: 'test-key'
                 },
                 name: 'test object',
+                type: 'notebook',
                 otherAttribute: 'other-attribute-value',
+                modified: 0,
+                persisted: 0,
                 objectAttribute: {
                     embeddedObject: {
                         embeddedKey: 'embedded-value'
                     }
                 }
             };
-            updatedTestObject = Object.assign({otherAttribute: 'changed-attribute-value'}, testObject);
+            updatedTestObject = Object.assign({
+                otherAttribute: 'changed-attribute-value'
+            }, testObject);
+            updatedTestObject.modified = 1;
+            updatedTestObject.persisted = 1;
+
             mockProvider = jasmine.createSpyObj("mock provider", [
                 "get",
                 "create",
@@ -182,6 +190,8 @@ describe("The Object API", () => {
             mockProvider.observeObjectChanges.and.callFake(() => {
                 callbacks[0](updatedTestObject);
                 callbacks.splice(0, 1);
+
+                return () => {};
             });
             mockProvider.observe.and.callFake((id, callback) => {
                 if (callbacks.length === 0) {
@@ -189,6 +199,8 @@ describe("The Object API", () => {
                 } else {
                     callbacks[0] = callback;
                 }
+
+                return () => {};
             });
 
             objectAPI.addProvider(TEST_NAMESPACE, mockProvider);

src/api/telemetry/TelemetryAPI.js

@@ -504,6 +504,26 @@ define([
         return this.getLimitEvaluator(domainObject);
     };
 
+    /**
+     * Get a limits for this domain object.
+     * Limits help you display limits and alarms of
+     * telemetry for display purposes without having to interact directly
+     * with the Limit API.
+     *
+     * This method is optional.
+     * If a provider does not implement this method, it is presumed
+     * that no limits are defined for this domain object's telemetry.
+     *
+     * @param {module:openmct.DomainObject} domainObject the domain
+     *        object for which to get limits
+     * @returns {module:openmct.TelemetryAPI~LimitEvaluator}
+     * @method limits
+     * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
+     */
+    TelemetryAPI.prototype.limitDefinition = function (domainObject) {
+        return this.getLimits(domainObject);
+    };
+
     /**
      * Get a limit evaluator for this domain object.
      * Limit Evaluators help you evaluate limit and alarm status of individual
@@ -531,5 +551,45 @@ define([
         return provider.getLimitEvaluator(domainObject);
     };
 
+    /**
+     * Get a limit definitions for this domain object.
+     * Limit Definitions help you indicate limits and alarms of
+     * telemetry for display purposes without having to interact directly
+     * with the Limit API.
+     *
+     * This method is optional.
+     * If a provider does not implement this method, it is presumed
+     * that no limits are defined for this domain object's telemetry.
+     *
+     * @param {module:openmct.DomainObject} domainObject the domain
+     *        object for which to display limits
+     * @returns {module:openmct.TelemetryAPI~LimitEvaluator}
+     * @method limits returns a limits object of
+     * type {
+     *          level1: {
+     *              low: { key1: value1, key2: value2, color: <supportedColor> },
+     *              high: { key1: value1, key2: value2, color: <supportedColor> }
+     *          },
+     *          level2: {
+     *              low: { key1: value1, key2: value2 },
+     *              high: { key1: value1, key2: value2 }
+     *          }
+     *       }
+     *  supported colors are purple, red, orange, yellow and cyan
+     * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
+     */
+    TelemetryAPI.prototype.getLimits = function (domainObject) {
+        const provider = this.findLimitEvaluator(domainObject);
+        if (!provider || !provider.getLimits) {
+            return {
+                limits: function () {
+                    return Promise.resolve(undefined);
+                }
+            };
+        }
+
+        return provider.getLimits(domainObject);
+    };
+
     return TelemetryAPI;
 });

src/plugins/CouchDBSearchFolder/pluginSpec.js

@@ -73,7 +73,7 @@ describe('the plugin', function () {
     });
 
     it('provides a folder to hold plans', () => {
-        openmct.objects.get(identifier).then((object) => {
+        return openmct.objects.get(identifier).then((object) => {
             expect(object).toEqual({
                 identifier,
                 type: 'folder',
@@ -83,7 +83,7 @@ describe('the plugin', function () {
     });
 
     it('provides composition for couch search folders', () => {
-        composition.load().then((objects) => {
+        return composition.load().then((objects) => {
             expect(objects.length).toEqual(2);
         });
     });

src/plugins/LADTable/LADTableSetViewProvider.js

@@ -43,15 +43,15 @@ export default function LADTableSetViewProvider(openmct) {
                         components: {
                             LadTableSet: LadTableSet
                         },
+                        provide: {
+                            openmct,
+                            objectPath
+                        },
                         data() {
                             return {
                                 domainObject
                             };
                         },
-                        provide: {
-                            openmct,
-                            objectPath
-                        },
                         template: '<lad-table-set :domain-object="domainObject"></lad-table-set>'
                     });
                 },

src/plugins/LADTable/pluginSpec.js

@@ -67,10 +67,6 @@ describe("The LAD Table", () => {
 
     // this setups up the app
     beforeEach((done) => {
-        const appHolder = document.createElement('div');
-        appHolder.style.width = '640px';
-        appHolder.style.height = '480px';
-
         openmct = createOpenMct();
 
         parent = document.createElement('div');
@@ -90,7 +86,7 @@ describe("The LAD Table", () => {
         });
 
         openmct.on('start', done);
-        openmct.startHeadless(appHolder);
+        openmct.startHeadless();
     });
 
     afterEach(() => {
@@ -113,7 +109,8 @@ describe("The LAD Table", () => {
 
         beforeEach(() => {
             ladTableCompositionCollection = openmct.composition.get(mockObj.ladTable);
-            ladTableCompositionCollection.load();
+
+            return ladTableCompositionCollection.load();
         });
 
         it("should accept telemetry producing objects", () => {
@@ -192,8 +189,6 @@ describe("The LAD Table", () => {
 
             await Promise.all([telemetryRequestPromise, telemetryObjectPromise, anotherTelemetryObjectPromise]);
             await Vue.nextTick();
-
-            return;
         });
 
         it("should show one row per object in the composition", () => {
@@ -242,13 +237,6 @@ describe("The LAD Table Set", () => {
     let ladPlugin;
     let parent;
     let child;
-    let telemetryCount = 3;
-    let timeFormat = 'utc';
-
-    let mockTelemetry = getMockTelemetry({
-        count: telemetryCount,
-        format: timeFormat
-    });
 
     let mockObj = getMockObjects({
         objectKeyStrings: ['ladTable', 'ladTableSet', 'telemetry']
@@ -264,31 +252,22 @@ describe("The LAD Table Set", () => {
     mockObj.ladTableSet.composition.push(mockObj.ladTable.identifier);
 
     beforeEach((done) => {
-        const appHolder = document.createElement('div');
-
-        appHolder.style.width = '640px';
-        appHolder.style.height = '480px';
-
         openmct = createOpenMct();
 
         parent = document.createElement('div');
         child = document.createElement('div');
         parent.appendChild(child);
 
-        spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([]));
-
         ladPlugin = new LadPlugin();
         openmct.install(ladPlugin);
 
-        spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
-
         openmct.time.bounds({
             start: bounds.start,
             end: bounds.end
         });
 
         openmct.on('start', done);
-        openmct.start(appHolder);
+        openmct.startHeadless();
     });
 
     afterEach(() => {
@@ -301,6 +280,8 @@ describe("The LAD Table Set", () => {
     });
 
     it("should provide a lad table set view only for lad table set objects", () => {
+        spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
+
         let applicableViews = openmct.objectViews.get(mockObj.ladTableSet, []);
 
         let ladTableSetView = applicableViews.find(
@@ -315,8 +296,11 @@ describe("The LAD Table Set", () => {
         let ladTableSetCompositionCollection;
 
         beforeEach(() => {
+            spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
+
             ladTableSetCompositionCollection = openmct.composition.get(mockObj.ladTableSet);
-            ladTableSetCompositionCollection.load();
+
+            return ladTableSetCompositionCollection.load();
         });
 
         it("should accept lad table objects", () => {
@@ -354,41 +338,17 @@ describe("The LAD Table Set", () => {
         otherObj.ladTable.composition.push(mockObj.telemetry.identifier);
         mockObj.ladTableSet.composition.push(otherObj.ladTable.identifier);
 
-        beforeEach(async () => {
-            let telemetryRequestResolve;
-            let ladObjectResolve;
-            let anotherLadObjectResolve;
+        beforeEach(() => {
+            spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([]));
 
-            let telemetryRequestPromise = new Promise((resolve) => {
-                telemetryRequestResolve = resolve;
-            });
-
-            let ladObjectPromise = new Promise((resolve) => {
-                ladObjectResolve = resolve;
-            });
-
-            let anotherLadObjectPromise = new Promise((resolve) => {
-                anotherLadObjectResolve = resolve;
-            });
-
-            openmct.telemetry.request.and.callFake(() => {
-                telemetryRequestResolve(mockTelemetry);
-
-                return telemetryRequestPromise;
-            });
-
-            openmct.objects.get.and.callFake((obj) => {
+            spyOn(openmct.objects, 'get').and.callFake((obj) => {
                 if (obj.key === 'lad-object') {
-                    ladObjectResolve(mockObj.ladObject);
-
-                    return ladObjectPromise;
+                    return Promise.resolve(mockObj.ladTable);
                 } else if (obj.key === 'another-lad-object') {
-                    anotherLadObjectResolve(otherObj.ladObject);
-
-                    return anotherLadObjectPromise;
+                    return Promise.resolve(otherObj.ladTable);
+                } else if (obj.key === 'telemetry-object') {
+                    return Promise.resolve(mockObj.telemetry);
                 }
-
-                return Promise.resolve({});
             });
 
             openmct.time.bounds({
@@ -399,20 +359,19 @@ describe("The LAD Table Set", () => {
             applicableViews = openmct.objectViews.get(mockObj.ladTableSet, []);
             ladTableSetViewProvider = applicableViews.find((viewProvider) => viewProvider.key === ladTableSetKey);
             ladTableSetView = ladTableSetViewProvider.view(mockObj.ladTableSet, [mockObj.ladTableSet]);
-            ladTableSetView.show(child, true);
+            ladTableSetView.show(child);
 
-            await Promise.all([telemetryRequestPromise, ladObjectPromise, anotherLadObjectPromise]);
-            await Vue.nextTick();
-
-            return;
+            return Vue.nextTick();
         });
 
         it("should show one row per lad table object in the composition", () => {
-            const rowCount = parent.querySelectorAll(LAD_SET_TABLE_HEADERS).length;
+            const ladTableSetCompositionCollection = openmct.composition.get(mockObj.ladTableSet);
 
-            expect(rowCount).toBe(mockObj.ladTableSet.composition.length);
-            pending();
+            return ladTableSetCompositionCollection.load().then(() => {
+                const rowCount = parent.querySelectorAll(LAD_SET_TABLE_HEADERS).length;
+
+                expect(rowCount).toBe(mockObj.ladTableSet.composition.length);
+            });
         });
     });
 });
-

src/plugins/URLIndicatorPlugin/URLIndicatorSpec.js

@@ -22,12 +22,14 @@
 
 define(
     [
+        "utils/testing",
         "./URLIndicator",
         "./URLIndicatorPlugin",
         "../../MCT",
         "zepto"
     ],
     function (
+        testingUtils,
         URLIndicator,
         URLIndicatorPlugin,
         MCT,
@@ -44,7 +46,7 @@ define(
 
             beforeEach(function () {
                 jasmine.clock().install();
-                openmct = new MCT();
+                openmct = new testingUtils.createOpenMct();
                 spyOn(openmct.indicators, 'add');
                 spyOn($, 'ajax');
                 $.ajax.and.callFake(function (options) {
@@ -55,6 +57,8 @@ define(
             afterEach(function () {
                 $.ajax = defaultAjaxFunction;
                 jasmine.clock().uninstall();
+
+                return testingUtils.resetApplicationState(openmct);
             });
 
             describe("on initialization", function () {

src/plugins/autoflow/AutoflowTabularPluginSpec.js

@@ -28,8 +28,10 @@ import {
     resetApplicationState,
     spyOnBuiltins
 } from 'utils/testing';
+import Vue from 'vue';
 
-describe("AutoflowTabularPlugin", () => {
+// TODO lots of its without expects
+xdescribe("AutoflowTabularPlugin", () => {
     let testType;
     let testObject;
     let mockmct;
@@ -51,7 +53,7 @@ describe("AutoflowTabularPlugin", () => {
     });
 
     afterEach(() => {
-        resetApplicationState(mockmct);
+        return resetApplicationState(mockmct);
     });
 
     it("installs a view provider", () => {
@@ -101,7 +103,7 @@ describe("AutoflowTabularPlugin", () => {
                 });
             }
 
-            beforeEach((done) => {
+            beforeEach(() => {
                 callbacks = {};
 
                 spyOnBuiltins(['requestAnimationFrame']);
@@ -180,7 +182,7 @@ describe("AutoflowTabularPlugin", () => {
                 view = provider.view(testObject);
                 view.show(testContainer);
 
-                return done();
+                return Vue.nextTick();
             });
 
             afterEach(() => {

src/plugins/condition/Condition.js

@@ -43,6 +43,7 @@ import {TRIGGER_CONJUNCTION, TRIGGER_LABEL} from "./utils/constants";
 * }
 */
 export default class Condition extends EventEmitter {
+
     /**
      * Manages criteria and emits the result of - true or false - based on criteria evaluated.
      * @constructor

src/plugins/condition/StyleRuleManager.js

@@ -27,15 +27,17 @@ export default class StyleRuleManager extends EventEmitter {
         super();
         this.openmct = openmct;
         this.callback = callback;
+        this.refreshData = this.refreshData.bind(this);
+        this.toggleSubscription = this.toggleSubscription.bind(this);
         if (suppressSubscriptionOnEdit) {
-            this.openmct.editor.on('isEditing', this.toggleSubscription.bind(this));
+            this.openmct.editor.on('isEditing', this.toggleSubscription);
             this.isEditing = this.openmct.editor.editing;
         }
 
         if (styleConfiguration) {
             this.initialize(styleConfiguration);
             if (styleConfiguration.conditionSetIdentifier) {
-                this.openmct.time.on("bounds", this.refreshData.bind(this));
+                this.openmct.time.on("bounds", this.refreshData);
                 this.subscribeToConditionSet();
             } else {
                 this.applyStaticStyle();

src/plugins/displayLayout/components/telemetry-view.scss

@@ -21,6 +21,10 @@
         margin-left: $interiorMargin;
     }
 
+    &__value {
+        @include isLimit();
+    }
+
     .c-frame & {
         @include abs();
         border: 1px solid transparent;

src/plugins/duplicate/DuplicateAction.js

@@ -71,7 +71,8 @@ export default class DuplicateAction {
 
     updateNameCheck(object, name) {
         if (object.name !== name) {
-            this.openmct.objects.mutate(object, 'name', name);
+            object.name = name;
+            this.openmct.objects.save(object);
         }
     }
 
@@ -95,7 +96,7 @@ export default class DuplicateAction {
                             cssClass: "l-input-lg"
                         },
                         {
-                            name: "location",
+                            name: "Location",
                             cssClass: "grows",
                             control: "locator",
                             validate: this.validate(object, parent),

src/plugins/duplicate/pluginSpec.js

@@ -121,10 +121,9 @@ describe("The Duplicate Action plugin", () => {
 
     describe("when moving an object to a new parent", () => {
 
-        beforeEach(async (done) => {
+        beforeEach(async () => {
             duplicateTask = new DuplicateTask(openmct);
             await duplicateTask.duplicate(parentObject, anotherParentObject);
-            done();
         });
 
         it("the duplicate child object's name (when not changing) should be the same as the original object", async () => {
@@ -143,15 +142,15 @@ describe("The Duplicate Action plugin", () => {
     });
 
     describe("when a new name is provided for the duplicated object", () => {
-        const NEW_NAME = 'New Name';
+        it("the name is updated", () => {
+            const NEW_NAME = 'New Name';
+            let childName;
 
-        beforeEach(() => {
             duplicateTask = new DuplicateAction(openmct);
             duplicateTask.updateNameCheck(parentObject, NEW_NAME);
-        });
 
-        it("the name is updated", () => {
-            let childName = parentObject.name;
+            childName = parentObject.name;
+
             expect(childName).toEqual(NEW_NAME);
         });
     });

src/plugins/folderView/components/grid-view.scss

@@ -19,6 +19,10 @@
             margin: 0 $interiorMargin $interiorMargin 0;
         }
     }
+
+    body.mobile & {
+        flex: 1 0 auto;
+    }
 }
 
 /******************************* GRID ITEMS */

src/plugins/goToOriginalAction/pluginSpec.js

@@ -24,10 +24,15 @@ import {
     resetApplicationState
 } from 'utils/testing';
 
-describe("the plugin", () => {
+describe("the goToOriginalAction plugin", () => {
     let openmct;
-    let goToFolderAction;
+    let goToOriginalAction;
+    let mockRootFolder;
+    let mockSubFolder;
+    let mockSubSubFolder;
+    let mockObject;
     let mockObjectPath;
+    let hash;
 
     beforeEach((done) => {
         openmct = createOpenMct();
@@ -35,7 +40,7 @@ describe("the plugin", () => {
         openmct.on('start', done);
         openmct.startHeadless();
 
-        goToFolderAction = openmct.actions._allActions.goToOriginal;
+        goToOriginalAction = openmct.actions._allActions.goToOriginal;
     });
 
     afterEach(() => {
@@ -43,34 +48,153 @@ describe("the plugin", () => {
     });
 
     it('installs the go to folder action', () => {
-        expect(goToFolderAction).toBeDefined();
+        expect(goToOriginalAction).toBeDefined();
     });
 
     describe('when invoked', () => {
         beforeEach(() => {
-            mockObjectPath = [{
-                name: 'mock folder',
-                type: 'folder',
-                identifier: {
-                    key: 'mock-folder',
-                    namespace: ''
-                }
-            }];
-            spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({
-                identifier: {
-                    namespace: '',
-                    key: 'test'
-                }
-            }));
+            mockRootFolder = getMockObject('mock-root');
+            mockSubFolder = getMockObject('mock-sub');
+            mockSubSubFolder = getMockObject('mock-sub-sub');
+            mockObject = getMockObject('mock-table');
 
-            goToFolderAction.invoke(mockObjectPath);
+            mockObjectPath = [
+                mockObject,
+                mockSubSubFolder,
+                mockSubFolder,
+                mockRootFolder
+            ];
+
+            spyOn(openmct.objects, 'get').and.callFake(identifier => {
+                const mockedObject = getMockObject(identifier);
+
+                return Promise.resolve(mockedObject);
+            });
+
+            spyOn(openmct.router, 'navigate').and.callFake(navigateTo => {
+                hash = navigateTo;
+            });
+
+            return goToOriginalAction.invoke(mockObjectPath);
         });
 
-        it('goes to the original location', (done) => {
-            setTimeout(() => {
-                expect(window.location.href).toContain('context.html#/browse/?tc.mode=fixed&tc.startBound=0&tc.endBound=1&tc.timeSystem=utc');
-                done();
-            }, 2500);
+        it('goes to the original location', () => {
+            const originalLocationHash = '#/browse/mock-root/mock-table';
+
+            return waitForNavigation(() => {
+                return hash === originalLocationHash;
+            }).then(() => {
+                expect(hash).toEqual(originalLocationHash);
+            });
         });
     });
+
+    function waitForNavigation(navigated) {
+        return new Promise((resolve, reject) => {
+            const start = Date.now();
+
+            checkNavigated();
+
+            function checkNavigated() {
+                const elapsed = Date.now() - start;
+
+                if (navigated()) {
+                    resolve();
+                } else if (elapsed >= jasmine.DEFAULT_TIMEOUT_INTERVAL - 1000) {
+                    reject("didn't navigate in time");
+                } else {
+                    setTimeout(checkNavigated);
+                }
+            }
+        });
+    }
+
+    function getMockObject(key) {
+        const id = typeof key === 'string' ? key : key.key;
+
+        const mockMCTObjects = {
+            "ROOT": {
+                "composition": [
+                    {
+                        "namespace": "",
+                        "key": "mock-root"
+                    }
+                ],
+                "identifier": {
+                    "namespace": "",
+                    "key": "mock-root"
+                }
+            },
+            "mock-root": {
+                "composition": [
+                    {
+                        "namespace": "",
+                        "key": "mock-sub"
+                    },
+                    {
+                        "namespace": "",
+                        "key": "mock-table"
+                    }
+                ],
+                "name": "root",
+                "type": "folder",
+                "id": "mock-root",
+                "location": "ROOT",
+                "identifier": {
+                    "namespace": "",
+                    "key": "mock-root"
+                }
+            },
+            "mock-sub": {
+                "composition": [
+                    {
+                        "namespace": "",
+                        "key": "mock-sub-sub"
+                    },
+                    {
+                        "namespace": "",
+                        "key": "mock-table"
+                    }
+                ],
+                "name": "sub",
+                "type": "folder",
+                "location": "mock-root",
+                "identifier": {
+                    "namespace": "",
+                    "key": "mock-sub"
+                }
+            },
+            "mock-table": {
+                "composition": [],
+                "configuration": {
+                    "columnWidths": {},
+                    "hiddenColumns": {}
+                },
+                "name": "table",
+                "type": "table",
+                "location": "mock-root",
+                "identifier": {
+                    "namespace": "",
+                    "key": "mock-table"
+                }
+            },
+            "mock-sub-sub": {
+                "composition": [
+                    {
+                        "namespace": "",
+                        "key": "mock-table"
+                    }
+                ],
+                "name": "sub sub",
+                "type": "folder",
+                "location": "mock-sub",
+                "identifier": {
+                    "namespace": "",
+                    "key": "mock-sub-sub"
+                }
+            }
+        };
+
+        return mockMCTObjects[id];
+    }
 });

src/plugins/imagery/components/Compass/Compass.vue

@@ -32,7 +32,7 @@
         :camera-pan="cameraPan"
     />
     <CompassRose
-        v-if="true"
+        v-if="hasCameraFieldOfView"
         :heading="heading"
         :sized-image-width="sizedImageDimensions.width"
         :sun-heading="sunHeading"

src/plugins/interceptors/pluginSpec.js

@@ -30,10 +30,6 @@ describe('the plugin', function () {
     const TEST_NAMESPACE = 'test';
 
     beforeEach((done) => {
-        const appHolder = document.createElement('div');
-        appHolder.style.width = '640px';
-        appHolder.style.height = '480px';
-
         openmct = createOpenMct();
         openmct.install(new InterceptorPlugin(openmct));
 
@@ -46,7 +42,7 @@ describe('the plugin', function () {
         element.appendChild(child);
 
         openmct.on('start', done);
-        openmct.startHeadless(appHolder);
+        openmct.startHeadless();
     });
 
     afterEach(() => {
@@ -55,6 +51,7 @@ describe('the plugin', function () {
 
     describe('the missingObjectInterceptor', () => {
         let mockProvider;
+
         beforeEach(() => {
             mockProvider = jasmine.createSpyObj("mock provider", [
                 "get"
@@ -63,27 +60,28 @@ describe('the plugin', function () {
             openmct.objects.addProvider(TEST_NAMESPACE, mockProvider);
         });
 
-        it('returns missing objects', (done) => {
+        it('returns missing objects', () => {
             const identifier = {
                 namespace: TEST_NAMESPACE,
                 key: 'hello'
             };
-            openmct.objects.get(identifier).then((testObject) => {
+
+            return openmct.objects.get(identifier).then((testObject) => {
                 expect(testObject).toEqual({
                     identifier,
                     type: 'unknown',
                     name: 'Missing: test:hello'
                 });
-                done();
             });
         });
 
-        it('returns the My items object if not found', (done) => {
+        it('returns the My items object if not found', () => {
             const identifier = {
                 namespace: TEST_NAMESPACE,
                 key: 'mine'
             };
-            openmct.objects.get(identifier).then((testObject) => {
+
+            return openmct.objects.get(identifier).then((testObject) => {
                 expect(testObject).toEqual({
                     identifier,
                     "name": "My Items",
@@ -91,7 +89,6 @@ describe('the plugin', function () {
                     "composition": [],
                     "location": "ROOT"
                 });
-                done();
             });
         });
 

src/plugins/move/MoveAction.js

@@ -37,7 +37,14 @@ export default class MoveAction {
         let oldParent = objectPath[1];
         let dialogService = this.openmct.$injector.get('dialogService');
         let dialogForm = this.getDialogForm(object, oldParent);
-        let userInput = await dialogService.getUserInput(dialogForm, { name: object.name });
+        let userInput;
+
+        try {
+            userInput = await dialogService.getUserInput(dialogForm, { name: object.name });
+        } catch (err) {
+            // user canceled, most likely
+            return;
+        }
 
         // if we need to update name
         if (object.name !== userInput.name) {
@@ -104,13 +111,13 @@ export default class MoveAction {
                         {
                             key: "name",
                             control: "textfield",
-                            name: "Folder Name",
+                            name: "Name",
                             pattern: "\\S+",
                             required: true,
                             cssClass: "l-input-lg"
                         },
                         {
-                            name: "location",
+                            name: "Location",
                             control: "locator",
                             validate: this.validate(object, parent),
                             key: 'location'

src/plugins/move/pluginSpec.js

@@ -19,8 +19,6 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import MoveActionPlugin from './plugin.js';
-import MoveAction from './MoveAction.js';
 import {
     createOpenMct,
     resetApplicationState,
@@ -37,10 +35,6 @@ describe("The Move Action plugin", () => {
 
     // this setups up the app
     beforeEach((done) => {
-        const appHolder = document.createElement('div');
-        appHolder.style.width = '640px';
-        appHolder.style.height = '480px';
-
         openmct = createOpenMct();
 
         childObject = getMockObjects({
@@ -73,11 +67,10 @@ describe("The Move Action plugin", () => {
             }
         }).folder;
 
-        // already installed by default, but never hurts, just adds to context menu
-        openmct.install(MoveActionPlugin());
-
         openmct.on('start', done);
-        openmct.startHeadless(appHolder);
+        openmct.startHeadless();
+
+        moveAction = openmct.actions._allActions.move;
     });
 
     afterEach(() => {
@@ -85,13 +78,12 @@ describe("The Move Action plugin", () => {
     });
 
     it("should be defined", () => {
-        expect(MoveActionPlugin).toBeDefined();
+        expect(moveAction).toBeDefined();
     });
 
     describe("when moving an object to a new parent and removing from the old parent", () => {
 
         beforeEach(() => {
-            moveAction = new MoveAction(openmct);
             moveAction.addToNewParent(childObject, anotherParentObject);
             moveAction.removeFromOldParent(parentObject, childObject);
         });

src/plugins/newFolderAction/pluginSpec.js

@@ -79,7 +79,7 @@ describe("the plugin", () => {
             spyOn(compositionAPI, 'get').and.returnValue(mockComposition);
             spyOn(openmct.objects, 'save').and.returnValue(Promise.resolve(true));
 
-            newFolderAction.invoke(mockObjectPath);
+            return newFolderAction.invoke(mockObjectPath);
         });
 
         it('gets user input for folder name', () => {

src/plugins/notebook/components/Notebook.vue

@@ -31,7 +31,7 @@
     </div>
     <SearchResults v-if="search.length"
                    ref="searchResults"
-                   :domain-object="internalDomainObject"
+                   :domain-object="domainObject"
                    :results="searchResults"
                    @changeSectionPage="changeSelectedSection"
                    @updateEntries="updateEntries"
@@ -43,15 +43,18 @@
                  class="c-notebook__nav c-sidebar c-drawer c-drawer--align-left"
                  :class="[{'is-expanded': showNav}, {'c-drawer--push': !sidebarCoversEntries}, {'c-drawer--overlays': sidebarCoversEntries}]"
                  :default-page-id="defaultPageId"
+                 :selected-page-id="selectedPageId"
                  :default-section-id="defaultSectionId"
-                 :domain-object="internalDomainObject"
-                 :page-title="internalDomainObject.configuration.pageTitle"
-                 :section-title="internalDomainObject.configuration.sectionTitle"
+                 :selected-section-id="selectedSectionId"
+                 :domain-object="domainObject"
+                 :page-title="domainObject.configuration.pageTitle"
+                 :section-title="domainObject.configuration.sectionTitle"
                  :sections="sections"
-                 :selected-section="selectedSection"
                  :sidebar-covers-entries="sidebarCoversEntries"
                  @pagesChanged="pagesChanged"
+                 @selectPage="selectPage"
                  @sectionsChanged="sectionsChanged"
+                 @selectSection="selectSection"
                  @toggleNav="toggleNav"
         />
         <div class="c-notebook__page-view">
@@ -61,10 +64,10 @@
                 ></button>
                 <div class="c-notebook__page-view__path c-path">
                     <span class="c-notebook__path__section c-path__item">
-                        {{ getSelectedSection() ? getSelectedSection().name : '' }}
+                        {{ selectedSection ? selectedSection.name : '' }}
                     </span>
                     <span class="c-notebook__path__page c-path__item">
-                        {{ getSelectedPage() ? getSelectedPage().name : '' }}
+                        {{ selectedPage ? selectedPage.name : '' }}
                     </span>
                 </div>
                 <div class="c-notebook__page-view__controls">
@@ -115,9 +118,9 @@
                 <NotebookEntry v-for="entry in filteredAndSortedEntries"
                                :key="entry.id"
                                :entry="entry"
-                               :domain-object="internalDomainObject"
-                               :selected-page="getSelectedPage()"
-                               :selected-section="getSelectedSection()"
+                               :domain-object="domainObject"
+                               :selected-page="selectedPage"
+                               :selected-section="selectedSection"
                                :read-only="false"
                                @deleteEntry="deleteEntry"
                                @updateEntry="updateEntry"
@@ -152,14 +155,19 @@ export default {
         SearchResults,
         Sidebar
     },
-    inject: ['openmct', 'domainObject', 'snapshotContainer'],
+    inject: ['openmct', 'snapshotContainer'],
+    props: {
+        domainObject: {
+            type: Object,
+            required: true
+        }
+    },
     data() {
         return {
-            defaultPageId: getDefaultNotebook() ? getDefaultNotebook().page.id : '',
-            defaultSectionId: getDefaultNotebook() ? getDefaultNotebook().section.id : '',
+            selectedSectionId: this.getDefaultSectionId(),
+            selectedPageId: this.getDefaultPageId(),
             defaultSort: this.domainObject.configuration.defaultSort,
             focusEntryId: null,
-            internalDomainObject: this.domainObject,
             search: '',
             searchResults: [],
             showTime: 0,
@@ -168,9 +176,15 @@ export default {
         };
     },
     computed: {
+        defaultPageId() {
+            return this.getDefaultPageId();
+        },
+        defaultSectionId() {
+            return this.getDefaultSectionId();
+        },
         filteredAndSortedEntries() {
             const filterTime = Date.now();
-            const pageEntries = getNotebookEntries(this.internalDomainObject, this.selectedSection, this.selectedPage) || [];
+            const pageEntries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage) || [];
 
             const hours = parseInt(this.showTime, 10);
             const filteredPageEntriesByTime = hours
@@ -185,22 +199,28 @@ export default {
             return this.getPages() || [];
         },
         sections() {
-            return this.internalDomainObject.configuration.sections || [];
+            return this.getSections();
         },
         selectedPage() {
             const pages = this.getPages();
-            if (!pages) {
-                return {};
+            const selectedPage = pages.find(page => page.id === this.selectedPageId);
+
+            if (selectedPage) {
+                return selectedPage;
             }
 
-            return pages.find(page => page.isSelected);
+            if (!selectedPage && !pages.length) {
+                return undefined;
+            }
+
+            return pages[0];
         },
         selectedSection() {
             if (!this.sections.length) {
-                return {};
+                return null;
             }
 
-            return this.sections.find(section => section.isSelected);
+            return this.sections.find(section => section.id === this.selectedSectionId);
         }
     },
     watch: {
@@ -210,16 +230,14 @@ export default {
     },
     beforeMount() {
         this.getSearchResults = debounce(this.getSearchResults, 500);
+        this.syncUrlWithPageAndSection = debounce(this.syncUrlWithPageAndSection, 100);
     },
     mounted() {
-        this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
         this.formatSidebar();
+        this.setSectionAndPageFromUrl();
 
         window.addEventListener('orientationchange', this.formatSidebar);
-        window.addEventListener("hashchange", this.navigateToSectionPage, false);
-        this.openmct.router.on('change:params', this.changeSectionPage);
-
-        this.navigateToSectionPage();
+        window.addEventListener('hashchange', this.setSectionAndPageFromUrl);
     },
     beforeDestroy() {
         if (this.unlisten) {
@@ -227,8 +245,7 @@ export default {
         }
 
         window.removeEventListener('orientationchange', this.formatSidebar);
-        window.removeEventListener("hashchange", this.navigateToSectionPage);
-        this.openmct.router.off('change:params', this.changeSectionPage);
+        window.removeEventListener('hashchange', this.setSectionAndPageFromUrl);
     },
     updated: function () {
         this.$nextTick(() => {
@@ -284,14 +301,21 @@ export default {
             this.sectionsChanged({ sections });
             this.resetSearch();
         },
+        setSectionAndPageFromUrl() {
+            let sectionId = this.getSectionIdFromUrl() || this.selectedSectionId;
+            let pageId = this.getPageIdFromUrl() || this.selectedPageId;
+
+            this.selectSection(sectionId);
+            this.selectPage(pageId);
+        },
         createNotebookStorageObject() {
             const notebookMeta = {
-                name: this.internalDomainObject.name,
-                identifier: this.internalDomainObject.identifier,
+                name: this.domainObject.name,
+                identifier: this.domainObject.identifier,
                 link: this.getLinktoNotebook()
             };
-            const page = this.getSelectedPage();
-            const section = this.getSelectedSection();
+            const page = this.selectedPage;
+            const section = this.selectedSection;
 
             return {
                 notebookMeta,
@@ -300,8 +324,7 @@ export default {
             };
         },
         deleteEntry(entryId) {
-            const self = this;
-            const entryPos = getEntryPosById(entryId, this.internalDomainObject, this.selectedSection, this.selectedPage);
+            const entryPos = getEntryPosById(entryId, this.domainObject, this.selectedSection, this.selectedPage);
             if (entryPos === -1) {
                 this.openmct.notifications.alert('Warning: unable to delete entry');
                 console.error(`unable to delete entry ${entryId} from section ${this.selectedSection}, page ${this.selectedPage}`);
@@ -317,9 +340,9 @@ export default {
                         label: "Ok",
                         emphasis: true,
                         callback: () => {
-                            const entries = getNotebookEntries(self.internalDomainObject, self.selectedSection, self.selectedPage);
+                            const entries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage);
                             entries.splice(entryPos, 1);
-                            self.updateEntries(entries);
+                            this.updateEntries(entries);
                             dialog.dismiss();
                         }
                     },
@@ -395,6 +418,37 @@ export default {
             const sidebarCoversEntries = (isPhone || (isTablet && isPortrait) || isInLayout);
             this.sidebarCoversEntries = sidebarCoversEntries;
         },
+        getDefaultPageId() {
+            let defaultPageId;
+
+            if (this.isDefaultNotebook()) {
+                defaultPageId = getDefaultNotebook().page.id;
+            } else {
+                const firstSection = this.getSections()[0];
+                defaultPageId = firstSection && firstSection.pages[0].id;
+            }
+
+            return defaultPageId;
+        },
+        isDefaultNotebook() {
+            const defaultNotebook = getDefaultNotebook();
+            const defaultNotebookIdentifier = defaultNotebook && defaultNotebook.notebookMeta.identifier;
+
+            return defaultNotebookIdentifier !== null
+                && this.openmct.objects.areIdsEqual(defaultNotebookIdentifier, this.domainObject.identifier);
+        },
+        getDefaultSectionId() {
+            let defaultSectionId;
+
+            if (this.isDefaultNotebook()) {
+                defaultSectionId = getDefaultNotebook().section.id;
+            } else {
+                const firstSection = this.getSections()[0];
+                defaultSectionId = firstSection && firstSection.id;
+            }
+
+            return defaultSectionId;
+        },
         getDefaultNotebookObject() {
             const oldNotebookStorage = getDefaultNotebook();
             if (!oldNotebookStorage) {
@@ -423,14 +477,17 @@ export default {
         getSection(id) {
             return this.sections.find(s => s.id === id);
         },
+        getSections() {
+            return this.domainObject.configuration.sections || [];
+        },
         getSearchResults() {
             if (!this.search.length) {
                 return [];
             }
 
             const output = [];
-            const sections = this.internalDomainObject.configuration.sections;
-            const entries = this.internalDomainObject.configuration.entries;
+            const sections = this.domainObject.configuration.sections;
+            const entries = this.domainObject.configuration.entries;
             const searchTextLower = this.search.toLowerCase();
             const originalSearchText = this.search;
             let sectionTrackPageHit;
@@ -509,77 +566,25 @@ export default {
             this.searchResults = output;
         },
         getPages() {
-            const selectedSection = this.getSelectedSection();
+            const selectedSection = this.selectedSection;
             if (!selectedSection || !selectedSection.pages.length) {
                 return [];
             }
 
             return selectedSection.pages;
         },
-        getSelectedPage() {
-            const pages = this.getPages();
-            if (!pages) {
-                return null;
-            }
-
-            const selectedPage = pages.find(page => page.isSelected);
-            if (selectedPage) {
-                return selectedPage;
-            }
-
-            if (!selectedPage && !pages.length) {
-                return null;
-            }
-
-            pages[0].isSelected = true;
-
-            return pages[0];
-        },
-        getSelectedSection() {
-            if (!this.sections.length) {
-                return null;
-            }
-
-            return this.sections.find(section => section.isSelected);
-        },
-        navigateToSectionPage() {
-            let { pageId, sectionId } = this.openmct.router.getParams();
-
-            if (!pageId || !sectionId) {
-                sectionId = this.selectedSection.id;
-                pageId = this.selectedPage.id;
-            }
-
-            const sections = this.sections.map(s => {
-                s.isSelected = false;
-                if (s.id === sectionId) {
-                    s.isSelected = true;
-                    s.pages.forEach(p => p.isSelected = (p.id === pageId));
-                }
-
-                return s;
-            });
-
-            const selectedSectionId = this.selectedSection && this.selectedSection.id;
-            const selectedPageId = this.selectedPage && this.selectedPage.id;
-            if (selectedPageId === pageId && selectedSectionId === sectionId) {
-                return;
-            }
-
-            this.sectionsChanged({ sections });
-        },
         newEntry(embed = null) {
             this.resetSearch();
             const notebookStorage = this.createNotebookStorageObject();
             this.updateDefaultNotebook(notebookStorage);
-            const id = addNotebookEntry(this.openmct, this.internalDomainObject, notebookStorage, embed);
+            const id = addNotebookEntry(this.openmct, this.domainObject, notebookStorage, embed);
             this.focusEntryId = id;
         },
         orientationChange() {
             this.formatSidebar();
         },
         pagesChanged({ pages = [], id = null}) {
-            const selectedSection = this.getSelectedSection();
+            const selectedSection = this.selectedSection;
             if (!selectedSection) {
                 return;
             }
@@ -594,7 +599,6 @@ export default {
             });
 
             this.sectionsChanged({ sections });
-            this.updateDefaultNotebookPage(pages, id);
         },
         removeDefaultClass(domainObject) {
             if (!domainObject) {
@@ -613,10 +617,10 @@ export default {
         async updateDefaultNotebook(notebookStorage) {
             const defaultNotebookObject = await this.getDefaultNotebookObject();
             if (!defaultNotebookObject) {
-                setDefaultNotebook(this.openmct, notebookStorage, this.internalDomainObject);
+                setDefaultNotebook(this.openmct, notebookStorage, this.domainObject);
             } else if (objectUtils.makeKeyString(defaultNotebookObject.identifier) !== objectUtils.makeKeyString(notebookStorage.notebookMeta.identifier)) {
                 this.removeDefaultClass(defaultNotebookObject);
-                setDefaultNotebook(this.openmct, notebookStorage, this.internalDomainObject);
+                setDefaultNotebook(this.openmct, notebookStorage, this.domainObject);
             }
 
             if (this.defaultSectionId && this.defaultSectionId.length === 0 || this.defaultSectionId !== notebookStorage.section.id) {
@@ -636,7 +640,7 @@ export default {
 
             const notebookStorage = getDefaultNotebook();
             if (!notebookStorage
-                    || notebookStorage.notebookMeta.identifier.key !== this.internalDomainObject.identifier.key) {
+                    || notebookStorage.notebookMeta.identifier.key !== this.domainObject.identifier.key) {
                 return;
             }
 
@@ -645,7 +649,7 @@ export default {
             if (!page && defaultNotebookPage.id === id) {
                 this.defaultSectionId = null;
                 this.defaultPageId = null;
-                this.removeDefaultClass(this.internalDomainObject);
+                this.removeDefaultClass(this.domainObject);
                 clearDefaultNotebook();
 
                 return;
@@ -664,7 +668,7 @@ export default {
 
             const notebookStorage = getDefaultNotebook();
             if (!notebookStorage
-                    || notebookStorage.notebookMeta.identifier.key !== this.internalDomainObject.identifier.key) {
+                    || notebookStorage.notebookMeta.identifier.key !== this.domainObject.identifier.key) {
                 return;
             }
 
@@ -673,7 +677,7 @@ export default {
             if (!section && defaultNotebookSection.id === id) {
                 this.defaultSectionId = null;
                 this.defaultPageId = null;
-                this.removeDefaultClass(this.internalDomainObject);
+                this.removeDefaultClass(this.domainObject);
                 clearDefaultNotebook();
 
                 return;
@@ -686,50 +690,46 @@ export default {
             setDefaultNotebookSection(section);
         },
         updateEntry(entry) {
-            const entries = getNotebookEntries(this.internalDomainObject, this.selectedSection, this.selectedPage);
-            const entryPos = getEntryPosById(entry.id, this.internalDomainObject, this.selectedSection, this.selectedPage);
+            const entries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage);
+            const entryPos = getEntryPosById(entry.id, this.domainObject, this.selectedSection, this.selectedPage);
             entries[entryPos] = entry;
 
             this.updateEntries(entries);
         },
         updateEntries(entries) {
-            const configuration = this.internalDomainObject.configuration;
+            const configuration = this.domainObject.configuration;
             const notebookEntries = configuration.entries || {};
             notebookEntries[this.selectedSection.id][this.selectedPage.id] = entries;
 
-            mutateObject(this.openmct, this.internalDomainObject, 'configuration.entries', notebookEntries);
+            mutateObject(this.openmct, this.domainObject, 'configuration.entries', notebookEntries);
         },
-        updateInternalDomainObject(domainObject) {
-            this.internalDomainObject = domainObject;
+        getPageIdFromUrl() {
+            return this.openmct.router.getParams().pageId;
         },
-        updateParams(sections) {
-            const selectedSection = sections.find(s => s.isSelected);
-            if (!selectedSection) {
-                return;
-            }
-
-            const selectedPage = selectedSection.pages.find(p => p.isSelected);
-            if (!selectedPage) {
-                return;
-            }
-
-            const sectionId = selectedSection.id;
-            const pageId = selectedPage.id;
-
-            if (!sectionId || !pageId) {
-                return;
-            }
-
+        getSectionIdFromUrl() {
+            return this.openmct.router.getParams().sectionId;
+        },
+        syncUrlWithPageAndSection() {
             this.openmct.router.updateParams({
-                sectionId,
-                pageId
+                pageId: this.selectedPageId,
+                sectionId: this.selectedSectionId
             });
         },
         sectionsChanged({ sections, id = null }) {
-            mutateObject(this.openmct, this.internalDomainObject, 'configuration.sections', sections);
-
-            this.updateParams(sections);
+            mutateObject(this.openmct, this.domainObject, 'configuration.sections', sections);
             this.updateDefaultNotebookSection(sections, id);
+        },
+        selectPage(pageId) {
+            this.selectedPageId = pageId;
+            this.syncUrlWithPageAndSection();
+        },
+        selectSection(sectionId) {
+            this.selectedSectionId = sectionId;
+
+            const defaultPageId = this.selectedSection.pages[0].id;
+            this.selectPage(defaultPageId);
+
+            this.syncUrlWithPageAndSection();
         }
     }
 };

src/plugins/notebook/components/NotebookEmbed.vue

@@ -4,7 +4,7 @@
          class="c-ne__embed__snap-thumb"
          @click="openSnapshot()"
     >
-        <img :src="embed.snapshot.src">
+        <img :src="thumbnailImage">
     </div>
     <div class="c-ne__embed__info">
         <div class="c-ne__embed__name">
@@ -25,11 +25,14 @@
 
 <script>
 import Moment from 'moment';
-import PopupMenu from './PopupMenu.vue';
 import PreviewAction from '../../../ui/preview/PreviewAction';
 import RemoveDialog from '../utils/removeDialog';
 import PainterroInstance from '../utils/painterroInstance';
 import SnapshotTemplate from './snapshot-template.html';
+
+import { updateNotebookImageDomainObject } from '../utils/notebook-image';
+
+import PopupMenu from './PopupMenu.vue';
 import Vue from 'vue';
 
 export default {
@@ -59,6 +62,11 @@ export default {
     computed: {
         createdOn() {
             return this.formatTime(this.embed.createdOn, 'YYYY-MM-DD HH:mm:ss');
+        },
+        thumbnailImage() {
+            return this.embed.snapshot.thumbnailImage
+                ? this.embed.snapshot.thumbnailImage.src
+                : this.embed.snapshot.src;
         }
     },
     mounted() {
@@ -85,7 +93,7 @@ export default {
                 template: '<div id="snap-annotation"></div>'
             }).$mount();
 
-            const painterroInstance = new PainterroInstance(annotateVue.$el, this.updateSnapshot);
+            const painterroInstance = new PainterroInstance(annotateVue.$el);
             const annotateOverlay = this.openmct.overlays.overlay({
                 element: annotateVue.$el,
                 size: 'large',
@@ -102,10 +110,12 @@ export default {
                     {
                         label: 'Save',
                         callback: () => {
-                            painterroInstance.save();
-                            annotateOverlay.dismiss();
-                            this.snapshotOverlay.dismiss();
-                            this.openSnapshot();
+                            painterroInstance.save((snapshotObject) => {
+                                annotateOverlay.dismiss();
+                                this.snapshotOverlay.dismiss();
+                                this.updateSnapshot(snapshotObject);
+                                this.openSnapshotOverlay(snapshotObject.fullSizeImage.src);
+                            });
                         }
                     }
                 ],
@@ -115,7 +125,19 @@ export default {
             });
 
             painterroInstance.intialize();
-            painterroInstance.show(this.embed.snapshot.src);
+
+            const fullSizeImageObjectIdentifier = this.embed.snapshot.fullSizeImageObjectIdentifier;
+            if (!fullSizeImageObjectIdentifier) {
+                // legacy image data stored in embed
+                painterroInstance.show(this.embed.snapshot.src);
+
+                return;
+            }
+
+            this.openmct.objects.get(fullSizeImageObjectIdentifier)
+                .then(object => {
+                    painterroInstance.show(object.configuration.fullSizeImageURL);
+                });
         },
         changeLocation() {
             const hash = this.embed.historicLink;
@@ -159,12 +181,29 @@ export default {
             removeDialog.show();
         },
         openSnapshot() {
+            const fullSizeImageObjectIdentifier = this.embed.snapshot.fullSizeImageObjectIdentifier;
+            if (!fullSizeImageObjectIdentifier) {
+                // legacy image data stored in embed
+                this.openSnapshotOverlay(this.embed.snapshot.src);
+
+                return;
+            }
+
+            this.openmct.objects.get(fullSizeImageObjectIdentifier)
+                .then(object => {
+                    this.openSnapshotOverlay(object.configuration.fullSizeImageURL);
+                });
+        },
+        openSnapshotOverlay(src) {
             const self = this;
+
             this.snapshot = new Vue({
                 data: () => {
                     return {
                         createdOn: this.createdOn,
-                        embed: this.embed
+                        name: this.embed.name,
+                        cssClass: this.embed.cssClass,
+                        src
                     };
                 },
                 methods: {
@@ -217,7 +256,9 @@ export default {
             this.$emit('updateEmbed', embed);
         },
         updateSnapshot(snapshotObject) {
-            this.embed.snapshot = snapshotObject;
+            this.embed.snapshot.thumbnailImage = snapshotObject.thumbnailImage;
+
+            updateNotebookImageDomainObject(this.openmct, this.embed.snapshot.fullSizeImageObjectIdentifier, snapshotObject.fullSizeImage);
             this.updateEmbed(this.embed);
         }
     }

src/plugins/notebook/components/NotebookEntry.vue

@@ -62,7 +62,6 @@
                 <NotebookEmbed v-for="embed in entry.embeds"
                                :key="embed.id"
                                :embed="embed"
-                               :entry="entry"
                                @removeEmbed="removeEmbed"
                                @updateEmbed="updateEmbed"
                 />
@@ -254,6 +253,7 @@ export default {
         },
         removeEmbed(id) {
             const embedPosition = this.findPositionInArray(this.entry.embeds, id);
+            // TODO: remove notebook snapshot object using object remove API
             this.entry.embeds.splice(embedPosition, 1);
 
             this.$emit('updateEntry', this.entry);

src/plugins/notebook/components/PageCollection.vue

@@ -6,6 +6,7 @@
     >
         <Page ref="pageComponent"
               :default-page-id="defaultPageId"
+              :selected-page-id="selectedPageId"
               :page="page"
               :page-title="pageTitle"
               @deletePage="deletePage"
@@ -33,11 +34,13 @@ export default {
                 return '';
             }
         },
+        selectedPageId: {
+            type: String,
+            required: true
+        },
         domainObject: {
             type: Object,
-            default() {
-                return {};
-            }
+            required: true
         },
         pages: {
             type: Array,
@@ -66,7 +69,17 @@ export default {
             }
         }
     },
+    watch: {
+        pages() {
+            if (!this.containsPage(this.selectedPageId)) {
+                this.selectPage(this.pages[0].id);
+            }
+        }
+    },
     methods: {
+        containsPage(pageId) {
+            return this.pages.some(page => page.id === pageId);
+        },
         deletePage(id) {
             const selectedSection = this.sections.find(s => s.isSelected);
             const page = this.pages.find(p => p.id === id);
@@ -78,37 +91,29 @@ export default {
             const isPageSelected = selectedPage && selectedPage.id === id;
             const isPageDefault = defaultpage && defaultpage.id === id;
             const pages = this.pages.filter(s => s.id !== id);
+            let selectedPageId;
 
             if (isPageSelected && defaultpage) {
                 pages.forEach(s => {
                     s.isSelected = false;
                     if (defaultpage && defaultpage.id === s.id) {
-                        s.isSelected = true;
+                        selectedPageId = s.id;
                     }
                 });
             }
 
             if (pages.length && isPageSelected && (!defaultpage || isPageDefault)) {
-                pages[0].isSelected = true;
+                selectedPageId = pages[0].id;
             }
 
             this.$emit('updatePage', {
                 pages,
                 id
             });
+            this.$emit('selectPage', selectedPageId);
         },
         selectPage(id) {
-            const pages = this.pages.map(page => {
-                const isSelected = page.id === id;
-                page.isSelected = isSelected;
-
-                return page;
-            });
-
-            this.$emit('updatePage', {
-                pages,
-                id
-            });
+            this.$emit('selectPage', id);
 
             // Add test here for whether or not to toggle the nav
             if (this.sidebarCoversEntries) {

src/plugins/notebook/components/PageComponent.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="c-list__item js-list__item"
-     :class="[{ 'is-selected': page.isSelected, 'is-notebook-default' : (defaultPageId === page.id) }]"
+     :class="[{ 'is-selected': isSelected, 'is-notebook-default' : (defaultPageId === page.id) }]"
      :data-id="page.id"
      @click="selectPage"
 >
@@ -29,6 +29,10 @@ export default {
                 return '';
             }
         },
+        selectedPageId: {
+            type: String,
+            required: true
+        },
         page: {
             type: Object,
             required: true
@@ -46,6 +50,11 @@ export default {
             removeActionString: `Delete ${this.pageTitle}`
         };
     },
+    computed: {
+        isSelected() {
+            return this.selectedPageId === this.page.id;
+        }
+    },
     watch: {
         page(newPage) {
             this.toggleContentEditable(newPage);
@@ -73,7 +82,7 @@ export default {
             this.$emit('deletePage', this.page.id);
         },
         getRemoveDialog() {
-            const message = 'This action will delete this page and all of its entries. Do you want to continue?';
+            const message = 'Other users may be editing entries in this page, and deleting it is permanent. Do you want to continue?';
             const options = {
                 name: this.removeActionString,
                 callback: this.deletePage.bind(this),

src/plugins/notebook/components/SectionCollection.vue

@@ -4,13 +4,14 @@
         :key="section.id"
         class="c-list__item-h"
     >
-        <sectionComponent ref="sectionComponent"
-                          :default-section-id="defaultSectionId"
-                          :section="section"
-                          :section-title="sectionTitle"
-                          @deleteSection="deleteSection"
-                          @renameSection="updateSection"
-                          @selectSection="selectSection"
+        <NotebookSection ref="sectionComponent"
+                         :default-section-id="defaultSectionId"
+                         :selected-section-id="selectedSectionId"
+                         :section="section"
+                         :section-title="sectionTitle"
+                         @deleteSection="deleteSection"
+                         @renameSection="updateSection"
+                         @selectSection="selectSection"
         />
     </li>
 </ul>
@@ -19,11 +20,11 @@
 <script>
 import { deleteNotebookEntries } from '../utils/notebook-entries';
 import { getDefaultNotebook } from '../utils/notebook-storage';
-import sectionComponent from './SectionComponent.vue';
+import SectionComponent from './SectionComponent.vue';
 
 export default {
     components: {
-        sectionComponent
+        NotebookSection: SectionComponent
     },
     inject: ['openmct'],
     props: {
@@ -33,6 +34,10 @@ export default {
                 return '';
             }
         },
+        selectedSectionId: {
+            type: String,
+            required: true
+        },
         domainObject: {
             type: Object,
             default() {
@@ -53,12 +58,22 @@ export default {
             }
         }
     },
+    watch: {
+        sections() {
+            if (!this.containsSection(this.selectedSectionId)) {
+                this.selectSection(this.sections[0].id);
+            }
+        }
+    },
     methods: {
+        containsSection(sectionId) {
+            return this.sections.some(section => section.id === sectionId);
+        },
         deleteSection(id) {
             const section = this.sections.find(s => s.id === id);
             deleteNotebookEntries(this.openmct, this.domainObject, section);
 
-            const selectedSection = this.sections.find(s => s.isSelected);
+            const selectedSection = this.sections.find(s => s.id === this.selectedSectionId);
             const defaultNotebook = getDefaultNotebook();
             const defaultSection = defaultNotebook && defaultNotebook.section;
             const isSectionSelected = selectedSection && selectedSection.id === id;
@@ -83,18 +98,8 @@ export default {
                 id
             });
         },
-        selectSection(id, newSections) {
-            const currentSections = newSections || this.sections;
-            const sections = currentSections.map(section => {
-                const isSelected = section.id === id;
-                section.isSelected = isSelected;
-
-                return section;
-            });
-            this.$emit('updateSection', {
-                sections,
-                id
-            });
+        selectSection(id) {
+            this.$emit('selectSection', id);
         },
         updateSection(newSection) {
             const id = newSection.id;

src/plugins/notebook/components/SectionComponent.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="c-list__item js-list__item"
-     :class="[{ 'is-selected': section.isSelected, 'is-notebook-default' : (defaultSectionId === section.id) }]"
+     :class="[{ 'is-selected': isSelected, 'is-notebook-default' : (defaultSectionId === section.id) }]"
      :data-id="section.id"
      @click="selectSection"
 >
@@ -13,9 +13,6 @@
 </div>
 </template>
 
-<style lang="scss">
-</style>
-
 <script>
 import PopupMenu from './PopupMenu.vue';
 import RemoveDialog from '../utils/removeDialog';
@@ -32,6 +29,10 @@ export default {
                 return '';
             }
         },
+        selectedSectionId: {
+            type: String,
+            required: true
+        },
         section: {
             type: Object,
             required: true
@@ -49,6 +50,11 @@ export default {
             removeActionString: `Delete ${this.sectionTitle}`
         };
     },
+    computed: {
+        isSelected() {
+            return this.selectedSectionId === this.section.id;
+        }
+    },
     watch: {
         section(newSection) {
             this.toggleContentEditable(newSection);
@@ -76,7 +82,7 @@ export default {
             this.$emit('deleteSection', this.section.id);
         },
         getRemoveDialog() {
-            const message = 'This action will delete this section and all of its pages and entries. Do you want to continue?';
+            const message = 'Other users may be editing entries in this section, and deleting it is permanent. Do you want to continue?';
             const options = {
                 name: this.removeActionString,
                 callback: this.deleteSection.bind(this),

src/plugins/notebook/components/Sidebar.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="c-sidebar c-drawer c-drawer--align-left">
-    <div class="c-sidebar__pane">
+    <div class="c-sidebar__pane js-sidebar-sections">
         <div class="c-sidebar__header-w">
             <div class="c-sidebar__header">
                 <span class="c-sidebar__header-label">{{ sectionTitle }}</span>
@@ -15,14 +15,16 @@
             </button>
             <SectionCollection class="c-sidebar__contents"
                                :default-section-id="defaultSectionId"
+                               :selected-section-id="selectedSectionId"
                                :domain-object="domainObject"
                                :sections="sections"
                                :section-title="sectionTitle"
                                @updateSection="sectionsChanged"
+                               @selectSection="selectSection"
             />
         </div>
     </div>
-    <div class="c-sidebar__pane">
+    <div class="c-sidebar__pane js-sidebar-pages">
         <div class="c-sidebar__header-w">
             <div class="c-sidebar__header">
                 <span class="c-sidebar__header-label">{{ pageTitle }}</span>
@@ -42,6 +44,7 @@
             <PageCollection ref="pageCollection"
                             class="c-sidebar__contents"
                             :default-page-id="defaultPageId"
+                            :selected-page-id="selectedPageId"
                             :domain-object="domainObject"
                             :pages="pages"
                             :sections="sections"
@@ -49,6 +52,7 @@
                             :page-title="pageTitle"
                             @toggleNav="toggleNav"
                             @updatePage="pagesChanged"
+                            @selectPage="selectPage"
             />
         </div>
     </div>
@@ -73,12 +77,24 @@ export default {
                 return '';
             }
         },
+        selectedPageId: {
+            type: String,
+            default() {
+                return '';
+            }
+        },
         defaultSectionId: {
             type: String,
             default() {
                 return '';
             }
         },
+        selectedSectionId: {
+            type: String,
+            default() {
+                return '';
+            }
+        },
         domainObject: {
             type: Object,
             default() {
@@ -113,7 +129,7 @@ export default {
     },
     computed: {
         pages() {
-            const selectedSection = this.sections.find(section => section.isSelected);
+            const selectedSection = this.sections.find(section => section.id === this.selectedSectionId);
 
             return selectedSection && selectedSection.pages || [];
         }
@@ -144,6 +160,7 @@ export default {
                 pages,
                 id: newPage.id
             });
+            this.$emit('selectPage', newPage.id);
         },
         addSection() {
             const newSection = this.createNewSection();
@@ -153,6 +170,8 @@ export default {
                 sections,
                 id: newSection.id
             });
+
+            this.$emit('selectSection', newSection.id);
         },
         addNewPage(page) {
             const pages = this.pages.map(p => {
@@ -208,6 +227,12 @@ export default {
                 id
             });
         },
+        selectPage(pageId) {
+            this.$emit('selectPage', pageId);
+        },
+        selectSection(sectionId) {
+            this.$emit('selectSection', sectionId);
+        },
         sectionsChanged({ sections, id }) {
             this.$emit('sectionsChanged', {
                 sections,

src/plugins/notebook/components/snapshot-template.html

@@ -4,9 +4,9 @@
         <div class="l-browse-bar__start">
             <div class="l-browse-bar__object-name--w">
                 <span class="c-object-label l-browse-bar__object-name"
-                    v-bind:class="embed.cssClass"
+                    v-bind:class="cssClass"
                 >
-                    <span class="c-object-label__name">{{ embed.name }}</span>
+                    <span class="c-object-label__name">{{ name }}</span>
                 </span>
             </div>
         </div>
@@ -40,7 +40,7 @@
     <div
         ref="snapshot-image"
         class="c-notebook-snapshot__image"
-        :style="{ backgroundImage: 'url(' + embed.snapshot.src + ')' }"
+        :style="{ backgroundImage: 'url(' + src + ')' }"
     >
     </div>
 </div>

src/plugins/notebook/notebook-constants.js

@@ -1,3 +1,4 @@
+export const NOTEBOOK_TYPE = 'notebook';
 export const EVENT_SNAPSHOTS_UPDATED = 'SNAPSHOTS_UPDATED';
 export const NOTEBOOK_DEFAULT = 'DEFAULT';
 export const NOTEBOOK_SNAPSHOT = 'SNAPSHOT';

src/plugins/notebook/plugin.js

@@ -2,18 +2,20 @@ import CopyToNotebookAction from './actions/CopyToNotebookAction';
 import Notebook from './components/Notebook.vue';
 import NotebookSnapshotIndicator from './components/NotebookSnapshotIndicator.vue';
 import SnapshotContainer from './snapshot-container';
-import Vue from 'vue';
 
-let installed = false;
+import { notebookImageMigration } from '../notebook/utils/notebook-migration';
+import { NOTEBOOK_TYPE } from './notebook-constants';
+
+import Vue from 'vue';
 
 export default function NotebookPlugin() {
     return function install(openmct) {
-        if (installed) {
+        if (openmct._NOTEBOOK_PLUGIN_INSTALLED) {
             return;
+        } else {
+            openmct._NOTEBOOK_PLUGIN_INSTALLED = true;
         }
 
-        installed = true;
-
         openmct.actions.register(new CopyToNotebookAction(openmct));
 
         const notebookType = {
@@ -84,7 +86,20 @@ export default function NotebookPlugin() {
                 }
             ]
         };
-        openmct.types.addType('notebook', notebookType);
+        openmct.types.addType(NOTEBOOK_TYPE, notebookType);
+
+        const notebookSnapshotImageType = {
+            name: 'Notebook Snapshot Image Storage',
+            description: 'Notebook Snapshot Image Storage object',
+            creatable: false,
+            initialize: domainObject => {
+                domainObject.configuration = {
+                    fullSizeImageURL: undefined,
+                    thumbnailImageURL: undefined
+                };
+            }
+        };
+        openmct.types.addType('notebookSnapshotImage', notebookSnapshotImageType);
 
         const snapshotContainer = new SnapshotContainer(openmct);
         const notebookSnapshotIndicator = new Vue ({
@@ -123,10 +138,14 @@ export default function NotebookPlugin() {
                             },
                             provide: {
                                 openmct,
-                                domainObject,
                                 snapshotContainer
                             },
-                            template: '<Notebook></Notebook>'
+                            data() {
+                                return {
+                                    domainObject
+                                };
+                            },
+                            template: '<Notebook :domain-object="domainObject"></Notebook>'
                         });
                     },
                     destroy() {
@@ -135,5 +154,16 @@ export default function NotebookPlugin() {
                 };
             }
         });
+
+        openmct.objects.addGetInterceptor({
+            appliesTo: (identifier, domainObject) => {
+                return domainObject && domainObject.type === 'notebook';
+            },
+            invoke: (identifier, domainObject) => {
+                notebookImageMigration(openmct, domainObject);
+
+                return domainObject;
+            }
+        });
     };
 }

src/plugins/notebook/pluginSpec.js

@@ -21,29 +21,32 @@
  *****************************************************************************/
 
 import { createOpenMct, createMouseEvent, resetApplicationState } from 'utils/testing';
-import NotebookPlugin from './plugin';
+import notebookPlugin from './plugin';
 import Vue from 'vue';
 
-let openmct;
-let notebookDefinition;
-let notebookPlugin;
-let element;
-let child;
-let appHolder;
-
-const notebookDomainObject = {
-    identifier: {
-        key: 'notebook',
-        namespace: ''
-    },
-    type: 'notebook'
-};
-
 describe("Notebook plugin:", () => {
-    beforeAll(done => {
+    let openmct;
+    let notebookDefinition;
+    let element;
+    let child;
+    let appHolder;
+    let objectProviderObserver;
+
+    let notebookDomainObject;
+
+    beforeEach((done) => {
+        notebookDomainObject = {
+            identifier: {
+                key: 'notebook',
+                namespace: 'test-namespace'
+            },
+            type: 'notebook'
+        };
+
         appHolder = document.createElement('div');
         appHolder.style.width = '640px';
         appHolder.style.height = '480px';
+        document.body.appendChild(appHolder);
 
         openmct = createOpenMct();
 
@@ -51,19 +54,16 @@ describe("Notebook plugin:", () => {
         child = document.createElement('div');
         element.appendChild(child);
 
-        notebookPlugin = new NotebookPlugin();
-        openmct.install(notebookPlugin);
+        openmct.install(notebookPlugin());
 
         notebookDefinition = openmct.types.get('notebook').definition;
         notebookDefinition.initialize(notebookDomainObject);
 
         openmct.on('start', done);
         openmct.start(appHolder);
-
-        document.body.append(appHolder);
     });
 
-    afterAll(() => {
+    afterEach(() => {
         appHolder.remove();
 
         return resetApplicationState(openmct);
@@ -80,39 +80,96 @@ describe("Notebook plugin:", () => {
     describe("Notebook view:", () => {
         let notebookViewProvider;
         let notebookView;
+        let notebookViewObject;
+        let mutableNotebookObject;
 
         beforeEach(() => {
-            const notebookViewObject = {
+            notebookViewObject = {
                 ...notebookDomainObject,
                 id: "test-object",
                 name: 'Notebook',
                 configuration: {
                     defaultSort: 'oldest',
-                    entries: {},
+                    entries: {
+                        "test-section-1": {
+                            "test-page-1": [{
+                                "id": "entry-0",
+                                "createdOn": 0,
+                                "text": "First Test Entry",
+                                "embeds": []
+                            }, {
+                                "id": "entry-1",
+                                "createdOn": 0,
+                                "text": "Second Test Entry",
+                                "embeds": []
+                            }]
+                        }
+                    },
                     pageTitle: 'Page',
-                    sections: [],
+                    sections: [{
+                        "id": "test-section-1",
+                        "isDefault": false,
+                        "isSelected": false,
+                        "name": "Test Section",
+                        "pages": [{
+                            "id": "test-page-1",
+                            "isDefault": false,
+                            "isSelected": false,
+                            "name": "Test Page 1",
+                            "pageTitle": "Page"
+                        }, {
+                            "id": "test-page-2",
+                            "isDefault": false,
+                            "isSelected": false,
+                            "name": "Test Page 2",
+                            "pageTitle": "Page"
+                        }]
+                    }, {
+                        "id": "test-section-2",
+                        "isDefault": false,
+                        "isSelected": false,
+                        "name": "Test Section 2",
+                        "pages": [{
+                            "id": "test-page-3",
+                            "isDefault": false,
+                            "isSelected": false,
+                            "name": "Test Page 3",
+                            "pageTitle": "Page"
+                        }]
+                    }],
                     sectionTitle: 'Section',
                     type: 'General'
                 }
             };
+            const testObjectProvider = jasmine.createSpyObj('testObjectProvider', [
+                'get',
+                'create',
+                'update',
+                'observe'
+            ]);
 
-            const notebookObject = {
-                name: 'Notebook View',
-                key: 'notebook-vue',
-                creatable: true
-            };
+            const applicableViews = openmct.objectViews.get(notebookViewObject, [notebookViewObject]);
+            notebookViewProvider = applicableViews.find(viewProvider => viewProvider.key === 'notebook-vue');
 
-            const applicableViews = openmct.objectViews.get(notebookViewObject, []);
-            notebookViewProvider = applicableViews.find(viewProvider => viewProvider.key === notebookObject.key);
-            notebookView = notebookViewProvider.view(notebookViewObject);
+            testObjectProvider.get.and.returnValue(Promise.resolve(notebookViewObject));
+            openmct.objects.addProvider('test-namespace', testObjectProvider);
+            testObjectProvider.observe.and.returnValue(() => {});
 
-            notebookView.show(child);
+            return openmct.objects.getMutable(notebookViewObject.identifier).then((mutableObject) => {
+                mutableNotebookObject = mutableObject;
+                objectProviderObserver = testObjectProvider.observe.calls.mostRecent().args[1];
+
+                notebookView = notebookViewProvider.view(mutableNotebookObject);
+                notebookView.show(child);
+
+                return Vue.nextTick();
+            });
 
-            return Vue.nextTick();
         });
 
         afterEach(() => {
             notebookView.destroy();
+            openmct.objects.destroyMutable(mutableNotebookObject);
         });
 
         it("provides notebook view", () => {
@@ -133,6 +190,114 @@ describe("Notebook plugin:", () => {
 
             expect(hasMajorElements).toBe(true);
         });
+
+        it("renders a row for each entry", () => {
+            const notebookEntryElements = element.querySelectorAll('.c-notebook__entry');
+            const firstEntryText = getEntryText(0);
+            expect(notebookEntryElements.length).toBe(2);
+            expect(firstEntryText.innerText).toBe('First Test Entry');
+        });
+
+        describe("synchronization", () => {
+
+            it("updates an entry when another user modifies it", () => {
+                expect(getEntryText(0).innerText).toBe("First Test Entry");
+                notebookViewObject.configuration.entries["test-section-1"]["test-page-1"][0].text = "Modified entry text";
+                objectProviderObserver(notebookViewObject);
+
+                return Vue.nextTick().then(() => {
+                    expect(getEntryText(0).innerText).toBe("Modified entry text");
+                });
+            });
+
+            it("shows new entry when another user adds one", () => {
+                expect(allNotebookEntryElements().length).toBe(2);
+                notebookViewObject.configuration.entries["test-section-1"]["test-page-1"].push({
+                    "id": "entry-3",
+                    "createdOn": 0,
+                    "text": "Third Test Entry",
+                    "embeds": []
+                });
+                objectProviderObserver(notebookViewObject);
+
+                return Vue.nextTick().then(() => {
+                    expect(allNotebookEntryElements().length).toBe(3);
+                });
+            });
+            it("removes an entry when another user removes one", () => {
+                expect(allNotebookEntryElements().length).toBe(2);
+                let entries = notebookViewObject.configuration.entries["test-section-1"]["test-page-1"];
+                notebookViewObject.configuration.entries["test-section-1"]["test-page-1"] = entries.splice(0, 1);
+                objectProviderObserver(notebookViewObject);
+
+                return Vue.nextTick().then(() => {
+                    expect(allNotebookEntryElements().length).toBe(1);
+                });
+            });
+
+            it("updates the notebook when a user adds a page", () => {
+                const newPage = {
+                    "id": "test-page-4",
+                    "isDefault": false,
+                    "isSelected": false,
+                    "name": "Test Page 4",
+                    "pageTitle": "Page"
+                };
+
+                expect(allNotebookPageElements().length).toBe(2);
+                notebookViewObject.configuration.sections[0].pages.push(newPage);
+                objectProviderObserver(notebookViewObject);
+
+                return Vue.nextTick().then(() => {
+                    expect(allNotebookPageElements().length).toBe(3);
+                });
+
+            });
+
+            it("updates the notebook when a user removes a page", () => {
+                expect(allNotebookPageElements().length).toBe(2);
+                notebookViewObject.configuration.sections[0].pages.splice(0, 1);
+                objectProviderObserver(notebookViewObject);
+
+                return Vue.nextTick().then(() => {
+                    expect(allNotebookPageElements().length).toBe(1);
+                });
+            });
+
+            it("updates the notebook when a user adds a section", () => {
+                const newSection = {
+                    "id": "test-section-3",
+                    "isDefault": false,
+                    "isSelected": false,
+                    "name": "Test Section 3",
+                    "pages": [{
+                        "id": "test-page-4",
+                        "isDefault": false,
+                        "isSelected": false,
+                        "name": "Test Page 4",
+                        "pageTitle": "Page"
+                    }]
+                };
+
+                expect(allNotebookSectionElements().length).toBe(2);
+                notebookViewObject.configuration.sections.push(newSection);
+                objectProviderObserver(notebookViewObject);
+
+                return Vue.nextTick().then(() => {
+                    expect(allNotebookSectionElements().length).toBe(3);
+                });
+            });
+
+            it("updates the notebook when a user removes a section", () => {
+                expect(allNotebookSectionElements().length).toBe(2);
+                notebookViewObject.configuration.sections.splice(0, 1);
+                objectProviderObserver(notebookViewObject);
+
+                return Vue.nextTick().then(() => {
+                    expect(allNotebookSectionElements().length).toBe(1);
+                });
+            });
+        });
     });
 
     describe("Notebook Snapshots view:", () => {
@@ -147,16 +312,22 @@ describe("Notebook plugin:", () => {
             button.dispatchEvent(clickEvent);
         }
 
-        beforeAll(() => {
+        beforeEach(() => {
             snapshotIndicator = openmct.indicators.indicatorObjects
                 .find(indicator => indicator.key === 'notebook-snapshot-indicator').element;
 
             element.append(snapshotIndicator);
 
-            return Vue.nextTick();
+            return Vue.nextTick().then(() => {
+                drawerElement = document.querySelector('.l-shell__drawer');
+            });
         });
 
-        afterAll(() => {
+        afterEach(() => {
+            if (drawerElement) {
+                drawerElement.classList.remove('is-expanded');
+            }
+
             snapshotIndicator.remove();
             snapshotIndicator = undefined;
 
@@ -166,16 +337,6 @@ describe("Notebook plugin:", () => {
             }
         });
 
-        beforeEach(() => {
-            drawerElement = document.querySelector('.l-shell__drawer');
-        });
-
-        afterEach(() => {
-            if (drawerElement) {
-                drawerElement.classList.remove('is-expanded');
-            }
-        });
-
         it("has Snapshots indicator", () => {
             const hasSnapshotIndicator = snapshotIndicator !== null && snapshotIndicator !== undefined;
             expect(hasSnapshotIndicator).toBe(true);
@@ -219,4 +380,20 @@ describe("Notebook plugin:", () => {
             expect(snapshotsText).toBe('Notebook Snapshots');
         });
     });
+
+    function getEntryText(entryNumber) {
+        return element.querySelectorAll('.c-notebook__entry .c-ne__text')[entryNumber];
+    }
+
+    function allNotebookEntryElements() {
+        return element.querySelectorAll('.c-notebook__entry');
+    }
+
+    function allNotebookSectionElements() {
+        return element.querySelectorAll('.js-sidebar-sections .js-list__item');
+    }
+
+    function allNotebookPageElements() {
+        return element.querySelectorAll('.js-sidebar-pages .js-list__item');
+    }
 });

src/plugins/notebook/snapshot.js

@@ -1,6 +1,8 @@
 import { addNotebookEntry, createNewEmbed } from './utils/notebook-entries';
 import { getDefaultNotebook, getDefaultNotebookLink, setDefaultNotebook } from './utils/notebook-storage';
 import { NOTEBOOK_DEFAULT } from '@/plugins/notebook/notebook-constants';
+import { createNotebookImageDomainObject, DEFAULT_SIZE } from './utils/notebook-image';
+
 import SnapshotContainer from './snapshot-container';
 
 export default class Snapshot {
@@ -14,12 +16,17 @@ export default class Snapshot {
 
     capture(snapshotMeta, notebookType, domElement) {
         const exportImageService = this.openmct.$injector.get('exportImageService');
-        exportImageService.exportPNGtoSRC(domElement, 's-status-taking-snapshot')
-            .then(function (blob) {
+
+        const options = {
+            className: 's-status-taking-snapshot',
+            thumbnailSize: DEFAULT_SIZE
+        };
+        exportImageService.exportPNGtoSRC(domElement, options)
+            .then(function ({blob, thumbnail}) {
                 const reader = new window.FileReader();
                 reader.readAsDataURL(blob);
                 reader.onloadend = function () {
-                    this._saveSnapShot(notebookType, reader.result, snapshotMeta);
+                    this._saveSnapShot(notebookType, reader.result, thumbnail, snapshotMeta);
                 }.bind(this);
             }.bind(this));
     }
@@ -27,16 +34,23 @@ export default class Snapshot {
     /**
      * @private
      */
-    _saveSnapShot(notebookType, imageUrl, snapshotMeta) {
-        const snapshot = imageUrl ? { src: imageUrl } : '';
-        const embed = createNewEmbed(snapshotMeta, snapshot);
-        if (notebookType === NOTEBOOK_DEFAULT) {
-            this._saveToDefaultNoteBook(embed);
+    _saveSnapShot(notebookType, fullSizeImageURL, thumbnailImageURL, snapshotMeta) {
+        createNotebookImageDomainObject(this.openmct, fullSizeImageURL)
+            .then(object => {
+                const thumbnailImage = { src: thumbnailImageURL || '' };
+                const snapshot = {
+                    fullSizeImageObjectIdentifier: object.identifier,
+                    thumbnailImage
+                };
+                const embed = createNewEmbed(snapshotMeta, snapshot);
+                if (notebookType === NOTEBOOK_DEFAULT) {
+                    this._saveToDefaultNoteBook(embed);
 
-            return;
-        }
+                    return;
+                }
 
-        this._saveToNotebookSnapshots(embed);
+                this._saveToNotebookSnapshots(embed);
+            });
     }
 
     /**

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

@@ -112,7 +112,7 @@ let openmct;
 let mockIdentifierService;
 
 describe('Notebook Entries:', () => {
-    beforeEach(done => {
+    beforeEach(() => {
         openmct = createOpenMct();
         openmct.$injector = jasmine.createSpyObj('$injector', ['get']);
         mockIdentifierService = jasmine.createSpyObj(
@@ -134,8 +134,6 @@ describe('Notebook Entries:', () => {
             'update'
         ]));
         window.localStorage.setItem('notebook-storage', null);
-
-        done();
     });
 
     afterEach(() => {
@@ -150,12 +148,11 @@ describe('Notebook Entries:', () => {
         expect(entries.length).toEqual(0);
     });
 
-    it('addNotebookEntry adds entry', (done) => {
+    it('addNotebookEntry adds entry', () => {
         const unlisten = openmct.objects.observe(notebookDomainObject, '*', (object) => {
             const entries = NotebookEntries.getNotebookEntries(notebookDomainObject, selectedSection, selectedPage);
 
             expect(entries.length).toEqual(1);
-            done();
             unlisten();
         });
 

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

@@ -0,0 +1,78 @@
+import uuid from 'uuid';
+
+export const DEFAULT_SIZE = {
+    width: 30,
+    height: 30
+};
+
+export function createNotebookImageDomainObject(openmct, fullSizeImageURL) {
+    const identifier = {
+        key: uuid(),
+        namespace: ''
+    };
+    const viewType = 'notebookSnapshotImage';
+
+    const object = {
+        name: 'Notebook Snapshot Image',
+        type: viewType,
+        identifier,
+        configuration: {
+            fullSizeImageURL
+        }
+    };
+
+    return new Promise((resolve, reject) => {
+        openmct.objects.save(object)
+            .then(result => {
+                if (result) {
+                    resolve(object);
+                }
+
+                reject();
+            })
+            .catch(e => {
+                console.error(e);
+                reject();
+            });
+    });
+}
+
+export function getThumbnailURLFromCanvas(canvas, size = DEFAULT_SIZE) {
+    const thumbnailCanvas = document.createElement('canvas');
+    thumbnailCanvas.setAttribute('width', size.width);
+    thumbnailCanvas.setAttribute('height', size.height);
+    const ctx = thumbnailCanvas.getContext('2d');
+    ctx.globalCompositeOperation = "copy";
+    ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, size.width, size.height);
+
+    return thumbnailCanvas.toDataURL('image/png');
+}
+
+export function getThumbnailURLFromimageUrl(imageUrl, size = DEFAULT_SIZE) {
+    return new Promise(resolve => {
+        const image = new Image();
+
+        const canvas = document.createElement('canvas');
+        canvas.width = size.width;
+        canvas.height = size.height;
+
+        image.onload = function () {
+            canvas.getContext('2d')
+                .drawImage(image, 0, 0, size.width, size.height);
+
+            resolve(canvas.toDataURL('image/png'));
+        };
+
+        image.src = imageUrl;
+    });
+}
+
+export function updateNotebookImageDomainObject(openmct, identifier, fullSizeImage) {
+    openmct.objects.get(identifier)
+        .then(domainObject => {
+            const configuration = domainObject.configuration;
+            configuration.fullSizeImageURL = fullSizeImage.src;
+
+            openmct.objects.mutate(domainObject, 'configuration', configuration);
+        });
+}

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

@@ -0,0 +1,43 @@
+import { createNotebookImageDomainObject, getThumbnailURLFromimageUrl } from './notebook-image';
+import { mutateObject } from './notebook-entries';
+
+export function notebookImageMigration(openmct, domainObject) {
+    const configuration = domainObject.configuration;
+    const notebookEntries = configuration.entries;
+
+    const imageMigrationVer = configuration.imageMigrationVer;
+    if (imageMigrationVer && imageMigrationVer === 'v1') {
+        return;
+    }
+
+    configuration.imageMigrationVer = 'v1';
+
+    // to avoid muliple notebookImageMigration calls updating images.
+    mutateObject(openmct, domainObject, 'configuration', configuration);
+
+    configuration.sections.forEach(section => {
+        const sectionId = section.id;
+        section.pages.forEach(page => {
+            const pageId = page.id;
+            const notebookSection = notebookEntries && notebookEntries[sectionId] || {};
+            const pageEntries = notebookSection && notebookSection[pageId] || [];
+            pageEntries.forEach(entry => {
+                entry.embeds.forEach(async (embed) => {
+                    const snapshot = embed.snapshot;
+                    const fullSizeImageURL = snapshot.src;
+                    if (fullSizeImageURL) {
+                        const thumbnailImageURL = await getThumbnailURLFromimageUrl(fullSizeImageURL);
+                        const notebookImageDomainObject = await createNotebookImageDomainObject(openmct, fullSizeImageURL);
+
+                        embed.snapshot = {
+                            fullSizeImageObjectIdentifier: notebookImageDomainObject.identifier,
+                            thumbnailImage: { src: thumbnailImageURL || '' }
+                        };
+
+                        mutateObject(openmct, domainObject, 'configuration.entries', notebookEntries);
+                    }
+                });
+            });
+        });
+    });
+}

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

@@ -60,7 +60,7 @@ let openmct;
 let mockIdentifierService;
 
 describe('Notebook Storage:', () => {
-    beforeEach((done) => {
+    beforeEach(() => {
         openmct = createOpenMct();
         openmct.$injector = jasmine.createSpyObj('$injector', ['get']);
         mockIdentifierService = jasmine.createSpyObj(
@@ -79,7 +79,6 @@ describe('Notebook Storage:', () => {
             'create',
             'update'
         ]));
-        done();
     });
 
     afterEach(() => {

src/plugins/notebook/utils/painterroInstance.js

@@ -1,4 +1,5 @@
 import Painterro from 'painterro';
+import { getThumbnailURLFromimageUrl } from './notebook-image';
 
 const DEFAULT_CONFIG = {
     activeColor: '#ff0000',
@@ -25,11 +26,11 @@ const DEFAULT_CONFIG = {
 };
 
 export default class PainterroInstance {
-    constructor(element, saveCallback) {
+    constructor(element) {
         this.elementId = element.id;
         this.isSave = false;
-        this.painterroInstance = null;
-        this.saveCallback = saveCallback;
+        this.painterroInstance = undefined;
+        this.saveCallback = undefined;
     }
 
     dismiss() {
@@ -46,31 +47,41 @@ export default class PainterroInstance {
         this.painterro = Painterro(this.config);
     }
 
-    save() {
+    save(callback) {
+        this.saveCallback = callback;
         this.isSave = true;
         this.painterroInstance.save();
     }
 
     saveHandler(image, done) {
         if (this.isSave) {
-            const self = this;
             const url = image.asBlob();
+
             const reader = new window.FileReader();
             reader.readAsDataURL(url);
-            reader.onloadend = () => {
-                const snapshot = reader.result;
+            reader.onloadend = async () => {
+                const fullSizeImageURL = reader.result;
+                const thumbnailURL = await getThumbnailURLFromimageUrl(fullSizeImageURL);
                 const snapshotObject = {
-                    src: snapshot,
-                    type: url.type,
-                    size: url.size,
-                    modified: Date.now()
+                    fullSizeImage: {
+                        src: fullSizeImageURL,
+                        type: url.type,
+                        size: url.size,
+                        modified: Date.now()
+                    },
+                    thumbnailImage: {
+                        src: thumbnailURL,
+                        modified: Date.now()
+                    }
                 };
 
-                self.saveCallback(snapshotObject);
-            };
-        }
+                this.saveCallback(snapshotObject);
 
-        done(true);
+                done(true);
+            };
+        } else {
+            done(true);
+        }
     }
 
     show(src) {

src/plugins/openInNewTabAction/openInNewTabAction.js

@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
+ * Open MCT, Copyright (c) 2014-2021, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,38 +19,20 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import objectPathToUrl from '/src/tools/url';
+export default class OpenInNewTab {
+    constructor(openmct) {
+        this.name = 'Open In New Tab';
+        this.key = 'newTab';
+        this.description = 'Open in a new browser tab';
+        this.group = "windowing";
+        this.priority = 10;
+        this.cssClass = "icon-new-window";
 
-define(
-    [],
-    function () {
-
-        /**
-         * Designates a specific timer for following. Timelines, for example,
-         * use the actively followed timer to display a time-of-interest line
-         * and interpret time conductor bounds in the Timeline's relative
-         * time frame.
-         *
-         * @implements {Action}
-         * @memberof platform/features/clock
-         * @constructor
-         * @param {ActionContext} context the context for this action
-         */
-        function FollowTimerAction(timerService, context) {
-            var domainObject =
-                context.domainObject
-                && context.domainObject.useCapability('adapter');
-            this.perform =
-                timerService.setTimer.bind(timerService, domainObject);
-        }
-
-        FollowTimerAction.appliesTo = function (context) {
-            var model =
-                (context.domainObject && context.domainObject.getModel())
-                || {};
-
-            return model.type === 'timer';
-        };
-
-        return FollowTimerAction;
+        this._openmct = openmct;
     }
-);
+    invoke(objectPath) {
+        let url = objectPathToUrl(this._openmct, objectPath);
+        window.open(url);
+    }
+}

src/plugins/openInNewTabAction/plugin.js

@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2009-2018, United States Government
+ * Open MCT, Copyright (c) 2014-2021, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,33 +19,10 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import OpenInNewTabAction from './openInNewTabAction';
 
-define([], function () {
-
-    /**
-     * Indicator that displays the active timer, as well as its
-     * current state.
-     * @memberof platform/features/clock
-     */
-    return function installFollowIndicator(openmct, timerService) {
-        var indicator = openmct.indicators.simpleIndicator();
-        var timer = timerService.getTimer();
-        setIndicatorStatus(timer);
-
-        function setIndicatorStatus(newTimer) {
-            if (newTimer !== undefined) {
-                indicator.iconClass('icon-timer');
-                indicator.statusClass('s-status-on');
-                indicator.text('Following timer ' + newTimer.name);
-            } else {
-                indicator.iconClass('icon-timer');
-                indicator.statusClass('s-status-disabled');
-                indicator.text('No timer being followed');
-            }
-        }
-
-        timerService.on('change', setIndicatorStatus);
-
-        openmct.indicators.add(indicator);
+export default function () {
+    return function (openmct) {
+        openmct.actions.register(new OpenInNewTabAction(openmct));
     };
-});
+}

src/plugins/openInNewTabAction/pluginSpec.js

@@ -0,0 +1,75 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 MCT 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.
+ *****************************************************************************/
+import {
+    createOpenMct,
+    resetApplicationState,
+    spyOnBuiltins
+} from 'utils/testing';
+
+describe("the plugin", () => {
+    let openmct;
+    let openInNewTabAction;
+    let mockObjectPath;
+
+    beforeEach((done) => {
+        openmct = createOpenMct();
+
+        openmct.on('start', done);
+        openmct.startHeadless();
+
+        openInNewTabAction = openmct.actions._allActions.newTab;
+    });
+
+    afterEach(() => {
+        return resetApplicationState(openmct);
+    });
+
+    it('installs the open in new tab action', () => {
+        expect(openInNewTabAction).toBeDefined();
+    });
+
+    describe('when invoked', () => {
+
+        beforeEach(async () => {
+            mockObjectPath = [{
+                name: 'mock folder',
+                type: 'folder',
+                identifier: {
+                    key: 'mock-folder',
+                    namespace: ''
+                }
+            }];
+            spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({
+                identifier: {
+                    namespace: '',
+                    key: 'test'
+                }
+            }));
+            spyOnBuiltins(['open']);
+            await openInNewTabAction.invoke(mockObjectPath);
+        });
+
+        it('it opens in a new tab', () => {
+            expect(window.open).toHaveBeenCalled();
+        });
+    });
+});

src/plugins/persistence/couch/CouchObjectProvider.js

@@ -22,6 +22,7 @@
 
 import CouchDocument from "./CouchDocument";
 import CouchObjectQueue from "./CouchObjectQueue";
+import { NOTEBOOK_TYPE } from '../../notebook/notebook-constants.js';
 
 const REV = "_rev";
 const ID = "_id";
@@ -29,24 +30,14 @@ const HEARTBEAT = 50000;
 const ALL_DOCS = "_all_docs?include_docs=true";
 
 export default class CouchObjectProvider {
-    // options {
-    //      url: couchdb url,
-    //      disableObserve: disable auto feed from couchdb to keep objects in sync,
-    //      filter: selector to find objects to sync in couchdb
-    //      }
     constructor(openmct, options, namespace) {
         options = this._normalize(options);
         this.openmct = openmct;
         this.url = options.url;
         this.namespace = namespace;
         this.objectQueue = {};
-        this.observeEnabled = options.disableObserve !== true;
         this.observers = {};
         this.batchIds = [];
-
-        if (this.observeEnabled) {
-            this.observeObjectChanges(options.filter);
-        }
     }
 
     //backwards compatibility, options used to be a url. Now it's an object
@@ -133,8 +124,12 @@ export default class CouchObjectProvider {
                 this.objectQueue[key] = new CouchObjectQueue(undefined, response[REV]);
             }
 
-            //Sometimes CouchDB returns the old rev which fetching the object if there is a document update in progress
-            if (!this.objectQueue[key].pending) {
+            if (object.type === NOTEBOOK_TYPE) {
+                //Temporary measure until object sync is supported for all object types
+                //Always update notebook revision number because we have realtime sync, so always assume it's the latest.
+                this.objectQueue[key].updateRevision(response[REV]);
+            } else if (!this.objectQueue[key].pending) {
+                //Sometimes CouchDB returns the old rev which fetching the object if there is a document update in progress
                 this.objectQueue[key].updateRevision(response[REV]);
             }
 
@@ -313,49 +308,63 @@ export default class CouchObjectProvider {
     }
 
     observe(identifier, callback) {
-        if (!this.observeEnabled) {
-            return;
-        }
-
         const keyString = this.openmct.objects.makeKeyString(identifier);
         this.observers[keyString] = this.observers[keyString] || [];
         this.observers[keyString].push(callback);
 
+        if (!this.isObservingObjectChanges()) {
+            this.observeObjectChanges();
+        }
+
         return () => {
             this.observers[keyString] = this.observers[keyString].filter(observer => observer !== callback);
+            if (this.observers[keyString].length === 0) {
+                delete this.observers[keyString];
+                if (Object.keys(this.observers).length === 0) {
+                    this.stopObservingObjectChanges();
+                }
+            }
         };
     }
 
-    /**
-     * @private
-     */
-    abortGetChanges() {
-        if (this.controller) {
-            this.controller.abort();
-            this.controller = undefined;
-        }
-
-        return true;
+    isObservingObjectChanges() {
+        return this.stopObservingObjectChanges !== undefined;
     }
 
     /**
      * @private
      */
-    async observeObjectChanges(filter) {
-        let intermediateResponse = this.getIntermediateResponse();
-
-        if (!this.observeEnabled) {
-            intermediateResponse.reject('Observe for changes is disabled');
-        }
-
+    async observeObjectChanges() {
         const controller = new AbortController();
         const signal = controller.signal;
+        let filter = {selector: {}};
 
-        if (this.controller) {
-            this.abortGetChanges();
+        if (this.openmct.objects.SYNCHRONIZED_OBJECT_TYPES.length > 1) {
+            filter.selector.$or = this.openmct.objects.SYNCHRONIZED_OBJECT_TYPES
+                .map(type => {
+                    return {
+                        'model': {
+                            type
+                        }
+                    };
+                });
+        } else {
+            filter.selector.model = {
+                type: this.openmct.objects.SYNCHRONIZED_OBJECT_TYPES[0]
+            };
         }
 
-        this.controller = controller;
+        let error = false;
+
+        if (typeof this.stopObservingObjectChanges === 'function') {
+            this.stopObservingObjectChanges();
+        }
+
+        this.stopObservingObjectChanges = () => {
+            controller.abort();
+            delete this.stopObservingObjectChanges;
+        };
+
         // 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
         let url = `${this.url}/_changes?feed=continuous&style=main_only&heartbeat=${HEARTBEAT}`;
@@ -374,14 +383,20 @@ export default class CouchObjectProvider {
             },
             body
         });
-        const reader = response.body.getReader();
-        let completed = false;
 
-        while (!completed) {
+        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) {
-                completed = true;
+                error = true;
             }
 
             if (value) {
@@ -414,11 +429,9 @@ export default class CouchObjectProvider {
 
         }
 
-        //We're done receiving from the provider. No more chunks.
-        intermediateResponse.resolve(true);
-
-        return intermediateResponse.promise;
-
+        if (error && Object.keys(this.observers).length > 0) {
+            this.observeObjectChanges();
+        }
     }
 
     /**

src/plugins/persistence/couch/pluginSpec.js

@@ -27,8 +27,6 @@ import {
 
 describe('the plugin', () => {
     let openmct;
-    let element;
-    let child;
     let provider;
     let testPath = '/test/db';
     let options;
@@ -36,6 +34,8 @@ describe('the plugin', () => {
     let mockDomainObject;
 
     beforeEach((done) => {
+        spyOnBuiltins(['fetch'], window);
+
         mockDomainObject = {
             identifier: {
                 namespace: '',
@@ -51,8 +51,6 @@ describe('the plugin', () => {
         };
         openmct = createOpenMct(false);
 
-        spyOnBuiltins(['fetch'], window);
-
         openmct.$injector = jasmine.createSpyObj('$injector', ['get']);
         mockIdentifierService = jasmine.createSpyObj(
             'identifierService',
@@ -70,10 +68,6 @@ describe('the plugin', () => {
 
         openmct.types.addType('mock-type', {creatable: true});
 
-        element = document.createElement('div');
-        child = document.createElement('div');
-        element.appendChild(child);
-
         openmct.on('start', done);
         openmct.startHeadless();
 

src/plugins/plan/pluginSpec.js

@@ -29,9 +29,10 @@ describe('the plugin', function () {
     let element;
     let child;
     let openmct;
+    let appHolder;
 
     beforeEach((done) => {
-        const appHolder = document.createElement('div');
+        appHolder = document.createElement('div');
         appHolder.style.width = '640px';
         appHolder.style.height = '480px';
 
@@ -103,7 +104,7 @@ describe('the plugin', function () {
         ];
         let planView;
 
-        beforeEach((done) => {
+        beforeEach(() => {
             planDomainObject = {
                 identifier: {
                     key: 'test-object',
@@ -140,9 +141,7 @@ describe('the plugin', function () {
             let view = planView.view(planDomainObject, mockObjectPath);
             view.show(child, true);
 
-            return Vue.nextTick().then(() => {
-                done();
-            });
+            return Vue.nextTick();
         });
 
         it('loads activities into the view', () => {

src/plugins/plot/MctPlot.vue

@@ -28,6 +28,7 @@
                  :series="config.series.models"
                  :highlights="highlights"
                  :legend="config.legend"
+                 @legendHoverChanged="legendHoverChanged"
     />
     <div class="plot-wrapper-axis-and-display-area flex-elem grows">
         <y-axis v-if="config.series.models.length > 0"
@@ -67,6 +68,7 @@
                 >
                     <mct-chart :rectangles="rectangles"
                                :highlights="highlights"
+                               :show-limit-line-labels="showLimitLineLabels"
                                @plotReinitializeCanvas="initCanvas"
                     />
                 </div>
@@ -213,7 +215,8 @@ export default {
             pending: 0,
             isRealTime: this.openmct.time.clock() !== undefined,
             loaded: false,
-            isTimeOutOfSync: false
+            isTimeOutOfSync: false,
+            showLimitLineLabels: undefined
         };
     },
     computed: {
@@ -1018,6 +1021,9 @@ export default {
                 this.offsetWidth = this.$parent.$refs.plotWrapper.offsetWidth;
                 this.config.series.models.forEach(this.loadSeriesData, this);
             }
+        },
+        legendHoverChanged(data) {
+            this.showLimitLineLabels = data;
         }
     }
 };

src/plugins/plot/chart/LimitLabel.vue

@@ -0,0 +1,51 @@
+<template>
+<div class="c-plot-limit"
+     :style="styleObj"
+     :class="limitClass"
+>
+    <div class="c-plot-limit__label">
+        <span class="c-plot-limit__direction-icon"></span>
+        <span class="c-plot-limit__severity-icon"></span>
+        <span class="c-plot-limit__limit-value">{{ limit.value }}</span>
+        <span class="c-plot-limit__series-color-swatch"
+              :style="{ 'background-color': limit.seriesColor }"
+        ></span>
+        <span class="c-plot-limit__series-name">{{ limit.name }}</span>
+    </div>
+</div>
+</template>
+
+<script>
+import { getLimitClass } from "./limitUtil";
+
+export default {
+    props: {
+        limit: {
+            type: Object,
+            required: true,
+            default() {
+                return {};
+            }
+        },
+        point: {
+            type: Object,
+            required: true,
+            default() {
+                return {};
+            }
+        }
+    },
+    computed: {
+        styleObj() {
+            const top = `${this.point.top}px`;
+
+            return {
+                'top': top
+            };
+        },
+        limitClass() {
+            return getLimitClass(this.limit, 'c-plot-limit--');
+        }
+    }
+};
+</script>

src/plugins/plot/chart/LimitLine.vue

@@ -0,0 +1,40 @@
+<template>
+<div :style="styleObj"
+     class="c-plot-limit-line js-limit-line"
+     :class="limitClass"
+></div>
+</template>
+
+<script>
+import { getLimitClass } from "./limitUtil";
+
+export default {
+    props: {
+        point: {
+            type: Object,
+            required: true,
+            default() {
+                return {};
+            }
+        },
+        limit: {
+            type: Object,
+            default() {
+                return {};
+            }
+        }
+    },
+    computed: {
+        styleObj() {
+            const top = `${this.point.top}px`;
+
+            return {
+                'top': top
+            };
+        },
+        limitClass() {
+            return getLimitClass(this.limit, 'c-plot-limit-line--');
+        }
+    }
+};
+</script>

src/plugins/plot/chart/MCTChartAlarmLineSet.js

@@ -0,0 +1,108 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 MCT 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.
+ *****************************************************************************/
+
+import eventHelpers from '../lib/eventHelpers';
+
+export default class MCTChartAlarmLineSet {
+    constructor(series, chart, offset, bounds) {
+        this.series = series;
+        this.chart = chart;
+        this.offset = offset;
+        this.bounds = bounds;
+        this.limits = [];
+
+        eventHelpers.extend(this);
+        this.listenTo(series, 'limitBounds', this.updateBounds, this);
+        this.listenTo(series, 'limits', this.getLimitPoints, this);
+        this.listenTo(series, 'change:xKey', this.getLimitPoints, this);
+
+        if (series.limits) {
+            this.getLimitPoints(series);
+        }
+    }
+
+    updateBounds(bounds) {
+        this.bounds = bounds;
+        this.getLimitPoints(this.series);
+    }
+
+    color() {
+        return this.series.get('color');
+    }
+
+    name() {
+        return this.series.get('name');
+    }
+
+    makePoint(point, series) {
+        if (!this.offset.xVal) {
+            this.chart.setOffset(point, undefined, series);
+        }
+
+        return {
+            x: this.offset.xVal(point, series),
+            y: this.offset.yVal(point, series)
+        };
+    }
+
+    getLimitPoints(series) {
+        this.limits = [];
+        let xKey = series.get('xKey');
+        Object.keys(series.limits).forEach((key) => {
+            const limitForLevel = series.limits[key];
+            if (limitForLevel.high) {
+                this.limits.push({
+                    seriesKey: series.keyString,
+                    level: key.toLowerCase(),
+                    name: this.name(),
+                    seriesColor: series.get('color').asHexString(),
+                    point: this.makePoint(Object.assign({ [xKey]: this.bounds.start }, limitForLevel.high), series),
+                    value: series.getYVal(limitForLevel.high),
+                    color: limitForLevel.high.color,
+                    isUpper: true
+                });
+            }
+
+            if (limitForLevel.low) {
+                this.limits.push({
+                    seriesKey: series.keyString,
+                    level: key.toLowerCase(),
+                    name: this.name(),
+                    seriesColor: series.get('color').asHexString(),
+                    point: this.makePoint(Object.assign({ [xKey]: this.bounds.start }, limitForLevel.low), series),
+                    value: series.getYVal(limitForLevel.low),
+                    color: limitForLevel.low.color,
+                    isUpper: false
+                });
+            }
+        }, this);
+    }
+
+    reset() {
+        this.limits = [];
+    }
+
+    destroy() {
+        this.stopListening();
+    }
+
+}

src/plugins/plot/chart/MctChart.vue

@@ -23,6 +23,9 @@
 <div class="gl-plot-chart-area">
     <span v-html="canvasTemplate"></span>
     <span v-html="canvasTemplate"></span>
+    <div ref="limitArea"
+         class="js-limit-area"
+    ></div>
 </div>
 </template>
 
@@ -34,11 +37,16 @@ import MCTChartLineLinear from './MCTChartLineLinear';
 import MCTChartLineStepAfter from './MCTChartLineStepAfter';
 import MCTChartPointSet from './MCTChartPointSet';
 import MCTChartAlarmPointSet from './MCTChartAlarmPointSet';
+import MCTChartAlarmLineSet from "./MCTChartAlarmLineSet";
 import configStore from "../configuration/configStore";
 import PlotConfigurationModel from "../configuration/PlotConfigurationModel";
+import LimitLine from "./LimitLine.vue";
+import LimitLabel from "./LimitLabel.vue";
+import Vue from 'vue';
 
 const MARKER_SIZE = 6.0;
 const HIGHLIGHT_SIZE = MARKER_SIZE * 2.0;
+const CLEARANCE = 15;
 
 export default {
     inject: ['openmct', 'domainObject'],
@@ -54,6 +62,12 @@ export default {
             default() {
                 return [];
             }
+        },
+        showLimitLineLabels: {
+            type: Object,
+            default() {
+                return {};
+            }
         }
     },
     data() {
@@ -67,18 +81,22 @@ export default {
         },
         rectangles() {
             this.scheduleDraw();
+        },
+        showLimitLineLabels() {
+            this.drawLimitLines();
         }
     },
     mounted() {
         eventHelpers.extend(this);
-
         this.config = this.getConfig();
         this.isDestroyed = false;
         this.lines = [];
+        this.limitLines = [];
         this.pointSets = [];
         this.alarmSets = [];
         this.offset = {};
         this.seriesElements = new WeakMap();
+        this.seriesLimits = new WeakMap();
 
         let canvasEls = this.$parent.$refs.chartContainer.querySelectorAll("canvas");
         const mainCanvas = canvasEls[1];
@@ -90,8 +108,8 @@ export default {
         this.listenTo(this.config.series, 'add', this.onSeriesAdd, this);
         this.listenTo(this.config.series, 'remove', this.onSeriesRemove, this);
         this.listenTo(this.config.yAxis, 'change:key', this.clearOffset, this);
-        this.listenTo(this.config.yAxis, 'change', this.scheduleDraw);
-        this.listenTo(this.config.xAxis, 'change', this.scheduleDraw);
+        this.listenTo(this.config.yAxis, 'change', this.updateLimitsAndDraw);
+        this.listenTo(this.config.xAxis, 'change', this.updateLimitsAndDraw);
         this.config.series.forEach(this.onSeriesAdd, this);
     },
     beforeDestroy() {
@@ -116,15 +134,18 @@ export default {
             this.changeInterpolate(mode, o, series);
             this.changeMarkers(mode, o, series);
             this.changeAlarmMarkers(mode, o, series);
+            this.changeLimitLines(mode, o, series);
         },
         onSeriesAdd(series) {
             this.listenTo(series, 'change:xKey', this.reDraw, this);
             this.listenTo(series, 'change:interpolate', this.changeInterpolate, this);
             this.listenTo(series, 'change:markers', this.changeMarkers, this);
             this.listenTo(series, 'change:alarmMarkers', this.changeAlarmMarkers, this);
+            this.listenTo(series, 'change:limitLines', this.changeLimitLines, this);
             this.listenTo(series, 'change', this.scheduleDraw);
             this.listenTo(series, 'add', this.scheduleDraw);
             this.makeChartElement(series);
+            this.makeLimitLines(series);
         },
         changeInterpolate(mode, o, series) {
             if (mode === o) {
@@ -178,6 +199,14 @@ export default {
                 this.pointSets.push(pointSet);
             }
         },
+        changeLimitLines(mode, o, series) {
+            if (mode === o) {
+                return;
+            }
+
+            this.makeLimitLines(series);
+            this.updateLimitsAndDraw();
+        },
         onSeriesRemove(series) {
             this.stopListening(series);
             this.removeChartElement(series);
@@ -187,6 +216,7 @@ export default {
             this.isDestroyed = true;
             this.stopListening();
             this.lines.forEach(line => line.destroy());
+            this.limitLines.forEach(line => line.destroy());
             DrawLoader.releaseDrawAPI(this.drawAPI);
         },
         clearOffset() {
@@ -199,6 +229,9 @@ export default {
             this.lines.forEach(function (line) {
                 line.reset();
             });
+            this.limitLines.forEach(function (line) {
+                line.reset();
+            });
             this.pointSets.forEach(function (pointSet) {
                 pointSet.reset();
             });
@@ -269,6 +302,8 @@ export default {
             }
 
             this.seriesElements.delete(series);
+
+            this.clearLimitLines(series);
         },
         lineForSeries(series) {
             if (series.get('interpolate') === 'linear') {
@@ -287,6 +322,14 @@ export default {
                 );
             }
         },
+        limitLineForSeries(series) {
+            return new MCTChartAlarmLineSet(
+                series,
+                this,
+                this.offset,
+                this.openmct.time.bounds()
+            );
+        },
         pointSetForSeries(series) {
             if (series.get('markers')) {
                 return new MCTChartPointSet(
@@ -308,7 +351,8 @@ export default {
         makeChartElement(series) {
             const elements = {
                 lines: [],
-                pointSets: []
+                pointSets: [],
+                limitLines: []
             };
 
             const line = this.lineForSeries(series);
@@ -330,6 +374,37 @@ export default {
 
             this.seriesElements.set(series, elements);
         },
+        makeLimitLines(series) {
+            this.clearLimitLines(series);
+
+            if (!series.get('limitLines')) {
+                return;
+            }
+
+            const limitElements = {
+                limitLines: []
+            };
+
+            const limitLine = this.limitLineForSeries(series);
+            if (limitLine) {
+                limitElements.limitLines.push(limitLine);
+                this.limitLines.push(limitLine);
+            }
+
+            this.seriesLimits.set(series, limitElements);
+        },
+        clearLimitLines(series) {
+            const seriesLimits = this.seriesLimits.get(series);
+
+            if (seriesLimits) {
+                seriesLimits.limitLines.forEach(function (line) {
+                    this.limitLines.splice(this.limitLines.indexOf(line), 1);
+                    line.destroy();
+                }, this);
+
+                this.seriesLimits.delete(series);
+            }
+        },
         canDraw() {
             if (!this.offset.x || !this.offset.y) {
                 return false;
@@ -337,6 +412,10 @@ export default {
 
             return true;
         },
+        updateLimitsAndDraw() {
+            this.drawLimitLines();
+            this.scheduleDraw();
+        },
         scheduleDraw() {
             if (!this.drawScheduled) {
                 requestAnimationFrame(this.draw);
@@ -385,6 +464,97 @@ export default {
             this.pointSets.forEach(this.drawPoints, this);
             this.alarmSets.forEach(this.drawAlarmPoints, this);
         },
+        drawLimitLines() {
+            if (this.canDraw()) {
+                this.updateViewport();
+
+                if (!this.drawAPI.origin) {
+                    return;
+                }
+
+                Array.from(this.$refs.limitArea.children).forEach((el) => el.remove());
+                let limitPointOverlap = [];
+                this.limitLines.forEach((limitLine) => {
+                    let limitContainerEl = this.$refs.limitArea;
+                    limitLine.limits.forEach((limit) => {
+                        const showLabels = this.showLabels(limit.seriesKey);
+                        if (showLabels) {
+                            const overlap = this.getLimitOverlap(limit, limitPointOverlap);
+                            limitPointOverlap.push(overlap);
+                            let limitLabelEl = this.getLimitLabel(limit, overlap);
+                            limitContainerEl.appendChild(limitLabelEl);
+                        }
+
+                        let limitEl = this.getLimitElement(limit);
+                        limitContainerEl.appendChild(limitEl);
+
+                    }, this);
+                });
+            }
+        },
+        showLabels(seriesKey) {
+            return this.showLimitLineLabels.seriesKey
+                    && (this.showLimitLineLabels.seriesKey === seriesKey);
+        },
+        getLimitElement(limit) {
+            let point = {
+                left: 0,
+                top: this.drawAPI.y(limit.point.y)
+            };
+            let LimitLineClass = Vue.extend(LimitLine);
+            const component = new LimitLineClass({
+                propsData: {
+                    point,
+                    limit
+                }
+            });
+            component.$mount();
+
+            return component.$el;
+        },
+        getLimitOverlap(limit, overlapMap) {
+            //calculate if limit lines are too close to each other
+            let limitTop = this.drawAPI.y(limit.point.y);
+            const needsVerticalAdjustment = limitTop - CLEARANCE <= 0;
+            let needsHorizontalAdjustment = false;
+            overlapMap.forEach(value => {
+                let diffTop;
+                if (limitTop > value.overlapTop) {
+                    diffTop = limitTop - value.overlapTop;
+                } else {
+                    diffTop = value.overlapTop - limitTop;
+                }
+
+                //need to compare +ves to +ves and -ves to -ves
+                if (!needsHorizontalAdjustment
+                    && Math.abs(diffTop) <= CLEARANCE
+                    && value.needsHorizontalAdjustment !== true) {
+                    needsHorizontalAdjustment = true;
+                }
+            });
+
+            return {
+                needsHorizontalAdjustment,
+                needsVerticalAdjustment,
+                overlapTop: limitTop
+            };
+        },
+        getLimitLabel(limit, overlap) {
+            let point = {
+                left: 0,
+                top: this.drawAPI.y(limit.point.y)
+            };
+            let LimitLabelClass = Vue.extend(LimitLabel);
+            const component = new LimitLabelClass({
+                propsData: {
+                    limit: Object.assign({}, overlap, limit),
+                    point
+                }
+            });
+            component.$mount();
+
+            return component.$el;
+        },
         drawAlarmPoints(alarmSet) {
             this.drawAPI.drawLimitPoints(
                 alarmSet.points,
@@ -401,11 +571,12 @@ export default {
                 chartElement.series.get('markerShape')
             );
         },
-        drawLine(chartElement) {
+        drawLine(chartElement, disconnected) {
             this.drawAPI.drawLine(
                 chartElement.getBuffer(),
                 chartElement.color().asRGBAArray(),
-                chartElement.count
+                chartElement.count,
+                disconnected
             );
         },
         drawHighlights() {

src/plugins/plot/chart/limitUtil.js

@@ -0,0 +1,32 @@
+export function getLimitClass(limit, prefix) {
+    let cssClass = '';
+    //If color exists then use it, fall back to the cssClass
+    if (limit.color) {
+        cssClass = `${cssClass} ${prefix}${limit.color}`;
+    } else if (limit.cssClass) {
+        cssClass = `${cssClass}${limit.cssClass}`;
+    }
+
+    // If we applied the cssClass then skip these classes
+    if (limit.cssClass === undefined) {
+        if (limit.isUpper) {
+            cssClass = `${cssClass} ${prefix}upr`;
+        } else {
+            cssClass = `${cssClass} ${prefix}lwr`;
+        }
+
+        if (limit.level) {
+            cssClass = `${cssClass} ${prefix}${limit.level}`;
+        }
+
+        if (limit.needsHorizontalAdjustment) {
+            cssClass = `${cssClass} --align-label-right`;
+        }
+
+        if (limit.needsVerticalAdjustment) {
+            cssClass = `${cssClass} --align-label-below`;
+        }
+    }
+
+    return cssClass;
+}

src/plugins/plot/configuration/PlotSeries.js

@@ -97,7 +97,8 @@ export default class PlotSeries extends Model {
             markers: true,
             markerShape: 'point',
             markerSize: 2.0,
-            alarmMarkers: true
+            alarmMarkers: true,
+            limitLines: false
         };
     }
 
@@ -115,9 +116,26 @@ export default class PlotSeries extends Model {
         this.domainObject = options.domainObject;
         this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
         this.limitEvaluator = this.openmct.telemetry.limitEvaluator(options.domainObject);
+        this.limitDefinition = this.openmct.telemetry.limitDefinition(options.domainObject);
+        this.limits = [];
+        this.limitDefinition.limits().then(response => {
+            this.limits = [];
+
+            if (response) {
+                this.limits = response;
+            }
+
+            this.emit('limits', this);
+
+        });
+        this.openmct.time.on('bounds', this.updateLimits);
         this.on('destroy', this.onDestroy, this);
     }
 
+    updateLimits(bounds) {
+        this.emit('limitBounds', bounds);
+    }
+
     locateOldObject(oldStyleParent) {
         return oldStyleParent.useCapability('composition')
             .then(function (children) {

src/plugins/plot/inspector/PlotOptionsItem.vue

@@ -60,6 +60,14 @@
                     {{ alarmMarkers ? "Enabled" : "Disabled" }}
                 </div>
             </li>
+            <li class="grid-row">
+                <div class="grid-cell label"
+                     title="Display lines visually denoting alarm limits."
+                >Limit lines</div>
+                <div class="grid-cell value">
+                    {{ limitLines ? "Enabled" : "Disabled" }}
+                </div>
+            </li>
             <li class="grid-row">
                 <div class="grid-cell label"
                      title="The plot line and marker color for this series."
@@ -135,6 +143,9 @@ export default {
         alarmMarkers() {
             return this.series.get('alarmMarkers');
         },
+        limitLines() {
+            return this.series.get('limitLines');
+        },
         seriesHexColor() {
             return this.series.get('color').asHexString();
         }

src/plugins/plot/inspector/forms/SeriesForm.vue

@@ -91,6 +91,17 @@
                 >
             </div>
         </li>
+        <li class="grid-row">
+            <div class="grid-cell label"
+                 title="Display limit lines"
+            >Limit lines</div>
+            <div class="grid-cell value">
+                <input v-model="limitLines"
+                       type="checkbox"
+                       @change="updateForm('limitLines')"
+                >
+            </div>
+        </li>
         <li v-show="markers || alarmMarkers"
             class="grid-row"
         >
@@ -168,6 +179,7 @@ export default {
             markers: this.series.get('markers'),
             markerShape: this.series.get('markerShape'),
             alarmMarkers: this.series.get('alarmMarkers'),
+            limitLines: this.series.get('limitLines'),
             markerSize: this.series.get('markerSize'),
             validation: {},
             swatchActive: false
@@ -240,6 +252,11 @@ export default {
                     modelProp: 'alarmMarkers',
                     coerce: Boolean,
                     objectPath: this.dynamicPathForKey('alarmMarkers')
+                },
+                {
+                    modelProp: 'limitLines',
+                    coerce: Boolean,
+                    objectPath: this.dynamicPathForKey('limitLines')
                 }
             ];
 

src/plugins/plot/legend/PlotLegend.vue

@@ -48,7 +48,7 @@
                                         :highlights="highlights"
                                         :value-to-show-when-collapsed="legend.get('valueToShowWhenCollapsed')"
                                         :series-object="seriesObject"
-                                        :closest="seriesObject.closest"
+                                        @legendHoverChanged="legendHoverChanged"
             />
         </div>
         <!-- EXPANDED PLOT LEGEND -->
@@ -89,6 +89,7 @@
                                                :series-object="seriesObject"
                                                :highlights="highlights"
                                                :legend="legend"
+                                               @legendHoverChanged="legendHoverChanged"
                     />
                 </tbody>
             </table>
@@ -133,19 +134,36 @@ export default {
     },
     data() {
         return {
-            isLegendHidden: this.legend.get('hideLegendWhenSmall') !== true,
-            isLegendExpanded: this.legend.get('expanded') === true,
-            showTimestampWhenExpanded: this.legend.get('showTimestampWhenExpanded') === true,
-            showValueWhenExpanded: this.legend.get('showValueWhenExpanded') === true,
-            showUnitsWhenExpanded: this.legend.get('showUnitsWhenExpanded') === true,
-            showMinimumWhenExpanded: this.legend.get('showMinimumWhenExpanded') === true,
-            showMaximumWhenExpanded: this.legend.get('showMaximumWhenExpanded') === true
+            isLegendExpanded: this.legend.get('expanded') === true
         };
     },
+    computed: {
+        showUnitsWhenExpanded() {
+            return this.legend.get('showUnitsWhenExpanded') === true;
+        },
+        showMinimumWhenExpanded() {
+            return this.legend.get('showMinimumWhenExpanded') === true;
+        },
+        showMaximumWhenExpanded() {
+            return this.legend.get('showMaximumWhenExpanded') === true;
+        },
+        showValueWhenExpanded() {
+            return this.legend.get('showValueWhenExpanded') === true;
+        },
+        showTimestampWhenExpanded() {
+            return this.legend.get('showTimestampWhenExpanded') === true;
+        },
+        isLegendHidden() {
+            return this.legend.get('hideLegendWhenSmall') === true;
+        }
+    },
     methods: {
         expandLegend() {
             this.isLegendExpanded = !this.isLegendExpanded;
             this.legend.set('expanded', this.isLegendExpanded);
+        },
+        legendHoverChanged(data) {
+            this.$emit('legendHoverChanged', data);
         }
     }
 };

src/plugins/plot/legend/PlotLegendItemCollapsed.vue

@@ -24,6 +24,8 @@
      :class="{
          'is-status--missing': isMissing
      }"
+     @mouseover="toggleHover(true)"
+     @mouseleave="toggleHover(false)"
 >
     <div class="plot-series-swatch-and-name">
         <span class="plot-series-color-swatch"
@@ -47,6 +49,8 @@
 </template>
 <script>
 
+import {getLimitClass} from "@/plugins/plot/chart/limitUtil";
+
 export default {
     props: {
         valueToShowWhenCollapsed: {
@@ -108,7 +112,7 @@ export default {
             if (closest) {
                 this.formattedYValue = seriesObject.formatY(closest);
                 this.formattedXValue = seriesObject.formatX(closest);
-                this.mctLimitStateClass = closest.mctLimitState ? `${closest.mctLimitState.cssClass}` : '';
+                this.mctLimitStateClass = closest.mctLimitState ? getLimitClass(closest.mctLimitState, 'c-plot-limit--') : '';
             } else {
                 this.formattedYValue = '';
                 this.formattedXValue = '';
@@ -121,6 +125,12 @@ export default {
             } else {
                 this.formattedYValueFromStats = '';
             }
+        },
+        toggleHover(hover) {
+            this.hover = hover;
+            this.$emit('legendHoverChanged', {
+                seriesKey: this.hover ? this.seriesObject.keyString : ''
+            });
         }
     }
 };

src/plugins/plot/legend/PlotLegendItemExpanded.vue

@@ -25,6 +25,8 @@
     :class="{
         'is-status--missing': isMissing
     }"
+    @mouseover="toggleHover(true)"
+    @mouseleave="toggleHover(false)"
 >
     <td class="plot-series-swatch-and-name">
         <span class="plot-series-color-swatch"
@@ -72,6 +74,8 @@
 </template>
 
 <script>
+import {getLimitClass} from "@/plugins/plot/chart/limitUtil";
+
 export default {
     props: {
         seriesObject: {
@@ -94,11 +98,6 @@ export default {
     },
     data() {
         return {
-            showTimestampWhenExpanded: this.legend.get('showTimestampWhenExpanded'),
-            showValueWhenExpanded: this.legend.get('showValueWhenExpanded'),
-            showUnitsWhenExpanded: this.legend.get('showUnitsWhenExpanded'),
-            showMinimumWhenExpanded: this.legend.get('showMinimumWhenExpanded'),
-            showMaximumWhenExpanded: this.legend.get('showMaximumWhenExpanded'),
             isMissing: false,
             colorAsHexString: '',
             name: '',
@@ -110,6 +109,23 @@ export default {
             mctLimitStateClass: ''
         };
     },
+    computed: {
+        showUnitsWhenExpanded() {
+            return this.legend.get('showUnitsWhenExpanded') === true;
+        },
+        showMinimumWhenExpanded() {
+            return this.legend.get('showMinimumWhenExpanded') === true;
+        },
+        showMaximumWhenExpanded() {
+            return this.legend.get('showMaximumWhenExpanded') === true;
+        },
+        showValueWhenExpanded() {
+            return this.legend.get('showValueWhenExpanded') === true;
+        },
+        showTimestampWhenExpanded() {
+            return this.legend.get('showTimestampWhenExpanded') === true;
+        }
+    },
     watch: {
         highlights(newHighlights) {
             const highlightedObject = newHighlights.find(highlight => highlight.series.keyString === this.seriesObject.keyString);
@@ -133,7 +149,7 @@ export default {
             if (closest) {
                 this.formattedYValue = seriesObject.formatY(closest);
                 this.formattedXValue = seriesObject.formatX(closest);
-                this.mctLimitStateClass = seriesObject.closest.mctLimitState ? seriesObject.closest.mctLimitState.cssClass : '';
+                this.mctLimitStateClass = seriesObject.closest.mctLimitState ? getLimitClass(seriesObject.closest.mctLimitState, 'c-plot-limit--') : '';
             } else {
                 this.formattedYValue = '';
                 this.formattedXValue = '';
@@ -148,6 +164,12 @@ export default {
                 this.formattedMinY = '';
                 this.formattedMaxY = '';
             }
+        },
+        toggleHover(hover) {
+            this.hover = hover;
+            this.$emit('legendHoverChanged', {
+                seriesKey: this.hover ? this.seriesObject.keyString : ''
+            });
         }
     }
 };

src/plugins/plot/lib/ColorHelper.js

@@ -21,36 +21,36 @@
  *****************************************************************************/
 
 export const COLOR_PALETTE = [
-    [0x20, 0xB2, 0xAA],
-    [0x9A, 0xCD, 0x32],
-    [0xFF, 0x8C, 0x00],
-    [0xD2, 0xB4, 0x8C],
-    [0x40, 0xE0, 0xD0],
-    [0x41, 0x69, 0xFF],
-    [0xFF, 0xD7, 0x00],
-    [0x6A, 0x5A, 0xCD],
-    [0xEE, 0x82, 0xEE],
-    [0xCC, 0x99, 0x66],
-    [0x99, 0xCC, 0xCC],
-    [0x66, 0xCC, 0x33],
-    [0xFF, 0xCC, 0x00],
-    [0xFF, 0x66, 0x33],
-    [0xCC, 0x66, 0xFF],
-    [0xFF, 0x00, 0x66],
-    [0xFF, 0xFF, 0x00],
-    [0x80, 0x00, 0x80],
-    [0x00, 0x86, 0x8B],
-    [0x00, 0x8A, 0x00],
-    [0xFF, 0x00, 0x00],
-    [0x00, 0x00, 0xFF],
-    [0xF5, 0xDE, 0xB3],
-    [0xBC, 0x8F, 0x8F],
-    [0x46, 0x82, 0xB4],
-    [0xFF, 0xAF, 0xAF],
-    [0x43, 0xCD, 0x80],
-    [0xCD, 0xC1, 0xC5],
-    [0xA0, 0x52, 0x2D],
-    [0x64, 0x95, 0xED]
+    [0x00, 0x37, 0xFF],
+    [0xF0, 0x60, 0x00],
+    [0x00, 0x70, 0x40],
+    [0xFB, 0x49, 0x49],
+    [0xC8, 0x00, 0xCF],
+    [0x55, 0x77, 0xF2],
+    [0xFF, 0xA6, 0x3D],
+    [0x05, 0xA3, 0x00],
+    [0xF0, 0x00, 0x6C],
+    [0x77, 0x17, 0x7A],
+    [0x23, 0xA9, 0xDB],
+    [0xFA, 0xF0, 0x6F],
+    [0x4E, 0xF0, 0x48],
+    [0xAD, 0x50, 0x72],
+    [0x94, 0x25, 0xEA],
+    [0x21, 0x87, 0x82],
+    [0x8F, 0x6E, 0x47],
+    [0xf0, 0x59, 0xcb],
+    [0x34, 0xB6, 0x7D],
+    [0x6A, 0x36, 0xFF],
+    [0x56, 0xF0, 0xE8],
+    [0xA1, 0x8C, 0x1C],
+    [0xCB, 0xE1, 0x44],
+    [0xFF, 0x84, 0x9E],
+    [0xB7, 0x79, 0xE7],
+    [0x8C, 0xC9, 0xFD],
+    [0xDB, 0xAA, 0x6E],
+    [0xB8, 0xDF, 0x97],
+    [0xFF, 0xBC, 0xDA],
+    [0xD3, 0xB6, 0xDE]
 ];
 
 export function isDefaultColor(color) {

src/plugins/plot/pluginSpec.js

@@ -34,8 +34,10 @@ describe("the plugin", function () {
     let child;
     let openmct;
     let telemetryPromise;
+    let telemetryPromiseResolve;
     let cleanupFirst;
     let mockObjectPath;
+    let telemetrylimitProvider;
 
     beforeEach((done) => {
         mockObjectPath = [
@@ -77,7 +79,6 @@ describe("the plugin", function () {
 
         openmct = createOpenMct();
 
-        let telemetryPromiseResolve;
         telemetryPromise = new Promise((resolve) => {
             telemetryPromiseResolve = resolve;
         });
@@ -88,6 +89,45 @@ describe("the plugin", function () {
             return telemetryPromise;
         });
 
+        telemetrylimitProvider = jasmine.createSpyObj('telemetrylimitProvider', [
+            'supportsLimits',
+            'getLimits',
+            'getLimitEvaluator'
+        ]);
+        telemetrylimitProvider.supportsLimits.and.returnValue(true);
+        telemetrylimitProvider.getLimits.and.returnValue({
+            limits: function () {
+                return Promise.resolve({
+                    WARNING: {
+                        low: {
+                            cssClass: "is-limit--lwr is-limit--yellow",
+                            'some-key': -0.5
+                        },
+                        high: {
+                            cssClass: "is-limit--upr is-limit--yellow",
+                            'some-key': 0.5
+                        }
+                    },
+                    DISTRESS: {
+                        low: {
+                            cssClass: "is-limit--lwr is-limit--red",
+                            'some-key': -0.9
+                        },
+                        high: {
+                            cssClass: "is-limit--upr is-limit--red",
+                            'some-key': 0.9
+                        }
+                    }
+                });
+            }
+        });
+        telemetrylimitProvider.getLimitEvaluator.and.returnValue({
+            evaluate: function () {
+                return {};
+            }
+        });
+        openmct.telemetry.addProvider(telemetrylimitProvider);
+
         openmct.install(new PlotVuePlugin());
 
         element = document.createElement("div");
@@ -657,6 +697,25 @@ describe("the plugin", function () {
                 done();
             });
         });
+
+        describe('limits', () => {
+
+            it('lines are not displayed by default', () => {
+                let limitEl = element.querySelectorAll(".js-limit-area hr");
+                expect(limitEl.length).toBe(0);
+            });
+
+            it('lines are displayed when configuration is set to true', (done) => {
+                config.series.models[0].set('limitLines', true);
+
+                Vue.nextTick(() => {
+                    let limitEl = element.querySelectorAll(".js-limit-area .js-limit-line");
+                    expect(limitEl.length).toBe(4);
+                    done();
+                });
+
+            });
+        });
     });
 
     describe('the inspector view', () => {
@@ -803,7 +862,7 @@ describe("the plugin", function () {
                 expandControl.dispatchEvent(clickEvent);
 
                 const plotOptionsProperties = browseOptionsEl.querySelectorAll('.js-plot-options-browse-properties .grid-row');
-                expect(plotOptionsProperties.length).toEqual(5);
+                expect(plotOptionsProperties.length).toEqual(6);
             });
         });
 
@@ -845,7 +904,7 @@ describe("the plugin", function () {
                 expandControl.dispatchEvent(clickEvent);
 
                 const plotOptionsProperties = editOptionsEl.querySelectorAll(".js-plot-options-edit-properties .grid-row");
-                expect(plotOptionsProperties.length).toEqual(6);
+                expect(plotOptionsProperties.length).toEqual(7);
             });
 
             it('shows yKeyOptions', () => {

src/plugins/plugins.js

@@ -46,6 +46,7 @@ define([
     './filters/plugin',
     './objectMigration/plugin',
     './goToOriginalAction/plugin',
+    './openInNewTabAction/plugin',
     './clearData/plugin',
     './webPage/plugin',
     './condition/plugin',
@@ -91,6 +92,7 @@ define([
     Filters,
     ObjectMigration,
     GoToOriginalAction,
+    OpenInNewTabAction,
     ClearData,
     WebPagePlugin,
     ConditionPlugin,
@@ -190,6 +192,7 @@ define([
     plugins.Filters = Filters;
     plugins.ObjectMigration = ObjectMigration.default;
     plugins.GoToOriginalAction = GoToOriginalAction.default;
+    plugins.OpenInNewTabAction = OpenInNewTabAction.default;
     plugins.ClearData = ClearData;
     plugins.WebPage = WebPagePlugin.default;
     plugins.Espresso = Espresso.default;

src/plugins/remove/pluginSpec.js

@@ -19,8 +19,6 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import RemoveActionPlugin from './plugin.js';
-import RemoveAction from './RemoveAction.js';
 import {
     createOpenMct,
     resetApplicationState,
@@ -36,10 +34,6 @@ describe("The Remove Action plugin", () => {
 
     // this setups up the app
     beforeEach((done) => {
-        const appHolder = document.createElement('div');
-        appHolder.style.width = '640px';
-        appHolder.style.height = '480px';
-
         openmct = createOpenMct();
 
         childObject = getMockObjects({
@@ -64,11 +58,10 @@ describe("The Remove Action plugin", () => {
             }
         }).folder;
 
-        // already installed by default, but never hurts, just adds to context menu
-        openmct.install(RemoveActionPlugin());
-
         openmct.on('start', done);
-        openmct.startHeadless(appHolder);
+        openmct.startHeadless();
+
+        removeAction = openmct.actions._allActions.remove;
     });
 
     afterEach(() => {
@@ -76,13 +69,12 @@ describe("The Remove Action plugin", () => {
     });
 
     it("should be defined", () => {
-        expect(RemoveActionPlugin).toBeDefined();
+        expect(removeAction).toBeDefined();
     });
 
     describe("when removing an object from a parent composition", () => {
 
         beforeEach(() => {
-            removeAction = new RemoveAction(openmct);
             spyOn(removeAction, 'removeFromComposition').and.callThrough();
             spyOn(removeAction, 'inNavigationPath').and.returnValue(false);
             spyOn(openmct.objects, 'mutate').and.callThrough();
@@ -103,7 +95,6 @@ describe("The Remove Action plugin", () => {
     describe("when determining the object is applicable", () => {
 
         beforeEach(() => {
-            removeAction = new RemoveAction(openmct);
             spyOn(removeAction, 'appliesTo').and.callThrough();
         });
 

src/plugins/tabs/pluginSpec.js

@@ -113,7 +113,7 @@ describe('the plugin', function () {
         let tabsLayoutViewProvider;
         let mockComposition;
 
-        beforeEach((done) => {
+        beforeEach(() => {
             mockComposition = new EventEmitter();
             mockComposition.load = () => {
                 return Promise.resolve([telemetryItem1]);
@@ -125,7 +125,8 @@ describe('the plugin', function () {
             tabsLayoutViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'tabs');
             let view = tabsLayoutViewProvider.view(testViewObject, []);
             view.show(child, true);
-            Vue.nextTick(done);
+
+            return Vue.nextTick();
         });
 
         it('provides a view', () => {
@@ -150,7 +151,7 @@ describe('the plugin', function () {
         let mockComposition;
         let count = 0;
 
-        beforeEach((done) => {
+        beforeEach(() => {
             mockComposition = new EventEmitter();
             mockComposition.load = () => {
                 if (count === 0) {
@@ -168,7 +169,8 @@ describe('the plugin', function () {
             tabsLayoutViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'tabs');
             let view = tabsLayoutViewProvider.view(testViewObject, []);
             view.show(child, true);
-            Vue.nextTick(done);
+
+            return Vue.nextTick();
         });
 
         it ('renders a tab for each item', () => {

src/plugins/telemetryTable/components/table.scss

@@ -190,6 +190,11 @@
     }
 }
 
+// All tables
+td {
+    @include isLimit();
+}
+
 /******************************* SPECIFIC CASE WRAPPERS */
 .is-editing {
     .c-telemetry-table__headers__labels {

src/plugins/themes/espresso-theme.scss

@@ -10,6 +10,7 @@
 @import "../../styles/glyphs";
 @import "../../styles/global";
 @import "../../styles/status";
+@import "../../styles/limits";
 @import "../../styles/controls";
 @import "../../styles/forms";
 @import "../../styles/table";

src/plugins/themes/maelstrom-theme.scss

@@ -10,6 +10,7 @@
 @import "../../styles/glyphs";
 @import "../../styles/global";
 @import "../../styles/status";
+@import "../../styles/limits";
 @import "../../styles/controls";
 @import "../../styles/forms";
 @import "../../styles/table";

src/plugins/themes/snow-theme.scss

@@ -10,6 +10,7 @@
 @import "../../styles/glyphs";
 @import "../../styles/global";
 @import "../../styles/status";
+@import "../../styles/limits";
 @import "../../styles/controls";
 @import "../../styles/forms";
 @import "../../styles/table";

src/plugins/timeConductor/Conductor.vue

@@ -83,9 +83,9 @@
                     @update="timePopUpdate"
                 />
                 <button
-                    @click="showTimePopupStart"
-                    class="c-button c-conductor__delta-button"
                     ref="startOffset"
+                    class="c-button c-conductor__delta-button"
+                    @click="showTimePopupStart"
                 >
                     {{ offsets.start }}
                 </button>
@@ -135,7 +135,7 @@
                     class="c-button c-conductor__delta-button"
                     @click="showTimePopupEnd"
                 >
-                    {{offsets.end}}
+                    {{ offsets.end }}
                 </button>
             </div>
 

src/plugins/timeline/pluginSpec.js

@@ -50,9 +50,6 @@ describe('the plugin', function () {
                 }
             }
         ];
-        const appHolder = document.createElement('div');
-        appHolder.style.width = '640px';
-        appHolder.style.height = '480px';
 
         openmct = createOpenMct();
         openmct.install(new TimelinePlugin());
@@ -73,7 +70,7 @@ describe('the plugin', function () {
         });
 
         openmct.on('start', done);
-        openmct.startHeadless(appHolder);
+        openmct.startHeadless();
     });
 
     afterEach(() => {
@@ -100,7 +97,7 @@ describe('the plugin', function () {
     describe('the view', () => {
         let timelineView;
 
-        beforeEach((done) => {
+        beforeEach(() => {
             const testViewObject = {
                 id: "test-object",
                 type: "time-strip"
@@ -110,7 +107,8 @@ describe('the plugin', function () {
             timelineView = applicableViews.find((viewProvider) => viewProvider.key === 'time-strip.view');
             let view = timelineView.view(testViewObject, element);
             view.show(child, true);
-            Vue.nextTick(done);
+
+            return Vue.nextTick();
         });
 
         it('provides a view', () => {

src/styles/_constants-espresso.scss

@@ -314,12 +314,21 @@ $colorTelemStale: pushBack($colorBodyFg, 20%);
 $styleTelemStale: italic;
 
 // Limits
-$colorLimitYellowBg: #ac7300;
-$colorLimitYellowFg: #ffe64d;
-$colorLimitYellowIc: #ffb607;
+$colorLimitYellowBg: #B18B05;
+$colorLimitYellowFg: #FEEEB5;
+$colorLimitYellowIc: #FDC707;
+$colorLimitOrangeBg: #B36B00;
+$colorLimitOrangeFg: #FFE0B2;
+$colorLimitOrangeIc: #ff9900;
 $colorLimitRedBg: #940000;
 $colorLimitRedFg: #ffa489;
 $colorLimitRedIc: #ff4222;
+$colorLimitPurpleBg: #891BB3;
+$colorLimitPurpleFg: #EDBEFF;
+$colorLimitPurpleIc: #c327ff;
+$colorLimitCyanBg: #4BA6B3;
+$colorLimitCyanFg: #D3FAFF;
+$colorLimitCyanIc: #6BEDFF;
 
 // Bubble colors
 $colorInfoBubbleBg: #dddddd;
@@ -359,10 +368,11 @@ $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 $legendTableHeadBg: $colorTabHeaderBg;
+$colorPlotLimitLineBg: rgba($colorBodyBg, 0.2);
 
 // Tree
 $colorTreeBg: transparent;
-$colorItemTreeHoverBg: rgba(#fff, 0.03);
+$colorItemTreeHoverBg: rgba(#fff, 0.1);
 $colorItemTreeHoverFg: #fff;
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used

src/styles/_constants-maelstrom.scss

@@ -318,12 +318,21 @@ $colorTelemStale: pushBack($colorBodyFg, 20%);
 $styleTelemStale: italic;
 
 // Limits
-$colorLimitYellowBg: #ac7300;
-$colorLimitYellowFg: #ffe64d;
-$colorLimitYellowIc: #ffb607;
+$colorLimitYellowBg: #B18B05;
+$colorLimitYellowFg: #FEEEB5;
+$colorLimitYellowIc: #FDC707;
+$colorLimitOrangeBg: #B36B00;
+$colorLimitOrangeFg: #FFE0B2;
+$colorLimitOrangeIc: #ff9900;
 $colorLimitRedBg: #940000;
 $colorLimitRedFg: #ffa489;
 $colorLimitRedIc: #ff4222;
+$colorLimitPurpleBg: #891BB3;
+$colorLimitPurpleFg: #EDBEFF;
+$colorLimitPurpleIc: #c327ff;
+$colorLimitCyanBg: #4BA6B3;
+$colorLimitCyanFg: #D3FAFF;
+$colorLimitCyanIc: #6BEDFF;
 
 // Bubble colors
 $colorInfoBubbleBg: #dddddd;
@@ -363,6 +372,7 @@ $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 $legendTableHeadBg: rgba($colorBodyFg, 0.15);
+$colorPlotLimitLineBg: rgba($colorBodyBg, 0.2);
 
 // Tree
 $colorTreeBg: transparent;

src/styles/_constants-snow.scss

@@ -317,9 +317,18 @@ $styleTelemStale: italic;
 $colorLimitYellowBg: #ffe64d;
 $colorLimitYellowFg: #7f4f20;
 $colorLimitYellowIc: #e7a115;
+$colorLimitOrangeBg: #B36B00;
+$colorLimitOrangeFg: #FFE0B2;
+$colorLimitOrangeIc: #ff9900;
 $colorLimitRedBg: #ff0000;
 $colorLimitRedFg: #fff;
 $colorLimitRedIc: #ffa99a;
+$colorLimitPurpleBg: #891BB3;
+$colorLimitPurpleFg: #EDBEFF;
+$colorLimitPurpleIc: #c327ff;
+$colorLimitCyanBg: #4BA6B3;
+$colorLimitCyanFg: #D3FAFF;
+$colorLimitCyanIc: #1795c0;
 
 // Bubble colors
 $colorInfoBubbleBg: $colorMenuBg;
@@ -359,6 +368,7 @@ $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 $legendTableHeadBg: rgba($colorBodyFg, 0.15);
+$colorPlotLimitLineBg: rgba($colorBodyBg, 0.4);
 
 // Tree
 $colorTreeBg: transparent;

src/styles/_constants.scss

@@ -212,6 +212,7 @@ $glyph-icon-3-dots: '\ea37';
 $glyph-icon-grid-on: '\ea38';
 $glyph-icon-grid-off: '\ea39';
 $glyph-icon-camera: '\ea3a';
+$glyph-icon-folders-collapse: '\ea3b';
 $glyph-icon-activity: '\eb00';
 $glyph-icon-activity-mode: '\eb01';
 $glyph-icon-autoflow-tabular: '\eb02';

src/styles/_glyphs.scss

@@ -144,6 +144,7 @@
 .icon-grid-on {  @include glyphBefore($glyph-icon-grid-on); }
 .icon-grid-off {  @include glyphBefore($glyph-icon-grid-off); }
 .icon-camera {  @include glyphBefore($glyph-icon-camera); }
+.icon-folders-collapse {  @include glyphBefore($glyph-icon-folders-collapse); }
 .icon-activity {  @include glyphBefore($glyph-icon-activity); }
 .icon-activity-mode {  @include glyphBefore($glyph-icon-activity-mode); }
 .icon-autoflow-tabular {  @include glyphBefore($glyph-icon-autoflow-tabular); }

src/styles/_legacy-plots.scss

@@ -136,6 +136,7 @@ mct-plot {
         left: nth($plotDisplayArea, 4);
 
         .gl-plot-display-area {
+            overflow: hidden;
             position: absolute;
             top: 0;
             right: 0;
@@ -531,19 +532,16 @@ mct-plot {
 }
 
 /***************** GENERAL STYLES, ALL STATES */
-.plot-legend-item {
+.plot-legend-item, .plot-series-limit-label {
     // General styles for legend items, both expanded and collapsed legend states
     > * + * {
         margin-left: $interiorMarginSm;
     }
 
     .plot-series-color-swatch {
-        border-radius: 30%; //$smallCr;
-        border: 1px solid $colorBodyBg;
+        @include colorSwatch();
         display: inline-block;
         flex: 0 0 auto;
-        height: $plotSwatchD;
-        width: $plotSwatchD;
     }
     .plot-series-name {
         display: inline;
@@ -552,6 +550,7 @@ mct-plot {
 
     .plot-series-value {
         @include ellipsize();
+        @include isLimit();
     }
 }
 

src/styles/_limits.scss

@@ -0,0 +1,270 @@
+$plotLimitLineSize: 1px;
+$plotLimitDashWidthOffset: 10px;
+$lineBlocker: $colorPlotLimitLineBg;
+$plotLimitDashWidthSeverity: 50px;
+$plotLimitDashWidthCritical: $plotLimitDashWidthSeverity - $plotLimitDashWidthOffset;
+$plotLimitDashWidthDistress: $plotLimitDashWidthCritical - $plotLimitDashWidthOffset;
+$plotLimitDashWidthWarning: $plotLimitDashWidthDistress - $plotLimitDashWidthOffset;
+$plotLimitDashWidthWatch: $plotLimitDashWidthWarning - $plotLimitDashWidthOffset;
+
+@mixin plotLimitLine($c, $breakPerc) {
+    background: $lineBlocker linear-gradient(
+                    90deg,
+                    $c $breakPerc,
+                    transparent $breakPerc,
+                    transparent 100%
+    ) repeat-x;
+}
+
+@mixin plotLimitDirectionGradient($c, $deg: 0deg) {
+    background: linear-gradient(
+                    $deg,
+                    $c,
+                    transparent
+    )
+}
+
+@mixin plotLimitLineUpper($c) {
+    $breakPerc: 80%;
+    @include plotLimitLine($c: $c, $breakPerc: $breakPerc);
+}
+
+@mixin plotLimitLineLower($c) {
+    $breakPerc: 30%;
+    @include plotLimitLine($c: $c, $breakPerc: $breakPerc);
+}
+
+.c-plot-limit-line {
+    box-shadow: $lineBlocker 0 0 0 2px;
+    height: $plotLimitLineSize;
+    width: 100%;
+    position: absolute;
+    z-index: 1;
+
+    // Colors and directions
+    &--purple.c-plot-limit-line--upr {
+        @include plotLimitLineUpper($colorLimitPurpleIc);
+    }
+
+    &--purple.c-plot-limit-line--lwr {
+        @include plotLimitLineLower($colorLimitPurpleIc);
+    }
+
+    &--red.c-plot-limit-line--upr {
+        @include plotLimitLineUpper($colorLimitRedIc);
+    }
+
+    &--red.c-plot-limit-line--lwr {
+        @include plotLimitLineLower($colorLimitRedIc);
+    }
+
+    &--orange.c-plot-limit-line--upr {
+        @include plotLimitLineUpper($colorLimitOrangeIc);
+    }
+
+    &--orange.c-plot-limit-line--lwr {
+        @include plotLimitLineLower($colorLimitOrangeIc);
+    }
+
+    &--yellow.c-plot-limit-line--upr {
+        @include plotLimitLineUpper($colorLimitYellowIc);
+    }
+
+    &--yellow.c-plot-limit-line--lwr {
+        @include plotLimitLineLower($colorLimitYellowIc);
+    }
+
+    &--cyan.c-plot-limit-line--upr {
+        @include plotLimitLineUpper($colorLimitCyanIc);
+    }
+
+    &--cyan.c-plot-limit-line--lwr {
+        @include plotLimitLineLower($colorLimitCyanIc);
+    }
+
+    // Severities
+    &--severe {
+        background-size: $plotLimitDashWidthSeverity 100% !important;
+    }
+
+    &--critical {
+        background-size: $plotLimitDashWidthCritical 100% !important;
+    }
+
+    &--distress {
+        background-size: $plotLimitDashWidthDistress 100% !important;
+    }
+
+    &--warning {
+        background-size: $plotLimitDashWidthWarning 100% !important;
+    }
+
+    &--watch {
+        background-size: $plotLimitDashWidthWatch 100% !important;
+    }
+}
+
+.c-plot-limit {
+    // Holds both label and directional gradient
+    $labelCr: $basicCr;
+    display: flex;
+    position: absolute;
+    width: 100%;
+    z-index: 0;
+
+    &__label {
+        border-width: 1px 1px 0 0;
+        border-style: solid;
+        border-radius: 0 $labelCr 0 0;
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        padding: 2px 4px;
+        transform: translateY(-100%);
+
+        > * + * {
+            margin-left: $interiorMarginSm;
+        }
+    }
+
+    &.--align-label-right {
+        justify-content: flex-end;
+        .c-plot-limit__label {
+            border-radius: $labelCr 0 0 0;
+            border-width: 1px 0 0 1px;
+        }
+    }
+
+    &.--align-label-below {
+        .c-plot-limit__label {
+            border-radius: 0 0 $labelCr 0;
+            border-width: 0 1px 1px 0;
+            transform: translateY(0);
+        }
+        &.--align-label-right {
+            .c-plot-limit__label {
+                border-radius: 0 0 0 $labelCr;
+                border-width: 0 0 1px 1px;
+            }
+        }
+    }
+
+    [class*='icon'] {
+        &:before {
+            display: block;
+            font-family: symbolsfont;
+            font-size: 0.9em;
+        }
+    }
+
+    &__series-color-swatch {
+        @include colorSwatch();
+        display: block;
+        flex: 0 0 auto;
+    }
+
+    &:before {
+        // Direction gradient
+        content: "";
+        display: block;
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 100%;
+        opacity: 0.2;
+    }
+
+    &--upr:before {
+        transform: translateY(-100%);
+    }
+
+    &--lwr:before {
+        transform: scaleY(-1); // This inverts the gradient direction
+    }
+
+    // Label styling
+    &--purple [class*='label'] {
+        background-color: $colorLimitPurpleBg;
+        border-color: $colorLimitPurpleIc;
+        color: $colorLimitPurpleFg;
+    }
+
+    &--red [class*='label'] {
+        background-color: $colorLimitRedBg;
+        border-color: $colorLimitRedIc;
+        color: $colorLimitRedFg;
+    }
+
+    &--orange [class*='label'] {
+        background-color: $colorLimitOrangeBg;
+        border-color: $colorLimitOrangeIc;
+        color: $colorLimitOrangeFg;
+    }
+
+    &--yellow [class*='label'] {
+        background-color: $colorLimitYellowBg;
+        border-color: $colorLimitYellowIc;
+        color: $colorLimitYellowFg;
+    }
+
+    &--cyan [class*='label'] {
+        background-color: $colorLimitCyanBg;
+        border-color: $colorLimitCyanIc;
+        color: $colorLimitCyanFg;
+    }
+
+    // Directional gradients
+    &--purple:before {
+        @include plotLimitDirectionGradient($c: $colorLimitPurpleIc);
+    }
+
+    &--red:before {
+        @include plotLimitDirectionGradient($c: $colorLimitRedIc);
+    }
+
+    &--orange:before {
+        @include plotLimitDirectionGradient($c: $colorLimitOrangeIc);
+    }
+
+    &--yellow:before {
+        @include plotLimitDirectionGradient($c: $colorLimitYellowIc);
+    }
+
+    &--cyan:before {
+        @include plotLimitDirectionGradient($c: $colorLimitCyanIc);
+    }
+}
+
+// Severity icons
+.c-plot-limit__label .c-plot-limit__severity-icon:before {
+    .c-plot-limit--severe & {
+        content: $glyph-icon-alert-triangle;
+    }
+
+    .c-plot-limit--critical & {
+        content: $glyph-icon-alert-rect;
+    }
+
+    .c-plot-limit--distress & {
+        content: $glyph-icon-bell;
+    }
+
+    .c-plot-limit--warning & {
+        content: $glyph-icon-asterisk;
+    }
+
+    .c-plot-limit--watch & {
+        content: $glyph-icon-eye-open;
+    }
+}
+
+// Direction icons
+.c-plot-limit__label .c-plot-limit__direction-icon:before {
+    .c-plot-limit--upr & {
+        content: $glyph-icon-arrow-up;
+    }
+
+    .c-plot-limit--lwr & {
+        content: $glyph-icon-arrow-down;
+    }
+}