diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-04-07 20:20:37 +0300 |
---|---|---|
committer | Gunnar Mills <gmills@us.ibm.com> | 2020-04-21 20:49:03 +0300 |
commit | 82cca545587fa8803fe35092614922bc1af3a48e (patch) | |
tree | 4a10d184b400740f0629133895f83eb0315b10f6 /src/views/Health/Sensors | |
parent | 1be6b41e1be3d2316abcb5dec6968383b5a6f856 (diff) | |
download | webui-vue-82cca545587fa8803fe35092614922bc1af3a48e.tar.xz |
Create TableFilter component
Global TableFilter component and TableFilterMixin can be used
with any table. The TableFilterMixin will return filtered
data with items that match any of the filter tags.
When the table search component is built, it should use the
BoostrapVue Table :filter prop.
- Filter by status added to Sensors table
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I57ebab1686b2d267383cb0e1be252627bf42c98c
Diffstat (limited to 'src/views/Health/Sensors')
-rw-r--r-- | src/views/Health/Sensors/Sensors.vue | 49 |
1 files changed, 41 insertions, 8 deletions
diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue index 70d4f90d..ae31cc38 100644 --- a/src/views/Health/Sensors/Sensors.vue +++ b/src/views/Health/Sensors/Sensors.vue @@ -2,13 +2,18 @@ <b-container fluid> <page-title /> <b-row> + <b-col xl="12" class="text-right"> + <table-filter :filters="tableFilters" @filterChange="onFilterChange" /> + </b-col> + </b-row> + <b-row> <b-col xl="12"> <b-table sort-icon-left no-sort-reset sticky-header="75vh" sort-by="status" - :items="allSensors" + :items="filteredSensors" :fields="fields" :sort-desc="true" :sort-compare="sortCompare" @@ -41,6 +46,10 @@ <script> import PageTitle from '../../../components/Global/PageTitle'; import StatusIcon from '../../../components/Global/StatusIcon'; +import TableFilter from '../../../components/Global/TableFilter'; +import TableFilterMixin from '../../../components/Mixins/TableFilterMixin'; + +const SENSOR_STATUS = ['OK', 'Warning', 'Critical']; const valueFormatter = value => { if (value === null || value === undefined) { @@ -51,7 +60,8 @@ const valueFormatter = value => { export default { name: 'Sensors', - components: { PageTitle, StatusIcon }, + components: { PageTitle, StatusIcon, TableFilter }, + mixins: [TableFilterMixin], data() { return { fields: [ @@ -91,12 +101,27 @@ export default { formatter: valueFormatter, label: this.$t('pageSensors.table.upperCritical') } - ] + ], + tableFilters: [ + { + label: this.$t('pageSensors.table.status'), + values: SENSOR_STATUS + } + ], + activeFilters: [] }; }, computed: { allSensors() { return this.$store.getters['sensors/sensors']; + }, + filteredSensors: { + get: function() { + return this.getFilteredTableData(this.allSensors, this.activeFilters); + }, + set: function(newVal) { + return newVal; + } } }, created() { @@ -105,11 +130,11 @@ export default { methods: { statusIcon(status) { switch (status) { - case 'OK': + case SENSOR_STATUS[0]: return 'success'; - case 'Warning': + case SENSOR_STATUS[1]: return 'warning'; - case 'Critical': + case SENSOR_STATUS[2]: return 'danger'; default: return ''; @@ -117,9 +142,17 @@ export default { }, sortCompare(a, b, key) { if (key === 'status') { - const status = ['OK', 'Warning', 'Critical']; - return status.indexOf(a.status) - status.indexOf(b.status); + return ( + SENSOR_STATUS.indexOf(a.status) - SENSOR_STATUS.indexOf(b.status) + ); } + }, + onFilterChange({ activeFilters }) { + this.activeFilters = activeFilters; + this.filteredSensors = this.getFilteredTableData( + this.allSensors, + activeFilters + ); } } }; |