diff options
Diffstat (limited to 'src/views/SystemDescription')
10 files changed, 73 insertions, 1086 deletions
diff --git a/src/views/SystemDescription/Info/InventoryControlSystem.vue b/src/views/SystemDescription/Info/InventoryControlSystem.vue deleted file mode 100644 index f47b4868..00000000 --- a/src/views/SystemDescription/Info/InventoryControlSystem.vue +++ /dev/null @@ -1,228 +0,0 @@ -<template> - <page-section class="system-control-section"> - <div class="system-control__table"> - <div class="system-control__table__row"> - <div class="system-control__table__cell"> - <div> - <span class="semi-bold-12px"> - {{ $t('SystemDescription.title.ReloadServer') }} - </span> - </div> - <popover - id="popover-reactive-1" - description="SystemDescription.ReloadOSAndServer" - popup="SystemDescription.ReloadOSAndServer_popup" - /> - <popover - id="popover-reactive-2" - description="SystemDescription.ReloadServer" - popup="SystemDescription.ReloadServer_popup" - /> - <div> - <span class="regular-12px underline"> - {{ $t('SystemDescription.ConnectToDesktop') }} - </span> - </div> - </div> - - <div class="system-control__table__cell system-control__table__cell__2"> - <div class="reload-progress__container"> - <span class="regular-12px"> - {{ $t('SystemDescription.status') }} - </span> - <span class="semi-bold-12px progress_bar_percent" - >{{ progress1.value }}%</span - > - <b-progress - class="reload-progress" - :value="progress1.value" - ></b-progress> - </div> - <div class="reload-progress__container"> - <span class="regular-12px"> - {{ $t('SystemDescription.status') }} - </span> - <span - v-if="progress2.value === null" - class="semi-bold-12px progress_bar_percent" - >{{ $t('SystemDescription.NotRunning') }}</span - > - <span v-else class="semi-bold-12px progress_bar_percent" - >{{ progress2.value }}%</span - > - <b-progress - class="reload-progress" - :value="progress2.value" - ></b-progress> - </div> - </div> - - <div class="system-control__table__cell"> - <div> - <span class="semi-bold-12px"> - {{ $t('SystemDescription.title.OnOffServer') }} - </span> - </div> - <div> - <popover - id="popover-reactive-3" - description="SystemDescription.OffOsAndServer" - popup="SystemDescription.OffOsAndServer_popup" - button="global.action.off" - /> - <popover - id="popover-reactive-4" - description="SystemDescription.OffServer" - popup="SystemDescription.OffServer_popup" - button="global.action.off" - /> - </div> - </div> - </div> - <div class="system-control__table__row"> - <div class="system-control__table__cell system-control__table__cell__4"> - <div> - <span class="semi-bold-12px"> - {{ $t('SystemDescription.title.setupDatetime') }} - </span> - </div> - <b-form @submit.prevent="onResetSubmit"> - <b-form-radio-group - v-model="timeOption" - class="system-control__radio regular-12px" - > - <b-form-radio value="NTP"> - {{ $t('SystemDescription.GetNtpFromServer') }} - </b-form-radio> - <b-form-radio value="serverDate"> - {{ $t('SystemDescription.UseServerDatettime') }} - </b-form-radio> - </b-form-radio-group> - </b-form> - <ntp-popover - id="popover-reactive-5" - description="SystemDescription.NtpSettings" - /> - </div> - </div> - </div> - </page-section> -</template> - -<script> -import PageSection from '@/components/Global/PageSection'; -import Popover from '@/components/Global/Popover'; -import NtpPopover from './NtpPopover'; - -export default { - components: { - PageSection, - NtpPopover, - Popover, - }, - data() { - return { - timeOption: 'resetBios', - picked: '', - options: [ - { text: 'Toggle this custom radio', value: 'first' }, - { text: 'Or toggle this other custom radio', value: 'second' }, - ], - progress1: { - value: 90, - }, - progress2: { - value: null, - }, - }; - }, -}; -</script> -<style lang="scss" scoped> -a { - list-style-type: none; -} - -.system-control-section { - position: relative; - margin: 16px 2rem 2rem !important; - width: 90%; -} - -.system-control__table__row { - display: flex; - flex-flow: row nowrap; - justify-content: space-between; - width: 85%; -} - -.system-control__table__cell { - display: flex; - flex-flow: column nowrap; - align-items: flex-start; - row-gap: 6px; -} - -.system-control__table__cell__2 { - margin-top: 37px; - row-gap: 14px; -} - -.reload-progress__container { - display: flex; - flex-flow: row nowrap; - align-items: baseline; - justify-content: space-between; - width: 100%; - column-gap: 4px; -} - -.semi-bold-12px { - display: inline-block; -} - -label { - padding-top: 5px; -} -.system-control__table__cell__4 { - margin-top: 26px; -} - -.custom-radio ::before { - border: 1px solid $red-brand-primary; - background-color: #fff; - border-radius: 100%; -} - -.system-control-section::v-deep - .custom-control-input:checked - ~ .custom-control-label::before { - border: 2px solid $red-brand-primary; - background-color: $red-brand-primary; - box-shadow: 0px 0px 0px 2.5px $white inset; - border-radius: 100%; -} - -.system-control-section::v-deep - .custom-control-input:hover - ~ .custom-control-label::before { - background-color: $red-brand-primary-hover !important; - box-shadow: 0px 0px 0px 2.5px $white inset; - border-color: $red-brand-primary-hover; -} - -.system-control-section::v-deep - .custom-control-input:checked - ~ .custom-control-label::after { - background-image: none !important; - border-radius: 100%; -} - -.system-control-section::v-deep - .custom-control-input:active - ~ .custom-control-label::before { - background-color: $red-brand-primary-active !important; - box-shadow: 0px 0px 0px 2.5px $white inset; - border-color: $red-brand-primary-active; -} -</style> diff --git a/src/views/SystemDescription/Info/InventoryTableSystem.vue b/src/views/SystemDescription/Info/InventoryTableSystem.vue index b022fd6d..f903a46b 100644 --- a/src/views/SystemDescription/Info/InventoryTableSystem.vue +++ b/src/views/SystemDescription/Info/InventoryTableSystem.vue @@ -7,7 +7,6 @@ :items="systems" :fields="fields" :empty-text="$t('global.table.emptyMessage')" - :busy="isBusy" > </b-table> </page-section> @@ -26,7 +25,6 @@ export default { mixins: [BVToastMixin, TableRowExpandMixin], data() { return { - isBusy: true, fields: [ { key: 'param', diff --git a/src/views/SystemDescription/Info/NtpPopover.vue b/src/views/SystemDescription/Info/NtpPopover.vue deleted file mode 100644 index 81e95e4d..00000000 --- a/src/views/SystemDescription/Info/NtpPopover.vue +++ /dev/null @@ -1,141 +0,0 @@ -<template> - <div id="my-container"> - <span :id="id" class="regular-12px underline" variant="primary"> - {{ $t(description) }} - </span> - <!-- Our popover title and content render container --> - <b-popover - :target="id" - placement="auto" - container="my-container" - :show.sync="popoverShow" - @show="onShow" - @shown="onShown" - @hidden="onHidden" - > - <template #title> - <div class="popup-title"> - <span class="bold-16px__caps">{{ $t(description) }}</span> - <b-button class="popup-title__button_close" @click="onClose"> - <img src="@/assets/images/popups/x-icon.svg" /> - </b-button> - </div> - </template> - - <div class="popup-body"> - <div class="popup-body__input-container"> - <span class="regular-12px tretiatry" - >Введите адрес сервера (IP, FQDM)</span - > - <b-form-input - id="popover-input-1" - v-model="input1" - class="medium-12px" - ></b-form-input> - </div> - <b-button class="popover-button" variant="primary" @click="onClose"> - {{ $t('global.action.save') }} - </b-button> - </div> - </b-popover> - </div> -</template> - -<script> -export default { - props: { - description: { - type: String, - default: '', - }, - id: { - type: String, - default: '', - }, - button: { - type: String, - default: 'Reload', - }, - }, - data() { - return { - input1: '', - popoverShow: false, - }; - }, - methods: { - onShow() { - this.$root.$emit('bv::hide::popover'); - }, - onClose() { - this.popoverShow = false; - }, - }, -}; -</script> -<style lang="scss" scoped> -.form-group { - margin: 0; -} - -.popup-title { - display: flex; - flex-flow: row nowrap; - align-items: baseline; -} - -.popup-title__button_close { - margin: 0 28px 0 auto; - background: none; - border: none; - &:active { - background-color: $faint-secondary-primary-5-hover !important; - box-shadow: none !important; - border-radius: 8px; - } - &:focus-visible { - border: none !important; - border-radius: 8px; - } - &:focus { - box-shadow: none; - border-radius: 8px; - } -} - -.popup-body { - display: flex; - flex-direction: column; - align-content: center; - justify-content: center; -} - -.form-control { - width: 341px; - height: 52px; - background: rgba(26, 62, 91, 0.05); - border-radius: 8px; - border: none; - margin: -25px auto; - padding-top: 30px; -} - -.popover-button { - width: 341px; - height: 40px; - margin: 0 auto 10px; -} - -.popup-body__input-container { - height: 52px; - margin: 24px auto 16px auto; -} - -.tretiatry { - margin-left: 12px; -} - -.underline { - cursor: pointer; -} -</style> diff --git a/src/views/SystemDescription/Info/SystemDescription.vue b/src/views/SystemDescription/Info/SystemDescription.vue index 7322d03e..558c70ef 100644 --- a/src/views/SystemDescription/Info/SystemDescription.vue +++ b/src/views/SystemDescription/Info/SystemDescription.vue @@ -10,7 +10,7 @@ <b-button v-b-toggle.toggle-collapse_1 variant="link" - class="server-info-collapse__button semi-bold-16px" + class="collapse-button semi-bold-16px" > {{ $t('SystemDescription.title.ServerConfig') }} <component :is="iconChevronUp" class="icon-expand" /> @@ -78,7 +78,7 @@ <b-button v-b-toggle.toggle-collapse_2 variant="link" - class="server-info-collapse__button semi-bold-16px" + class="collapse-button semi-bold-16px" > {{ $t('SystemDescription.title.Control') }} <component :is="iconChevronUp" class="icon-expand" /> @@ -94,8 +94,7 @@ <script> import PageTitle from '@/components/Global/PageTitle'; import TableSystem from './InventoryTableSystem'; -import ControlSystem from './InventoryControlSystem'; -// import PageSection from '@/components/Global/PageSection'; +import ControlSystem from '@/components/Global/SilaComponents/InventoryControlSystem'; import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; export default { @@ -103,7 +102,6 @@ export default { PageTitle, ControlSystem, TableSystem, - // PageSection, }, data() { return { @@ -120,22 +118,6 @@ export default { padding: 0; } -.server-info-collapse__button { - height: 56px; - width: 100%; - padding: 0 0 0 2rem; - margin: 0; - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; - &:active, - &:focus { - box-shadow: none; - } - &:hover { - color: $text-primary; - } -} .nav-item { list-style-type: none; } diff --git a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue index 69807762..b96c9251 100644 --- a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue +++ b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue @@ -11,33 +11,34 @@ <template #cell(value)="data"> <b-row v-if="!(typeof data.value === 'boolean')"> <b-form-input - v-if="systems[data.index].isEdit && selectedCell === 'value'" + v-if="systems[data.index].isEdit" ref="input" - v-model="systems[data.index].value" + v-model="selectedCell" class="regular-12px" + :class="{ validateIP: isIpInvalid }" type="text" + @keydown.enter="clickOk(data)" + @keydown.escape="clickCancel(data)" ></b-form-input> <b-col v-else>{{ data.value }}</b-col> <b-col class="system-network-table__icon-col"> - <b-row - v-if="systems[data.index].isEdit && selectedCell === 'value'" - > + <b-row v-if="systems[data.index].isEdit"> <img src="@/assets/images/edit-ok.svg" class="system-network-table__icon pointer" - @click="clickOk" + @click="clickOk(data)" /> <img src="@/assets/images/edit-no.svg" class="system-network-table__icon close_icon pointer" - @click="clickCancel" + @click="clickCancel(data)" /> </b-row> <img v-else src="@/assets/images/icon-edit.svg" class="system-network-table__icon pointer" - @click="editCellHandler(data, 'value')" + @click="editCellHandler(data)" /> </b-col> </b-row> @@ -85,6 +86,7 @@ export default { return { selectedCell: null, isActive: false, + isIpInvalid: false, fields: [ { key: 'param', @@ -144,22 +146,33 @@ export default { ], }; }, - mounted() { - this.systems = this.systems.map((item) => ({ ...item, isEdit: false })); - }, methods: { - editCellHandler(data, value) { + editCellHandler(data) { this.systems = this.systems.map((item) => ({ ...item, isEdit: false })); this.systems[data.index].isEdit = true; - this.selectedCell = value; + this.selectedCell = this.systems[data.index].value; this.$nextTick(() => this.$refs.input.focus()); }, clickOk(data) { - this.selectedCell = null; - this.systems[data.index].value = this.$refs.input.value; + const EDIT_VALUE = this.selectedCell.trim(); + if (this.validateIP(EDIT_VALUE)) { + this.systems[data.index].value = EDIT_VALUE; + this.isIpInvalid = false; + this.selectedCell = null; + this.systems[data.index].isEdit = false; + } else { + this.isIpInvalid = true; + } }, - clickCancel() { + clickCancel(data) { + this.isIpInvalid = false; this.selectedCell = null; + this.systems[data.index].isEdit = false; + }, + validateIP(ipCheck) { + return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test( + ipCheck + ); }, DHCPoff() { this.systems[0].value = false; @@ -205,14 +218,15 @@ export default { } .form-control { - border: none; max-height: 16px; width: 60%; - border: none; background-color: transparent; &:focus { box-shadow: none; } + &.validateIP { + color: $red-brand-primary; + } } .popup-container { position: relative; diff --git a/src/views/SystemDescription/Network/InventoryIPv6Settings.vue b/src/views/SystemDescription/Network/InventoryIPv6Settings.vue index 4ff0897a..3de1c414 100644 --- a/src/views/SystemDescription/Network/InventoryIPv6Settings.vue +++ b/src/views/SystemDescription/Network/InventoryIPv6Settings.vue @@ -11,33 +11,34 @@ <template #cell(value)="data"> <b-row v-if="!(typeof data.value === 'boolean')"> <b-form-input - v-if="systems[data.index].isEdit && selectedCell === 'value'" + v-if="systems[data.index].isEdit" ref="input" - v-model="systems[data.index].value" + v-model="selectedCell" class="regular-12px" + :class="{ validateIP: isIpInvalid }" type="text" + @keydown.enter="clickOk(data)" + @keydown.escape="clickCancel(data)" ></b-form-input> <b-col v-else>{{ data.value }}</b-col> <b-col class="system-network-table__icon-col"> - <b-row - v-if="systems[data.index].isEdit && selectedCell === 'value'" - > + <b-row v-if="systems[data.index].isEdit"> <img src="@/assets/images/edit-ok.svg" class="system-network-table__icon pointer" - @click="clickOk" + @click="clickOk(data)" /> <img src="@/assets/images/edit-no.svg" class="system-network-table__icon close_icon pointer" - @click="clickCancel" + @click="clickCancel(data)" /> </b-row> <img v-else src="@/assets/images/icon-edit.svg" class="system-network-table__icon pointer" - @click="editCellHandler(data, 'value')" + @click="editCellHandler(data)" /> </b-col> </b-row> @@ -85,6 +86,7 @@ export default { return { isBusy: true, selectedCell: null, + isIpInvalid: false, isActive: false, fields: [ { @@ -124,43 +126,54 @@ export default { }, { param: 'IP-адрес', - value: '192.168.1.1', + value: 'fe80::1ff:fe23:4567:890a', comment: 'Введите IP адрес', }, { param: 'Маска', - value: '192.168.0.1', + value: 'fe80::1ff:fe23:4567:890a', comment: 'Введите маску сети', }, { param: 'Сетевой шлюз', - value: '192.168.0.1', + value: 'fe80::1ff:fe23:4567:890a', comment: 'Введите сетевой шлюз', }, { param: 'DNS', - value: '8.8.8.8', + value: 'fe80::1ff:fe23:4567:890a', comment: 'Введите DNS', }, ], }; }, - mounted() { - this.systems = this.systems.map((item) => ({ ...item, isEdit: false })); - }, methods: { - editCellHandler(data, value) { + editCellHandler(data) { this.systems = this.systems.map((item) => ({ ...item, isEdit: false })); this.systems[data.index].isEdit = true; - this.selectedCell = value; + this.selectedCell = this.systems[data.index].value; this.$nextTick(() => this.$refs.input.focus()); }, clickOk(data) { - this.selectedCell = null; - this.systems[data.index].value = this.$refs.input.value; + const EDIT_VALUE = this.selectedCell.trim(); + if (this.validateIP(EDIT_VALUE)) { + this.systems[data.index].value = EDIT_VALUE; + this.isIpInvalid = false; + this.selectedCell = null; + this.systems[data.index].isEdit = false; + } else { + this.isIpInvalid = true; + } }, - clickCancel() { + clickCancel(data) { + this.isIpInvalid = false; this.selectedCell = null; + this.systems[data.index].isEdit = false; + }, + validateIP(ipCheck) { + return /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/gi.test( + ipCheck + ); }, DHCPoff() { this.systems[0].value = false; @@ -191,14 +204,15 @@ export default { } .form-control { - border: none; max-height: 16px; width: 60%; - border: none; background-color: transparent; &:focus { box-shadow: none; } + &.validateIP { + color: $red-brand-primary; + } } .popup-container { diff --git a/src/views/SystemDescription/Network/SystemNetwork.vue b/src/views/SystemDescription/Network/SystemNetwork.vue index 4cf264cf..17b48794 100644 --- a/src/views/SystemDescription/Network/SystemNetwork.vue +++ b/src/views/SystemDescription/Network/SystemNetwork.vue @@ -10,7 +10,7 @@ <b-button v-b-toggle.toggle-collapse_1 variant="link" - class="server-info-collapse__button semi-bold-16px" + class="collapse-button semi-bold-16px" @click="ipv4Handler" > {{ $t('SystemDescription.title.Ipv4Settings') }} @@ -29,7 +29,7 @@ <b-button v-b-toggle.toggle-collapse_2 variant="link" - class="server-info-collapse__button semi-bold-16px" + class="collapse-button semi-bold-16px" @click="ipv6Handler" > {{ $t('SystemDescription.title.Ipv6Settings') }} @@ -43,7 +43,6 @@ <i-pv6-settings ref="system" /> </b-collapse> </div> - <modal-user @hidden="activeUser = null" /> </div> </b-container> </template> @@ -85,23 +84,6 @@ export default { padding: 0; } -.server-info-collapse__button { - height: 56px; - width: 100%; - padding: 0 0 0 2rem; - margin: 0; - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; - &:active, - &:focus { - box-shadow: none; - } - &:hover { - color: $text-primary; - } -} - .nav-item { list-style-type: none; } @@ -117,11 +99,4 @@ a { background-color: none; margin: 0 20px 0 auto; } - -.custom-checkbox ::before { - box-shadow: none !important; - border: 2px solid rgba(4, 10, 15, 0.6); - background-color: #fff; - border-radius: 3px; -} </style> diff --git a/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue b/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue index e9868b05..a40edb41 100644 --- a/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue +++ b/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue @@ -22,7 +22,6 @@ <b-col> <b-form-checkbox v-model="queueItems[data.index].active" - class="switch-input" switch @change="toggleLoad" > diff --git a/src/views/SystemDescription/SystemEventLogs/SystemEventLogs.vue b/src/views/SystemDescription/SystemEventLogs/SystemEventLogs.vue deleted file mode 100644 index e84d23db..00000000 --- a/src/views/SystemDescription/SystemEventLogs/SystemEventLogs.vue +++ /dev/null @@ -1,624 +0,0 @@ -<template> - <b-container - :style="{ display: 'flex', 'flex-direction': 'column' }" - fluid="xxl pt-0 m-0" - > - <page-title /> - <b-row class="align-items-start"> - <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4"> - <search - :placeholder="$t('pageEventLogs.table.searchLogs')" - data-test-id="eventLogs-input-searchLogs" - @change-search="onChangeSearchInput" - @clear-search="onClearSearchInput" - /> - <div class="ml-sm-4"> - <table-cell-count - :filtered-items-count="filteredRows" - :total-number-of-cells="allLogs.length" - ></table-cell-count> - </div> - </b-col> - <b-col sm="8" md="7" xl="6"> - <table-date-filter @change="onChangeDateTimeFilter" /> - </b-col> - </b-row> - <b-row> - <b-col class="text-right"> - <table-filter :filters="tableFilters" @filter-change="onFilterChange" /> - <b-button - variant="link" - :disabled="allLogs.length === 0" - @click="deleteAllLogs" - > - <icon-delete /> {{ $t('global.action.deleteAll') }} - </b-button> - <b-button - variant="primary" - :class="{ disabled: allLogs.length === 0 }" - :download="exportFileNameByDate()" - :href="href" - > - <icon-export /> {{ $t('global.action.exportAll') }} - </b-button> - </b-col> - </b-row> - <b-row> - <b-col> - <table-toolbar - ref="toolbar" - :selected-items-count="selectedRows.length" - :actions="batchActions" - @clear-selected="clearSelectedRows($refs.table)" - @batch-action="onBatchAction" - > - <template #toolbar-buttons> - <b-button variant="primary" @click="resolveLogs"> - {{ $t('pageEventLogs.resolve') }} - </b-button> - <b-button variant="primary" @click="unresolveLogs"> - {{ $t('pageEventLogs.unresolve') }} - </b-button> - <table-toolbar-export - :data="batchExportData" - :file-name="exportFileNameByDate()" - /> - </template> - </table-toolbar> - <b-table - id="table-event-logs" - ref="table" - responsive="md" - selectable - no-select-on-click - sort-icon-left - hover - no-sort-reset - sort-desc - show-empty - sort-by="id" - :fields="fields" - :items="filteredLogs" - :sort-compare="onSortCompare" - :empty-text="$t('global.table.emptyMessage')" - :empty-filtered-text="$t('global.table.emptySearchMessage')" - :per-page="perPage" - :current-page="currentPage" - :filter="searchFilter" - :busy="isBusy" - @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> - - <!-- Expand chevron icon --> - <template #cell(expandRow)="row"> - <b-button - variant="link" - :aria-label="expandRowLabel" - :title="expandRowLabel" - class="btn-icon-only" - @click="toggleRowDetails(row)" - > - <icon-chevron /> - </b-button> - </template> - - <template #row-details="{ item }"> - <b-container fluid> - <b-row> - <b-col> - <dl> - <!-- Name --> - <dt>{{ $t('pageEventLogs.table.name') }}:</dt> - <dd>{{ dataFormatter(item.name) }}</dd> - </dl> - <dl> - <!-- Type --> - <dt>{{ $t('pageEventLogs.table.type') }}:</dt> - <dd>{{ dataFormatter(item.type) }}</dd> - </dl> - </b-col> - <b-col> - <dl> - <!-- Modified date --> - <dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt> - <dd v-if="item.modifiedDate"> - {{ item.modifiedDate | formatDate }} - {{ item.modifiedDate | formatTime }} - </dd> - <dd v-else>--</dd> - </dl> - </b-col> - <b-col class="text-nowrap"> - <b-button - class="btn btn-secondary float-right" - :href="item.additionalDataUri" - target="_blank" - > - <icon-download />{{ $t('pageEventLogs.additionalDataUri') }} - </b-button> - </b-col> - </b-row> - </b-container> - </template> - - <!-- Severity column --> - <template #cell(severity)="{ value }"> - <status-icon v-if="value" :status="statusIcon(value)" /> - {{ value }} - </template> - <!-- Date column --> - <template #cell(date)="{ value }"> - <p class="mb-0">{{ value | formatDate }}</p> - <p class="mb-0">{{ value | formatTime }}</p> - </template> - - <!-- Status column --> - <template #cell(status)="row"> - <b-form-checkbox - v-model="row.item.status" - name="switch" - switch - @change="changelogStatus(row.item)" - > - <span v-if="row.item.status"> - {{ $t('pageEventLogs.resolved') }} - </span> - <span v-else> {{ $t('pageEventLogs.unresolved') }} </span> - </b-form-checkbox> - </template> - <template #cell(filterByStatus)="{ value }"> - {{ value }} - </template> - - <!-- Actions column --> - <template #cell(actions)="row"> - <table-row-action - v-for="(action, index) in row.item.actions" - :key="index" - :value="action.value" - :title="action.title" - :row-data="row.item" - :export-name="exportFileNameByDate('export')" - :data-test-id="`eventLogs-button-deleteRow-${row.index}`" - @click-table-action="onTableRowAction($event, row.item)" - > - <template #icon> - <icon-export v-if="action.value === 'export'" /> - <icon-trashcan v-if="action.value === 'delete'" /> - </template> - </table-row-action> - </template> - </b-table> - </b-col> - </b-row> - - <!-- Table pagination --> - <b-row> - <b-col sm="6"> - <b-form-group - class="table-pagination-select" - :label="$t('global.table.itemsPerPage')" - label-for="pagination-items-per-page" - > - <b-form-select - id="pagination-items-per-page" - v-model="perPage" - :options="itemsPerPageOptions" - /> - </b-form-group> - </b-col> - <b-col sm="6"> - <b-pagination - v-model="currentPage" - first-number - last-number - :per-page="perPage" - :total-rows="getTotalRowCount(filteredRows)" - aria-controls="table-event-logs" - /> - </b-col> - </b-row> - </b-container> -</template> - -<script> -import IconDelete from '@carbon/icons-vue/es/trash-can/20'; -import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; -import IconExport from '@carbon/icons-vue/es/document--export/20'; -import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; -import IconDownload from '@carbon/icons-vue/es/download/20'; -import { omit } from 'lodash'; - -import PageTitle from '@/components/Global/PageTitle'; -import StatusIcon from '@/components/Global/StatusIcon'; -import Search from '@/components/Global/Search'; -import TableCellCount from '@/components/Global/TableCellCount'; -import TableDateFilter from '@/components/Global/TableDateFilter'; -import TableFilter from '@/components/Global/TableFilter'; -import TableRowAction from '@/components/Global/TableRowAction'; -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 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'; -import SearchFilterMixin, { - searchFilter, -} from '@/components/Mixins/SearchFilterMixin'; - -export default { - components: { - IconDelete, - IconExport, - IconTrashcan, - IconChevron, - IconDownload, - PageTitle, - Search, - StatusIcon, - TableCellCount, - TableFilter, - TableRowAction, - TableToolbar, - TableToolbarExport, - TableDateFilter, - }, - mixins: [ - BVPaginationMixin, - 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 { - isBusy: true, - fields: [ - { - key: 'expandRow', - label: '', - tdClass: 'table-row-expand', - }, - { - key: 'checkbox', - sortable: false, - }, - { - key: 'id', - label: this.$t('pageEventLogs.table.id'), - sortable: true, - }, - { - key: 'severity', - label: this.$t('pageEventLogs.table.severity'), - sortable: true, - tdClass: 'text-nowrap', - }, - { - key: 'date', - label: this.$t('pageEventLogs.table.date'), - sortable: true, - tdClass: 'text-nowrap', - }, - { - key: 'description', - label: this.$t('pageEventLogs.table.description'), - tdClass: 'text-break', - }, - { - key: 'status', - label: this.$t('pageEventLogs.table.status'), - }, - { - key: 'actions', - sortable: false, - label: '', - tdClass: 'text-right text-nowrap', - }, - ], - allLogs: [ - { - expandRow: 'expandRow', - checkbox: false, - id: 1, - severity: 'dfjgsdjlk', - date: '12-23-1220', - status: 'expandRow', - description: 'expandRow', - actions: [ - { - value: 'export', - title: this.$t('global.action.export'), - }, - { - value: 'delete', - title: this.$t('global.action.delete'), - }, - ], - }, - ], - tableFilters: [ - { - key: 'severity', - label: this.$t('pageEventLogs.table.severity'), - values: ['OK', 'Warning', 'Critical'], - }, - { - key: 'filterByStatus', - label: this.$t('pageEventLogs.table.status'), - values: ['Resolved', 'Unresolved'], - }, - ], - expandRowLabel, - activeFilters: [], - batchActions: [ - { - value: 'delete', - label: this.$t('global.action.delete'), - }, - ], - currentPage: currentPage, - filterStartDate: null, - filterEndDate: null, - itemsPerPageOptions: itemsPerPageOptions, - perPage: perPage, - 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: { - 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> diff --git a/src/views/SystemDescription/SystemEventLogs/index.js b/src/views/SystemDescription/SystemEventLogs/index.js deleted file mode 100644 index abe245ae..00000000 --- a/src/views/SystemDescription/SystemEventLogs/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import SystemEventLogs from './SystemEventLogs.vue'; -export default SystemEventLogs; |