From 64862634f303abbb03ae206063d9238b1d041d9a Mon Sep 17 00:00:00 2001 From: Jamie V Date: Wed, 13 Mar 2024 09:25:51 -0700 Subject: [PATCH] [Telemetry Table] Address issues found during testing Table Performance (#7529) Fix exporting from Limited Mode: #7268 (comment) Fix UI issues: #7268 (comment) Apply configuration changes made in Edit Properties. --------- Co-authored-by: Jesse Mazzella Co-authored-by: Andrew Henry --- e2e/appActions.js | 2 + .../telemetryTable/telemetryTable.e2e.spec.js | 26 +++++++-- e2e/tests/visual-a11y/imagery.visual.spec.js | 2 - src/plugins/telemetryTable/TelemetryTable.js | 6 +- .../telemetryTable/TelemetryTableType.js | 18 +++--- .../components/TableComponent.vue | 56 +++++++++++++------ .../components/TableFooterIndicator.vue | 10 ++-- .../telemetryTable/components/TableRow.vue | 4 ++ src/styles/_controls.scss | 12 ++-- 9 files changed, 94 insertions(+), 42 deletions(-) diff --git a/e2e/appActions.js b/e2e/appActions.js index 0dcfbb3617..88995b80da 100644 --- a/e2e/appActions.js +++ b/e2e/appActions.js @@ -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 }; diff --git a/e2e/tests/functional/plugins/telemetryTable/telemetryTable.e2e.spec.js b/e2e/tests/functional/plugins/telemetryTable/telemetryTable.e2e.spec.js index 4ce30f034e..f46dbd48fd 100644 --- a/e2e/tests/functional/plugins/telemetryTable/telemetryTable.e2e.spec.js +++ b/e2e/tests/functional/plugins/telemetryTable/telemetryTable.e2e.spec.js @@ -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 diff --git a/e2e/tests/visual-a11y/imagery.visual.spec.js b/e2e/tests/visual-a11y/imagery.visual.spec.js index 78de781dd5..bb0c343c2a 100644 --- a/e2e/tests/visual-a11y/imagery.visual.spec.js +++ b/e2e/tests/visual-a11y/imagery.visual.spec.js @@ -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(); diff --git a/src/plugins/telemetryTable/TelemetryTable.js b/src/plugins/telemetryTable/TelemetryTable.js index 07d5e52d0e..d4ccd0aa39 100644 --- a/src/plugins/telemetryTable/TelemetryTable.js +++ b/src/plugins/telemetryTable/TelemetryTable.js @@ -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 { diff --git a/src/plugins/telemetryTable/TelemetryTableType.js b/src/plugins/telemetryTable/TelemetryTableType.js index 09e728114e..7be847043f 100644 --- a/src/plugins/telemetryTable/TelemetryTableType.js +++ b/src/plugins/telemetryTable/TelemetryTableType.js @@ -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 }; } diff --git a/src/plugins/telemetryTable/components/TableComponent.vue b/src/plugins/telemetryTable/components/TableComponent.vue index ced8dcf64d..205f82373c 100644 --- a/src/plugins/telemetryTable/components/TableComponent.vue +++ b/src/plugins/telemetryTable/components/TableComponent.vue @@ -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); } diff --git a/src/plugins/telemetryTable/components/TableFooterIndicator.vue b/src/plugins/telemetryTable/components/TableFooterIndicator.vue index ed0797019d..63d7c1db7b 100644 --- a/src/plugins/telemetryTable/components/TableFooterIndicator.vue +++ b/src/plugins/telemetryTable/components/TableFooterIndicator.vue @@ -40,7 +40,7 @@ :title="rowCountTitle" class="c-table-indicator__elem c-table-indicator__row-count" > - {{ rowCount }} Rows + {{ rowCount }}