commit 202c599e71cb6691e12fa516b579b2b0007b94f1
author Yoshie Muranaka <yoshiemuranaka@gmail.com> Thu Jun 18 12:02:57 2020 -0700
committer Derick Montague <derick.montague@ibm.com> Thu Jun 25 21:41:56 2020 +0000
tree e289e7797a19517f110eaec3f586f6ea376f01f3
parent 4177014ab3d713e47af432119316b65f3c6ffb01

Update Sensors page to use table mixins

- Add number formatting to TableDataFormatter mixin
- Use TableDataFormatter mixin to show different status icons for sensor
  status (OK, Warning, Critical)
- Use TableSortMixin to sort by status (OK, Warning, Critical)

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

src/views/Health/Sensors/Sensors.vue

diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue
index 3b36897..879e236 100644
--- a/src/views/Health/Sensors/Sensors.vue
+++ b/src/views/Health/Sensors/Sensors.vue
@@ -92,15 +92,8 @@
 import TableFilterMixin from '../../../components/Mixins/TableFilterMixin';
 import BVTableSelectableMixin from '@/components/Mixins/BVTableSelectableMixin';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
-
-const SENSOR_STATUS = ['OK', 'Warning', 'Critical'];
-
-const valueFormatter = value => {
-  if (value === null || value === undefined) {
-    return '--';
-  }
-  return parseFloat(value.toFixed(3));
-};
+import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
+import TableSortMixin from '@/components/Mixins/TableSortMixin';
 
 export default {
   name: 'Sensors',
@@ -112,7 +105,13 @@
     TableToolbar,
     TableToolbarExport
   },
-  mixins: [TableFilterMixin, BVTableSelectableMixin, LoadingBarMixin],
+  mixins: [
+    TableFilterMixin,
+    BVTableSelectableMixin,
+    LoadingBarMixin,
+    TableDataFormatterMixin,
+    TableSortMixin
+  ],
   data() {
     return {
       fields: [
@@ -133,35 +132,35 @@
         },
         {
           key: 'lowerCritical',
-          formatter: valueFormatter,
+          formatter: this.tableFormatter,
           label: this.$t('pageSensors.table.lowerCritical')
         },
         {
           key: 'lowerCaution',
-          formatter: valueFormatter,
+          formatter: this.tableFormatter,
           label: this.$t('pageSensors.table.lowerWarning')
         },
 
         {
           key: 'currentValue',
-          formatter: valueFormatter,
+          formatter: this.tableFormatter,
           label: this.$t('pageSensors.table.currentValue')
         },
         {
           key: 'upperCaution',
-          formatter: valueFormatter,
+          formatter: this.tableFormatter,
           label: this.$t('pageSensors.table.upperWarning')
         },
         {
           key: 'upperCritical',
-          formatter: valueFormatter,
+          formatter: this.tableFormatter,
           label: this.$t('pageSensors.table.upperCritical')
         }
       ],
       tableFilters: [
         {
           label: this.$t('pageSensors.table.status'),
-          values: SENSOR_STATUS
+          values: ['OK', 'Warning', 'Critical']
         }
       ],
       activeFilters: [],
@@ -187,23 +186,9 @@
     next();
   },
   methods: {
-    statusIcon(status) {
-      switch (status) {
-        case SENSOR_STATUS[0]:
-          return 'success';
-        case SENSOR_STATUS[1]:
-          return 'warning';
-        case SENSOR_STATUS[2]:
-          return 'danger';
-        default:
-          return '';
-      }
-    },
     sortCompare(a, b, key) {
       if (key === 'status') {
-        return (
-          SENSOR_STATUS.indexOf(a.status) - SENSOR_STATUS.indexOf(b.status)
-        );
+        return this.sortStatus(a, b, key);
       }
     },
     onFilterChange({ activeFilters }) {