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

8 files changed, 156 insertions, 19 deletions

diff --git a/src/components/Global/TableCellCount.vue b/src/components/Global/TableCellCount.vue
new file mode 100644
index 00000000..4f44ec29
--- /dev/null
+++ b/src/components/Global/TableCellCount.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="mt-2 d-flex flex-column justify-content-end">
+    <p v-if="!filterActive">
+      {{ $t('global.table.items', { count: totalNumberOfCells }) }}
+    </p>
+    <p v-else>
+      {{
+        $t('global.table.selectedItems', {
+          count: totalNumberOfCells,
+          filterCount: filteredItemsCount
+        })
+      }}
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    filteredItemsCount: {
+      type: Number,
+      required: true
+    },
+    totalNumberOfCells: {
+      type: Number,
+      required: true
+    }
+  },
+  computed: {
+    filterActive() {
+      return this.filteredItemsCount !== this.totalNumberOfCells;
+    }
+  }
+};
+</script>
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index f3eb3e2f..54f726ad 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -63,7 +63,9 @@
       "emptyMessage": "No items available",
       "emptySearchMessage": "No items match the search query",
       "fromDate": "From date",
+      "items": "%{count} items",
       "itemsPerPage": "Items per page",
+      "selectedItems":"%{filterCount} of %{count} items",
       "toDate": "To date",
       "viewAll": "View all"
     }
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();
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
index 4fd077ba..97116ca2 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
@@ -4,6 +4,12 @@
       <b-col sm="6" md="5" xl="4">
         <search @changeSearch="onChangeSearchInput" />
       </b-col>
+      <b-col sm="6" md="3" xl="2">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="dimms.length"
+        ></table-cell-count>
+      </b-col>
     </b-row>
     <b-table
       sort-icon-left
@@ -18,6 +24,7 @@
       :filter="searchFilter"
       :empty-text="$t('global.table.emptyMessage')"
       :empty-filtered-text="$t('global.table.emptySearchMessage')"
+      @filtered="onFiltered"
     >
       <!-- Expand chevron icon -->
       <template v-slot:cell(expandRow)="row">
@@ -58,12 +65,14 @@ import PageSection from '@/components/Global/PageSection';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
 
 import StatusIcon from '@/components/Global/StatusIcon';
+import TableCellCount from '@/components/Global/TableCellCount';
+
 import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
 import TableSortMixin from '@/components/Mixins/TableSortMixin';
 import Search from '@/components/Global/Search';
 
 export default {
-  components: { IconChevron, PageSection, StatusIcon, Search },
+  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
   mixins: [TableDataFormatterMixin, TableSortMixin],
   data() {
     return {
@@ -99,10 +108,16 @@ export default {
           sortable: true
         }
       ],
-      searchFilter: null
+      searchFilter: null,
+      searchTotalFilteredRows: 0
     };
   },
   computed: {
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.dimms.length;
+    },
     dimms() {
       return this.$store.getters['memory/dimms'];
     }
@@ -121,6 +136,9 @@ export default {
     },
     onChangeSearchInput(searchValue) {
       this.searchFilter = searchValue;
+    },
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.length;
     }
   }
 };
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
index c2fd7bff..0b6e1a35 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
@@ -4,6 +4,12 @@
       <b-col sm="6" md="5" xl="4">
         <search @changeSearch="onChangeSearchInput" />
       </b-col>
+      <b-col sm="6" md="3" xl="2">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="fans.length"
+        ></table-cell-count>
+      </b-col>
     </b-row>
     <b-table
       sort-icon-left
@@ -18,6 +24,7 @@
       :filter="searchFilter"
       :empty-text="$t('global.table.emptyMessage')"
       :empty-filtered-text="$t('global.table.emptySearchMessage')"
+      @filtered="onFiltered"
     >
       <!-- Expand chevron icon -->
       <template v-slot:cell(expandRow)="row">
@@ -56,6 +63,7 @@
 <script>
 import PageSection from '@/components/Global/PageSection';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+import TableCellCount from '@/components/Global/TableCellCount';
 
 import StatusIcon from '@/components/Global/StatusIcon';
 import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
@@ -63,7 +71,7 @@ import TableSortMixin from '@/components/Mixins/TableSortMixin';
 import Search from '@/components/Global/Search';
 
 export default {
-  components: { IconChevron, PageSection, StatusIcon, Search },
+  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
   mixins: [TableDataFormatterMixin, TableSortMixin],
   data() {
     return {
@@ -99,10 +107,16 @@ export default {
           sortable: true
         }
       ],
-      searchFilter: null
+      searchFilter: null,
+      searchTotalFilteredRows: 0
     };
   },
   computed: {
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.fans.length;
+    },
     fans() {
       return this.$store.getters['fan/fans'];
     }
@@ -121,6 +135,9 @@ export default {
     },
     onChangeSearchInput(searchValue) {
       this.searchFilter = searchValue;
+    },
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.length;
     }
   }
 };
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
index 2ad4a28b..77a1e3c8 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
@@ -4,6 +4,12 @@
       <b-col sm="6" md="5" xl="4">
         <search @changeSearch="onChangeSearchInput" />
       </b-col>
+      <b-col sm="6" md="3" xl="2">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="powerSupplies.length"
+        ></table-cell-count>
+      </b-col>
     </b-row>
     <b-table
       sort-icon-left
@@ -18,6 +24,7 @@
       :filter="searchFilter"
       :empty-text="$t('global.table.emptyMessage')"
       :empty-filtered-text="$t('global.table.emptySearchMessage')"
+      @filtered="onFiltered"
     >
       <!-- Expand chevron icon -->
       <template v-slot:cell(expandRow)="row">
@@ -81,12 +88,13 @@ import PageSection from '@/components/Global/PageSection';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
 
 import StatusIcon from '@/components/Global/StatusIcon';
+import TableCellCount from '@/components/Global/TableCellCount';
 import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
 import TableSortMixin from '@/components/Mixins/TableSortMixin';
 import Search from '@/components/Global/Search';
 
 export default {
-  components: { IconChevron, PageSection, StatusIcon, Search },
+  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
   mixins: [TableDataFormatterMixin, TableSortMixin],
   data() {
     return {
@@ -122,10 +130,16 @@ export default {
           sortable: true
         }
       ],
-      searchFilter: null
+      searchFilter: null,
+      searchTotalFilteredRows: 0
     };
   },
   computed: {
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.powerSupplies.length;
+    },
     powerSupplies() {
       return this.$store.getters['powerSupply/powerSupplies'];
     }
@@ -144,6 +158,9 @@ export default {
     },
     onChangeSearchInput(searchValue) {
       this.searchFilter = searchValue;
+    },
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.length;
     }
   }
 };
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
index fc6c17fe..6ab1343a 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
@@ -5,6 +5,12 @@
       <b-col sm="6" md="5" xl="4">
         <search @changeSearch="onChangeSearchInput" />
       </b-col>
+      <b-col sm="6" md="3" xl="2">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="processors.length"
+        ></table-cell-count>
+      </b-col>
     </b-row>
     <b-table
       sort-icon-left
@@ -17,6 +23,7 @@
       :filter="searchFilter"
       :empty-text="$t('global.table.emptyMessage')"
       :empty-filtered-text="$t('global.table.emptySearchMessage')"
+      @filtered="onFiltered"
     >
       <!-- Expand button -->
       <template v-slot:cell(expandRow)="row">
@@ -87,13 +94,14 @@
 import PageSection from '@/components/Global/PageSection';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
 import StatusIcon from '@/components/Global/StatusIcon';
+import TableCellCount from '@/components/Global/TableCellCount';
 
 import TableSortMixin from '@/components/Mixins/TableSortMixin';
 import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
 import Search from '@/components/Global/Search';
 
 export default {
-  components: { PageSection, IconChevron, StatusIcon, Search },
+  components: { PageSection, IconChevron, TableCellCount, StatusIcon, Search },
   mixins: [TableDataFormatterMixin, TableSortMixin],
   data() {
     return {
@@ -129,10 +137,16 @@ export default {
           sortable: true
         }
       ],
-      searchFilter: null
+      searchFilter: null,
+      searchTotalFilteredRows: 0
     };
   },
   computed: {
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.processors.length;
+    },
     processors() {
       return this.$store.getters['processors/processors'];
     }
@@ -146,6 +160,9 @@ export default {
   methods: {
     onChangeSearchInput(searchValue) {
       this.searchFilter = searchValue;
+    },
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.length;
     }
   }
 };
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;
     }
   }
 };