From 87ed13ac7e47945e3c5e1ed94f5aade99d2cc5ae Mon Sep 17 00:00:00 2001 From: Vitalii Lysak Date: Thu, 4 Aug 2022 17:05:44 +0300 Subject: move tasks from sila-dev, lysak --- src/assets/images/_sila/notifications/critical.svg | 3 + src/assets/images/_sila/notifications/message.svg | 3 + .../images/_sila/notifications/right-arrow.svg | 3 + src/assets/images/_sila/notifications/warning.svg | 3 + src/assets/styles/bmc/custom/_kvm.scss | 10 +- src/components/_sila/AppHeader/AppHeader.vue | 201 +++++++++++++++++++++ src/components/_sila/Global/Search.vue | 30 +++ src/locales/en-US.json | 10 +- src/locales/ru-RU.json | 10 +- src/main.js | 10 + src/store/modules/Settings/DateTimeStore.js | 5 +- src/utilities/_sila/transformSensorName.js | 20 ++ src/views/_sila/Operations/Kvm/KvmConsole.vue | 24 ++- .../VirtualMedia/ModalConfigureConnection.vue | 5 +- 14 files changed, 325 insertions(+), 12 deletions(-) create mode 100644 src/assets/images/_sila/notifications/critical.svg create mode 100644 src/assets/images/_sila/notifications/message.svg create mode 100644 src/assets/images/_sila/notifications/right-arrow.svg create mode 100644 src/assets/images/_sila/notifications/warning.svg create mode 100644 src/utilities/_sila/transformSensorName.js (limited to 'src') diff --git a/src/assets/images/_sila/notifications/critical.svg b/src/assets/images/_sila/notifications/critical.svg new file mode 100644 index 00000000..3ef0a535 --- /dev/null +++ b/src/assets/images/_sila/notifications/critical.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/notifications/message.svg b/src/assets/images/_sila/notifications/message.svg new file mode 100644 index 00000000..e1e274ab --- /dev/null +++ b/src/assets/images/_sila/notifications/message.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/notifications/right-arrow.svg b/src/assets/images/_sila/notifications/right-arrow.svg new file mode 100644 index 00000000..fe1ae951 --- /dev/null +++ b/src/assets/images/_sila/notifications/right-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/notifications/warning.svg b/src/assets/images/_sila/notifications/warning.svg new file mode 100644 index 00000000..6a93b99f --- /dev/null +++ b/src/assets/images/_sila/notifications/warning.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/styles/bmc/custom/_kvm.scss b/src/assets/styles/bmc/custom/_kvm.scss index a7223844..74b61c7e 100644 --- a/src/assets/styles/bmc/custom/_kvm.scss +++ b/src/assets/styles/bmc/custom/_kvm.scss @@ -1,12 +1,16 @@ #terminal-kvm { - height: calc(100vh - 300px); + height: 100vw; display: flex; &.full-window { - height: calc(100vh - 80px); + height: calc(100vh - 80px); } div:nth-child(1) { background: transparent !important; display: block !important; overflow: hidden !important; + canvas { + max-height: 579px; + max-width: 740px; + } } -} \ No newline at end of file +} diff --git a/src/components/_sila/AppHeader/AppHeader.vue b/src/components/_sila/AppHeader/AppHeader.vue index 22be55c7..dbda7365 100644 --- a/src/components/_sila/AppHeader/AppHeader.vue +++ b/src/components/_sila/AppHeader/AppHeader.vue @@ -76,6 +76,101 @@ {{ $t('appHeader.refresh') }} +
  • + + + + {{ $t('appHeader.titleEmpty') }} + + + + +
    + {{ log.name | truncate(28, '...') }} + {{ + log.description | truncate(28, '...') + }} +
    + +     +     + + + + +
    + {{ log.name | truncate(28, '...') }} + {{ + log.description | truncate(28, '...') + }} +
    + +     +     + + + + +
    + {{ log.name | truncate(28, '...') }} + {{ + log.description | truncate(28, '...') + }} +
    + +     +     +     +
  • 0 + ); + }, isNavTagPresent() { return this.assetTag || this.modelType || this.serialNumber; }, @@ -213,6 +316,16 @@ export default { ); }, methods: { + logsPage(id) { + return `/logs/event-logs?search=${id}`; + }, + 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'); }, @@ -357,6 +470,8 @@ export default { .dropdown-menu { margin-top: 0; + overflow-y: auto; + max-height: 600px; @include media-breakpoint-only(md) { margin-top: 4px; @@ -379,4 +494,90 @@ export default { outline: 0; } } + +.notifications { + .dropdown-toggle::after { + display: none; + } + + .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 15px 0 15px; + } + #dropdown-group-1, + #dropdown-group-2, + #dropdown-group-3 { + padding: 15px 15px 5px 15px; + } + + .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; + } + + .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; + } +} diff --git a/src/components/_sila/Global/Search.vue b/src/components/_sila/Global/Search.vue index c25224a7..79a403ad 100644 --- a/src/components/_sila/Global/Search.vue +++ b/src/components/_sila/Global/Search.vue @@ -82,15 +82,45 @@ export default { searchBy: 'all', }; }, + computed: { + params() { + const hash = window.location.hash; + + if (!hash || hash.indexOf('?') === -1) { + return; + } + + const paramsString = window.location.hash.split('?')[1]; + return new URLSearchParams(paramsString); + }, + }, + created() { + this.search(); + }, methods: { onSelect() { this.$emit('search-by', this.searchBy); }, + removeSearchParam() { + window.location.href = '/#/logs/event-logs'; + }, + search() { + if (!this.params) { + return; + } + + let search = this.params.get('search'); + if (search) { + this.filter = search; + this.onChangeInput(); + } + }, onChangeInput() { this.$emit('change-search', this.filter); }, onClearSearch() { this.filter = ''; + this.removeSearchParam(); this.$emit('clear-search'); this.$refs.searchInput.focus(); }, diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 02d72e09..dfee7375 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -106,7 +106,12 @@ "titleHideNavigation": "Hide navigation", "titleShowNavigation": "Show navigation", "titleProfile": "Show profile menu", - "titleRefresh": "Refresh application data" + "titleRefresh": "Refresh application data", + "titleNotification": "Show notifications", + "titleCritical": "Critical", + "titleWarnings": "Warnings", + "titleMessages": "Messages", + "titleEmpty": "No notifications" }, "appNavigation": { "system":"System", @@ -234,7 +239,8 @@ }, "toast": { "errorSaveDateTime": "Error saving date and time settings.", - "successSaveDateTime": "Successfully saved date and time settings." + "successSaveDateTime": "Successfully saved date and time settings.", + "delaySaveDateTime": "Update the page after 10 seconds to apply the changes." } }, "pageDumps": { diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json index cb1523aa..f540cf4e 100644 --- a/src/locales/ru-RU.json +++ b/src/locales/ru-RU.json @@ -106,7 +106,12 @@ "titleHideNavigation": "Спрятать навигацию", "titleShowNavigation": "Показать навигацию", "titleProfile": "Показать меню профиля", - "titleRefresh": "Обновить данные веб-приложения" + "titleRefresh": "Обновить данные веб-приложения", + "titleNotification": "Показать уведомления", + "titleCritical": "Критические", + "titleWarnings": "Предупреждения", + "titleMessages": "Сообщения", + "titleEmpty": "Нет уведомлений" }, "appNavigation": { "system": "Система", @@ -233,7 +238,8 @@ }, "toast": { "errorSaveDateTime": "Ошибка сохранения настроек даты и времени.", - "successSaveDateTime": "Настройки даты и времени сохранены." + "successSaveDateTime": "Настройки даты и времени сохранены.", + "delaySaveDateTime": "Чтобы применить изменения, обновите страницу через 10 секунд." } }, diff --git a/src/main.js b/src/main.js index 8585f897..ca17b958 100644 --- a/src/main.js +++ b/src/main.js @@ -85,6 +85,16 @@ Vue.filter('formatTime', function (value) { } }); +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); diff --git a/src/store/modules/Settings/DateTimeStore.js b/src/store/modules/Settings/DateTimeStore.js index 51b722a8..84535f94 100644 --- a/src/store/modules/Settings/DateTimeStore.js +++ b/src/store/modules/Settings/DateTimeStore.js @@ -68,7 +68,10 @@ const DateTimeStore = { } }) .then(() => { - return i18n.t('pageDateTime.toast.successSaveDateTime'); + return [ + i18n.t('pageDateTime.toast.successSaveDateTime'), + i18n.t('pageDateTime.toast.delaySaveDateTime'), + ]; }) .catch((error) => { console.log(error); diff --git a/src/utilities/_sila/transformSensorName.js b/src/utilities/_sila/transformSensorName.js new file mode 100644 index 00000000..76f53b6f --- /dev/null +++ b/src/utilities/_sila/transformSensorName.js @@ -0,0 +1,20 @@ +export default function (sensorName) { + switch (true) { + case sensorName.includes('Pwm'): + sensorName = sensorName.replace( + sensorName, + `CPU ${sensorName.split(' ')[1]} Fan Pwm` + ); + break; + case sensorName.includes('System'): + sensorName = sensorName.replace( + sensorName, + `System Fan ${sensorName.split(' ')[2]} Pwm` + ); + break; + case sensorName.includes('CPU'): + sensorName = sensorName.replace(/cpu/gi, 'CPU '); + break; + } + return sensorName; +} diff --git a/src/views/_sila/Operations/Kvm/KvmConsole.vue b/src/views/_sila/Operations/Kvm/KvmConsole.vue index 50cbff7f..603aa115 100644 --- a/src/views/_sila/Operations/Kvm/KvmConsole.vue +++ b/src/views/_sila/Operations/Kvm/KvmConsole.vue @@ -1,8 +1,12 @@