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

src/plugins/telemetryTable/TelemetryTableConfiguration.js

@@ -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) {
+        objectMutated(configuration) {
-            //Synchronize domain object reference. Duplicate object otherwise change detection becomes impossible.
+            if (configuration !== undefined) {
-            this.domainObject = object;
+                this.emit('change', configuration);
-            //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);
             }
         }
 
@@ -162,7 +157,9 @@ define([
             this.updateConfiguration(configuration);
         }
 
-        destroy() {}
+        destroy() {
+            this.unlistenFromMutation();
+        }
     }
 
     return TelemetryTableConfiguration;

src/plugins/telemetryTable/components/table-row.vue

@@ -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

src/plugins/telemetryTable/pluginSpec.js

@@ -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);
+        });
     });
 });