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
diff --git a/src/assets/styles/vendor-overrides/bootstrap/_index.scss b/src/assets/styles/vendor-overrides/bootstrap/_index.scss
index d7634db..8f80e5c 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 0000000..4fed21b
--- /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 0000000..84c46aa
--- /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 b48fdf0..a09047e 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 9e0502d..6896ec2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -24,6 +24,7 @@
ModalPlugin,
NavbarPlugin,
NavPlugin,
+ PaginationPlugin,
ProgressPlugin,
TablePlugin,
ToastPlugin,
@@ -87,6 +88,7 @@
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 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: [