Incorporate IndicatorAPI into the Vue reactivity system

[ozyx]

Is your feature request related to a problem? Please describe.
In our IndicatorAPI we expect an HTMLElement in order to "go around" the Vue system and:

1. Mount HTMLElements dynamically (using this.$el.appendChild)
2. Maintain the framework-agnostic nature of the Open MCT API

This approach works, but can lose reactivity if we're not careful. Additionally, we can't conditionally render/un-render certain indicators based on API-wide settings such as User Role. This approach also has performance implications, since we create an Anonymous Vue component and mount an additional Vue app for each indicator.

Describe the solution you'd like

We should avoid using mount() and creating a whole new Vue app for each indicator.

With Vue 3, there are better ways to wrap HTMLElements as Vue components (using render functions) so we can maintain Open MCT's framework-agnostic nature, while also keeping the indicators within the same main Vue app. Additionally, we can support rendering Vue components directly via a new, optional property on indicators.

[akhenry]

[ozyx]

Hah! I realized this after I made the meme so I let it slide :)

WHAT IF I TOLD YOU

WE CAN (eventually) HAVE ONLY ONE VUE APP

I guess would be the correct text

[ozyx]

Testing Instructions

1. Load Open MCT locally in its default configuration
2. Verify that all default Indicators appear and are functional (snapshot, clock, clearData, notifications)
3. Load Open MCT VIPER
4. Verify that all indicators appear and are functional (indicators listed above, plus Couch DB status, etc.)
5. Open the console and install the Performance Indicator by using the command: this.openmct.install(this.openmct.plugins.PerformanceIndicator())
6. Verify it appears in the status bar immediately and dynamically updates

[davetsay]

verified