Don't change sort order when changing performance mode (#7810)

* adding an option to no swap order to initiatSort

* debug

* defaulting to desc order for requests if there is not saved order

* adding some common constants

* replace all got into a comment

---------

Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>

src/plugins/telemetryTable/TelemetryTable.js

@@ -25,6 +25,7 @@ import _ from 'lodash';
 
 import StalenessUtils from '../../utils/staleness.js';
 import TableRowCollection from './collections/TableRowCollection.js';
+import { MODE, ORDER } from './constants.js';
 import TelemetryTableColumn from './TelemetryTableColumn.js';
 import TelemetryTableConfiguration from './TelemetryTableConfiguration.js';
 import TelemetryTableNameColumn from './TelemetryTableNameColumn.js';
@@ -119,7 +120,7 @@ export default class TelemetryTable extends EventEmitter {
       this.rowLimit = rowLimit;
     }
 
-    if (this.telemetryMode === 'performance') {
+    if (this.telemetryMode === MODE.PERFORMANCE) {
       this.tableRows.setLimit(this.rowLimit);
     } else {
       this.tableRows.removeLimit();
@@ -135,7 +136,7 @@ export default class TelemetryTable extends EventEmitter {
     //If no persisted sort order, default to sorting by time system, descending.
     sortOptions = sortOptions || {
       key: this.openmct.time.getTimeSystem().key,
-      direction: 'desc'
+      direction: ORDER.DESCENDING
     };
 
     this.updateRowLimit();
@@ -172,10 +173,9 @@ export default class TelemetryTable extends EventEmitter {
     this.removeTelemetryCollection(keyString);
 
     let sortOptions = this.configuration.getConfiguration().sortOptions;
-    requestOptions.order =
-      sortOptions?.direction ?? (this.telemetryMode === 'performance' ? 'desc' : 'asc');
+    requestOptions.order = sortOptions?.direction ?? ORDER.DESCENDING; // default to descending
 
-    if (this.telemetryMode === 'performance') {
+    if (this.telemetryMode === MODE.PERFORMANCE) {
       requestOptions.size = this.rowLimit;
       requestOptions.enforceSize = true;
     }

src/plugins/telemetryTable/TelemetryTableType.js

@@ -20,6 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import { MODE } from './constants.js';
+
 export default function getTelemetryTableType(options) {
   let { telemetryMode, persistModeChange, rowLimit } = options;
 
@@ -36,11 +38,11 @@ export default function getTelemetryTableType(options) {
         control: 'select',
         options: [
           {
-            value: 'performance',
+            value: MODE.PERFORMANCE,
             name: 'Limited (Performance) Mode'
           },
           {
-            value: 'unlimited',
+            value: MODE.UNLIMITED,
             name: 'Unlimited Mode'
           }
         ],

src/plugins/telemetryTable/collections/TableRowCollection.js

@@ -22,6 +22,7 @@
 import { EventEmitter } from 'eventemitter3';
 import _ from 'lodash';
 
+import { ORDER } from '../constants.js';
 /**
  * @constructor
  */
@@ -208,7 +209,7 @@ export default class TableRowCollection extends EventEmitter {
     const val1 = this.getValueForSortColumn(row1);
     const val2 = this.getValueForSortColumn(row2);
 
-    if (this.sortOptions.direction === 'asc') {
+    if (this.sortOptions.direction === ORDER.ASCENDING) {
       return val1 <= val2 ? row1 : row2;
     } else {
       return val1 >= val2 ? row1 : row2;
@@ -373,7 +374,7 @@ export default class TableRowCollection extends EventEmitter {
 
   getRows() {
     if (this.rowLimit && this.rows.length > this.rowLimit) {
-      if (this.sortOptions.direction === 'desc') {
+      if (this.sortOptions.direction === ORDER.DESCENDING) {
         return this.rows.slice(0, this.rowLimit);
       } else {
         return this.rows.slice(-this.rowLimit);

src/plugins/telemetryTable/components/TableComponent.vue

@@ -296,6 +296,7 @@ import ProgressBar from '../../../ui/components/ProgressBar.vue';
 import Search from '../../../ui/components/SearchComponent.vue';
 import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
 import { useResizeObserver } from '../../../ui/composables/resize.js';
+import { MODE, ORDER } from '../constants.js';
 import SizingRow from './SizingRow.vue';
 import TableColumnHeader from './TableColumnHeader.vue';
 import TableFooterIndicator from './TableFooterIndicator.vue';
@@ -713,7 +714,7 @@ export default {
     sortBy(columnKey) {
       let timeSystemKey = this.openmct.time.getTimeSystem().key;
 
-      if (this.telemetryMode === 'performance' && columnKey !== timeSystemKey) {
+      if (this.telemetryMode === MODE.PERFORMANCE && columnKey !== timeSystemKey) {
         this.confirmUnlimitedMode('Switch to Unlimited Telemetry and Sort', () => {
           this.initiateSort(columnKey);
         });
@@ -724,15 +725,15 @@ export default {
     initiateSort(columnKey) {
       // If sorting by the same column, flip the sort direction.
       if (this.sortOptions.key === columnKey) {
-        if (this.sortOptions.direction === 'asc') {
-          this.sortOptions.direction = 'desc';
+        if (this.sortOptions.direction === ORDER.ASCENDING) {
+          this.sortOptions.direction = ORDER.DESCENDING;
         } else {
-          this.sortOptions.direction = 'asc';
+          this.sortOptions.direction = ORDER.ASCENDING;
         }
       } else {
         this.sortOptions = {
           key: columnKey,
-          direction: 'desc'
+          direction: ORDER.DESCENDING
         };
       }
 
@@ -751,7 +752,7 @@ export default {
       }
     },
     shouldAutoScroll() {
-      if (this.sortOptions.direction === 'desc') {
+      if (this.sortOptions.direction === ORDER.DESCENDING) {
         return false;
       }
 
@@ -844,7 +845,7 @@ export default {
       return justTheData;
     },
     exportAllDataAsCSV() {
-      if (this.telemetryMode === 'performance') {
+      if (this.telemetryMode === MODE.PERFORMANCE) {
         this.confirmUnlimitedMode('Switch to Unlimited Telemetry and Export', () => {
           const data = this.getTableRowData();
 
@@ -1226,7 +1227,8 @@ export default {
       });
     },
     updateTelemetryMode() {
-      this.telemetryMode = this.telemetryMode === 'unlimited' ? 'performance' : 'unlimited';
+      this.telemetryMode =
+        this.telemetryMode === MODE.UNLIMITED ? MODE.PERFORMANCE : MODE.UNLIMITED;
 
       if (this.persistModeChange) {
         this.table.configuration.setTelemetryMode(this.telemetryMode);
@@ -1236,7 +1238,7 @@ export default {
 
       const timeSystemKey = this.openmct.time.getTimeSystem().key;
 
-      if (this.telemetryMode === 'performance' && this.sortOptions.key !== timeSystemKey) {
+      if (this.telemetryMode === MODE.PERFORMANCE && this.sortOptions.key !== timeSystemKey) {
         this.openmct.notifications.info(
           'Switched to Performance Mode: Table now sorted by time for optimized efficiency.'
         );

src/plugins/telemetryTable/components/TableFooterIndicator.vue

@@ -62,6 +62,8 @@
 <script>
 import _ from 'lodash';
 
+import { MODE } from '../constants.js';
+
 const FILTER_INDICATOR_LABEL = 'Filters:';
 const FILTER_INDICATOR_LABEL_MIXED = 'Mixed Filters:';
 const FILTER_INDICATOR_TITLE = 'Data filters are being applied to this view.';
@@ -81,7 +83,7 @@ export default {
     },
     telemetryMode: {
       type: String,
-      default: 'performance'
+      default: MODE.PERFORMANCE
     }
   },
   emits: ['telemetry-mode-change'],
@@ -103,7 +105,7 @@ export default {
       });
     },
     isUnlimitedMode() {
-      return this.telemetryMode === 'unlimited';
+      return this.telemetryMode === MODE.UNLIMITED;
     },
     label() {
       if (this.hasMixedFilters) {

src/plugins/telemetryTable/constants.js

@@ -0,0 +1,11 @@
+const ORDER = {
+  ASCENDING: 'asc',
+  DESCENDING: 'desc'
+};
+
+const MODE = {
+  PERFORMANCE: 'performance',
+  UNLIMITED: 'unlimited'
+};
+
+export { MODE, ORDER };

src/plugins/telemetryTable/plugin.js

@@ -20,13 +20,14 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import { MODE } from './constants.js';
 import TableConfigurationViewProvider from './TableConfigurationViewProvider.js';
 import getTelemetryTableType from './TelemetryTableType.js';
 import TelemetryTableViewProvider from './TelemetryTableViewProvider.js';
 import TelemetryTableViewActions from './ViewActions.js';
 
 export default function plugin(
-  options = { telemetryMode: 'performance', persistModeChange: true, rowLimit: 50 }
+  options = { telemetryMode: MODE.PERFORMANCE, persistModeChange: true, rowLimit: 50 }
 ) {
   return function install(openmct) {
     openmct.objectViews.addProvider(new TelemetryTableViewProvider(openmct, options));

src/plugins/telemetryTable/pluginSpec.js

@@ -28,6 +28,7 @@ import {
 } from 'utils/testing';
 import { nextTick } from 'vue';
 
+import { MODE } from './constants.js';
 import TablePlugin from './plugin.js';
 
 class MockDataTransfer {
@@ -198,7 +199,7 @@ describe('the plugin', () => {
           },
           persistModeChange: true,
           rowLimit: 50,
-          telemetryMode: 'performance'
+          telemetryMode: MODE.PERFORMANCE
         }
       };
       const testTelemetry = [