diff options
author | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-15 09:55:56 +0300 |
---|---|---|
committer | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-15 09:55:56 +0300 |
commit | 230a2682abc6d4838c0ad2838d4d7d6ffd87d277 (patch) | |
tree | fd3aef72780010e16a4dc3ddf32749b9b56f2d27 | |
parent | 4d1abb0bcda998830ff76da6d8cffaa704183135 (diff) | |
download | webui-vue-230a2682abc6d4838c0ad2838d4d7d6ffd87d277.tar.xz |
add icon for notification
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 83 | ||||
-rw-r--r-- | src/locales/en-US.json | 3 | ||||
-rw-r--r-- | src/locales/ru-RU.json | 3 |
3 files changed, 62 insertions, 27 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> diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 4bf0acbe..d134df08 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -99,7 +99,8 @@ "titleRefresh": "Refresh application data", "titleCritical": "Critical", "titleWarnings": "Warnings", - "titleMessages": "Messages" + "titleMessages": "Messages", + "titleEmpty": "No notifications" }, "appNavigation": { "resourceManagement": "Resource management", diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json index 8f11c7dc..24b629f5 100644 --- a/src/locales/ru-RU.json +++ b/src/locales/ru-RU.json @@ -144,7 +144,8 @@ "titleRefresh": "Обновить данные веб-приложения", "titleCritical": "Критические", "titleWarnings": "Предупреждения", - "titleMessages": "Сообщения" + "titleMessages": "Сообщения", + "titleEmpty": "Нет уведомлений" }, "subHeader": { "serverInfo": "Информаци о сервере", |