diff options
author | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-12 09:41:51 +0300 |
---|---|---|
committer | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-12 09:41:51 +0300 |
commit | d1edbc6b82aa076b6dc8e630ebf33b265cf88982 (patch) | |
tree | 38ca66efd0ffe8307c3a5f9d41b3bee7cdf1c04e /src/components | |
parent | 4b3d3eb37001207a9862d81e6d1ab0d3a423de3d (diff) | |
download | webui-vue-d1edbc6b82aa076b6dc8e630ebf33b265cf88982.tar.xz |
add warning and messages notifications1107_notification
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 83 |
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> |