New action to reload an individual view and all of its children

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

@@ -0,0 +1,125 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import { createDomainObjectWithDefaults, expandEntireTree } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Reload action', () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+ const displayLayout = await createDomainObjectWithDefaults(page, {
+ type: 'Display Layout'
+ });
+
+ const alphaTable = await createDomainObjectWithDefaults(page, {
+ type: 'Telemetry Table',
+ name: 'Alpha Table'
+ });
+
+ const betaTable = await createDomainObjectWithDefaults(page, {
+ type: 'Telemetry Table',
+ name: 'Beta Table'
+ });
+
+ await createDomainObjectWithDefaults(page, {
+ type: 'Sine Wave Generator',
+ parent: alphaTable.uuid,
+ customParameters: {
+ '[aria-label="Data Rate (hz)"]': '0.001'
+ }
+ });
+
+ await createDomainObjectWithDefaults(page, {
+ type: 'Sine Wave Generator',
+ parent: betaTable.uuid,
+ customParameters: {
+ '[aria-label="Data Rate (hz)"]': '0.001'
+ }
+ });
+
+ await page.goto(displayLayout.url);
+
+ // Expand all folders
+ await expandEntireTree(page);
+
+ await page.getByLabel('Edit Object', { exact: true }).click();
+
+ await page.dragAndDrop(`text='Alpha Table'`, '.l-layout__grid-holder', {
+ targetPosition: { x: 0, y: 0 }
+ });
+
+ await page.dragAndDrop(`text='Beta Table'`, '.l-layout__grid-holder', {
+ targetPosition: { x: 0, y: 250 }
+ });
+
+ await page.locator('button[title="Save"]').click();
+ await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+ });
+
+ test('can reload display layout and its children', async ({ page }) => {
+ const beforeReloadAlphaTelemetryValue = await page
+ .getByLabel('Alpha Table table content')
+ .getByLabel('wavelengths table cell')
+ .first()
+ .getAttribute('title');
+ const beforeReloadBetaTelemetryValue = await page
+ .getByLabel('Beta Table table content')
+ .getByLabel('wavelengths table cell')
+ .first()
+ .getAttribute('title');
+ // reload alpha
+ await page.getByTitle('View menu items').first().click();
+ await page.getByRole('menuitem', { name: /Reload/ }).click();
+
+ const afterReloadAlphaTelemetryValue = await page
+ .getByLabel('Alpha Table table content')
+ .getByLabel('wavelengths table cell')
+ .first()
+ .getAttribute('title');
+ const afterReloadBetaTelemetryValue = await page
+ .getByLabel('Beta Table table content')
+ .getByLabel('wavelengths table cell')
+ .first()
+ .getAttribute('title');
+
+ expect(beforeReloadAlphaTelemetryValue).not.toEqual(afterReloadAlphaTelemetryValue);
+ expect(beforeReloadBetaTelemetryValue).toEqual(afterReloadBetaTelemetryValue);
+
+ // now reload parent
+ await page.getByTitle('More actions').click();
+ await page.getByRole('menuitem', { name: /Reload/ }).click();
+
+ const fullReloadAlphaTelemetryValue = await page
+ .getByLabel('Alpha Table table content')
+ .getByLabel('wavelengths table cell')
+ .first()
+ .getAttribute('title');
+ const fullReloadBetaTelemetryValue = await page
+ .getByLabel('Beta Table table content')
+ .getByLabel('wavelengths table cell')
+ .first()
+ .getAttribute('title');
+
+ expect(fullReloadAlphaTelemetryValue).not.toEqual(afterReloadAlphaTelemetryValue);
+ expect(fullReloadBetaTelemetryValue).not.toEqual(afterReloadBetaTelemetryValue);
+ });
+});

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

@@ -50,15 +50,15 @@ test.describe('Tabs View', () => {
  page.goto(tabsView.url);
 
  // select first tab
- await page.getByLabel(`${table.name} tab`).click();
+ await page.getByLabel(`${table.name} tab`, { exact: true }).click();
  // ensure table header visible
  await expect(page.getByRole('searchbox', { name: 'message filter input' })).toBeVisible();
 
  // no canvas (i.e., sine wave generator) in the document should be visible
  await expect(page.locator('canvas[id=webglContext]')).toBeHidden();
 
  // select second tab
- await page.getByLabel(`${notebook.name} tab`).click();
+ await page.getByLabel(`${notebook.name} tab`, { exact: true }).click();
 
  // ensure notebook visible
  await expect(page.locator('.c-notebook__drag-area')).toBeVisible();
@@ -67,7 +67,7 @@ test.describe('Tabs View', () => {
  await expect(page.locator('canvas[id=webglContext]')).toBeHidden();
 
  // select third tab
- await page.getByLabel(`${sineWaveGenerator.name} tab`).click();
+ await page.getByLabel(`${sineWaveGenerator.name} tab`, { exact: true }).click();
 
  // expect sine wave generator visible
  await expect(page.locator('.c-plot')).toBeVisible();
@@ -78,7 +78,7 @@ test.describe('Tabs View', () => {
  await expect(page.locator('canvas').nth(1)).toBeVisible();
 
  // now try to select the first tab again
- await page.getByLabel(`${table.name} tab`).click();
+ await page.getByLabel(`${table.name} tab`, { exact: true }).click();
  // ensure table header visible
  await expect(page.getByRole('searchbox', { name: 'message filter input' })).toBeVisible();
 

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

@@ -64,10 +64,9 @@ test.describe('Telemetry Table', () => {
 
  // Get the most recent telemetry date
  const latestTelemetryDate = await page
- .locator('table.c-telemetry-table__body > tbody > tr')
+ .getByLabel('table content')
+ .getByLabel('utc table cell')
  .last()
- .locator('td')
- .nth(1)
  .getAttribute('title');
 
  // Verify that it is <= our new end bound
@@ -91,7 +90,7 @@ test.describe('Telemetry Table', () => {
  await page.getByRole('searchbox', { name: 'message filter input' }).click();
  await page.getByRole('searchbox', { name: 'message filter input' }).fill('Roger');
 
- let cells = await page.getByRole('cell', { name: /Roger/ }).all();
+ let cells = await page.getByRole('cell').getByText(/Roger/).all();
  // ensure we've got more than one cell
  expect(cells.length).toBeGreaterThan(1);
  // ensure the text content of each cell contains the search term
@@ -103,7 +102,10 @@ test.describe('Telemetry Table', () => {
  await page.getByRole('searchbox', { name: 'message filter input' }).click();
  await page.getByRole('searchbox', { name: 'message filter input' }).fill('Dodger');
 
- cells = await page.getByRole('cell', { name: /Dodger/ }).all();
+ cells = await page
+ .getByRole('cell')
+ .getByText(/Dodger/)
+ .all();
  // ensure we've got more than one cell
  expect(cells.length).toBe(0);
  // ensure the text content of each cell contains the search term
@@ -135,7 +137,7 @@ test.describe('Telemetry Table', () => {
  await page.getByRole('searchbox', { name: 'message filter input' }).click();
  await page.getByRole('searchbox', { name: 'message filter input' }).fill('/[Rr]oger/');
 
- let cells = await page.getByRole('cell', { name: /Roger/ }).all();
+ let cells = await page.getByRole('cell').getByText(/Roger/).all();
  // ensure we've got more than one cell
  expect(cells.length).toBeGreaterThan(1);
  // ensure the text content of each cell contains the search term
@@ -147,7 +149,10 @@ test.describe('Telemetry Table', () => {
  await page.getByRole('searchbox', { name: 'message filter input' }).click();
  await page.getByRole('searchbox', { name: 'message filter input' }).fill('/[Dd]oger/');
 
- cells = await page.getByRole('cell', { name: /Dodger/ }).all();
+ cells = await page
+ .getByRole('cell')
+ .getByText(/Dodger/)
+ .all();
  // ensure we've got more than one cell
  expect(cells.length).toBe(0);
  // ensure the text content of each cell contains the search term

e2e/tests/performance/tabs.e2e.spec.js

@@ -24,7 +24,7 @@ import { createDomainObjectWithDefaults, waitForPlotsToRender } from '../../appA
 import { expect, test } from '../../pluginFixtures.js';
 
 test.describe('Tabs View', () => {
- test('Renders tabbed elements nicely', async ({ page }) => {
+ test('Renders tabbed elements only when visible', async ({ page }) => {
  // Code to hook into the requestAnimationFrame function and log each call
  let animationCalls = [];
  await page.exposeFunction('logCall', (callCount) => {
@@ -64,32 +64,32 @@ test.describe('Tabs View', () => {
  page.goto(tabsView.url);
 
  // select first tab
- await page.getByLabel(`${table.name} tab`).click();
+ await page.getByLabel(`${table.name} tab`, { exact: true }).click();
  // ensure table header visible
  await expect(page.getByRole('searchbox', { name: 'message filter input' })).toBeVisible();
 
  // select second tab
- await page.getByLabel(`${notebook.name} tab`).click();
+ await page.getByLabel(`${notebook.name} tab`, { exact: true }).click();
 
  // expect notebook visible
  await expect(page.locator('.c-notebook__drag-area')).toBeVisible();
 
  // select third tab
- await page.getByLabel(`${sineWaveGenerator.name} tab`).click();
+ await page.getByLabel(`${sineWaveGenerator.name} tab`, { exact: true }).click();
 
  // ensure sine wave generator visible
  expect(await page.locator('.c-plot').isVisible()).toBe(true);
 
  // now select notebook and clear animation calls
- await page.getByLabel(`${notebook.name} tab`).click();
+ await page.getByLabel(`${notebook.name} tab`, { exact: true }).click();
  animationCalls = [];
  // expect notebook visible
  await expect(page.locator('.c-notebook__drag-area')).toBeVisible();
  const notebookAnimationCalls = animationCalls.length;
 
  // select sine wave generator and clear animation calls
  animationCalls = [];
- await page.getByLabel(`${sineWaveGenerator.name} tab`).click();
+ await page.getByLabel(`${sineWaveGenerator.name} tab`, { exact: true }).click();
 
  // ensure sine wave generator visible
  await waitForPlotsToRender(page);

src/MCT.js

@@ -251,6 +251,7 @@ export class MCT extends EventEmitter {
  this.install(this.plugins.FlexibleLayout());
  this.install(this.plugins.GoToOriginalAction());
  this.install(this.plugins.OpenInNewTabAction());
+ this.install(this.plugins.ReloadAction());
  this.install(this.plugins.WebPage());
  this.install(this.plugins.Condition());
  this.install(this.plugins.ConditionWidget());

src/plugins/plugins.js

@@ -65,6 +65,7 @@ import PerformanceIndicator from './performanceIndicator/plugin.js';
 import CouchDBPlugin from './persistence/couch/plugin.js';
 import PlanLayout from './plan/plugin.js';
 import PlotPlugin from './plot/plugin.js';
+import ReloadAction from './reloadAction/plugin.js';
 import RemoteClock from './remoteClock/plugin.js';
 import StaticRootPlugin from './staticRootPlugin/plugin.js';
 import SummaryWidget from './summaryWidget/plugin.js';
@@ -141,6 +142,7 @@ plugins.Filters = Filters;
 plugins.ObjectMigration = ObjectMigration;
 plugins.GoToOriginalAction = GoToOriginalAction;
 plugins.OpenInNewTabAction = OpenInNewTabAction;
+plugins.ReloadAction = ReloadAction;
 plugins.ClearData = ClearData;
 plugins.WebPage = WebPagePlugin;
 plugins.Espresso = Espresso;

src/plugins/reloadAction/ReloadAction.js

@@ -0,0 +1,37 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, 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 ReloadAction {
+ constructor(openmct) {
+ this.name = 'Reload';
+ this.key = 'reload';
+ this.description = 'Reload this object and its children';
+ this.group = 'action';
+ this.priority = 10;
+ this.cssClass = 'icon-refresh';
+
+ this.openmct = openmct;
+ }
+ invoke(objectPath, view) {
+ const domainObject = objectPath[0];
+ this.openmct.objectViews.emit('reload', domainObject);
+ }
+}

src/plugins/reloadAction/plugin.js

@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import ReloadAction from './ReloadAction.js';
+
+export default function plugin() {
+ return function install(openmct) {
+ openmct.actions.register(new ReloadAction(openmct));
+ };
+}

src/plugins/telemetryTable/components/TableCell.vue

@@ -22,8 +22,8 @@
 <template>
  <td
  ref="tableCell"
- :aria-label="formattedValue"
  :title="formattedValue"
+ :aria-label="`${columnKey} table cell ${formattedValue}`"
  @click="selectCell($event.currentTarget, columnKey)"
  @mouseover.ctrl="showToolTip"
  @mouseleave="hideToolTip"

src/plugins/telemetryTable/components/TableComponent.vue

@@ -222,6 +222,7 @@
  ref="contentTable"
  class="c-table__body c-telemetry-table__body js-telemetry-table__content"
  :style="{ height: totalHeight + 'px' }"
+ :aria-label="`${table.domainObject.name} table content`"
  >
  <tbody>
  <telemetry-table-row