add warning and messages notifications1107_notification

1 files changed, 72 insertions, 11 deletions

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 3cb7adb0..7f0696e3 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -132,10 +132,14 @@
                 <icon-notification :title="$t('appHeader.titleNotification')" />
               </template>
               <b-dropdown-group
+                v-if="criticalLogs && criticalLogs.length > 0"
                 id="dropdown-group-1"
                 :header="$t('appHeader.titleCritical')"
               >
-                <b-dropdown-item v-for="(log, index) in okLogs" :key="index">
+                <b-dropdown-item
+                  v-for="(log, index) in criticalLogs"
+                  :key="index"
+                >
                   <img
                     class="status-icon"
                     src="@/assets/images/notifications/critical.svg"
@@ -149,14 +153,53 @@
                   <img src="@/assets/images/notifications/right-arrow.svg" />
                 </b-dropdown-item>
               </b-dropdown-group>
-              <b-dropdown-divider></b-dropdown-divider>
-              <b-dropdown-text>{{
-                $t('appHeader.titleWarnings')
-              }}</b-dropdown-text>
-              <b-dropdown-divider></b-dropdown-divider>
-              <b-dropdown-text>{{
-                $t('appHeader.titleMessages')
-              }}</b-dropdown-text>
+              <b-dropdown-divider
+                v-if="criticalLogs && criticalLogs.length > 0"
+              ></b-dropdown-divider>
+              <b-dropdown-group
+                v-if="warningLogs && warningLogs.length > 0"
+                id="dropdown-group-2"
+                :header="$t('appHeader.titleWarnings')"
+              >
+                <b-dropdown-item
+                  v-for="(log, index) in warningLogs"
+                  :key="index"
+                >
+                  <img
+                    class="status-icon"
+                    src="@/assets/images/notifications/warning.svg"
+                  />
+                  <div class="notification-item">
+                    <span>{{ log.name | truncate(28, '...') }}</span>
+                    <span class="notification-desc">{{
+                      log.description | truncate(28, '...')
+                    }}</span>
+                  </div>
+                  <img src="@/assets/images/notifications/right-arrow.svg" />
+                </b-dropdown-item>
+              </b-dropdown-group>
+              <b-dropdown-divider
+                v-if="warningLogs && warningLogs.length > 0"
+              ></b-dropdown-divider>
+              <b-dropdown-group
+                v-if="okLogs && okLogs.length > 0"
+                id="dropdown-group-3"
+                :header="$t('appHeader.titleMessages')"
+              >
+                <b-dropdown-item v-for="(log, index) in okLogs" :key="index">
+                  <img
+                    class="status-icon"
+                    src="@/assets/images/notifications/message.svg"
+                  />
+                  <div class="notification-item">
+                    <span>{{ log.name | truncate(28, '...') }}</span>
+                    <span class="notification-desc">{{
+                      log.description | truncate(28, '...')
+                    }}</span>
+                  </div>
+                  <img src="@/assets/images/notifications/right-arrow.svg" />
+                </b-dropdown-item>
+              </b-dropdown-group>
             </b-dropdown>
           </li>
           <li class="nav-item">
@@ -225,6 +268,16 @@ export default {
         return log.severity === 'OK';
       });
     },
+    warningLogs() {
+      return this.$store.getters['eventLog/allEvents'].filter((log) => {
+        return log.severity === 'Warning';
+      });
+    },
+    criticalLogs() {
+      return this.$store.getters['eventLog/allEvents'].filter((log) => {
+        return log.severity === 'Critical';
+      });
+    },
     isNavTagPresent() {
       return this.assetTag || this.modelType || this.serialNumber;
     },
@@ -458,6 +511,8 @@ export default {
 
   .dropdown-menu {
     margin-top: 0;
+    overflow-y: auto;
+    max-height: 600px;
 
     @include media-breakpoint-only(md) {
       margin-top: 4px;
@@ -515,8 +570,10 @@ export default {
     color: #0c1c29;
     padding: 15px 15px 0 15px;
   }
-  #dropdown-group-1 {
-    padding: 15px;
+  #dropdown-group-1,
+  #dropdown-group-2,
+  #dropdown-group-3 {
+    padding: 15px 15px 5px 15px;
   }
 
   .notification-item {
@@ -554,5 +611,9 @@ export default {
     padding-top: 3px;
     margin-right: 6px;
   }
+
+  .dropdown-divider {
+    margin: 0;
+  }
 }
 </style>