diff options
Diffstat (limited to 'src/views/_sila/BMC/Settings/SettingsPage.vue')
| -rw-r--r-- | src/views/_sila/BMC/Settings/SettingsPage.vue | 439 |
1 files changed, 439 insertions, 0 deletions
diff --git a/src/views/_sila/BMC/Settings/SettingsPage.vue b/src/views/_sila/BMC/Settings/SettingsPage.vue new file mode 100644 index 00000000..97b0ce9d --- /dev/null +++ b/src/views/_sila/BMC/Settings/SettingsPage.vue @@ -0,0 +1,439 @@ +<template> + <b-container + id="page-bmc-settings" + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title :description="$t('appNavigation.broadcastSettings')" /> + <!-- BMC table --> + <div class="bmc-settings-section"> + <div class="smnp-settings-container"> + <span class="bold-12px__caps section-label">{{ $t('BMC.smnp') }}</span> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ $t('BMC.system') }}</label> + <b-form-input + v-model="system" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/_sila/popups/x-icon.svg" /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ $t('BMC.contacts') }}</label> + <b-form-input + type="text" + class="form-control medium-16px" + placeholder="Введите значение" + > + </b-form-input> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('BMC.community') + }}</label> + <b-form-input + v-model="community" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/_sila/popups/x-icon.svg" /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('global.status.status') + }}</label> + <b-form-select + v-model="smnpStatus" + :options="smnpStatuses" + class="select-connection medium-16px" + /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ $t('BMC.smnpIp') }}</label> + <b-form-input + v-model="smnpIp" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/_sila/popups/x-icon.svg" /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ $t('BMC.smnpPort') }}</label> + <b-form-input + v-model="smnpPort" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/_sila/popups/x-icon.svg" /> + </b-form-group> + <div class="accept-container"> + <b-button variant="primary" class="accept-button"> + {{ $t('global.action.acceptChanges') }} + </b-button> + </div> + </div> + </div> + <div class="bmc-settings-section"> + <div class="smnp-settings-container"> + <span class="bold-12px__caps section-label">{{ + $t('BMC.smnpWarning') + }}</span> + <div class="table-section"> + <b-table + responsive="md" + show-empty + no-border-collapse + :items="items" + :fields="fields" + > + <template #cell(value)="{ index }"> + <b-row> + <b-col> + <span v-if="items[index].value"> + {{ $t('global.status.enabled') }} + </span> + <span v-else> + {{ $t('global.status.disabled') }} + </span> + </b-col> + <b-col> + <b-form-checkbox v-model="items[index].value" switch> + </b-form-checkbox> + </b-col> + </b-row> + </template> + </b-table> + </div> + <div class="accept-container"> + <b-button variant="secondary" class="test-message-button"> + {{ $t('BMC.testMessage') }} + </b-button> + <b-button variant="primary" class="accept-button"> + {{ $t('global.action.acceptChanges') }} + </b-button> + </div> + </div> + </div> + + <div class="bmc-settings-section"> + <div class="smnp-settings-container"> + <span class="bold-12px__caps section-label">{{ + $t('BMC.smtpWarning') + }}</span> + <div class="table-section"> + <b-table + responsive="md" + show-empty + no-border-collapse + :items="items2" + :fields="fields2" + > + <template #cell(value)="data"> + <b-row v-if="data.index === 0"> + <b-col> + <span v-if="items2[data.index].value"> + {{ $t('global.status.enabled') }} + </span> + <span v-else> + {{ $t('global.status.disabled') }} + </span> + </b-col> + <b-col> + <b-form-checkbox v-model="items2[data.index].value" switch> + </b-form-checkbox> + </b-col> + </b-row> + <b-row v-else-if="data.index === 4"> + <b-col> + <span> + {{ data.value ? 'Да' : 'Нет' }} + </span> + </b-col> + <b-col> + <b-button + :id="`popover-choice-${data.index}`" + class="popover-option-ractive" + variant="toogle-popover" + > + <img :is="iconChevron" class="icon-chevron" /> + </b-button> + <two-chioce-popover + :id="data.index" + fitst-option="Да" + second-option="Нет" + :chosen-option="chosenOption" + :first-action="setYes" + :second-action="setNo" + placement="leftbottom" + /> + </b-col> + </b-row> + <b-row v-else> + <b-col> + <span> + {{ data.value }} + </span> + </b-col> + <b-col> + <img + src="@/assets/images/icon-edit.svg" + class="icon-chevron icon-edit" + /> + </b-col> + </b-row> + </template> + </b-table> + </div> + </div> + </div> + + <div class="bmc-settings-section last"> + <div class="smnp-settings-container"> + <span class="bold-12px__caps section-label">{{ + $t('BMC.syslogSettings') + }}</span> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('global.status.status') + }}</label> + <b-form-select + v-model="syslogStatus" + :options="syslogStatuses" + class="select-connection medium-16px" + /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ $t('BMC.syslogIP') }}</label> + <b-form-input + v-model="syslogIp" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/_sila/popups/x-icon.svg" /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('BMC.syslogPort') + }}</label> + <b-form-input + v-model="syslogPort" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/_sila/popups/x-icon.svg" /> + </b-form-group> + <div class="accept-container"> + <b-button variant="primary" class="accept-button"> + {{ $t('global.action.acceptChanges') }} + </b-button> + </div> + </div> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import TwoChiocePopover from '@/components/Global/SilaComponents/TwoChiocePopover'; +import iconChevron from '@carbon/icons-vue/es/chevron--down/16'; + +export default { + components: { + PageTitle, + TwoChiocePopover, + }, + data() { + return { + iconChevron, + text: '', + system: '2КА04.02_г17', + community: 'public', + smnpIp: '0.0.0.0', + smnpPort: '161', + syslogIp: '0.0.0.0', + syslogPort: '161', + chosenOption: 'Да', + smnpStatus: true, + smnpStatuses: [ + { + value: true, + text: 'Включена', + }, + { + value: false, + text: 'Выключена', + }, + ], + syslogStatus: true, + syslogStatuses: [ + { + value: true, + text: 'Включена', + }, + { + value: false, + text: 'Выключена', + }, + ], + fields: [ + { + key: 'name', + label: 'Тип предупреждения', + formatter: this.dataFormatter, + thStyle: { width: '70%' }, + }, + { + key: 'value', + label: 'Значение', + formatter: this.dataFormatter, + }, + ], + fields2: [ + { + key: 'attributes', + label: 'Атрибуты', + formatter: this.dataFormatter, + thStyle: { width: '70%' }, + }, + { + key: 'value', + label: 'Значение', + formatter: this.dataFormatter, + }, + ], + items: [ + { + name: 'SNMPv1', + value: true, + }, + { + name: 'SNMPv3', + value: true, + }, + { + name: 'Постоянные запросы и предупреждения SNMPv1', + value: true, + }, + ], + items2: [ + { + attributes: 'Авторизация', + value: true, + }, + { + attributes: 'Логин пользователя', + value: 'admin', + }, + { + attributes: 'Пароль', + value: '******', + }, + { + attributes: 'SMTP-сервер', + value: 'smtp.domian.ru', + }, + { + attributes: 'Поддержка SSI', + value: true, + }, + { + attributes: 'SMTP-порт', + value: 465, + }, + ], + }; + }, + methods: { + setYes() { + this.chosenOption = 'Да'; + this.items2[4].value = true; + }, + setNo() { + this.chosenOption = 'Нет'; + this.items2[4].value = false; + }, + }, +}; +</script> +<style lang="scss" scoped> +.main-container { + margin-top: 16px; +} + +.bmc-settings-section { + border-bottom: 1px solid $faint-secondary-primary-10; + &.last { + margin-bottom: 40px; + } +} +.smnp-settings-container { + display: flex; + flex-flow: row wrap; + gap: 16px; + justify-content: flex-start; + align-items: flex-start; + margin: 16px 0 16px 28px; +} + +.section-label { + display: block; + width: 100%; +} +.form-group { + width: 341px; + height: 35px; +} +.form-control { + margin: -31px 0px 0 -15px; + height: 52px; + width: 341px; + padding: 17px 0 0 15px; +} +.clear-icon { + margin: -80px 0px 0px 300px; +} + +.select-connection { + height: 52px; + width: 341px; + padding-top: 30px; + border: none; + border-radius: 8px; + margin: -31px 0 18px -15px; + background-color: $faint-secondary-primary-5; + background-image: url('../../../../assets/images/_sila/icon-chevron.svg'); +} +.accept-container { + width: 100%; + display: flex; + justify-content: flex-end; +} + +.accept-button { + width: 245px; + height: 36px; + margin-right: 33px; +} +.test-message-button { + width: 245px; + height: 36px; + margin-right: 16px; + background-color: $faint-secondary-primary-5; +} + +.table-section { + width: 100%; + margin: 0 20px 0 0; +} + +.popover-option-ractive { + display: block; + margin: -6px 6px 0 auto; +} +</style> |