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

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();