Vue tables followup work. (#2162)

- Allow 'editable' property on view providers to optionally be a function
 - CSVExporter now only exports visible columns. Updated CSVExporter to ES6 exports / imports
 - Shortcut sortedIndex in insert if value is outside of first or last value in collection
 - Added table view icon

platform/commonUI/edit/src/policies/EditActionPolicy.js

@@ -55,7 +55,7 @@ define(
 
             // A view is editable unless explicitly flagged as not
             (views || []).forEach(function (view) {
-                if (view.editable === true ||
+                if (isEditable(view) ||
                     (view.key === 'plot' && type.getKey() === 'telemetry.panel') ||
                     (view.key === 'table' && type.getKey() === 'table') ||
                     (view.key === 'rt-table' && type.getKey() === 'rttable')
@@ -64,6 +64,14 @@ define(
                 }
             });
 
+            function isEditable(view) {
+                if (typeof view.editable === Function) {
+                    return view.editable(domainObject.useCapability('adapter'));
+                } else {
+                    return view.editable === true;
+                }
+            }
+
             return count;
         };
 

src/exporters/CSVExporter.js

@@ -20,10 +20,9 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
+import CSV from 'comma-separated-values';
-    'csv',
+import {saveAs} from 'file-saver/FileSaver';
-    'saveAs'
+
-], function (CSV, saveAs) {
 class CSVExporter {
     export(rows, options) {
         let headers = (options && options.headers) ||
@@ -33,7 +32,6 @@ define([
         let blob = new Blob([csvText], { type: "text/csv" });
         saveAs(blob, filename);
     }
-    }
+};
 
-    return CSVExporter;
+export default CSVExporter;
-});

src/plugins/telemetryTable/TelemetryTableRow.js

@@ -30,10 +30,9 @@ define([], function () {
             this.objectKeyString = objectKeyString;
         }
         
-        getFormattedDatum() {
+        getFormattedDatum(headers) {
-            return Object.values(this.columns)
+            return Object.keys(headers).reduce((formattedDatum, columnKey) => {
-                .reduce((formattedDatum, column) => {
+                formattedDatum[columnKey] = this.getFormattedValue(columnKey);
-                    formattedDatum[column.getKey()] = this.getFormattedValue(column.getKey());
                 return formattedDatum;
             }, {});
         }

src/plugins/telemetryTable/TelemetryTableViewProvider.js

@@ -35,12 +35,15 @@ define([
         return {
             key: 'table',
             name: 'Telemetry Table',
-            editable: true,
+            cssClass: 'icon-tabular-realtime',
+            editable: function(domainObject) {
+                return domainObject.type === 'table';
+            },
             canView: function (domainObject) {
                 return domainObject.type === 'table' || domainObject.hasOwnProperty('telemetry');
             },
             view: function (domainObject) {
-                let csvExporter = new CSVExporter();
+                let csvExporter = new CSVExporter.default();
                 let table = new TelemetryTable(domainObject, openmct);
                 let component;
                 return {

src/plugins/telemetryTable/collections/SortedTableRowCollection.js

@@ -82,8 +82,7 @@ define(
                 // Going to check for duplicates. Bound the search problem to
                 // items around the given time. Use sortedIndex because it
                 // employs a binary search which is O(log n). Can use binary search
-                // based on time stamp because the array is guaranteed ordered due
+                // because the array is guaranteed ordered due to sorted insertion.
-                // to sorted insertion.
                 let startIx = this.sortedIndex(this.rows, row);
                 let endIx = undefined;
 
@@ -113,15 +112,37 @@ define(
              * @private
              */
             sortedIndex(rows, testRow, lodashFunction) {
+                if (this.rows.length === 0) {
+                    return 0;
+                }
+                
                 const sortOptionsKey = this.sortOptions.key;
+                const testRowValue = testRow.datum[sortOptionsKey];
+                const firstValue = this.rows[0].datum[sortOptionsKey];
+                const lastValue = this.rows[this.rows.length - 1].datum[sortOptionsKey];
+
                 lodashFunction = lodashFunction || _.sortedIndex;
 
                 if (this.sortOptions.direction === 'asc') {
+                    if (testRowValue > lastValue) {
+                        return this.rows.length;
+                    } else if (testRowValue === lastValue) {
+                        return this.rows.length - 1;
+                    } else if (testRowValue <= firstValue) {
+                        return 0;
+                    } else {
                         return lodashFunction(rows, testRow, (thisRow) => {
                             return thisRow.datum[sortOptionsKey];
                         });
+                    }
+                } else {
+                    if (testRowValue >= firstValue) {
+                        return 0;
+                    } else if (testRowValue < lastValue) {
+                        return this.rows.length;
+                    } else if (testRowValue === lastValue) {
+                        return this.rows.length - 1;
                     } else {
-                    const testRowValue = testRow.datum[this.sortOptions.key];
                         // Use a custom comparison function to support descending sort.
                         return lodashFunction(rows, testRow, (thisRow) => {
                             const thisRowValue = thisRow.datum[sortOptionsKey];
@@ -135,6 +156,7 @@ define(
                         });
                     }
                 }
+            }
 
             /**
              * Sorts the telemetry collection based on the provided sort field

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

@@ -15,7 +15,7 @@ export default {
     data: function () {
         return {
             rowTop: (this.rowOffset + this.rowIndex) * this.rowHeight + 'px',
-            formattedRow: this.row.getFormattedDatum(),
+            formattedRow: this.row.getFormattedDatum(this.headers),
             rowLimitClass: this.row.getRowLimitClass(),
             cellLimitClasses: this.row.getCellLimitClasses()
         }
@@ -59,7 +59,7 @@ export default {
             this.rowTop = (rowOffset + this.rowIndex) * this.rowHeight + 'px';
         },
         formatRow: function (row) {
-            this.formattedRow = row.getFormattedDatum();
+            this.formattedRow = row.getFormattedDatum(this.headers);
             this.rowLimitClass = row.getRowLimitClass();
             this.cellLimitClasses = row.getCellLimitClasses();
         }

src/plugins/telemetryTable/components/table.vue

@@ -282,7 +282,6 @@ export default {
     data() {
         return {
             headers: {},
-            headersCount: 0,
             visibleRows: [],
             columnWidths: [],
             sizingRows: {},
@@ -346,7 +345,6 @@ export default {
             let headers = this.table.configuration.getVisibleHeaders();
 
             this.headers = headers;
-            this.headersCount = Object.values(headers).length;
             this.$nextTick().then(this.calculateColumnWidths);
         },
         setSizingTableWidth() {
@@ -454,12 +452,12 @@ export default {
             }
         },
         exportAsCSV() {
+            const headerKeys = Object.keys(this.headers);
             const justTheData = this.table.filteredRows.getRows()
-                .map(row => row.getFormattedDatum());
+                .map(row => row.getFormattedDatum(this.headers));
-            const headers = Object.keys(this.headers);
             this.csvExporter.export(justTheData, {
                 filename: this.table.domainObject.name + '.csv',
-                headers: headers
+                headers: headerKeys
             });
         },
         outstandingRequests(loading) {