1 files changed, 58 insertions, 25 deletions

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 7f0696e3..d4f3a2e9 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -130,14 +130,18 @@
             <b-dropdown id="app-notifications" variant="link" right>
               <template #button-content>
                 <icon-notification :title="$t('appHeader.titleNotification')" />
+                <span v-if="isLogsExist" class="red-dot"></span>
               </template>
+              <b-dropdown-text v-if="!isLogsExist">
+                {{ $t('appHeader.titleEmpty') }}
+              </b-dropdown-text>
               <b-dropdown-group
-                v-if="criticalLogs && criticalLogs.length > 0"
+                v-if="logs('Critical') && logs('Critical').length > 0"
                 id="dropdown-group-1"
                 :header="$t('appHeader.titleCritical')"
               >
                 <b-dropdown-item
-                  v-for="(log, index) in criticalLogs"
+                  v-for="(log, index) in logs('Critical')"
                   :key="index"
                 >
                   <img
@@ -150,19 +154,22 @@
                       log.description | truncate(28, '...')
                     }}</span>
                   </div>
-                  <img src="@/assets/images/notifications/right-arrow.svg" />
+                  <img
+                    class="arrow-icon"
+                    src="@/assets/images/notifications/right-arrow.svg"
+                  />
                 </b-dropdown-item>
               </b-dropdown-group>
               <b-dropdown-divider
-                v-if="criticalLogs && criticalLogs.length > 0"
+                v-if="logs('Critical') && logs('Critical').length > 0"
               ></b-dropdown-divider>
               <b-dropdown-group
-                v-if="warningLogs && warningLogs.length > 0"
+                v-if="logs('Warning') && logs('Warning').length > 0"
                 id="dropdown-group-2"
                 :header="$t('appHeader.titleWarnings')"
               >
                 <b-dropdown-item
-                  v-for="(log, index) in warningLogs"
+                  v-for="(log, index) in logs('Warning')"
                   :key="index"
                 >
                   <img
@@ -175,18 +182,24 @@
                       log.description | truncate(28, '...')
                     }}</span>
                   </div>
-                  <img src="@/assets/images/notifications/right-arrow.svg" />
+                  <img
+                    class="arrow-icon"
+                    src="@/assets/images/notifications/right-arrow.svg"
+                  />
                 </b-dropdown-item>
               </b-dropdown-group>
               <b-dropdown-divider
-                v-if="warningLogs && warningLogs.length > 0"
+                v-if="logs('Warning') && logs('Warning').length > 0"
               ></b-dropdown-divider>
               <b-dropdown-group
-                v-if="okLogs && okLogs.length > 0"
+                v-if="logs('OK') && logs('OK').length > 0"
                 id="dropdown-group-3"
                 :header="$t('appHeader.titleMessages')"
               >
-                <b-dropdown-item v-for="(log, index) in okLogs" :key="index">
+                <b-dropdown-item
+                  v-for="(log, index) in logs('OK')"
+                  :key="index"
+                >
                   <img
                     class="status-icon"
                     src="@/assets/images/notifications/message.svg"
@@ -197,7 +210,10 @@
                       log.description | truncate(28, '...')
                     }}</span>
                   </div>
-                  <img src="@/assets/images/notifications/right-arrow.svg" />
+                  <img
+                    class="arrow-icon"
+                    src="@/assets/images/notifications/right-arrow.svg"
+                  />
                 </b-dropdown-item>
               </b-dropdown-group>
             </b-dropdown>
@@ -263,20 +279,11 @@ export default {
     };
   },
   computed: {
-    okLogs() {
-      return this.$store.getters['eventLog/allEvents'].filter((log) => {
-        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';
-      });
+    isLogsExist() {
+      return (
+        this.$store.getters['eventLog/allEvents'] &&
+        this.$store.getters['eventLog/allEvents'].length > 0
+      );
     },
     isNavTagPresent() {
       return this.assetTag || this.modelType || this.serialNumber;
@@ -351,6 +358,13 @@ export default {
     );
   },
   methods: {
+    logs(type) {
+      let logs = this.$store.getters['eventLog/allEvents'].filter((log) => {
+        return log.severity === type;
+      });
+
+      return logs.reverse().slice(0, 5);
+    },
     getSystemInfo() {
       this.$store.dispatch('global/getSystemInfo');
     },
@@ -612,8 +626,27 @@ export default {
     margin-right: 6px;
   }
 
+  .arrow-icon {
+    margin-left: auto;
+  }
+
   .dropdown-divider {
     margin: 0;
   }
+
+  .red-dot {
+    position: absolute;
+    top: 4px;
+    right: 12px;
+    height: 12px;
+    width: 12px;
+    background-color: #e11717;
+    border-radius: 50%;
+    display: inline-block;
+  }
+
+  .display--none {
+    display: none;
+  }
 }
 </style>