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

6 files changed, 99 insertions, 2 deletions

diff --git a/src/assets/styles/vendor-overrides/bootstrap/_index.scss b/src/assets/styles/vendor-overrides/bootstrap/_index.scss
index d7634db9..8f80e5c4 100644
--- a/src/assets/styles/vendor-overrides/bootstrap/_index.scss
+++ b/src/assets/styles/vendor-overrides/bootstrap/_index.scss
@@ -7,5 +7,6 @@
 @import "./dropdown";
 @import "./forms";
 @import "./modal";
+@import "./pagination";
 @import "./tables";
 @import "./toasts";
\ No newline at end of file
diff --git a/src/assets/styles/vendor-overrides/bootstrap/_pagination.scss b/src/assets/styles/vendor-overrides/bootstrap/_pagination.scss
new file mode 100644
index 00000000..4fed21ba
--- /dev/null
+++ b/src/assets/styles/vendor-overrides/bootstrap/_pagination.scss
@@ -0,0 +1,20 @@
+.table-pagination-select {
+  display: flex;
+  flex-direction: row-reverse;
+  select {
+    width: fit-content;
+  }
+  label {
+    margin-left: $spacer;
+    line-height: $spacer * 2;
+  }
+}
+
+.b-pagination {
+  .page-item.active button {
+    color: $dark;
+    background-color: $white;
+    border-color: $border-color;
+    box-shadow: inset 0px -3px $primary;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Mixins/BVPaginationMixin.js b/src/components/Mixins/BVPaginationMixin.js
new file mode 100644
index 00000000..84c46aa4
--- /dev/null
+++ b/src/components/Mixins/BVPaginationMixin.js
@@ -0,0 +1,37 @@
+const BVPaginationMixin = {
+  data() {
+    return {
+      currentPage: 1,
+      perPage: 20,
+      itemsPerPageOptions: [
+        {
+          value: 10,
+          text: '10'
+        },
+        {
+          value: 20,
+          text: '20'
+        },
+        {
+          value: 30,
+          text: '30'
+        },
+        {
+          value: 40,
+          text: '40'
+        },
+        {
+          value: 0,
+          text: this.$t('global.table.viewAll')
+        }
+      ]
+    };
+  },
+  methods: {
+    getTotalRowCount(count) {
+      return this.perPage === 0 ? 0 : count;
+    }
+  }
+};
+
+export default BVPaginationMixin;
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index b48fdf04..a09047e9 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -43,6 +43,10 @@
       "success": "Success",
       "warning": "Warning",
       "informational": "Informational"
+    },
+    "table": {
+      "itemsPerPage": "Items per page",
+      "viewAll": "View all"
     }
   },
   "appHeader": {
diff --git a/src/main.js b/src/main.js
index 9e0502de..6896ec2f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -24,6 +24,7 @@ import {
   ModalPlugin,
   NavbarPlugin,
   NavPlugin,
+  PaginationPlugin,
   ProgressPlugin,
   TablePlugin,
   ToastPlugin,
@@ -87,6 +88,7 @@ Vue.use(ListGroupPlugin);
 Vue.use(ModalPlugin);
 Vue.use(NavbarPlugin);
 Vue.use(NavPlugin);
+Vue.use(PaginationPlugin);
 Vue.use(ProgressPlugin);
 Vue.use(TablePlugin);
 Vue.use(ToastPlugin);
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index 0238dbc7..d7a64c90 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 TableFilter from '@/components/Global/TableFilter';
 
 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: [