initial commit

src/plugins/telemetryTable/TelemetryTable.js

@@ -148,6 +148,8 @@ define([
       let requestOptions = this.buildOptionsFromConfiguration(telemetryObject);
       let columnMap = this.getColumnMapForObject(keyString);
       let limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
+      // hardcode 50 item limit
+      requestOptions.size = 50;
 
       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,15 @@ export default {
     this.table.destroy();
   },
   methods: {
+    prevPage() {
+      console.log('preve page');
+      if (this.currentPage !== 0) {
+        this.currentPage--;
+      }
+    },
+    nextPage() {
+      this.currentPage++;
+    },
     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);