Timelist views support fixed time - 5629 (#5726)

* Initialize full view for fixed time

* Clean up

* Add back in ticker after merge

* Check for undefined clock instead of timestamp

* Cleanup

* Initialize full view for fixed time

* Clean up

* Add back in ticker after merge

* Check for undefined clock instead of timestamp

* Cleanup

* Update timestamp method and remove from beforeDestroy

* Shorten ternary to optional chaining

* Cleanup unused var

* Moved duplicated logic to method

* Reorder methods

* Update Timelist.vue

Set timestamp to clock start when in fixed time

* Added blank line

* Lint fix

* Update pluginSpec.js

* Invoke currentValue method properly

.circleci/config.yml

@@ -2,10 +2,11 @@ version: 2.1
 executors:
   pw-focal-development:
     docker:
-      - image: mcr.microsoft.com/playwright:v1.23.0-focal
+      - image: mcr.microsoft.com/playwright:v1.25.0-focal
     environment:
       NODE_ENV: development # Needed to ensure 'dist' folder created and devDependencies installed
       PERCY_POSTINSTALL_BROWSER: 'true' # Needed to store the percy browser in cache deps
+      PERCY_LOGLEVEL: 'debug' # Enable DEBUG level logging for Percy (Issue: https://github.com/nasa/openmct/issues/5742)
 parameters:
   BUST_CACHE:
     description: "Set this with the CircleCI UI Trigger Workflow button (boolean = true) to bust the cache!"

.github/workflows/e2e-couchdb.yml

@@ -23,7 +23,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: '16'
-      - run: npx playwright@1.23.0 install
+      - run: npx playwright@1.25.0 install
       - run: npm install
       - run: sh src/plugins/persistence/couch/replace-localstorage-with-couchdb-indexhtml.sh
       - run: npm run test:e2e:couchdb

.github/workflows/e2e-pr.yml

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

e2e/appActions.js

@@ -45,6 +45,8 @@
  * @property {string} url the relative url to the object (for use with `page.goto()`)
  */
 
+const Buffer = require('buffer').Buffer;
+
 /**
  * This common function creates a domain object with the default options. It is the preferred way of creating objects
  * in the e2e suite when uninterested in properties of the objects themselves.
@@ -100,6 +102,59 @@ async function createDomainObjectWithDefaults(page, { type, name, parent = 'mine
     };
 }
 
+/**
+ * Create a Plan object from JSON with the provided options.
+ * @param {import('@playwright/test').Page} page
+ * @param {*} options
+ * @returns {Promise<CreatedObjectInfo>} An object containing information about the newly created domain object.
+ */
+async function createPlanFromJSON(page, { name, json, parent = 'mine' }) {
+    const parentUrl = await getHashUrlToDomainObject(page, parent);
+
+    // Navigate to the parent object. This is necessary to create the object
+    // in the correct location, such as a folder, layout, or plot.
+    await page.goto(`${parentUrl}?hideTree=true`);
+
+    //Click the Create button
+    await page.click('button:has-text("Create")');
+
+    // Click 'Plan' menu option
+    await page.click(`li:text("Plan")`);
+
+    // Modify the name input field of the domain object to accept 'name'
+    if (name) {
+        const nameInput = page.locator('form[name="mctForm"] .first input[type="text"]');
+        await nameInput.fill("");
+        await nameInput.fill(name);
+    }
+
+    // Upload buffer from memory
+    await page.locator('input#fileElem').setInputFiles({
+        name: 'plan.txt',
+        mimeType: 'text/plain',
+        buffer: Buffer.from(JSON.stringify(json))
+    });
+
+    // Click OK button and wait for Navigate event
+    await Promise.all([
+        page.waitForLoadState(),
+        page.click('[aria-label="Save"]'),
+        // Wait for Save Banner to appear
+        page.waitForSelector('.c-message-banner__message')
+    ]);
+
+    // Wait until the URL is updated
+    await page.waitForURL(`**/mine/*`);
+    const uuid = await getFocusedObjectUuid(page);
+    const objectUrl = await getHashUrlToDomainObject(page, uuid);
+
+    return {
+        uuid,
+        name,
+        url: objectUrl
+    };
+}
+
 /**
 * Open the given `domainObject`'s context menu from the object tree.
 * Expands the path to the object and scrolls to it if necessary.
@@ -258,6 +313,7 @@ async function setEndOffset(page, offset) {
 // eslint-disable-next-line no-undef
 module.exports = {
     createDomainObjectWithDefaults,
+    createPlanFromJSON,
     openObjectTreeContextMenu,
     getHashUrlToDomainObject,
     getFocusedObjectUuid,

e2e/playwright-visual.config.js

@@ -7,8 +7,8 @@ const config = {
     retries: 0, // visual tests should never retry due to snapshot comparison errors
     testDir: 'tests/visual',
     testMatch: '**/*.visual.spec.js', // only run visual tests
-    timeout: 60 * 1000,
-    workers: 2, //Limit to 2 for CircleCI Agent
+    timeout: 90 * 1000,
+    workers: 1, //Limit to 1 for CircleCI Agent
     webServer: {
         command: 'cross-env NODE_ENV=test npm run start',
         url: 'http://localhost:8080/#',

e2e/tests/functional/menu.e2e.spec.js

@@ -42,7 +42,7 @@ test.describe('Persistence operations @addInit', () => {
             button: 'right'
         });
 
-        const menuOptions = page.locator('.c-menu ul');
+        const menuOptions = page.locator('.c-menu li');
 
         await expect.soft(menuOptions).toContainText(['Open In New Tab', 'View', 'Create Link']);
         await expect(menuOptions).not.toContainText(['Move', 'Duplicate', 'Remove', 'Add New Folder', 'Edit Properties...', 'Export as JSON', 'Import from JSON']);

e2e/tests/functional/planning/plan.e2e.spec.js

@@ -0,0 +1,87 @@
+/*****************************************************************************
+ * 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, expect } = require('../../../pluginFixtures');
+const { createPlanFromJSON } = require('../../../appActions');
+
+const testPlan = {
+    "TEST_GROUP": [
+        {
+            "name": "Past event 1",
+            "start": 1660320408000,
+            "end": 1660343797000,
+            "type": "TEST-GROUP",
+            "color": "orange",
+            "textColor": "white"
+        },
+        {
+            "name": "Past event 2",
+            "start": 1660406808000,
+            "end": 1660429160000,
+            "type": "TEST-GROUP",
+            "color": "orange",
+            "textColor": "white"
+        },
+        {
+            "name": "Past event 3",
+            "start": 1660493208000,
+            "end": 1660503981000,
+            "type": "TEST-GROUP",
+            "color": "orange",
+            "textColor": "white"
+        },
+        {
+            "name": "Past event 4",
+            "start": 1660579608000,
+            "end": 1660624108000,
+            "type": "TEST-GROUP",
+            "color": "orange",
+            "textColor": "white"
+        },
+        {
+            "name": "Past event 5",
+            "start": 1660666008000,
+            "end": 1660681529000,
+            "type": "TEST-GROUP",
+            "color": "orange",
+            "textColor": "white"
+        }
+    ]
+};
+
+test.describe("Plan", () => {
+    test("Create a Plan and display all plan events @unstable", async ({ page }) => {
+        await page.goto('./', { waitUntil: 'networkidle' });
+
+        const plan = await createPlanFromJSON(page, {
+            name: 'Test Plan',
+            json: testPlan
+        });
+        const startBound = testPlan.TEST_GROUP[0].start;
+        const endBound = testPlan.TEST_GROUP[testPlan.TEST_GROUP.length - 1].end;
+
+        // Switch to fixed time mode with all plan events within the bounds
+        await page.goto(`${plan.url}?tc.mode=fixed&tc.startBound=${startBound}&tc.endBound=${endBound}&tc.timeSystem=utc&view=plan.view`);
+        const eventCount = await page.locator('.activity-bounds').count();
+        expect(eventCount).toEqual(testPlan.TEST_GROUP.length);
+    });
+});
+

e2e/tests/functional/planning/timestrip.e2e.spec.js

@@ -0,0 +1,181 @@
+/*****************************************************************************
+ * 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, expect } = require('../../../pluginFixtures');
+const { createDomainObjectWithDefaults, createPlanFromJSON } = require('../../../appActions');
+
+const testPlan = {
+    "TEST_GROUP": [
+        {
+            "name": "Past event 1",
+            "start": 1660320408000,
+            "end": 1660343797000,
+            "type": "TEST-GROUP",
+            "color": "orange",
+            "textColor": "white"
+        },
+        {
+            "name": "Past event 2",
+            "start": 1660406808000,
+            "end": 1660429160000,
+            "type": "TEST-GROUP",
+            "color": "orange",
+            "textColor": "white"
+        },
+        {
+            "name": "Past event 3",
+            "start": 1660493208000,
+            "end": 1660503981000,
+            "type": "TEST-GROUP",
+            "color": "orange",
+            "textColor": "white"
+        },
+        {
+            "name": "Past event 4",
+            "start": 1660579608000,
+            "end": 1660624108000,
+            "type": "TEST-GROUP",
+            "color": "orange",
+            "textColor": "white"
+        },
+        {
+            "name": "Past event 5",
+            "start": 1660666008000,
+            "end": 1660681529000,
+            "type": "TEST-GROUP",
+            "color": "orange",
+            "textColor": "white"
+        }
+    ]
+};
+
+test.describe("Time Strip", () => {
+    test("Create two Time Strips, add a single Plan to both, and verify they can have separate Indepdenent Time Contexts @unstable", async ({ page }) => {
+        test.info().annotations.push({
+            type: 'issue',
+            description: 'https://github.com/nasa/openmct/issues/5627'
+        });
+
+        // Constant locators
+        const independentTimeConductorInputs = page.locator('.l-shell__main-independent-time-conductor .c-input--datetime');
+        const activityBounds = page.locator('.activity-bounds');
+
+        // Goto baseURL
+        await page.goto('./', { waitUntil: 'networkidle' });
+
+        const timestrip = await test.step("Create a Time Strip", async () => {
+            const createdTimeStrip = await createDomainObjectWithDefaults(page, { type: 'Time Strip' });
+            const objectName = await page.locator('.l-browse-bar__object-name').innerText();
+            expect(objectName).toBe(createdTimeStrip.name);
+
+            return createdTimeStrip;
+        });
+
+        const plan = await test.step("Create a Plan and add it to the timestrip", async () => {
+            const createdPlan = await createPlanFromJSON(page, {
+                name: 'Test Plan',
+                json: testPlan
+            });
+
+            await page.goto(timestrip.url);
+            // Expand the tree to show the plan
+            await page.click("button[title='Show selected item in tree']");
+            await page.dragAndDrop(`role=treeitem[name=/${createdPlan.name}/]`, '.c-object-view');
+            await page.click("button[title='Save']");
+            await page.click("li[title='Save and Finish Editing']");
+            const startBound = testPlan.TEST_GROUP[0].start;
+            const endBound = testPlan.TEST_GROUP[testPlan.TEST_GROUP.length - 1].end;
+
+            // Switch to fixed time mode with all plan events within the bounds
+            await page.goto(`${timestrip.url}?tc.mode=fixed&tc.startBound=${startBound}&tc.endBound=${endBound}&tc.timeSystem=utc&view=time-strip.view`);
+
+            // Verify all events are displayed
+            const eventCount = await page.locator('.activity-bounds').count();
+            expect(eventCount).toEqual(testPlan.TEST_GROUP.length);
+
+            return createdPlan;
+        });
+
+        await test.step("TimeStrip can use the Independent Time Conductor", async () => {
+            // Activate Independent Time Conductor in Fixed Time Mode
+            await page.click('.c-toggle-switch__slider');
+            expect(await activityBounds.count()).toEqual(0);
+
+            // Set the independent time bounds so that only one event is shown
+            const startBound = testPlan.TEST_GROUP[0].start;
+            const endBound = testPlan.TEST_GROUP[0].end;
+            const startBoundString = new Date(startBound).toISOString().replace('T', ' ');
+            const endBoundString = new Date(endBound).toISOString().replace('T', ' ');
+
+            await independentTimeConductorInputs.nth(0).fill('');
+            await independentTimeConductorInputs.nth(0).fill(startBoundString);
+            await page.keyboard.press('Enter');
+            await independentTimeConductorInputs.nth(1).fill('');
+            await independentTimeConductorInputs.nth(1).fill(endBoundString);
+            await page.keyboard.press('Enter');
+            expect(await activityBounds.count()).toEqual(1);
+        });
+
+        await test.step("Can have multiple TimeStrips with the same plan linked and different Independent Time Contexts", async () => {
+            // Create another Time Strip and verify that it has been created
+            const createdTimeStrip = await createDomainObjectWithDefaults(page, {
+                type: 'Time Strip',
+                name: "Another Time Strip"
+            });
+
+            const objectName = await page.locator('.l-browse-bar__object-name').innerText();
+            expect(objectName).toBe(createdTimeStrip.name);
+
+            // Drag the existing Plan onto the newly created Time Strip, and save.
+            await page.dragAndDrop(`role=treeitem[name=/${plan.name}/]`, '.c-object-view');
+            await page.click("button[title='Save']");
+            await page.click("li[title='Save and Finish Editing']");
+
+            // Activate Independent Time Conductor in Fixed Time Mode
+            await page.click('.c-toggle-switch__slider');
+
+            // All events should be displayed at this point because the
+            // initial independent context bounds will match the global bounds
+            expect(await activityBounds.count()).toEqual(5);
+
+            // Set the independent time bounds so that two events are shown
+            const startBound = testPlan.TEST_GROUP[0].start;
+            const endBound = testPlan.TEST_GROUP[1].end;
+            const startBoundString = new Date(startBound).toISOString().replace('T', ' ');
+            const endBoundString = new Date(endBound).toISOString().replace('T', ' ');
+
+            await independentTimeConductorInputs.nth(0).fill('');
+            await independentTimeConductorInputs.nth(0).fill(startBoundString);
+            await page.keyboard.press('Enter');
+            await independentTimeConductorInputs.nth(1).fill('');
+            await independentTimeConductorInputs.nth(1).fill(endBoundString);
+            await page.keyboard.press('Enter');
+
+            // Verify that two events are displayed
+            expect(await activityBounds.count()).toEqual(2);
+
+            // Switch to the previous Time Strip and verify that only one event is displayed
+            await page.goto(timestrip.url);
+            expect(await activityBounds.count()).toEqual(1);
+        });
+    });
+});

e2e/tests/functional/plugins/faultManagement/faultManagement.e2e.spec.js

@@ -28,14 +28,14 @@ test.describe('The Fault Management Plugin using example faults', () => {
         await utils.navigateToFaultManagementWithExample(page);
     });
 
-    test('Shows a criticality icon for every fault', async ({ page }) => {
+    test('Shows a criticality icon for every fault @unstable', async ({ page }) => {
         const faultCount = await page.locator('c-fault-mgmt__list').count();
         const criticalityIconCount = await page.locator('c-fault-mgmt__list-severity').count();
 
         expect.soft(faultCount).toEqual(criticalityIconCount);
     });
 
-    test('When selecting a fault, it has an "is-selected" class and it\'s information shows in the inspector', async ({ page }) => {
+    test('When selecting a fault, it has an "is-selected" class and it\'s information shows in the inspector @unstable', async ({ page }) => {
         await utils.selectFaultItem(page, 1);
 
         const selectedFaultName = await page.locator('.c-fault-mgmt__list.is-selected .c-fault-mgmt__list-faultname').textContent();
@@ -45,7 +45,7 @@ test.describe('The Fault Management Plugin using example faults', () => {
         expect.soft(inspectorFaultNameCount).toEqual(1);
     });
 
-    test('When selecting multiple faults, no specific fault information is shown in the inspector', async ({ page }) => {
+    test('When selecting multiple faults, no specific fault information is shown in the inspector @unstable', async ({ page }) => {
         await utils.selectFaultItem(page, 1);
         await utils.selectFaultItem(page, 2);
 
@@ -61,7 +61,7 @@ test.describe('The Fault Management Plugin using example faults', () => {
         expect.soft(secondNameInInspectorCount).toEqual(0);
     });
 
-    test('Allows you to shelve a fault', async ({ page }) => {
+    test('Allows you to shelve a fault @unstable', async ({ page }) => {
         const shelvedFaultName = await utils.getFaultName(page, 2);
         const beforeShelvedFault = utils.getFaultByName(page, shelvedFaultName);
 
@@ -80,7 +80,7 @@ test.describe('The Fault Management Plugin using example faults', () => {
         expect.soft(await shelvedViewFault.count()).toBe(1);
     });
 
-    test('Allows you to acknowledge a fault', async ({ page }) => {
+    test('Allows you to acknowledge a fault @unstable', async ({ page }) => {
         const acknowledgedFaultName = await utils.getFaultName(page, 3);
 
         await utils.acknowledgeFault(page, 3);
@@ -94,7 +94,7 @@ test.describe('The Fault Management Plugin using example faults', () => {
         expect.soft(acknowledgedFaultName).toEqual(acknowledgedViewFaultName);
     });
 
-    test('Allows you to shelve multiple faults', async ({ page }) => {
+    test('Allows you to shelve multiple faults @unstable', async ({ page }) => {
         const shelvedFaultNameOne = await utils.getFaultName(page, 1);
         const shelvedFaultNameFour = await utils.getFaultName(page, 4);
 
@@ -121,7 +121,7 @@ test.describe('The Fault Management Plugin using example faults', () => {
         expect.soft(await shelvedViewFaultFour.count()).toBe(1);
     });
 
-    test('Allows you to acknowledge multiple faults', async ({ page }) => {
+    test('Allows you to acknowledge multiple faults @unstable', async ({ page }) => {
         const acknowledgedFaultNameTwo = await utils.getFaultName(page, 2);
         const acknowledgedFaultNameFive = await utils.getFaultName(page, 5);
 
@@ -143,7 +143,7 @@ test.describe('The Fault Management Plugin using example faults', () => {
         expect.soft(await acknowledgedViewFaultFive.count()).toBe(1);
     });
 
-    test('Allows you to search faults', async ({ page }) => {
+    test('Allows you to search faults @unstable', async ({ page }) => {
         const faultThreeNamespace = await utils.getFaultNamespace(page, 3);
         const faultTwoName = await utils.getFaultName(page, 2);
         const faultFiveTriggerTime = await utils.getFaultTriggerTime(page, 5);
@@ -184,7 +184,7 @@ test.describe('The Fault Management Plugin using example faults', () => {
         expect.soft(await utils.getFaultTriggerTime(page, 1)).toEqual(faultFiveTriggerTime);
     });
 
-    test('Allows you to sort faults', async ({ page }) => {
+    test('Allows you to sort faults @unstable', async ({ page }) => {
         const highestSeverity = await utils.getHighestSeverity(page);
         const lowestSeverity = await utils.getLowestSeverity(page);
         const faultOneName = 'Example Fault 1';
@@ -213,7 +213,7 @@ test.describe('The Fault Management Plugin without using example faults', () =>
         await utils.navigateToFaultManagementWithoutExample(page);
     });
 
-    test('Shows no faults when no faults are provided', async ({ page }) => {
+    test('Shows no faults when no faults are provided @unstable', async ({ page }) => {
         const faultCount = await page.locator('c-fault-mgmt__list').count();
 
         expect.soft(faultCount).toEqual(0);
@@ -227,7 +227,7 @@ test.describe('The Fault Management Plugin without using example faults', () =>
         expect.soft(shelvedCount).toEqual(0);
     });
 
-    test('Will return no faults when searching', async ({ page }) => {
+    test('Will return no faults when searching @unstable', async ({ page }) => {
         await utils.enterSearchTerm(page, 'fault');
 
         const faultCount = await page.locator('c-fault-mgmt__list').count();

e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js

@@ -0,0 +1,66 @@
+/*****************************************************************************
+ * 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, expect } = require('../../../../pluginFixtures');
+const { createDomainObjectWithDefaults } = require('../../../../appActions');
+
+test.describe('Testing Flexible Layout @unstable', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto('./', { waitUntil: 'networkidle' });
+
+        // Create Sine Wave Generator
+        await createDomainObjectWithDefaults(page, {
+            type: 'Sine Wave Generator',
+            name: "Test Sine Wave Generator"
+        });
+
+        // Create Clock Object
+        await createDomainObjectWithDefaults(page, {
+            type: 'Clock',
+            name: "Test Clock"
+        });
+    });
+    test('panes have the appropriate draggable attribute while in Edit and Browse modes', async ({ page }) => {
+        // Create a Flexible Layout
+        await createDomainObjectWithDefaults(page, {
+            type: 'Flexible Layout',
+            name: "Test Flexible Layout"
+        });
+        // Edit Flexible Layout
+        await page.locator('[title="Edit"]').click();
+
+        // Expand the 'My Items' folder in the left tree
+        await page.locator('.c-tree__item__view-control.c-disclosure-triangle').first().click();
+        // Add the Sine Wave Generator and Clock to the Flexible Layout
+        await page.dragAndDrop('text=Test Sine Wave Generator', '.c-fl__container.is-empty');
+        await page.dragAndDrop('text=Test Clock', '.c-fl__container.is-empty');
+        // Check that panes can be dragged while Flexible Layout is in Edit mode
+        let dragWrapper = await page.locator('.c-fl-container__frames-holder .c-fl-frame__drag-wrapper').first();
+        await expect(dragWrapper).toHaveAttribute('draggable', 'true');
+        // Save Flexible Layout
+        await page.locator('button[title="Save"]').click();
+        await page.locator('text=Save and Finish Editing').click();
+        // Check that panes are not draggable while Flexible Layout is in Browse mode
+        dragWrapper = await page.locator('.c-fl-container__frames-holder .c-fl-frame__drag-wrapper').first();
+        await expect(dragWrapper).toHaveAttribute('draggable', 'false');
+    });
+});

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

@@ -212,6 +212,10 @@ test.describe('Example Imagery Object', () => {
         await expect(pausePlayButton).not.toHaveClass(/is-paused/);
     });
 
+    test('Uses low fetch priority', async ({ page }) => {
+        const priority = await page.locator('.js-imageryView-image').getAttribute('fetchpriority');
+        await expect(priority).toBe('low');
+    });
 });
 
 // The following test case will cover these scenarios

package.json

@@ -1,13 +1,13 @@
 {
   "name": "openmct",
-  "version": "2.0.8",
+  "version": "2.1.0",
   "description": "The Open MCT core platform",
   "devDependencies": {
     "@babel/eslint-parser": "7.18.9",
     "@braintree/sanitize-url": "6.0.0",
-    "@percy/cli": "1.10.0",
+    "@percy/cli": "1.7.2",
     "@percy/playwright": "1.0.4",
-    "@playwright/test": "1.23.0",
+    "@playwright/test": "1.25.0",
     "@types/eventemitter3": "^1.0.0",
     "@types/jasmine": "^4.0.1",
     "@types/karma": "^6.3.2",

src/api/indicators/IndicatorAPI.js

@@ -37,8 +37,8 @@ class IndicatorAPI extends EventEmitter {
         return sortedIndicators;
     }
 
-    simpleIndicator(key) {
-        return new SimpleIndicator(this.openmct, key);
+    simpleIndicator() {
+        return new SimpleIndicator(this.openmct);
     }
 
     /**
@@ -63,13 +63,6 @@ class IndicatorAPI extends EventEmitter {
      *
      */
     add(indicator) {
-        const keyExists = indicator.key !== undefined
-            && this.indicatorObjects.some(installedIndicator => indicator.key === installedIndicator.key);
-
-        if (keyExists) {
-            console.warn(`An Indicator with key { ${indicator.key} } has already been installed.`);
-        }
-
         if (!indicator.priority) {
             indicator.priority = this.openmct.priority.DEFAULT;
         }
@@ -79,22 +72,6 @@ class IndicatorAPI extends EventEmitter {
         this.emit('addIndicator', indicator);
     }
 
-    /**
-     * @param {string} key the key of the indicator
-     * @param {number} priority the priority to set
-     */
-    setPriority(key, priority) {
-        const indicatorToPrioritize = this.indicatorObjects
-            .find(indicator => indicator.key === key);
-
-        if (indicatorToPrioritize !== undefined) {
-            indicatorToPrioritize.priority = priority;
-
-            this.emit('setPriority', indicatorToPrioritize);
-        } else {
-            console.warn(`Could not find an installed indicator: ${key}`);
-        }
-    }
 }
 
 export default IndicatorAPI;

src/api/indicators/IndicatorAPISpec.js

@@ -22,8 +22,6 @@
 import { createOpenMct, resetApplicationState } from '../../utils/testing';
 import SimpleIndicator from './SimpleIndicator';
 
-const NOTIFICATIONS_INDICATOR_KEY = 'notifications-indicator';
-
 describe("The Indicator API", () => {
     let openmct;
 
@@ -41,7 +39,6 @@ describe("The Indicator API", () => {
         const textNode = document.createTextNode(label);
         element.appendChild(textNode);
         const testIndicator = {
-            key: className,
             element,
             priority
         };
@@ -49,22 +46,12 @@ describe("The Indicator API", () => {
         return testIndicator;
     }
 
-    it("installs the notifications indicator by default", () => {
-        let indicators = openmct.indicators.getIndicatorObjectsByPriority();
-        const notificationIndicator = indicators.find(indicator => indicator.key === NOTIFICATIONS_INDICATOR_KEY);
-
-        expect(notificationIndicator.key).toEqual(NOTIFICATIONS_INDICATOR_KEY);
-    });
-
     it("can register an indicator", () => {
-        let indicators = openmct.indicators.getIndicatorObjectsByPriority();
-        const defaultIndicatorsLength = indicators.length;
         const testIndicator = generateIndicator('test-indicator', 'This is a test indicator', 2);
-
         openmct.indicators.add(testIndicator);
-        indicators = openmct.indicators.getIndicatorObjectsByPriority();
-
-        expect(indicators.length).toBe(defaultIndicatorsLength + 1);
+        expect(openmct.indicators.indicatorObjects).toBeDefined();
+        // notifier indicator is installed by default
+        expect(openmct.indicators.indicatorObjects.length).toBe(2);
     });
 
     it("can order indicators based on priority", () => {
@@ -80,32 +67,10 @@ describe("The Indicator API", () => {
         const testIndicator4 = generateIndicator('test-indicator-4', 'This is yet another test indicator', openmct.priority.HIGH);
         openmct.indicators.add(testIndicator4);
 
-        let indicators = openmct.indicators.getIndicatorObjectsByPriority();
-
-        expect(indicators.length).toBe(5);
-        expect(indicators[2].priority).toBe(openmct.priority.DEFAULT);
-    });
-
-    it("can change priority of an installed indicator", () => {
-        const testIndicator1 = generateIndicator('test-indicator-1', 'This is a test indicator', openmct.priority.LOW);
-        openmct.indicators.add(testIndicator1);
-
-        const testIndicator2 = generateIndicator('test-indicator-2', 'This is another test indicator', openmct.priority.DEFAULT);
-        openmct.indicators.add(testIndicator2);
-
-        const testIndicator3 = generateIndicator('test-indicator-3', 'This is yet another test indicator', openmct.priority.LOW);
-        openmct.indicators.add(testIndicator3);
-
-        const testIndicator4 = generateIndicator('test-indicator-4', 'This is yet another test indicator', openmct.priority.HIGH);
-        openmct.indicators.add(testIndicator4);
-
-        let indicators = openmct.indicators.getIndicatorObjectsByPriority();
-
-        expect(indicators[0].key).toEqual('test-indicator-4');
-        openmct.indicators.setPriority('test-indicator-2', openmct.priority.HIGH + 1);
-        indicators = openmct.indicators.getIndicatorObjectsByPriority();
-
-        expect(indicators[0].key).toEqual('test-indicator-2');
+        expect(openmct.indicators.indicatorObjects.length).toBe(5);
+        const indicatorObjectsByPriority = openmct.indicators.getIndicatorObjectsByPriority();
+        expect(indicatorObjectsByPriority.length).toBe(5);
+        expect(indicatorObjectsByPriority[2].priority).toBe(openmct.priority.DEFAULT);
     });
 
     it("the simple indicator can be added", () => {

src/api/indicators/SimpleIndicator.js

@@ -27,11 +27,10 @@ import { convertTemplateToHTML } from '@/utils/template/templateHelpers';
 const DEFAULT_ICON_CLASS = 'icon-info';
 
 class SimpleIndicator extends EventEmitter {
-    constructor(openmct, key) {
+    constructor(openmct) {
         super();
 
         this.openmct = openmct;
-        this.key = key;
         this.element = convertTemplateToHTML(indicatorTemplate)[0];
         this.priority = openmct.priority.DEFAULT;
 

src/api/time/TimeAPI.js

@@ -171,27 +171,38 @@ class TimeAPI extends GlobalTimeContext {
      * @memberof module:openmct.TimeAPI#
      * @method getContextForView
      */
-    getContextForView(objectPath = []) {
-        const viewKey = objectPath.length && this.openmct.objects.makeKeyString(objectPath[0].identifier);
-
-        if (viewKey) {
-            let viewTimeContext = this.getIndependentContext(viewKey);
-            if (viewTimeContext) {
-                this.independentContexts.delete(viewKey);
-            } else {
-                viewTimeContext = new IndependentTimeContext(this.openmct, this, objectPath);
-            }
-
-            // return a new IndependentContext in case the objectPath is different
-            this.independentContexts.set(viewKey, viewTimeContext);
-
-            return viewTimeContext;
+    getContextForView(objectPath) {
+        if (!objectPath || !Array.isArray(objectPath)) {
+            throw new Error('No objectPath provided');
         }
 
-        // always follow the global time context
-        return this;
-    }
+        const viewKey = objectPath.length && this.openmct.objects.makeKeyString(objectPath[0].identifier);
 
+        if (!viewKey) {
+            // Return the global time context
+            return this;
+        }
+
+        let viewTimeContext = this.getIndependentContext(viewKey);
+        if (!viewTimeContext) {
+            // If the context doesn't exist yet, create it.
+            viewTimeContext = new IndependentTimeContext(this.openmct, this, objectPath);
+            this.independentContexts.set(viewKey, viewTimeContext);
+        } else {
+            // If it already exists, compare the objectPath to see if it needs to be updated.
+            const currentPath = this.openmct.objects.getRelativePath(viewTimeContext.objectPath);
+            const newPath = this.openmct.objects.getRelativePath(objectPath);
+
+            if (currentPath !== newPath) {
+                // If the path has changed, update the context.
+                this.independentContexts.delete(viewKey);
+                viewTimeContext = new IndependentTimeContext(this.openmct, this, objectPath);
+                this.independentContexts.set(viewKey, viewTimeContext);
+            }
+        }
+
+        return viewTimeContext;
+    }
 }
 
 export default TimeAPI;

src/plugins/URLIndicatorPlugin/URLIndicatorPlugin.js

@@ -23,7 +23,7 @@ define(['./URLIndicator'],
     function URLIndicatorPlugin(URLIndicator) {
         return function (opts) {
             return function install(openmct) {
-                const simpleIndicator = openmct.indicators.simpleIndicator('url-indicator');
+                const simpleIndicator = openmct.indicators.simpleIndicator();
                 const urlIndicator = new URLIndicator(opts, simpleIndicator);
 
                 openmct.indicators.add(simpleIndicator);

src/plugins/displayLayout/components/SubobjectView.vue

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

src/plugins/displayLayout/components/TelemetryView.vue

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

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -281,6 +281,10 @@ export default {
                 return false;
             }
 
+            if (!this.isEditing) {
+                return false;
+            }
+
             let containerId = event.dataTransfer.getData('containerid');
             let container = this.containers.filter((c) => c.id === containerId)[0];
             let containerPos = this.containers.indexOf(container);

src/plugins/flexibleLayout/components/frame.vue

@@ -31,7 +31,7 @@
     <div
         ref="frame"
         class="c-frame c-fl-frame__drag-wrapper is-selectable u-inspectable is-moveable"
-        draggable="true"
+        :draggable="draggable"
         @dragstart="initDrag"
     >
         <object-frame
@@ -93,18 +93,20 @@ export default {
     computed: {
         hasFrame() {
             return !this.frame.noFrame;
+        },
+        draggable() {
+            return this.isEditing;
         }
     },
     mounted() {
         if (this.frame.domainObjectIdentifier) {
-            let domainObjectPromise;
             if (this.openmct.objects.supportsMutation(this.frame.domainObjectIdentifier)) {
-                domainObjectPromise = this.openmct.objects.getMutable(this.frame.domainObjectIdentifier);
+                this.domainObjectPromise = this.openmct.objects.getMutable(this.frame.domainObjectIdentifier);
             } else {
-                domainObjectPromise = this.openmct.objects.get(this.frame.domainObjectIdentifier);
+                this.domainObjectPromise = this.openmct.objects.get(this.frame.domainObjectIdentifier);
             }
 
-            domainObjectPromise.then((object) => {
+            this.domainObjectPromise.then((object) => {
                 this.setDomainObject(object);
             });
         }
@@ -112,7 +114,13 @@ export default {
         this.dragGhost = document.getElementById('js-fl-drag-ghost');
     },
     beforeDestroy() {
-        if (this.domainObject.isMutable) {
+        if (this.domainObjectPromise) {
+            this.domainObjectPromise.then(() => {
+                if (this?.domainObject?.isMutable) {
+                    this.openmct.objects.destroyMutable(this.domainObject);
+                }
+            });
+        } else if (this?.domainObject?.isMutable) {
             this.openmct.objects.destroyMutable(this.domainObject);
         }
 

src/plugins/imagery/components/ImageThumbnail.vue

@@ -38,6 +38,7 @@
         <img
             class="c-thumb__image"
             :src="image.url"
+            fetchpriority="low"
         >
     </a>
     <div class="c-thumb__timestamp">{{ image.formattedTime }}</div>

src/plugins/imagery/components/ImageryView.vue

@@ -82,6 +82,7 @@
                     }"
                     :data-openmct-image-timestamp="time"
                     :data-openmct-object-keystring="keyString"
+                    fetchpriority="low"
                 >
                 <div
                     v-if="imageUrl"

src/plugins/operatorStatus/operatorStatus/OperatorStatusIndicator.js

@@ -49,7 +49,7 @@ export default class OperatorStatusIndicator extends AbstractStatusIndicator {
     }
 
     createIndicator() {
-        const operatorIndicator = this.openmct.indicators.simpleIndicator('operator-indicator');
+        const operatorIndicator = this.openmct.indicators.simpleIndicator();
 
         operatorIndicator.text("My Operator Status");
         operatorIndicator.description("Set my operator status");

src/plugins/operatorStatus/pollQuestion/PollQuestionIndicator.js

@@ -49,7 +49,7 @@ export default class PollQuestionIndicator extends AbstractStatusIndicator {
     }
 
     createIndicator() {
-        const pollQuestionIndicator = this.openmct.indicators.simpleIndicator('poll-question-indicator');
+        const pollQuestionIndicator = this.openmct.indicators.simpleIndicator();
 
         pollQuestionIndicator.text("Poll Question");
         pollQuestionIndicator.description("Set the current poll question");

src/plugins/performanceIndicator/plugin.js

@@ -23,7 +23,7 @@ export default function PerformanceIndicator() {
     return function install(openmct) {
         let frames = 0;
         let lastCalculated = performance.now();
-        const indicator = openmct.indicators.simpleIndicator('performance-indicator');
+        const indicator = openmct.indicators.simpleIndicator();
 
         indicator.text('~ fps');
         indicator.statusClass('s-status-info');

src/plugins/persistence/couch/CouchObjectProvider.js

@@ -187,6 +187,7 @@ class CouchObjectProvider {
         let fetchOptions = {
             method,
             body,
+            priority: 'high',
             signal
         };
 

src/plugins/persistence/couch/plugin.js

@@ -30,7 +30,7 @@ const COUCH_SEARCH_ONLY_NAMESPACE = `COUCH_SEARCH_${Date.now()}`;
 
 export default function CouchPlugin(options) {
     return function install(openmct) {
-        const simpleIndicator = openmct.indicators.simpleIndicator('couch-indicator');
+        const simpleIndicator = openmct.indicators.simpleIndicator();
         openmct.indicators.add(simpleIndicator);
         const couchStatusIndicator = new CouchStatusIndicator(simpleIndicator);
         install.couchProvider = new CouchObjectProvider(openmct, options, NAMESPACE, couchStatusIndicator);

src/plugins/persistence/couch/pluginSpec.js

@@ -109,6 +109,12 @@ describe('the plugin', () => {
             expect(result.identifier.key).toEqual(mockDomainObject.identifier.key);
         });
 
+        it('prioritizes couch requests above other requests', async () => {
+            await openmct.objects.get(mockDomainObject.identifier);
+            const fetchOptions = fetch.calls.mostRecent().args[1];
+            expect(fetchOptions.priority).toEqual('high');
+        });
+
         it('creates an object and starts shared worker', async () => {
             const result = await openmct.objects.save(mockDomainObject);
             expect(provider.create).toHaveBeenCalled();

src/plugins/remoteClock/requestInterceptor.js

@@ -20,17 +20,15 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-function remoteClockRequestInterceptor(openmct, remoteClockIdentifier, waitForBounds) {
+function remoteClockRequestInterceptor(openmct, _remoteClockIdentifier, waitForBounds) {
     let remoteClockLoaded = false;
 
     return {
         appliesTo: () => {
             // Get the activeClock from the Global Time Context
-            const { activeClock } = openmct.time.getContextForView();
+            const { activeClock } = openmct.time;
 
-            return activeClock !== undefined
-            && activeClock.key === 'remote-clock'
-            && !remoteClockLoaded;
+            return activeClock?.key === 'remote-clock' && !remoteClockLoaded;
         },
         invoke: async (request) => {
             const { start, end } = await waitForBounds();

src/plugins/timeConductor/ConductorInputsFixed.vue

@@ -78,6 +78,12 @@ export default {
             default() {
                 return undefined;
             }
+        },
+        objectPath: {
+            type: Array,
+            default() {
+                return [];
+            }
         }
     },
     data() {
@@ -127,7 +133,7 @@ export default {
     methods: {
         setTimeContext() {
             this.stopFollowingTimeContext();
-            this.timeContext = this.openmct.time.getContextForView(this.keyString ? [{identifier: this.keyString}] : []);
+            this.timeContext = this.openmct.time.getContextForView(this.keyString ? this.objectPath : []);
 
             this.handleNewBounds(this.timeContext.bounds());
             this.timeContext.on('bounds', this.handleNewBounds);

src/plugins/timeConductor/ConductorInputsRealtime.vue

@@ -90,6 +90,12 @@ export default {
                 return undefined;
             }
         },
+        objectPath: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
         inputBounds: {
             type: Object,
             default() {
@@ -162,7 +168,7 @@ export default {
         },
         setTimeContext() {
             this.stopFollowingTime();
-            this.timeContext = this.openmct.time.getContextForView(this.keyString ? [{identifier: this.keyString}] : []);
+            this.timeContext = this.openmct.time.getContextForView(this.keyString ? this.objectPath : []);
             this.followTime();
         },
         handleNewBounds(bounds) {

src/plugins/timeConductor/independent/IndependentTimeConductor.vue

@@ -52,12 +52,14 @@
             <conductor-inputs-fixed
                 v-if="isFixed"
                 :key-string="domainObject.identifier.key"
+                :object-path="objectPath"
                 @updated="saveFixedOffsets"
             />
 
             <conductor-inputs-realtime
                 v-else
                 :key-string="domainObject.identifier.key"
+                :object-path="objectPath"
                 @updated="saveClockOffsets"
             />
         </div>
@@ -85,6 +87,10 @@ export default {
         domainObject: {
             type: Object,
             required: true
+        },
+        objectPath: {
+            type: Array,
+            required: true
         }
     },
     data() {
@@ -164,7 +170,7 @@ export default {
         },
         setTimeContext() {
             this.stopFollowingTimeContext();
-            this.timeContext = this.openmct.time.getContextForView([this.domainObject]);
+            this.timeContext = this.openmct.time.getContextForView(this.objectPath);
             this.timeContext.on('clock', this.setTimeOptions);
         },
         stopFollowingTimeContext() {

src/plugins/timeline/TimelineObjectView.vue

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

src/plugins/timelist/Timelist.vue

@@ -110,7 +110,9 @@ export default {
     },
     mounted() {
         this.isEditing = this.openmct.editor.isEditing();
-        this.timestamp = Date.now();
+        this.timestamp = this.openmct.time.clock()?.currentValue() || this.openmct.time.bounds()?.start;
+        this.openmct.time.on('clock', this.setViewFromClock);
+
         this.getPlanDataAndSetConfig(this.domainObject);
 
         this.unlisten = this.openmct.objects.observe(this.domainObject, 'selectFile', this.planFileUpdated);
@@ -118,6 +120,7 @@ export default {
         this.removeStatusListener = this.openmct.status.observe(this.domainObject.identifier, this.setStatus);
         this.status = this.openmct.status.get(this.domainObject.identifier);
         this.unlistenTicker = ticker.listen(this.clearPreviousActivities);
+        this.openmct.time.on('bounds', this.updateTimestamp);
         this.openmct.editor.on('isEditing', this.setEditState);
 
         this.deferAutoScroll = _.debounce(this.deferAutoScroll, 500);
@@ -128,6 +131,9 @@ export default {
             this.composition.on('remove', this.removeItem);
             this.composition.load();
         }
+
+        this.setViewFromClock(this.openmct.time.clock());
+
     },
     beforeDestroy() {
         if (this.unlisten) {
@@ -147,6 +153,8 @@ export default {
         }
 
         this.openmct.editor.off('isEditing', this.setEditState);
+        this.openmct.time.off('bounds', this.updateTimestamp);
+        this.openmct.time.off('clock', this.setViewFromClock);
 
         this.$el.parentElement.removeEventListener('scroll', this.deferAutoScroll, true);
         if (this.clearAutoScrollDisabledTimer) {
@@ -176,12 +184,32 @@ export default {
                 this.showAll = true;
                 this.listActivities();
             } else {
+
                 this.filterValue = configuration.filter;
                 this.setSort();
                 this.setViewBounds();
                 this.listActivities();
             }
         },
+        updateTimestamp(_bounds, isTick) {
+            if (isTick === true) {
+                this.timestamp = this.openmct.time.clock().currentValue();
+            }
+        },
+        setViewFromClock(newClock) {
+            this.filterValue = this.domainObject.configuration.filter;
+            const isFixedTime = newClock === undefined;
+            if (isFixedTime) {
+                this.hideAll = false;
+                this.showAll = true;
+                // clear invokes listActivities
+                this.clearPreviousActivities(this.openmct.time.bounds()?.start);
+            } else {
+                this.setSort();
+                this.setViewBounds();
+                this.listActivities();
+            }
+        },
         addItem(domainObject) {
             this.planObjects = [domainObject];
             this.resetPlanData();
@@ -400,7 +428,7 @@ export default {
 
             this.firstCurrentActivityIndex = -1;
             this.currentActivitiesCount = 0;
-            this.$el.parentElement.scrollTo({top: 0});
+            this.$el.parentElement?.scrollTo({top: 0});
             this.autoScrolled = false;
         },
         setScrollTop() {

src/plugins/timelist/pluginSpec.js

@@ -376,7 +376,7 @@ describe('the plugin', function () {
 
             return Vue.nextTick(() => {
                 const items = element.querySelectorAll(LIST_ITEM_CLASS);
-                expect(items.length).toEqual(1);
+                expect(items.length).toEqual(2);
             });
         });
     });

src/ui/components/ObjectView.vue

@@ -6,6 +6,7 @@
     >
         <independent-time-conductor
             :domain-object="domainObject"
+            :object-path="path"
             @stateChanged="updateIndependentTimeState"
             @updated="saveTimeOptions"
         />
@@ -67,6 +68,9 @@ export default {
         };
     },
     computed: {
+        path() {
+            return this.domainObject && (this.currentObjectPath || this.objectPath);
+        },
         objectFontStyle() {
             return this.domainObject && this.domainObject.configuration && this.domainObject.configuration.fontStyle;
         },