diff options
Diffstat (limited to 'src/views/SILA')
-rw-r--r-- | src/views/SILA/EventLogs/EventLogs.vue | 833 | ||||
-rw-r--r-- | src/views/SILA/EventLogs/index.js | 2 |
2 files changed, 0 insertions, 835 deletions
diff --git a/src/views/SILA/EventLogs/EventLogs.vue b/src/views/SILA/EventLogs/EventLogs.vue deleted file mode 100644 index c7f65e8b..00000000 --- a/src/views/SILA/EventLogs/EventLogs.vue +++ /dev/null @@ -1,833 +0,0 @@ -<template> - <b-container - :style="{ display: 'flex', 'flex-direction': 'column' }" - fluid="xxl pt-0 m-0" - class="logs-section" - > - <page-title /> - <div class="event-log-head-container"> - <span class="regular-12px">Срок хранения событий:</span> - <span class="semi-bold-12px">42 дня</span> - <span class="regular-12px red" style="color: $red-brand-primary" - >Изменить</span - > - <div class="form-control event-log-search"> - <button class="search-button"> - <img - class="event-log-search__icon" - src="@/assets/images/search-icon.svg" - /> - </button> - <b-form-input - v-model="searchInput" - type="text" - class="event-log-search__input" - placeholder="Поиск по журналу" - @input="onChangeSearchInput" - @clear-search="onClearSearchInput" - > - </b-form-input> - </div> - </div> - <div class="event-logs__section"> - <div class="event-logs__filter-container"> - <span class="caption-12px">{{ $t('pageEventLogs.eventFilter') }}</span> - <b-form-select - v-model="eventFilter" - :options="eventFilters" - class="event-logs__filter regular-14px" - /> - </div> - <div class="event-logs__filter-container"> - <span class="caption-12px">{{ - $t('pageEventLogs.eventTypeFilter') - }}</span> - <b-form-select - v-model="eventTypeFilter" - :options="eventTypeFilters" - class="event-logs__filter regular-14px" - /> - </div> - <div class="event-logs__filter-container"> - <span class="caption-12px">{{ - $t('pageEventLogs.eventSourseFilter') - }}</span> - <b-form-select - v-model="eventSourseFilter" - :options="eventSourseFilters" - class="event-logs__filter regular-14px" - /> - </div> - <div class="event-logs__filter-container"> - <span class="caption-12px">{{ - $t('pageEventLogs.eventDateFilter') - }}</span> - <b-form-select - v-model="eventDateFilter" - :options="eventDateFilters" - class="event-logs__filter-date regular-14px" - /> - </div> - <popover - id="popover-reactive-1" - description="pageEventLogs.clearLogs" - popup="pageEventLogs.clearLogs_popup" - button="pageEventLogs.clear" - placement="bottom" - :isclear="true" - class="clear-popover" - :action="deleteAllLogs" - /> - </div> - <table-toolbar - ref="toolbar" - :selected-items-count="selectedRows.length" - :actions="batchActions" - @clear-selected="clearSelectedRows($refs.table)" - > - <template #toolbar-buttons> - <b-button - size="md" - variant="secondary" - style="margin-right: 1rem" - @click="resolveLogs" - > - <img - class="sourse__img" - src="@/assets/images/event-logs/resolved-button.svg" - /> - {{ $t('pageEventLogs.event_resolve') }} - </b-button> - <b-button - size="md" - variant="primary" - style="margin-right: 1rem" - @click="unresolveLogs" - > - <img - class="sourse__img" - src="@/assets/images/event-logs/archive.svg" - /> - {{ $t('pageEventLogs.archive') }} - </b-button> - <table-toolbar-export - :data="batchExportData" - style="margin-right: 1rem" - :file-name="exportFileNameByDate()" - /> - </template> - </table-toolbar> - <div id="logs-table-wrapper"> - <b-table - id="logs-table" - ref="table" - responsive="md" - class="logs-table" - selectable - :busy="isBusy" - no-select-on-click - sort-icon-left - :sticky-header="stickyHeader" - :no-border-collapse="true" - no-sort-reset - :sort-desc="sortDesc" - sort-by="id" - :current-page="currentPage" - :per-page="perPage" - :fields="fields" - :items="filteredLogs" - :sort-compare="onSortCompare" - :empty-text="$t('global.table.emptyMessage')" - :empty-filtered-text="$t('global.table.emptySearchMessage')" - :filter="searchFilter" - @filtered="onFiltered" - @row-selected="onRowSelected($event, filteredLogs.length)" - > - <!-- Checkbox column --> - <template #head(checkbox)> - <b-form-checkbox - v-model="tableHeaderCheckboxModel" - data-test-id="eventLogs-checkbox-selectAll" - :indeterminate="tableHeaderCheckboxIndeterminate" - @change="onChangeHeaderCheckbox($refs.table)" - > - <span class="sr-only">{{ $t('global.table.selectAll') }}</span> - </b-form-checkbox> - </template> - <template #cell(checkbox)="row"> - <b-form-checkbox - v-model="row.rowSelected" - :data-test-id="`eventLogs-checkbox-selectRow-${row.index}`" - @change="toggleSelectRow($refs.table, row.index)" - > - <span class="sr-only">{{ $t('global.table.selectItem') }}</span> - </b-form-checkbox> - </template> - <template #cell(description)="data"> - <b-row class="semi-bold-16px tretiatry"> - {{ filteredLogs[data.index].name }} - </b-row> - <b-row - class="regular-12px tretiatry pointer" - @click="toggleRowDetails(data)" - > - {{ data.value }} - </b-row> - </template> - <!-- Severity column --> - <template #cell(severity)="{ value }"> - <span - :class="`indicators-${value}`" - class="bold-12px__caps" - style="text-overflow: ellipsis; white-space: nowrap" - > - {{ value }}</span - > - </template> - <!-- Source column --> - <template #cell(source)="{ value }"> - <b-row v-if="value === 'Процессоры'"> - <img - class="sourse__img" - src="@/assets/images/event-logs/processor.svg" - /> - <span>{{ value }}</span> - </b-row> - <b-row v-else-if="value === 'Вентиляторы'"> - <img - class="sourse__img" - src="@/assets/images/event-logs/fans.svg" - /> - <span class="pointer" @click="redirectFans">{{ value }}</span> - </b-row> - <b-row v-else-if="value === 'RAID-контролеры'"> - <img - class="sourse__img" - src="@/assets/images/event-logs/raid-controllers.svg" - /> - <span>{{ value }}</span> - </b-row> - <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 v-if="value" class="regular-12px quaternary"> - {{ value | formatDate }} - </span> - <span v-if="value" class="regular-12px quaternary"> - в {{ value | formatTimeShort }} - </span> - </template> - - <!-- Status column --> - <template #cell(status)="{ value }"> - <b-row v-if="value === true"> - <img - class="sourse__img" - src="@/assets/images/event-logs/resolved.svg" - /> - <span class="semi-bold-12px__caps resolved"> - {{ $t('pageEventLogs.resolved') }} - </span> - </b-row> - <b-row v-else> - <img - class="sourse__img" - src="@/assets/images/event-logs/not-resolved.svg" - /> - <span class="semi-bold-12px__caps not-resolved"> - {{ $t('pageEventLogs.unresolved') }}</span - > - </b-row> - </template> - <template #row-details="{ item }"> - <b-container - fluid - style="border-bottom: 1px solid rgba(26, 62, 91, 0.1)" - > - <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 style="margin-left: 10px" class="pagination-content"> - <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="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> -</template> - -<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 TableRowExpandMixin, { - expandRowLabel, -} from '@/components/Mixins/TableRowExpandMixin'; -import SearchFilterMixin, { - searchFilter, -} from '@/components/Mixins/SearchFilterMixin'; - -export default { - components: { - PageTitle, - Popover, - TableToolbar, - TableToolbarExport, - IconExport, - }, - mixins: [ - BVTableSelectableMixin, - BVToastMixin, - LoadingBarMixin, - TableFilterMixin, - DataFormatterMixin, - TableSortMixin, - TableRowExpandMixin, - SearchFilterMixin, - BVPaginationMixin, - ], - beforeRouteLeave(to, from, next) { - // Hide loader if the user navigates to another page - // before request is fulfilled. - this.hideLoader(); - next(); - }, - data() { - return { - isBusy: true, - perPage, - itemsPerPageOptions, - currentPage, - sortDesc: true, - stickyHeader: 'calc(100vh - 307px)', - fields: [ - { - key: 'checkbox', - sortable: false, - thClass: ' logs-table__th', - tdClass: 'logs-table__td', - }, - { - key: 'id', - label: this.$t('pageEventLogs.table.id'), - sortable: true, - 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 logs-table__th', - tdClass: 'logs-table__td', - }, - { - key: 'severity', - label: this.$t('pageEventLogs.table.severity'), - thClass: 'bold-12px__caps logs-table__th', - tdClass: 'logs-table__td', - }, - { - key: 'source', - label: this.$t('pageEventLogs.table.source'), - 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 logs-table__th`, - tdClass: 'logs-table__td', - }, - { - key: 'status', - sortable: true, - label: this.$t('pageEventLogs.table.status'), - thClass: 'bold-12px__caps logs-table__th', - tdClass: 'logs-table__td', - }, - ], - eventFilter: 1, - eventFilters: [ - { - value: 1, - text: 'Все события', - }, - ], - eventTypeFilter: 'all', - eventTypeFilters: [ - { - value: 'all', - text: 'Все события', - }, - { - value: 'info', - text: 'Информационное', - }, - { - value: 'Warning', - text: 'Предупреждения', - }, - { - value: 'critical', - text: 'Критические', - }, - { - value: 'ok', - text: 'ok', - }, - ], - eventSourseFilter: 1, - eventSourseFilters: [ - { - value: 1, - text: 'Все события', - }, - ], - eventDateFilter: 1, - eventDateFilters: [ - { - value: 1, - text: 'События за последний час', - }, - ], - expandRowLabel, - activeFilters: [], - batchActions: [ - { - value: 'delete', - label: this.$t('global.action.delete'), - }, - ], - filterStartDate: null, - filterEndDate: null, - searchInput: null, - searchFilter: searchFilter, - searchTotalFilteredRows: 0, - selectedRows: selectedRows, - tableHeaderCheckboxModel: tableHeaderCheckboxModel, - tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate, - }; - }, - computed: { - href() { - return `data:text/json;charset=utf-8,${this.exportAllLogs()}`; - }, - filteredRows() { - return this.searchFilter - ? 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'), - }, - ], - }; - }); - }, - batchExportData() { - return this.selectedRows.map((row) => omit(row, 'actions')); - }, - filteredLogsByDate() { - return this.getFilteredTableDataByDate( - this.allLogs, - this.filterStartDate, - this.filterEndDate - ); - }, - filteredLogs() { - 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; - }); - }, - methods: { - redirectFans() { - this.$router.push('/fans'); - }, - changelogStatus(row) { - this.$store - .dispatch('eventLog/updateEventLogStatus', { - uri: row.uri, - status: row.status, - }) - .then((success) => { - this.successToast(success); - }) - .catch(({ message }) => this.errorToast(message)); - }, - deleteAllLogs() { - this.$store - .dispatch('eventLog/deleteAllEventLogs', this.allLogs) - .then((message) => this.successToast(message)) - .catch(({ message }) => this.errorToast(message)); - }, - deleteLogs(uris) { - this.$store - .dispatch('eventLog/deleteEventLogs', uris) - .then((messages) => { - messages.forEach(({ type, message }) => { - if (type === 'success') { - this.successToast(message); - } else if (type === 'error') { - this.errorToast(message); - } - }); - }); - }, - exportAllLogs() { - { - return this.$store.getters['eventLog/allEvents'].map((eventLogs) => { - const allEventLogsString = JSON.stringify(eventLogs); - return allEventLogsString; - }); - } - }, - onFilterChange({ activeFilters }) { - this.activeFilters = activeFilters; - }, - onSortCompare(a, b, key) { - if (key === 'severity') { - 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]); - }); - } - }, - onBatchAction(action) { - if (action === 'delete') { - const uris = this.selectedRows.map((row) => row.uri); - this.$bvModal - .msgBoxConfirm( - this.$tc( - 'pageEventLogs.modal.deleteMessage', - this.selectedRows.length - ), - { - title: this.$tc( - 'pageEventLogs.modal.deleteTitle', - this.selectedRows.length - ), - okTitle: this.$t('global.action.delete'), - cancelTitle: this.$t('global.action.cancel'), - } - ) - .then((deleteConfirmed) => { - if (deleteConfirmed) { - if (this.selectedRows.length === this.allLogs.length) { - this.$store - .dispatch( - 'eventLog/deleteAllEventLogs', - this.selectedRows.length - ) - .then((message) => this.successToast(message)) - .catch(({ message }) => this.errorToast(message)); - } else { - this.deleteLogs(uris); - } - } - }); - } - }, - onChangeDateTimeFilter({ fromDate, toDate }) { - this.filterStartDate = fromDate; - this.filterEndDate = toDate; - }, - onFiltered(filteredItems) { - this.searchTotalFilteredRows = filteredItems.length; - }, - // Create export file name based on date - exportFileNameByDate(value) { - let date = new Date(); - date = - date.toISOString().slice(0, 10) + - '_' + - date.toString().split(':').join('-').split(' ')[4]; - let fileName; - if (value === 'export') { - fileName = 'event_log_'; - } else { - fileName = 'all_event_logs_'; - } - return fileName + date; - }, - resolveLogs() { - this.$store - .dispatch('eventLog/resolveEventLogs', this.selectedRows) - .then((messages) => { - messages.forEach(({ type, message }) => { - if (type === 'success') { - this.successToast(message); - } else if (type === 'error') { - this.errorToast(message); - } - }); - }); - }, - unresolveLogs() { - this.$store - .dispatch('eventLog/unresolveEventLogs', this.selectedRows) - .then((messages) => { - messages.forEach(({ type, message }) => { - if (type === 'success') { - this.successToast(message); - } else if (type === 'error') { - this.errorToast(message); - } - }); - }); - }, - }, -}; -</script> -<style lang="scss"> -.b-table-details > td { - padding: 0px !important; -} -</style> -<style lang="scss" scoped> -$toolbar-height: 64px; -.row { - margin: 0px; -} - -.clear-popover { - margin-left: auto; -} - -.event-logs__section { - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; - align-items: center; - height: 84px; - gap: 16px; - margin: 0 32px; -} - -.event-log-head-container { - position: absolute; - top: calc(#{$header-height}); - right: 0px; - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; - align-items: center; - gap: 6px; - z-index: 1001; -} - -.event-log-search { - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; - align-items: center; - border: none; - box-shadow: none; - border-radius: 8px; - margin: 12px 32px 12px 16px; - width: 236px; - height: 40px; -} - -.search-button { - border: none; - background: none; -} - -.event-log-search__icon { - width: 20px; - height: 20px; -} - -.event-log-search__input { - border: none; - background: none; - box-shadow: none; -} - -.event-logs__filter-container { - width: 183px; -} - -.event-logs__filter, -.event-logs__filter-date { - height: 40px; - border: none; - border-radius: 8px; - background-image: url('../../../assets/images/icon-chevron.svg'); -} - -.caption-12px { - padding-left: 10px; -} - -.event-logs__filter { - width: 171px; -} - -.event-logs__filter-date { - width: 236px; -} - -.custom-checkbox { - background-color: none; -} - -.sourse__img { - padding-right: 8px; -} - -.not-resolved { - color: $text-quaternary; -} - -.pagination-container { - width: calc(100% - #{$navigation-width}); - height: $toolbar-height; - position: fixed; - bottom: 0; - right: 0; - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.06); - z-index: $zindex-dropdown; - background-color: $white; -} - -.pagination-content { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-evenly; -} - -.page-input { - display: inline-block; - width: 55px; - height: 24px; - border: 1px solid $on-surface-tretiatry; - border-radius: 4px; - display: flex; - align-items: center; - justify-content: center; -} - -.pagination-items-limit { - margin-left: auto; - display: flex; - gap: 7px; - flex-direction: row; - align-items: center; - justify-content: space-evenly; - margin-right: 1rem; -} - -.items-per-page { - padding: 0 0 0 5px; - width: 55px; - height: 24px; - background-color: transparent; - border: 1px solid $on-surface-tretiatry; - border-radius: 4px; -} - -.row-details { - display: block; - height: auto; - width: 70vw; -} -</style> diff --git a/src/views/SILA/EventLogs/index.js b/src/views/SILA/EventLogs/index.js deleted file mode 100644 index 521efde4..00000000 --- a/src/views/SILA/EventLogs/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import EventLogs from './EventLogs.vue'; -export default EventLogs; |