allow before start bounds items while paging

src/api/telemetry/TelemetryCollection.js

@@ -181,6 +181,10 @@ export default class TelemetryCollection extends EventEmitter {
       this.unsubscribe();
     }
 
+    if (this.options.paging) {
+      return;
+    }
+
     this.unsubscribe = this.openmct.telemetry.subscribe(
       this.domainObject,
       (datum) => this._processNewTelemetry(datum),
@@ -188,6 +192,10 @@ export default class TelemetryCollection extends EventEmitter {
     );
   }
 
+  getLastTelemetryDatum() {
+    return this.boundedTelemetry[this.boundedTelemetry.length - 1];
+  }
+
   /**
    * Filter any new telemetry (add/page, historical, subscription) based on
    * time bounds and dupes
@@ -218,7 +226,9 @@ export default class TelemetryCollection extends EventEmitter {
 
       if (
         !afterEndOfBounds &&
-        (!beforeStartOfBounds || (this.isStrategyLatest && this.openmct.telemetry.greedyLAD()))
+        (!beforeStartOfBounds ||
+          (beforeStartOfBounds && this.options.paging) ||
+          (this.isStrategyLatest && this.openmct.telemetry.greedyLAD()))
       ) {
         let isDuplicate = false;
         let startIndex = this._sortedIndex(datum);
@@ -314,6 +324,10 @@ export default class TelemetryCollection extends EventEmitter {
       return;
     }
 
+    if (this.options.paging) {
+      return;
+    }
+
     let startChanged = this.lastBounds.start !== bounds.start;
     let endChanged = this.lastBounds.end !== bounds.end;
 

src/plugins/telemetryTable/TelemetryTable.js

@@ -111,6 +111,20 @@ define([
       }
     }
 
+    nextPage() {
+      const keystring = Object.keys(this.telemetryCollections)[0];
+      const lastDatum = this.telemetryCollections[keystring].getLastTelemetryDatum();
+      const timestampKey = this.openmct.time.timeSystem().key;
+      const domainObject = this.telemetryCollections[keystring].domainObject;
+      const metadata = this.openmct.telemetry.getMetadata(domainObject);
+      const formats = this.openmct.telemetry.getFormatMap(metadata);
+      const lastTimestamp = formats[timestampKey].parse(lastDatum);
+
+      // clear old collection, rerequest from last timestamp
+      this.removeTelemetryObject(domainObject.identifier);
+      this.addTelemetryObject(domainObject, lastTimestamp);
+    }
+
     createTableRowCollections() {
       this.tableRows = new TableRowCollection();
 
@@ -141,13 +155,19 @@ define([
       }
     }
 
-    addTelemetryObject(telemetryObject) {
+    addTelemetryObject(telemetryObject, start) {
       this.addColumnsForObject(telemetryObject, true);
 
       const keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
       let requestOptions = this.buildOptionsFromConfiguration(telemetryObject);
+      if (start) {
+        requestOptions.start = start;
+      }
       let columnMap = this.getColumnMapForObject(keyString);
       let limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
+      // hardcode 50 item limit
+      requestOptions.size = 50;
+      requestOptions.paging = true;
 
       const telemetryProcessor = this.getTelemetryProcessor(keyString, columnMap, limitEvaluator);
       const telemetryRemover = this.getTelemetryRemover();

src/plugins/telemetryTable/components/TableComponent.vue

@@ -266,6 +266,10 @@
         class="c-telemetry-table__footer"
         :marked-rows="markedRows.length"
         :total-rows="totalNumberOfRows"
+        :current-page="currentPage"
+        :items-per-page="itemsPerPage"
+        @prev-page="prevPage"
+        @next-page="nextPage"
       />
     </div>
   </div>
@@ -374,7 +378,9 @@ export default {
       enableRegexSearch: {},
       hideHeaders: configuration.hideHeaders,
       totalNumberOfRows: 0,
-      rowContext: {}
+      rowContext: {},
+      currentPage: 0,
+      itemsPerPage: 50
     };
   },
   computed: {
@@ -545,6 +551,16 @@ export default {
     this.table.destroy();
   },
   methods: {
+    prevPage() {
+      console.log('preve page');
+      if (this.currentPage !== 0) {
+        this.currentPage--;
+      }
+    },
+    nextPage() {
+      this.currentPage++;
+      this.table.nextPage();
+    },
     updateVisibleRows() {
       if (!this.updatingView) {
         this.updatingView = true;

src/plugins/telemetryTable/components/TableFooterIndicator.vue

@@ -20,6 +20,11 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
+  <div class="c-table-indicator">
+    <span :style="prevCSS" class="prev" @click="prevPage()">Prev</span>
+    <span class="current" style="padding: 0 10px 0 10px">{{ currentPageDisplay }}</span>
+    <span style="pointer: cursor" class="next" @click="nextPage()">Next</span>
+  </div>
   <div class="c-table-indicator" :class="{ 'is-filtering': filterNames.length > 0 }">
     <div
       v-if="filterNames.length > 0"
@@ -68,6 +73,14 @@ export default {
       type: Number,
       default: 0
     },
+    itemsPerPage: {
+      type: Number,
+      default: 1
+    },
+    currentPage: {
+      type: Number,
+      default: 0
+    },
     totalRows: {
       type: Number,
       default: 0
@@ -90,6 +103,20 @@ export default {
         return !_.isEqual(filtersToCompare, _.omit(filters, [USE_GLOBAL]));
       });
     },
+    currentPageDisplay() {
+      const start = (this.currentPage === 0 ? 0 : this.currentPage * this.itemsPerPage) + 1;
+      const end = (this.currentPage + 1) * this.itemsPerPage;
+
+      return `${start} - ${end}`;
+    },
+    prevCSS() {
+      return this.currentPage === 0
+        ? {
+            color: 'grey',
+            'pointer-events': 'none'
+          }
+        : {};
+    },
     label() {
       if (this.hasMixedFilters) {
         return FILTER_INDICATOR_LABEL_MIXED;
@@ -105,6 +132,11 @@ export default {
       }
     }
   },
+  watch: {
+    currentPage() {
+      console.log('cur page', this.currentPage);
+    }
+  },
   mounted() {
     let filters = this.table.configuration.getConfiguration().filters || {};
     this.table.configuration.on('change', this.handleConfigurationChanges);
@@ -114,6 +146,16 @@ export default {
     this.table.configuration.off('change', this.handleConfigurationChanges);
   },
   methods: {
+    prevPage() {
+      if (this.currentPage === 0) {
+        return;
+      }
+
+      this.$emit('prev-page');
+    },
+    nextPage() {
+      this.$emit('next-page');
+    },
     setFilterNames() {
       let names = [];
       let composition = this.openmct.composition.get(this.table.configuration.domainObject);