summaryrefslogtreecommitdiff
path: root/src/views/SILA/EventLogs/EventLogs.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/views/SILA/EventLogs/EventLogs.vue')
-rw-r--r--src/views/SILA/EventLogs/EventLogs.vue548
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 {
generated by cgit v1.2.3 (git 2.39.0) at 2024-06-26 17:08:49 +0300