add template for critical logs

4 files changed, 85 insertions, 28 deletions

diff --git a/src/assets/images/notifications/critical.svg b/src/assets/images/notifications/critical.svg
new file mode 100644
index 00000000..3ef0a535
--- /dev/null
+++ b/src/assets/images/notifications/critical.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="#FF4141"/>
+</svg>
diff --git a/src/assets/images/notifications/right-arrow.svg b/src/assets/images/notifications/right-arrow.svg
new file mode 100644
index 00000000..fe1ae951
--- /dev/null
+++ b/src/assets/images/notifications/right-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.758398 0.591482C0.433398 0.916482 0.433398 1.44148 0.758398 1.76648L3.99173 4.99981L0.758398 8.23315C0.433398 8.55815 0.433398 9.08315 0.758398 9.40815C1.0834 9.73315 1.6084 9.73315 1.9334 9.40815L5.7584 5.58315C6.0834 5.25815 6.0834 4.73315 5.7584 4.40815L1.9334 0.583148C1.61673 0.266481 1.0834 0.266482 0.758398 0.591482Z" fill="#0C1C29" fill-opacity="0.6"/>
+</svg>
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index b24fef86..3cb7adb0 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -126,7 +126,7 @@
               <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
             </b-button>
           </li>
-          <li class="nav-item">
+          <li class="nav-item notifications">
             <b-dropdown id="app-notifications" variant="link" right>
               <template #button-content>
                 <icon-notification :title="$t('appHeader.titleNotification')" />
@@ -135,8 +135,18 @@
                 id="dropdown-group-1"
                 :header="$t('appHeader.titleCritical')"
               >
-                <b-dropdown-item v-for="(log, index) in okLogs" :key="index"
-                  >{{ log.name }}
+                <b-dropdown-item v-for="(log, index) in okLogs" :key="index">
+                  <img
+                    class="status-icon"
+                    src="@/assets/images/notifications/critical.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></b-dropdown-divider>
@@ -485,33 +495,64 @@ export default {
   }
 }
 
-.dropdown-toggle::after {
-  display: none;
-}
+.notifications {
+  .dropdown-toggle::after {
+    display: none;
+  }
 
-.dropdown-menu {
-  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-}
+  .dropdown-menu {
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    width: 256px;
+  }
 
-.dropdown-header {
-  font-style: normal;
-  font-weight: 700;
-  font-size: 12px;
-  line-height: 16px;
-  text-transform: uppercase;
-  color: #0c1c29;
-  padding: 15px;
-}
-#dropdown-group-1 {
-  padding: 15px;
-}
+  .dropdown-header {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 16px;
+    text-transform: uppercase;
+    color: #0c1c29;
+    padding: 15px 15px 0 15px;
+  }
+  #dropdown-group-1 {
+    padding: 15px;
+  }
 
-.dropdown-item {
-  font-style: normal;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-  color: #0c1c29;
+  .notification-item {
+    display: flex;
+    flex-direction: column;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 16px;
+    color: #0c1c29;
+    white-space: normal;
+  }
+
+  .notification-desc {
+    font-style: normal;
+    font-weight: 300;
+    font-size: 12px;
+    line-height: 16px;
+    color: rgba(12, 28, 41, 0.6);
+  }
+
+  .dropdown-item {
+    display: flex;
+    padding: 0.25rem;
+  }
+
+  .list-unstyled {
+    li {
+      margin-bottom: 5px;
+    }
+  }
+
+  .status-icon {
+    align-self: self-start;
+    padding-top: 3px;
+    margin-right: 6px;
+  }
 }
 </style>
diff --git a/src/main.js b/src/main.js
index ae39ecdc..be26ece6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -103,6 +103,16 @@ Vue.filter('formatTimeShort', function (value) {
     return format(value, pattern, { timezone }).replace('GMT', 'UTC');
   }
 });
+
+Vue.filter('truncate', function (text, length, suffix) {
+  const arrRaw = text.split(' ');
+  const arr = arrRaw.filter((word) => word !== '');
+  if (arr.length > length) {
+    return arr.splice(0, length).join(' ') + suffix;
+  } else {
+    return text;
+  }
+});
 // Plugins
 Vue.use(AlertPlugin);
 Vue.use(BadgePlugin);