Add Search component to Fans table on Hardware status page

Adds ability to filter Fan table by a search input.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I0131ad21cc030320e291c79e8801b78c7c7dd668

1 files changed, 13 insertions, 2 deletions

diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
index a4481e2d..fd000a9b 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
@@ -1,5 +1,10 @@
 <template>
   <page-section :section-title="$t('pageHardwareStatus.fans')">
+    <b-row>
+      <b-col sm="6" md="5" xl="4">
+        <search @changeSearch="onChangeSearchInput" />
+      </b-col>
+    </b-row>
     <b-table
       sort-icon-left
       no-sort-reset
@@ -8,6 +13,7 @@
       :fields="fields"
       :sort-desc="true"
       :sort-compare="sortCompare"
+      :filter="searchFilter"
     >
       <!-- Expand chevron icon -->
       <template v-slot:cell(expandRow)="row">
@@ -46,9 +52,10 @@ import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
 import StatusIcon from '@/components/Global/StatusIcon';
 import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
 import TableSortMixin from '@/components/Mixins/TableSortMixin';
+import Search from '@/components/Global/Search';
 
 export default {
-  components: { IconChevron, PageSection, StatusIcon },
+  components: { IconChevron, PageSection, StatusIcon, Search },
   mixins: [TableDataFormatterMixin, TableSortMixin],
   data() {
     return {
@@ -83,7 +90,8 @@ export default {
           formatter: this.tableFormatter,
           sortable: true
         }
-      ]
+      ],
+      searchFilter: null
     };
   },
   computed: {
@@ -102,6 +110,9 @@ export default {
       if (key === 'health') {
         return this.sortStatus(a, b, key);
       }
+    },
+    onChangeSearchInput(searchValue) {
+      this.searchFilter = searchValue;
     }
   }
 };