add warning and messages notifications1107_notification

3 files changed, 78 insertions, 11 deletions

diff --git a/src/assets/images/notifications/message.svg b/src/assets/images/notifications/message.svg
new file mode 100644
index 00000000..e1e274ab
--- /dev/null
+++ b/src/assets/images/notifications/message.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.941177 1.57887C0.941177 1.28822 1.15187 1.05258 1.41176 1.05258H14.5882C14.8481 1.05258 15.0588 1.28822 15.0588 1.57887V10.3278C15.0588 10.6184 14.8481 10.854 14.5882 10.854H3.5107L0.941177 13.5619V1.57887ZM1.41176 1.11744e-05C0.632065 1.11744e-05 0 0.706899 0 1.57887V16L3.88426 11.9066H14.5882C15.3679 11.9066 16 11.1997 16 10.3278V1.57887C16 0.706899 15.3679 1.11744e-05 14.5882 1.11744e-05H1.41176ZM4.5 3.05041C4.22386 3.05041 4 3.31393 4 3.63902C4 3.96412 4.22386 4.22764 4.5 4.22764H11.5C11.7761 4.22764 12 3.96412 12 3.63902C12 3.31393 11.7761 3.05041 11.5 3.05041H4.5ZM4 5.9935C4 5.6684 4.22386 5.40488 4.5 5.40488H11.5C11.7761 5.40488 12 5.6684 12 5.9935C12 6.31859 11.7761 6.58211 11.5 6.58211H4.5C4.22386 6.58211 4 6.31859 4 5.9935ZM4.5 7.75935C4.22386 7.75935 4 8.02287 4 8.34797C4 8.67307 4.22386 8.93659 4.5 8.93659H11.5C11.7761 8.93659 12 8.67307 12 8.34797C12 8.02287 11.7761 7.75935 11.5 7.75935H4.5Z" fill="#1A3E5B" fill-opacity="0.6"/>
+</svg>
diff --git a/src/assets/images/notifications/warning.svg b/src/assets/images/notifications/warning.svg
new file mode 100644
index 00000000..6a93b99f
--- /dev/null
+++ b/src/assets/images/notifications/warning.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00043 1.99173L14.2754 12.8334H1.72543L8.00043 1.99173ZM0.28376 12.0001C-0.357907 13.1084 0.442093 14.5001 1.72543 14.5001H14.2754C15.5588 14.5001 16.3588 13.1084 15.7171 12.0001L9.44209 1.1584C8.80043 0.0500651 7.20043 0.0500651 6.55876 1.1584L0.28376 12.0001ZM7.16709 6.16673V7.8334C7.16709 8.29173 7.54209 8.66673 8.00043 8.66673C8.45876 8.66673 8.83376 8.29173 8.83376 7.8334V6.16673C8.83376 5.7084 8.45876 5.3334 8.00043 5.3334C7.54209 5.3334 7.16709 5.7084 7.16709 6.16673ZM7.16709 10.3334H8.83376V12.0001H7.16709V10.3334Z" fill="#F0AC0C"/>
+</svg>
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>