Add search component to DIMM slot table on Hardware status page
Adds ability to filter DIMM slot table by a search input.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I0ac6fd26e4af419fdd57d12573aea0abf66a1e0d
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
index 5ba8b59..c914f71 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
@@ -1,5 +1,10 @@
<template>
<page-section :section-title="$t('pageHardwareStatus.dimmSlot')">
+ <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 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 @@
formatter: this.tableFormatter,
sortable: true
}
- ]
+ ],
+ searchFilter: null
};
},
computed: {
@@ -102,6 +110,9 @@
if (key === 'health') {
return this.sortStatus(a, b, key);
}
+ },
+ onChangeSearchInput(searchValue) {
+ this.searchFilter = searchValue;
}
}
};