diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-06-01 17:40:28 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-06-01 17:49:04 +0300 |
commit | 0cbf1713dc23e0039653891fab1fa2c52b4bfaf3 (patch) | |
tree | 94f31f3d6935a130d49704c51512016814df15eb /src/views/SILA/EventLogs/EventLogs.vue | |
parent | c4d70da69a3c86f8c07ccdb0f09b755dd99b2155 (diff) | |
download | webui-vue-0cbf1713dc23e0039653891fab1fa2c52b4bfaf3.tar.xz |
Add PopoverSlot restyled DateTime and ServerPowerOrerations pages add reload BMC.
Diffstat (limited to 'src/views/SILA/EventLogs/EventLogs.vue')
-rw-r--r-- | src/views/SILA/EventLogs/EventLogs.vue | 548 |
1 files changed, 153 insertions, 395 deletions
diff --git a/src/views/SILA/EventLogs/EventLogs.vue b/src/views/SILA/EventLogs/EventLogs.vue index 36ec9802..aca17ac0 100644 --- a/src/views/SILA/EventLogs/EventLogs.vue +++ b/src/views/SILA/EventLogs/EventLogs.vue @@ -73,8 +73,10 @@ description="pageEventLogs.clearLogs" popup="pageEventLogs.clearLogs_popup" button="pageEventLogs.clear" + placement="bottom" :isclear="true" class="clear-popover" + :action="deleteAllLogs" /> </div> <table-toolbar @@ -85,8 +87,9 @@ > <template #toolbar-buttons> <b-button - variant="primary" - class="table-toolbar__resolved-button" + size="md" + variant="secondary" + style="margin-right: 1rem" @click="resolveLogs" > <img @@ -96,8 +99,9 @@ {{ $t('pageEventLogs.event_resolve') }} </b-button> <b-button + size="md" variant="primary" - class="table-toolbar__unresolved-button" + style="margin-right: 1rem" @click="unresolveLogs" > <img @@ -106,15 +110,21 @@ /> {{ $t('pageEventLogs.archive') }} </b-button> + <table-toolbar-export + :data="batchExportData" + style="margin-right: 1rem" + :file-name="exportFileNameByDate()" + /> </template> </table-toolbar> - <div id="event-logs-table-wrapper"> + <div id="logs-table-wrapper"> <b-table - id="event-logs-table" + id="logs-table" ref="table" responsive="md" - class="event-logs-table" + class="logs-table" selectable + :busy="isBusy" no-select-on-click sort-icon-left :sticky-header="stickyHeader" @@ -122,6 +132,8 @@ no-sort-reset :sort-desc="sortDesc" sort-by="id" + :current-page="currentPage" + :per-page="perPage" :fields="fields" :items="filteredLogs" :sort-compare="onSortCompare" @@ -153,42 +165,26 @@ </template> <template #cell(description)="data"> <b-row class="semi-bold-16px tretiatry"> - {{ data.item.description.name }} + {{ filteredLogs[data.index].name }} </b-row> <b-row class="regular-12px tretiatry pointer" @click="toggleRowDetails(data)" > - {{ data.item.description.description }}</b-row - > - </template> - <template #row-details="{ index }"> - <b-container fluid> - <b-col class="mt-1 mb-2 regular-12px tretiatry"> - <span class="row-details"> - {{ - `Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки. - Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.` - }} - {{ $t(filteredLogs[index].description.description) }} - </span> - </b-col> - </b-container> + {{ data.value }} + </b-row> </template> <!-- Severity column --> <template #cell(severity)="{ value }"> - <span v-if="value === 'Критические'" class="bold-12px__caps errors">{{ - value - }}</span> <span - v-else-if="value === 'Предупреждения'" - class="bold-12px__caps warning" + :class="`indicators-${value}`" + class="bold-12px__caps" + style="text-overflow: ellipsis; white-space: nowrap" + > + {{ value }}</span > - {{ value }} - </span> - <span v-else class="bold-12px__caps information">{{ value }}</span> </template> - <!-- Date column --> + <!-- Source column --> <template #cell(source)="{ value }"> <b-row v-if="value === 'Процессоры'"> <img @@ -211,18 +207,26 @@ /> <span>{{ value }}</span> </b-row> - <b-row v-else> + <b-row v-else-if="value === 'Модули памяти'"> <img src="@/assets/images/event-logs/memory-module.svg" class="sourse__img" /> <span>{{ value }}</span> </b-row> + <b-row v-else> + <span>{{ value }}</span> + </b-row> </template> - + <!-- Date column --> <template #cell(date)="{ value }"> <img src="@/assets/images/event-logs/time.svg" class="sourse__img" /> - <span class="regular-12px quaternary"> {{ value }} </span> + <span v-if="value" class="regular-12px quaternary"> + {{ value | formatDate }} + </span> + <span v-if="value" class="regular-12px quaternary"> + в {{ value | formatTimeShort }} + </span> </template> <!-- Status column --> @@ -246,25 +250,50 @@ > </b-row> </template> + <template #row-details="{ item }"> + <b-container + fluid + style="border-bottom: 1px solid rgba(26, 62, 91, 0.2)" + > + <b-col class="mt-1 mb-2 regular-12px tretiatry"> + <span class="row-details"> + {{ item.description }} + </span> + </b-col> + </b-container> + </template> </b-table> </div> <div class="pagination-container"> <div class="pagination-content"> - <span class="semi-bold-16px"> Страница </span> - <img class="sourse__img" src="@/assets/images/arrow-left.svg" /> - <span class="semi-bold-16px page-input"> 1 </span> - <span class="semi-bold-16px"> из </span> - <span class="semi-bold-16px"> 123 </span> - <img class="sourse__img" src="@/assets/images/arrow-right.svg" /> + <span class="semi-bold-16px"> Страницы </span> + <b-pagination + v-model="currentPage" + class="mt-2" + first-number + last-number + :per-page="perPage" + :total-rows="getTotalRowCount(filteredRows)" + aria-controls="table-event-logs" + /> </div> <div class="pagination-items-limit"> <span class="semi-bold-16px"> Показывать по </span> <b-form-select - v-model="itemsPerPage" + v-model="perPage" :options="itemsPerPageOptions" class="event-logs__filter items-per-page semi-bold-16px" /> <span class="semi-bold-16px"> записей на странице </span> + <b-button + size="md" + variant="primary" + :class="{ disabled: allLogs.length === 0 }" + :download="exportFileNameByDate()" + :href="href" + > + <icon-export /> {{ $t('global.action.exportAll') }} + </b-button> </div> </div> </b-container> @@ -272,19 +301,28 @@ <script> import { omit } from 'lodash'; +import IconExport from '@carbon/icons-vue/es/document--export/20'; import PageTitle from '@/components/Global/PageTitle'; import Popover from '@/components/Global/Popover'; import TableToolbar from '@/components/Global/TableToolbar'; +import TableToolbarExport from '@/components/Global/TableToolbarExport'; + import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; import TableFilterMixin from '@/components/Mixins/TableFilterMixin'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; +import TableSortMixin from '@/components/Mixins/TableSortMixin'; +import BVPaginationMixin, { + currentPage, + perPage, + itemsPerPageOptions, +} from '@/components/Mixins/BVPaginationMixin'; + import BVTableSelectableMixin, { selectedRows, tableHeaderCheckboxModel, tableHeaderCheckboxIndeterminate, } from '@/components/Mixins/BVTableSelectableMixin'; -import BVToastMixin from '@/components/Mixins/BVToastMixin'; -import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; -import TableSortMixin from '@/components/Mixins/TableSortMixin'; import TableRowExpandMixin, { expandRowLabel, } from '@/components/Mixins/TableRowExpandMixin'; @@ -297,6 +335,8 @@ export default { PageTitle, Popover, TableToolbar, + TableToolbarExport, + IconExport, }, mixins: [ BVTableSelectableMixin, @@ -307,6 +347,7 @@ export default { TableSortMixin, TableRowExpandMixin, SearchFilterMixin, + BVPaginationMixin, ], beforeRouteLeave(to, from, next) { // Hide loader if the user navigates to another page @@ -316,257 +357,57 @@ export default { }, data() { return { + isBusy: true, + perPage, + itemsPerPageOptions, + currentPage, sortDesc: true, - stickyHeader: 'calc(100vh - 243px)', - itemsPerPage: 50, - itemsPerPageOptions: [ - { - value: 10, - text: '10', - }, - { - value: 50, - text: '50', - }, - { - value: 100, - text: '100', - }, - ], + stickyHeader: 'calc(100vh - 307px)', fields: [ { key: 'checkbox', sortable: false, - thClass: ' event-logs-table__th', - class: 'event-logs-table__id', - tdClass: 'event-logs-table__td', + thClass: ' logs-table__th', + tdClass: 'logs-table__td', }, { key: 'id', label: this.$t('pageEventLogs.table.id'), sortable: true, - thClass: 'bold-12px__caps event-logs-table__th', - tdClass: 'semi-bold-12px event-logs-table__td', + thClass: 'bold-12px__caps logs-table__th', + tdClass: 'semi-bold-12px logs-table__td', }, { key: 'description', label: this.$t('pageEventLogs.table.about_event'), - thClass: 'bold-12px__caps event-logs-table__th', - tdClass: 'event-logs-table__td', + thClass: 'bold-12px__caps logs-table__th', + tdClass: 'logs-table__td', }, { key: 'severity', label: this.$t('pageEventLogs.table.severity'), - thClass: 'bold-12px__caps event-logs-table__th', - tdClass: 'event-logs-table__td', + thClass: 'bold-12px__caps logs-table__th', + tdClass: 'logs-table__td', }, { key: 'source', label: this.$t('pageEventLogs.table.source'), - thClass: 'bold-12px__caps event-logs-table__th', - tdClass: 'semi-bold-12px__caps tretiatry event-logs-table__td', + thClass: 'bold-12px__caps logs-table__th', + tdClass: 'logs-table__td semi-bold-12px__caps tretiatry ', }, { key: 'date', label: this.$t('pageEventLogs.table.date'), sortable: true, - thClass: `bold-12px__caps event-logs-table__th event-logs-table__th__date`, - tdClass: 'event-logs-table__td', + thClass: `bold-12px__caps logs-table__th`, + tdClass: 'logs-table__td', }, { key: 'status', sortable: true, label: this.$t('pageEventLogs.table.status'), - thClass: 'bold-12px__caps event-logs-table__th', - tdClass: 'event-logs-table__td', - }, - ], - allLogs: [ - { - checkbox: false, - id: 1, - description: { - name: 'Имя источника событий', - description: 'Краткое описание ошибки или сообщени....', - full_description: '', - }, - severity: 'Критические', - source: 'Вентиляторы', - date: '23.11.2021 в 13.36', - status: true, - }, - { - checkbox: false, - id: 2, - description: { - name: 'Имя источника событий', - description: 'Краткое описание ошибки или сообщени....', - }, - severity: 'Информационное', - source: 'Модули памяти', - date: '23.11.2021 в 13.36', - status: false, - }, - { - checkbox: false, - id: 3, - description: { - name: 'Имя источника событий', - description: 'Краткое описание ошибки или сообщени....', - }, - severity: 'Критические', - source: 'Процессоры', - date: '23.11.2021 в 13.36', - status: true, - }, - { - checkbox: false, - id: 4, - description: { - name: 'Имя источника событий', - description: 'Краткое описание ошибки или сообщени....', - }, - severity: 'Предупреждения', - source: 'RAID-контролеры', - date: '23.11.2021 в 13.36', - status: 'expandRow', - }, - { - checkbox: false, - id: 5, - description: { - name: 'Имя источника событий', - description: 'Краткое описание ошибки или сообщени....', - }, - severity: 'Критические', - source: 'Процессоры', - date: '23.11.2021 в 13.36', - status: true, - }, - { - checkbox: false, - id: 6, - description: { - name: 'Имя источника событий', - description: 'Краткое описание ошибки или сообщени....', - }, - severity: 'Предупреждения', - source: 'RAID-контролеры', - date: '23.11.2021 в 13.36', - status: false, - }, - { - checkbox: false, - id: 7, - description: { - name: 'Имя источника событий', - description: 'Краткое описание ошибки или сообщени....', - }, - severity: 'Информационное', - source: 'Модули памяти', - date: '23.11.2021 в 13.36', - status: false, - }, - { - checkbox: false, - id: 8, - description: { - name: 'Имя источника событий', - description: 'Краткое описание ошибки или сообщени....', - }, - severity: 'Критические', - source: 'Вентиляторы', - date: '23.11.2021 в 13.36', - status: true, - }, - { - checkbox: false, - id: 9, - description: { - name: 'Имя источника событий', - description: 'Краткое описание ошибки или сообщени....', - }, - severity: 'Информационное', - source: 'Модули памяти', - date: '23.11.2021 в 13.36', - status: false, - }, - { - checkbox: false, - id: 10, - description: { - name: 'Имя источника событий', - description: 'Краткое описание ошибки или сообщени....', - }, - severity: 'Критические', - source: 'Процессоры', - date: '23.11.2021 в 13.36', - status: true, - }, - { - checkbox: false, - id: 11, - description: { - name: 'Имя источника событий', - description: 'Краткое описание ошибки или сообщени....', - }, - severity: 'Предупреждения', - source: 'RAID-контролеры', - date: '23.11.2021 в 13.36', - status: 'expandRow', - }, - { - checkbox: false, - id: 12, - description: { - name: 'Имя источника событий', - description: 'Краткое описание ошибки или сообщени....', - }, - severity: 'Критические', - source: 'Процессоры', - date: '23.11.2021 в 13.36', - status: true, - }, - { - checkbox: false, - id: 13, - description: { - name: 'Имя источника событий', - description: 'Краткое описание ошибки или сообщени....', - }, - severity: 'Предупреждения', - source: 'RAID-контролеры', - date: '23.11.2021 в 13.36', - status: false, - }, - { - checkbox: false, - id: 14, - description: { - name: 'Имя источника событий', - description: 'Краткое описание ошибки или сообщени....', - }, - severity: 'Информационное', - source: 'Модули памяти', - date: '23.11.2021 в 13.36', - status: false, - }, - ], - tableFilters: [ - { - key: 'severity', - label: this.$t('pageEventLogs.table.severity'), - values: ['Информационное', 'Предупреждения', 'Критические'], - }, - { - key: 'filterByStatus', - label: this.$t('pageEventLogs.table.status'), - values: ['Resolved', 'Unresolved'], - }, - { - key: 'status', - label: this.$t('pageEventLogs.table.status'), - values: [false, true], + thClass: 'bold-12px__caps logs-table__th', + tdClass: 'logs-table__td', }, ], eventFilter: 1, @@ -587,13 +428,17 @@ export default { text: 'Информационное', }, { - value: 'warning', + value: 'Warning', text: 'Предупреждения', }, { value: 'critical', text: 'Критические', }, + { + value: 'ok', + text: 'ok', + }, ], eventSourseFilter: 1, eventSourseFilters: [ @@ -636,23 +481,23 @@ export default { ? this.searchTotalFilteredRows : this.filteredLogs.length; }, - // allLogs() { - // return this.$store.getters['eventLog/allEvents'].map((event) => { - // return { - // ...event, - // actions: [ - // { - // value: 'export', - // title: this.$t('global.action.export'), - // }, - // { - // value: 'delete', - // title: this.$t('global.action.delete'), - // }, - // ], - // }; - // }); - // }, + allLogs() { + return this.$store.getters['eventLog/allEvents'].map((event) => { + return { + ...event, + actions: [ + { + value: 'export', + title: this.$t('global.action.export'), + }, + { + value: 'delete', + title: this.$t('global.action.delete'), + }, + ], + }; + }); + }, batchExportData() { return this.selectedRows.map((row) => omit(row, 'actions')); }, @@ -667,15 +512,15 @@ export default { return this.getFilteredTableData( this.filteredLogsByDate, this.activeFilters - ); + ).filter((el) => el.description); }, }, created() { - // this.startLoader(); - // this.$store.dispatch('eventLog/getEventLogData').finally(() => { - // this.endLoader(); - // this.isBusy = false; - // }); + this.startLoader(); + this.$store.dispatch('eventLog/getEventLogData').finally(() => { + this.endLoader(); + this.isBusy = false; + }); }, methods: { redirectFans() { @@ -693,21 +538,10 @@ export default { .catch(({ message }) => this.errorToast(message)); }, deleteAllLogs() { - this.$bvModal - .msgBoxConfirm(this.$t('pageEventLogs.modal.deleteAllMessage'), { - title: this.$t('pageEventLogs.modal.deleteAllTitle'), - okTitle: this.$t('global.action.delete'), - okVariant: 'danger', - cancelTitle: this.$t('global.action.cancel'), - }) - .then((deleteConfirmed) => { - if (deleteConfirmed) { - this.$store - .dispatch('eventLog/deleteAllEventLogs', this.allLogs) - .then((message) => this.successToast(message)) - .catch(({ message }) => this.errorToast(message)); - } - }); + this.$store + .dispatch('eventLog/deleteAllEventLogs', this.allLogs) + .then((message) => this.successToast(message)) + .catch(({ message }) => this.errorToast(message)); }, deleteLogs(uris) { this.$store @@ -738,19 +572,19 @@ export default { return this.sortStatus(a, b, key); } }, - // onTableRowAction(action, { uri }) { - // if (action === 'delete') { - // this.$bvModal - // .msgBoxConfirm(this.$tc('pageEventLogs.modal.deleteMessage'), { - // title: this.$tc('pageEventLogs.modal.deleteTitle'), - // okTitle: this.$t('global.action.delete'), - // cancelTitle: this.$t('global.action.cancel'), - // }) - // .then((deleteConfirmed) => { - // if (deleteConfirmed) this.deleteLogs([uri]); - // }); - // } - // }, + onTableRowAction(action, { uri }) { + if (action === 'delete') { + this.$bvModal + .msgBoxConfirm(this.$tc('pageEventLogs.modal.deleteMessage'), { + title: this.$tc('pageEventLogs.modal.deleteTitle'), + okTitle: this.$t('global.action.delete'), + cancelTitle: this.$t('global.action.cancel'), + }) + .then((deleteConfirmed) => { + if (deleteConfirmed) this.deleteLogs([uri]); + }); + } + }, onBatchAction(action) { if (action === 'delete') { const uris = this.selectedRows.map((row) => row.uri); @@ -838,17 +672,6 @@ export default { }; </script> <style lang="scss"> -#event-logs-table { - margin: 0 !important; -} - -.event-logs-table__th { - background-color: #f8f8f8 !important; - border-bottom: 1px solid $faint-secondary-primary-20 !important; - border-top: 1px solid $faint-secondary-primary-20 !important; - color: $text-primary !important; -} - .event-logs-section .table.b-table > thead > tr > [aria-sort='ascending'] { background-image: url('../../../assets/images/event-logs/sort-icon-rotate.svg'); } @@ -859,22 +682,11 @@ export default { } .event-logs-section .b-table-sort-icon-left { - background-position: left 57% center !important; background-size: 15px !important; - padding-left: 0.75rem !important; - padding-right: 2rem !important; - &.event-logs-table__th__date { - background-position: left 33% center !important; - } } -.event-logs-table__id { - padding-left: 38px !important; -} - -.event-logs-table__td { - border-bottom: 1px solid $faint-secondary-primary-10 !important; - height: 64px; +.b-table-details > td { + padding: 0px !important; } </style> <style lang="scss" scoped> @@ -962,69 +774,14 @@ $toolbar-height: 64px; width: 236px; } -.bold-12px__caps { - color: $text-primary !important; -} - .custom-checkbox { background-color: none; } -#event-logs-table-wrapper div { - overflow-y: overlay; - &::-webkit-scrollbar { - position: absolute; - width: 10px; - } - &::-webkit-scrollbar-thumb { - border: 4px solid transparent; - border-top: 52px solid transparent; - background: $faint-secondary-primary-20; - border-radius: 16px; - background-clip: content-box; - } -} - -.table-toolbar__resolved-button { - width: 226px; - height: 36px; - background-color: $faint-secondary-primary-5; - border-radius: 8px; - color: $red-brand-primary; - margin-right: 1rem; - justify-content: center; -} - -.table-toolbar__unresolved-button { - width: 226px; - height: 36px; - background-color: $red-brand-primary; - border-radius: 8px; - color: $white; - margin-right: 2rem; - justify-content: center; -} - .sourse__img { padding-right: 8px; } -.errors { - color: $indicators-errors !important; -} - -.warning { - color: $indicators-warning !important; -} - -.information { - color: $indicators-complementary !important; -} - -.resolved { - color: $indicators-succes; -} - .not-resolved { color: $text-quaternary; } @@ -1065,11 +822,12 @@ $toolbar-height: 64px; .pagination-items-limit { margin-left: auto; - width: 400px; display: flex; + gap: 7px; flex-direction: row; align-items: center; justify-content: space-evenly; + margin-right: 1rem; } .items-per-page { |