Merge branch 'release/2.0.5' into persistence-errors

* Fix timer test

* be explicit about the warnings text

* add full suite to CI to enable CircleCI Checks

* add back in devtool=false for CI env so firefox tests run

* add framework suite

* Don't install webpack HMR in CI

* Fix playwright version installs

* exclude HMR if running tests in any environment

- use NODE_ENV=TEST to exclude webpack HMR

- deparameterize some of the playwright configs

* use lower-case 'test'

* timer hover fix

* conditionally skip for firefox due to missing console events

* increase timeouts to give time for mutation

* no need to close save banner

* remove devtool setting

* revert

* update snapshots

* disable video to save some resources

* use one worker

* more timeouts :)

* Remove `browser.close()` and `page.close()` as it was breaking other tests

* Remove unnecessary awaits and fix func call syntax

* Fix image reset test

* fix restrictedNotebook tests

* revert playwright-ci.config settings

* increase timeout for polling imagery test

* remove unnecessary waits

* disable notebook lock test for chrome-beta as its unreliable

- remove some unnecessary 'wait for save banner' logic

- remove unused await

- mark imagery test as slow in chrome-beta

* LINT!! *shakes fist*

* don't run full e2e suite per commit

* disable video in all configs

* add flakey zoom comment

* exclude webpack HMR in non-development modes

Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2.1
 executors:
   pw-focal-development:
     docker:
-      - image: mcr.microsoft.com/playwright:v1.21.1-focal
+      - image: mcr.microsoft.com/playwright:v1.23.0-focal
     environment:
       NODE_ENV: development # Needed to ensure 'dist' folder created and devDependencies installed
 parameters:
@@ -12,7 +12,7 @@ parameters:
     type: boolean
 commands:
   build_and_install:
-    description: "All steps used to build and install. Will not work on node10"
+    description: "All steps used to build and install. Will use cache if found"
     parameters:
       node-version:
         type: string
@@ -58,10 +58,14 @@ commands:
           ls -latR >> /tmp/artifacts/dir.txt
       - store_artifacts:
           path: /tmp/artifacts/
-  upload_code_covio:
+  generate_e2e_code_cov_report:
-    description: "Command to upload code coverage reports to codecov.io"
+   description: "Generate e2e code coverage artifacts and publish to codecov.io. Needed to that we can ignore the exit code status of the npm run test"
-    steps:
+   parameters:
-        - run: curl -Os https://uploader.codecov.io/latest/linux/codecov;chmod +x codecov;./codecov
+      suite:
+        type: string
+   steps:
+    - run: npm run cov:e2e:report 
+    - run: npm run cov:e2e:<<parameters.suite>>:publish       
 orbs:
   node: circleci/node@4.9.0
   browser-tools: circleci/browser-tools@1.3.0
@@ -114,12 +118,13 @@ jobs:
             - browser-tools/install-chrome:
                 replace-existing: false
       - run: npm run test -- --browsers=<<parameters.browser>>
+      - run: npm run cov:unit:publish
       - save_cache_cmd:
           node-version: <<parameters.node-version>>
       - store_test_results:
           path: dist/reports/tests/
       - store_artifacts:
-          path: dist/reports/
+          path: coverage
       - generate_and_store_version_and_filesystem_artifacts
   e2e-test:
     parameters:
@@ -132,11 +137,22 @@ jobs:
     steps:
       - build_and_install:
           node-version: <<parameters.node-version>>
+      - when: #Only install chrome-beta when running the full suite to save $$$
+          condition:
+            equal: [ "full", <<parameters.suite>> ]
+          steps:
+            - run: npx playwright install chrome-beta
       - run: SHARD="$((${CIRCLE_NODE_INDEX}+1))"; npm run test:e2e:<<parameters.suite>> -- --shard=${SHARD}/${CIRCLE_NODE_TOTAL}
+      - generate_e2e_code_cov_report:
+         suite: <<parameters.suite>>          
       - store_test_results:
           path: test-results/results.xml
       - store_artifacts:
           path: test-results
+      - store_artifacts:
+          path: coverage
+      - store_artifacts:
+          path: html-test-results
       - generate_and_store_version_and_filesystem_artifacts
   perf-test:
     parameters:
@@ -151,19 +167,19 @@ jobs:
           path: test-results/results.xml
       - store_artifacts:
           path: test-results
-      - generate_and_store_version_and_filesystem_artifacts      
+      - store_artifacts:
+          path: html-test-results
+      - generate_and_store_version_and_filesystem_artifacts
 workflows:
   overall-circleci-commit-status: #These jobs run on every commit
     jobs:
       - lint:
-          name: node16-lint
+          name: node14-lint
-          node-version: lts/gallium
-      - unit-test:
-          name: node14-chrome
           node-version: lts/fermium
+      - unit-test:
+          name: node16-chrome
+          node-version: lts/gallium
           browser: ChromeHeadless
-          post-steps:
-            - upload_code_covio
       - unit-test:
           name: node18-chrome
           node-version: "18"

.github/workflows/e2e-pr.yml

@@ -30,7 +30,8 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: '16'
-      - run: npx playwright@1.21.1 install
+      - run: npx playwright@1.23.0 install
+      - run: npx playwright install chrome-beta
       - run: npm install
       - run: npm run test:e2e:full
       - name: Archive test results

.github/workflows/e2e-visual.yml

@@ -17,7 +17,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: '16'
-      - run: npx playwright@1.21.1 install
+      - run: npx playwright@1.23.0 install
       - run: npm install
       - name: Run the e2e visual tests
         run: npm run test:e2e:visual

.gitignore

@@ -15,8 +15,6 @@
 *.idea
 *.iml
 
-# External dependencies
-
 # Build output
 target
 dist
@@ -24,30 +22,24 @@ dist
 # Mac OS X Finder
 .DS_Store
 
-# Closed source libraries
-closed-lib
-
 # Node, Bower dependencies
 node_modules
 bower_components
 
-# Protractor logs
-protractor/logs
-
 # npm-debug log
 npm-debug.log
 
 # karma reports
 report.*.json
 
-# Lighthouse reports
-.lighthouseci
-
 # e2e test artifacts
 test-results
-allure-results
+html-test-results
 
-package-lock.json
+# codecov artifacts
-
+.nyc_output
-#codecov artifacts
+coverage
 codecov
+
+# :(
+package-lock.json

app.js

@@ -12,6 +12,7 @@ const express = require('express');
 const app = express();
 const fs = require('fs');
 const request = require('request');
+const __DEV__ = process.env.NODE_ENV === 'development';
 
 // Defaults
 options.port = options.port || options.p || 8080;
@@ -49,14 +50,18 @@ class WatchRunPlugin {
 }
 
 const webpack = require('webpack');
-const webpackConfig = require('./webpack.dev.js');
+let webpackConfig;
-webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
+if (__DEV__) {
-webpackConfig.plugins.push(new WatchRunPlugin());
+    webpackConfig = require('./webpack.dev');
-
+    webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
-webpackConfig.entry.openmct = [
+    webpackConfig.entry.openmct = [
-    'webpack-hot-middleware/client?reload=true',
+        'webpack-hot-middleware/client?reload=true',
-    webpackConfig.entry.openmct
+        webpackConfig.entry.openmct
-];
+    ];
+    webpackConfig.plugins.push(new WatchRunPlugin());
+} else {
+    webpackConfig = require('./webpack.coverage');
+}
 
 const compiler = webpack(webpackConfig);
 
@@ -68,10 +73,12 @@ app.use(require('webpack-dev-middleware')(
     }
 ));
 
-app.use(require('webpack-hot-middleware')(
+if (__DEV__) {
-    compiler,
+    app.use(require('webpack-hot-middleware')(
-    {}
+        compiler,
-));
+        {}
+    ));
+}
 
 // Expose index.html for development users.
 app.get('/', function (req, res) {

codecov.yml

@@ -13,17 +13,16 @@ coverage:
   round: down
   range: "66...100"
 
-ignore:
+flags:
-
+  unit:
-parsers:
+    carryforward: true 
-  gcov:
+  e2e-ci:
-    branch_detection:
+    carryforward: true
-      conditional: true
+  e2e-full:
-      loop: true
+    carryforward: true    
-      method: false
-      macro: false
 
 comment:
   layout: "reach,diff,flags,files,footer"
   behavior: default
   require_changes: false
+  show_carryforward_flags: true

e2e/fixtures.js

@@ -1,8 +1,13 @@
-/* eslint-disable no-undef */
+/* This file extends the base functionality of the playwright test framework to enable
+ * code coverage instrumentation, console log error detection and working with a 3rd
+ * party Chrome-as-a-service extension called Browserless.
+ */
 
-// This file extends the base functionality of the playwright test framework
 const base = require('@playwright/test');
 const { expect } = require('@playwright/test');
+const fs = require('fs');
+const path = require('path');
+const { v4: uuid } = require('uuid');
 
 /**
  * Takes a `ConsoleMessage` and returns a formatted string
@@ -16,7 +21,30 @@ function consoleMessageToString(msg) {
     at (${url} ${lineNumber}:${columnNumber})`;
 }
 
+//The following is based on https://github.com/mxschmitt/playwright-test-coverage
+// eslint-disable-next-line no-undef
+const istanbulCLIOutput = path.join(process.cwd(), '.nyc_output');
+
+// eslint-disable-next-line no-undef
 exports.test = base.test.extend({
+    //The following is based on https://github.com/mxschmitt/playwright-test-coverage
+    context: async ({ context }, use) => {
+        await context.addInitScript(() =>
+            window.addEventListener('beforeunload', () =>
+                (window).collectIstanbulCoverage(JSON.stringify((window).__coverage__))
+            )
+        );
+        await fs.promises.mkdir(istanbulCLIOutput, { recursive: true });
+        await context.exposeFunction('collectIstanbulCoverage', (coverageJSON) => {
+            if (coverageJSON) {
+                fs.writeFileSync(path.join(istanbulCLIOutput, `playwright_coverage_${uuid()}.json`), coverageJSON);
+            }
+        });
+        await use(context);
+        for (const page of context.pages()) {
+            await page.evaluate(() => (window).collectIstanbulCoverage(JSON.stringify((window).__coverage__)));
+        }
+    },
     page: async ({ baseURL, page }, use) => {
         const messages = [];
         page.on('console', (msg) => messages.push(msg));

e2e/playwright-ci.config.js

@@ -4,28 +4,30 @@
 
 // eslint-disable-next-line no-unused-vars
 const { devices } = require('@playwright/test');
+const MAX_FAILURES = 5;
+const NUM_WORKERS = 2;
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-    retries: 1,
+    retries: 3, //Retries 3 times for a total of 4. When running sharded and with maxFailures = 5, this should ensure that flake is managed without failing the full suite
     testDir: 'tests',
     testIgnore: '**/*.perf.spec.js', //Ignore performance tests and define in playwright-perfromance.config.js
     timeout: 60 * 1000,
     webServer: {
-        command: 'npm run start',
+        command: 'cross-env NODE_ENV=test npm run start',
-        port: 8080,
+        url: 'http://localhost:8080/#',
         timeout: 200 * 1000,
-        reuseExistingServer: !process.env.CI
+        reuseExistingServer: false
     },
-    maxFailures: process.env.CI ? 5 : undefined, //Limits failures to 5 to reduce CI Waste
+    maxFailures: MAX_FAILURES, //Limits failures to 5 to reduce CI Waste
-    workers: 2, //Limit to 2 for CircleCI Agent
+    workers: NUM_WORKERS, //Limit to 2 for CircleCI Agent
     use: {
         baseURL: 'http://localhost:8080/',
         headless: true,
         ignoreHTTPSErrors: true,
         screenshot: 'only-on-failure',
         trace: 'on-first-retry',
-        video: 'on-first-retry'
+        video: 'off'
     },
     projects: [
         {
@@ -36,6 +38,7 @@ const config = {
         },
         {
             name: 'MMOC',
+            testMatch: '**/*.e2e.spec.js', // only run e2e tests
             grepInvert: /@snapshot/,
             use: {
                 browserName: 'chromium',
@@ -44,20 +47,30 @@ const config = {
                     height: 1440
                 }
             }
-        }
+        },
-        /*{
+        {
-            name: 'ipad',
+            name: 'firefox',
+            testMatch: '**/*.e2e.spec.js', // only run e2e tests
+            grepInvert: /@snapshot/,
             use: {
-                browserName: 'webkit',
+                browserName: 'firefox'
-                ...devices['iPad (gen 7) landscape'] // Complete List https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/server/deviceDescriptorsSource.json
             }
-        }*/
+        },
+        {
+            name: 'chrome-beta', //Only Chrome Beta is available on ubuntu -- not chrome canary
+            testMatch: '**/*.e2e.spec.js', // only run e2e tests
+            grepInvert: /@snapshot/,
+            use: {
+                browserName: 'chromium',
+                channel: 'chrome-beta'
+            }
+        }
     ],
     reporter: [
         ['list'],
         ['html', {
             open: 'never',
-            outputFolder: '../test-results/html/'
+            outputFolder: '../html-test-results' //Must be in different location due to https://github.com/microsoft/playwright/issues/12840
         }],
         ['junit', { outputFile: 'test-results/results.xml' }],
         ['github']

e2e/playwright-local.config.js

@@ -12,10 +12,10 @@ const config = {
     testIgnore: '**/*.perf.spec.js',
     timeout: 30 * 1000,
     webServer: {
-        command: 'npm run start',
+        command: 'cross-env NODE_ENV=test npm run start',
-        port: 8080,
+        url: 'http://localhost:8080/#',
         timeout: 120 * 1000,
-        reuseExistingServer: !process.env.CI
+        reuseExistingServer: true
     },
     workers: 1,
     use: {
@@ -25,7 +25,7 @@ const config = {
         ignoreHTTPSErrors: true,
         screenshot: 'only-on-failure',
         trace: 'retain-on-failure',
-        video: 'retain-on-failure'
+        video: 'off'
     },
     projects: [
         {
@@ -36,6 +36,7 @@ const config = {
         },
         {
             name: 'MMOC',
+            testMatch: '**/*.e2e.spec.js', // only run e2e tests
             grepInvert: /@snapshot/,
             use: {
                 browserName: 'chromium',
@@ -44,20 +45,58 @@ const config = {
                     height: 1440
                 }
             }
-        }
+        },
-        /*{
+        {
+            name: 'safari',
+            testMatch: '**/*.e2e.spec.js', // only run e2e tests
+            grep: /@ipad/, // only run ipad tests due to this bug https://github.com/microsoft/playwright/issues/8340
+            grepInvert: /@snapshot/,
+            use: {
+                browserName: 'webkit'
+            }
+        },
+        {
+            name: 'firefox',
+            testMatch: '**/*.e2e.spec.js', // only run e2e tests
+            grepInvert: /@snapshot/,
+            use: {
+                browserName: 'firefox'
+            }
+        },
+        {
+            name: 'canary',
+            testMatch: '**/*.e2e.spec.js', // only run e2e tests
+            grepInvert: /@snapshot/,
+            use: {
+                browserName: 'chromium',
+                channel: 'chrome-canary' //Note this is not available in ubuntu/CircleCI
+            }
+        },
+        {
+            name: 'chrome-beta',
+            testMatch: '**/*.e2e.spec.js', // only run e2e tests
+            grepInvert: /@snapshot/,
+            use: {
+                browserName: 'chromium',
+                channel: 'chrome-beta'
+            }
+        },
+        {
             name: 'ipad',
+            testMatch: '**/*.e2e.spec.js', // only run e2e tests
+            grep: /@ipad/,
+            grepInvert: /@snapshot/,
             use: {
                 browserName: 'webkit',
                 ...devices['iPad (gen 7) landscape'] // Complete List https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/server/deviceDescriptorsSource.json
             }
-        }*/
+        }
     ],
     reporter: [
         ['list'],
         ['html', {
             open: 'on-failure',
-            outputFolder: '../test-results'
+            outputFolder: '../html-test-results' //Must be in different location due to https://github.com/microsoft/playwright/issues/12840
         }]
     ]
 };

e2e/playwright-performance.config.js

@@ -2,22 +2,24 @@
 // playwright.config.js
 // @ts-check
 
+const CI = process.env.CI === 'true';
+
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-    retries: 1, //Only for debugging purposes
+    retries: 1, //Only for debugging purposes because trace is enabled only on first retry
     testDir: 'tests/performance/',
     timeout: 60 * 1000,
     workers: 1, //Only run in serial with 1 worker
     webServer: {
-        command: 'npm run start',
+        command: 'cross-env NODE_ENV=test npm run start',
-        port: 8080,
+        url: 'http://localhost:8080/#',
         timeout: 200 * 1000,
-        reuseExistingServer: !process.env.CI
+        reuseExistingServer: !CI
     },
     use: {
         browserName: "chromium",
         baseURL: 'http://localhost:8080/',
-        headless: Boolean(process.env.CI), //Only if running locally
+        headless: CI, //Only if running locally
         ignoreHTTPSErrors: true,
         screenshot: 'off',
         trace: 'on-first-retry',

e2e/playwright-visual.config.js

@@ -9,8 +9,8 @@ const config = {
     timeout: 90 * 1000,
     workers: 1, // visual tests should never run in parallel due to test pollution
     webServer: {
-        command: 'npm run start',
+        command: 'cross-env NODE_ENV=test npm run start',
-        port: 8080,
+        url: 'http://localhost:8080/#',
         timeout: 200 * 1000,
         reuseExistingServer: !process.env.CI
     },
@@ -21,7 +21,7 @@ const config = {
         ignoreHTTPSErrors: true,
         screenshot: 'on',
         trace: 'off',
-        video: 'on'
+        video: 'off'
     },
     reporter: [
         ['list'],

e2e/test-data/VisualTestData_storage.json

@@ -0,0 +1,22 @@
+{
+  "cookies": [],
+  "origins": [
+    {
+      "origin": "http://localhost:8080",
+      "localStorage": [
+        {
+          "name": "tcHistory",
+          "value": "{\"utc\":[{\"start\":1654548551471,\"end\":1654550351471}]}"
+        },
+        {
+          "name": "mct",
+          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"527856c0-cced-4b64-bb19-f943432326d0\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1654550352296,\"modified\":1654550352296},\"527856c0-cced-4b64-bb19-f943432326d0\":{\"identifier\":{\"key\":\"527856c0-cced-4b64-bb19-f943432326d0\",\"namespace\":\"\"},\"name\":\"Unnamed Overlay Plot\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"ce88ce37-8bb9-45e1-a85b-bb7e3c8453b9\",\"namespace\":\"\"}],\"configuration\":{\"series\":[{\"identifier\":{\"key\":\"ce88ce37-8bb9-45e1-a85b-bb7e3c8453b9\",\"namespace\":\"\"}}],\"yAxis\":{},\"xAxis\":{}},\"modified\":1654550353356,\"location\":\"mine\",\"persisted\":1654550353357},\"ce88ce37-8bb9-45e1-a85b-bb7e3c8453b9\":{\"name\":\"Unnamed Sine Wave Generator\",\"type\":\"generator\",\"identifier\":{\"key\":\"ce88ce37-8bb9-45e1-a85b-bb7e3c8453b9\",\"namespace\":\"\"},\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":\"5000\"},\"modified\":1654550353350,\"location\":\"527856c0-cced-4b64-bb19-f943432326d0\",\"persisted\":1654550353350}}"
+        },
+        {
+          "name": "mct-tree-expanded",
+          "value": "[\"/browse/mine\"]"
+        }
+      ]
+    }
+  ]
+}

e2e/test-data/recycled_local_storage.json

@@ -0,0 +1,22 @@
+{
+  "cookies": [],
+  "origins": [
+    {
+      "origin": "http://localhost:8080",
+      "localStorage": [
+        {
+          "name": "tcHistory",
+          "value": "{\"utc\":[{\"start\":1654537164464,\"end\":1654538964464},{\"start\":1652301954635,\"end\":1652303754635}]}"
+        },
+        {
+          "name": "mct",
+          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"},{\"key\":\"2d02a680-eb7e-4645-bba2-dd298f76efb8\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1654538965703,\"modified\":1654538965703},\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"73f2d9ae-d1f3-4561-b7fc-ecd5df557249\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1652303755999,\"location\":\"mine\",\"persisted\":1652303756002},\"2d02a680-eb7e-4645-bba2-dd298f76efb8\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"2d02a680-eb7e-4645-bba2-dd298f76efb8\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"4291d80c-303c-4d8d-85e1-10f012b864fb\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1654538965702,\"location\":\"mine\",\"persisted\":1654538965702}}"
+        },
+        {
+          "name": "mct-tree-expanded",
+          "value": "[]"
+        }
+      ]
+    }
+  ]
+}

e2e/tests/branding.e2e.spec.js

@@ -36,7 +36,7 @@ test.describe('Branding tests', () => {
         await page.click('.l-shell__app-logo');
 
         // Verify that the NASA Logo Appears
-        await expect(await page.locator('.c-about__image')).toBeVisible();
+        await expect(page.locator('.c-about__image')).toBeVisible();
 
         // Modify the Build information in 'about' Modal
         const versionInformationLocator = page.locator('ul.t-info.l-info.s-info');
@@ -58,6 +58,7 @@ test.describe('Branding tests', () => {
             page.waitForEvent('popup'),
             page.locator('text=click here for third party licensing information').click()
         ]);
+        await page2.waitForLoadState('networkidle'); //Avoids timing issues with juggler/firefox
         expect(page2.waitForURL('**/licenses**')).toBeTruthy();
     });
 });

e2e/tests/example/generator/SinewaveLimitProvider.e2e.spec.js

@@ -28,7 +28,9 @@ const { test } = require('../../../fixtures.js');
 const { expect } = require('@playwright/test');
 
 test.describe('Sine Wave Generator', () => {
-    test('Create new Sine Wave Generator Object and validate create Form Logic', async ({ page }) => {
+    test('Create new Sine Wave Generator Object and validate create Form Logic', async ({ page, browserName }) => {
+        test.fixme(browserName === 'firefox', 'This test needs to be updated to work with firefox');
+
         //Go to baseURL
         await page.goto('/', { waitUntil: 'networkidle' });
 
@@ -40,44 +42,45 @@ test.describe('Sine Wave Generator', () => {
 
         // Verify that the each required field has required indicator
         // Title
-        await expect(page.locator('.c-form-row__state-indicator').first()).toHaveClass(['c-form-row__state-indicator  req']);
+        await expect(page.locator('.c-form-row__state-indicator').first()).toHaveClass(/req/);
 
         // Verify that the Notes row does not have a required indicator
         await expect(page.locator('.c-form__section div:nth-child(3) .form-row .c-form-row__state-indicator')).not.toContain('.req');
+        await page.locator('textarea[type="text"]').fill('Optional Note Text');
 
         // Period
-        await expect(page.locator('.c-form__section div:nth-child(4) .form-row .c-form-row__state-indicator')).toHaveClass(['c-form-row__state-indicator  req']);
+        await expect(page.locator('div:nth-child(4) .c-form-row__state-indicator')).toHaveClass(/req/);
 
         // Amplitude
-        await expect(page.locator('.c-form__section div:nth-child(5) .form-row .c-form-row__state-indicator')).toHaveClass(['c-form-row__state-indicator  req']);
+        await expect(page.locator('div:nth-child(5) .c-form-row__state-indicator')).toHaveClass(/req/);
 
         // Offset
-        await expect(page.locator('.c-form__section div:nth-child(6) .form-row .c-form-row__state-indicator')).toHaveClass(['c-form-row__state-indicator  req']);
+        await expect(page.locator('div:nth-child(6) .c-form-row__state-indicator')).toHaveClass(/req/);
 
         // Data Rate
-        await expect(page.locator('.c-form__section div:nth-child(7) .form-row .c-form-row__state-indicator')).toHaveClass(['c-form-row__state-indicator  req']);
+        await expect(page.locator('div:nth-child(7) .c-form-row__state-indicator')).toHaveClass(/req/);
 
         // Phase
-        await expect(page.locator('.c-form__section div:nth-child(8) .form-row .c-form-row__state-indicator')).toHaveClass(['c-form-row__state-indicator  req']);
+        await expect(page.locator('div:nth-child(8) .c-form-row__state-indicator')).toHaveClass(/req/);
 
         // Randomness
-        await expect(page.locator('.c-form__section div:nth-child(9) .form-row .c-form-row__state-indicator')).toHaveClass(['c-form-row__state-indicator  req']);
+        await expect(page.locator('div:nth-child(9) .c-form-row__state-indicator')).toHaveClass(/req/);
 
         // Verify that by removing value from required text field shows invalid indicator
         await page.locator('text=Properties Title Notes Period Amplitude Offset Data Rate (hz) Phase (radians) Ra >> input[type="text"]').fill('');
-        await expect(page.locator('.c-form-row__state-indicator').first()).toHaveClass(['c-form-row__state-indicator  req invalid']);
+        await expect(page.locator('.c-form-row__state-indicator').first()).toHaveClass(/invalid/);
 
         // Verify that by adding value to empty required text field changes invalid to valid indicator
-        await page.locator('text=Properties Title Notes Period Amplitude Offset Data Rate (hz) Phase (radians) Ra >> input[type="text"]').fill('non empty');
+        await page.locator('text=Properties Title Notes Period Amplitude Offset Data Rate (hz) Phase (radians) Ra >> input[type="text"]').fill('New Sine Wave Generator');
-        await expect(page.locator('.c-form-row__state-indicator').first()).toHaveClass(['c-form-row__state-indicator  req valid']);
+        await expect(page.locator('.c-form-row__state-indicator').first()).toHaveClass(/valid/);
 
         // Verify that by removing value from required number field shows invalid indicator
         await page.locator('.field.control.l-input-sm input').first().fill('');
-        await expect(page.locator('.c-form__section div:nth-child(4) .form-row .c-form-row__state-indicator')).toHaveClass(['c-form-row__state-indicator  req invalid']);
+        await expect(page.locator('div:nth-child(4) .c-form-row__state-indicator')).toHaveClass(/invalid/);
 
         // Verify that by adding value to empty required number field changes invalid to valid indicator
         await page.locator('.field.control.l-input-sm input').first().fill('3');
-        await expect(page.locator('.c-form__section div:nth-child(4) .form-row .c-form-row__state-indicator')).toHaveClass(['c-form-row__state-indicator  req valid']);
+        await expect(page.locator('div:nth-child(4) .c-form-row__state-indicator')).toHaveClass(/valid/);
 
         // Verify that can change value of number field by up/down arrows keys
         // Click .field.control.l-input-sm input >> nth=0
@@ -90,57 +93,6 @@ test.describe('Sine Wave Generator', () => {
         const value = await page.locator('.field.control.l-input-sm input').first().inputValue();
         await expect(value).toBe('6');
 
-        // Click .c-form-row__state-indicator.grows
-        await page.locator('.c-form-row__state-indicator.grows').click();
-
-        // Click text=Properties Title Notes Period Amplitude Offset Data Rate (hz) Phase (radians) Ra >> input[type="text"]
-        await page.locator('text=Properties Title Notes Period Amplitude Offset Data Rate (hz) Phase (radians) Ra >> input[type="text"]').click();
-
-        // Click .c-form-row__state-indicator >> nth=0
-        await page.locator('.c-form-row__state-indicator').first().click();
-
-        // Fill text=Properties Title Notes Period Amplitude Offset Data Rate (hz) Phase (radians) Ra >> input[type="text"]
-        await page.locator('text=Properties Title Notes Period Amplitude Offset Data Rate (hz) Phase (radians) Ra >> input[type="text"]').fill('New Sine Wave Generator');
-
-        // Double click div:nth-child(4) .form-row .c-form-row__controls
-        await page.locator('div:nth-child(4) .form-row .c-form-row__controls').dblclick();
-
-        // Click .field.control.l-input-sm input >> nth=0
-        await page.locator('.field.control.l-input-sm input').first().click();
-
-        // Click div:nth-child(4) .form-row .c-form-row__state-indicator
-        await page.locator('div:nth-child(4) .form-row .c-form-row__state-indicator').click();
-
-        // Click .field.control.l-input-sm input >> nth=0
-        await page.locator('.field.control.l-input-sm input').first().click();
-
-        // Click .field.control.l-input-sm input >> nth=0
-        await page.locator('.field.control.l-input-sm input').first().click();
-
-        // Click div:nth-child(5) .form-row .c-form-row__controls .form-control .field input
-        await page.locator('div:nth-child(5) .form-row .c-form-row__controls .form-control .field input').click();
-
-        // Click div:nth-child(5) .form-row .c-form-row__controls .form-control .field input
-        await page.locator('div:nth-child(5) .form-row .c-form-row__controls .form-control .field input').click();
-
-        // Click div:nth-child(5) .form-row .c-form-row__controls .form-control .field input
-        await page.locator('div:nth-child(5) .form-row .c-form-row__controls .form-control .field input').click();
-
-        // Click div:nth-child(6) .form-row .c-form-row__controls .form-control .field input
-        await page.locator('div:nth-child(6) .form-row .c-form-row__controls .form-control .field input').click();
-
-        // Double click div:nth-child(7) .form-row .c-form-row__controls .form-control .field input
-        await page.locator('div:nth-child(7) .form-row .c-form-row__controls .form-control .field input').dblclick();
-
-        // Click div:nth-child(7) .form-row .c-form-row__state-indicator
-        await page.locator('div:nth-child(7) .form-row .c-form-row__state-indicator').click();
-
-        // Click div:nth-child(7) .form-row .c-form-row__controls .form-control .field input
-        await page.locator('div:nth-child(7) .form-row .c-form-row__controls .form-control .field input').click();
-
-        // Fill div:nth-child(7) .form-row .c-form-row__controls .form-control .field input
-        await page.locator('div:nth-child(7) .form-row .c-form-row__controls .form-control .field input').fill('3');
-
         //Click text=OK
         await Promise.all([
             page.waitForNavigation(),
@@ -151,7 +103,7 @@ test.describe('Sine Wave Generator', () => {
         // Verify object properties
         await expect(page.locator('.l-browse-bar__object-name')).toContainText('New Sine Wave Generator');
 
-        // Verify canvas rendered
+        // Verify canvas rendered and can be interacted with
         await page.locator('canvas').nth(1).click({
             position: {
                 x: 341,

e2e/tests/framework.e2e.spec.js

@@ -0,0 +1,55 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to testing our use of the playwright framework as it
+relates to how we've extended it (i.e. ./e2e/fixtures.js) and assumptions made in our dev environment
+(app.js and ./e2e/webpack-dev-middleware.js)
+*/
+
+const { test } = require('../fixtures.js');
+
+test.describe('fixtures.js tests', () => {
+    test('Verify that tests fail if console.error is thrown', async ({ page }) => {
+        test.fail();
+        //Go to baseURL
+        await page.goto('/', { waitUntil: 'networkidle' });
+
+        //Verify that ../fixtures.js detects console log errors
+        await Promise.all([
+            page.evaluate(() => console.error('This should result in a failure')),
+            page.waitForEvent('console') // always wait for the event to happen while triggering it!
+        ]);
+
+    });
+    test('Verify that tests pass if console.warn is thrown', async ({ page }) => {
+        //Go to baseURL
+        await page.goto('/', { waitUntil: 'networkidle' });
+
+        //Verify that ../fixtures.js detects console log errors
+        await Promise.all([
+            page.evaluate(() => console.warn('This should result in a pass')),
+            page.waitForEvent('console') // always wait for the event to happen while triggering it!
+        ]);
+
+    });
+});

e2e/tests/moveObjects.e2e.spec.js

@@ -40,9 +40,6 @@ test.describe('Move item tests', () => {
         await page.locator('text=Properties Title Notes >> input[type="text"]').click();
         await page.locator('text=Properties Title Notes >> input[type="text"]').fill(folder1);
 
-        // Click on My Items in Tree. Workaround for https://github.com/nasa/openmct/issues/5184
-        await page.click('form[name="mctForm"] a:has-text("My Items")');
-
         await Promise.all([
             page.waitForNavigation(),
             page.locator('text=OK').click(),
@@ -59,9 +56,6 @@ test.describe('Move item tests', () => {
         await page.locator('text=Properties Title Notes >> input[type="text"]').click();
         await page.locator('text=Properties Title Notes >> input[type="text"]').fill(folder2);
 
-        // Click on My Items in Tree. Workaround for https://github.com/nasa/openmct/issues/5184
-        await page.click('form[name="mctForm"] a:has-text("My Items")');
-
         await Promise.all([
             page.waitForNavigation(),
             page.locator('text=OK').click(),
@@ -97,9 +91,6 @@ test.describe('Move item tests', () => {
         await page.locator('text=Properties Title Notes >> input[type="text"]').click();
         await page.locator('text=Properties Title Notes >> input[type="text"]').fill(telemetryTable);
 
-        // Click on My Items in Tree. Workaround for https://github.com/nasa/openmct/issues/5184
-        await page.click('form[name="mctForm"] a:has-text("My Items")');
-
         await page.locator('text=OK').click();
 
         // Finish editing and save Telemetry Table

e2e/tests/persistence/persistability.e2e.spec.js

@@ -28,9 +28,7 @@ const { test } = require('../../fixtures.js');
 const { expect } = require('@playwright/test');
 const path = require('path');
 
-// https://github.com/nasa/openmct/issues/4323#issuecomment-1067282651
+test.describe('Persistence operations @addInit', () => {
-
-test.describe('Persistence operations', () => {
     // add non persistable root item
     test.beforeEach(async ({ page }) => {
         // eslint-disable-next-line no-undef
@@ -38,6 +36,10 @@ test.describe('Persistence operations', () => {
     });
 
     test('Persistability should be respected in the create form location field', async ({ page }) => {
+        test.info().annotations.push({
+            type: 'issue',
+            description: 'https://github.com/nasa/openmct/issues/4323'
+        });
         // Go to baseURL
         await page.goto('/', { waitUntil: 'networkidle' });
 

e2e/tests/plugins/condition/condition.e2e.spec.js

@@ -33,7 +33,7 @@ let conditionSetUrl;
 let getConditionSetIdentifierFromUrl;
 
 test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
-    test.beforeAll(async ({ browser }) => {
+    test.beforeAll(async ({ browser}) => {
         const context = await browser.newContext();
         const page = await context.newPage();
         //Go to baseURL
@@ -52,30 +52,28 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
         ]);
 
         //Save localStorage for future test execution
-        await context.storageState({ path: './e2e/tests/recycled_storage.json' });
+        await context.storageState({ path: './e2e/test-data/recycled_local_storage.json' });
 
         //Set object identifier from url
-        conditionSetUrl = await page.url();
+        conditionSetUrl = page.url();
         console.log('conditionSetUrl ' + conditionSetUrl);
 
-        getConditionSetIdentifierFromUrl = await conditionSetUrl.split('/').pop().split('?')[0];
+        getConditionSetIdentifierFromUrl = conditionSetUrl.split('/').pop().split('?')[0];
         console.debug('getConditionSetIdentifierFromUrl ' + getConditionSetIdentifierFromUrl);
     });
-    test.afterAll(async ({ browser }) => {
+
-        await browser.close();
-    });
     //Load localStorage for subsequent tests
-    test.use({ storageState: './e2e/tests/recycled_storage.json' });
+    test.use({ storageState: './e2e/test-data/recycled_local_storage.json' });
     //Begin suite of tests again localStorage
-    test('Condition set object properties persist in main view and inspector', async ({ page }) => {
+    test('Condition set object properties persist in main view and inspector @localStorage', async ({ page }) => {
         //Navigate to baseURL with injected localStorage
         await page.goto(conditionSetUrl, { waitUntil: 'networkidle' });
 
-        //Assertions on loaded Condition Set in main view
+        //Assertions on loaded Condition Set in main view. This is a stateful transition step after page.goto()
         await expect.soft(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Condition Set');
 
         //Assertions on loaded Condition Set in Inspector
-        await expect.soft(page.locator('_vue=item.name=Unnamed Condition Set')).toBeTruthy;
+        expect.soft(page.locator('_vue=item.name=Unnamed Condition Set')).toBeTruthy();
 
         //Reload Page
         await Promise.all([
@@ -86,13 +84,13 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
         //Re-verify after reload
         await expect.soft(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Condition Set');
         //Assertions on loaded Condition Set in Inspector
-        await expect.soft(page.locator('_vue=item.name=Unnamed Condition Set')).toBeTruthy;
+        expect.soft(page.locator('_vue=item.name=Unnamed Condition Set')).toBeTruthy();
 
     });
     test('condition set object can be modified on @localStorage', async ({ page }) => {
         await page.goto(conditionSetUrl, { waitUntil: 'networkidle' });
 
-        //Assertions on loaded Condition Set in main view
+        //Assertions on loaded Condition Set in main view. This is a stateful transition step after page.goto()
         await expect.soft(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Condition Set');
 
         //Update the Condition Set properties
@@ -112,18 +110,18 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
 
         // Verify Inspector properties
         // Verify Inspector has updated Name property
-        await expect.soft(page.locator('text=Renamed Condition Set').nth(1)).toBeTruthy();
+        expect.soft(page.locator('text=Renamed Condition Set').nth(1)).toBeTruthy();
         // Verify Inspector Details has updated Name property
-        await expect.soft(page.locator('text=Renamed Condition Set').nth(2)).toBeTruthy();
+        expect.soft(page.locator('text=Renamed Condition Set').nth(2)).toBeTruthy();
 
         // Verify Tree reflects updated Name proprety
         // Expand Tree
         await page.locator('text=Open MCT My Items >> span >> nth=3').click();
         // Verify Condition Set Object is renamed in Tree
-        await expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
+        expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
         // Verify Search Tree reflects renamed Name property
         await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Renamed');
-        await expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
+        expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
 
         //Reload Page
         await Promise.all([
@@ -136,40 +134,42 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
 
         // Verify Inspector properties
         // Verify Inspector has updated Name property
-        await expect.soft(page.locator('text=Renamed Condition Set').nth(1)).toBeTruthy();
+        expect.soft(page.locator('text=Renamed Condition Set').nth(1)).toBeTruthy();
         // Verify Inspector Details has updated Name property
-        await expect.soft(page.locator('text=Renamed Condition Set').nth(2)).toBeTruthy();
+        expect.soft(page.locator('text=Renamed Condition Set').nth(2)).toBeTruthy();
 
         // Verify Tree reflects updated Name proprety
         // Expand Tree
         await page.locator('text=Open MCT My Items >> span >> nth=3').click();
         // Verify Condition Set Object is renamed in Tree
-        await expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
+        expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
         // Verify Search Tree reflects renamed Name property
         await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Renamed');
-        await expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
+        expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
     });
     test('condition set object can be deleted by Search Tree Actions menu on @localStorage', async ({ page }) => {
         //Navigate to baseURL
         await page.goto('/', { waitUntil: 'networkidle' });
 
-        const numberOfConditionSetsToStart = await page.locator('a:has-text("Unnamed Condition Set Condition Set")').count();
+        //Assertions on loaded Condition Set in main view. This is a stateful transition step after page.goto()
-        //Expect Unnamed Condition Set to be visible in Main View
         await expect(page.locator('a:has-text("Unnamed Condition Set Condition Set") >> nth=0')).toBeVisible();
 
+        const numberOfConditionSetsToStart = await page.locator('a:has-text("Unnamed Condition Set Condition Set")').count();
+
         // Search for Unnamed Condition Set
         await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Unnamed Condition Set');
         // Click Search Result
         await page.locator('[aria-label="OpenMCT Search"] >> text=Unnamed Condition Set').first().click();
         // Click hamburger button
         await page.locator('[title="More options"]').click();
+
         // Click text=Remove
         await page.locator('text=Remove').click();
-
         await page.locator('text=OK').click();
 
         //Expect Unnamed Condition Set to be removed in Main View
         const numberOfConditionSetsAtEnd = await page.locator('a:has-text("Unnamed Condition Set Condition Set")').count();
+
         expect(numberOfConditionSetsAtEnd).toEqual(numberOfConditionSetsToStart - 1);
 
         //Feature?

e2e/tests/plugins/imagery/exampleImagery.e2e.spec.js

@@ -29,7 +29,10 @@ but only assume that example imagery is present.
 const { test } = require('../../../fixtures.js');
 const { expect } = require('@playwright/test');
 
-test.describe('Example Imagery', () => {
+const backgroundImageSelector = '.c-imagery__main-image__background-image';
+
+//The following block of tests verifies the basic functionality of example imagery and serves as a template for Imagery objects embedded in other objects.
+test.describe('Example Imagery Object', () => {
 
     test.beforeEach(async ({ page }) => {
         //Go to baseURL
@@ -41,9 +44,6 @@ test.describe('Example Imagery', () => {
         // Click text=Example Imagery
         await page.click('text=Example Imagery');
 
-        // Click on My Items in Tree. Workaround for https://github.com/nasa/openmct/issues/5184
-        await page.click('form[name="mctForm"] a:has-text("My Items")');
-
         // Click text=OK
         await Promise.all([
             page.waitForNavigation({waitUntil: 'networkidle'}),
@@ -51,28 +51,30 @@ test.describe('Example Imagery', () => {
             //Wait for Save Banner to appear
             page.waitForSelector('.c-message-banner__message')
         ]);
+        // Close Banner
+        await page.locator('.c-message-banner__close-button').click();
+
         //Wait until Save Banner is gone
         await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
         await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Example Imagery');
+        await page.locator(backgroundImageSelector).hover({trial: true});
     });
 
-    const backgroundImageSelector = '.c-imagery__main-image__background-image';
     test('Can use Mouse Wheel to zoom in and out of latest image', async ({ page }) => {
-        const bgImageLocator = page.locator(backgroundImageSelector);
         const deltaYStep = 100; //equivalent to 1x zoom
-        await bgImageLocator.hover({trial: true});
+        await page.locator(backgroundImageSelector).hover({trial: true});
         const originalImageDimensions = await page.locator(backgroundImageSelector).boundingBox();
         // zoom in
-        await bgImageLocator.hover({trial: true});
+        await page.locator(backgroundImageSelector).hover({trial: true});
         await page.mouse.wheel(0, deltaYStep * 2);
         // wait for zoom animation to finish
-        await bgImageLocator.hover({trial: true});
+        await page.locator(backgroundImageSelector).hover({trial: true});
         const imageMouseZoomedIn = await page.locator(backgroundImageSelector).boundingBox();
         // zoom out
-        await bgImageLocator.hover({trial: true});
+        await page.locator(backgroundImageSelector).hover({trial: true});
         await page.mouse.wheel(0, -deltaYStep);
         // wait for zoom animation to finish
-        await bgImageLocator.hover({trial: true});
+        await page.locator(backgroundImageSelector).hover({trial: true});
         const imageMouseZoomedOut = await page.locator(backgroundImageSelector).boundingBox();
 
         expect(imageMouseZoomedIn.height).toBeGreaterThan(originalImageDimensions.height);
@@ -86,13 +88,12 @@ test.describe('Example Imagery', () => {
         const deltaYStep = 100; //equivalent to 1x zoom
         const panHotkey = process.platform === 'linux' ? ['Control', 'Alt'] : ['Alt'];
 
-        const bgImageLocator = page.locator(backgroundImageSelector);
+        await page.locator(backgroundImageSelector).hover({trial: true});
-        await bgImageLocator.hover({trial: true});
 
         // zoom in
         await page.mouse.wheel(0, deltaYStep * 2);
-        await bgImageLocator.hover({trial: true});
+        await page.locator(backgroundImageSelector).hover({trial: true});
-        const zoomedBoundingBox = await bgImageLocator.boundingBox();
+        const zoomedBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
         const imageCenterX = zoomedBoundingBox.x + zoomedBoundingBox.width / 2;
         const imageCenterY = zoomedBoundingBox.y + zoomedBoundingBox.height / 2;
         // move to the right
@@ -115,7 +116,7 @@ test.describe('Example Imagery', () => {
         await page.mouse.move(imageCenterX - 200, imageCenterY, 10);
         await page.mouse.up();
         await Promise.all(panHotkey.map(x => page.keyboard.up(x)));
-        const afterRightPanBoundingBox = await bgImageLocator.boundingBox();
+        const afterRightPanBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
         expect(zoomedBoundingBox.x).toBeGreaterThan(afterRightPanBoundingBox.x);
 
         // pan left
@@ -124,7 +125,7 @@ test.describe('Example Imagery', () => {
         await page.mouse.move(imageCenterX, imageCenterY, 10);
         await page.mouse.up();
         await Promise.all(panHotkey.map(x => page.keyboard.up(x)));
-        const afterLeftPanBoundingBox = await bgImageLocator.boundingBox();
+        const afterLeftPanBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
         expect(afterRightPanBoundingBox.x).toBeLessThan(afterLeftPanBoundingBox.x);
 
         // pan up
@@ -134,7 +135,7 @@ test.describe('Example Imagery', () => {
         await page.mouse.move(imageCenterX, imageCenterY + 200, 10);
         await page.mouse.up();
         await Promise.all(panHotkey.map(x => page.keyboard.up(x)));
-        const afterUpPanBoundingBox = await bgImageLocator.boundingBox();
+        const afterUpPanBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
         expect(afterUpPanBoundingBox.y).toBeGreaterThan(afterLeftPanBoundingBox.y);
 
         // pan down
@@ -143,72 +144,71 @@ test.describe('Example Imagery', () => {
         await page.mouse.move(imageCenterX, imageCenterY - 200, 10);
         await page.mouse.up();
         await Promise.all(panHotkey.map(x => page.keyboard.up(x)));
-        const afterDownPanBoundingBox = await bgImageLocator.boundingBox();
+        const afterDownPanBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
         expect(afterDownPanBoundingBox.y).toBeLessThan(afterUpPanBoundingBox.y);
 
     });
 
     test('Can use + - buttons to zoom on the image', async ({ page }) => {
-        const bgImageLocator = page.locator(backgroundImageSelector);
+        await page.locator(backgroundImageSelector).hover({trial: true});
-        await bgImageLocator.hover({trial: true});
         const zoomInBtn = page.locator('.t-btn-zoom-in').nth(0);
         const zoomOutBtn = page.locator('.t-btn-zoom-out').nth(0);
-        const initialBoundingBox = await bgImageLocator.boundingBox();
+        const initialBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
 
         await zoomInBtn.click();
         await zoomInBtn.click();
         // wait for zoom animation to finish
-        await bgImageLocator.hover({trial: true});
+        await page.locator(backgroundImageSelector).hover({trial: true});
-        const zoomedInBoundingBox = await bgImageLocator.boundingBox();
+        const zoomedInBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
         expect(zoomedInBoundingBox.height).toBeGreaterThan(initialBoundingBox.height);
         expect(zoomedInBoundingBox.width).toBeGreaterThan(initialBoundingBox.width);
 
         await zoomOutBtn.click();
         // wait for zoom animation to finish
-        await bgImageLocator.hover({trial: true});
+        await page.locator(backgroundImageSelector).hover({trial: true});
-        const zoomedOutBoundingBox = await bgImageLocator.boundingBox();
+        const zoomedOutBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
         expect(zoomedOutBoundingBox.height).toBeLessThan(zoomedInBoundingBox.height);
         expect(zoomedOutBoundingBox.width).toBeLessThan(zoomedInBoundingBox.width);
 
     });
 
-    test('Can use the reset button to reset the image', async ({ page }) => {
+    test('Can use the reset button to reset the image', async ({ page }, testInfo) => {
-        const bgImageLocator = page.locator(backgroundImageSelector);
+        test.slow(testInfo.project === 'chrome-beta', "This test is slow in chrome-beta");
         // wait for zoom animation to finish
-        await bgImageLocator.hover({trial: true});
+        await page.locator(backgroundImageSelector).hover({trial: true});
 
         const zoomInBtn = page.locator('.t-btn-zoom-in').nth(0);
         const zoomResetBtn = page.locator('.t-btn-zoom-reset').nth(0);
-        const initialBoundingBox = await bgImageLocator.boundingBox();
+        const initialBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
 
         await zoomInBtn.click();
         // wait for zoom animation to finish
-        await bgImageLocator.hover({trial: true});
+        await page.locator(backgroundImageSelector).hover({trial: true});
         await zoomInBtn.click();
         // wait for zoom animation to finish
-        await bgImageLocator.hover({trial: true});
+        await page.locator(backgroundImageSelector).hover({trial: true});
 
-        const zoomedInBoundingBox = await bgImageLocator.boundingBox();
+        const zoomedInBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
         expect.soft(zoomedInBoundingBox.height).toBeGreaterThan(initialBoundingBox.height);
         expect.soft(zoomedInBoundingBox.width).toBeGreaterThan(initialBoundingBox.width);
 
-        await zoomResetBtn.click();
         // wait for zoom animation to finish
-        await bgImageLocator.hover({trial: true});
+        // FIXME: The zoom is flakey, sometimes not returning to original dimensions
+        // https://github.com/nasa/openmct/issues/5491
+        await expect.poll(async () => {
+            await zoomResetBtn.click();
+            const boundingBox = await page.locator(backgroundImageSelector).boundingBox();
 
-        const resetBoundingBox = await bgImageLocator.boundingBox();
+            return boundingBox;
-        expect.soft(resetBoundingBox.height).toBeLessThan(zoomedInBoundingBox.height);
+        }, {
-        expect.soft(resetBoundingBox.width).toBeLessThan(zoomedInBoundingBox.width);
+            timeout: 10 * 1000
-
+        }).toEqual(initialBoundingBox);
-        expect.soft(resetBoundingBox.height).toEqual(initialBoundingBox.height);
-        expect(resetBoundingBox.width).toEqual(initialBoundingBox.width);
     });
 
     test('Using the zoom features does not pause telemetry', async ({ page }) => {
-        const bgImageLocator = page.locator(backgroundImageSelector);
         const pausePlayButton = page.locator('.c-button.pause-play');
         // wait for zoom animation to finish
-        await bgImageLocator.hover({trial: true});
+        await page.locator(backgroundImageSelector).hover({trial: true});
 
         // open the time conductor drop down
         await page.locator('button:has-text("Fixed Timespan")').click();
@@ -219,7 +219,7 @@ test.describe('Example Imagery', () => {
         const zoomInBtn = page.locator('.t-btn-zoom-in').nth(0);
         await zoomInBtn.click();
         // wait for zoom animation to finish
-        await bgImageLocator.hover({trial: true});
+        await page.locator(backgroundImageSelector).hover({trial: true});
 
         return expect(pausePlayButton).not.toHaveClass(/is-paused/);
     });
@@ -232,8 +232,8 @@ test.describe('Example Imagery', () => {
 // ('Clicking on the left arrow should pause the imagery and go to previous image');
 // ('If the imagery view is in pause mode, it should not be updated when new images come in');
 // ('If the imagery view is not in pause mode, it should be updated when new images come in');
-const backgroundImageSelector = '.c-imagery__main-image__background-image';
+test('Example Imagery in Display layout', async ({ page, browserName }) => {
-test('Example Imagery in Display layout', async ({ page }) => {
+    test.fixme(browserName === 'firefox', 'This test needs to be updated to work with firefox');
     test.info().annotations.push({
         type: 'issue',
         description: 'https://github.com/nasa/openmct/issues/5265'
@@ -265,8 +265,7 @@ test('Example Imagery in Display layout', async ({ page }) => {
     // Wait until Save Banner is gone
     await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
     await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Example Imagery');
-    const bgImageLocator = page.locator(backgroundImageSelector);
+    await page.locator(backgroundImageSelector).hover({trial: true});
-    await bgImageLocator.hover({trial: true});
 
     // Click previous image button
     const previousImageButton = page.locator('.c-nav--prev');
@@ -278,15 +277,15 @@ test('Example Imagery in Display layout', async ({ page }) => {
 
     // Zoom in
     const originalImageDimensions = await page.locator(backgroundImageSelector).boundingBox();
-    await bgImageLocator.hover({trial: true});
+    await page.locator(backgroundImageSelector).hover({trial: true});
     const deltaYStep = 100; // equivalent to 1x zoom
     await page.mouse.wheel(0, deltaYStep * 2);
-    const zoomedBoundingBox = await bgImageLocator.boundingBox();
+    const zoomedBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
     const imageCenterX = zoomedBoundingBox.x + zoomedBoundingBox.width / 2;
     const imageCenterY = zoomedBoundingBox.y + zoomedBoundingBox.height / 2;
 
     // Wait for zoom animation to finish
-    await bgImageLocator.hover({trial: true});
+    await page.locator(backgroundImageSelector).hover({trial: true});
     const imageMouseZoomedIn = await page.locator(backgroundImageSelector).boundingBox();
     expect(imageMouseZoomedIn.height).toBeGreaterThan(originalImageDimensions.height);
     expect(imageMouseZoomedIn.width).toBeGreaterThan(originalImageDimensions.width);
@@ -310,11 +309,11 @@ test('Example Imagery in Display layout', async ({ page }) => {
     await page.locator('[data-testid=conductor-modeOption-realtime]').click();
 
     // Zoom in on next image
-    await bgImageLocator.hover({trial: true});
+    await page.locator(backgroundImageSelector).hover({trial: true});
     await page.mouse.wheel(0, deltaYStep * 2);
 
     // Wait for zoom animation to finish
-    await bgImageLocator.hover({trial: true});
+    await page.locator(backgroundImageSelector).hover({trial: true});
     const imageNextMouseZoomedIn = await page.locator(backgroundImageSelector).boundingBox();
     expect(imageNextMouseZoomedIn.height).toBeGreaterThan(originalImageDimensions.height);
     expect(imageNextMouseZoomedIn.width).toBeGreaterThan(originalImageDimensions.width);
@@ -331,42 +330,15 @@ test('Example Imagery in Display layout', async ({ page }) => {
 
         return newImageCount;
     }, {
-        message: "verify that new images still stream in",
+        message: "verify that old images are discarded",
         timeout: 6 * 1000
-    }).toBeGreaterThan(imageCount);
+    }).toBe(imageCount);
 
     // Verify selected image is still displayed
     await expect(selectedImage).toBeVisible();
-
-    // Unpause imagery
-    await page.locator('.pause-play').click();
-
-    //Get background-image url from background-image css prop
-    const backgroundImage = page.locator('.c-imagery__main-image__background-image');
-    let backgroundImageUrl = await backgroundImage.evaluate((el) => {
-        return window.getComputedStyle(el).getPropertyValue('background-image').match(/url\(([^)]+)\)/)[1];
-    });
-    let backgroundImageUrl1 = backgroundImageUrl.slice(1, -1); //forgive me, padre
-    console.log('backgroundImageUrl1 ' + backgroundImageUrl1);
-
-    let backgroundImageUrl2;
-    await expect.poll(async () => {
-        // Verify next image has updated
-        let backgroundImageUrlNext = await backgroundImage.evaluate((el) => {
-            return window.getComputedStyle(el).getPropertyValue('background-image').match(/url\(([^)]+)\)/)[1];
-        });
-        backgroundImageUrl2 = backgroundImageUrlNext.slice(1, -1); //forgive me, padre
-
-        return backgroundImageUrl2;
-    }, {
-        message: "verify next image has updated",
-        timeout: 6 * 1000
-    }).not.toBe(backgroundImageUrl1);
-    console.log('backgroundImageUrl2 ' + backgroundImageUrl2);
 });
 
 test.describe('Example imagery thumbnails resize in display layouts', () => {
-
     test('Resizing the layout changes thumbnail visibility and size', async ({ page }) => {
         await page.goto('/', { waitUntil: 'networkidle' });
 
@@ -455,12 +427,137 @@ test.describe('Example imagery thumbnails resize in display layouts', () => {
 });
 
 test.describe('Example Imagery in Flexible layout', () => {
-    test.fixme('Can use Mouse Wheel to zoom in and out of previous image');
+    test('Example Imagery in Flexible layout', async ({ page, browserName }) => {
-    test.fixme('Can use alt+drag to move around image once zoomed in');
+        test.fixme(browserName === 'firefox', 'This test needs to be updated to work with firefox');
-    test.fixme('Can zoom into the latest image and the real-time/fixed-time imagery will pause');
+        test.info().annotations.push({
-    test.fixme('Clicking on the left arrow should pause the imagery and go to previous image');
+            type: 'issue',
-    test.fixme('If the imagery view is in pause mode, it should not be updated when new images come in');
+            description: 'https://github.com/nasa/openmct/issues/5326'
-    test.fixme('If the imagery view is not in pause mode, it should be updated when new images come in');
+        });
+
+        // Go to baseURL
+        await page.goto('/', { waitUntil: 'networkidle' });
+
+        // Click the Create button
+        await page.click('button:has-text("Create")');
+
+        // Click text=Example Imagery
+        await page.click('text=Example Imagery');
+
+        // Clear and set Image load delay (milliseconds)
+        await page.click('input[type="number"]', {clickCount: 3});
+        await page.type('input[type="number"]', "20");
+
+        // Click text=OK
+        await Promise.all([
+            page.waitForNavigation({waitUntil: 'networkidle'}),
+            page.click('text=OK'),
+            //Wait for Save Banner to appear
+            page.waitForSelector('.c-message-banner__message')
+        ]);
+        // Wait until Save Banner is gone
+        await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
+        await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Example Imagery');
+        await page.locator(backgroundImageSelector).hover({trial: true});
+
+        // Click the Create button
+        await page.click('button:has-text("Create")');
+
+        // Click text=Flexible Layout
+        await page.click('text=Flexible Layout');
+
+        // Assert Flexable layout
+        await expect(page.locator('.js-form-title')).toHaveText('Create a New Flexible Layout');
+
+        await page.locator('form[name="mctForm"] >> text=My Items').click();
+
+        // Click My Items
+        await Promise.all([
+            page.locator('text=OK').click(),
+            page.waitForNavigation({waitUntil: 'networkidle'})
+        ]);
+
+        // Click My Items
+        await page.locator('.c-disclosure-triangle').click();
+
+        // Right click example imagery
+        await page.click(('text=Unnamed Example Imagery'), { button: 'right' });
+
+        // Click move
+        await page.locator('.icon-move').click();
+
+        // Click triangle to open sub menu
+        await page.locator('.c-form__section .c-disclosure-triangle').click();
+
+        // Click Flexable Layout
+        await page.click('.c-overlay__outer >> text=Unnamed Flexible Layout');
+
+        // Click text=OK
+        await page.locator('text=OK').click();
+
+        // Save template
+        await saveTemplate(page);
+
+        // Zoom in
+        await mouseZoomIn(page);
+
+        // Center the mouse pointer
+        const zoomedBoundingBox = await await page.locator(backgroundImageSelector).boundingBox();
+        const imageCenterX = zoomedBoundingBox.x + zoomedBoundingBox.width / 2;
+        const imageCenterY = zoomedBoundingBox.y + zoomedBoundingBox.height / 2;
+        await page.mouse.move(imageCenterX, imageCenterY);
+
+        // Pan zoom
+        await panZoomAndAssertImageProperties(page);
+
+        // Click previous image button
+        const previousImageButton = page.locator('.c-nav--prev');
+        await previousImageButton.click();
+
+        // Verify previous image
+        const selectedImage = page.locator('.selected');
+        await expect(selectedImage).toBeVisible();
+
+        // Click time conductor mode button
+        await page.locator('.c-mode-button').click();
+
+        // Select local clock mode
+        await page.locator('[data-testid=conductor-modeOption-realtime]').click();
+
+        // Zoom in on next image
+        await mouseZoomIn(page);
+
+        // Click previous image button
+        await previousImageButton.click();
+
+        // Verify previous image
+        await expect(selectedImage).toBeVisible();
+
+        const imageCount = await page.locator('.c-imagery__thumb').count();
+        await expect.poll(async () => {
+            const newImageCount = await page.locator('.c-imagery__thumb').count();
+
+            return newImageCount;
+        }, {
+            message: "verify that old images are discarded",
+            timeout: 6 * 1000
+        }).toBe(imageCount);
+
+        // Verify selected image is still displayed
+        await expect(selectedImage).toBeVisible();
+
+        // Unpause imagery
+        await page.locator('.pause-play').click();
+
+        //Get background-image url from background-image css prop
+        await assertBackgroundImageUrlFromBackgroundCss(page);
+
+        // Open the image filter menu
+        await page.locator('[role=toolbar] button[title="Brightness and contrast"]').click();
+
+        // Drag the brightness and contrast sliders around and assert filter values
+        await dragBrightnessSliderAndAssertFilterValues(page);
+        await dragContrastSliderAndAssertFilterValues(page);
+    });
 });
 
 test.describe('Example Imagery in Tabs view', () => {
@@ -472,3 +569,185 @@ test.describe('Example Imagery in Tabs view', () => {
     test.fixme('If the imagery view is in pause mode, it should not be updated when new images come in');
     test.fixme('If the imagery view is not in pause mode, it should be updated when new images come in');
 });
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function saveTemplate(page) {
+    await page.locator('.c-button--menu.c-button--major.icon-save').click();
+    await page.locator('text=Save and Finish Editing').click();
+}
+
+/**
+ * Drag the brightness slider to max, min, and midpoint and assert the filter values
+ * @param {import('@playwright/test').Page} page
+ */
+async function dragBrightnessSliderAndAssertFilterValues(page) {
+    const brightnessSlider = 'div.c-image-controls__slider-wrapper.icon-brightness > input';
+    const brightnessBoundingBox = await page.locator(brightnessSlider).boundingBox();
+    const brightnessMidX = brightnessBoundingBox.x + brightnessBoundingBox.width / 2;
+    const brightnessMidY = brightnessBoundingBox.y + brightnessBoundingBox.height / 2;
+
+    await page.locator(brightnessSlider).hover({trial: true});
+    await page.mouse.down();
+    await page.mouse.move(brightnessBoundingBox.x + brightnessBoundingBox.width, brightnessMidY);
+    await assertBackgroundImageBrightness(page, '500');
+    await page.mouse.move(brightnessBoundingBox.x, brightnessMidY);
+    await assertBackgroundImageBrightness(page, '0');
+    await page.mouse.move(brightnessMidX, brightnessMidY);
+    await assertBackgroundImageBrightness(page, '250');
+    await page.mouse.up();
+}
+
+/**
+ * Drag the contrast slider to max, min, and midpoint and assert the filter values
+ * @param {import('@playwright/test').Page} page
+ */
+async function dragContrastSliderAndAssertFilterValues(page) {
+    const contrastSlider = 'div.c-image-controls__slider-wrapper.icon-contrast > input';
+    const contrastBoundingBox = await page.locator(contrastSlider).boundingBox();
+    const contrastMidX = contrastBoundingBox.x + contrastBoundingBox.width / 2;
+    const contrastMidY = contrastBoundingBox.y + contrastBoundingBox.height / 2;
+
+    await page.locator(contrastSlider).hover({trial: true});
+    await page.mouse.down();
+    await page.mouse.move(contrastBoundingBox.x + contrastBoundingBox.width, contrastMidY);
+    await assertBackgroundImageContrast(page, '500');
+    await page.mouse.move(contrastBoundingBox.x, contrastMidY);
+    await assertBackgroundImageContrast(page, '0');
+    await page.mouse.move(contrastMidX, contrastMidY);
+    await assertBackgroundImageContrast(page, '250');
+    await page.mouse.up();
+}
+
+/**
+ * Gets the filter:brightness value of the current background-image and
+ * asserts against an expected value
+ * @param {import('@playwright/test').Page} page
+ * @param {String} expected The expected brightness value
+ */
+async function assertBackgroundImageBrightness(page, expected) {
+    const backgroundImage = page.locator('.c-imagery__main-image__background-image');
+
+    // Get the brightness filter value (i.e: filter: brightness(500%) => "500")
+    const actual = await backgroundImage.evaluate((el) => {
+        return el.style.filter.match(/brightness\((\d{1,3})%\)/)[1];
+    });
+    expect(actual).toBe(expected);
+}
+
+/**
+ * Gets the filter:contrast value of the current background-image and
+ * asserts against an expected value
+ * @param {import('@playwright/test').Page} page
+ * @param {String} expected The expected contrast value
+ */
+async function assertBackgroundImageContrast(page, expected) {
+    const backgroundImage = page.locator('.c-imagery__main-image__background-image');
+
+    // Get the contrast filter value (i.e: filter: contrast(500%) => "500")
+    const actual = await backgroundImage.evaluate((el) => {
+        return el.style.filter.match(/contrast\((\d{1,3})%\)/)[1];
+    });
+    expect(actual).toBe(expected);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function assertBackgroundImageUrlFromBackgroundCss(page) {
+    const backgroundImage = page.locator('.c-imagery__main-image__background-image');
+    let backgroundImageUrl = await backgroundImage.evaluate((el) => {
+        return window.getComputedStyle(el).getPropertyValue('background-image').match(/url\(([^)]+)\)/)[1];
+    });
+    let backgroundImageUrl1 = backgroundImageUrl.slice(1, -1); //forgive me, padre
+    console.log('backgroundImageUrl1 ' + backgroundImageUrl1);
+
+    let backgroundImageUrl2;
+    await expect.poll(async () => {
+        // Verify next image has updated
+        let backgroundImageUrlNext = await backgroundImage.evaluate((el) => {
+            return window.getComputedStyle(el).getPropertyValue('background-image').match(/url\(([^)]+)\)/)[1];
+        });
+        backgroundImageUrl2 = backgroundImageUrlNext.slice(1, -1); //forgive me, padre
+
+        return backgroundImageUrl2;
+    }, {
+        message: "verify next image has updated",
+        timeout: 6 * 1000
+    }).not.toBe(backgroundImageUrl1);
+    console.log('backgroundImageUrl2 ' + backgroundImageUrl2);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function panZoomAndAssertImageProperties(page) {
+    const panHotkey = process.platform === 'linux' ? ['Control', 'Alt'] : ['Alt'];
+    const expectedAltText = process.platform === 'linux' ? 'Ctrl+Alt drag to pan' : 'Alt drag to pan';
+    const imageryHintsText = await page.locator('.c-imagery__hints').innerText();
+    expect(expectedAltText).toEqual(imageryHintsText);
+    const zoomedBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+    const imageCenterX = zoomedBoundingBox.x + zoomedBoundingBox.width / 2;
+    const imageCenterY = zoomedBoundingBox.y + zoomedBoundingBox.height / 2;
+
+    // Pan right
+    await Promise.all(panHotkey.map(x => page.keyboard.down(x)));
+    await page.mouse.down();
+    await page.mouse.move(imageCenterX - 200, imageCenterY, 10);
+    await page.mouse.up();
+    await Promise.all(panHotkey.map(x => page.keyboard.up(x)));
+    const afterRightPanBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+    expect(zoomedBoundingBox.x).toBeGreaterThan(afterRightPanBoundingBox.x);
+
+    // Pan left
+    await Promise.all(panHotkey.map(x => page.keyboard.down(x)));
+    await page.mouse.down();
+    await page.mouse.move(imageCenterX, imageCenterY, 10);
+    await page.mouse.up();
+    await Promise.all(panHotkey.map(x => page.keyboard.up(x)));
+    const afterLeftPanBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+    expect(afterRightPanBoundingBox.x).toBeLessThan(afterLeftPanBoundingBox.x);
+
+    // Pan up
+    await page.mouse.move(imageCenterX, imageCenterY);
+    await Promise.all(panHotkey.map(x => page.keyboard.down(x)));
+    await page.mouse.down();
+    await page.mouse.move(imageCenterX, imageCenterY + 200, 10);
+    await page.mouse.up();
+    await Promise.all(panHotkey.map(x => page.keyboard.up(x)));
+    const afterUpPanBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+    expect(afterUpPanBoundingBox.y).toBeGreaterThanOrEqual(afterLeftPanBoundingBox.y);
+
+    // Pan down
+    await Promise.all(panHotkey.map(x => page.keyboard.down(x)));
+    await page.mouse.down();
+    await page.mouse.move(imageCenterX, imageCenterY - 200, 10);
+    await page.mouse.up();
+    await Promise.all(panHotkey.map(x => page.keyboard.up(x)));
+    const afterDownPanBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+    expect(afterDownPanBoundingBox.y).toBeLessThanOrEqual(afterUpPanBoundingBox.y);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+*/
+async function mouseZoomIn(page) {
+    // Zoom in
+    const originalImageDimensions = await page.locator(backgroundImageSelector).boundingBox();
+    await page.locator(backgroundImageSelector).hover({trial: true});
+    const deltaYStep = 100; // equivalent to 1x zoom
+    await page.mouse.wheel(0, deltaYStep * 2);
+    const zoomedBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+    const imageCenterX = zoomedBoundingBox.x + zoomedBoundingBox.width / 2;
+    const imageCenterY = zoomedBoundingBox.y + zoomedBoundingBox.height / 2;
+
+    // center the mouse pointer
+    await page.mouse.move(imageCenterX, imageCenterY);
+
+    // Wait for zoom animation to finish
+    await page.locator(backgroundImageSelector).hover({trial: true});
+    const imageMouseZoomedIn = await page.locator(backgroundImageSelector).boundingBox();
+    expect(imageMouseZoomedIn.height).toBeGreaterThan(originalImageDimensions.height);
+    expect(imageMouseZoomedIn.width).toBeGreaterThan(originalImageDimensions.width);
+}

e2e/tests/plugins/notebook/restrictedNotebook.e2e.spec.js

@@ -27,14 +27,155 @@ const path = require('path');
 const TEST_TEXT = 'Testing text for entries.';
 const TEST_TEXT_NAME = 'Test Page';
 const CUSTOM_NAME = 'CUSTOM_NAME';
-const COMMIT_BUTTON_TEXT = 'button:has-text("Commit Entries")';
-const SINE_WAVE_GENERATOR = 'text=Unnamed Sine Wave Generator';
 const NOTEBOOK_DROP_AREA = '.c-notebook__drag-area';
 
+test.describe('Restricted Notebook', () => {
+    test.beforeEach(async ({ page }) => {
+        await startAndAddRestrictedNotebookObject(page);
+    });
+
+    test('Can be renamed @addInit', async ({ page }) => {
+        await expect(page.locator('.l-browse-bar__object-name')).toContainText(`Unnamed ${CUSTOM_NAME}`);
+    });
+
+    test('Can be deleted if there are no locked pages @addInit', async ({ page }) => {
+        await openContextMenuRestrictedNotebook(page);
+
+        const menuOptions = page.locator('.c-menu ul');
+        await expect.soft(menuOptions).toContainText('Remove');
+
+        const restrictedNotebookTreeObject = page.locator(`a:has-text("Unnamed ${CUSTOM_NAME}")`);
+
+        // notbook tree object exists
+        expect.soft(await restrictedNotebookTreeObject.count()).toEqual(1);
+
+        // Click Remove Text
+        await page.locator('text=Remove').click();
+
+        // Click 'OK' on confirmation window and wait for save banner to appear
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=OK').click(),
+            page.waitForSelector('.c-message-banner__message')
+        ]);
+
+        // has been deleted
+        expect(await restrictedNotebookTreeObject.count()).toEqual(0);
+    });
+
+    test('Can be locked if at least one page has one entry @addInit', async ({ page }) => {
+
+        await enterTextEntry(page);
+
+        const commitButton = page.locator('button:has-text("Commit Entries")');
+        expect(await commitButton.count()).toEqual(1);
+    });
+
+});
+
+test.describe('Restricted Notebook with at least one entry and with the page locked @addInit', () => {
+
+    test.beforeEach(async ({ page }) => {
+        await startAndAddRestrictedNotebookObject(page);
+        await enterTextEntry(page);
+        await lockPage(page);
+
+        // FIXME: Give ample time for the mutation to happen
+        // https://github.com/nasa/openmct/issues/5409
+        // eslint-disable-next-line playwright/no-wait-for-timeout
+        await page.waitForTimeout(1 * 1000);
+
+        // open sidebar
+        await page.locator('button.c-notebook__toggle-nav-button').click();
+    });
+
+    test('Locked page should now be in a locked state @addInit', async ({ page }, testInfo) => {
+        test.fixme(testInfo.project === 'chrome-beta', "Test is unreliable on chrome-beta");
+        // main lock message on page
+        const lockMessage = page.locator('text=This page has been committed and cannot be modified or removed');
+        expect.soft(await lockMessage.count()).toEqual(1);
+
+        // lock icon on page in sidebar
+        const pageLockIcon = page.locator('ul.c-notebook__pages li div.icon-lock');
+        expect.soft(await pageLockIcon.count()).toEqual(1);
+
+        // no way to remove a restricted notebook with a locked page
+        await openContextMenuRestrictedNotebook(page);
+        const menuOptions = page.locator('.c-menu ul');
+
+        await expect(menuOptions).not.toContainText('Remove');
+    });
+
+    test('Can still: add page, rename, add entry, delete unlocked pages @addInit', async ({ page }) => {
+        // Click text=Page Add >> button
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=Page Add >> button').click()
+        ]);
+        // Click text=Unnamed Page >> nth=1
+        await page.locator('text=Unnamed Page').nth(1).click();
+        // Press a with modifiers
+        await page.locator('text=Unnamed Page').nth(1).fill(TEST_TEXT_NAME);
+
+        // expect to be able to rename unlocked pages
+        const newPageElement = page.locator(`text=${TEST_TEXT_NAME}`);
+        const newPageCount = await newPageElement.count();
+        await newPageElement.press('Enter'); // exit contenteditable state
+        expect.soft(newPageCount).toEqual(1);
+
+        // enter test text
+        await enterTextEntry(page);
+
+        // expect new page to be lockable
+        const commitButton = page.locator('BUTTON:HAS-TEXT("COMMIT ENTRIES")');
+        expect.soft(await commitButton.count()).toEqual(1);
+
+        // Click text=Unnamed PageTest Page >> button
+        await page.locator('text=Unnamed PageTest Page >> button').click();
+        // Click text=Delete Page
+        await page.locator('text=Delete Page').click();
+        // Click text=Ok
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=Ok').click()
+        ]);
+
+        // deleted page, should no longer exist
+        const deletedPageElement = page.locator(`text=${TEST_TEXT_NAME}`);
+        expect(await deletedPageElement.count()).toEqual(0);
+    });
+});
+
+test.describe('Restricted Notebook with a page locked and with an embed @addInit', () => {
+
+    test.beforeEach(async ({ page }) => {
+        await startAndAddRestrictedNotebookObject(page);
+        await dragAndDropEmbed(page);
+    });
+
+    test('Allows embeds to be deleted if page unlocked @addInit', async ({ page }) => {
+        // Click .c-ne__embed__name .c-popup-menu-button
+        await page.locator('.c-ne__embed__name .c-popup-menu-button').click(); // embed popup menu
+
+        const embedMenu = page.locator('body >> .c-menu');
+        await expect(embedMenu).toContainText('Remove This Embed');
+    });
+
+    test('Disallows embeds to be deleted if page locked @addInit', async ({ page }) => {
+        await lockPage(page);
+        // Click .c-ne__embed__name .c-popup-menu-button
+        await page.locator('.c-ne__embed__name .c-popup-menu-button').click(); // embed popup menu
+
+        const embedMenu = page.locator('body >> .c-menu');
+        await expect(embedMenu).not.toContainText('Remove This Embed');
+    });
+
+});
+
 /**
  * @param {import('@playwright/test').Page} page
  */
-async function startAndAddNotebookObject(page) {
+async function startAndAddRestrictedNotebookObject(page) {
     // eslint-disable-next-line no-undef
     await page.addInitScript({ path: path.join(__dirname, 'addInitRestrictedNotebook.js') });
     //Go to baseURL
@@ -48,8 +189,6 @@ async function startAndAddNotebookObject(page) {
         page.waitForNavigation({waitUntil: 'networkidle'}),
         page.click('text=OK')
     ]);
-
-    return;
 }
 
 /**
@@ -63,8 +202,6 @@ async function enterTextEntry(page) {
     await page.locator('div.c-ne__text').click();
     await page.locator('div.c-ne__text').fill(TEST_TEXT);
     await page.locator('div.c-ne__text').press('Enter');
-
-    return;
 }
 
 /**
@@ -87,178 +224,32 @@ async function dragAndDropEmbed(page) {
         page.locator('text=Unnamed CUSTOM_NAME').click()
     ]);
 
-    await page.dragAndDrop(SINE_WAVE_GENERATOR, NOTEBOOK_DROP_AREA);
+    await page.dragAndDrop('text=UNNAMED SINE WAVE GENERATOR', NOTEBOOK_DROP_AREA);
-
-    return;
 }
 
 /**
  * @param {import('@playwright/test').Page} page
  */
 async function lockPage(page) {
-    const commitButton = page.locator(COMMIT_BUTTON_TEXT);
+    const commitButton = page.locator('button:has-text("Commit Entries")');
     await commitButton.click();
 
-    // confirmation dialog click
+    //Wait until Lock Banner is visible
     await page.locator('text=Lock Page').click();
-
-    // waiting for mutation of locked page
-    await new Promise((resolve, reject) => {
-        setTimeout(resolve, 1000);
-    });
-
-    return;
 }
 
 /**
  * @param {import('@playwright/test').Page} page
  */
 async function openContextMenuRestrictedNotebook(page) {
-    // Click text=Open MCT My Items (This expands the My Items folder to show it's chilren in the tree)
+    const myItemsFolder = page.locator('text=Open MCT My Items >> span').nth(3);
-    await page.locator('text=Open MCT My Items >> span').nth(3).click();
+    const className = await myItemsFolder.getAttribute('class');
+    if (!className.includes('c-disclosure-triangle--expanded')) {
+        await myItemsFolder.click();
+    }
 
     // Click a:has-text("Unnamed CUSTOM_NAME")
     await page.locator(`a:has-text("Unnamed ${CUSTOM_NAME}")`).click({
         button: 'right'
     });
-
-    return;
 }
-
-test.describe('Restricted Notebook', () => {
-
-    test.beforeEach(async ({ page }) => {
-        await startAndAddNotebookObject(page);
-    });
-
-    test('Can be renamed', async ({ page }) => {
-        await expect.soft(page.locator('.l-browse-bar__object-name')).toContainText(`Unnamed ${CUSTOM_NAME}`);
-    });
-
-    test('Can be deleted if there are no locked pages', async ({ page }) => {
-        await openContextMenuRestrictedNotebook(page);
-
-        const menuOptions = page.locator('.c-menu ul');
-        await expect.soft(menuOptions).toContainText('Remove');
-
-        const restrictedNotebookTreeObject = page.locator(`a:has-text("Unnamed ${CUSTOM_NAME}")`);
-
-        // notbook tree object exists
-        expect.soft(await restrictedNotebookTreeObject.count()).toEqual(1);
-
-        // Click text=Remove
-        await page.locator('text=Remove').click();
-        // Click text=OK
-        await Promise.all([
-            page.waitForNavigation(/*{ url: 'http://localhost:8080/#/browse/mine?tc.mode=fixed&tc.startBound=1653671067340&tc.endBound=1653672867340&tc.timeSystem=utc&view=grid' }*/),
-            page.locator('text=OK').click()
-        ]);
-
-        // has been deleted
-        expect.soft(await restrictedNotebookTreeObject.count()).toEqual(0);
-    });
-
-    test('Can be locked if at least one page has one entry', async ({ page }) => {
-
-        await enterTextEntry(page);
-
-        const commitButton = page.locator(COMMIT_BUTTON_TEXT);
-        expect.soft(await commitButton.count()).toEqual(1);
-    });
-
-});
-
-test.describe('Restricted Notebook with at least one entry and with the page locked', () => {
-
-    test.beforeEach(async ({ page }) => {
-        await startAndAddNotebookObject(page);
-        await enterTextEntry(page);
-        await lockPage(page);
-
-        // open sidebar
-        await page.locator('button.c-notebook__toggle-nav-button').click();
-    });
-
-    test('Locked page should now be in a locked state', async ({ page }) => {
-        // main lock message on page
-        const lockMessage = page.locator('text=This page has been committed and cannot be modified or removed');
-        expect.soft(await lockMessage.count()).toEqual(1);
-
-        // lock icon on page in sidebar
-        const pageLockIcon = page.locator('ul.c-notebook__pages li div.icon-lock');
-        expect.soft(await pageLockIcon.count()).toEqual(1);
-
-        // no way to remove a restricted notebook with a locked page
-        await openContextMenuRestrictedNotebook(page);
-
-        const menuOptions = page.locator('.c-menu ul');
-
-        await expect.soft(menuOptions).not.toContainText('Remove');
-
-    });
-
-    test('Can still: add page, rename, add entry, delete unlocked pages', async ({ page }) => {
-        // Click text=Page Add >> button
-        await Promise.all([
-            page.waitForNavigation(),
-            page.locator('text=Page Add >> button').click()
-        ]);
-        // Click text=Unnamed Page >> nth=1
-        await page.locator('text=Unnamed Page').nth(1).click();
-        // Press a with modifiers
-        await page.locator('text=Unnamed Page').nth(1).fill(TEST_TEXT_NAME);
-
-        // expect to be able to rename unlocked pages
-        const newPageElement = page.locator(`text=${TEST_TEXT_NAME}`);
-        const newPageCount = await newPageElement.count();
-        await newPageElement.press('Enter'); // exit contenteditable state
-        expect.soft(newPageCount).toEqual(1);
-
-        // enter test text
-        await enterTextEntry(page);
-
-        // expect new page to be lockable
-        const commitButton = page.locator(COMMIT_BUTTON_TEXT);
-        expect.soft(await commitButton.count()).toEqual(1);
-
-        // Click text=Unnamed PageTest Page >> button
-        await page.locator('text=Unnamed PageTest Page >> button').click();
-        // Click text=Delete Page
-        await page.locator('text=Delete Page').click();
-        // Click text=Ok
-        await Promise.all([
-            page.waitForNavigation(),
-            page.locator('text=Ok').click()
-        ]);
-
-        // deleted page, should no longer exist
-        const deletedPageElement = page.locator(`text=${TEST_TEXT_NAME}`);
-        expect.soft(await deletedPageElement.count()).toEqual(0);
-    });
-});
-
-test.describe('Restricted Notebook with a page locked and with an embed', () => {
-
-    test.beforeEach(async ({ page }) => {
-        await startAndAddNotebookObject(page);
-        await dragAndDropEmbed(page);
-    });
-
-    test('Allows embeds to be deleted if page unlocked', async ({ page }) => {
-        // Click .c-ne__embed__name .c-popup-menu-button
-        await page.locator('.c-ne__embed__name .c-popup-menu-button').click(); // embed popup menu
-
-        const embedMenu = page.locator('body >> .c-menu');
-        await expect.soft(embedMenu).toContainText('Remove This Embed');
-    });
-
-    test('Disallows embeds to be deleted if page locked', async ({ page }) => {
-        await lockPage(page);
-        // Click .c-ne__embed__name .c-popup-menu-button
-        await page.locator('.c-ne__embed__name .c-popup-menu-button').click(); // embed popup menu
-
-        const embedMenu = page.locator('body >> .c-menu');
-        await expect.soft(embedMenu).not.toContainText('Remove This Embed');
-    });
-
-});

e2e/tests/plugins/notebook/tags.e2e.spec.js

@@ -0,0 +1,205 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify form functionality.
+*/
+
+const { expect } = require('@playwright/test');
+const { test } = require('../../../fixtures');
+
+/**
+  * Creates a notebook object and adds an entry.
+  * @param {import('@playwright/test').Page} - page to load
+  * @param {number} [iterations = 1] - the number of entries to create
+  */
+async function createNotebookAndEntry(page, iterations = 1) {
+    //Go to baseURL
+    await page.goto('/', { waitUntil: 'networkidle' });
+
+    // Click button:has-text("Create")
+    await page.locator('button:has-text("Create")').click();
+    await page.locator('[title="Create and save timestamped notes with embedded object snapshots."]').click();
+    // Click button:has-text("OK")
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('[name="mctForm"] >> text=My Items').click(),
+        page.locator('button:has-text("OK")').click()
+    ]);
+
+    for (let iteration = 0; iteration < iterations; iteration++) {
+        // Click text=To start a new entry, click here or drag and drop any object
+        await page.locator('text=To start a new entry, click here or drag and drop any object').click();
+        const entryLocator = `[aria-label="Notebook Entry Input"] >> nth = ${iteration}`;
+        await page.locator(entryLocator).click();
+        await page.locator(entryLocator).fill(`Entry ${iteration}`);
+    }
+
+}
+
+/**
+  * Creates a notebook object, adds an entry, and adds a tag.
+  * @param {import('@playwright/test').Page} page
+  * @param {number} [iterations = 1] - the number of entries (and tags) to create
+  */
+async function createNotebookEntryAndTags(page, iterations = 1) {
+    await createNotebookAndEntry(page, iterations);
+
+    for (let iteration = 0; iteration < iterations; iteration++) {
+        // Click text=To start a new entry, click here or drag and drop any object
+        await page.locator(`button:has-text("Add Tag") >> nth = ${iteration}`).click();
+
+        // Click [placeholder="Type to select tag"]
+        await page.locator('[placeholder="Type to select tag"]').click();
+        // Click text=Driving
+        await page.locator('[aria-label="Autocomplete Options"] >> text=Driving').click();
+
+        // Click button:has-text("Add Tag")
+        await page.locator(`button:has-text("Add Tag") >> nth = ${iteration}`).click();
+        // Click [placeholder="Type to select tag"]
+        await page.locator('[placeholder="Type to select tag"]').click();
+        // Click text=Science
+        await page.locator('[aria-label="Autocomplete Options"] >> text=Science').click();
+    }
+}
+
+test.describe('Tagging in Notebooks', () => {
+    test('Can load tags', async ({ page }) => {
+        await createNotebookAndEntry(page);
+        // Click text=To start a new entry, click here or drag and drop any object
+        await page.locator('button:has-text("Add Tag")').click();
+
+        // Click [placeholder="Type to select tag"]
+        await page.locator('[placeholder="Type to select tag"]').click();
+
+        await expect(page.locator('[aria-label="Autocomplete Options"]')).toContainText("Science");
+        await expect(page.locator('[aria-label="Autocomplete Options"]')).toContainText("Drilling");
+        await expect(page.locator('[aria-label="Autocomplete Options"]')).toContainText("Driving");
+    });
+    test('Can add tags', async ({ page }) => {
+        await createNotebookEntryAndTags(page);
+
+        await expect(page.locator('[aria-label="Notebook Entry"]')).toContainText("Science");
+        await expect(page.locator('[aria-label="Notebook Entry"]')).toContainText("Driving");
+
+        // Click button:has-text("Add Tag")
+        await page.locator('button:has-text("Add Tag")').click();
+        // Click [placeholder="Type to select tag"]
+        await page.locator('[placeholder="Type to select tag"]').click();
+
+        await expect(page.locator('[aria-label="Autocomplete Options"]')).not.toContainText("Science");
+        await expect(page.locator('[aria-label="Autocomplete Options"]')).not.toContainText("Driving");
+        await expect(page.locator('[aria-label="Autocomplete Options"]')).toContainText("Drilling");
+    });
+    test('Can search for tags', async ({ page }) => {
+        await createNotebookEntryAndTags(page);
+        // Click [aria-label="OpenMCT Search"] input[type="search"]
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+        // Fill [aria-label="OpenMCT Search"] input[type="search"]
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('sc');
+        await expect(page.locator('[aria-label="Search Result"]')).toContainText("Science");
+        await expect(page.locator('[aria-label="Search Result"]')).toContainText("Driving");
+
+        // Click [aria-label="OpenMCT Search"] input[type="search"]
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+        // Fill [aria-label="OpenMCT Search"] input[type="search"]
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Sc');
+        await expect(page.locator('[aria-label="Search Result"]')).toContainText("Science");
+        await expect(page.locator('[aria-label="Search Result"]')).toContainText("Driving");
+
+        // Click [aria-label="OpenMCT Search"] input[type="search"]
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+        // Fill [aria-label="OpenMCT Search"] input[type="search"]
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Xq');
+        await expect(page.locator('[aria-label="Search Result"]')).not.toBeVisible();
+        await expect(page.locator('[aria-label="Search Result"]')).not.toBeVisible();
+    });
+
+    test('Can delete tags', async ({ page }) => {
+        await createNotebookEntryAndTags(page);
+        await page.locator('[aria-label="Notebook Entries"]').click();
+        // Delete Driving
+        await page.locator('text=Science Driving Add Tag >> button').nth(1).click();
+
+        await expect(page.locator('[aria-label="Notebook Entry"]')).toContainText("Science");
+        await expect(page.locator('[aria-label="Notebook Entry"]')).not.toContainText("Driving");
+
+        // Fill [aria-label="OpenMCT Search"] input[type="search"]
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('sc');
+        await expect(page.locator('[aria-label="Search Result"]')).not.toContainText("Driving");
+    });
+    test('Tags persist across reload', async ({ page }) => {
+        //Go to baseURL
+        await page.goto('/', { waitUntil: 'networkidle' });
+
+        // Create a clock object we can navigate to
+        await page.click('button:has-text("Create")');
+
+        // Click Clock
+        await page.click('text=Clock');
+        // Click button:has-text("OK")
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('[name="mctForm"] >> text=My Items').click(),
+            page.locator('button:has-text("OK")').click()
+        ]);
+
+        await page.click('.c-disclosure-triangle');
+
+        const ITERATIONS = 4;
+        await createNotebookEntryAndTags(page, ITERATIONS);
+
+        for (let iteration = 0; iteration < ITERATIONS; iteration++) {
+            const entryLocator = `[aria-label="Notebook Entry"] >> nth = ${iteration}`;
+            await expect(page.locator(entryLocator)).toContainText("Science");
+            await expect(page.locator(entryLocator)).toContainText("Driving");
+        }
+
+        // Click Unnamed Clock
+        await page.click('text="Unnamed Clock"');
+
+        // Click Unnamed Notebook
+        await page.click('text="Unnamed Notebook"');
+
+        for (let iteration = 0; iteration < ITERATIONS; iteration++) {
+            const entryLocator = `[aria-label="Notebook Entry"] >> nth = ${iteration}`;
+            await expect(page.locator(entryLocator)).toContainText("Science");
+            await expect(page.locator(entryLocator)).toContainText("Driving");
+        }
+
+        //Reload Page
+        await Promise.all([
+            page.reload(),
+            page.waitForLoadState('networkidle')
+        ]);
+
+        // Click Unnamed Notebook
+        await page.click('text="Unnamed Notebook"');
+
+        for (let iteration = 0; iteration < ITERATIONS; iteration++) {
+            const entryLocator = `[aria-label="Notebook Entry"] >> nth = ${iteration}`;
+            await expect(page.locator(entryLocator)).toContainText("Science");
+            await expect(page.locator(entryLocator)).toContainText("Driving");
+        }
+
+    });
+});

e2e/tests/plugins/plot/autoscale.e2e.spec.js

@@ -24,22 +24,9 @@
 Testsuite for plot autoscale.
 */
 
-const { test: _test } = require('../../../fixtures.js');
+const { test } = require('../../../fixtures.js');
 const { expect } = require('@playwright/test');
 
-// create a new `test` API that will not append platform details to snapshot
-// file names, only for the tests in this file, so that the same snapshots will
-// be used for all platforms.
-const test = _test.extend({
-    _autoSnapshotSuffix: [
-        async ({}, use, testInfo) => {
-            testInfo.snapshotSuffix = '';
-            await use();
-        },
-        { auto: true }
-    ]
-});
-
 test.use({
     viewport: {
         width: 1280,
@@ -50,7 +37,7 @@ test.use({
 test.describe('ExportAsJSON', () => {
     test('User can set autoscale with a valid range @snapshot', async ({ page }) => {
         //This is necessary due to the size of the test suite.
-        await test.setTimeout(120 * 1000);
+        test.slow();
 
         await page.goto('/', { waitUntil: 'networkidle' });
 
@@ -62,16 +49,16 @@ test.describe('ExportAsJSON', () => {
 
         await turnOffAutoscale(page);
 
+        // Make sure that after turning off autoscale, the user selected range values start at the same values the plot had prior.
+        await testYTicks(page, ['-1.00', '-0.50', '0.00', '0.50', '1.00']);
+
         const canvas = page.locator('canvas').nth(1);
 
-        // Make sure that after turning off autoscale, the user selected range values start at the same values the plot had prior.
+        await canvas.hover({trial: true});
-        await Promise.all([
-            testYTicks(page, ['-1.00', '-0.50', '0.00', '0.50', '1.00']),
-            new Promise(r => setTimeout(r, 100))
-                .then(() => canvas.screenshot())
-                .then(shot => expect(shot).toMatchSnapshot('autoscale-canvas-prepan.png', { maxDiffPixels: 40 }))
-        ]);
 
+        expect(await canvas.screenshot()).toMatchSnapshot('autoscale-canvas-prepan');
+
+        //Alt Drag Start
         await page.keyboard.down('Alt');
 
         await canvas.dragTo(canvas, {
@@ -85,15 +72,15 @@ test.describe('ExportAsJSON', () => {
             }
         });
 
+        //Alt Drag End
         await page.keyboard.up('Alt');
 
         // Ensure the drag worked.
-        await Promise.all([
+        await testYTicks(page, ['0.00', '0.50', '1.00', '1.50', '2.00']);
-            testYTicks(page, ['0.00', '0.50', '1.00', '1.50', '2.00']),
+
-            new Promise(r => setTimeout(r, 100))
+        await canvas.hover({trial: true});
-                .then(() => canvas.screenshot())
+
-                .then(shot => expect(shot).toMatchSnapshot('autoscale-canvas-panned.png', { maxDiffPixels: 40 }))
+        expect(await canvas.screenshot()).toMatchSnapshot('autoscale-canvas-panned');
-        ]);
     });
 });
 

e2e/tests/plugins/plot/logPlot.e2e.spec.js

@@ -30,8 +30,8 @@ const { expect } = require('@playwright/test');
 
 test.describe('Log plot tests', () => {
     test('Log Plot ticks are functionally correct in regular and log mode and after refresh', async ({ page }) => {
-        //This is necessary due to the size of the test suite.
+        //Test.slow decorator is currently broken. Needs to be fixed in https://github.com/nasa/openmct/issues/5374
-        await test.setTimeout(120 * 1000);
+        test.slow();
 
         await makeOverlayPlot(page);
         await testRegularTicks(page);
@@ -44,20 +44,6 @@ test.describe('Log plot tests', () => {
         await testLogTicks(page);
         await saveOverlayPlot(page);
         await testLogTicks(page);
-        //await testLogPlotPixels(page);
-
-        // FIXME: Get rid of the waitForTimeout() and lint warning exception.
-        // eslint-disable-next-line playwright/no-wait-for-timeout
-        await page.waitForTimeout(1 * 1000);
-
-        // refresh page and wait for charts and ticks to load
-        await page.reload({ waitUntil: 'networkidle'});
-        await page.waitForSelector('.gl-plot-chart-area');
-        await page.waitForSelector('.gl-plot-y-tick-label');
-
-        // test log ticks hold up after refresh
-        await testLogTicks(page);
-        //await testLogPlotPixels(page);
     });
 
     // Leaving test as 'TODO' for now.
@@ -121,14 +107,14 @@ async function makeOverlayPlot(page) {
 
     // set amplitude to 6, offset 4, period 2
 
-    await page.locator('div:nth-child(5) .form-row .c-form-row__controls .form-control .field input').click();
+    await page.locator('div:nth-child(5) .c-form-row__controls .form-control .field input').click();
-    await page.locator('div:nth-child(5) .form-row .c-form-row__controls .form-control .field input').fill('6');
+    await page.locator('div:nth-child(5) .c-form-row__controls .form-control .field input').fill('6');
 
-    await page.locator('div:nth-child(6) .form-row .c-form-row__controls .form-control .field input').click();
+    await page.locator('div:nth-child(6) .c-form-row__controls .form-control .field input').click();
-    await page.locator('div:nth-child(6) .form-row .c-form-row__controls .form-control .field input').fill('4');
+    await page.locator('div:nth-child(6) .c-form-row__controls .form-control .field input').fill('4');
 
-    await page.locator('div:nth-child(7) .form-row .c-form-row__controls .form-control .field input').click();
+    await page.locator('div:nth-child(7) .c-form-row__controls .form-control .field input').click();
-    await page.locator('div:nth-child(7) .form-row .c-form-row__controls .form-control .field input').fill('2');
+    await page.locator('div:nth-child(7) .c-form-row__controls .form-control .field input').fill('2');
 
     // Click OK to make generator
 

e2e/tests/plugins/plot/missingPlotObj.e2e.spec.js

@@ -0,0 +1,155 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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.
+ *****************************************************************************/
+
+/*
+Tests to verify log plot functionality when objects are missing
+*/
+
+const { test } = require('../../../fixtures.js');
+const { expect } = require('@playwright/test');
+
+test.describe('Handle missing object for plots', () => {
+    test('Displays empty div for missing stacked plot item', async ({ page, browserName }) => {
+        test.fixme(browserName === 'firefox', 'Firefox failing due to console events being missed');
+        const errorLogs = [];
+
+        page.on("console", (message) => {
+            if (message.type() === 'warning' && message.text().includes('Missing domain object')) {
+                errorLogs.push(message.text());
+            }
+        });
+
+        //Make stacked plot
+        await makeStackedPlot(page);
+
+        //Gets local storage and deletes the last sine wave generator in the stacked plot
+        const localStorage = await page.evaluate(() => window.localStorage);
+        const parsedData = JSON.parse(localStorage.mct);
+        const keys = Object.keys(parsedData);
+        const lastKey = keys[keys.length - 1];
+
+        delete parsedData[lastKey];
+
+        //Sets local storage with missing object
+        await page.evaluate(
+            `window.localStorage.setItem('mct', '${JSON.stringify(parsedData)}')`
+        );
+
+        //Reloads page and clicks on stacked plot
+        await Promise.all([
+            page.reload(),
+            page.waitForLoadState('networkidle')
+        ]);
+
+        //Verify Main section is there on load
+        await expect.soft(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Stacked Plot');
+
+        await page.locator('text=Open MCT My Items >> span').nth(3).click();
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=Unnamed Stacked Plot').first().click()
+        ]);
+
+        //Check that there is only one stacked item plot with a plot, the missing one will be empty
+        await expect(page.locator(".c-plot--stacked-container:has(.gl-plot)")).toHaveCount(1);
+        //Verify that console.warn is thrown
+        expect(errorLogs).toHaveLength(1);
+    });
+});
+
+/**
+ * This is used the create a stacked plot object
+ * @private
+ */
+async function makeStackedPlot(page) {
+    // fresh page with time range from 2022-03-29 22:00:00.000Z to 2022-03-29 22:00:30.000Z
+    await page.goto('/', { waitUntil: 'networkidle' });
+
+    // create stacked plot
+    await page.locator('button.c-create-button').click();
+    await page.locator('li:has-text("Stacked Plot")').click();
+
+    await Promise.all([
+        page.waitForNavigation({ waitUntil: 'networkidle'}),
+        page.locator('text=OK').click(),
+        //Wait for Save Banner to appear
+        page.waitForSelector('.c-message-banner__message')
+    ]);
+
+    // save the stacked plot
+    await saveStackedPlot(page);
+
+    // create a sinewave generator
+    await createSineWaveGenerator(page);
+
+    // click on stacked plot
+    await page.locator('text=Open MCT My Items >> span').nth(3).click();
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('text=Unnamed Stacked Plot').first().click()
+    ]);
+
+    // create a second sinewave generator
+    await createSineWaveGenerator(page);
+
+    // click on stacked plot
+    await page.locator('text=Open MCT My Items >> span').nth(3).click();
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('text=Unnamed Stacked Plot').first().click()
+    ]);
+}
+
+/**
+ * This is used to save a stacked plot object
+ * @private
+ */
+async function saveStackedPlot(page) {
+    // save stacked plot
+    await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1).click();
+
+    await Promise.all([
+        page.locator('text=Save and Finish Editing').click(),
+        //Wait for Save Banner to appear
+        page.waitForSelector('.c-message-banner__message')
+    ]);
+    //Wait until Save Banner is gone
+    await page.locator('.c-message-banner__close-button').click();
+    await page.waitForSelector('.c-message-banner__message', { state: 'detached' });
+}
+
+/**
+ * This is used to create a sine wave generator object
+ * @private
+ */
+async function createSineWaveGenerator(page) {
+    //Create sine wave generator
+    await page.locator('button.c-create-button').click();
+    await page.locator('li:has-text("Sine Wave Generator")').click();
+
+    await Promise.all([
+        page.waitForNavigation({ waitUntil: 'networkidle'}),
+        page.locator('text=OK').click(),
+        //Wait for Save Banner to appear
+        page.waitForSelector('.c-message-banner__message')
+    ]);
+}

e2e/tests/plugins/remoteClock/remoteClock.e2e.spec.js

@@ -0,0 +1,41 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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.
+ *****************************************************************************/
+
+const { test } = require('../../../fixtures.js');
+// eslint-disable-next-line no-unused-vars
+const { expect } = require('@playwright/test');
+
+test.describe('Remote Clock', () => {
+    // eslint-disable-next-line require-await
+    test.fixme('blocks historical requests until first tick is received', async ({ page }) => {
+        test.info().annotations.push({
+            type: 'issue',
+            description: 'https://github.com/nasa/openmct/issues/5221'
+        });
+        // addInitScript to with remote clock
+        // Switch time conductor mode to 'remote clock'
+        // Navigate to telemetry
+        // Verify that the plot renders historical data within the correct bounds
+        // Refresh the page
+        // Verify again that the plot renders historical data within the correct bounds
+    });
+});

e2e/tests/plugins/telemetryTable/telemetryTable.e2e.spec.js

@@ -24,7 +24,7 @@ const { test } = require('../../../fixtures');
 const { expect } = require('@playwright/test');
 
 test.describe('Telemetry Table', () => {
-    test('unpauses when paused by button and user changes bounds', async ({ page }) => {
+    test('unpauses and filters data when paused by button and user changes bounds', async ({ page }) => {
         test.info().annotations.push({
             type: 'issue',
             description: 'https://github.com/nasa/openmct/issues/5113'
@@ -39,9 +39,6 @@ test.describe('Telemetry Table', () => {
         await page.locator(createButton).click();
         await page.locator('li:has-text("Telemetry Table")').click();
 
-        // Click on My Items in Tree. Workaround for https://github.com/nasa/openmct/issues/5184
-        await page.click('form[name="mctForm"] a:has-text("My Items")');
-
         await Promise.all([
             page.waitForNavigation(),
             page.locator('text=OK').click(),
@@ -59,9 +56,6 @@ test.describe('Telemetry Table', () => {
         // add Sine Wave Generator with defaults
         await page.locator('li:has-text("Sine Wave Generator")').click();
 
-        // Click on My Items in Tree. Workaround for https://github.com/nasa/openmct/issues/5184
-        await page.click('form[name="mctForm"] a:has-text("My Items")');
-
         await Promise.all([
             page.waitForNavigation(),
             page.locator('text=OK').click(),
@@ -77,25 +71,34 @@ test.describe('Telemetry Table', () => {
         ]);
 
         // Click pause button
-        const pauseButton = await page.locator('button.c-button.icon-pause');
+        const pauseButton = page.locator('button.c-button.icon-pause');
         await pauseButton.click();
 
-        const tableWrapper = await page.locator('div.c-table-wrapper');
+        const tableWrapper = page.locator('div.c-table-wrapper');
         await expect(tableWrapper).toHaveClass(/is-paused/);
 
-        // Arbitrarily change end date to some time in the future
+        // Subtract 5 minutes from the current end bound datetime and set it
         const endTimeInput = page.locator('input[type="text"].c-input--datetime').nth(1);
         await endTimeInput.click();
 
         let endDate = await endTimeInput.inputValue();
         endDate = new Date(endDate);
-        endDate.setUTCDate(endDate.getUTCDate() + 1);
+
-        endDate = endDate.toISOString().replace(/T.*/, '');
+        endDate.setUTCMinutes(endDate.getUTCMinutes() - 5);
+        endDate = endDate.toISOString().replace(/T/, ' ');
 
         await endTimeInput.fill('');
         await endTimeInput.fill(endDate);
         await page.keyboard.press('Enter');
 
         await expect(tableWrapper).not.toHaveClass(/is-paused/);
+
+        // Get the most recent telemetry date
+        const latestTelemetryDate = await page.locator('table.c-telemetry-table__body > tbody > tr').last().locator('td').nth(1).getAttribute('title');
+
+        // Verify that it is <= our new end bound
+        const latestMilliseconds = Date.parse(latestTelemetryDate);
+        const endBoundMilliseconds = Date.parse(endDate);
+        expect(latestMilliseconds).toBeLessThanOrEqual(endBoundMilliseconds);
     });
 });

e2e/tests/plugins/timer/timer.e2e.spec.js

@@ -0,0 +1,185 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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.
+ *****************************************************************************/
+
+const { test } = require('../../../fixtures.js');
+const { expect } = require('@playwright/test');
+
+test.describe('Timer', () => {
+
+    test.beforeEach(async ({ page }) => {
+        //Go to baseURL
+        await page.goto('/', { waitUntil: 'networkidle' });
+
+        //Click the Create button
+        await page.click('button:has-text("Create")');
+
+        // Click 'Timer'
+        await page.click('text=Timer');
+
+        // Click text=OK
+        await Promise.all([
+            page.waitForNavigation({waitUntil: 'networkidle'}),
+            page.click('text=OK')
+        ]);
+
+        await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Timer');
+    });
+
+    test('Can perform actions on the Timer', async ({ page }) => {
+        test.info().annotations.push({
+            type: 'issue',
+            description: 'https://github.com/nasa/openmct/issues/4313'
+        });
+
+        await test.step("From the tree context menu", async () => {
+            await triggerTimerContextMenuAction(page, 'Start');
+            await triggerTimerContextMenuAction(page, 'Pause');
+            await triggerTimerContextMenuAction(page, 'Restart at 0');
+            await triggerTimerContextMenuAction(page, 'Stop');
+        });
+
+        await test.step("From the 3dot menu", async () => {
+            await triggerTimer3dotMenuAction(page, 'Start');
+            await triggerTimer3dotMenuAction(page, 'Pause');
+            await triggerTimer3dotMenuAction(page, 'Restart at 0');
+            await triggerTimer3dotMenuAction(page, 'Stop');
+        });
+
+        await test.step("From the object view", async () => {
+            await triggerTimerViewAction(page, 'Start');
+            await triggerTimerViewAction(page, 'Pause');
+            await triggerTimerViewAction(page, 'Restart at 0');
+        });
+    });
+});
+
+/**
+ * Actions that can be performed on a timer from context menus.
+ * @typedef {'Start' | 'Stop' | 'Pause' | 'Restart at 0'} TimerAction
+ */
+
+/**
+ * Actions that can be performed on a timer from the object view.
+ * @typedef {'Start' | 'Pause' | 'Restart at 0'} TimerViewAction
+ */
+
+/**
+ * Open the timer context menu from the object tree.
+ * Expands the 'My Items' folder if it is not already expanded.
+ * @param {import('@playwright/test').Page} page
+ */
+async function openTimerContextMenu(page) {
+    const myItemsFolder = page.locator('text=Open MCT My Items >> span').nth(3);
+    const className = await myItemsFolder.getAttribute('class');
+    if (!className.includes('c-disclosure-triangle--expanded')) {
+        await myItemsFolder.click();
+    }
+
+    await page.locator(`a:has-text("Unnamed Timer")`).click({
+        button: 'right'
+    });
+}
+
+/**
+ * Trigger a timer action from the tree context menu
+ * @param {import('@playwright/test').Page} page
+ * @param {TimerAction} action
+ */
+async function triggerTimerContextMenuAction(page, action) {
+    const menuAction = `.c-menu ul li >> text="${action}"`;
+    await openTimerContextMenu(page);
+    await page.locator(menuAction).click();
+    assertTimerStateAfterAction(page, action);
+}
+
+/**
+ * Trigger a timer action from the 3dot menu
+ * @param {import('@playwright/test').Page} page
+ * @param {TimerAction} action
+ */
+async function triggerTimer3dotMenuAction(page, action) {
+    const menuAction = `.c-menu ul li >> text="${action}"`;
+    const threeDotMenuButton = 'button[title="More options"]';
+    let isActionAvailable = false;
+    let iterations = 0;
+    // Dismiss/open the 3dot menu until the action is available
+    // or a maxiumum number of iterations is reached
+    while (!isActionAvailable && iterations <= 20) {
+        await page.click('.c-object-view');
+        await page.click(threeDotMenuButton);
+        isActionAvailable = await page.locator(menuAction).isVisible();
+        iterations++;
+    }
+
+    await page.locator(menuAction).click();
+    assertTimerStateAfterAction(page, action);
+}
+
+/**
+ * Trigger a timer action from the object view
+ * @param {import('@playwright/test').Page} page
+ * @param {TimerViewAction} action
+ */
+async function triggerTimerViewAction(page, action) {
+    await page.locator('.c-timer').hover({trial: true});
+    const buttonTitle = buttonTitleFromAction(action);
+    await page.click(`button[title="${buttonTitle}"]`);
+    assertTimerStateAfterAction(page, action);
+}
+
+/**
+ * Takes in a TimerViewAction and returns the button title
+ * @param {TimerViewAction} action
+ */
+function buttonTitleFromAction(action) {
+    switch (action) {
+    case 'Start':
+        return 'Start';
+    case 'Pause':
+        return 'Pause';
+    case 'Restart at 0':
+        return 'Reset';
+    }
+}
+
+/**
+ * Verify the timer state after a timer action has been performed.
+ * @param {import('@playwright/test').Page} page
+ * @param {TimerAction} action
+ */
+async function assertTimerStateAfterAction(page, action) {
+    let timerStateClass;
+    switch (action) {
+    case 'Start':
+    case 'Restart at 0':
+        timerStateClass = "is-started";
+        break;
+    case 'Stop':
+        timerStateClass = 'is-stopped';
+        break;
+    case 'Pause':
+        timerStateClass = 'is-paused';
+        break;
+    }
+
+    await expect.soft(page.locator('.c-timer')).toHaveClass(new RegExp(timerStateClass));
+}

e2e/tests/recycled_storage.json

@@ -1,22 +0,0 @@
-{
-  "cookies": [],
-  "origins": [
-    {
-      "origin": "http://localhost:8080",
-      "localStorage": [
-        {
-          "name": "tcHistory",
-          "value": "{\"utc\":[{\"start\":1652301954635,\"end\":1652303754635}]}"
-        },
-        {
-          "name": "mct",
-          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1652303756008,\"modified\":1652303756007},\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"73f2d9ae-d1f3-4561-b7fc-ecd5df557249\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1652303755999,\"location\":\"mine\",\"persisted\":1652303756002}}"
-        },
-        {
-          "name": "mct-tree-expanded",
-          "value": "[]"
-        }
-      ]
-    }
-  ]
-}

e2e/tests/smoke.e2e.spec.js

@@ -45,6 +45,15 @@ test('Verify that the create button appears and that the Folder Domain Object is
     await page.click('button:has-text("Create")');
 
     // Verify that Create Folder appears in the dropdown
-    const locator = page.locator(':nth-match(:text("Folder"), 2)');
+    await expect(page.locator(':nth-match(:text("Folder"), 2)')).toBeEnabled();
-    await expect(locator).toBeEnabled();
+});
+
+test('Verify that My Items Tree appears @ipad', async ({ page }) => {
+    //Test.slow annotation is currently broken. Needs to be fixed in https://github.com/nasa/openmct/issues/5374
+    test.slow();
+    //Go to baseURL
+    await page.goto('/');
+
+    //My Items to be visible
+    await expect(page.locator('a:has-text("My Items")')).toBeEnabled();
 });

e2e/tests/ui/layout/search/grandsearch.e2e.spec.js

@@ -0,0 +1,111 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify search functionality.
+*/
+
+const { expect } = require('@playwright/test');
+const { test } = require('../../../../fixtures');
+
+/**
+  * Creates a notebook object and adds an entry.
+  * @param {import('@playwright/test').Page} page
+  */
+async function createClockAndDisplayLayout(page) {
+    //Go to baseURL
+    await page.goto('/', { waitUntil: 'networkidle' });
+
+    // Click button:has-text("Create")
+    await page.locator('button:has-text("Create")').click();
+    // Click li:has-text("Notebook")
+    await page.locator('li:has-text("Clock")').click();
+    // Click button:has-text("OK")
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('button:has-text("OK")').click()
+    ]);
+
+    // Click a:has-text("My Items")
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('a:has-text("My Items") >> nth=0').click()
+    ]);
+    // Click button:has-text("Create")
+    await page.locator('button:has-text("Create")').click();
+    // Click li:has-text("Notebook")
+    await page.locator('li:has-text("Display Layout")').click();
+    // Click button:has-text("OK")
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('button:has-text("OK")').click()
+    ]);
+}
+
+test.describe('Grand Search', () => {
+    test('Can search for objects, and subsequent search dropdown behaves properly', async ({ page }) => {
+        await createClockAndDisplayLayout(page);
+
+        // Click [aria-label="OpenMCT Search"] input[type="search"]
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+        // Fill [aria-label="OpenMCT Search"] input[type="search"]
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Cl');
+        await expect(page.locator('[aria-label="Search Result"]')).toContainText('Clock');
+        // Click text=Elements >> nth=0
+        await page.locator('text=Elements').first().click();
+        await expect(page.locator('[aria-label="Search Result"]')).not.toBeVisible();
+
+        // Click [aria-label="OpenMCT Search"] [aria-label="Search Input"]
+        await page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]').click();
+        // Click [aria-label="Unnamed Clock clock result"] >> text=Unnamed Clock
+        await page.locator('[aria-label="Unnamed Clock clock result"] >> text=Unnamed Clock').click();
+        await expect(page.locator('.js-preview-window')).toBeVisible();
+
+        // Click [aria-label="Close"]
+        await page.locator('[aria-label="Close"]').click();
+        await expect(page.locator('[aria-label="Search Result"]')).toBeVisible();
+        await expect(page.locator('[aria-label="Search Result"]')).toContainText('Cloc');
+
+        // Click [aria-label="OpenMCT Search"] a >> nth=0
+        await page.locator('[aria-label="OpenMCT Search"] a').first().click();
+        await expect(page.locator('[aria-label="Search Result"]')).not.toBeVisible();
+
+        // Fill [aria-label="OpenMCT Search"] input[type="search"]
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('foo');
+        await expect(page.locator('[aria-label="Search Result"]')).not.toBeVisible();
+
+        // Click text=Snapshot Save and Finish Editing Save and Continue Editing >> button >> nth=1
+        await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1).click();
+        // Click text=Save and Finish Editing
+        await page.locator('text=Save and Finish Editing').click();
+        // Click [aria-label="OpenMCT Search"] [aria-label="Search Input"]
+        await page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]').click();
+        // Fill [aria-label="OpenMCT Search"] [aria-label="Search Input"]
+        await page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]').fill('Cl');
+        // Click text=Unnamed Clock
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=Unnamed Clock').click()
+        ]);
+        await expect(page.locator('.is-object-type-clock')).toBeVisible();
+    });
+});

e2e/tests/visual/addInit.visual.spec.js

@@ -0,0 +1,76 @@
+/* eslint-disable no-undef */
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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.
+ *****************************************************************************/
+
+/*
+Collection of Visual Tests set to run with modified init scripts to inject plugins not otherwise available in the default contexts.
+
+These should only use functional expect statements to verify assumptions about the state
+in a test and not for functional verification of correctness. Visual tests are not supposed
+to "fail" on assertions. Instead, they should be used to detect changes between builds or branches.
+
+Note: Larger testsuite sizes are OK due to the setup time associated with these tests.
+*/
+
+const { test } = require('@playwright/test');
+const percySnapshot = require('@percy/playwright');
+const path = require('path');
+const sinon = require('sinon');
+
+const VISUAL_GRACE_PERIOD = 5 * 1000; //Lets the application "simmer" before the snapshot is taken
+
+const CUSTOM_NAME = 'CUSTOM_NAME';
+
+// Snippet from https://github.com/microsoft/playwright/issues/6347#issuecomment-965887758
+// Will replace with cy.clock() equivalent
+test.beforeEach(async ({ context }) => {
+    await context.addInitScript({
+        path: path.join(__dirname, '../../..', './node_modules/sinon/pkg/sinon.js')
+    });
+    await context.addInitScript(() => {
+        window.__clock = sinon.useFakeTimers({
+            now: 0,
+            shouldAdvanceTime: true
+        }); //Set browser clock to UNIX Epoch
+    });
+});
+
+test('Visual - Restricted Notebook is visually correct @addInit', async ({ page }) => {
+    // eslint-disable-next-line no-undef
+    await page.addInitScript({ path: path.join(__dirname, '../plugins/notebook', './addInitRestrictedNotebook.js') });
+    //Go to baseURL
+    await page.goto('/', { waitUntil: 'networkidle' });
+    //Click the Create button
+    await page.click('button:has-text("Create")');
+    // Click text=CUSTOM_NAME
+    await page.click(`text=${CUSTOM_NAME}`);
+    // Click text=OK
+    await Promise.all([
+        page.waitForNavigation({waitUntil: 'networkidle'}),
+        page.click('text=OK')
+    ]);
+
+    // Take a snapshot of the newly created CUSTOM_NAME notebook
+    await page.waitForTimeout(VISUAL_GRACE_PERIOD);
+    await percySnapshot(page, 'Restricted Notebook with CUSTOM_NAME');
+
+});

e2e/tests/visual/controlledClock.visual.spec.js

@@ -0,0 +1,70 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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.
+ *****************************************************************************/
+
+/*
+Collection of Visual Tests set to run in a default context. The tests within this suite
+are only meant to run against openmct's app.js started by `npm run start` within the
+`./e2e/playwright-visual.config.js` file.
+
+These should only use functional expect statements to verify assumptions about the state
+in a test and not for functional verification of correctness. Visual tests are not supposed
+to "fail" on assertions. Instead, they should be used to detect changes between builds or branches.
+
+Note: Larger testsuite sizes are OK due to the setup time associated with these tests.
+*/
+
+const { test, expect } = require('@playwright/test');
+const percySnapshot = require('@percy/playwright');
+const path = require('path');
+const sinon = require('sinon');
+
+// Snippet from https://github.com/microsoft/playwright/issues/6347#issuecomment-965887758
+// Will replace with cy.clock() equivalent
+test.beforeEach(async ({ context }) => {
+    await context.addInitScript({
+        // eslint-disable-next-line no-undef
+        path: path.join(__dirname, '../../..', './node_modules/sinon/pkg/sinon.js')
+    });
+    await context.addInitScript(() => {
+        window.__clock = sinon.useFakeTimers({
+            now: 0, //Set browser clock to UNIX Epoch
+            shouldAdvanceTime: false, //Don't advance the clock
+            toFake: ["setTimeout", "nextTick"]
+        });
+    });
+});
+test.use({ storageState: './e2e/test-data/VisualTestData_storage.json' });
+
+test('Visual - Overlay Plot Loading Indicator @localstorage', async ({ page }) => {
+    // Go to baseURL
+    await page.goto('/', { waitUntil: 'networkidle' });
+
+    await page.locator('a:has-text("Unnamed Overlay Plot Overlay Plot")').click();
+    //Ensure that we're on the Unnamed Overlay Plot object
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Overlay Plot');
+
+    //Wait for canvas to be rendered and stop animating
+    await page.locator('canvas >> nth=1').hover({trial: true});
+
+    //Take snapshot of Sine Wave Generator within Overlay Plot
+    await percySnapshot(page, 'SineWaveInOverlayPlot');
+});

e2e/tests/visual/default.visual.spec.js

@@ -32,7 +32,8 @@ to "fail" on assertions. Instead, they should be used to detect changes between
 Note: Larger testsuite sizes are OK due to the setup time associated with these tests.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../../fixtures.js');
+const { expect } = require('@playwright/test');
 const percySnapshot = require('@percy/playwright');
 const path = require('path');
 const sinon = require('sinon');
@@ -96,7 +97,11 @@ test('Visual - Default Condition Set', async ({ page }) => {
     await percySnapshot(page, 'Default Condition Set');
 });
 
-test('Visual - Default Condition Widget', async ({ page }) => {
+test.fixme('Visual - Default Condition Widget', async ({ page }) => {
+    test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/nasa/openmct/issues/5349'
+    });
     //Go to baseURL
     await page.goto('/', { waitUntil: 'networkidle' });
 
@@ -206,3 +211,22 @@ test('Visual - Display Layout Icon is correct', async ({ page }) => {
     await percySnapshot(page, 'Display Layout Create Menu');
 
 });
+
+test('Visual - Default Gauge is correct', async ({ page }) => {
+
+    //Go to baseURL
+    await page.goto('/', { waitUntil: 'networkidle' });
+
+    //Click the Create button
+    await page.click('button:has-text("Create")');
+
+    await page.click('text=Gauge');
+
+    await page.click('text=OK');
+
+    // Take a snapshot of the newly created Gauge object
+    await page.waitForTimeout(VISUAL_GRACE_PERIOD);
+    await percySnapshot(page, 'Default Gauge');
+
+});
+

e2e/tests/visual/generateVisualTestData.e2e.spec.js

@@ -0,0 +1,86 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to generating LocalStorage via Session Storage to be used
+in some visual test suites like controlledClock.visual.spec.js. This suite should run to completion
+and generate an artifact named ./e2e/test-data/VisualTestData_storage.json . This will run
+on every Commit to ensure that this object still loads into tests correctly and will retain the
+.e2e.spec.js suffix.
+
+TODO: Provide additional validation of object properties as it grows.
+
+*/
+
+const { test } = require('../../fixtures.js');
+const { expect } = require('@playwright/test');
+
+test('Generate Visual Test Data @localStorage', async ({ page, context }) => {
+    //Go to baseURL
+    await page.goto('/', { waitUntil: 'networkidle' });
+
+    await page.locator('button:has-text("Create")').click();
+
+    // add overlay plot with defaults
+    await page.locator('li:has-text("Overlay Plot")').click();
+
+    // Click on My Items in Tree. Workaround for https://github.com/nasa/openmct/issues/5184
+    await page.click('form[name="mctForm"] a:has-text("My Items")');
+
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('text=OK').click(),
+        //Wait for Save Banner to appear1
+        page.waitForSelector('.c-message-banner__message')
+    ]);
+
+    // save (exit edit mode)
+    await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1).click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    // click create button
+    await page.locator('button:has-text("Create")').click();
+
+    // add sine wave generator with defaults
+    await page.locator('li:has-text("Sine Wave Generator")').click();
+
+    //Add a 5000 ms Delay
+    await page.locator('[aria-label="Loading Delay \\(ms\\)"]').fill('5000');
+
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('text=OK').click(),
+        //Wait for Save Banner to appear1
+        page.waitForSelector('.c-message-banner__message')
+    ]);
+
+    // focus the overlay plot
+    await page.locator('text=Open MCT My Items >> span').nth(3).click();
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('text=Unnamed Overlay Plot').first().click()
+    ]);
+
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Overlay Plot');
+    //Save localStorage for future test execution
+    await context.storageState({ path: './e2e/test-data/VisualTestData_storage.json' });
+});

e2e/tests/visual/search.visual.spec.js

@@ -0,0 +1,104 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify search functionality.
+*/
+
+const { test, expect } = require('@playwright/test');
+const percySnapshot = require('@percy/playwright');
+
+/**
+  * Creates a notebook object and adds an entry.
+  * @param {import('@playwright/test').Page} page
+  */
+async function createClockAndDisplayLayout(page) {
+    //Go to baseURL
+    await page.goto('/', { waitUntil: 'networkidle' });
+
+    // Click button:has-text("Create")
+    await page.locator('button:has-text("Create")').click();
+    // Click li:has-text("Notebook")
+    await page.locator('li:has-text("Clock")').click();
+    // Click button:has-text("OK")
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('button:has-text("OK")').click()
+    ]);
+
+    // Click a:has-text("My Items")
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('a:has-text("My Items") >> nth=0').click()
+    ]);
+    // Click button:has-text("Create")
+    await page.locator('button:has-text("Create")').click();
+    // Click li:has-text("Notebook")
+    await page.locator('li:has-text("Display Layout")').click();
+    // Click button:has-text("OK")
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('button:has-text("OK")').click()
+    ]);
+}
+
+test.describe('Grand Search', () => {
+    test('Can search for objects, and subsequent search dropdown behaves properly', async ({ page }) => {
+        await createClockAndDisplayLayout(page);
+
+        // Click [aria-label="OpenMCT Search"] input[type="search"]
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+        // Fill [aria-label="OpenMCT Search"] input[type="search"]
+        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Cl');
+        await expect(page.locator('[aria-label="Search Result"]')).toContainText('Clock');
+        await percySnapshot(page, 'Searching for Clocks');
+        // Click text=Elements >> nth=0
+        await page.locator('text=Elements').first().click();
+        await expect(page.locator('[aria-label="Search Result"]')).not.toBeVisible();
+
+        // Click [aria-label="OpenMCT Search"] [aria-label="Search Input"]
+        await page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]').click();
+        // Click [aria-label="Unnamed Clock clock result"] >> text=Unnamed Clock
+        await page.locator('[aria-label="Unnamed Clock clock result"] >> text=Unnamed Clock').click();
+        await percySnapshot(page, 'Preview for clock should display when editing enabled and search item clicked');
+
+        // Click [aria-label="Close"]
+        await page.locator('[aria-label="Close"]').click();
+        await percySnapshot(page, 'Search should still be showing after preview closed');
+
+        // Click text=Snapshot Save and Finish Editing Save and Continue Editing >> button >> nth=1
+        await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1).click();
+        // Click text=Save and Finish Editing
+        await page.locator('text=Save and Finish Editing').click();
+        // Click [aria-label="OpenMCT Search"] [aria-label="Search Input"]
+        await page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]').click();
+        // Fill [aria-label="OpenMCT Search"] [aria-label="Search Input"]
+        await page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]').fill('Cl');
+        // Click text=Unnamed Clock
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=Unnamed Clock').click()
+        ]);
+        await percySnapshot(page, 'Clicking on search results should navigate to them if not editing');
+
+    });
+});

example/exampleUser/ExampleUserProvider.js

@@ -31,7 +31,7 @@ const STATUSES = [{
     iconClassPoll: "icon-status-poll-question-mark"
 }, {
     key: "GO",
-    label: "GO",
+    label: "Go",
     iconClass: "icon-check",
     iconClassPoll: "icon-status-poll-question-mark",
     statusClass: "s-status-ok",
@@ -39,7 +39,7 @@ const STATUSES = [{
     statusFgColor: "#000"
 }, {
     key: "MAYBE",
-    label: "MAYBE",
+    label: "Maybe",
     iconClass: "icon-alert-triangle",
     iconClassPoll: "icon-status-poll-question-mark",
     statusClass: "s-status-warning",
@@ -47,7 +47,7 @@ const STATUSES = [{
     statusFgColor: "#000"
 }, {
     key: "NO_GO",
-    label: "NO GO",
+    label: "No go",
     iconClass: "icon-circle-slash",
     iconClassPoll: "icon-status-poll-question-mark",
     statusClass: "s-status-error",

example/generator/GeneratorProvider.js

@@ -32,7 +32,8 @@ define([
         offset: 0,
         dataRateInHz: 1,
         randomness: 0,
-        phase: 0
+        phase: 0,
+        loadDelay: 0
     };
 
     function GeneratorProvider(openmct) {
@@ -53,8 +54,9 @@ define([
             'period',
             'offset',
             'dataRateInHz',
+            'randomness',
             'phase',
-            'randomness'
+            'loadDelay'
         ];
 
         request = request || {};

example/generator/generatorWorker.js

@@ -116,6 +116,7 @@
         var dataRateInHz = request.dataRateInHz;
         var phase = request.phase;
         var randomness = request.randomness;
+        var loadDelay = Math.max(request.loadDelay, 0);
 
         var step = 1000 / dataRateInHz;
         var nextStep = start - (start % step) + step;
@@ -133,6 +134,14 @@
             });
         }
 
+        if (loadDelay === 0) {
+            postOnRequest(message, request, data);
+        } else {
+            setTimeout(() => postOnRequest(message, request, data), loadDelay);
+        }
+    }
+
+    function postOnRequest(message, request, data) {
         self.postMessage({
             id: message.id,
             data: request.spectra ? {

example/generator/plugin.js

@@ -81,7 +81,7 @@ define([
                 {
                     name: "Amplitude",
                     control: "numberfield",
-                    cssClass: "l-input-sm l-numeric",
+                    cssClass: "l-numeric",
                     key: "amplitude",
                     required: true,
                     property: [
@@ -92,7 +92,7 @@ define([
                 {
                     name: "Offset",
                     control: "numberfield",
-                    cssClass: "l-input-sm l-numeric",
+                    cssClass: "l-numeric",
                     key: "offset",
                     required: true,
                     property: [
@@ -132,6 +132,17 @@ define([
                         "telemetry",
                         "randomness"
                     ]
+                },
+                {
+                    name: "Loading Delay (ms)",
+                    control: "numberfield",
+                    cssClass: "l-input-sm l-numeric",
+                    key: "loadDelay",
+                    required: true,
+                    property: [
+                        "telemetry",
+                        "loadDelay"
+                    ]
                 }
             ],
             initialize: function (object) {
@@ -141,7 +152,8 @@ define([
                     offset: 0,
                     dataRateInHz: 1,
                     phase: 0,
-                    randomness: 0
+                    randomness: 0,
+                    loadDelay: 0
                 };
             }
         });

example/imagery/plugin.js

@@ -168,7 +168,7 @@ function getImageUrlListFromConfig(configuration) {
 }
 
 function getImageLoadDelay(domainObject) {
-    const imageLoadDelay = domainObject.configuration.imageLoadDelayInMilliSeconds;
+    const imageLoadDelay = Math.trunc(Number(domainObject.configuration.imageLoadDelayInMilliSeconds));
     if (!imageLoadDelay) {
         openmctInstance.objects.mutate(domainObject, 'configuration.imageLoadDelayInMilliSeconds', DEFAULT_IMAGE_LOAD_DELAY_IN_MILISECONDS);
 
@@ -190,7 +190,9 @@ function getRealtimeProvider() {
         subscribe: (domainObject, callback) => {
             const delay = getImageLoadDelay(domainObject);
             const interval = setInterval(() => {
-                callback(pointForTimestamp(Date.now(), domainObject.name, getImageSamples(domainObject.configuration), delay));
+                const imageSamples = getImageSamples(domainObject.configuration);
+                const datum = pointForTimestamp(Date.now(), domainObject.name, imageSamples, delay);
+                callback(datum);
             }, delay);
 
             return () => {
@@ -229,8 +231,9 @@ function getLadProvider() {
         },
         request: (domainObject, options) => {
             const delay = getImageLoadDelay(domainObject);
+            const datum = pointForTimestamp(Date.now(), domainObject.name, getImageSamples(domainObject.configuration), delay);
 
-            return Promise.resolve([pointForTimestamp(Date.now(), domainObject.name, delay)]);
+            return Promise.resolve([datum]);
         }
     };
 }

karma.conf.js

@@ -74,13 +74,8 @@ module.exports = (config) => {
         },
         coverageIstanbulReporter: {
             fixWebpackSourcePaths: true,
-            dir: "dist/reports/coverage",
+            dir: "coverage/unit",
-            reports: ['lcovonly', 'text-summary'],
+            reports: ['lcovonly']
-            thresholds: {
-                global: {
-                    lines: 52
-                }
-            }
         },
         specReporter: {
             maxLogLines: 5,

package.json

@@ -1,13 +1,13 @@
 {
   "name": "openmct",
-  "version": "2.0.5-SNAPSHOT",
+  "version": "2.0.5",
   "description": "The Open MCT core platform",
   "devDependencies": {
     "@babel/eslint-parser": "7.18.2",
     "@braintree/sanitize-url": "6.0.0",
     "@percy/cli": "1.2.1",
     "@percy/playwright": "1.0.4",
-    "@playwright/test": "1.21.1",
+    "@playwright/test": "1.23.0",
     "@types/eventemitter3": "^1.0.0",
     "@types/jasmine": "^4.0.1",
     "@types/karma": "^6.3.2",
@@ -16,6 +16,7 @@
     "babel-loader": "8.2.3",
     "babel-plugin-istanbul": "6.1.1",
     "comma-separated-values": "3.6.4",
+    "codecov":"3.8.3",
     "copy-webpack-plugin": "11.0.0",
     "cross-env": "7.0.3",
     "css-loader": "4.0.0",
@@ -55,6 +56,7 @@
     "moment-timezone": "0.5.34",
     "node-bourbon": "4.2.3",
     "painterro": "1.2.56",
+    "nyc":"15.1.0",
     "plotly.js-basic-dist": "2.12.0",
     "plotly.js-gl2d-dist": "2.12.0",
     "printj": "1.3.1",
@@ -86,21 +88,26 @@
     "build:coverage": "webpack --config webpack.coverage.js",
     "build:watch": "webpack --config webpack.dev.js --watch",
     "info": "npx envinfo --system --browsers --npmPackages --binaries --languages --markdown",
-    "test": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run",
+    "test": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run",
-    "test:firefox": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run --browsers=FirefoxHeadless",
+    "test:firefox": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run --browsers=FirefoxHeadless",
     "test:debug": "cross-env NODE_ENV=debug karma start --no-single-run",
-    "test:e2e:ci": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome smoke branding default condition timeConductor clock exampleImagery persistence performance",
+    "test:e2e": "npx playwright test",
+    "test:e2e:ci": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome smoke branding default condition timeConductor clock exampleImagery persistence performance grandsearch notebook/tags",
     "test:e2e:local": "npx playwright test --config=e2e/playwright-local.config.js --project=chrome",
-    "test:e2e:updatesnapshots": "npx playwright test --config=e2e/playwright-local.config.js --project=chrome --grep @snapshot --update-snapshots",
+    "test:e2e:updatesnapshots": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @snapshot --update-snapshots",
     "test:e2e:visual": "percy exec --config ./e2e/.percy.yml -- npx playwright test --config=e2e/playwright-visual.config.js",
     "test:e2e:full": "npx playwright test --config=e2e/playwright-ci.config.js",
     "test:perf": "npx playwright test --config=e2e/playwright-performance.config.js",
-    "test:watch": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --no-single-run",
+    "test:watch": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --no-single-run",
     "jsdoc": "jsdoc -c jsdoc.json -R API.md -r -d dist/docs/api",
     "update-about-dialog-copyright": "perl -pi -e 's/20\\d\\d\\-202\\d/2014\\-2022/gm' ./src/ui/layout/AboutDialog.vue",
     "update-copyright-date": "npm run update-about-dialog-copyright && grep -lr --null --include=*.{js,scss,vue,ts,sh,html,md,frag} 'Copyright (c) 20' . | xargs -r0 perl -pi -e 's/Copyright\\s\\(c\\)\\s20\\d\\d\\-20\\d\\d/Copyright \\(c\\)\\ 2014\\-2022/gm'",
     "otherdoc": "node docs/gendocs.js --in docs/src --out dist/docs --suppress-toc 'docs/src/index.md|docs/src/process/index.md'",
     "docs": "npm run jsdoc ; npm run otherdoc",
+    "cov:e2e:report":"nyc report --reporter=lcovonly --report-dir=./coverage/e2e",
+    "cov:e2e:full:publish":"codecov --disable=gcov -f ./coverage/e2e/lcov.info -F e2e-full",
+    "cov:e2e:ci:publish":"codecov --disable=gcov -f ./coverage/e2e/lcov.info -F e2e-ci",
+    "cov:unit:publish":"codecov --disable=gcov -f ./coverage/unit/lcov.info -F unit",
     "prepare": "npm run build:prod"
   },
   "repository": {

src/MCT.js

@@ -96,161 +96,167 @@ define([
         };
 
         this.destroy = this.destroy.bind(this);
-        /**
+        [
-         * Tracks current selection state of the application.
+            /**
-         * @private
+            * Tracks current selection state of the application.
-         */
+            * @private
-        this.selection = new Selection(this);
+            */
+            ['selection', () => new Selection(this)],
 
-        /**
+            /**
-         * MCT's time conductor, which may be used to synchronize view contents
+             * MCT's time conductor, which may be used to synchronize view contents
-         * for telemetry- or time-based views.
+             * for telemetry- or time-based views.
-         * @type {module:openmct.TimeConductor}
+             * @type {module:openmct.TimeConductor}
-         * @memberof module:openmct.MCT#
+             * @memberof module:openmct.MCT#
-         * @name conductor
+             * @name conductor
-         */
+             */
-        this.time = new api.TimeAPI(this);
+            ['time', () => new api.TimeAPI(this)],
 
-        /**
+            /**
-         * An interface for interacting with the composition of domain objects.
+             * An interface for interacting with the composition of domain objects.
-         * The composition of a domain object is the list of other domain
+             * The composition of a domain object is the list of other domain
-         * objects it "contains" (for instance, that should be displayed
+             * objects it "contains" (for instance, that should be displayed
-         * beneath it in the tree.)
+             * beneath it in the tree.)
-         *
+             *
-         * `composition` may be called as a function, in which case it acts
+             * `composition` may be called as a function, in which case it acts
-         * as [`composition.get`]{@link module:openmct.CompositionAPI#get}.
+             * as [`composition.get`]{@link module:openmct.CompositionAPI#get}.
-         *
+             *
-         * @type {module:openmct.CompositionAPI}
+             * @type {module:openmct.CompositionAPI}
-         * @memberof module:openmct.MCT#
+             * @memberof module:openmct.MCT#
-         * @name composition
+             * @name composition
-         */
+             */
-        this.composition = new api.CompositionAPI(this);
+            ['composition', () => new api.CompositionAPI(this)],
 
-        /**
+            /**
-         * Registry for views of domain objects which should appear in the
+             * Registry for views of domain objects which should appear in the
-         * main viewing area.
+             * main viewing area.
-         *
+             *
-         * @type {module:openmct.ViewRegistry}
+             * @type {module:openmct.ViewRegistry}
-         * @memberof module:openmct.MCT#
+             * @memberof module:openmct.MCT#
-         * @name objectViews
+             * @name objectViews
-         */
+             */
-        this.objectViews = new ViewRegistry();
+            ['objectViews', () => new ViewRegistry()],
 
-        /**
+            /**
-         * Registry for views which should appear in the Inspector area.
+             * Registry for views which should appear in the Inspector area.
-         * These views will be chosen based on the selection state.
+             * These views will be chosen based on the selection state.
-         *
+             *
-         * @type {module:openmct.InspectorViewRegistry}
+             * @type {module:openmct.InspectorViewRegistry}
-         * @memberof module:openmct.MCT#
+             * @memberof module:openmct.MCT#
-         * @name inspectorViews
+             * @name inspectorViews
-         */
+             */
-        this.inspectorViews = new InspectorViewRegistry();
+            ['inspectorViews', () => new InspectorViewRegistry()],
 
-        /**
+            /**
-         * Registry for views which should appear in Edit Properties
+             * Registry for views which should appear in Edit Properties
-         * dialogs, and similar user interface elements used for
+             * dialogs, and similar user interface elements used for
-         * modifying domain objects external to its regular views.
+             * modifying domain objects external to its regular views.
-         *
+             *
-         * @type {module:openmct.ViewRegistry}
+             * @type {module:openmct.ViewRegistry}
-         * @memberof module:openmct.MCT#
+             * @memberof module:openmct.MCT#
-         * @name propertyEditors
+             * @name propertyEditors
-         */
+             */
-        this.propertyEditors = new ViewRegistry();
+            ['propertyEditors', () => new ViewRegistry()],
 
-        /**
+            /**
-         * Registry for views which should appear in the status indicator area.
+             * Registry for views which should appear in the toolbar area while
-         * @type {module:openmct.ViewRegistry}
+             * editing. These views will be chosen based on the selection state.
-         * @memberof module:openmct.MCT#
+             *
-         * @name indicators
+             * @type {module:openmct.ToolbarRegistry}
-         */
+             * @memberof module:openmct.MCT#
-        this.indicators = new ViewRegistry();
+             * @name toolbars
+             */
+            ['toolbars', () => new ToolbarRegistry()],
 
-        /**
+            /**
-         * Registry for views which should appear in the toolbar area while
+             * Registry for domain object types which may exist within this
-         * editing. These views will be chosen based on the selection state.
+             * instance of Open MCT.
-         *
+             *
-         * @type {module:openmct.ToolbarRegistry}
+             * @type {module:openmct.TypeRegistry}
-         * @memberof module:openmct.MCT#
+             * @memberof module:openmct.MCT#
-         * @name toolbars
+             * @name types
-         */
+             */
-        this.toolbars = new ToolbarRegistry();
+            ['types', () => new api.TypeRegistry()],
 
-        /**
+            /**
-         * Registry for domain object types which may exist within this
+             * An interface for interacting with domain objects and the domain
-         * instance of Open MCT.
+             * object hierarchy.
-         *
+             *
-         * @type {module:openmct.TypeRegistry}
+             * @type {module:openmct.ObjectAPI}
-         * @memberof module:openmct.MCT#
+             * @memberof module:openmct.MCT#
-         * @name types
+             * @name objects
-         */
+             */
-        this.types = new api.TypeRegistry();
+            ['objects', () => new api.ObjectAPI.default(this.types, this)],
 
-        /**
+            /**
-         * An interface for interacting with domain objects and the domain
+             * An interface for retrieving and interpreting telemetry data associated
-         * object hierarchy.
+             * with a domain object.
-         *
+             *
-         * @type {module:openmct.ObjectAPI}
+             * @type {module:openmct.TelemetryAPI}
-         * @memberof module:openmct.MCT#
+             * @memberof module:openmct.MCT#
-         * @name objects
+             * @name telemetry
-         */
+             */
-        this.objects = new api.ObjectAPI.default(this.types, this);
+            ['telemetry', () => new api.TelemetryAPI.default(this)],
 
-        /**
+            /**
-         * An interface for retrieving and interpreting telemetry data associated
+             * An interface for creating new indicators and changing them dynamically.
-         * with a domain object.
+             *
-         *
+             * @type {module:openmct.IndicatorAPI}
-         * @type {module:openmct.TelemetryAPI}
+             * @memberof module:openmct.MCT#
-         * @memberof module:openmct.MCT#
+             * @name indicators
-         * @name telemetry
+             */
-         */
+            ['indicators', () => new api.IndicatorAPI(this)],
-        this.telemetry = new api.TelemetryAPI(this);
 
-        /**
+            /**
-         * An interface for creating new indicators and changing them dynamically.
+             * MCT's user awareness management, to enable user and
-         *
+             * role specific functionality.
-         * @type {module:openmct.IndicatorAPI}
+             * @type {module:openmct.UserAPI}
-         * @memberof module:openmct.MCT#
+             * @memberof module:openmct.MCT#
-         * @name indicators
+             * @name user
-         */
+             */
-        this.indicators = new api.IndicatorAPI(this);
+            ['user', () => new api.UserAPI(this)],
 
-        /**
+            ['notifications', () => new api.NotificationAPI()],
-         * MCT's user awareness management, to enable user and
-         * role specific functionality.
-         * @type {module:openmct.UserAPI}
-         * @memberof module:openmct.MCT#
-         * @name user
-         */
-        this.user = new api.UserAPI(this);
 
-        this.notifications = new api.NotificationAPI();
+            ['editor', () => new api.EditorAPI.default(this)],
 
-        this.editor = new api.EditorAPI.default(this);
+            ['overlays', () => new OverlayAPI.default()],
 
-        this.overlays = new OverlayAPI.default();
+            ['menus', () => new api.MenuAPI(this)],
 
-        this.menus = new api.MenuAPI(this);
+            ['actions', () => new api.ActionsAPI(this)],
 
-        this.actions = new api.ActionsAPI(this);
+            ['status', () => new api.StatusAPI(this)],
 
-        this.status = new api.StatusAPI(this);
+            ['priority', () => api.PriorityAPI],
 
-        this.priority = api.PriorityAPI;
+            ['router', () => new ApplicationRouter(this)],
 
-        this.router = new ApplicationRouter(this);
+            ['faults', () => new api.FaultManagementAPI.default(this)],
-        this.faults = new api.FaultManagementAPI.default(this);
-        this.forms = new api.FormsAPI.default(this);
 
-        this.branding = BrandingAPI.default;
+            ['forms', () => new api.FormsAPI.default(this)],
 
-        /**
+            ['branding', () => BrandingAPI.default],
-         * MCT's annotation API that enables
+
-         * human-created comments and categorization linked to data products
+            /**
-         * @type {module:openmct.AnnotationAPI}
+             * MCT's annotation API that enables
-         * @memberof module:openmct.MCT#
+             * human-created comments and categorization linked to data products
-         * @name annotation
+             * @type {module:openmct.AnnotationAPI}
-         */
+             * @memberof module:openmct.MCT#
-        this.annotation = new api.AnnotationAPI(this);
+             * @name annotation
+             */
+            ['annotation', () => new api.AnnotationAPI(this)]
+        ].forEach(apiEntry => {
+            const apiName = apiEntry[0];
+            const apiObject = apiEntry[1]();
+
+            Object.defineProperty(this, apiName, {
+                value: apiObject,
+                enumerable: false,
+                configurable: false,
+                writable: true
+            });
+        });
 
         // Plugins that are installed by default
         this.install(this.plugins.Plot());
@@ -281,6 +287,7 @@ define([
         this.install(this.plugins.ObjectInterceptors());
         this.install(this.plugins.DeviceClassifier());
         this.install(this.plugins.UserIndicator());
+        this.install(this.plugins.Gauge());
     }
 
     MCT.prototype = Object.create(EventEmitter.prototype);

src/api/actions/ActionCollection.js

@@ -85,8 +85,6 @@ class ActionCollection extends EventEmitter {
     }
 
     destroy() {
-        super.removeAllListeners();
-
         if (!this.skipEnvironmentObservers) {
             this.objectUnsubscribes.forEach(unsubscribe => {
                 unsubscribe();
@@ -96,6 +94,7 @@ class ActionCollection extends EventEmitter {
         }
 
         this.emit('destroy', this.view);
+        this.removeAllListeners();
     }
 
     getVisibleActions() {

src/api/annotation/AnnotationAPI.js

@@ -172,17 +172,19 @@ export default class AnnotationAPI extends EventEmitter {
                 name: contentText,
                 domainObject: targetDomainObject,
                 annotationType,
-                tags: [],
+                tags: [tag],
                 contentText,
                 targets
             };
-            existingAnnotation = await this.create(annotationCreationArguments);
+            const newAnnotation = await this.create(annotationCreationArguments);
+
+            return newAnnotation;
+        } else {
+            const tagArray = [tag, ...existingAnnotation.tags];
+            this.openmct.objects.mutate(existingAnnotation, 'tags', tagArray);
+
+            return existingAnnotation;
         }
-
-        const tagArray = [tag, ...existingAnnotation.tags];
-        this.openmct.objects.mutate(existingAnnotation, 'tags', tagArray);
-
-        return existingAnnotation;
     }
 
     removeAnnotationTag(existingAnnotation, tagToRemove) {

src/api/forms/components/FormProperties.vue

@@ -60,6 +60,7 @@
             tabindex="0"
             :disabled="isInvalid"
             class="c-button c-button--major"
+            aria-label="Save"
             @click="onSave"
         >
             {{ submitLabel }}
@@ -67,6 +68,7 @@
         <button
             tabindex="0"
             class="c-button js-cancel-button"
+            aria-label="Cancel"
             @click="onDismiss"
         >
             {{ cancelLabel }}

src/api/forms/components/controls/AutoCompleteField.vue

@@ -44,6 +44,7 @@
     <div
         v-if="!hideOptions"
         class="c-menu c-input--autocomplete__options"
+        aria-label="Autocomplete Options"
         @blur="hideOptions = true"
     >
         <ul>

src/api/forms/components/controls/NumberField.vue

@@ -28,6 +28,7 @@
     >
         <input
             v-model="field"
+            :aria-label="model.name"
             type="number"
             :min="model.min"
             :max="model.max"

src/api/objects/InMemorySearchProvider.js

@@ -224,7 +224,8 @@ class InMemorySearchProvider {
 
     /**
      * Schedule an id to be indexed at a later date.  If there are less
-     * pending requests then allowed, will kick off an indexing request.
+     * pending requests than the maximum allowed, this will kick off an indexing request.
+     * This is done only when indexing first begins and we need to index a lot of objects.
      *
      * @private
      * @param {identifier} id to be indexed.
@@ -258,8 +259,12 @@ class InMemorySearchProvider {
     }
 
     onAnnotationCreation(annotationObject) {
-        const provider = this;
+
-        provider.index(annotationObject);
+        const objectProvider = this.openmct.objects.getProvider(annotationObject.identifier);
+        if (objectProvider === undefined || objectProvider.search === undefined) {
+            const provider = this;
+            provider.index(annotationObject);
+        }
     }
 
     onNameMutation(domainObject, name) {
@@ -270,7 +275,6 @@ class InMemorySearchProvider {
     }
 
     onTagMutation(domainObject, newTags) {
-        domainObject.oldTags = domainObject.tags;
         domainObject.tags = newTags;
         const provider = this;
 
@@ -404,20 +408,16 @@ class InMemorySearchProvider {
             }
 
         });
-        // remove old tags
+        const tagsToRemoveFromIndex = Object.keys(this.localIndexedAnnotationsByTag).filter(indexedTag => {
-        if (model.oldTags) {
+            return !(model.tags.includes(indexedTag));
-            model.oldTags.forEach(tagIDToRemove => {
+        });
-                const existsInNewModel = model.tags.includes(tagIDToRemove);
+        tagsToRemoveFromIndex.forEach(tagToRemoveFromIndex => {
-                if (!existsInNewModel && this.localIndexedAnnotationsByTag[tagIDToRemove]) {
+            this.localIndexedAnnotationsByTag[tagToRemoveFromIndex] = this.localIndexedAnnotationsByTag[tagToRemoveFromIndex].filter(indexedAnnotation => {
-                    this.localIndexedAnnotationsByTag[tagIDToRemove] = this.localIndexedAnnotationsByTag[tagIDToRemove].
+                const shouldKeep = indexedAnnotation.keyString !== keyString;
-                        filter(annotationToRemove => {
-                            const shouldKeep = annotationToRemove.keyString !== keyString;
 
-                            return shouldKeep;
+                return shouldKeep;
-                        });
-                }
             });
-        }
+        });
     }
 
     localIndexAnnotation(objectToIndex, model) {
@@ -449,7 +449,7 @@ class InMemorySearchProvider {
             keyString
         };
         if (model && (model.type === 'annotation')) {
-            if (model.targets && model.targets) {
+            if (model.targets) {
                 this.localIndexAnnotation(objectToIndex, model);
             }
 

src/api/objects/InMemorySearchWorker.js

@@ -94,19 +94,16 @@
 
         });
         // remove old tags
-        if (model.oldTags) {
+        const tagsToRemoveFromIndex = Object.keys(indexedAnnotationsByTag).filter(indexedTag => {
-            model.oldTags.forEach(tagIDToRemove => {
+            return !(model.tags.includes(indexedTag));
-                const existsInNewModel = model.tags.includes(tagIDToRemove);
+        });
-                if (!existsInNewModel && indexedAnnotationsByTag[tagIDToRemove]) {
+        tagsToRemoveFromIndex.forEach(tagToRemoveFromIndex => {
-                    indexedAnnotationsByTag[tagIDToRemove] = indexedAnnotationsByTag[tagIDToRemove].
+            indexedAnnotationsByTag[tagToRemoveFromIndex] = indexedAnnotationsByTag[tagToRemoveFromIndex].filter(indexedAnnotation => {
-                        filter(annotationToRemove => {
+                const shouldKeep = indexedAnnotation.keyString !== keyString;
-                            const shouldKeep = annotationToRemove.keyString !== keyString;
 
-                            return shouldKeep;
+                return shouldKeep;
-                        });
-                }
             });
-        }
+        });
     }
 
     function indexItem(keyString, model) {
@@ -116,7 +113,7 @@
             keyString
         };
         if (model && (model.type === 'annotation')) {
-            if (model.targets && model.targets) {
+            if (model.targets) {
                 indexAnnotation(objectToIndex, model);
             }
 

src/api/objects/ObjectAPI.js

@@ -230,10 +230,15 @@ export default class ObjectAPI {
             return result;
         }).catch((result) => {
             console.warn(`Failed to retrieve ${keystring}:`, result);
+            this.openmct.notifications.error(`Failed to retrieve object ${keystring}`);
 
             delete this.cache[keystring];
 
-            result = this.applyGetInterceptors(identifier);
+            if (!result) {
+                //no result means resource either doesn't exist or is missing
+                //otherwise it's an error, and we shouldn't apply interceptors
+                result = this.applyGetInterceptors(identifier);
+            }
 
             return result;
         });
@@ -383,7 +388,13 @@ export default class ObjectAPI {
             }
         }
 
-        return result;
+        return result.catch((error) => {
+            if (error instanceof this.errors.Conflict) {
+                this.openmct.notifications.error(`Conflict detected while saving ${this.makeKeyString(domainObject.identifier)}`);
+            }
+
+            throw error;
+        });
     }
 
     /**

src/api/telemetry/TelemetryAPI.js

@@ -20,122 +20,18 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { TelemetryCollection } = require("./TelemetryCollection");
+import TelemetryCollection from './TelemetryCollection';
+import TelemetryRequestInterceptorRegistry from './TelemetryRequestInterceptor';
+import CustomStringFormatter from '../../plugins/displayLayout/CustomStringFormatter';
+import TelemetryMetadataManager from './TelemetryMetadataManager';
+import TelemetryValueFormatter from './TelemetryValueFormatter';
+import DefaultMetadataProvider from './DefaultMetadataProvider';
+import objectUtils from 'objectUtils';
+import _ from 'lodash';
 
-define([
+export default class TelemetryAPI {
-    '../../plugins/displayLayout/CustomStringFormatter',
-    './TelemetryMetadataManager',
-    './TelemetryValueFormatter',
-    './DefaultMetadataProvider',
-    'objectUtils',
-    'lodash'
-], function (
-    CustomStringFormatter,
-    TelemetryMetadataManager,
-    TelemetryValueFormatter,
-    DefaultMetadataProvider,
-    objectUtils,
-    _
-) {
-    /**
-     * A LimitEvaluator may be used to detect when telemetry values
-     * have exceeded nominal conditions.
-     *
-     * @interface LimitEvaluator
-     * @memberof module:openmct.TelemetryAPI~
-     */
 
-    /**
+    constructor(openmct) {
-     * Check for any limit violations associated with a telemetry datum.
-     * @method evaluate
-     * @param {*} datum the telemetry datum to evaluate
-     * @param {TelemetryProperty} the property to check for limit violations
-     * @memberof module:openmct.TelemetryAPI~LimitEvaluator
-     * @returns {module:openmct.TelemetryAPI~LimitViolation} metadata about
-     *          the limit violation, or undefined if a value is within limits
-     */
-
-    /**
-     * A violation of limits defined for a telemetry property.
-     * @typedef LimitViolation
-     * @memberof {module:openmct.TelemetryAPI~}
-     * @property {string} cssClass the class (or space-separated classes) to
-     *           apply to display elements for values which violate this limit
-     * @property {string} name the human-readable name for the limit violation
-     */
-
-    /**
-     * A TelemetryFormatter converts telemetry values for purposes of
-     * display as text.
-     *
-     * @interface TelemetryFormatter
-     * @memberof module:openmct.TelemetryAPI~
-     */
-
-    /**
-     * Retrieve the 'key' from the datum and format it accordingly to
-     * telemetry metadata in domain object.
-     *
-     * @method format
-     * @memberof module:openmct.TelemetryAPI~TelemetryFormatter#
-     */
-
-    /**
-     * Describes a property which would be found in a datum of telemetry
-     * associated with a particular domain object.
-     *
-     * @typedef TelemetryProperty
-     * @memberof module:openmct.TelemetryAPI~
-     * @property {string} key the name of the property in the datum which
-     *           contains this telemetry value
-     * @property {string} name the human-readable name for this property
-     * @property {string} [units] the units associated with this property
-     * @property {boolean} [temporal] true if this property is a timestamp, or
-     *           may be otherwise used to order telemetry in a time-like
-     *           fashion; default is false
-     * @property {boolean} [numeric] true if the values for this property
-     *           can be interpreted plainly as numbers; default is true
-     * @property {boolean} [enumerated] true if this property may have only
-     *           certain specific values; default is false
-     * @property {string} [values] for enumerated states, an ordered list
-     *           of possible values
-     */
-
-    /**
-     * Describes and bounds requests for telemetry data.
-     *
-     * @typedef TelemetryRequest
-     * @memberof module:openmct.TelemetryAPI~
-     * @property {string} sort the key of the property to sort by. This may
-     *           be prefixed with a "+" or a "-" sign to sort in ascending
-     *           or descending order respectively. If no prefix is present,
-     *           ascending order will be used.
-     * @property {*} start the lower bound for values of the sorting property
-     * @property {*} end the upper bound for values of the sorting property
-     * @property {string[]} strategies symbolic identifiers for strategies
-     *           (such as `minmax`) which may be recognized by providers;
-     *           these will be tried in order until an appropriate provider
-     *           is found
-     */
-
-    /**
-     * Provides telemetry data. To connect to new data sources, new
-     * TelemetryProvider implementations should be
-     * [registered]{@link module:openmct.TelemetryAPI#addProvider}.
-     *
-     * @interface TelemetryProvider
-     * @memberof module:openmct.TelemetryAPI~
-     */
-
-    /**
-     * An interface for retrieving telemetry data associated with a domain
-     * object.
-     *
-     * @interface TelemetryAPI
-     * @augments module:openmct.TelemetryAPI~TelemetryProvider
-     * @memberof module:openmct
-     */
-    function TelemetryAPI(openmct) {
         this.openmct = openmct;
 
         this.formatMapCache = new WeakMap();
@@ -148,12 +44,14 @@ define([
         this.requestProviders = [];
         this.subscriptionProviders = [];
         this.valueFormatterCache = new WeakMap();
+
+        this.requestInterceptorRegistry = new TelemetryRequestInterceptorRegistry();
     }
 
-    TelemetryAPI.prototype.abortAllRequests = function () {
+    abortAllRequests() {
         this.requestAbortControllers.forEach((controller) => controller.abort());
         this.requestAbortControllers.clear();
-    };
+    }
 
     /**
      * Return Custom String Formatter
@@ -162,9 +60,9 @@ define([
      * @param {string} format custom formatter string (eg: %.4f, &lts etc.)
      * @returns {CustomStringFormatter}
      */
-    TelemetryAPI.prototype.customStringFormatter = function (valueMetadata, format) {
+    customStringFormatter(valueMetadata, format) {
-        return new CustomStringFormatter.default(this.openmct, valueMetadata, format);
+        return new CustomStringFormatter(this.openmct, valueMetadata, format);
-    };
+    }
 
     /**
      * Return true if the given domainObject is a telemetry object.  A telemetry
@@ -174,9 +72,9 @@ define([
      * @param {module:openmct.DomainObject} domainObject
      * @returns {boolean} true if the object is a telemetry object.
      */
-    TelemetryAPI.prototype.isTelemetryObject = function (domainObject) {
+    isTelemetryObject(domainObject) {
         return Boolean(this.findMetadataProvider(domainObject));
-    };
+    }
 
     /**
      * Check if this provider can supply telemetry data associated with
@@ -188,10 +86,10 @@ define([
      * @returns {boolean} true if telemetry can be provided
      * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
      */
-    TelemetryAPI.prototype.canProvideTelemetry = function (domainObject) {
+    canProvideTelemetry(domainObject) {
         return Boolean(this.findSubscriptionProvider(domainObject))
-               || Boolean(this.findRequestProvider(domainObject));
+                || Boolean(this.findRequestProvider(domainObject));
-    };
+    }
 
     /**
      * Register a telemetry provider with the telemetry service. This
@@ -201,7 +99,7 @@ define([
      * @param {module:openmct.TelemetryAPI~TelemetryProvider} provider the new
      *        telemetry provider
      */
-    TelemetryAPI.prototype.addProvider = function (provider) {
+    addProvider(provider) {
         if (provider.supportsRequest) {
             this.requestProviders.unshift(provider);
         }
@@ -217,54 +115,54 @@ define([
         if (provider.supportsLimits) {
             this.limitProviders.unshift(provider);
         }
-    };
+    }
 
     /**
      * @private
      */
-    TelemetryAPI.prototype.findSubscriptionProvider = function () {
+    findSubscriptionProvider() {
         const args = Array.prototype.slice.apply(arguments);
         function supportsDomainObject(provider) {
             return provider.supportsSubscribe.apply(provider, args);
         }
 
         return this.subscriptionProviders.filter(supportsDomainObject)[0];
-    };
+    }
 
     /**
      * @private
      */
-    TelemetryAPI.prototype.findRequestProvider = function (domainObject) {
+    findRequestProvider(domainObject) {
         const args = Array.prototype.slice.apply(arguments);
         function supportsDomainObject(provider) {
             return provider.supportsRequest.apply(provider, args);
         }
 
         return this.requestProviders.filter(supportsDomainObject)[0];
-    };
+    }
 
     /**
      * @private
      */
-    TelemetryAPI.prototype.findMetadataProvider = function (domainObject) {
+    findMetadataProvider(domainObject) {
         return this.metadataProviders.filter(function (p) {
             return p.supportsMetadata(domainObject);
         })[0];
-    };
+    }
 
     /**
      * @private
      */
-    TelemetryAPI.prototype.findLimitEvaluator = function (domainObject) {
+    findLimitEvaluator(domainObject) {
         return this.limitProviders.filter(function (p) {
             return p.supportsLimits(domainObject);
         })[0];
-    };
+    }
 
     /**
      * @private
      */
-    TelemetryAPI.prototype.standardizeRequestOptions = function (options) {
+    standardizeRequestOptions(options) {
         if (!Object.prototype.hasOwnProperty.call(options, 'start')) {
             options.start = this.openmct.time.bounds().start;
         }
@@ -276,7 +174,47 @@ define([
         if (!Object.prototype.hasOwnProperty.call(options, 'domain')) {
             options.domain = this.openmct.time.timeSystem().key;
         }
-    };
+    }
+
+    /**
+     * Register a request interceptor that transforms a request via module:openmct.TelemetryAPI.request
+     * The request will be modifyed when it is received and will be returned in it's modified state
+     * The request will be transformed only if the interceptor is applicable to that domain object as defined by the RequestInterceptorDef
+     *
+     * @param {module:openmct.RequestInterceptorDef} requestInterceptorDef the request interceptor definition to add
+     * @method addRequestInterceptor
+     * @memberof module:openmct.TelemetryRequestInterceptorRegistry#
+     */
+    addRequestInterceptor(requestInterceptorDef) {
+        this.requestInterceptorRegistry.addInterceptor(requestInterceptorDef);
+    }
+
+    /**
+     * Retrieve the request interceptors for a given domain object.
+     * @private
+     */
+    #getInterceptorsForRequest(identifier, request) {
+        return this.requestInterceptorRegistry.getInterceptors(identifier, request);
+    }
+
+    /**
+     * Invoke interceptors if applicable for a given domain object.
+     */
+    async applyRequestInterceptors(domainObject, request) {
+        const interceptors = this.#getInterceptorsForRequest(domainObject.identifier, request);
+
+        if (interceptors.length === 0) {
+            return request;
+        }
+
+        let modifiedRequest = { ...request };
+
+        for (let interceptor of interceptors) {
+            modifiedRequest = await interceptor.invoke(modifiedRequest);
+        }
+
+        return modifiedRequest;
+    }
 
     /**
      * Request telemetry collection for a domain object.
@@ -292,13 +230,13 @@ define([
      *        options for this telemetry collection request
      * @returns {TelemetryCollection} a TelemetryCollection instance
      */
-    TelemetryAPI.prototype.requestCollection = function (domainObject, options = {}) {
+    requestCollection(domainObject, options = {}) {
         return new TelemetryCollection(
             this.openmct,
             domainObject,
             options
         );
-    };
+    }
 
     /**
      * Request historical telemetry for a domain object.
@@ -315,7 +253,7 @@ define([
      * @returns {Promise.<object[]>} a promise for an array of
      *          telemetry data
      */
-    TelemetryAPI.prototype.request = function (domainObject) {
+    async request(domainObject) {
         if (this.noRequestProviderForAllObjects) {
             return Promise.resolve([]);
         }
@@ -330,6 +268,7 @@ define([
         this.requestAbortControllers.add(abortController);
 
         this.standardizeRequestOptions(arguments[1]);
+
         const provider = this.findRequestProvider.apply(this, arguments);
         if (!provider) {
             this.requestAbortControllers.delete(abortController);
@@ -337,6 +276,8 @@ define([
             return this.handleMissingRequestProvider(domainObject);
         }
 
+        arguments[1] = await this.applyRequestInterceptors(domainObject, arguments[1]);
+
         return provider.request.apply(provider, arguments)
             .catch((rejected) => {
                 if (rejected.name !== 'AbortError') {
@@ -348,7 +289,7 @@ define([
             }).finally(() => {
                 this.requestAbortControllers.delete(abortController);
             });
-    };
+    }
 
     /**
      * Subscribe to realtime telemetry for a specific domain object.
@@ -364,7 +305,7 @@ define([
      * @returns {Function} a function which may be called to terminate
      *          the subscription
      */
-    TelemetryAPI.prototype.subscribe = function (domainObject, callback, options) {
+    subscribe(domainObject, callback, options) {
         const provider = this.findSubscriptionProvider(domainObject);
 
         if (!this.subscribeCache) {
@@ -401,7 +342,7 @@ define([
                 delete this.subscribeCache[keyString];
             }
         }.bind(this);
-    };
+    }
 
     /**
      * Get telemetry metadata for a given domain object.  Returns a telemetry
@@ -410,7 +351,7 @@ define([
      *
      * @returns {TelemetryMetadataManager}
      */
-    TelemetryAPI.prototype.getMetadata = function (domainObject) {
+    getMetadata(domainObject) {
         if (!this.metadataCache.has(domainObject)) {
             const metadataProvider = this.findMetadataProvider(domainObject);
             if (!metadataProvider) {
@@ -426,14 +367,14 @@ define([
         }
 
         return this.metadataCache.get(domainObject);
-    };
+    }
 
     /**
      * Return an array of valueMetadatas that are common to all supplied
      * telemetry objects and match the requested hints.
      *
      */
-    TelemetryAPI.prototype.commonValuesForHints = function (metadatas, hints) {
+    commonValuesForHints(metadatas, hints) {
         const options = metadatas.map(function (metadata) {
             const values = metadata.valuesForHints(hints);
 
@@ -453,14 +394,14 @@ define([
         });
 
         return _.sortBy(options, sortKeys);
-    };
+    }
 
     /**
      * Get a value formatter for a given valueMetadata.
      *
      * @returns {TelemetryValueFormatter}
      */
-    TelemetryAPI.prototype.getValueFormatter = function (valueMetadata) {
+    getValueFormatter(valueMetadata) {
         if (!this.valueFormatterCache.has(valueMetadata)) {
             this.valueFormatterCache.set(
                 valueMetadata,
@@ -469,7 +410,7 @@ define([
         }
 
         return this.valueFormatterCache.get(valueMetadata);
-    };
+    }
 
     /**
      * Get a value formatter for a given key.
@@ -477,9 +418,9 @@ define([
      *
      * @returns {Format}
      */
-    TelemetryAPI.prototype.getFormatter = function (key) {
+    getFormatter(key) {
         return this.formatters.get(key);
-    };
+    }
 
     /**
      * Get a format map of all value formatters for a given piece of telemetry
@@ -487,7 +428,7 @@ define([
      *
      * @returns {Object<String, {TelemetryValueFormatter}>}
      */
-    TelemetryAPI.prototype.getFormatMap = function (metadata) {
+    getFormatMap(metadata) {
         if (!metadata) {
             return {};
         }
@@ -502,14 +443,14 @@ define([
         }
 
         return this.formatMapCache.get(metadata);
-    };
+    }
 
     /**
      * Error Handling: Missing Request provider
      *
      * @returns Promise
      */
-    TelemetryAPI.prototype.handleMissingRequestProvider = function (domainObject) {
+    handleMissingRequestProvider(domainObject) {
         this.noRequestProviderForAllObjects = this.requestProviders.every(requestProvider => {
             const supportsRequest = requestProvider.supportsRequest.apply(requestProvider, arguments);
             const hasRequestProvider = Object.prototype.hasOwnProperty.call(requestProvider, 'request') && typeof requestProvider.request === 'function';
@@ -529,18 +470,18 @@ define([
         }
 
         this.openmct.notifications.error(message);
-        console.error(detailMessage);
+        console.warn(detailMessage);
 
         return Promise.resolve([]);
-    };
+    }
 
     /**
      * Register a new telemetry data formatter.
      * @param {Format} format the
      */
-    TelemetryAPI.prototype.addFormat = function (format) {
+    addFormat(format) {
         this.formatters.set(format.key, format);
-    };
+    }
 
     /**
      * Get a limit evaluator for this domain object.
@@ -558,9 +499,9 @@ define([
      * @method limitEvaluator
      * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
      */
-    TelemetryAPI.prototype.limitEvaluator = function (domainObject) {
+    limitEvaluator(domainObject) {
         return this.getLimitEvaluator(domainObject);
-    };
+    }
 
     /**
      * Get a limits for this domain object.
@@ -578,9 +519,9 @@ define([
      * @method limits
      * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
      */
-    TelemetryAPI.prototype.limitDefinition = function (domainObject) {
+    limitDefinition(domainObject) {
         return this.getLimits(domainObject);
-    };
+    }
 
     /**
      * Get a limit evaluator for this domain object.
@@ -598,7 +539,7 @@ define([
      * @method limitEvaluator
      * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
      */
-    TelemetryAPI.prototype.getLimitEvaluator = function (domainObject) {
+    getLimitEvaluator(domainObject) {
         const provider = this.findLimitEvaluator(domainObject);
         if (!provider) {
             return {
@@ -607,7 +548,7 @@ define([
         }
 
         return provider.getLimitEvaluator(domainObject);
-    };
+    }
 
     /**
      * Get a limit definitions for this domain object.
@@ -636,7 +577,7 @@ define([
      *  supported colors are purple, red, orange, yellow and cyan
      * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
      */
-    TelemetryAPI.prototype.getLimits = function (domainObject) {
+    getLimits(domainObject) {
         const provider = this.findLimitEvaluator(domainObject);
         if (!provider || !provider.getLimits) {
             return {
@@ -647,7 +588,104 @@ define([
         }
 
         return provider.getLimits(domainObject);
-    };
+    }
+}
 
-    return TelemetryAPI;
+/**
-});
+ * A LimitEvaluator may be used to detect when telemetry values
+ * have exceeded nominal conditions.
+ *
+ * @interface LimitEvaluator
+ * @memberof module:openmct.TelemetryAPI~
+ */
+
+/**
+ * Check for any limit violations associated with a telemetry datum.
+ * @method evaluate
+ * @param {*} datum the telemetry datum to evaluate
+ * @param {TelemetryProperty} the property to check for limit violations
+ * @memberof module:openmct.TelemetryAPI~LimitEvaluator
+ * @returns {module:openmct.TelemetryAPI~LimitViolation} metadata about
+ *          the limit violation, or undefined if a value is within limits
+ */
+
+/**
+ * A violation of limits defined for a telemetry property.
+ * @typedef LimitViolation
+ * @memberof {module:openmct.TelemetryAPI~}
+ * @property {string} cssClass the class (or space-separated classes) to
+ *           apply to display elements for values which violate this limit
+ * @property {string} name the human-readable name for the limit violation
+ */
+
+/**
+ * A TelemetryFormatter converts telemetry values for purposes of
+ * display as text.
+ *
+ * @interface TelemetryFormatter
+ * @memberof module:openmct.TelemetryAPI~
+ */
+
+/**
+ * Retrieve the 'key' from the datum and format it accordingly to
+ * telemetry metadata in domain object.
+ *
+ * @method format
+ * @memberof module:openmct.TelemetryAPI~TelemetryFormatter#
+ */
+
+/**
+ * Describes a property which would be found in a datum of telemetry
+ * associated with a particular domain object.
+ *
+ * @typedef TelemetryProperty
+ * @memberof module:openmct.TelemetryAPI~
+ * @property {string} key the name of the property in the datum which
+ *           contains this telemetry value
+ * @property {string} name the human-readable name for this property
+ * @property {string} [units] the units associated with this property
+ * @property {boolean} [temporal] true if this property is a timestamp, or
+ *           may be otherwise used to order telemetry in a time-like
+ *           fashion; default is false
+ * @property {boolean} [numeric] true if the values for this property
+ *           can be interpreted plainly as numbers; default is true
+ * @property {boolean} [enumerated] true if this property may have only
+ *           certain specific values; default is false
+ * @property {string} [values] for enumerated states, an ordered list
+ *           of possible values
+ */
+
+/**
+ * Describes and bounds requests for telemetry data.
+ *
+ * @typedef TelemetryRequest
+ * @memberof module:openmct.TelemetryAPI~
+ * @property {string} sort the key of the property to sort by. This may
+ *           be prefixed with a "+" or a "-" sign to sort in ascending
+ *           or descending order respectively. If no prefix is present,
+ *           ascending order will be used.
+ * @property {*} start the lower bound for values of the sorting property
+ * @property {*} end the upper bound for values of the sorting property
+ * @property {string[]} strategies symbolic identifiers for strategies
+ *           (such as `minmax`) which may be recognized by providers;
+ *           these will be tried in order until an appropriate provider
+ *           is found
+ */
+
+/**
+ * Provides telemetry data. To connect to new data sources, new
+ * TelemetryProvider implementations should be
+ * [registered]{@link module:openmct.TelemetryAPI#addProvider}.
+ *
+ * @interface TelemetryProvider
+ * @memberof module:openmct.TelemetryAPI~
+ */
+
+/**
+ * An interface for retrieving telemetry data associated with a domain
+ * object.
+ *
+ * @interface TelemetryAPI
+ * @augments module:openmct.TelemetryAPI~TelemetryProvider
+ * @memberof module:openmct
+ */

src/api/telemetry/TelemetryAPISpec.js

@@ -21,7 +21,7 @@
  *****************************************************************************/
 import { createOpenMct, resetApplicationState } from 'utils/testing';
 import TelemetryAPI from './TelemetryAPI';
-const { TelemetryCollection } = require("./TelemetryCollection");
+import TelemetryCollection from './TelemetryCollection';
 
 describe('Telemetry API', function () {
     let openmct;

src/api/telemetry/TelemetryCollection.js

@@ -26,7 +26,7 @@ import { LOADED_ERROR, TIMESYSTEM_KEY_NOTIFICATION, TIMESYSTEM_KEY_WARNING } fro
 
 /** Class representing a Telemetry Collection. */
 
-export class TelemetryCollection extends EventEmitter {
+export default class TelemetryCollection extends EventEmitter {
     /**
      * Creates a Telemetry Collection
      *
@@ -49,6 +49,7 @@ export class TelemetryCollection extends EventEmitter {
         this.pageState = undefined;
         this.lastBounds = undefined;
         this.requestAbort = undefined;
+        this.isStrategyLatest = this.options.strategy === 'latest';
     }
 
     /**
@@ -126,7 +127,8 @@ export class TelemetryCollection extends EventEmitter {
             this.requestAbort = new AbortController();
             options.signal = this.requestAbort.signal;
             this.emit('requestStarted');
-            historicalData = await historicalProvider.request(this.domainObject, options);
+            const modifiedOptions = await this.openmct.telemetry.applyRequestInterceptors(this.domainObject, options);
+            historicalData = await historicalProvider.request(this.domainObject, modifiedOptions);
         } catch (error) {
             if (error.name !== 'AbortError') {
                 console.error('Error requesting telemetry data...');
@@ -168,17 +170,18 @@ export class TelemetryCollection extends EventEmitter {
      * @private
      */
     _processNewTelemetry(telemetryData) {
-        performance.mark('tlm:process:start');
         if (telemetryData === undefined) {
             return;
         }
 
+        let latestBoundedDatum = this.boundedTelemetry[this.boundedTelemetry.length - 1];
         let data = Array.isArray(telemetryData) ? telemetryData : [telemetryData];
         let parsedValue;
         let beforeStartOfBounds;
         let afterEndOfBounds;
         let added = [];
 
+        // loop through, sort and dedupe
         for (let datum of data) {
             parsedValue = this.parseTime(datum);
             beforeStartOfBounds = parsedValue < this.lastBounds.start;
@@ -218,7 +221,17 @@ export class TelemetryCollection extends EventEmitter {
         }
 
         if (added.length) {
-            this.emit('add', added);
+            // if latest strategy is requested, we need to check if the value is the latest unmitted value
+            if (this.isStrategyLatest) {
+                this.boundedTelemetry = [this.boundedTelemetry[this.boundedTelemetry.length - 1]];
+
+                // if true, then this value has yet to be emitted
+                if (this.boundedTelemetry[0] !== latestBoundedDatum) {
+                    this.emit('add', this.boundedTelemetry);
+                }
+            } else {
+                this.emit('add', added);
+            }
         }
     }
 
@@ -278,13 +291,20 @@ export class TelemetryCollection extends EventEmitter {
 
             if (startChanged) {
                 testDatum[this.timeKey] = bounds.start;
-                // Calculate the new index of the first item within the bounds
+
-                startIndex = _.sortedIndexBy(
+                // a little more complicated if not latest strategy
-                    this.boundedTelemetry,
+                if (!this.isStrategyLatest) {
-                    testDatum,
+                    // Calculate the new index of the first item within the bounds
-                    datum => this.parseTime(datum)
+                    startIndex = _.sortedIndexBy(
-                );
+                        this.boundedTelemetry,
-                discarded = this.boundedTelemetry.splice(0, startIndex);
+                        testDatum,
+                        datum => this.parseTime(datum)
+                    );
+                    discarded = this.boundedTelemetry.splice(0, startIndex);
+                } else if (this.parseTime(testDatum) > this.parseTime(this.boundedTelemetry[0])) {
+                    discarded = this.boundedTelemetry;
+                    this.boundedTelemetry = [];
+                }
             }
 
             if (endChanged) {
@@ -296,7 +316,6 @@ export class TelemetryCollection extends EventEmitter {
                     datum => this.parseTime(datum)
                 );
                 added = this.futureBuffer.splice(0, endIndex);
-                this.boundedTelemetry = [...this.boundedTelemetry, ...added];
             }
 
             if (discarded.length > 0) {
@@ -304,6 +323,13 @@ export class TelemetryCollection extends EventEmitter {
             }
 
             if (added.length > 0) {
+                if (!this.isStrategyLatest) {
+                    this.boundedTelemetry = [...this.boundedTelemetry, ...added];
+                } else {
+                    added = [added[added.length - 1]];
+                    this.boundedTelemetry = added;
+                }
+
                 this.emit('add', added);
             }
         } else {
@@ -322,7 +348,14 @@ export class TelemetryCollection extends EventEmitter {
      * @private
      */
     _setTimeSystem(timeSystem) {
-        let domains = this.metadata.valuesForHints(['domain']);
+        let domains = [];
+        let metadataValue = { format: timeSystem.key };
+
+        if (this.metadata) {
+            domains = this.metadata.valuesForHints(['domain']);
+            metadataValue = this.metadata.value(timeSystem.key) || { format: timeSystem.key };
+        }
+
         let domain = domains.find((d) => d.key === timeSystem.key);
 
         if (domain !== undefined) {
@@ -335,7 +368,6 @@ export class TelemetryCollection extends EventEmitter {
             this.openmct.notifications.alert(TIMESYSTEM_KEY_NOTIFICATION);
         }
 
-        let metadataValue = this.metadata.value(timeSystem.key) || { format: timeSystem.key };
         let valueFormatter = this.openmct.telemetry.getValueFormatter(metadataValue);
 
         this.parseTime = (datum) => {
@@ -356,7 +388,6 @@ export class TelemetryCollection extends EventEmitter {
      * @todo handle subscriptions more granually
      */
     _reset() {
-        performance.mark('tlm:reset');
         this.boundedTelemetry = [];
         this.futureBuffer = [];
 

src/api/telemetry/TelemetryRequestInterceptor.js

@@ -0,0 +1,68 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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.
+ *****************************************************************************/
+
+export default class TelemetryRequestInterceptorRegistry {
+    /**
+     * A TelemetryRequestInterceptorRegistry maintains the definitions for different interceptors that may be invoked on telemetry
+     * requests.
+     * @interface TelemetryRequestInterceptorRegistry
+     * @memberof module:openmct
+     */
+    constructor() {
+        this.interceptors = [];
+    }
+
+    /**
+     * @interface TelemetryRequestInterceptorDef
+     * @property {function} appliesTo function that determines if this interceptor should be called for the given identifier/request
+     * @property {function} invoke function that transforms the provided request and returns the transformed request
+     * @property {function} priority the priority for this interceptor. A higher number returned has more weight than a lower number
+     * @memberof module:openmct TelemetryRequestInterceptorRegistry#
+     */
+
+    /**
+     * Register a new telemetry request interceptor.
+     *
+     * @param {module:openmct.RequestInterceptorDef} requestInterceptorDef the interceptor to add
+     * @method addInterceptor
+     * @memberof module:openmct.TelemetryRequestInterceptorRegistry#
+     */
+    addInterceptor(interceptorDef) {
+        //TODO: sort by priority
+        this.interceptors.push(interceptorDef);
+    }
+
+    /**
+     * Retrieve all interceptors applicable to a domain object/request.
+     * @method getInterceptors
+     * @returns [module:openmct.RequestInterceptorDef] the registered interceptors for this identifier/request
+     * @memberof module:openmct.TelemetryRequestInterceptorRegistry#
+     */
+    getInterceptors(identifier, request) {
+        return this.interceptors.filter(interceptor => {
+            return typeof interceptor.appliesTo === 'function'
+                && interceptor.appliesTo(identifier, request);
+        });
+    }
+
+}
+

src/api/user/StatusAPI.js

@@ -168,7 +168,7 @@ export default class StatusAPI extends EventEmitter {
      */
     async resetStatusForRole(role) {
         const provider = this.#userAPI.getProvider();
-        const defaultStatus = await this.getDefaultStatus();
+        const defaultStatus = await this.getDefaultStatusForRole(role);
 
         if (provider.setStatusForRole) {
             return provider.setStatusForRole(role, defaultStatus);

src/plugins/LADTable/components/LADRow.vue

@@ -197,7 +197,7 @@ export default {
             }
         },
         setUnit() {
-            this.unit = this.valueMetadata.unit || '';
+            this.unit = this.valueMetadata ? this.valueMetadata.unit : '';
         },
         firstNonDomainAttribute(metadata) {
             return metadata

src/plugins/LADTable/components/LadTableSet.vue

@@ -83,9 +83,12 @@ export default {
             for (let ladTable of ladTables) {
                 for (let telemetryObject of ladTable) {
                     let metadata = this.openmct.telemetry.getMetadata(telemetryObject.domainObject);
-                    for (let metadatum of metadata.valueMetadatas) {
+
-                        if (metadatum.unit) {
+                    if (metadata) {
-                            return true;
+                        for (let metadatum of metadata.valueMetadatas) {
+                            if (metadatum.unit) {
+                                return true;
+                            }
                         }
                     }
                 }

src/plugins/charts/bar/BarGraphView.vue

@@ -178,6 +178,26 @@ export default {
             this.requestDataFor(telemetryObject);
             this.subscribeToObject(telemetryObject);
         },
+        setTrace(key, name, axisMetadata, xValues, yValues) {
+            let trace = {
+                key,
+                name: name,
+                x: xValues,
+                y: yValues,
+                xAxisMetadata: {},
+                yAxisMetadata: axisMetadata.yAxisMetadata,
+                type: this.domainObject.configuration.useBar ? 'bar' : 'scatter',
+                mode: 'lines',
+                line: {
+                    shape: this.domainObject.configuration.useInterpolation
+                },
+                marker: {
+                    color: this.domainObject.configuration.barStyles.series[key].color
+                },
+                hoverinfo: this.domainObject.configuration.useBar ? 'skip' : 'x+y'
+            };
+            this.addTrace(trace, key);
+        },
         addTrace(trace, key) {
             if (!this.trace.length) {
                 this.trace = this.trace.concat([trace]);
@@ -236,7 +256,15 @@ export default {
         refreshData(bounds, isTick) {
             if (!isTick) {
                 const telemetryObjects = Object.values(this.telemetryObjects);
-                telemetryObjects.forEach(this.requestDataFor);
+                telemetryObjects.forEach((telemetryObject) => {
+                    //clear existing data
+                    const key = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+                    const axisMetadata = this.getAxisMetadata(telemetryObject);
+                    this.setTrace(key, telemetryObject.name, axisMetadata, [], []);
+                    //request new data
+                    this.requestDataFor(telemetryObject);
+                    this.subscribeToObject(telemetryObject);
+                });
             }
         },
         removeAllSubscriptions() {
@@ -320,25 +348,7 @@ export default {
                 });
             }
 
-            let trace = {
+            this.setTrace(key, telemetryObject.name, axisMetadata, xValues, yValues);
-                key,
-                name: telemetryObject.name,
-                x: xValues,
-                y: yValues,
-                xAxisMetadata: xAxisMetadata,
-                yAxisMetadata: axisMetadata.yAxisMetadata,
-                type: this.domainObject.configuration.useBar ? 'bar' : 'scatter',
-                mode: 'lines',
-                line: {
-                    shape: this.domainObject.configuration.useInterpolation
-                },
-                marker: {
-                    color: this.domainObject.configuration.barStyles.series[key].color
-                },
-                hoverinfo: this.domainObject.configuration.useBar ? 'skip' : 'x+y'
-            };
-
-            this.addTrace(trace, key);
         },
         isDataInTimeRange(datum, key, telemetryObject) {
             const timeSystemKey = this.timeContext.timeSystem().key;

src/plugins/charts/bar/BarGraphViewProvider.js

@@ -66,12 +66,15 @@ export default function BarGraphViewProvider(openmct) {
                                 }
                             };
                         },
-                        template: '<bar-graph-view :options="options"></bar-graph-view>'
+                        template: '<bar-graph-view ref="graphComponent" :options="options"></bar-graph-view>'
                     });
                 },
                 destroy: function () {
                     component.$destroy();
                     component = undefined;
+                },
+                onClearData() {
+                    component.$refs.graphComponent.refreshData();
                 }
             };
         }

src/plugins/charts/bar/inspector/BarGraphOptions.vue

@@ -281,11 +281,11 @@ export default {
                 this.xKeyOptions.push(
                     metadataValues.reduce((previousValue, currentValue) => {
                         return {
-                            name: `${previousValue.name}, ${currentValue.name}`,
+                            name: previousValue?.name ? `${previousValue.name}, ${currentValue.name}` : `${currentValue.name}`,
                             value: currentValue.key,
                             isArrayValue: currentValue.isArrayValue
                         };
-                    })
+                    }, {name: ''})
                 );
             }
 
@@ -316,11 +316,16 @@ export default {
                     }
                 } else {
                     if (this.yKey === undefined) {
-                        yKeyOptionIndex = this.yKeyOptions.findIndex((option, index) => index !== xKeyOptionIndex);
+                        if (metadataValues.length && metadataArrayValues.length === 0) {
-                        if (yKeyOptionIndex > -1) {
                             update = true;
-                            this.yKey = this.yKeyOptions[yKeyOptionIndex].value;
+                            this.yKey = 'none';
-                            this.yKeyLabel = this.yKeyOptions[yKeyOptionIndex].name;
+                        } else {
+                            yKeyOptionIndex = this.yKeyOptions.findIndex((option, index) => index !== xKeyOptionIndex);
+                            if (yKeyOptionIndex > -1) {
+                                update = true;
+                                this.yKey = this.yKeyOptions[yKeyOptionIndex].value;
+                                this.yKeyLabel = this.yKeyOptions[yKeyOptionIndex].name;
+                            }
                         }
                     }
                 }
@@ -336,6 +341,8 @@ export default {
 
                     return option;
                 });
+            } else if (this.xKey !== undefined && this.domainObject.configuration.axes.yKey === undefined) {
+                this.domainObject.configuration.axes.yKey = 'none';
             }
 
             this.xKeyOptions = this.xKeyOptions.map((option, index) => {

src/plugins/charts/bar/plugin.js

@@ -28,9 +28,9 @@ export default function () {
     return function install(openmct) {
         openmct.types.addType(BAR_GRAPH_KEY, {
             key: BAR_GRAPH_KEY,
-            name: "Graph (Bar or Line)",
+            name: "Graph",
             cssClass: "icon-bar-chart",
-            description: "View data as a bar graph. Can be added to Display Layouts.",
+            description: "Visualize data as a bar or line graph.",
             creatable: true,
             initialize: function (domainObject) {
                 domainObject.composition = [];

src/plugins/charts/bar/pluginSpec.js

@@ -367,19 +367,26 @@ describe("the plugin", function () {
                 type: "test-object",
                 name: "Test Object",
                 telemetry: {
-                    values: [{
+                    values: [
-                        key: "some-key",
+                        {
-                        name: "Some attribute",
+                            key: "some-key",
-                        hints: {
+                            source: "some-key",
-                            domain: 1
+                            name: "Some attribute",
-                        }
+                            format: "enum",
-                    }, {
+                            enumerations: [
-                        key: "some-other-key",
+                                {
-                        name: "Another attribute",
+                                    value: 0,
-                        hints: {
+                                    string: "OFF"
-                            range: 1
+                                },
-                        }
+                                {
-                    }]
+                                    value: 1,
+                                    string: "ON"
+                                }
+                            ],
+                            hints: {
+                                range: 1
+                            }
+                        }]
                 }
             };
             const composition = openmct.composition.get(parent);

src/plugins/condition/ConditionManager.js

@@ -300,8 +300,11 @@ export default class ConditionManager extends EventEmitter {
         return this.compositionLoad.then(() => {
             let latestTimestamp;
             let conditionResults = {};
+            let nextLegOptions = {...options};
+            delete nextLegOptions.onPartialResponse;
+
             const conditionRequests = this.conditions
-                .map(condition => condition.requestLADConditionResult(options));
+                .map(condition => condition.requestLADConditionResult(nextLegOptions));
 
             return Promise.all(conditionRequests)
                 .then((results) => {

src/plugins/conditionWidget/components/ConditionWidget.vue

@@ -136,8 +136,8 @@ export default {
                 this.url = url;
             }
 
-            const conditionSetIdentifier = domainObject.configuration.objectStyles.conditionSetIdentifier;
+            const conditionSetIdentifier = domainObject.configuration?.objectStyles?.conditionSetIdentifier;
-            if (this.conditionSetIdentifier !== conditionSetIdentifier) {
+            if (conditionSetIdentifier && this.conditionSetIdentifier !== conditionSetIdentifier) {
                 this.conditionSetIdentifier = conditionSetIdentifier;
             }
 

src/plugins/displayLayout/components/TelemetryView.vue

@@ -152,7 +152,7 @@ export default {
         },
         unit() {
             let value = this.item.value;
-            let unit = this.metadata.value(value).unit;
+            let unit = this.metadata ? this.metadata.value(value).unit : '';
 
             return unit;
         },
@@ -280,7 +280,7 @@ export default {
             this.limitEvaluator = this.openmct.telemetry.limitEvaluator(this.domainObject);
             this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
 
-            const valueMetadata = this.metadata.value(this.item.value);
+            const valueMetadata = this.metadata ? this.metadata.value(this.item.value) : {};
             this.customStringformatter = this.openmct.telemetry.customStringFormatter(valueMetadata, this.item.format);
 
             this.telemetryCollection = this.openmct.telemetry.requestCollection(this.domainObject, {

src/plugins/exportAsJSONAction/ExportAsJSONAction.js

@@ -128,6 +128,30 @@ export default class ExportAsJSONAction {
 
         return copyOfChild;
     }
+
+    /**
+     * @private
+     * @param {object} child
+     * @param {object} parent
+     * @returns {object}
+     */
+    _rewriteLinkForReference(child, parent) {
+        const childId = this._getId(child);
+        this.externalIdentifiers.push(childId);
+        const copyOfChild = JSON.parse(JSON.stringify(child));
+
+        copyOfChild.identifier.key = uuid();
+        const newIdString = this._getId(copyOfChild);
+        const parentId = this._getId(parent);
+
+        this.idMap[childId] = newIdString;
+        copyOfChild.location = null;
+        parent.configuration.objectStyles.conditionSetIdentifier = copyOfChild.identifier;
+        this.tree[newIdString] = copyOfChild;
+        this.tree[parentId].configuration.objectStyles.conditionSetIdentifier = copyOfChild.identifier;
+
+        return copyOfChild;
+    }
     /**
      * @private
      */
@@ -159,23 +183,27 @@ export default class ExportAsJSONAction {
             "rootId": this._getId(this.root)
         };
     }
+
     /**
      * @private
      * @param {object} parent
      */
     _write(parent) {
         this.calls++;
+        //conditional object styles are not saved on the composition, so we need to check for them
+        let childObjectReferenceId = parent.configuration?.objectStyles?.conditionSetIdentifier;
+
         const composition = this.openmct.composition.get(parent);
         if (composition !== undefined) {
             composition.load()
                 .then((children) => {
                     children.forEach((child, index) => {
-                        // Only export if object is creatable
+                    // Only export if object is creatable
                         if (this._isCreatableAndPersistable(child)) {
-                            // Prevents infinite export of self-contained objs
+                        // Prevents infinite export of self-contained objs
                             if (!Object.prototype.hasOwnProperty.call(this.tree, this._getId(child))) {
-                                // If object is a link to something absent from
+                            // If object is a link to something absent from
-                                // tree, generate new id and treat as new object
+                            // tree, generate new id and treat as new object
                                 if (this._isLinkedObject(child, parent)) {
                                     child = this._rewriteLink(child, parent);
                                 } else {
@@ -186,18 +214,41 @@ export default class ExportAsJSONAction {
                             }
                         }
                     });
-                    this.calls--;
+                    this._decrementCallsAndSave();
-                    if (this.calls === 0) {
-                        this._rewriteReferences();
-                        this._saveAs(this._wrapTree());
-                    }
                 });
-        } else {
+        } else if (!childObjectReferenceId) {
-            this.calls--;
+            this._decrementCallsAndSave();
-            if (this.calls === 0) {
+        }
-                this._rewriteReferences();
+
-                this._saveAs(this._wrapTree());
+        if (childObjectReferenceId) {
-            }
+            this.openmct.objects.get(childObjectReferenceId)
+                .then((child) => {
+                    // Only export if object is creatable
+                    if (this._isCreatableAndPersistable(child)) {
+                        // Prevents infinite export of self-contained objs
+                        if (!Object.prototype.hasOwnProperty.call(this.tree, this._getId(child))) {
+                            // If object is a link to something absent from
+                            // tree, generate new id and treat as new object
+                            if (this._isLinkedObject(child, parent)) {
+                                child = this._rewriteLinkForReference(child, parent);
+                            } else {
+                                this.tree[this._getId(child)] = child;
+                            }
+
+                            this._write(child);
+                        }
+                    }
+
+                    this._decrementCallsAndSave();
+                });
+        }
+    }
+
+    _decrementCallsAndSave() {
+        this.calls--;
+        if (this.calls === 0) {
+            this._rewriteReferences();
+            this._saveAs(this._wrapTree());
         }
     }
 }

src/plugins/exportAsJSONAction/ExportAsJSONActionSpec.js

@@ -322,4 +322,57 @@ describe('Export as JSON plugin', () => {
 
         exportAsJSONAction.invoke([parent]);
     });
+
+    it('ExportAsJSONAction exports object references from tree', (done) => {
+        const parent = {
+            composition: [],
+            configuration: {
+                objectStyles: {
+                    conditionSetIdentifier: {
+                        key: 'child',
+                        namespace: ''
+                    }
+                }
+            },
+            identifier: {
+                key: 'parent',
+                namespace: ''
+            },
+            name: 'Parent',
+            type: 'folder',
+            modified: 1503598129176,
+            location: 'mine',
+            persisted: 1503598129176
+        };
+
+        const child = {
+            composition: [],
+            identifier: {
+                key: 'child',
+                namespace: ''
+            },
+            name: 'Child',
+            type: 'folder',
+            modified: 1503598132428,
+            location: null,
+            persisted: 1503598132428
+        };
+
+        spyOn(openmct.objects, 'get').and.callFake(object => {
+            return Promise.resolve(child);
+        });
+
+        spyOn(exportAsJSONAction, '_saveAs').and.callFake(completedTree => {
+            expect(Object.keys(completedTree).length).toBe(2);
+            const conditionSetId = Object.keys(completedTree.openmct)[1];
+            expect(Object.prototype.hasOwnProperty.call(completedTree, 'openmct')).toBeTruthy();
+            expect(Object.prototype.hasOwnProperty.call(completedTree, 'rootId')).toBeTruthy();
+            expect(Object.prototype.hasOwnProperty.call(completedTree.openmct, 'parent')).toBeTruthy();
+            expect(completedTree.openmct[conditionSetId].name).toBe('Child');
+
+            done();
+        });
+
+        exportAsJSONAction.invoke([parent]);
+    });
 });

src/plugins/faultManagement/FaultManagementListHeader.vue

@@ -21,23 +21,25 @@
  *****************************************************************************/
 
 <template>
-<div class="c-fault-mgmt__list-header c-fault-mgmt__list">
+<div class="c-fault-mgmt-item-header c-fault-mgmt__list-header c-fault-mgmt__list">
-    <div class="c-fault-mgmt__checkbox">
+    <div class="c-fault-mgmt-item-header c-fault-mgmt__checkbox">
         <input
             type="checkbox"
             :checked="isSelectAll"
             @input="selectAll"
         >
     </div>
-    <div class="c-fault-mgmt__list-content">
+    <div class="c-fault-mgmt-item-header c-fault-mgmt__list-header-results c-fault-mgmt__list-severity">
-        <div class="c-fault-mgmt__list-header-results"> {{ totalFaultsCount }} Results </div>
+        {{ totalFaultsCount }} Results
+    </div>
+    <div class="c-fault-mgmt__list-header-content">
         <div class="c-fault-mgmt__list-content-right">
-            <div class="c-fault-mgmt__list-header-tripVal c-fault-mgmt__list-trigVal">Trip Value</div>
+            <div class="c-fault-mgmt-item-header c-fault-mgmt__list-header-tripVal">Trip Value</div>
-            <div class="c-fault-mgmt__list-header-liveVal c-fault-mgmt__list-curVal">Live Value</div>
+            <div class="c-fault-mgmt-item-header c-fault-mgmt__list-header-liveVal">Live Value</div>
-            <div class="c-fault-mgmt__list-header-trigTime c-fault-mgmt__list-trigTime">Trigger Time</div>
+            <div class="c-fault-mgmt-item-header c-fault-mgmt__list-header-trigTime">Trigger Time</div>
         </div>
     </div>
-    <div class="c-fault-mgmt__list-action-wrapper">
+    <div class=" c-fault-mgmt-item-header c-fault-mgmt__list-header-action-wrapper">
         <div class="c-fault-mgmt__list-header-sortButton c-fault-mgmt__list-action-button">
             <SelectField
                 class="c-fault-mgmt-viewButton"

src/plugins/faultManagement/FaultManagementListItem.vue

@@ -23,52 +23,55 @@
 <template>
 <div
     class="c-fault-mgmt__list data-selectable"
-    :class="[
+    :class="classesFromState"
-        {'is-selected': isSelected},
-        {'is-unacknowledged': !fault.acknowledged},
-        {'is-shelved': fault.shelved}
-    ]"
 >
-    <div class="c-fault-mgmt__checkbox">
+    <div class="c-fault-mgmt-item c-fault-mgmt__list-checkbox">
         <input
             type="checkbox"
             :checked="isSelected"
             @input="toggleSelected"
         >
     </div>
-    <div
+    <div class="c-fault-mgmt-item">
-        class="c-fault-mgmt__list-severity"
+        <div
-        :title="fault.severity"
+            class="c-fault-mgmt__list-severity"
-        :class="[
+            :title="fault.severity"
-            'is-severity-' + severity
+            :class="[
-        ]"
+                'is-severity-' + severity
-    >
+            ]"
+        >
+        </div>
     </div>
-    <div class="c-fault-mgmt__list-content">
+    <div class="c-fault-mgmt-item c-fault-mgmt__list-content">
-        <div class="c-fault-mgmt__list-pathname">
+        <div class="c-fault-mgmt-item c-fault-mgmt__list-pathname">
             <div class="c-fault-mgmt__list-path">{{ fault.namespace }}</div>
             <div class="c-fault-mgmt__list-faultname">{{ fault.name }}</div>
         </div>
         <div class="c-fault-mgmt__list-content-right">
-            <div
+            <div class="c-fault-mgmt-item c-fault-mgmt__list-trigVal">
-                class="c-fault-mgmt__list-trigVal"
+                <div
-                :class="tripValueClassname"
+                    class="c-fault-mgmt-item__value"
-                title="Trip Value"
+                    :class="tripValueClassname"
-            >{{ fault.triggerValueInfo.value }}</div>
+                    title="Trip Value"
-            <div
+                >{{ fault.triggerValueInfo.value }}</div>
-                class="c-fault-mgmt__list-curVal"
-                :class="liveValueClassname"
-                title="Live Value"
-            >
-                {{ fault.currentValueInfo.value }}
             </div>
-            <div
+            <div class="c-fault-mgmt-item c-fault-mgmt__list-curVal">
-                class="c-fault-mgmt__list-trigTime"
+                <div
-            >{{ fault.triggerTime }}
+                    class="c-fault-mgmt-item__value"
+                    :class="liveValueClassname"
+                    title="Live Value"
+                >{{ fault.currentValueInfo.value }}</div>
+            </div>
+            <div class="c-fault-mgmt-item c-fault-mgmt__list-trigTime">
+                <div
+                    class="c-fault-mgmt-item__value"
+                    title="Last Trigger Time"
+                >{{ fault.triggerTime }}
+                </div>
             </div>
         </div>
     </div>
-    <div class="c-fault-mgmt__list-action-wrapper">
+    <div class="c-fault-mgmt-item c-fault-mgmt__list-action-wrapper">
         <button
             class="c-fault-mgmt__list-action-button l-browse-bar__actions c-icon-button icon-3-dots"
             title="Disposition Actions"
@@ -77,7 +80,6 @@
     </div>
 </div>
 </template>
-
 <script>
 
 const RANGE_CONDITION_CLASS = {
@@ -106,6 +108,36 @@ export default {
         }
     },
     computed: {
+        classesFromState() {
+            const exclusiveStates = [
+                {
+                    className: 'is-shelved',
+                    test: () => this.fault.shelved
+                },
+                {
+                    className: 'is-unacknowledged',
+                    test: () => !this.fault.acknowledged && !this.fault.shelved
+                },
+                {
+                    className: 'is-acknowledged',
+                    test: () => this.fault.acknowledged && !this.fault.shelved
+                }
+            ];
+
+            const classes = [];
+
+            if (this.isSelected) {
+                classes.push('is-selected');
+            }
+
+            const matchingState = exclusiveStates.find(stateDefinition => stateDefinition.test());
+
+            if (matchingState !== undefined) {
+                classes.push(matchingState.className);
+            }
+
+            return classes;
+        },
         liveValueClassname() {
             const currentValueInfo = this.fault?.currentValueInfo;
             if (!currentValueInfo || currentValueInfo.monitoringResult === 'IN_LIMITS') {
@@ -149,7 +181,7 @@ export default {
 
             const menuItems = [
                 {
-                    cssClass: 'icon-bell',
+                    cssClass: 'icon-check',
                     isDisabled: this.fault.acknowledged,
                     name: 'Acknowledge',
                     description: '',

src/plugins/faultManagement/FaultManagementListView.vue

@@ -35,25 +35,31 @@
         @shelveSelected="toggleShelveSelected"
     />
 
-    <FaultManagementListHeader
+    <div class="c-faults-list-view-header-item-container-wrapper">
-        class="header"
+        <div class="c-faults-list-view-header-item-container">
-        :selected-faults="Object.values(selectedFaults)"
+            <FaultManagementListHeader
-        :total-faults-count="filteredFaultsList.length"
+                class="header"
-        @selectAll="selectAll"
+                :selected-faults="Object.values(selectedFaults)"
-        @sortChanged="sortChanged"
+                :total-faults-count="filteredFaultsList.length"
-    />
+                @selectAll="selectAll"
+                @sortChanged="sortChanged"
+            />
 
-    <template v-if="filteredFaultsList.length > 0">
+            <div class="c-faults-list-view-item-body">
-        <FaultManagementListItem
+                <template v-if="filteredFaultsList.length > 0">
-            v-for="fault of filteredFaultsList"
+                    <FaultManagementListItem
-            :key="fault.id"
+                        v-for="fault of filteredFaultsList"
-            :fault="fault"
+                        :key="fault.id"
-            :is-selected="isSelected(fault)"
+                        :fault="fault"
-            @toggleSelected="toggleSelected"
+                        :is-selected="isSelected(fault)"
-            @acknowledgeSelected="toggleAcknowledgeSelected"
+                        @toggleSelected="toggleSelected"
-            @shelveSelected="toggleShelveSelected"
+                        @acknowledgeSelected="toggleAcknowledgeSelected"
-        />
+                        @shelveSelected="toggleShelveSelected"
-    </template>
+                    />
+                </template>
+            </div>
+        </div>
+    </div>
 </div>
 </template>
 
@@ -90,17 +96,19 @@ export default {
     computed: {
         filteredFaultsList() {
             const filterName = FILTER_ITEMS[this.filterIndex];
-            let list = this.faultsList.filter(fault => !fault.shelved);
+            let list = this.faultsList;
+
+            // Exclude shelved alarms from all views except the Shelved view
+            if (filterName !== 'Shelved') {
+                list = list.filter(fault => fault.shelved !== true);
+            }
+
             if (filterName === 'Acknowledged') {
-                list = this.faultsList.filter(fault => fault.acknowledged);
+                list = list.filter(fault => fault.acknowledged);
-            }
+            } else if (filterName === 'Unacknowledged') {
-
+                list = list.filter(fault => !fault.acknowledged);
-            if (filterName === 'Unacknowledged') {
+            } else if (filterName === 'Shelved') {
-                list = this.faultsList.filter(fault => !fault.acknowledged);
+                list = list.filter(fault => fault.shelved);
-            }
-
-            if (filterName === 'Shelved') {
-                list = this.faultsList.filter(fault => fault.shelved);
             }
 
             if (this.searchTerm.length > 0) {
@@ -195,7 +203,7 @@ export default {
                             {
                                 key: 'comment',
                                 control: 'textarea',
-                                name: 'Comment',
+                                name: 'Optional comment',
                                 pattern: '\\S+',
                                 required: false,
                                 cssClass: 'l-input-lg',
@@ -237,7 +245,7 @@ export default {
                                 {
                                     key: 'comment',
                                     control: 'textarea',
-                                    name: 'Comment',
+                                    name: 'Optional comment',
                                     pattern: '\\S+',
                                     required: false,
                                     cssClass: 'l-input-lg',
@@ -246,7 +254,7 @@ export default {
                                 {
                                     key: 'shelveDuration',
                                     control: 'select',
-                                    name: 'Shelve Duration',
+                                    name: 'Shelve duration',
                                     options: FAULT_MANAGEMENT_SHELVE_DURATIONS_IN_MS,
                                     required: false,
                                     cssClass: 'l-input-lg',

src/plugins/faultManagement/FaultManagementPlugin.js

@@ -32,7 +32,7 @@ export default function FaultManagementPlugin() {
             name: 'Fault Management',
             creatable: false,
             description: 'Fault Management View',
-            cssClass: 'icon-telemetry'
+            cssClass: 'icon-bell'
         });
 
         openmct.objectViews.addProvider(new FaultManagementViewProvider(openmct));

src/plugins/faultManagement/FaultManagementToolbar.vue

@@ -23,7 +23,7 @@
 <template>
 <div class="c-fault-mgmt__toolbar">
     <button
-        class="c-icon-button icon-bell"
+        class="c-icon-button icon-check"
         title="Acknowledge selected faults"
         :disabled="disableAcknowledge"
         @click="acknowledgeSelected"

src/plugins/faultManagement/FaultManagementView.vue

@@ -21,14 +21,13 @@
  *****************************************************************************/
 
 <template>
-<div class="c-fault-mgmt">
+<FaultManagementListView
-    <FaultManagementListView
+    :faults-list="faultsList"
-        :faults-list="faultsList"
+/>
-    />
-</div>
 </template>
 
 <script>
+
 import FaultManagementListView from './FaultManagementListView.vue';
 import { FAULT_MANAGEMENT_ALARMS, FAULT_MANAGEMENT_GLOBAL_ALARMS } from './constants';
 

src/plugins/faultManagement/fault-manager.scss

@@ -19,216 +19,250 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-
+$colorFaultItemFg: $colorBodyFg;
-/*********************************************** FAULT PROPERTIES */
+$colorFaultItemFgEmphasis: $colorBodyFgEm;
-.is-severity-critical{
+$colorFaultItemBg: pullForward($colorBodyBg, 5%);
-    @include glyphBefore($glyph-icon-alert-triangle);
-    color: $colorStatusError;
-}
-
-.is-severity-warning{
-    @include glyphBefore($glyph-icon-alert-rect);
-    color: $colorStatusAlert;
-}
-
-.is-severity-watch{
-    @include glyphBefore($glyph-icon-info);
-    color: $colorCommand;
-}
-
-.is-unacknowledged{
-    .c-fault-mgmt__list-severity{
-        @include pulse($animName: severityAnim, $dur: 200ms);
-    }
-}
-
-.is-selected { 
-    background: $colorSelectedBg;
-}
-
-.is-shelved{
-    .c-fault-mgmt__list-content{
-        opacity: 50% !important;
-        font-style: italic;
-    }
-    .c-fault-mgmt__list-severity{
-        @include pulse($animName: shelvedAnim, $dur: 0ms);
-    }
-}
-
-
 
 /*********************************************** SEARCH  */
-.c-fault-mgmt__search-row{
+.c-fault-mgmt__search-row {
     display: flex;
     align-items: center;
+    flex: 0 0 auto;
     > * + * {
        margin-left: 10px;
        float: right;
     }
 }
 
-.c-fault-mgmt-search{
+.c-fault-mgmt-search {
     width: 95%;
 }
 
 /*********************************************** TOOLBAR */
-.c-fault-mgmt__toolbar{
+.c-fault-mgmt__toolbar {
-    display: flex; 
+    display: flex;
     justify-content: center;
-    > * {
+    flex: 0 0 auto;
-        font-size: 1.25em;
+    > * + * {
+       margin-left: $interiorMargin;
     }
 }
 
 /*********************************************** LIST VIEW */
-.c-faults-list-view { 
+.c-faults-list-view {
     display: flex;
     flex-direction: column;
+    height: 100%;
+
     > * + * {
-        margin-top: $interiorMargin; 
+        margin-top: $interiorMargin;
     }
 }
 
+.c-faults-list-view-header-item-container {
+    display: grid;
+    width: 100%;
+    grid-template-columns: max-content max-content repeat(5,minmax(max-content, 20%)) max-content;
+    grid-row-gap: $interiorMargin;
 
-/*********************************************** FAULT ITEM */
+    &-wrapper {
-.c-fault-mgmt__list{
+        flex: 1 1 auto;
-    background: rgba($colorBodyFg, 0.1);
+        padding-right: $interiorMargin; // Fend of from scrollbar
-    margin-bottom: 5px;
+        overflow-y: auto;
-    padding: 4px;
-    display: flex;
-    align-items: center;
-
-    > * {
-        margin-left: $interiorMargin;
     }
-    
+
-    &-severity{
+    .--width-less-than-600 & {
+        grid-template-columns: max-content max-content 1fr 1fr max-content;
+    }
+}
+
+.c-faults-list-view-item-body {
+   display: contents;
+}
+
+/*********************************************** LIST */
+.c-fault-mgmt__list {
+    display: contents;
+    color: $colorFaultItemFg;
+
+    &-checkbox{
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+    }
+
+    &-severity {
         font-size: 2em;
-        margin-left: $interiorMarginLg;
-     }
 
-    &-pathname{
+        &.is-severity-critical {
-        flex-wrap: wrap;
+            @include glyphBefore($glyph-icon-alert-triangle);
-        flex: 1 1 auto;
+            color: $colorStatusError;
-        
+        }
-    }
-    &-path{
-        font-size: .75em;
-    } 
 
-    &-faultname{
+        &.is-severity-warning {
-        font-weight: bold;
+            @include glyphBefore($glyph-icon-alert-rect);
-        font-size: 1.3em;
+            color: $colorStatusAlert;
-    }
+        }
 
-    &-content{
+        &.is-severity-watch {
-        display: flex;
+            @include glyphBefore($glyph-icon-info);
-        flex-wrap: wrap;
+            color: $colorCommand;
-        flex: 1 1 auto;
-        align-items: center;
-    }
-
-    &-content-right{
-        margin-left: auto;
-        display: flex;
-        flex-wrap: wrap;
-    }
-
-    &-trigVal, &-curVal, &-trigTime{
-        @include ellipsize;
-        border-radius: $controlCr;
-        padding: $interiorMargin;
-        width: 80px;
-        margin-right: $interiorMarginLg;
-
-    }
-
-    &-trigVal {
-        @include isLimit();
-        background: rgba($colorBodyFg, 0.25);
-    }
-
-    &-curVal {
-        @include isLimit();
-        background: rgba($colorBodyFg, 0.25);
-        &-alert{
-            background: $colorWarningHi;
         }
     }
 
-    &-trigTime{
+     &-content {
-        width: auto;
+        display: contents;
+
+        .--width-less-than-600 & {
+            display: flex;
+            flex-wrap: wrap;
+            grid-column: span 2;
+         }
     }
 
-    &-action-wrapper{
+    &-pathname {
-        display: flex;
+        padding-right: $interiorMarginLg;
-        align-content: right;
+        overflow-wrap: anywhere;
-        width: 100px;
+        min-width: 100px;
+
+    }
+    &-path {
+        font-size: .85em;
+        margin-left: $interiorMargin;
     }
 
-    &-action-button{
+    &-faultname{
+        font-size: 1.3em;
+        margin-left: $interiorMargin;
+    }
+
+    &-content-right {
+        display: contents;
+    }
+
+    &-trigTime {
+        grid-column: 6 / span 2;
+    }
+
+    &-action-wrapper {
+        text-align: right;
+        flex: 0 0 auto;
+        align-items: stretch;
+    }
+
+    &-action-button {
         flex: 0 0 auto;
         margin-left: auto;
-        justify-content: right;
+        text-align: right;
+    }
+
+    // STATES
+    &.is-unacknowledged {
+        color: $colorFaultItemFgEmphasis;
+        .c-fault-mgmt__list-severity {
+            @include pulse($animName: severityAnim, $dur: 200ms);
+        }
+    }
+
+    &.is-acknowledged,
+    &.is-shelved {
+        .c-fault-mgmt__list-severity {
+            &:before {
+                opacity: 60%;
+                //font-size: 1.5em;
+            }
+
+            &:after {
+                color: $colorFaultItemFgEmphasis;
+                display: block;
+                font-family: symbolsfont;
+                position: absolute;
+                //text-shadow: black 0 0 2px;
+                right: -3px;
+                bottom: -3px;
+                transform-origin: right bottom;
+                transform: scale(0.6);
+            }
+        }
+    }
+
+    &.is-shelved {
+        .c-fault-mgmt__list-pathname {
+            font-style: italic;
+        }
+    }
+
+    &.is-acknowledged .c-fault-mgmt__list-severity:after {
+        content: $glyph-icon-check;
+    }
+
+    &.is-shelved .c-fault-mgmt__list-severity:after {
+        content: $glyph-icon-timer;
     }
 }
 
 /*********************************************** LIST HEADER */
-.c-fault-mgmt__list-header{
+.c-fault-mgmt__list-header {
-    display: flex;
+    display: contents;
-    background: rgba($colorBodyFg, .23);
     border-radius: $controlCr;
+    align-items: center;
 
-    &-tripVal, &-liveVal, &-trigTime{
+    * {
-        background: none;
+        margin: 0px;
+        border-radius: 0px;
     }
 
-    &-trigTime{
+    .--width-less-than-600 & {
-        width: 160px;
+        .c-fault-mgmt__list-content-right {
-    }
+            display:none;
-    &-sortButton{
+        }
-        flex: 0 0 auto;
-        margin-left: auto;
-        justify-content: right;
-        display: flex;
-        align-content: right;
-        width: 100px;
     }
 
-}
+    &-content {
+        display: contents;
+    }
 
-.is-severity-critical{
+    &-results {
-    @include glyphBefore($glyph-icon-alert-triangle);
+        grid-column: 2 / span 2;
-    color: $colorStatusError;
+        font-size: 1em;
-}
+        height: auto;
+    }
 
-.is-severity-warning{
+    &-action-wrapper {
-    @include glyphBefore($glyph-icon-alert-rect);
+        grid-column: 7 / span 2;
-    color: $colorStatusAlert;
-}
 
-.is-severity-watch{
+        .--width-less-than-600 & {
-    @include glyphBefore($glyph-icon-info);
+            grid-column: 4 / span 2;
-    color: $colorCommand;
+        }
-}
-
-.is-unacknowledged{
-    .c-fault-mgmt__list-severity{
-        @include pulse($animName: severityAnim, $dur: 200ms);
     }
 }
 
-.is-selected { 
+/*********************************************** GRID ITEM */
-    background: $colorSelectedBg;
+.c-fault-mgmt-item {
-}
+    $p: $interiorMargin;
+    padding: $p;
+    background: $colorFaultItemBg;
+    white-space: nowrap;
 
-.is-shelved{
+    &-header {
-    .c-fault-mgmt__list-content{
+        $c: $colorBodyBg;
-        opacity: 60% !important;
+        background: $c;
-        font-style: italic;
+        border-bottom: 5px solid $c; // Creates illusion of "space" beneath header
+        min-height: 30px; // Needed to align cells
+        padding: $p;
+        position: sticky;
+        top: 0;
+        z-index: 2;
     }
-    .c-fault-mgmt__list-severity{
+
-        @include pulse($animName: shelvedAnim, $dur: 0ms);
+    &__value {
+        @include isLimit();
+        background: rgba($colorBodyFg, 0.1);
+        padding: $p;
+        border-radius: $controlCr;
+        display: inline-flex;
+    }
+
+    .is-selected & {
+        background: $colorSelectedBg;
     }
 }

src/plugins/gauge/GaugePluginSpec.js

@@ -472,7 +472,7 @@ describe('Gauge plugin', () => {
         it('renders major elements', () => {
             const wrapperElement = gaugeHolder.querySelector('.js-gauge-wrapper');
             const rangeElement = gaugeHolder.querySelector('.js-gauge-meter-range');
-            const valueElement = gaugeHolder.querySelector('.js-meter-current-value');
+            const valueElement = gaugeHolder.querySelector('.js-gauge-current-value');
 
             const hasMajorElements = Boolean(wrapperElement && rangeElement && valueElement);
 
@@ -485,7 +485,7 @@ describe('Gauge plugin', () => {
 
         it('renders correct current value', (done) => {
             function WatchUpdateValue() {
-                const textElement = gaugeHolder.querySelector('.js-meter-current-value');
+                const textElement = gaugeHolder.querySelector('.js-gauge-current-value');
                 expect(Number(textElement.textContent).toFixed(gaugeViewObject.configuration.gaugeController.precision)).toBe(randomValue.toFixed(gaugeViewObject.configuration.gaugeController.precision));
                 done();
             }
@@ -570,7 +570,7 @@ describe('Gauge plugin', () => {
         it('renders major elements', () => {
             const wrapperElement = gaugeHolder.querySelector('.js-gauge-wrapper');
             const rangeElement = gaugeHolder.querySelector('.js-gauge-meter-range');
-            const valueElement = gaugeHolder.querySelector('.js-meter-current-value');
+            const valueElement = gaugeHolder.querySelector('.js-gauge-current-value');
 
             const hasMajorElements = Boolean(wrapperElement && rangeElement && valueElement);
 

src/plugins/gauge/components/Gauge.vue

@@ -23,189 +23,218 @@
 <div
     class="c-gauge__wrapper js-gauge-wrapper"
     :class="`c-gauge--${gaugeType}`"
+    :title="gaugeTitle"
 >
     <template v-if="typeDial">
         <svg
-            width="0"
+            class="c-gauge c-dial"
-            height="0"
+            viewBox="0 0 10 10"
-            class="c-dial__clip-paths"
         >
-            <defs>
+            <g class="c-dial__masks">
-                <clipPath
+                <mask id="gaugeValueMask">
-                    id="gaugeBgMask"
+                    <path
-                    clipPathUnits="objectBoundingBox"
+                        d="M1.8926 8.1074C1.09734 7.31215 0.605469 6.21352 0.605469 5C0.605469 2.57297 2.57297 0.605469 5 0.605469C7.42703 0.605469 9.39453 2.57297 9.39453 5C9.39453 6.21352 8.90266 7.31215 8.1074 8.1074L7.14066 7.14066C7.6885 6.59281 8.02734 5.83598 8.02734 5C8.02734 3.32804 6.67196 1.97266 5 1.97266C3.32804 1.97266 1.97266 3.32804 1.97266 5C1.97266 5.83598 2.3115 6.59281 2.85934 7.14066L1.8926 8.1074Z"
-                >
+                        fill="white"
-                    <path d="M0.853553 0.853553C0.944036 0.763071 1 0.638071 1 0.5C1 0.223858 0.776142 0 0.5 0C0.223858 0 0 0.223858 0 0.5C0 0.638071 0.0559644 0.763071 0.146447 0.853553L0.285934 0.714066C0.23115 0.659281 0.197266 0.583598 0.197266 0.5C0.197266 0.332804 0.332804 0.197266 0.5 0.197266C0.667196 0.197266 0.802734 0.332804 0.802734 0.5C0.802734 0.583598 0.76885 0.659281 0.714066 0.714066L0.853553 0.853553Z" />
+                    />
-                </clipPath>
+                </mask>
-                <clipPath
+                <mask id="gaugeBgMask">
-                    id="gaugeValueMask"
+                    <path
-                    clipPathUnits="objectBoundingBox"
+                        d="M8.53553 8.53553C9.44036 7.63071 10 6.38071 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 6.38071 0.559644 7.63071 1.46447 8.53553L2.85934 7.14066C2.3115 6.59281 1.97266 5.83598 1.97266 5C1.97266 3.32804 3.32804 1.97266 5 1.97266C6.67196 1.97266 8.02734 3.32804 8.02734 5C8.02734 5.83598 7.6885 6.59281 7.14066 7.14066L8.53553 8.53553Z"
-                >
+                        fill="white"
-                    <path d="M0.18926 0.81074C0.109735 0.731215 0.0605469 0.621351 0.0605469 0.5C0.0605469 0.257298 0.257298 0.0605469 0.5 0.0605469C0.742702 0.0605469 0.939453 0.257298 0.939453 0.5C0.939453 0.621351 0.890265 0.731215 0.81074 0.81074L0.714066 0.714066C0.76885 0.659281 0.802734 0.583599 0.802734 0.5C0.802734 0.332804 0.667196 0.197266 0.5 0.197266C0.332804 0.197266 0.197266 0.332804 0.197266 0.5C0.197266 0.583599 0.23115 0.659281 0.285934 0.714066L0.18926 0.81074Z" />
+                    />
-                </clipPath>
+                </mask>
-            </defs>
+            </g>
-        </svg>
 
-        <svg
+            <g
-            class="c-dial__range c-gauge__range js-gauge-dial-range"
+                class="c-dial__graphics"
-            viewBox="0 0 512 512"
+                mask="url(#gaugeBgMask)"
-        >
-            <text
-                v-if="displayMinMax"
-                font-size="35"
-                transform="translate(105 455) rotate(-45)"
-            >{{ rangeLow }}</text>
-            <text
-                v-if="displayMinMax"
-                font-size="35"
-                transform="translate(407 455) rotate(45)"
-                text-anchor="end"
-            >{{ rangeHigh }}</text>
-        </svg>
-
-        <svg
-            v-if="displayCurVal"
-            class="c-dial__current-value-text-wrapper"
-            viewBox="0 0 512 512"
-        >
-            <svg
-                class="c-dial__current-value-text-sizer"
-                :viewBox="curValViewBox"
             >
+                <rect
+                    class="c-dial__bg"
+                    x="0"
+                    y="0"
+                    width="10"
+                    height="10"
+                />
+                <g
+                    v-if="isDialLowLimit"
+                    class="c-dial__limit-low"
+                    :style="`transform: rotate(${dialLowLimitDeg}deg)`"
+                >
+                    <rect
+                        v-if="isDialLowLimitLow"
+                        class="c-dial__low-limit__low"
+                        x="5"
+                        y="5"
+                        width="5"
+                        height="5"
+                    />
+                    <rect
+                        v-if="isDialLowLimitMid"
+                        class="c-dial__low-limit__mid"
+                        x="5"
+                        y="0"
+                        width="5"
+                        height="5"
+                    />
+                    <rect
+                        v-if="isDialLowLimitHigh"
+                        class="c-dial__low-limit__high"
+                        x="0"
+                        y="0"
+                        width="5"
+                        height="5"
+                    />
+                </g>
+                <g
+                    v-if="isDialHighLimit"
+                    class="c-dial__limit-high"
+                    :style="`transform: rotate(${dialHighLimitDeg}deg)`"
+                >
+                    <rect
+                        v-if="isDialHighLimitLow"
+                        class="c-dial__high-limit__low"
+                        x="0"
+                        y="5"
+                        width="5"
+                        height="5"
+                    />
+                    <rect
+                        v-if="isDialHighLimitMid"
+                        class="c-dial__high-limit__mid"
+                        x="0"
+                        y="0"
+                        width="5"
+                        height="5"
+                    />
+                    <rect
+                        v-if="isDialHighLimitHigh"
+                        class="c-dial__high-limit__high"
+                        x="5"
+                        y="0"
+                        width="5"
+                        height="5"
+                    />
+                </g>
+            </g>
+
+            <g
+                class="c-dial__graphics"
+                mask="url(#gaugeValueMask)"
+            >
+                <g
+                    v-if="typeFilledDial"
+                    class="c-dial__filled-value"
+                    :style="`transform: rotate(${degValueFilledDial}deg)`"
+                >
+                    <rect
+                        v-if="isDialFilledValueLow"
+                        class="c-dial__filled-value__low"
+                        x="5"
+                        y="5"
+                        width="5"
+                        height="5"
+                    />
+                    <rect
+                        v-if="isDialFilledValueMid"
+                        class="c-dial__filled-value__mid"
+                        x="5"
+                        y="0"
+                        width="5"
+                        height="5"
+                    />
+                    <rect
+                        v-if="isDialFilledValueHigh"
+                        class="c-dial__filled-value__high"
+                        x="0"
+                        y="0"
+                        width="5"
+                        height="5"
+                    />
+                </g>
+                <g
+                    v-if="valueInBounds && typeNeedleDial"
+                    class="c-dial__needle-value"
+                    :style="`transform: rotate(${degValue}deg)`"
+                >
+                    <path d="M4.90234 9.39453L5.09766 9.39453L5.30146 8.20874C6.93993 8.05674 8.22265 6.67817 8.22266 5C8.22266 3.22018 6.77982 1.77734 5 1.77734C3.22018 1.77734 1.77734 3.22018 1.77734 5C1.77734 6.67817 3.06007 8.05674 4.69854 8.20874L4.90234 9.39453Z" />
+                </g>
+                <path
+                    id="dialTextPath"
+                    class="c-dial__range-msg-path"
+                    d="M8.3501 5.0001C8.3501 6.85025 6.85025 8.3501 5.0001 8.3501C3.14994 8.3501 1.6501 6.85025 1.6501 5.0001C1.6501 3.14994 3.14994 1.6501 5.0001 1.6501C6.85025 1.6501 8.3501 3.14994 8.3501 5.0001Z"
+                    fill="none"
+                    style="transform-origin: center; transform: rotate(182deg)"
+                />
+            </g>
+            <g class="c-dial__text">
+                <text
+                    v-if="displayUnits"
+                    x="50%"
+                    y="70%"
+                    text-anchor="middle"
+                    class="c-gauge__units"
+                    font-size="8%"
+                >{{ units }}</text>
+
+                <g
+                    v-if="displayMinMax"
+                    class="c-dial__range-text js-gauge-dial-range"
+                    :font-size="rangeFontSize"
+                >
+                    <text
+                        transform="translate(1.5 8.7) rotate(-45)"
+                        dominant-baseline="hanging"
+                    >{{ rangeLow }}</text>
+                    <text
+                        transform="translate(8.4 8.7) rotate(45)"
+                        dominant-baseline="hanging"
+                        text-anchor="end"
+                    >{{ rangeHigh }}</text>
+                </g>
+            </g>
+
+            <svg
+                v-if="!valueInBounds && valueExpected"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 512 512"
+                xml:space="preserve"
+                class="c-dial__value-oor-indicator"
+                x="45%"
+                y="80%"
+                width="1"
+                height="1"
+            ><path
+                d="M448 0H64C28.7.1.1 28.7 0 64v384c.1 35.3 28.7 63.9 64 64h384c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM288 448h-64v-64h64v64zm10.9-192L280 352h-48l-18.9-96V64H299v192h-.1z"
+            /></svg>
+
+            <svg
+                class="c-gauge__current-value-text-wrapper"
+                :viewBox="curValViewBox"
+                preserveAspectRatio="xMidYMid meet"
+            >
+                <rect
+                    class="svg-viewbox-debug"
+                    x="0"
+                    y="0"
+                    width="100%"
+                    height="100%"
+                />
                 <text
                     class="c-dial__current-value-text js-dial-current-value"
+                    font-size="3.5"
                     lengthAdjust="spacing"
                     text-anchor="middle"
-                    style="transform: translate(50%, 70%)"
+                    dominant-baseline="middle"
-                >{{ curVal }}</text>
+                    x="50%"
+                    y="50%"
+                >
+                    <template v-if="displayCurVal">
+                        <tspan>{{ curVal }}</tspan>
+                    </template>
+                </text>
             </svg>
-            <svg
-                class="c-gauge__units c-dial__units"
-                viewBox="0 0 50 100"
-            >
-                <text
-                    class="c-dial__units-text"
-                    lengthAdjust="spacing"
-                    text-anchor="middle"
-                    style="transform: translate(50%, 72%)"
-                >{{ units }}</text>
-            </svg>
-        </svg>
 
-        <svg
-            class="c-dial__bg"
-            viewBox="0 0 10 10"
-        >
-            <g
-                v-if="isDialLowLimit"
-                class="c-dial__limit-low"
-                :style="`transform: rotate(${dialLowLimitDeg}deg)`"
-            >
-                <rect
-                    v-if="isDialLowLimitLow"
-                    class="c-dial__low-limit__low"
-                    x="5"
-                    y="5"
-                    width="5"
-                    height="5"
-                />
-                <rect
-                    v-if="isDialLowLimitMid"
-                    class="c-dial__low-limit__mid"
-                    x="5"
-                    y="0"
-                    width="5"
-                    height="5"
-                />
-                <rect
-                    v-if="isDialLowLimitHigh"
-                    class="c-dial__low-limit__high"
-                    x="0"
-                    y="0"
-                    width="5"
-                    height="5"
-                />
-            </g>
-
-            <g
-                v-if="isDialHighLimit"
-                class="c-dial__limit-high"
-                :style="`transform: rotate(${dialHighLimitDeg}deg)`"
-            >
-                <rect
-                    v-if="isDialHighLimitLow"
-                    class="c-dial__high-limit__low"
-                    x="0"
-                    y="5"
-                    width="5"
-                    height="5"
-                />
-                <rect
-                    v-if="isDialHighLimitMid"
-                    class="c-dial__high-limit__mid"
-                    x="0"
-                    y="0"
-                    width="5"
-                    height="5"
-                />
-                <rect
-                    v-if="isDialHighLimitHigh"
-                    class="c-dial__high-limit__high"
-                    x="5"
-                    y="0"
-                    width="5"
-                    height="5"
-                />
-            </g>
-        </svg>
-
-        <svg
-            v-if="typeFilledDial"
-            class="c-dial__filled-value-wrapper"
-            viewBox="0 0 10 10"
-        >
-            <g
-                class="c-dial__filled-value"
-                :style="`transform: rotate(${degValueFilledDial}deg)`"
-            >
-                <rect
-                    v-if="isDialFilledValueLow"
-                    class="c-dial__filled-value__low"
-                    x="5"
-                    y="5"
-                    width="5"
-                    height="5"
-                />
-                <rect
-                    v-if="isDialFilledValueMid"
-                    class="c-dial__filled-value__mid"
-                    x="5"
-                    y="0"
-                    width="5"
-                    height="5"
-                />
-                <rect
-                    v-if="isDialFilledValueHigh"
-                    class="c-dial__filled-value__high"
-                    x="0"
-                    y="0"
-                    width="5"
-                    height="5"
-                />
-            </g>
-        </svg>
-
-        <svg
-            v-if="valueInBounds && typeNeedleDial"
-            class="c-dial__needle-value-wrapper"
-            viewBox="0 0 10 10"
-        >
-            <g
-                class="c-dial__needle-value"
-                :style="`transform: rotate(${degValue}deg)`"
-            >
-                <path d="M4.90234 9.39453L5.09766 9.39453L5.30146 8.20874C6.93993 8.05674 8.22265 6.67817 8.22266 5C8.22266 3.22018 6.77982 1.77734 5 1.77734C3.22018 1.77734 1.77734 3.22018 1.77734 5C1.77734 6.67817 3.06007 8.05674 4.69854 8.20874L4.90234 9.39453Z" />
-            </g>
         </svg>
     </template>
 
@@ -219,9 +248,22 @@
                 <div class="c-meter__range__low">{{ rangeLow }}</div>
             </div>
             <div class="c-meter__bg">
+                <div
+                    v-if="!valueInBounds && valueExpected"
+                    class="c-meter__value-oor-indicator"
+                ><svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 512 512"
+                    :preserveAspectRatio="meterOutOfRangeIndicatorAspectRatio"
+                ><path
+                    d="M448 0H64C28.7.1.1 28.7 0 64v384c.1 35.3 28.7 63.9 64 64h384c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM288 448h-64v-64h64v64zm10.9-192L280 352h-48l-18.9-96V64H299v192h-.1z"
+                /></svg></div>
+
                 <template v-if="typeMeterVertical">
                     <div
+                        v-if="valueExpected"
                         class="c-meter__value"
+                        :class="{'c-meter__value-needle' : typeNeedleMeter }"
                         :style="`transform: translateY(${meterValueToPerc}%)`"
                     ></div>
 
@@ -240,7 +282,9 @@
 
                 <template v-if="typeMeterHorizontal">
                     <div
+                        v-if="valueExpected"
                         class="c-meter__value"
+                        :class="{'c-meter__value-needle' : typeNeedleMeter }"
                         :style="`transform: translateX(${meterValueToPerc * -1}%)`"
                     ></div>
 
@@ -258,38 +302,42 @@
                 </template>
 
                 <svg
-                    class="c-meter__current-value-text-wrapper"
+                    class="c-gauge__current-value-text-wrapper"
-                    viewBox="0 0 512 512"
+                    :viewBox="curValViewBox"
+                    preserveAspectRatio="xMidYMid meet"
                 >
-                    <svg
+                    <rect
-                        v-if="displayCurVal"
+                        class="svg-viewbox-debug"
-                        class="c-meter__current-value-text-sizer"
+                        x="0"
-                        :viewBox="curValViewBox"
+                        y="0"
-                        preserveAspectRatio="xMidYMid meet"
+                        width="100%"
+                        height="100%"
+                    />
+                    <text
+                        class="c-meter__current-value-text js-gauge-current-value"
+                        font-size="4"
+                        lengthAdjust="spacing"
+                        text-anchor="middle"
+                        :dominant-baseline="meterTextBaseline"
+                        x="50%"
+                        y="50%"
                     >
-                        <text
+                        <template v-if="displayCurVal">
-                            class="c-dial__current-value-text js-meter-current-value"
-                            lengthAdjust="spacing"
-                            text-anchor="middle"
-                            style="transform: translate(50%, 70%)"
-                        >
                             <tspan>{{ curVal }}</tspan>
                             <tspan
                                 v-if="typeMeterHorizontal && displayUnits"
                                 class="c-gauge__units"
-                                font-size="10"
+                                font-size="80%"
                             >{{ units }}</tspan>
-                        </text>
+                            <tspan
-                        <text
+                                v-if="typeMeterVertical && displayUnits"
-                            v-if="typeMeterVertical && displayUnits"
+                                x="50%"
-                            dy="12"
+                                dy="3.5"
-                            class="c-gauge__units"
+                                class="c-gauge__units"
-                            font-size="10"
+                                font-size="80%"
-                            lengthAdjust="spacing"
+                            >{{ units }}</tspan>
-                            text-anchor="middle"
+                        </template>
-                            style="transform: translate(50%, 70%)"
+                    </text>
-                        >{{ units }}</text>
-                    </svg>
                 </svg>
             </div>
         </div>
@@ -343,14 +391,28 @@ export default {
         dialLowLimitDeg() {
             return this.percentToDegrees(this.valToPercent(this.limitLow));
         },
+        meterOutOfRangeIndicatorAspectRatio() {
+            return this.typeMeterVertical ? 'xMidYMax meet' : 'xMinYMid meet';
+        },
+        meterTextBaseline() {
+            return this.typeMeterVertical ? 'auto' : 'middle';
+        },
         curValViewBox() {
-            const DIGITS_RATIO = 10;
+            const DIGITS_RATIO = 3;
-            const VIEWBOX_STR = '0 0 X 15';
+            const VIEWBOX_STR = '0 0 X 10';
 
             return VIEWBOX_STR.replace('X', this.digits * DIGITS_RATIO);
         },
+        rangeFontSize() {
+            const CHAR_THRESHOLD = 3;
+            const START_PERC = 8.5;
+            const REDUCE_PERC = 0.8;
+            const RANGE_CHARS_MAX = Math.max(this.rangeLow.toString().length, this.rangeHigh.toString().length);
+
+            return this.fontSizeFromChars(RANGE_CHARS_MAX, CHAR_THRESHOLD, START_PERC, REDUCE_PERC);
+        },
         isDialLowLimit() {
-            return this.limitLow.length > 0 && this.dialLowLimitDeg < getLimitDegree('low', 'max');
+            return this.limitLow.toString().length > 0 && this.dialLowLimitDeg < getLimitDegree('low', 'max');
         },
         isDialLowLimitLow() {
             return this.dialLowLimitDeg >= getLimitDegree('low', 'q1');
@@ -362,7 +424,7 @@ export default {
             return this.dialLowLimitDeg >= getLimitDegree('low', 'q3');
         },
         isDialHighLimit() {
-            return this.limitHigh.length > 0 && this.dialHighLimitDeg < getLimitDegree('high', 'max');
+            return this.limitHigh.toString().length > 0 && this.dialHighLimitDeg < getLimitDegree('high', 'max');
         },
         isDialHighLimitLow() {
             return this.dialHighLimitDeg <= getLimitDegree('high', 'max');
@@ -383,10 +445,13 @@ export default {
             return this.degValue >= getLimitDegree('low', 'q3');
         },
         isMeterLimitHigh() {
-            return this.limitHigh.length > 0 && this.meterHighLimitPerc > 0;
+            return this.limitHigh.toString().length > 0 && this.meterHighLimitPerc > 0;
         },
         isMeterLimitLow() {
-            return this.limitLow.length > 0 && this.meterLowLimitPerc > 0;
+            return this.limitLow.toString().length > 0 && this.meterLowLimitPerc > 0;
+        },
+        gaugeTitle() {
+            return this.valueInBounds ? 'Gauge' : 'Value is currently out of range and cannot be graphically displayed';
         },
         typeDial() {
             return this.matchGaugeType('dial');
@@ -409,15 +474,25 @@ export default {
         typeMeterInverted() {
             return this.matchGaugeType('inverted');
         },
+        typeFilledMeter() {
+            return true; // Stubbing in for future capability
+        },
+        typeNeedleMeter() {
+            return false; // Stubbing in for future capability
+        },
         meterValueToPerc() {
             const meterDirection = (this.typeMeterInverted) ? -1 : 1;
 
-            if (this.curVal <= this.rangeLow) {
+            if (this.typeFilledMeter) {
-                return meterDirection * 100;
+                // Filled meter is a filled rectangle that is transformed along a vertical or horizontal axis
-            }
+                // So never move it below the low range more than 100%, or above the high range more than 0%
+                if (this.curVal <= this.rangeLow) {
+                    return meterDirection * 100;
+                }
 
-            if (this.curVal >= this.rangeHigh) {
+                if (this.curVal >= this.rangeHigh) {
-                return 0;
+                    return 0;
+                }
             }
 
             return this.valToPercentMeter(this.curVal) * meterDirection;
@@ -428,6 +503,13 @@ export default {
         meterLowLimitPerc() {
             return 100 - this.valToPercentMeter(this.limitLow);
         },
+        valueExpected() {
+            if (this.curVal === undefined || Object.is(this.curVal, 'null')) {
+                return false;
+            }
+
+            return this.curVal.toString().indexOf(DEFAULT_CURRENT_VALUE) === -1;
+        },
         valueInBounds() {
             return (this.curVal >= this.rangeLow && this.curVal <= this.rangeHigh);
         },
@@ -504,6 +586,11 @@ export default {
                 ]
             });
         },
+        fontSizeFromChars(charNum, charThreshold, startPerc, reducePerc) {
+            const fs = (charNum <= charThreshold) ? startPerc : (startPerc - ((charNum - charThreshold) * reducePerc));
+
+            return fs.toString() + "%";
+        },
         matchGaugeType(str) {
             return this.gaugeType.indexOf(str) !== -1;
         },

src/plugins/gauge/components/GaugeFormController.vue

@@ -40,7 +40,7 @@
             <div class="c-form__row">
                 <span class="req-indicator req">
                 </span>
-                <label>Range minimum value</label>
+                <label>Minimum value</label>
                 <input
                     ref="min"
                     v-model.number="min"
@@ -53,7 +53,7 @@
             <div class="c-form__row">
                 <span class="req-indicator">
                 </span>
-                <label>Range low limit</label>
+                <label>Low limit</label>
                 <input
                     ref="limitLow"
                     v-model.number="limitLow"
@@ -64,26 +64,26 @@
             </div>
 
             <div class="c-form__row">
-                <span class="req-indicator req">
+                <span class="req-indicator">
                 </span>
-                <label>Range maximum value</label>
+                <label>High limit</label>
                 <input
-                    ref="max"
+                    ref="limitHigh"
-                    v-model.number="max"
+                    v-model.number="limitHigh"
-                    data-field-name="max"
+                    data-field-name="limitHigh"
                     type="number"
                     @input="onChange"
                 >
             </div>
 
             <div class="c-form__row">
-                <span class="req-indicator">
+                <span class="req-indicator req">
                 </span>
-                <label>Range high limit</label>
+                <label>Maximum value</label>
                 <input
-                    ref="limitHigh"
+                    ref="max"
-                    v-model.number="limitHigh"
+                    v-model.number="max"
-                    data-field-name="limitHigh"
+                    data-field-name="max"
                     type="number"
                     @input="onChange"
                 >

src/plugins/gauge/gauge.scss

@@ -1,3 +1,8 @@
+$meterNeedlePerc: 1%;
+$meterNeedleMinPx: 4px;
+$meterNeedleMaxPx: 20px;
+$meterNeedleBorderRadius: 5px;
+
 .is-object-type-gauge {
   overflow: hidden;
 }
@@ -28,63 +33,64 @@
     @include abs();
     overflow: hidden;
   }
+
+  &__current-value-text-wrapper {
+    // SVG
+    position: absolute;
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.c-dial__value-oor-indicator,
+.c-meter__value-oor-indicator {
+  fill: $colorGaugeRange;
+  opacity: 0.5;
 }
 
 /********************************************** DIAL GAUGE */
-svg[class*='c-dial'] {
+.c-dial {
   max-height: 100%;
   max-width: 100%;
-  position: absolute;
 
-  g {
-    transform-origin: center;
-  }
-}
-
-.c-dial {
   &__bg {
-    background: $colorGaugeBg;
+    fill: $colorGaugeBg;
-    clip-path: url(#gaugeBgMask);
   }
-
+  &__limit-high rect {
-  &__limit-high rect { fill: $colorGaugeLimitHigh; }
+    fill: $colorGaugeLimitHigh;
-  &__limit-low rect { fill: $colorGaugeLimitLow; }
-
-  &__filled-value-wrapper {
-    clip-path: url(#gaugeValueMask);
   }
-
+  &__limit-low rect {
-  &__needle-value-wrapper {
+    fill: $colorGaugeLimitLow;
-    clip-path: url(#gaugeValueMask);
+  }
+  &__filled-value,
+  &__range-msg-text {
+    fill: $colorGaugeValue;
   }
-
-  &__filled-value { fill: $colorGaugeValue; }
-
   &__needle-value {
     fill: $colorGaugeValue;
-    transition: transform $transitionTimeGauge;
   }
-
+  &__current-value-text {
-  &__current-value-text,
-  &__units-text {
     fill: $colorGaugeTextValue;
     font-family: $heroFont;
   }
+
+  &__units-text,
+  &__range-text {
+    fill: $colorGaugeRange;
+  }
+
+  &__graphics g {
+    transform-origin: center;
+  }
 }
 
 /********************************************** METER GAUGE */
 .c-meter {
   // Common styles for c-meter
+  $meterOutOfRangeIndicatorMaxSize: 50%;
   @include abs();
   display: flex;
 
-  svg {
-    // current-value-text
-    position: absolute;
-    height: 100%;
-    width: 100%;
-  }
-
   &__range {
     display: flex;
     flex: 0 0 auto;
@@ -102,10 +108,42 @@ svg[class*='c-dial'] {
     // Filled area
     position: absolute;
     background: $colorGaugeValue;
-    transition: transform $transitionTimeGauge;
     z-index: 1;
   }
 
+  &__value-needle {
+    background: none !important;
+    &:before {
+      @include abs();
+      content: '';
+      display: block;
+      background: $colorGaugeValue;
+    }
+  }
+
+  &__value-oor-indicator {
+    $mxPx: 50px;
+    $wh: 50%;
+    position: absolute;
+    height: $wh;
+    width: $wh;
+    max-height: $mxPx;
+    max-width: $mxPx;
+
+    svg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      max-height: 100%;
+      max-width: 100%;
+    }
+  }
+
+  &__current-value-text {
+    fill: $colorGaugeTextValue;
+    font-family: $heroFont;
+  }
+
   .c-gauge__curval {
     fill: $colorGaugeMeterTextValue !important;
   }
@@ -142,10 +180,28 @@ svg[class*='c-dial'] {
       bottom: 0;
     }
 
+    &__value-needle {
+      right: 0;
+
+      &:before {
+        border-bottom-left-radius: $meterNeedleBorderRadius;
+        border-top-left-radius: $meterNeedleBorderRadius;
+        height: $meterNeedlePerc;
+        min-height: $meterNeedleMinPx;
+        max-height: $meterNeedleMaxPx;
+      }
+    }
+
     [class*='limit'] {
       left: 0;
       right: 0;
     }
+
+    .c-meter__value-oor-indicator {
+      bottom: 10%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
   }
 
   .c-gauge--meter-vertical & {
@@ -156,6 +212,13 @@ svg[class*='c-dial'] {
     &__limit-high {
       top: 0;
     }
+
+    &__value-needle {
+      &:before {
+        bottom: auto;
+        transform: translateY(-50%);
+      }
+    }
   }
 
   .c-gauge--meter-vertical-inverted & {
@@ -174,6 +237,13 @@ svg[class*='c-dial'] {
     &__range__high {
       order: 2;
     }
+
+    &__value-needle {
+      &:before {
+        top: auto;
+        transform: translateY(50%);
+      }
+    }
   }
 
   .c-gauge--meter-horizontal & {
@@ -207,6 +277,20 @@ svg[class*='c-dial'] {
       right: 0;
     }
 
+    &__value-needle {
+      top: 0;
+
+      &:before {
+        border-bottom-left-radius: $meterNeedleBorderRadius;
+        border-bottom-right-radius: $meterNeedleBorderRadius;
+        left: auto;
+        width: $meterNeedlePerc;
+        min-width: $meterNeedleMinPx;
+        max-width: $meterNeedleMaxPx;
+        transform: translateX(50%);
+      }
+    }
+
     [class*='limit'] {
       top: 0;
       bottom: 0;
@@ -219,5 +303,16 @@ svg[class*='c-dial'] {
     &__limit-high {
       right: 0;
     }
+
+    .c-meter__value-oor-indicator {
+      // Horizontal meter
+      left: 2%;
+      top: 50%;
+      transform: translateY(-50%);
+    }
   }
 }
+.svg-viewbox-debug {
+  fill: rgba(deeppink, 0.5);
+  display: none;
+}

src/plugins/imagery/components/FilterSettings.vue

@@ -14,6 +14,8 @@
                     type="range"
                     min="0"
                     max="500"
+                    draggable="true"
+                    @dragstart.stop.prevent
                     @change="notifyFiltersChanged"
                     @input="notifyFiltersChanged"
                 >
@@ -24,6 +26,8 @@
                     type="range"
                     min="0"
                     max="500"
+                    draggable="true"
+                    @dragstart.stop.prevent
                     @change="notifyFiltersChanged"
                     @input="notifyFiltersChanged"
                 >

src/plugins/imagery/components/ImageControls.vue

@@ -21,7 +21,11 @@
  *****************************************************************************/
 
 <template>
-<div class="h-local-controls h-local-controls--overlay-content h-local-controls--menus-aligned c-local-controls--show-on-hover">
+<div
+    class="h-local-controls h-local-controls--overlay-content h-local-controls--menus-aligned c-local-controls--show-on-hover"
+    role="toolbar"
+    aria-label="Image controls"
+>
     <imagery-view-menu-switcher
         :icon-class="'icon-brightness'"
         :title="'Brightness and contrast'"

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

@@ -210,9 +210,10 @@
         border-radius: $controlCr;
         display: flex;
         align-items: flex-start;
+        flex-direction: row;
         justify-content: space-between;
         padding: $interiorMargin;
-        width: min-content;
+        width: max-content;
 
         > * + * {
             margin-left: $interiorMargin;
@@ -338,7 +339,6 @@
     &__input {
         display: flex;
         align-items: center;
-        width: 100%;
 
         &:before {
             color: rgba($colorMenuFg, 0.5);
@@ -353,13 +353,16 @@
 
     &--filters {
         // Styles specific to the brightness and contrast controls
-
         .c-image-controls {
+            &__controls {
+                width: 80px; // About the minimum this element can be; cannot size based on % due to markup structure
+            }
+
             &__sliders {
                 display: flex;
                 flex: 1 1 auto;
                 flex-direction: column;
-                min-width: 80px;
+                width: 100%;
 
                 > * + * {
                     margin-top: 11px;

src/plugins/imagery/mixins/imageryData.js

@@ -30,7 +30,7 @@ export default {
         this.timeSystemChange = this.timeSystemChange.bind(this);
         this.setDataTimeContext = this.setDataTimeContext.bind(this);
         this.setDataTimeContext();
-        this.openmct.objectViews.on('clearData', this.clearData);
+        this.openmct.objectViews.on('clearData', this.dataCleared);
 
         // set
         this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
@@ -44,8 +44,11 @@ export default {
         this.timeKey = this.timeSystem.key;
         this.timeFormatter = this.getFormatter(this.timeKey);
 
-        // kickoff
+        this.telemetryCollection = this.openmct.telemetry.requestCollection(this.domainObject, {});
-        this.subscribe();
+        this.telemetryCollection.on('add', this.dataAdded);
+        this.telemetryCollection.on('remove', this.dataRemoved);
+        this.telemetryCollection.on('clear', this.dataCleared);
+        this.telemetryCollection.load();
     },
     beforeDestroy() {
         if (this.unsubscribe) {
@@ -54,9 +57,34 @@ export default {
         }
 
         this.stopFollowingDataTimeContext();
-        this.openmct.objectViews.off('clearData', this.clearData);
+        this.openmct.objectViews.off('clearData', this.dataCleared);
+
+        this.telemetryCollection.off('add', this.dataAdded);
+        this.telemetryCollection.off('remove', this.dataRemoved);
+        this.telemetryCollection.off('clear', this.dataCleared);
+
+        this.telemetryCollection.destroy();
     },
     methods: {
+        dataAdded(dataToAdd) {
+            const normalizedDataToAdd = dataToAdd.map(datum => this.normalizeDatum(datum));
+            this.imageHistory = this.imageHistory.concat(normalizedDataToAdd);
+        },
+        dataCleared() {
+            this.imageHistory = [];
+        },
+        dataRemoved(dataToRemove) {
+            this.imageHistory = this.imageHistory.filter(existingDatum => {
+                const shouldKeep = dataToRemove.some(datumToRemove => {
+                    const existingDatumTimestamp = this.parseTime(existingDatum);
+                    const datumToRemoveTimestamp = this.parseTime(datumToRemove);
+
+                    return (existingDatumTimestamp !== datumToRemoveTimestamp);
+                });
+
+                return shouldKeep;
+            });
+        },
         setDataTimeContext() {
             this.stopFollowingDataTimeContext();
             this.timeContext = this.openmct.time.getContextForView(this.objectPath);
@@ -70,19 +98,6 @@ export default {
                 this.timeContext.off('timeSystem', this.timeSystemChange);
             }
         },
-        isDatumValid(datum) {
-            //TODO: Add a check to see if there are duplicate images (identical image timestamp and url subsequently)
-            if (!datum) {
-                return false;
-            }
-
-            const datumTimeCheck = this.parseTime(datum);
-            const bounds = this.timeContext.bounds();
-
-            const isOutOfBounds = datumTimeCheck < bounds.start || datumTimeCheck > bounds.end;
-
-            return !isOutOfBounds;
-        },
         formatImageUrl(datum) {
             if (!datum) {
                 return;
@@ -124,40 +139,6 @@ export default {
             // forcibly reset the imageContainer size to prevent an aspect ratio distortion
             delete this.imageContainerWidth;
             delete this.imageContainerHeight;
-
-            return this.requestHistory();
-        },
-        async requestHistory() {
-            this.requestCount++;
-            const requestId = this.requestCount;
-            const bounds = this.timeContext.bounds();
-
-            const data = await this.openmct.telemetry
-                .request(this.domainObject, bounds) || [];
-            // wait until new request resolves to do comparison
-            if (this.requestCount !== requestId) {
-                return this.imageHistory = [];
-            }
-
-            const imagery = data.filter(this.isDatumValid).map(this.normalizeDatum);
-            this.imageHistory = imagery;
-        },
-        clearData(domainObjectToClear) {
-            // global clearData button is accepted therefore no truthy check on inputted param
-            const clearDataForObjectSelected = Boolean(domainObjectToClear);
-            if (clearDataForObjectSelected) {
-                const idsEqual = this.openmct.objects.areIdsEqual(
-                    domainObjectToClear.identifier,
-                    this.domainObject.identifier
-                );
-                if (!idsEqual) {
-                    return;
-                }
-            }
-
-            // splice array to encourage garbage collection
-            this.imageHistory.splice(0, this.imageHistory.length);
-
         },
         timeSystemChange() {
             this.timeSystem = this.timeContext.timeSystem();
@@ -165,22 +146,7 @@ export default {
             this.timeFormatter = this.getFormatter(this.timeKey);
             this.durationFormatter = this.getFormatter(this.timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
         },
-        subscribe() {
-            this.unsubscribe = this.openmct.telemetry
-                .subscribe(this.domainObject, (datum) => {
-                    let parsedTimestamp = this.parseTime(datum);
-                    let bounds = this.timeContext.bounds();
-                    if (!(parsedTimestamp >= bounds.start && parsedTimestamp <= bounds.end)) {
-                        return;
-                    }
-
-                    if (this.isDatumValid(datum)) {
-                        this.imageHistory.push(this.normalizeDatum(datum));
-                    }
-                });
-        },
         normalizeDatum(datum) {
-
             const formattedTime = this.formatTime(datum);
             const url = this.formatImageUrl(datum);
             const time = this.parseTime(formattedTime);

src/plugins/imagery/pluginSpec.js

@@ -88,6 +88,7 @@ describe("The Imagery View Layouts", () => {
     let openmct;
     let parent;
     let child;
+    let historicalProvider;
     let imageTelemetry = generateTelemetry(START - TEN_MINUTES, COUNT);
     let imageryObject = {
         identifier: {
@@ -122,50 +123,6 @@ describe("The Imagery View Layouts", () => {
                         "priority": 3
                     },
                     "source": "url"
-                    // "relatedTelemetry": {
-                    //     "heading": {
-                    //         "comparisonFunction": comparisonFunction,
-                    //         "historical": {
-                    //             "telemetryObjectId": "heading",
-                    //             "valueKey": "value"
-                    //         }
-                    //     },
-                    //     "roll": {
-                    //         "comparisonFunction": comparisonFunction,
-                    //         "historical": {
-                    //             "telemetryObjectId": "roll",
-                    //             "valueKey": "value"
-                    //         }
-                    //     },
-                    //     "pitch": {
-                    //         "comparisonFunction": comparisonFunction,
-                    //         "historical": {
-                    //             "telemetryObjectId": "pitch",
-                    //             "valueKey": "value"
-                    //         }
-                    //     },
-                    //     "cameraPan": {
-                    //         "comparisonFunction": comparisonFunction,
-                    //         "historical": {
-                    //             "telemetryObjectId": "cameraPan",
-                    //             "valueKey": "value"
-                    //         }
-                    //     },
-                    //     "cameraTilt": {
-                    //         "comparisonFunction": comparisonFunction,
-                    //         "historical": {
-                    //             "telemetryObjectId": "cameraTilt",
-                    //             "valueKey": "value"
-                    //         }
-                    //     },
-                    //     "sunOrientation": {
-                    //         "comparisonFunction": comparisonFunction,
-                    //         "historical": {
-                    //             "telemetryObjectId": "sunOrientation",
-                    //             "valueKey": "value"
-                    //         }
-                    //     }
-                    // }
                 },
                 {
                     "name": "Name",
@@ -209,6 +166,13 @@ describe("The Imagery View Layouts", () => {
             telemetryPromiseResolve = resolve;
         });
 
+        historicalProvider = {
+            request: () => {
+                return Promise.resolve(imageTelemetry);
+            }
+        };
+        spyOn(openmct.telemetry, 'findRequestProvider').and.returnValue(historicalProvider);
+
         spyOn(openmct.telemetry, 'request').and.callFake(() => {
             telemetryPromiseResolve(imageTelemetry);
 
@@ -409,39 +373,30 @@ describe("The Imagery View Layouts", () => {
             return Vue.nextTick();
         });
 
-        it("on mount should show the the most recent image", () => {
+        it("on mount should show the the most recent image", async () => {
             //Looks like we need Vue.nextTick here so that computed properties settle down
-            return Vue.nextTick(() => {
+            await Vue.nextTick();
-                const imageInfo = getImageInfo(parent);
+            const imageInfo = getImageInfo(parent);
-
+            expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 1].timeId)).not.toEqual(-1);
-                expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 1].timeId)).not.toEqual(-1);
-            });
         });
 
-        it("on mount should show the any image layers", (done) => {
+        it("on mount should show the any image layers", async () => {
             //Looks like we need Vue.nextTick here so that computed properties settle down
-            Vue.nextTick().then(() => {
+            await Vue.nextTick();
-                Vue.nextTick(() => {
+            const layerEls = parent.querySelectorAll('.js-layer-image');
-                    const layerEls = parent.querySelectorAll('.js-layer-image');
+            console.log(layerEls);
-                    console.log(layerEls);
+            expect(layerEls.length).toEqual(1);
-                    expect(layerEls.length).toEqual(1);
-                    done();
-                });
-            });
         });
 
-        it("should show the clicked thumbnail as the main image", (done) => {
+        it("should show the clicked thumbnail as the main image", async () => {
             //Looks like we need Vue.nextTick here so that computed properties settle down
-            Vue.nextTick(() => {
+            await Vue.nextTick();
-                const target = imageTelemetry[5].url;
+            const target = imageTelemetry[5].url;
-                parent.querySelectorAll(`img[src='${target}']`)[0].click();
+            parent.querySelectorAll(`img[src='${target}']`)[0].click();
-                Vue.nextTick(() => {
+            await Vue.nextTick();
-                    const imageInfo = getImageInfo(parent);
+            const imageInfo = getImageInfo(parent);
 
-                    expect(imageInfo.url.indexOf(imageTelemetry[5].timeId)).not.toEqual(-1);
+            expect(imageInfo.url.indexOf(imageTelemetry[5].timeId)).not.toEqual(-1);
-                    done();
-                });
-            });
         });
 
         xit("should show that an image is new", (done) => {
@@ -460,71 +415,60 @@ describe("The Imagery View Layouts", () => {
             });
         });
 
-        it("should show that an image is not new", (done) => {
+        it("should show that an image is not new", async () => {
-            Vue.nextTick(() => {
+            await Vue.nextTick();
-                const target = imageTelemetry[4].url;
+            const target = imageTelemetry[4].url;
-                parent.querySelectorAll(`img[src='${target}']`)[0].click();
+            parent.querySelectorAll(`img[src='${target}']`)[0].click();
 
-                Vue.nextTick(() => {
+            await Vue.nextTick();
-                    const imageIsNew = isNew(parent);
+            const imageIsNew = isNew(parent);
 
-                    expect(imageIsNew).toBeFalse();
+            expect(imageIsNew).toBeFalse();
-                    done();
-                });
-            });
         });
 
-        it("should navigate via arrow keys", (done) => {
+        it("should navigate via arrow keys", async () => {
-            Vue.nextTick(() => {
+            await Vue.nextTick();
-                let keyOpts = {
+            const keyOpts = {
-                    element: parent.querySelector('.c-imagery'),
+                element: parent.querySelector('.c-imagery'),
-                    key: 'ArrowLeft',
+                key: 'ArrowLeft',
-                    keyCode: 37,
+                keyCode: 37,
-                    type: 'keyup'
+                type: 'keyup'
-                };
+            };
 
-                simulateKeyEvent(keyOpts);
+            simulateKeyEvent(keyOpts);
 
-                Vue.nextTick(() => {
+            await Vue.nextTick();
-                    const imageInfo = getImageInfo(parent);
+            const imageInfo = getImageInfo(parent);
-
+            expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 2].timeId)).not.toEqual(-1);
-                    expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 2].timeId)).not.toEqual(-1);
-                    done();
-                });
-            });
         });
 
-        it("should navigate via numerous arrow keys", (done) => {
+        it("should navigate via numerous arrow keys", async () => {
-            Vue.nextTick(() => {
+            await Vue.nextTick();
-                let element = parent.querySelector('.c-imagery');
+            const element = parent.querySelector('.c-imagery');
-                let type = 'keyup';
+            const type = 'keyup';
-                let leftKeyOpts = {
+            const leftKeyOpts = {
-                    element,
+                element,
-                    type,
+                type,
-                    key: 'ArrowLeft',
+                key: 'ArrowLeft',
-                    keyCode: 37
+                keyCode: 37
-                };
+            };
-                let rightKeyOpts = {
+            const rightKeyOpts = {
-                    element,
+                element,
-                    type,
+                type,
-                    key: 'ArrowRight',
+                key: 'ArrowRight',
-                    keyCode: 39
+                keyCode: 39
-                };
+            };
 
-                // left thrice
+            // left thrice
-                simulateKeyEvent(leftKeyOpts);
+            simulateKeyEvent(leftKeyOpts);
-                simulateKeyEvent(leftKeyOpts);
+            simulateKeyEvent(leftKeyOpts);
-                simulateKeyEvent(leftKeyOpts);
+            simulateKeyEvent(leftKeyOpts);
-                // right once
+            // right once
-                simulateKeyEvent(rightKeyOpts);
+            simulateKeyEvent(rightKeyOpts);
 
-                Vue.nextTick(() => {
+            await Vue.nextTick();
-                    const imageInfo = getImageInfo(parent);
+            const imageInfo = getImageInfo(parent);
-
+            expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 3].timeId)).not.toEqual(-1);
-                    expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 3].timeId)).not.toEqual(-1);
-                    done();
-                });
-            });
         });
         it ('shows an auto scroll button when scroll to left', (done) => {
             Vue.nextTick(() => {
@@ -584,6 +528,34 @@ describe("The Imagery View Layouts", () => {
             expect(imageSizeAfter.width).toBeLessThan(imageSizeBefore.width);
             done();
         });
+
+        it('should reset the brightness and contrast when clicking the reset button', async () => {
+            const viewInstance = imageryView._getInstance();
+            await Vue.nextTick();
+
+            // Save the original brightness and contrast values
+            const origBrightness = viewInstance.$refs.ImageryContainer.filters.brightness;
+            const origContrast = viewInstance.$refs.ImageryContainer.filters.contrast;
+
+            // Change them to something else (default: 100)
+            viewInstance.$refs.ImageryContainer.setFilters({
+                brightness: 200,
+                contrast: 200
+            });
+            await Vue.nextTick();
+
+            // Verify that the values actually changed
+            expect(viewInstance.$refs.ImageryContainer.filters.brightness).toBe(200);
+            expect(viewInstance.$refs.ImageryContainer.filters.contrast).toBe(200);
+
+            // Click the reset button
+            parent.querySelector('.t-btn-reset').click();
+            await Vue.nextTick();
+
+            // Verify that the values were reset
+            expect(viewInstance.$refs.ImageryContainer.filters.brightness).toBe(origBrightness);
+            expect(viewInstance.$refs.ImageryContainer.filters.contrast).toBe(origContrast);
+        });
     });
 
     describe("imagery time strip view", () => {
@@ -598,6 +570,20 @@ describe("The Imagery View Layouts", () => {
                 end: START + (5 * ONE_MINUTE)
             });
 
+            const mockClock = jasmine.createSpyObj("clock", [
+                "on",
+                "off",
+                "currentValue"
+            ]);
+            mockClock.key = 'mockClock';
+            mockClock.currentValue.and.returnValue(1);
+
+            openmct.time.addClock(mockClock);
+            openmct.time.clock('mockClock', {
+                start: START - (5 * ONE_MINUTE),
+                end: START + (5 * ONE_MINUTE)
+            });
+
             openmct.router.path = [{
                 identifier: {
                     key: 'test-timestrip',
@@ -632,7 +618,7 @@ describe("The Imagery View Layouts", () => {
         it("on mount should show imagery within the given bounds", (done) => {
             Vue.nextTick(() => {
                 const imageElements = parent.querySelectorAll('.c-imagery-tsv__image-wrapper');
-                expect(imageElements.length).toEqual(6);
+                expect(imageElements.length).toEqual(5);
                 done();
             });
         });
@@ -652,5 +638,46 @@ describe("The Imagery View Layouts", () => {
                 });
             });
         });
+
+        it("should remove images when clock advances", async () => {
+            openmct.time.tick(ONE_MINUTE * 2);
+            await Vue.nextTick();
+            await Vue.nextTick();
+            const imageElements = parent.querySelectorAll('.c-imagery-tsv__image-wrapper');
+            expect(imageElements.length).toEqual(4);
+        });
+
+        it("should remove images when start bounds shorten", async () => {
+            openmct.time.timeSystem('utc', {
+                start: START,
+                end: START + (5 * ONE_MINUTE)
+            });
+            await Vue.nextTick();
+            await Vue.nextTick();
+            const imageElements = parent.querySelectorAll('.c-imagery-tsv__image-wrapper');
+            expect(imageElements.length).toEqual(1);
+        });
+
+        it("should remove images when end bounds shorten", async () => {
+            openmct.time.timeSystem('utc', {
+                start: START - (5 * ONE_MINUTE),
+                end: START - (2 * ONE_MINUTE)
+            });
+            await Vue.nextTick();
+            await Vue.nextTick();
+            const imageElements = parent.querySelectorAll('.c-imagery-tsv__image-wrapper');
+            expect(imageElements.length).toEqual(4);
+        });
+
+        it("should remove images when both bounds shorten", async () => {
+            openmct.time.timeSystem('utc', {
+                start: START - (2 * ONE_MINUTE),
+                end: START + (2 * ONE_MINUTE)
+            });
+            await Vue.nextTick();
+            await Vue.nextTick();
+            const imageElements = parent.querySelectorAll('.c-imagery-tsv__image-wrapper');
+            expect(imageElements.length).toEqual(3);
+        });
     });
 });

src/plugins/importFromJSONAction/ImportFromJSONAction.js

@@ -82,12 +82,14 @@ export default class ImportAsJSONAction {
      * @param {object} seen
      */
     _deepInstantiate(parent, tree, seen) {
-        if (this.openmct.composition.get(parent)) {
+        let objectIdentifiers = this._getObjectReferenceIds(parent);
+
+        if (objectIdentifiers.length) {
             let newObj;
 
             seen.push(parent.id);
 
-            parent.composition.forEach(async (childId) => {
+            objectIdentifiers.forEach(async (childId) => {
                 const keystring = this.openmct.objects.makeKeyString(childId);
                 if (!tree[keystring] || seen.includes(keystring)) {
                     return;
@@ -101,6 +103,27 @@ export default class ImportAsJSONAction {
             }, this);
         }
     }
+    /**
+     * @private
+     * @param {object} parent
+     * @returns [identifiers]
+     */
+    _getObjectReferenceIds(parent) {
+        let objectIdentifiers = [];
+
+        let parentComposition = this.openmct.composition.get(parent);
+        if (parentComposition) {
+            objectIdentifiers = Array.from(parentComposition.domainObject.composition);
+        }
+
+        //conditional object styles are not saved on the composition, so we need to check for them
+        let parentObjectReference = parent.configuration?.objectStyles?.conditionSetIdentifier;
+        if (parentObjectReference) {
+            objectIdentifiers.push(parentObjectReference);
+        }
+
+        return objectIdentifiers;
+    }
     /**
      * @private
      * @param {object} tree

src/plugins/notebook/components/Notebook.vue

@@ -144,6 +144,7 @@
                 v-if="selectedSection && selectedPage"
                 ref="notebookEntries"
                 class="c-notebook__entries"
+                aria-label="Notebook Entries"
             >
                 <NotebookEntry
                     v-for="entry in filteredAndSortedEntries"

src/plugins/notebook/components/NotebookEntry.vue

@@ -23,6 +23,7 @@
 <template>
 <div
     class="c-notebook__entry c-ne has-local-controls has-tag-applier"
+    aria-label="Notebook Entry"
     :class="{ 'locked': isLocked }"
     @dragover="changeCursor"
     @drop.capture="cancelEditMode"
@@ -58,6 +59,7 @@
                 <div
                     :id="entry.id"
                     class="c-ne__text c-ne__input"
+                    aria-label="Notebook Entry Input"
                     tabindex="0"
                     contenteditable="true"
                     @focus="editingEntry()"

src/plugins/operatorStatus/operator-status.scss

@@ -80,7 +80,7 @@
     &__content {
         $m: $interiorMargin;
         display: grid;
-        grid-template-columns: min-content 1fr;
+        grid-template-columns: max-content 1fr;
         grid-column-gap: $m;
         grid-row-gap: $m;
 

src/plugins/operatorStatus/operatorStatus/OperatorStatus.vue

@@ -57,6 +57,7 @@
 </template>
 
 <script>
+const DEFAULT_POLL_QUESTION = 'NO POLL QUESTION';
 
 export default {
     inject: ['openmct', 'indicator', 'configuration'],
@@ -75,7 +76,7 @@ export default {
             allRoles: [],
             role: '--',
             pollQuestionUpdated: '--',
-            currentPollQuestion: '--',
+            currentPollQuestion: DEFAULT_POLL_QUESTION,
             selectedStatus: undefined,
             allStatuses: []
         };

src/plugins/operatorStatus/pollQuestion/PollQuestion.vue

@@ -34,7 +34,7 @@
 
     <div class="c-status-poll__section c-status-poll-panel__content c-spq">
         <!-- Grid layout -->
-        <div class="c-spq__label">Current:</div>
+        <div class="c-spq__label">Current poll:</div>
         <div class="c-spq__value c-status-poll-panel__poll-question">{{ currentPollQuestion }}</div>
 
         <template v-if="statusCountViewModel.length > 0">
@@ -43,6 +43,7 @@
                 <div
                     v-for="entry in statusCountViewModel"
                     :key="entry.status.key"
+                    :title="entry.status.label"
                     class="c-status-poll-report__count"
                     :style="[{
                         background: entry.status.statusBgColor,
@@ -69,6 +70,7 @@
             >
             <button
                 class="c-button"
+                title="Publish a new poll question and reset previous responses"
                 @click="updatePollQuestion"
             >Update</button>
         </div>
@@ -78,6 +80,7 @@
 </template>
 
 <script>
+import _ from 'lodash';
 
 export default {
     inject: ['openmct', 'indicator', 'configuration'],
@@ -118,6 +121,9 @@ export default {
         this.openmct.user.status.off('statusChange', this.fetchStatusSummary);
         this.openmct.user.status.off('pollQuestionChange', this.setPollQuestion);
     },
+    created() {
+        this.fetchStatusSummary = _.debounce(this.fetchStatusSummary);
+    },
     methods: {
         async fetchCurrentPoll() {
             const pollQuestion = await this.openmct.user.status.getPollQuestion();

src/plugins/persistence/couch/CouchChangesFeed.js

@@ -93,8 +93,7 @@
             message.state = 'close';
             break;
         default:
-            // Assume connection is closed
+            message.state = 'unknown';
-            message.state = 'close';
             console.error('🚨 Received unexpected readyState value from CouchDB EventSource feed: 🚨', readyState);
             break;
         }

src/plugins/persistence/couch/CouchDocument.js

@@ -45,8 +45,7 @@ export default function CouchDocument(id, model, rev, markDeleted) {
             "category": "domain object",
             "type": model.type,
             "owner": "admin",
-            "name": model.name,
+            "name": model.name
-            "created": Date.now()
         },
         "model": model
     };

src/plugins/persistence/couch/CouchObjectProvider.js

@@ -22,7 +22,7 @@
 
 import CouchDocument from "./CouchDocument";
 import CouchObjectQueue from "./CouchObjectQueue";
-import { PENDING, CONNECTED, DISCONNECTED } from "./CouchStatusIndicator";
+import { PENDING, CONNECTED, DISCONNECTED, UNKNOWN } from "./CouchStatusIndicator";
 import { isNotebookType } from '../../notebook/notebook-constants.js';
 
 const REV = "_rev";
@@ -112,7 +112,7 @@ class CouchObjectProvider {
      * Takes in a state message from the CouchDB SharedWorker and returns an IndicatorState.
      * @private
      * @param {'open'|'close'|'pending'} message
-     * @returns import('./CouchStatusIndicator').IndicatorState
+     * @returns {import('./CouchStatusIndicator').IndicatorState}
      */
     #messageToIndicatorState(message) {
         let state;
@@ -126,14 +126,52 @@ class CouchObjectProvider {
         case 'pending':
             state = PENDING;
             break;
-        default:
+        case 'unknown':
-            state = PENDING;
+            state = UNKNOWN;
             break;
         }
 
         return state;
     }
 
+    /**
+     * Takes an HTTP status code and returns an IndicatorState
+     * @private
+     * @param {number} statusCode
+     * @returns {import("./CouchStatusIndicator").IndicatorState}
+     */
+    #statusCodeToIndicatorState(statusCode) {
+        let state;
+        switch (statusCode) {
+        case CouchObjectProvider.HTTP_OK:
+        case CouchObjectProvider.HTTP_CREATED:
+        case CouchObjectProvider.HTTP_ACCEPTED:
+        case CouchObjectProvider.HTTP_NOT_MODIFIED:
+        case CouchObjectProvider.HTTP_BAD_REQUEST:
+        case CouchObjectProvider.HTTP_UNAUTHORIZED:
+        case CouchObjectProvider.HTTP_FORBIDDEN:
+        case CouchObjectProvider.HTTP_NOT_FOUND:
+        case CouchObjectProvider.HTTP_METHOD_NOT_ALLOWED:
+        case CouchObjectProvider.HTTP_NOT_ACCEPTABLE:
+        case CouchObjectProvider.HTTP_CONFLICT:
+        case CouchObjectProvider.HTTP_PRECONDITION_FAILED:
+        case CouchObjectProvider.HTTP_REQUEST_ENTITY_TOO_LARGE:
+        case CouchObjectProvider.HTTP_UNSUPPORTED_MEDIA_TYPE:
+        case CouchObjectProvider.HTTP_REQUESTED_RANGE_NOT_SATISFIABLE:
+        case CouchObjectProvider.HTTP_EXPECTATION_FAILED:
+        case CouchObjectProvider.HTTP_SERVER_ERROR:
+            state = CONNECTED;
+            break;
+        case CouchObjectProvider.HTTP_SERVICE_UNAVAILABLE:
+            state = DISCONNECTED;
+            break;
+        default:
+            state = UNKNOWN;
+        }
+
+        return state;
+    }
+
     //backwards compatibility, options used to be a url. Now it's an object
     #normalize(options) {
         if (typeof options === 'string') {
@@ -161,30 +199,47 @@ class CouchObjectProvider {
         }
 
         let response = null;
+
+        if (!this.isObservingObjectChanges()) {
+            this.#observeObjectChanges();
+        }
+
         try {
             response = await fetch(this.url + '/' + subPath, fetchOptions);
-            this.indicator.setIndicatorToState(CONNECTED);
+            const { status } = response;
+            const json = await response.json();
+            this.#handleResponseCode(status, json, fetchOptions);
 
-            if (response.status === CouchObjectProvider.HTTP_CONFLICT) {
+            return json;
-                throw new this.openmct.objects.errors.Conflict(`Conflict persisting ${fetchOptions.body.name}`);
-            } else if (response.status === CouchObjectProvider.HTTP_BAD_REQUEST
-                || response.status === CouchObjectProvider.HTTP_UNAUTHORIZED
-                || response.status === CouchObjectProvider.HTTP_NOT_FOUND
-                || response.status === CouchObjectProvider.HTTP_PRECONDITION_FAILED) {
-                const error = await response.json();
-                throw new Error(`CouchDB Error: "${error.error}: ${error.reason}"`);
-            } else if (response.status === CouchObjectProvider.HTTP_SERVER_ERROR) {
-                throw new Error('CouchDB Error: "500 Internal Server Error"');
-            }
-
-            return await response.json();
         } catch (error) {
             // Network error, CouchDB unreachable.
             if (response === null) {
                 this.indicator.setIndicatorToState(DISCONNECTED);
+                console.error(error.message);
+                throw new Error(`CouchDB Error - No response"`);
+            } else {
+                console.error(error.message);
+
+                throw error;
+            }
+        }
+    }
+
+    /**
+     * Handle the response code from a CouchDB request.
+     * Sets the CouchDB indicator status and throws an error if needed.
+     * @private
+     */
+    #handleResponseCode(status, json, fetchOptions) {
+        this.indicator.setIndicatorToState(this.#statusCodeToIndicatorState(status));
+        if (status === CouchObjectProvider.HTTP_CONFLICT) {
+            throw new this.openmct.objects.errors.Conflict(`Conflict persisting ${fetchOptions.body.name}`);
+        } else if (status >= CouchObjectProvider.HTTP_BAD_REQUEST) {
+            if (!json.error || !json.reason) {
+                throw new Error(`CouchDB Error ${status}`);
             }
 
-            console.error(error.message);
+            throw new Error(`CouchDB Error ${status}: "${json.error} - ${json.reason}"`);
         }
     }
 
@@ -328,6 +383,8 @@ class CouchObjectProvider {
         return this.request(ALL_DOCS, 'POST', query, signal).then((response) => {
             if (response && response.rows !== undefined) {
                 return response.rows.reduce((map, row) => {
+                    //row.doc === null if the document does not exist.
+                    //row.doc === undefined if the document is not found.
                     if (row.doc !== undefined) {
                         map[row.key] = this.#getModel(row.doc);
                     }
@@ -425,9 +482,6 @@ class CouchObjectProvider {
                 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.isObservingObjectChanges()) {
-                        this.stopObservingObjectChanges();
-                    }
                 }
             }
         };
@@ -452,7 +506,6 @@ class CouchObjectProvider {
         } else {
             this.#initiateSharedWorkerFetchChanges(sseURL.toString());
         }
-
     }
 
     /**
@@ -479,18 +532,24 @@ class CouchObjectProvider {
 
     onEventError(error) {
         console.error('Error on feed', error);
-        if (Object.keys(this.observers).length > 0) {
+        const { readyState } = error.target;
-            this.#observeObjectChanges();
+        this.#updateIndicatorStatus(readyState);
-        }
+    }
+
+    onEventOpen(event) {
+        const { readyState } = event.target;
+        this.#updateIndicatorStatus(readyState);
     }
 
     onEventMessage(event) {
+        const { readyState } = event.target;
         const eventData = JSON.parse(event.data);
         const identifier = {
             namespace: this.namespace,
             key: eventData.id
         };
         const keyString = this.openmct.objects.makeKeyString(identifier);
+        this.#updateIndicatorStatus(readyState);
         let observersForObject = this.observers[keyString];
 
         if (observersForObject) {
@@ -513,17 +572,18 @@ class CouchObjectProvider {
 
         this.stopObservingObjectChanges = () => {
             controller.abort();
-            couchEventSource.removeEventListener('message', this.onEventMessage);
+            couchEventSource.removeEventListener('message', this.onEventMessage.bind(this));
             delete this.stopObservingObjectChanges;
         };
 
         console.debug('⇿ Opening CouchDB change feed connection ⇿');
 
         couchEventSource = new EventSource(url);
-        couchEventSource.onerror = this.onEventError;
+        couchEventSource.onerror = this.onEventError.bind(this);
+        couchEventSource.onopen = this.onEventOpen.bind(this);
 
         // start listening for events
-        couchEventSource.addEventListener('message', this.onEventMessage);
+        couchEventSource.addEventListener('message', this.onEventMessage.bind(this));
 
         console.debug('⇿ Opened connection ⇿');
     }
@@ -541,6 +601,31 @@ class CouchObjectProvider {
         return intermediateResponse;
     }
 
+    /**
+     * Update the indicator status based on the readyState of the EventSource
+     * @private
+     */
+    #updateIndicatorStatus(readyState) {
+        let message;
+        switch (readyState) {
+        case EventSource.CONNECTING:
+            message = 'pending';
+            break;
+        case EventSource.OPEN:
+            message = 'open';
+            break;
+        case EventSource.CLOSED:
+            message = 'close';
+            break;
+        default:
+            message = 'unknown';
+            break;
+        }
+
+        const indicatorState = this.#messageToIndicatorState(message);
+        this.indicator.setIndicatorToState(indicatorState);
+    }
+
     /**
      * @private
      */
@@ -568,8 +653,8 @@ class CouchObjectProvider {
             this.objectQueue[key].pending = true;
             const queued = this.objectQueue[key].dequeue();
             let document = new CouchDocument(key, queued.model);
+            document.metadata.created = Date.now();
             this.request(key, "PUT", document).then((response) => {
-                console.log('create check response', key);
                 this.#checkResponse(response, queued.intermediateResponse, key);
             }).catch(error => {
                 queued.intermediateResponse.reject(error);
@@ -627,11 +712,25 @@ class CouchObjectProvider {
     }
 }
 
+// https://docs.couchdb.org/en/3.2.0/api/basics.html
+CouchObjectProvider.HTTP_OK = 200;
+CouchObjectProvider.HTTP_CREATED = 201;
+CouchObjectProvider.HTTP_ACCEPTED = 202;
+CouchObjectProvider.HTTP_NOT_MODIFIED = 304;
 CouchObjectProvider.HTTP_BAD_REQUEST = 400;
 CouchObjectProvider.HTTP_UNAUTHORIZED = 401;
+CouchObjectProvider.HTTP_FORBIDDEN = 403;
 CouchObjectProvider.HTTP_NOT_FOUND = 404;
+CouchObjectProvider.HTTP_METHOD_NOT_ALLOWED = 404;
+CouchObjectProvider.HTTP_NOT_ACCEPTABLE = 406;
 CouchObjectProvider.HTTP_CONFLICT = 409;
 CouchObjectProvider.HTTP_PRECONDITION_FAILED = 412;
+CouchObjectProvider.HTTP_REQUEST_ENTITY_TOO_LARGE = 413;
+CouchObjectProvider.HTTP_UNSUPPORTED_MEDIA_TYPE = 415;
+CouchObjectProvider.HTTP_REQUESTED_RANGE_NOT_SATISFIABLE = 416;
+CouchObjectProvider.HTTP_EXPECTATION_FAILED = 417;
 CouchObjectProvider.HTTP_SERVER_ERROR = 500;
+// If CouchDB is containerized via Docker it will return 503 if service is unavailable.
+CouchObjectProvider.HTTP_SERVICE_UNAVAILABLE = 503;
 
 export default CouchObjectProvider;