diff options
author | Sukanya Pandey <sukapan1@in.ibm.com> | 2020-07-27 19:14:47 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-09-22 16:32:25 +0300 |
commit | 9901096a45c9bda51438dcc91d5feb8a590df0c3 (patch) | |
tree | 7cba8a8a5c39415d6d46a9e64b4e70e73ec3e840 /src/views/Health/EventLogs | |
parent | ce33f216a7ed893936fc3f187421c2a736b8c9ff (diff) | |
download | webui-vue-9901096a45c9bda51438dcc91d5feb8a590df0c3.tar.xz |
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
Diffstat (limited to 'src/views/Health/EventLogs')
-rw-r--r-- | src/views/Health/EventLogs/EventLogs.vue | 29 |
1 files changed, 21 insertions, 8 deletions
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue index dcede596..e7d4895a 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 { omit } from 'lodash'; 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 @@ export default { PageTitle, Search, StatusIcon, + TableCellCount, TableFilter, TableRowAction, TableToolbar, @@ -235,10 +239,16 @@ export default { ], 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 @@ export default { onChangeSearchInput(searchValue) { this.searchFilter = searchValue; }, + onFiltered(filteredItems) { + this.searchTotalFilteredRows = filteredItems.length; + }, // Create export file name based on date exportFileNameByDate() { let date = new Date(); |