Vue makes telemetry collections reactive in Telemetry Tables

[akhenry]

Summary

In our telemetry tables Vue is making telemetry collections reactive which comes with a pretty heavy performance penalty. Some investigation is required to understand exactly why this is happening.

Expected vs Current Behavior

The expected behavior is that any collections of telemetry (including the tableRows and telemetryCollections) should remain non-reactive after Vue has mounted the telemetry table component. Ideally the entire TelemetryTable object, and all of its direct properties should remain non-reactive.

Pausing while the Telemetry Table component is running and inspecting the TelemetryTable object currently reveals that all of the properties have been replaced with reactive getters and setters:

If non-reactive, it would look like so:

Impact Check List

• [ ] Data loss or misrepresented data?
• [ ] Regression? Did this used to work or has it always been broken?
• [ ] Is there a workaround available?
• [x] Does this impact a critical component?
• [ ] Is this just a visual bug with no functional impact?

Additional Information

Vue is getting a reference to the TelemetryTable object via the TelemetryTable view, which itself is being made reactive by the ActionsCollection in Layout.vue which holds a reference to the view that the actions apply to. This means that all view objects are being reactified, so we need to be careful not to hold any references from them to objects that we do not want to become reactive.

[akhenry]

Testing Notes

This is a non-functional change, but it may introduce regressions in existing table functionality.

• Verify that tables display telemetry data
• Verify that filtering and sorting still work as expected
• Edit a table and verify that columns can be reordered, hidden, and shown as expected.

[michaelrogers]

There do no appear to be any regressions related to the telemetry table changes and so the fix is verified in testathon 04/25/2022.