commit 1ace1d91e80425eeed482b33e21838acb7f7325a
author Yoshie Muranaka <yoshiemuranaka@gmail.com> Thu Feb 06 13:47:28 2020 -0800
committer Yoshie Muranaka <yoshiemuranaka@gmail.com> Mon Feb 17 10:48:43 2020 -0800
tree 86700b60471ae41222bdba6902b3cb308978953a
parent c031b6988d6381ae1d2ecefd04e8c2af47f0ff4a

Add Health status to app header

Added logging path and interface to websocket subscription
data filter, to dynamically indicate Health status in the
app header.

- Update OverviewEvents to use highPriorityEvents data
- Refactor EventLogStore

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

src/components/AppHeader/AppHeader.vue

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 880c428..d411c1f 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -14,7 +14,7 @@
           <b-nav>
             <b-nav-item>
               Health
-              <status-icon :status="'danger'" />
+              <status-icon :status="healthStatusIcon" />
             </b-nav-item>
             <b-nav-item>
               Power
@@ -46,6 +46,9 @@
     hostStatus() {
       return this.$store.getters['global/hostStatus'];
     },
+    healthStatus() {
+      return this.$store.getters['eventLog/healthStatus'];
+    },
     hostStatusIcon() {
       switch (this.hostStatus) {
         case 'on':
@@ -56,15 +59,31 @@
         default:
           return 'secondary';
       }
+    },
+    healthStatusIcon() {
+      switch (this.healthStatus) {
+        case 'good':
+          return 'success';
+        case 'warning':
+          return 'warning';
+        case 'critical':
+          return 'danger';
+        default:
+          return 'secondary';
+      }
     }
   },
   created() {
     this.getHostInfo();
+    this.getEvents();
   },
   methods: {
     getHostInfo() {
       this.$store.dispatch('global/getHostStatus');
     },
+    getEvents() {
+      this.$store.dispatch('eventLog/getEventLogData');
+    },
     logout() {
       this.$store.dispatch('authentication/logout');
     }
@@ -84,6 +103,12 @@
     transition-timing-function: cubic-bezier(0, 0, 0.3, 1);
   }
 }
+.navbar-dark {
+  .navbar-text,
+  .nav-link {
+    color: $white !important;
+  }
+}
 .nav-item {
   svg {
     fill: $light;

src/components/Global/StatusIcon.vue

diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index a2c7f04..d59eaec 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -1,6 +1,7 @@
 <template>
   <span :class="['status-icon', status]">
     <icon-success v-if="status === 'success'" />
+    <icon-warning v-else-if="status === 'warning'" />
     <icon-danger v-else-if="status === 'danger'" />
     <icon-secondary v-else />
   </span>
@@ -15,8 +16,9 @@
   name: 'StatusIcon',
   components: {
     iconSuccess: IconCheckmark,
-    iconDanger: IconWarning,
-    iconSecondary: IconError
+    iconDanger: IconError,
+    iconSecondary: IconError, //TODO: swap with right asset when available
+    iconWarning: IconWarning
   },
   props: {
     status: {
@@ -39,5 +41,8 @@
   &.secondary {
     fill: $secondary;
   }
+  &.warning {
+    fill: $warning;
+  }
 }
 </style>