Committed as reference

index.html

@@ -194,6 +194,7 @@
             ['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked'],
             {indicator: true}
         ));
+        openmct.install(openmct.plugins.CodeWalkthrough);
         openmct.start();
     </script>
 </html>

src/plugins/codeWalkthrough/plugin.js

@@ -0,0 +1,71 @@
+import Vue from 'Vue';
+
+export default function install(openmct) {
+    openmct.objectViews.addProvider({
+        name: "Latest Data Table",
+        key: "latest-table",
+        cssClass: "icon-packet",
+        description: "A tabular view of telemetry contents.",
+        canView: function () {
+            return true;
+        },
+        view: function (domainObject) {
+            let unsubscribe;
+
+            return {
+                show: function (element) {
+                    //element.innerText = 'Hello World!';
+                    let telemetryMetadata = openmct.telemetry.getMetadata(domainObject).values();
+                    let tableEl = document.createElement('table');
+                    let tableHeader = document.createElement('thead');
+                    let tableHeaderRow = document.createElement('tr');
+                    let tableBody = document.createElement('tbody');
+
+                    element.appendChild(tableEl);
+                    tableHeader.appendChild(tableHeaderRow);
+                    tableEl.appendChild(tableHeader);
+                    tableEl.appendChild(tableBody);
+
+                    telemetryMetadata.forEach(metadatum => {
+                        let tableHeader = document.createElement('td');
+                        tableHeader.innerText = metadatum.name;
+                        tableHeaderRow.appendChild(tableHeader);
+                    });
+
+                    openmct.time.on('bounds', (newBounds) => {
+                        tableBody.innerHTML = '';
+                        requestTelemetry(newBounds);
+                    });
+
+                    requestTelemetry();
+
+                    // unsubscribe = openmct.telemetry.subscribe(domainObject, (datum) => {
+                    //     addRow(datum);
+                    // });
+
+                    function addRow(telemetryDatum) {
+                        let dataRow = document.createElement('tr');
+                        telemetryMetadata.forEach(metadatum => {
+                            let tableCell = document.createElement('td');
+                            let formatter = openmct.telemetry.getValueFormatter(metadatum);
+
+                            tableCell.innerText = formatter.format(telemetryDatum[metadatum.key]);
+                            dataRow.appendChild(tableCell);
+                            tableBody.appendChild(dataRow);
+                        });
+                    }
+
+                    function requestTelemetry(bounds) {
+                        openmct.telemetry.request(domainObject, {bounds}).then(arrayOfTelemetry => {
+                            arrayOfTelemetry.forEach(addRow);
+                        });
+                    }
+                },
+                destroy: function (element) {
+                    unsubscribe();
+                }
+            };
+        }
+    });
+
+}

src/plugins/plugins.js

@@ -65,7 +65,8 @@ define([
     './interceptors/plugin',
     './performanceIndicator/plugin',
     './CouchDBSearchFolder/plugin',
-    './timeline/plugin'
+    './timeline/plugin',
+    './codeWalkthrough/plugin'
 ], function (
     _,
     UTCTimeSystem,
@@ -111,7 +112,8 @@ define([
     ObjectInterceptors,
     PerformanceIndicator,
     CouchDBSearchFolder,
-    Timeline
+    Timeline,
+    codeWalkthroughPlugin
 ) {
     const bundleMap = {
         LocalStorage: 'platform/persistence/local',
@@ -212,6 +214,7 @@ define([
     plugins.PerformanceIndicator = PerformanceIndicator.default;
     plugins.CouchDBSearchFolder = CouchDBSearchFolder.default;
     plugins.Timeline = Timeline.default;
+    plugins.CodeWalkthrough = codeWalkthroughPlugin.default;
 
     return plugins;
 });