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

2 files changed, 18 insertions, 31 deletions

diff --git a/src/components/Mixins/TableDataFormatterMixin.js b/src/components/Mixins/TableDataFormatterMixin.js
index 77db7de9..3e15926a 100644
--- a/src/components/Mixins/TableDataFormatterMixin.js
+++ b/src/components/Mixins/TableDataFormatterMixin.js
@@ -3,6 +3,8 @@ const TableDataFormatterMixin = {
     tableFormatter(value) {
       if (value === undefined || value === null || value === '') {
         return '--';
+      } else if (typeof value === 'number') {
+        return parseFloat(value.toFixed(3));
       } else {
         return value;
       }
diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue
index 3b368976..879e2363 100644
--- a/src/views/Health/Sensors/Sensors.vue
+++ b/src/views/Health/Sensors/Sensors.vue
@@ -92,15 +92,8 @@ import TableToolbarExport from '@/components/Global/TableToolbarExport';
 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 @@ export default {
     TableToolbar,
     TableToolbarExport
   },
-  mixins: [TableFilterMixin, BVTableSelectableMixin, LoadingBarMixin],
+  mixins: [
+    TableFilterMixin,
+    BVTableSelectableMixin,
+    LoadingBarMixin,
+    TableDataFormatterMixin,
+    TableSortMixin
+  ],
   data() {
     return {
       fields: [
@@ -133,35 +132,35 @@ export default {
         },
         {
           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 @@ export default {
     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 }) {