Add Search to Power supplies table on Hardware status page
Adds ability to filter Power supplies table by a search input.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I9f3131294d316edd70e3b6bcc4fee307ac69f2d5
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
index 763ab26..be330ef 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
@@ -1,5 +1,10 @@
<template>
<page-section :section-title="$t('pageHardwareStatus.powerSupplies')">
+ <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">
@@ -69,9 +75,10 @@
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 {
@@ -106,7 +113,8 @@
formatter: this.tableFormatter,
sortable: true
}
- ]
+ ],
+ searchFilter: null
};
},
computed: {
@@ -125,6 +133,9 @@
if (key === 'health') {
return this.sortStatus(a, b, key);
}
+ },
+ onChangeSearchInput(searchValue) {
+ this.searchFilter = searchValue;
}
}
};