Show total and filtered number of items in a table
-The total number of items and the filtered items will be shown in the
EventLogs, Sensors and HardwareStatus table.
Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I0ee6410bf675038a350a71a02ec076f9e8baf004
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index dcede59..e7d4895 100644
--- a/src/views/Health/EventLogs/EventLogs.vue
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -2,18 +2,19 @@
<b-container fluid="xl">
<page-title />
<b-row class="mb-3">
- <b-col
- sm="8"
- md="7"
- xl="4"
- class="mb-2 mb-xl-0 d-flex flex-column justify-content-end"
- >
+ <b-col sm="7" xl="4" class="d-flex flex-column justify-content-end">
<search
:placeholder="$t('pageEventLogs.table.searchLogs')"
@changeSearch="onChangeSearchInput"
/>
</b-col>
- <b-col sm="8" md="7" xl="5" offset-xl="3">
+ <b-col sm="3" class="d-flex flex-column justify-content-end">
+ <table-cell-count
+ :filtered-items-count="filteredRows"
+ :total-number-of-cells="allLogs.length"
+ ></table-cell-count>
+ </b-col>
+ <b-col sm="8" md="7" xl="5">
<table-date-filter @change="onChangeDateTimeFilter" />
</b-col>
</b-row>
@@ -57,6 +58,7 @@
:per-page="perPage"
:current-page="currentPage"
:filter="searchFilter"
+ @filtered="onFiltered"
@row-selected="onRowSelected($event, filteredLogs.length)"
>
<!-- Checkbox column -->
@@ -145,6 +147,7 @@
import PageTitle from '@/components/Global/PageTitle';
import StatusIcon from '@/components/Global/StatusIcon';
import Search from '@/components/Global/Search';
+import TableCellCount from '@/components/Global/TableCellCount';
import TableDateFilter from '@/components/Global/TableDateFilter';
import TableFilter from '@/components/Global/TableFilter';
import TableRowAction from '@/components/Global/TableRowAction';
@@ -166,6 +169,7 @@
PageTitle,
Search,
StatusIcon,
+ TableCellCount,
TableFilter,
TableRowAction,
TableToolbar,
@@ -235,10 +239,16 @@
],
filterStartDate: null,
filterEndDate: null,
- searchFilter: null
+ searchFilter: null,
+ searchTotalFilteredRows: 0
};
},
computed: {
+ filteredRows() {
+ return this.searchFilter
+ ? this.searchTotalFilteredRows
+ : this.filteredLogs.length;
+ },
allLogs() {
return this.$store.getters['eventLog/allEvents'].map(event => {
return {
@@ -346,6 +356,9 @@
onChangeSearchInput(searchValue) {
this.searchFilter = searchValue;
},
+ onFiltered(filteredItems) {
+ this.searchTotalFilteredRows = filteredItems.length;
+ },
// Create export file name based on date
exportFileNameByDate() {
let date = new Date();