diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-24 09:43:34 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-24 09:43:34 +0300 |
commit | 6facd12596ec8b55bab4be04b473de65e1f22018 (patch) | |
tree | 9e82b684a4945431b9d798e2e52293477212ec51 /src/views/SILA/EventLogs | |
parent | 5c7a1dd3d6a22e02b983a01be39b654b8eaa6ad1 (diff) | |
download | webui-vue-6facd12596ec8b55bab4be04b473de65e1f22018.tar.xz |
Add depend: highcarts. Pages: power, analytical motherboard, memory, fans, event logs, Fix styles, add global components.
Diffstat (limited to 'src/views/SILA/EventLogs')
-rw-r--r-- | src/views/SILA/EventLogs/EventLogs.vue | 1082 | ||||
-rw-r--r-- | src/views/SILA/EventLogs/index.js | 2 |
2 files changed, 1084 insertions, 0 deletions
diff --git a/src/views/SILA/EventLogs/EventLogs.vue b/src/views/SILA/EventLogs/EventLogs.vue new file mode 100644 index 00000000..0d5ce428 --- /dev/null +++ b/src/views/SILA/EventLogs/EventLogs.vue @@ -0,0 +1,1082 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + class="event-logs-section" + > + <page-title /> + <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 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" + :isclear="true" + class="clear-popover" + /> + </div> + <table-toolbar + ref="toolbar" + :selected-items-count="selectedRows.length" + :actions="batchActions" + @clear-selected="clearSelectedRows($refs.table)" + > + <template #toolbar-buttons> + <b-button + variant="primary" + class="table-toolbar__resolved-button" + @click="resolveLogs" + > + <img + class="sourse__img" + src="@/assets/images/event-logs/resolved-button.svg" + /> + {{ $t('pageEventLogs.event_resolve') }} + </b-button> + <b-button + variant="primary" + class="table-toolbar__unresolved-button" + @click="unresolveLogs" + > + <img + class="sourse__img" + src="@/assets/images/event-logs/archive.svg" + /> + {{ $t('pageEventLogs.archive') }} + </b-button> + </template> + </table-toolbar> + <div id="event-logs-table-wrapper"> + <b-table + id="event-logs-table" + ref="table" + responsive="md" + class="event-logs-table" + selectable + no-select-on-click + sort-icon-left + :sticky-header="stickyHeader" + :no-border-collapse="true" + no-sort-reset + :sort-desc="sortDesc" + sort-by="id" + :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"> + {{ data.item.description.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> + </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" + > + {{ value }} + </span> + <span v-else class="bold-12px__caps information">{{ value }}</span> + </template> + <!-- Date 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> + <img + src="@/assets/images/event-logs/memory-module.svg" + class="sourse__img" + /> + <span>{{ value }}</span> + </b-row> + </template> + + <template #cell(date)="{ value }"> + <img src="@/assets/images/event-logs/time.svg" class="sourse__img" /> + <span class="regular-12px quaternary"> {{ value }} </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> + </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" /> + </div> + <div class="pagination-items-limit"> + <span class="semi-bold-16px"> Показывать по </span> + <b-form-select + v-model="itemsPerPage" + :options="itemsPerPageOptions" + class="event-logs__filter items-per-page semi-bold-16px" + /> + <span class="semi-bold-16px"> записей на странице </span> + </div> + </div> + </b-container> +</template> + +<script> +import { omit } from 'lodash'; +import PageTitle from '@/components/Global/PageTitle'; +import Popover from '@/components/Global/Popover'; +import TableToolbar from '@/components/Global/TableToolbar'; +import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/Mixins/TableFilterMixin'; +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'; +import SearchFilterMixin, { + searchFilter, +} from '@/components/Mixins/SearchFilterMixin'; + +export default { + components: { + PageTitle, + Popover, + TableToolbar, + }, + mixins: [ + BVTableSelectableMixin, + BVToastMixin, + LoadingBarMixin, + TableFilterMixin, + DataFormatterMixin, + TableSortMixin, + TableRowExpandMixin, + SearchFilterMixin, + ], + beforeRouteLeave(to, from, next) { + // Hide loader if the user navigates to another page + // before request is fulfilled. + this.hideLoader(); + next(); + }, + data() { + return { + sortDesc: true, + stickyHeader: 'calc(100vh - 243px)', + itemsPerPage: 50, + itemsPerPageOptions: [ + { + value: 10, + text: '10', + }, + { + value: 50, + text: '50', + }, + { + value: 100, + text: '100', + }, + ], + fields: [ + { + key: 'checkbox', + sortable: false, + thClass: ' event-logs-table__th', + class: 'event-logs-table__id', + tdClass: 'event-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', + }, + { + key: 'description', + label: this.$t('pageEventLogs.table.about_event'), + thClass: 'bold-12px__caps event-logs-table__th', + tdClass: 'event-logs-table__td', + }, + { + key: 'severity', + label: this.$t('pageEventLogs.table.severity'), + thClass: 'bold-12px__caps event-logs-table__th', + tdClass: 'event-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', + }, + { + 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', + }, + { + 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], + }, + ], + eventFilter: 1, + eventFilters: [ + { + value: 1, + text: 'Все события', + }, + ], + eventTypeFilter: 'all', + eventTypeFilters: [ + { + value: 'all', + text: 'Все события', + }, + { + value: 'info', + text: 'Информационное', + }, + { + value: 'warning', + text: 'Предупреждения', + }, + { + value: 'critical', + text: 'Критические', + }, + ], + 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 + ); + }, + }, + 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.$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)); + } + }); + }, + 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"> +#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'); +} + +.event-logs-section .table.b-table > thead > tr > [aria-sort='descending'], +.table.b-table > thead > tr > [aria-sort='none'] { + background-image: url('../../../assets/images/event-logs/sort-icon.svg'); +} + +.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; +} +</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-search { + position: absolute; + top: calc(#{$header-height}); + right: 0px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + border: none; + box-shadow: none; + border-radius: 8px; + margin: 12px 32px; + width: 236px; + height: 40px; + z-index: 1001; +} + +.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; +} + +.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; +} + +.pointer { + cursor: pointer; +} + +.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 { + width: 300px; + 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; + width: 400px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; +} + +.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; +} + +.pointer { + cursor: pointer; +} +</style> diff --git a/src/views/SILA/EventLogs/index.js b/src/views/SILA/EventLogs/index.js new file mode 100644 index 00000000..521efde4 --- /dev/null +++ b/src/views/SILA/EventLogs/index.js @@ -0,0 +1,2 @@ +import EventLogs from './EventLogs.vue'; +export default EventLogs; |