commit f9832b0edc48b349f6de2df419815ef38a6ae469
author Yoshie Muranaka <yoshiemuranaka@gmail.com> Tue May 12 12:04:46 2020 -0700
committer Yoshie Muranaka <yoshiemuranaka@gmail.com> Wed Jun 10 20:44:34 2020 +0000
tree 9af95f6163fb1371343526e8b09d631cdff058c8
parent c60d2e11286986a4ea9abd6e464857f22e7ad6ff

Add pagination to Event Log table

Created BvPaginationMixin for shared pagination values
and methods. Chose to use exising BoostrapVue components
as-is instead of wrapping in a custom component since
it would add unnecessary complexity.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I246d761d90db36efeb442b0ee1074b629d32edef

src/views/Health/EventLogs/EventLogs.vue

diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index 0238dbc..d7a64c9 100644
--- a/src/views/Health/EventLogs/EventLogs.vue
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -9,6 +9,7 @@
     <b-row>
       <b-col>
         <b-table
+          id="table-event-logs"
           :fields="fields"
           :items="filteredLogs"
           sort-icon-left
@@ -18,6 +19,8 @@
           sort-by="date"
           :sort-compare="onSortCompare"
           :empty-text="$t('pageEventLogs.table.emptyMessage')"
+          :per-page="perPage"
+          :current-page="currentPage"
         >
           <template v-slot:cell(severity)="{ value }">
             <status-icon :status="getStatus(value)" />
@@ -29,6 +32,31 @@
         </b-table>
       </b-col>
     </b-row>
+
+    <!-- Table pagination -->
+    <b-row>
+      <b-col class="d-md-flex justify-content-between">
+        <b-form-group
+          class="table-pagination-select"
+          :label="$t('global.table.itemsPerPage')"
+          label-for="pagination-items-per-page"
+        >
+          <b-form-select
+            id="pagination-items-per-page"
+            v-model="perPage"
+            :options="itemsPerPageOptions"
+          />
+        </b-form-group>
+        <b-pagination
+          v-model="currentPage"
+          first-number
+          last-number
+          :per-page="perPage"
+          :total-rows="getTotalRowCount(filteredLogs.length)"
+          aria-controls="table-event-logs"
+        />
+      </b-col>
+    </b-row>
   </b-container>
 </template>
 
@@ -39,12 +67,17 @@
 
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
+import BVPaginationMixin from '@/components/Mixins/BVPaginationMixin';
 
 const SEVERITY = ['OK', 'Warning', 'Critical'];
 
 export default {
-  components: { PageTitle, StatusIcon, TableFilter },
-  mixins: [LoadingBarMixin, TableFilterMixin],
+  components: {
+    PageTitle,
+    StatusIcon,
+    TableFilter
+  },
+  mixins: [LoadingBarMixin, TableFilterMixin, BVPaginationMixin],
   data() {
     return {
       fields: [