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, 3 deletions

diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue
index 6acabd98..3915ff20 100644
--- a/src/views/Health/Sensors/Sensors.vue
+++ b/src/views/Health/Sensors/Sensors.vue
@@ -2,13 +2,19 @@
   <b-container fluid="xl">
     <page-title />
     <b-row>
-      <b-col md="5" xl="4">
+      <b-col sm="6" md="5" xl="4">
         <search
           :placeholder="$t('pageSensors.searchForSensors')"
           @changeSearch="onChangeSearchInput"
         />
       </b-col>
-      <b-col md="7" xl="8" class="text-right">
+      <b-col sm="3" md="3" xl="2">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="allSensors.length"
+        ></table-cell-count>
+      </b-col>
+      <b-col sm="3" md="4" xl="6" class="text-right">
         <table-filter :filters="tableFilters" @filterChange="onFilterChange" />
       </b-col>
     </b-row>
@@ -44,6 +50,7 @@
           :filter="searchFilter"
           :empty-text="$t('global.table.emptyMessage')"
           :empty-filtered-text="$t('global.table.emptySearchMessage')"
+          @filtered="onFiltered"
           @row-selected="onRowSelected($event, filteredSensors.length)"
         >
           <!-- Checkbox column -->
@@ -93,6 +100,7 @@ import StatusIcon from '@/components/Global/StatusIcon';
 import TableFilter from '@/components/Global/TableFilter';
 import TableToolbar from '@/components/Global/TableToolbar';
 import TableToolbarExport from '@/components/Global/TableToolbarExport';
+import TableCellCount from '@/components/Global/TableCellCount';
 
 import BVTableSelectableMixin from '@/components/Mixins/BVTableSelectableMixin';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
@@ -106,6 +114,7 @@ export default {
     PageTitle,
     Search,
     StatusIcon,
+    TableCellCount,
     TableFilter,
     TableToolbar,
     TableToolbarExport
@@ -170,13 +179,19 @@ export default {
         }
       ],
       activeFilters: [],
-      searchFilter: null
+      searchFilter: null,
+      searchTotalFilteredRows: 0
     };
   },
   computed: {
     allSensors() {
       return this.$store.getters['sensors/sensors'];
     },
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.filteredSensors.length;
+    },
     filteredSensors() {
       return this.getFilteredTableData(this.allSensors, this.activeFilters);
     }
@@ -202,6 +217,9 @@ export default {
     },
     onChangeSearchInput(event) {
       this.searchFilter = event;
+    },
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.length;
     }
   }
 };