ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-29 15:43:52 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

[Telemetry Table] Address issues found during testing Table Performance (#7529)

Browse Source 
Fix exporting from Limited Mode: #7268 (comment)
Fix UI issues: #7268 (comment)
Apply configuration changes made in Edit Properties.

---------

Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Co-authored-by: Andrew Henry <akhenry@gmail.com>
This commit is contained in:
Jamie V 2024-03-13 09:25:51 -07:00 committed by GitHub
parent cb4c59a464
commit 64862634f3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 94 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
e2e/appActions.js
View File

@ -392,6 +392,7 @@ async function setTimeConductorMode(page, isFixedTimespan = true) {
await page.getByRole('menuitem', { name: /Real-Time/ }).click();
await page.waitForURL(/tc\.mode=local/);
}
await page.getByLabel('Submit time offsets').or(page.getByLabel('Submit time bounds')).click();
}
/**
@ -662,5 +663,6 @@ export {
setRealTimeMode,
setStartOffset,
setTimeConductorBounds,
setTimeConductorMode,
waitForPlotsToRender
};

26
e2e/tests/functional/plugins/telemetryTable/telemetryTable.e2e.spec.js
View File

@ -20,10 +20,31 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
import { createDomainObjectWithDefaults, setTimeConductorBounds } from '../../../../appActions.js';
import {
createDomainObjectWithDefaults,
setTimeConductorBounds,
setTimeConductorMode
} from '../../../../appActions.js';
import { expect, test } from '../../../../pluginFixtures.js';
test.describe('Telemetry Table', () => {
let table;
test.beforeEach(async ({ page }) => {
await page.goto('./', { waitUntil: 'domcontentloaded' });
table = await createDomainObjectWithDefaults(page, { type: 'Telemetry Table' });
});
test('Limits to 50 rows by default', async ({ page }) => {
await createDomainObjectWithDefaults(page, {
type: 'Sine Wave Generator',
parent: table.uuid
});
await page.goto(table.url);
await setTimeConductorMode(page, false);
const rows = page.getByLabel('table content').getByLabel('Table Row');
await expect(rows).toHaveCount(50);
});
test('unpauses and filters data when paused by button and user changes bounds', async ({
page
}) => {
@ -34,7 +55,6 @@ test.describe('Telemetry Table', () => {
await page.goto('./', { waitUntil: 'domcontentloaded' });
const table = await createDomainObjectWithDefaults(page, { type: 'Telemetry Table' });
await createDomainObjectWithDefaults(page, {
type: 'Sine Wave Generator',
parent: table.uuid
@ -78,7 +98,6 @@ test.describe('Telemetry Table', () => {
test('Supports filtering telemetry by regular text search', async ({ page }) => {
await page.goto('./', { waitUntil: 'domcontentloaded' });
const table = await createDomainObjectWithDefaults(page, { type: 'Telemetry Table' });
await createDomainObjectWithDefaults(page, {
type: 'Event Message Generator',
parent: table.uuid
@ -121,7 +140,6 @@ test.describe('Telemetry Table', () => {
test('Supports filtering using Regex', async ({ page }) => {
await page.goto('./', { waitUntil: 'domcontentloaded' });
const table = await createDomainObjectWithDefaults(page, { type: 'Telemetry Table' });
await createDomainObjectWithDefaults(page, {
type: 'Event Message Generator',
parent: table.uuid

2
e2e/tests/visual-a11y/imagery.visual.spec.js
View File

@ -75,8 +75,6 @@ test.describe('Visual - Example Imagery', () => {
await page.goto(exampleImagery.url, { waitUntil: 'domcontentloaded' });
await setRealTimeMode(page, true);
//Temporary to close the dialog
await page.getByLabel('Submit time offsets').click();
await expect(page.getByLabel('Image Wrapper')).toBeVisible();

6
src/plugins/telemetryTable/TelemetryTable.js
View File

@ -114,7 +114,11 @@ export default class TelemetryTable extends EventEmitter {
this.clearAndResubscribe();
}
updateRowLimit() {
updateRowLimit(rowLimit) {
if (rowLimit) {
this.rowLimit = rowLimit;
}
if (this.telemetryMode === 'performance') {
this.tableRows.setLimit(this.rowLimit);
} else {

18
src/plugins/telemetryTable/TelemetryTableType.js
View File

@ -21,7 +21,7 @@
*****************************************************************************/
export default function getTelemetryTableType(options = {}) {
const { telemetryMode = 'performance', persistModeChanges = true, rowLimit = 50 } = options;
const { telemetryMode = 'performance', persistModeChange = true, rowLimit = 50 } = options;
return {
name: 'Telemetry Table',
@ -32,12 +32,12 @@ export default function getTelemetryTableType(options = {}) {
form: [
{
key: 'telemetryMode',
name: 'Telemetry Mode',
name: 'Data Mode',
control: 'select',
options: [
{
value: 'performance',
name: 'Performance Mode'
name: 'Limited (Performance) Mode'
},
{
value: 'unlimited',
@ -48,15 +48,15 @@ export default function getTelemetryTableType(options = {}) {
property: ['configuration', 'telemetryMode']
},
{
name: 'Persist Telemetry Mode Changes',
name: 'Persist Data Mode Changes',
control: 'toggleSwitch',
cssClass: 'l-input',
key: 'persistModeChanges',
property: ['configuration', 'persistModeChanges']
key: 'persistModeChange',
property: ['configuration', 'persistModeChange']
},
{
name: 'Performance Mode Row Limit',
control: 'toggleSwitch',
name: 'Limited Data Mode Row Limit',
control: 'numberfield',
cssClass: 'l-input',
key: 'rowLimit',
property: ['configuration', 'rowLimit']
@ -68,7 +68,7 @@ export default function getTelemetryTableType(options = {}) {
columnWidths: {},
hiddenColumns: {},
telemetryMode,
persistModeChanges,
persistModeChange,
rowLimit
};
}

56
src/plugins/telemetryTable/components/TableComponent.vue
View File

@ -398,7 +398,8 @@ export default {
totalNumberOfRows: 0,
rowContext: {},
telemetryMode: configuration.telemetryMode,
persistModeChanges: configuration.persistModeChanges
persistModeChange: configuration.persistModeChange,
afterLoadActions: []
};
},
computed: {
@ -458,10 +459,8 @@ export default {
},
loading: {
handler(isLoading) {
if (isLoading) {
this.setLoadingPromise();
} else {
this.loadFinishResolve();
if (!isLoading) {
this.runAfterLoadActions();
}
if (this.viewActionsCollection) {
@ -538,6 +537,8 @@ export default {
this.table.on('outstanding-requests', this.outstandingRequests);
this.table.on('telemetry-staleness', this.handleStaleness);
this.table.configuration.on('change', this.handleConfigurationChanges);
this.table.tableRows.on('add', this.rowsAdded);
this.table.tableRows.on('remove', this.rowsRemoved);
this.table.tableRows.on('sort', this.throttledUpdateVisibleRows);
@ -567,6 +568,8 @@ export default {
this.table.off('outstanding-requests', this.outstandingRequests);
this.table.off('telemetry-staleness', this.handleStaleness);
this.table.configuration.off('change', this.handleConfigurationChanges);
this.table.tableRows.off('add', this.rowsAdded);
this.table.tableRows.off('remove', this.rowsRemoved);
this.table.tableRows.off('sort', this.throttledUpdateVisibleRows);
@ -581,11 +584,34 @@ export default {
this.table.destroy();
},
methods: {
setLoadingPromise() {
this.loadFinishResolve = null;
this.isFinishedLoading = new Promise((resolve, reject) => {
this.loadFinishResolve = resolve;
});
addToAfterLoadActions(func) {
this.afterLoadActions.push(func);
},
runAfterLoadActions() {
if (this.afterLoadActions.length > 0) {
this.afterLoadActions.forEach((action) => action());
this.afterLoadActions = [];
}
},
handleConfigurationChanges(changes) {
const { rowLimit, telemetryMode, persistModeChange } = changes;
this.persistModeChange = persistModeChange;
if (this.rowLimit !== rowLimit) {
this.rowLimit = rowLimit;
this.table.updateRowLimit(rowLimit);
if (this.telemetryMode !== telemetryMode) {
// need to clear and resubscribe, if different, handled below
this.table.clearAndResubscribe();
}
}
if (this.telemetryMode !== telemetryMode) {
this.telemetryMode = telemetryMode;
this.table.updateTelemetryMode(telemetryMode);
}
},
updateVisibleRows() {
if (!this.updatingView) {
@ -1042,7 +1068,7 @@ export default {
let row = allRows[i];
row.marked = true;
if (row !== baseRow) {
if (row !== baseRow && this.markedRows.indexOf(row) === -1) {
this.markedRows.push(row);
}
}
@ -1166,11 +1192,9 @@ export default {
{
label,
emphasis: true,
callback: async () => {
callback: () => {
this.addToAfterLoadActions(callback);
this.updateTelemetryMode();
await this.isFinishedLoading;
callback();
dialog.dismiss();
}
@ -1187,7 +1211,7 @@ export default {
updateTelemetryMode() {
this.telemetryMode = this.telemetryMode === 'unlimited' ? 'performance' : 'unlimited';
if (this.persistModeChanges) {
if (this.persistModeChange) {
this.table.configuration.setTelemetryMode(this.telemetryMode);
}

10
src/plugins/telemetryTable/components/TableFooterIndicator.vue
View File

@ -40,7 +40,7 @@
:title="rowCountTitle"
class="c-table-indicator__elem c-table-indicator__row-count"
>
{{ rowCount }} Rows
{{ rowCount }}
</span>
<span
@ -113,7 +113,7 @@ export default {
}
},
rowCount() {
return this.isUnlimitedMode ? this.totalRows : 'LATEST 50';
return this.isUnlimitedMode ? `${this.totalRows} ROWS` : `LATEST ${this.totalRows} ROWS`;
},
rowCountTitle() {
return this.isUnlimitedMode
@ -121,12 +121,12 @@ export default {
: 'performance mode limited to 50 rows';
},
telemetryModeButtonLabel() {
return this.isUnlimitedMode ? 'SHOW LATEST 50' : 'SHOW ALL';
return this.isUnlimitedMode ? 'SHOW LIMITED' : 'SHOW UNLIMITED';
},
telemetryModeButtonTitle() {
return this.isUnlimitedMode
? 'Change to Performance mode (latest 50 values)'
: 'Change to show all values';
? 'Change to Limited (Performance) Mode'
: 'Change to Unlimited Mode';
},
title() {
if (this.hasMixedFilters) {

4
src/plugins/telemetryTable/components/TableRow.vue
View File

@ -24,6 +24,7 @@
:style="{ top: rowTop }"
class="noselect"
:class="[rowClass, { 'is-selected': marked }]"
:aria-label="ariaLabel"
v-on="listeners"
>
<component
@ -99,6 +100,9 @@ export default {
};
},
computed: {
ariaLabel() {
return this.marked ? 'Selected Table Row' : 'Table Row';
},
listeners() {
let listenersObject = {
click: this.markRow

12
src/styles/_controls.scss
View File

@ -499,7 +499,9 @@ select {
color: $colorSelectFg;
box-shadow: $shdwSelect;
background-repeat: no-repeat, no-repeat;
background-position: right 0.4em top 80%, 0 0;
background-position:
right 0.4em top 80%,
0 0;
border: none;
border-radius: $controlCr;
padding: 2px 20px 2px $interiorMargin;
@ -718,15 +720,15 @@ select {
.c-super-menu__item-description {
flex: 1 1 70%;
[class*="__icon"] {
[class*='__icon'] {
display: none !important;
}
[class*="__name"] {
[class*='__name'] {
margin-top: 0 !important;
}
[class*="__item-description"] {
[class*='__item-description'] {
min-width: 200px;
}
}
@ -1133,7 +1135,7 @@ input[type='range'] {
// Hidden by default; requires a hover 1 - 3 levels above to display
@include transition(opacity, $transOutTime);
opacity: 0;
pointer-events: none;
pointer-events: auto;
}
}