[Telemetry Tables] Observe for changes in table configuration (#4053)

This commit is contained in:
Khalid Adil 2021-07-27 16:08:44 -05:00 committed by GitHub
parent eea23f2caf
commit c397c336ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 62 additions and 16 deletions

View File

@ -35,8 +35,8 @@ define([
this.removeColumnsForObject = this.removeColumnsForObject.bind(this);
this.objectMutated = this.objectMutated.bind(this);
//Make copy of configuration, otherwise change detection is impossible if shared instance is being modified.
this.oldConfiguration = JSON.parse(JSON.stringify(this.getConfiguration()));
this.unlistenFromMutation = openmct.objects.observe(domainObject, 'configuration', this.objectMutated);
}
getConfiguration() {
@ -58,14 +58,9 @@ define([
* @private
* @param {*} object
*/
objectMutated(object) {
//Synchronize domain object reference. Duplicate object otherwise change detection becomes impossible.
this.domainObject = object;
//Was it the configuration that changed?
if (object.configuration !== undefined && !_.eq(object.configuration, this.oldConfiguration)) {
//Make copy of configuration, otherwise change detection is impossible if shared instance is being modified.
this.oldConfiguration = JSON.parse(JSON.stringify(this.getConfiguration()));
this.emit('change', object.configuration);
objectMutated(configuration) {
if (configuration !== undefined) {
this.emit('change', configuration);
}
}
@ -162,7 +157,9 @@ define([
this.updateConfiguration(configuration);
}
destroy() {}
destroy() {
this.unlistenFromMutation();
}
}
return TelemetryTableConfiguration;

View File

@ -93,11 +93,6 @@ export default {
rowTop: (this.rowOffset + this.rowIndex) * this.rowHeight + 'px',
rowClass: this.row.getRowClass(),
cellLimitClasses: this.row.getCellLimitClasses(),
componentList: Object.keys(this.headers).reduce((components, header) => {
components[header] = this.row.getCellComponentName(header) || 'table-cell';
return components;
}, {}),
selectableColumns: Object.keys(this.row.columns).reduce((selectable, columnKeys) => {
selectable[columnKeys] = this.row.columns[columnKeys].selectable;
@ -125,6 +120,13 @@ export default {
}
return listenersObject;
},
componentList() {
return Object.keys(this.headers).reduce((components, header) => {
components[header] = this.row.getCellComponentName(header) || 'table-cell';
return components;
}, {});
}
},
// TODO: use computed properties

View File

@ -48,6 +48,7 @@ describe("the plugin", () => {
let tablePlugin;
let element;
let child;
let unlistenConfigMutation;
beforeEach((done) => {
openmct = createOpenMct();
@ -87,6 +88,10 @@ describe("the plugin", () => {
end: 1
});
if (unlistenConfigMutation) {
unlistenConfigMutation();
}
return resetApplicationState(openmct);
});
@ -154,6 +159,14 @@ describe("the plugin", () => {
range: 2
}
}]
},
configuration: {
hiddenColumns: {
name: false,
utc: false,
'some-key': false,
'some-other-key': false
}
}
};
const testTelemetry = [
@ -277,5 +290,39 @@ describe("the plugin", () => {
});
});
});
it("displays the correct number of column headers when the configuration is mutated", async () => {
const tableInstanceConfiguration = tableInstance.domainObject.configuration;
tableInstanceConfiguration.hiddenColumns['some-key'] = true;
unlistenConfigMutation = tableInstance.openmct.objects.mutate(tableInstance.domainObject, 'configuration', tableInstanceConfiguration);
await Vue.nextTick();
let tableHeaderElements = element.querySelectorAll('.c-telemetry-table__headers__label');
expect(tableHeaderElements.length).toEqual(3);
tableInstanceConfiguration.hiddenColumns['some-key'] = false;
unlistenConfigMutation = tableInstance.openmct.objects.mutate(tableInstance.domainObject, 'configuration', tableInstanceConfiguration);
await Vue.nextTick();
tableHeaderElements = element.querySelectorAll('.c-telemetry-table__headers__label');
expect(tableHeaderElements.length).toEqual(4);
});
it("displays the correct number of table cells in a row when the configuration is mutated", async () => {
const tableInstanceConfiguration = tableInstance.domainObject.configuration;
tableInstanceConfiguration.hiddenColumns['some-key'] = true;
unlistenConfigMutation = tableInstance.openmct.objects.mutate(tableInstance.domainObject, 'configuration', tableInstanceConfiguration);
await Vue.nextTick();
let tableRowCells = element.querySelectorAll('table.c-telemetry-table__body > tbody > tr:first-child td');
expect(tableRowCells.length).toEqual(3);
tableInstanceConfiguration.hiddenColumns['some-key'] = false;
unlistenConfigMutation = tableInstance.openmct.objects.mutate(tableInstance.domainObject, 'configuration', tableInstanceConfiguration);
await Vue.nextTick();
tableRowCells = element.querySelectorAll('table.c-telemetry-table__body > tbody > tr:first-child td');
expect(tableRowCells.length).toEqual(4);
});
});
});