testing lad tables in telemetry tables

.webpack/webpack.prod.js

@@ -23,5 +23,5 @@ module.exports = merge(common, {
             __OPENMCT_ROOT_RELATIVE__: '""'
         })
     ],
-    devtool: "source-map"
+    devtool: "eval-source-map"
 });

src/plugins/flexibleLayout/components/frame.vue

@@ -154,8 +154,11 @@ export default {
                 let originalClassName = this.dragGhost.classList[0];
                 this.dragGhost.className = '';
                 this.dragGhost.classList.add(originalClassName, iconClass);
+                this.dragGhost.textContent = '';
+                const span = document.createElement('span');
+                span.textContent = this.domainObject.name;
+                this.dragGhost.appendChild(span);
 
-                this.dragGhost.innerHTML = `<span>${this.domainObject.name}</span>`;
                 event.dataTransfer.setDragImage(this.dragGhost, 0, 0);
             }
 

src/plugins/plot/chart/MctChart.vue

@@ -20,12 +20,10 @@
  at runtime from the About dialog for additional information.
 -->
 
-<!-- eslint-disable vue/no-v-html -->
-
 <template>
 <div class="gl-plot-chart-area">
-    <span v-html="canvasTemplate"></span>
-    <span v-html="canvasTemplate"></span>
+    <canvas :style="canvasStyle"></canvas>
+    <canvas :style="canvasStyle"></canvas>
     <div
         ref="limitArea"
         class="js-limit-area"
@@ -132,10 +130,15 @@ export default {
             required: true
         }
     },
-    data() {
-        return {
-            canvasTemplate: '<canvas style="position: absolute; background: none; width: 100%; height: 100%;"></canvas>'
-        };
+    computed: {
+        canvasStyle() {
+            return {
+                position: 'absolute',
+                background: 'none',
+                width: '100%',
+                height: '100%'
+            };
+        }
     },
     watch: {
         highlights() {
@@ -418,7 +421,10 @@ export default {
             // Have to throw away the old canvas elements and replace with new
             // canvas elements in order to get new drawing contexts.
             const div = document.createElement('div');
-            div.innerHTML = this.canvasTemplate + this.canvasTemplate;
+            div.innerHTML = `
+            <canvas style="position: absolute; background: none; width: 100%; height: 100%;"></canvas>
+            <canvas style="position: absolute; background: none; width: 100%; height: 100%;"></canvas>
+            `;
             const mainCanvas = div.querySelectorAll("canvas")[1];
             const overlayCanvas = div.querySelectorAll("canvas")[0];
             this.canvas.parentNode.replaceChild(mainCanvas, this.canvas);

src/plugins/summaryWidget/src/Condition.js

@@ -194,7 +194,7 @@ define([
                     const options = this.generateSelectOptions();
 
                     newInput = document.createElement("select");
-                    newInput.innerHTML = options;
+                    newInput.appendChild(options);
 
                     emitChange = true;
                 } else {
@@ -224,12 +224,15 @@ define([
 
     Condition.prototype.generateSelectOptions = function () {
         let telemetryMetadata = this.conditionManager.getTelemetryMetadata(this.config.object);
-        let options = '';
+        let fragment = document.createDocumentFragment();
         telemetryMetadata[this.config.key].enumerations.forEach(enumeration => {
-            options += '<option value="' + enumeration.value + '">' + enumeration.string + '</option>';
+            const option = document.createElement('option');
+            option.value = enumeration.value;
+            option.textContent = enumeration.string;
+            fragment.appendChild(option);
         });
 
-        return options;
+        return fragment;
     };
 
     return Condition;

src/plugins/summaryWidget/src/Rule.js

@@ -165,7 +165,8 @@ define([
             document.querySelectorAll('.t-drag-indicator').forEach(indicator => {
                 // eslint-disable-next-line no-invalid-this
                 const ruleHeader = self.domElement.querySelectorAll('.widget-rule-header')[0].cloneNode(true);
-                indicator.innerHTML = ruleHeader;
+                indicator.textContent = '';
+                indicator.appendChild(ruleHeader);
             });
             self.widgetDnD.setDragImage(self.domElement.querySelectorAll('.widget-rule-header')[0].cloneNode(true));
             self.widgetDnD.dragStart(self.config.id);
@@ -235,8 +236,8 @@ define([
         this.listenTo(this.toggleConfigButton, 'click', toggleConfig);
         this.listenTo(this.trigger, 'change', onTriggerInput);
 
-        this.title.innerHTML = self.config.name;
-        this.description.innerHTML = self.config.description;
+        this.title.innerText = self.config.name;
+        this.description.innerText = self.config.description;
         this.trigger.value = self.config.trigger;
 
         this.listenTo(this.grippy, 'mousedown', onDragStart);
@@ -445,7 +446,7 @@ define([
                 const lastOfType = self.conditionArea.querySelector('li:last-of-type');
                 lastOfType.parentNode.insertBefore($condition, lastOfType);
                 if (loopCnt > 0) {
-                    $condition.querySelector('.t-condition-context').innerHTML = triggerContextStr + ' when';
+                    $condition.querySelector('.t-condition-context').innerText = triggerContextStr + ' when';
                 }
 
                 loopCnt++;
@@ -517,7 +518,7 @@ define([
         }
 
         description = (description === '' ? this.config.description : description);
-        this.description.innerHTML = self.config.description;
+        this.description.innerText = self.config.description;
         this.config.description = description;
     };
 

src/plugins/summaryWidget/src/SummaryWidget.js

@@ -229,9 +229,10 @@ define([
     SummaryWidget.prototype.updateWidget = function () {
         const WIDGET_ICON_CLASS = 'c-sw__icon js-sw__icon';
         const activeRule = this.rulesById[this.activeId];
+
         this.applyStyle(this.domElement.querySelector('#widget'), activeRule.getProperty('style'));
         this.domElement.querySelector('#widget').title = activeRule.getProperty('message');
-        this.domElement.querySelector('#widgetLabel').innerHTML = activeRule.getProperty('label');
+        this.domElement.querySelector('#widgetLabel').textContent = activeRule.getProperty('label');
         this.domElement.querySelector('#widgetIcon').classList = WIDGET_ICON_CLASS + ' ' + activeRule.getProperty('icon');
     };
 

src/plugins/summaryWidget/src/input/Palette.js

@@ -49,11 +49,12 @@ define([
         self.setNullOption(this.nullOption);
 
         self.items.forEach(function (item) {
-            const itemElement = `<div class = "c-palette__item ${item}" data-item = "${item}"></div>`;
-            const temp = document.createElement('div');
-            temp.innerHTML = itemElement;
-            self.itemElements[item] = temp.firstChild;
-            self.domElement.querySelector('.c-palette__items').appendChild(temp.firstChild);
+            const itemElement = document.createElement('div');
+            itemElement.className = 'c-palette__item ' + item;
+            itemElement.setAttribute('data-item', item);
+
+            self.itemElements[item] = itemElement;
+            self.domElement.querySelector('.c-palette__items').appendChild(itemElement);
         });
 
         self.domElement.querySelector('.c-menu').style.display = 'none';

src/plugins/summaryWidget/src/views/SummaryWidgetView.js

@@ -1,38 +1,60 @@
-define([
-    './summary-widget.html',
-    '@braintree/sanitize-url'
-], function (
-    summaryWidgetTemplate,
-    urlSanitizeLib
-) {
-    const WIDGET_ICON_CLASS = 'c-sw__icon js-sw__icon';
+import * as urlSanitizeLib from '@braintree/sanitize-url';
 
-    function SummaryWidgetView(domainObject, openmct) {
+const WIDGET_ICON_CLASS = 'c-sw__icon js-sw__icon';
+
+class SummaryWidgetView {
+    #createSummaryWidgetTemplate() {
+        const anchor = document.createElement('a');
+        anchor.classList.add(
+            't-summary-widget',
+            'c-summary-widget',
+            'js-sw',
+            'u-links',
+            'u-fills-container'
+        );
+
+        const widgetIcon = document.createElement('div');
+        widgetIcon.id = 'widgetIcon';
+        widgetIcon.classList.add('c-sw__icon', 'js-sw__icon');
+        anchor.appendChild(widgetIcon);
+
+        const widgetLabel = document.createElement('div');
+        widgetLabel.id = 'widgetLabel';
+        widgetLabel.classList.add('c-sw__label', 'js-sw__label');
+        widgetLabel.textContent = 'Loading...';
+        anchor.appendChild(widgetLabel);
+
+        return anchor;
+    }
+
+    constructor(domainObject, openmct) {
         this.openmct = openmct;
         this.domainObject = domainObject;
         this.hasUpdated = false;
         this.render = this.render.bind(this);
     }
 
-    SummaryWidgetView.prototype.updateState = function (datum) {
+    updateState(datum) {
         this.hasUpdated = true;
         this.widget.style.color = datum.textColor;
         this.widget.style.backgroundColor = datum.backgroundColor;
         this.widget.style.borderColor = datum.borderColor;
         this.widget.title = datum.message;
         this.label.title = datum.message;
-        this.label.innerHTML = datum.ruleLabel;
+        this.label.textContent = datum.ruleLabel;
         this.icon.className = WIDGET_ICON_CLASS + ' ' + datum.icon;
-    };
+    }
 
-    SummaryWidgetView.prototype.render = function () {
+    render() {
         if (this.unsubscribe) {
             this.unsubscribe();
         }
 
         this.hasUpdated = false;
 
-        this.container.innerHTML = summaryWidgetTemplate;
+        const anchor = this.#createSummaryWidgetTemplate();
+        this.container.appendChild(anchor);
+
         this.widget = this.container.querySelector('a');
         this.icon = this.container.querySelector('#widgetIcon');
         this.label = this.container.querySelector('.js-sw__label');
@@ -52,26 +74,32 @@ define([
 
         const renderTracker = {};
         this.renderTracker = renderTracker;
-        this.openmct.telemetry.request(this.domainObject, {
-            strategy: 'latest',
-            size: 1
-        }).then(function (results) {
-            if (this.destroyed
-                || this.hasUpdated
-                || this.renderTracker !== renderTracker
-                || results.length === 0) {
-                return;
-            }
 
-            this.updateState(results[results.length - 1]);
-        }.bind(this));
+        this.openmct.telemetry
+            .request(this.domainObject, {
+                strategy: 'latest',
+                size: 1
+            })
+            .then((results) => {
+                if (
+                    this.destroyed ||
+          this.hasUpdated ||
+          this.renderTracker !== renderTracker ||
+          results.length === 0
+                ) {
+                    return;
+                }
 
-        this.unsubscribe = this.openmct
-            .telemetry
-            .subscribe(this.domainObject, this.updateState.bind(this));
-    };
+                this.updateState(results[results.length - 1]);
+            });
 
-    SummaryWidgetView.prototype.show = function (container) {
+        this.unsubscribe = this.openmct.telemetry.subscribe(
+            this.domainObject,
+            this.updateState.bind(this)
+        );
+    }
+
+    show(container) {
         this.container = container;
         this.render();
         this.removeMutationListener = this.openmct.objects.observe(
@@ -80,14 +108,14 @@ define([
             this.onMutation.bind(this)
         );
         this.openmct.time.on('timeSystem', this.render);
-    };
+    }
 
-    SummaryWidgetView.prototype.onMutation = function (domainObject) {
+    onMutation(domainObject) {
         this.domainObject = domainObject;
         this.render();
-    };
+    }
 
-    SummaryWidgetView.prototype.destroy = function (container) {
+    destroy() {
         this.unsubscribe();
         this.removeMutationListener();
         this.openmct.time.off('timeSystem', this.render);
@@ -96,8 +124,7 @@ define([
         delete this.label;
         delete this.openmct;
         delete this.domainObject;
-    };
+    }
+}
 
-    return SummaryWidgetView;
-
-});
+export default SummaryWidgetView;

src/plugins/summaryWidget/src/views/summary-widget.html

@@ -1,4 +0,0 @@
-<a class="t-summary-widget c-summary-widget js-sw u-links u-fills-container">
-    <div id="widgetIcon" class="c-sw__icon js-sw__icon"></div>
-    <div id="widgetLabel" class="c-sw__label js-sw__label">Loading...</div>
-</a>

src/plugins/telemetryTable/TelemetryTable.js

@@ -140,6 +140,8 @@ define([
 
             const keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
             let requestOptions = this.buildOptionsFromConfiguration(telemetryObject);
+            requestOptions.strategy = 'latest';
+            requestOptions.size = 1;
             let columnMap = this.getColumnMapForObject(keyString);
             let limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
 

src/utils/template/templateHelpers.js

@@ -1,8 +1,17 @@
 export function convertTemplateToHTML(templateString) {
-    const template = document.createElement('template');
-    template.innerHTML = templateString;
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(templateString, 'text/html');
 
-    return template.content.cloneNode(true).children;
+    // Create a document fragment to hold the parsed content
+    const fragment = document.createDocumentFragment();
+
+    // Append nodes from the parsed content to the fragment
+    while (doc.body.firstChild) {
+        fragment.appendChild(doc.body.firstChild);
+    }
+
+    // Convert children of the fragment to an array and return
+    return Array.from(fragment.children);
 }
 
 export function toggleClass(element, className) {