diff options
author | Vitalii Lysak <v.lysak@dunice.net> | 2022-09-20 13:35:38 +0300 |
---|---|---|
committer | Vitalii Lysak <v.lysak@dunice.net> | 2022-09-20 13:35:38 +0300 |
commit | 4d04ae12f310f1bccf1270f1d3a4090b888ecf6e (patch) | |
tree | 793e75c70b133a1ddf2dbfe56134ef869ca7fc62 /src/views | |
parent | ab93e8470ddb49f4a522446dfb9c7882ff37daaf (diff) | |
parent | 37f6f72ff1ed6d4795c3f67ca2ba92367582e562 (diff) | |
download | webui-vue-4d04ae12f310f1bccf1270f1d3a4090b888ecf6e.tar.xz |
merge smtp, snmp, syslog
Diffstat (limited to 'src/views')
-rw-r--r-- | src/views/_sila/Overview/Overview.vue | 10 | ||||
-rw-r--r-- | src/views/_sila/Settings/TransferInfo/ModalSmtp.vue | 98 | ||||
-rw-r--r-- | src/views/_sila/Settings/TransferInfo/ModalSnmp.vue | 136 | ||||
-rw-r--r-- | src/views/_sila/Settings/TransferInfo/Smtp.vue | 414 | ||||
-rw-r--r-- | src/views/_sila/Settings/TransferInfo/Snmp.vue | 139 | ||||
-rw-r--r-- | src/views/_sila/Settings/TransferInfo/Syslog.vue | 220 | ||||
-rw-r--r-- | src/views/_sila/Settings/TransferInfo/Transfer.vue | 64 | ||||
-rw-r--r-- | src/views/_sila/Settings/TransferInfo/WarningSmnp.vue | 57 | ||||
-rw-r--r-- | src/views/_sila/Settings/TransferInfo/index.js | 2 |
9 files changed, 1140 insertions, 0 deletions
diff --git a/src/views/_sila/Overview/Overview.vue b/src/views/_sila/Overview/Overview.vue index 9f97fb3e..c3928789 100644 --- a/src/views/_sila/Overview/Overview.vue +++ b/src/views/_sila/Overview/Overview.vue @@ -5,6 +5,16 @@ <page-section :section-title="$t('pageOverview.systemInformation')" class="mb-1" + @overviewEventsComplete=" + () => { + console.log('как подключить веб камеру к ноутбуку'); + } + " + @overview-firmware-complete=" + () => { + console.log('как подключить веб камеру к ноутбуку'); + } + " > <b-card-group deck> <overview-server /> diff --git a/src/views/_sila/Settings/TransferInfo/ModalSmtp.vue b/src/views/_sila/Settings/TransferInfo/ModalSmtp.vue new file mode 100644 index 00000000..c3bdc493 --- /dev/null +++ b/src/views/_sila/Settings/TransferInfo/ModalSmtp.vue @@ -0,0 +1,98 @@ +<template> + <b-modal + id="modal-smtp" + ref="modal" + :title="$t('global.action.add')" + @hidden="resetForm" + > + <b-form id="form-smtp" @submit.prevent="handleSubmit"> + <b-row> + <b-col sm="6"> + <b-form-group + :label="$t('pageTransfer.smtp.email')" + label-for="smtpEmail" + > + <b-form-input + id="smtpEmail" + v-model="email" + type="text" + :state="getValidationState($v.email)" + data-test-id="smtp-input-email" + @input="$v.email.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.email.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template v-if="!$v.email.email"> + {{ $t('global.form.invalidFormat') }} + </template> + </b-form-invalid-feedback> + </b-form-group> + </b-col> + </b-row> + </b-form> + <template #modal-footer="{ cancel }"> + <b-button variant="secondary" @click="cancel()"> + {{ $t('global.action.cancel') }} + </b-button> + <b-button form="form-smtp" type="submit" variant="primary" @click="onOk"> + {{ $t('global.action.add') }} + </b-button> + </template> + </b-modal> +</template> + +<script> +import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js'; +import { email, required } from 'vuelidate/lib/validators'; + +export default { + mixins: [VuelidateMixin], + data() { + return { + email: null, + }; + }, + validations() { + return { + email: { + required, + email, + }, + }; + }, + methods: { + handleSubmit() { + this.$v.$touch(); + if (this.$v.$invalid) return; + + this.$emit('ok', { + email: this.email, + }); + this.closeModal(); + }, + closeModal() { + this.$nextTick(() => { + this.$refs.modal.hide(); + }); + }, + resetForm() { + this.email = null; + this.$v.$reset(); + this.$emit('hidden'); + }, + onOk(bvModalEvt) { + // prevent modal close + bvModalEvt.preventDefault(); + this.handleSubmit(); + }, + }, +}; +</script> + +<style lang="scss" scoped> +.input-group-prepend + input { + padding-left: 70px !important; +} +</style> diff --git a/src/views/_sila/Settings/TransferInfo/ModalSnmp.vue b/src/views/_sila/Settings/TransferInfo/ModalSnmp.vue new file mode 100644 index 00000000..c54616a5 --- /dev/null +++ b/src/views/_sila/Settings/TransferInfo/ModalSnmp.vue @@ -0,0 +1,136 @@ +<template> + <b-modal + id="modal-snmp" + ref="modal" + :title="$t('global.action.add')" + @hidden="resetForm" + > + <b-form id="form-snmp" @submit.prevent="handleSubmit"> + <b-row> + <b-col sm="6"> + <b-form-group + :label="$t('pageTransfer.snmp.host')" + label-for="snmpHost" + > + <b-form-input + id="snmpHost" + v-model="host" + type="text" + :state="getValidationState($v.host)" + data-test-id="snmp-input-host" + @input="$v.host.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.host.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template v-if="!$v.host.ipAddress"> + {{ $t('global.form.invalidFormat') }} + </template> + </b-form-invalid-feedback> + </b-form-group> + </b-col> + <b-col sm="6"> + <b-form-group + :label="$t('pageTransfer.snmp.port')" + label-for="snmpPort" + > + <b-form-input + id="snmpPort" + v-model="port" + type="number" + :state="getValidationState($v.port)" + data-test-id="snmp-input-port" + @input="$v.port.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.port.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template v-if="!$v.port.pattern"> + {{ $t('global.form.invalidFormat') }} + </template> + </b-form-invalid-feedback> + </b-form-group> + </b-col> + </b-row> + </b-form> + <template #modal-footer="{ cancel }"> + <b-button variant="secondary" @click="cancel()"> + {{ $t('global.action.cancel') }} + </b-button> + <b-button form="form-snmp" type="submit" variant="primary" @click="onOk"> + {{ $t('global.action.add') }} + </b-button> + </template> + </b-modal> +</template> + +<script> +import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js'; +import { helpers, ipAddress, required } from 'vuelidate/lib/validators'; +import { isoPortRegex } from '@/utilities/_sila/regexConstants'; + +export default { + mixins: [VuelidateMixin], + data() { + return { + form: { + Destination: null, + SubscriptionType: 'SNMPTrap', + Protocol: 'SNMPv2c', + Context: 'testContext', + }, + host: null, + port: null, + }; + }, + validations() { + return { + host: { + required, + ipAddress, + }, + port: { + required, + pattern: helpers.regex('pattern', isoPortRegex), + }, + }; + }, + methods: { + handleSubmit() { + this.$v.$touch(); + if (this.$v.$invalid) return; + + this.$emit('ok', { + ...this.form, + Destination: `snmp://${this.host}:${this.port}`, + }); + this.closeModal(); + }, + closeModal() { + this.$nextTick(() => { + this.$refs.modal.hide(); + }); + }, + resetForm() { + this.host = null; + this.port = null; + this.form.Destination = null; + this.$v.$reset(); + this.$emit('hidden'); + }, + onOk(bvModalEvt) { + // prevent modal close + bvModalEvt.preventDefault(); + this.handleSubmit(); + }, + }, +}; +</script> + +<style lang="scss" scoped> +.input-group-prepend + input { + padding-left: 70px !important; +} +</style> diff --git a/src/views/_sila/Settings/TransferInfo/Smtp.vue b/src/views/_sila/Settings/TransferInfo/Smtp.vue new file mode 100644 index 00000000..40a182d8 --- /dev/null +++ b/src/views/_sila/Settings/TransferInfo/Smtp.vue @@ -0,0 +1,414 @@ +<template> + <page-section :section-title="$t('pageTransfer.smtp.smtpTitle')"> + <b-row class="smtp-warning mb-5"> + <b-col xs="12" sm="12"> + <div class="switch-group"> + <label for="authenticationSwitch">{{ + $t('pageTransfer.smtp.authorization') + }}</label> + <b-form-checkbox + id="authenticationSwitch" + v-model="form.is_need_auth" + data-test-id="checkbox-authorization" + switch + :disabled="loading || isNotAdmin" + @change="onChangeAuthCheckbox($event)" + > + <span v-if="form.is_need_auth"> + {{ $t('global.status.enabled') }} + </span> + <span v-else>{{ $t('global.status.disabled') }}</span> + </b-form-checkbox> + </div> + </b-col> + <b-col xs="12" sm="6"> + <b-form-group + :label="$t('pageTransfer.smtp.username')" + label-for="smtp-name" + > + <b-form-input + id="smtp-name" + v-model="form.username" + type="text" + :state="getValidationState($v.form.username)" + :disabled="loading || isNotAdmin || !form.is_need_auth" + @input="$v.form.username.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.username.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template v-else-if="!$v.form.username.maxLength"> + {{ $t('global.form.lengthMustBeBetween', { min: 1, max: 16 }) }} + </template> + <template v-else-if="!$v.form.username.pattern"> + {{ $t('global.form.invalidFormat') }} + </template> + </b-form-invalid-feedback> + </b-form-group></b-col + > + <b-col xs="12" sm="6"> + <b-form-group + :label="$t('pageTransfer.smtp.password')" + label-for="smtp-password" + > + <input-password-toggle> + <b-form-input + id="smtp-password" + v-model="form.password" + type="password" + :state="getValidationState($v.form.password)" + :disabled="loading || isNotAdmin || !form.is_need_auth" + @input="$v.form.password.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.password.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template + v-if=" + !$v.form.password.minLength || !$v.form.password.maxLength + " + > + {{ + $t('pageUserManagement.modal.passwordMustBeBetween', { + min: 8, + max: 20, + }) + }} + </template> + </b-form-invalid-feedback> + </input-password-toggle> + </b-form-group> + </b-col> + <b-col xs="12" sm="6"> + <b-form-group + :label="$t('pageTransfer.smtp.host')" + label-for="smtp-host" + > + <b-form-input + id="smtp-host" + v-model="form.host" + :state="getValidationState($v.form.host)" + :disabled="loading || isNotAdmin" + @input="$v.form.host.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.host.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template v-if="!$v.form.host.ipAddress"> + {{ $t('global.form.invalidFormat') }} + </template> + </b-form-invalid-feedback> + </b-form-group> + </b-col> + <b-col xs="12" sm="6"> + <b-form-group + :label="$t('pageTransfer.smtp.port')" + label-for="smtp-port" + > + <b-form-input + id="smtp-port" + v-model="form.port" + type="number" + :state="getValidationState($v.form.port)" + :disabled="loading || isNotAdmin" + @input="$v.form.port.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.port.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template v-if="!$v.form.port.pattern"> + {{ $t('global.form.invalidFormat') }} + </template> + </b-form-invalid-feedback> + </b-form-group> + </b-col> + <b-col xs="12" sm="12"> + <div class="switch-group"> + <label for="sslSwitch">{{ + $t('pageTransfer.smtp.sslEnabled') + }}</label> + <b-form-checkbox + id="sslSwitch" + v-model="form.is_need_ssl" + data-test-id="checkbox-ssl" + switch + :disabled="isNotAdmin" + > + <span v-if="form.is_need_ssl"> + {{ $t('global.status.enabled') }} + </span> + <span v-else>{{ $t('global.status.disabled') }}</span> + </b-form-checkbox> + </div> + </b-col> + <b-col xs="4" class="d-flex justify-content-between align-items-start"> + <b-button + variant="secondary" + :disabled="loading || isNotAdmin" + @click="sendMail" + > + {{ $t('pageTransfer.smtp.testMessage') }} + </b-button> + + <b-button + variant="primary" + :disabled="loading || isNotAdmin" + @click="saveSmtp" + > + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> + <b-row> + <b-col> + <div class="text-right"> + <b-button + variant="primary" + :disabled="loading || isNotAdmin" + @click="initAddModal()" + > + <icon-add /> + {{ $t('global.action.add') }} + </b-button> + </div> + <b-table + responsive="md" + hover + :busy="loading" + :fields="fields" + :items="subscribers" + :empty-text="$t('global.table.emptyMessage')" + show-empty + > + <!-- table actions column --> + <template #cell(actions)="{ item }"> + <table-row-action + v-for="(action, index) in item.actions" + :key="index" + :value="action.value" + :enabled="action.enabled" + :title="action.title" + @click-table-action="onTableAction($event, item)" + > + <template #icon> + <icon-trashcan + v-if="action.value === 'delete'" + :data-test-id="`smtp-tableRowAction-delete-${index}`" + /> + </template> + </table-row-action> + </template> + </b-table> + </b-col> + </b-row> + </page-section> +</template> + +<script> +import PageSection from '@/components/_sila/Global/PageSection'; +import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin'; +import TableRowAction from '@/components/_sila/Global/TableRowAction'; +import LoadingBarMixin, { + loading, +} from '@/components/_sila/Mixins/LoadingBarMixin'; + +import IconAdd from '@carbon/icons-vue/es/add--alt/20'; +import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; +import InputPasswordToggle from '@/components/_sila/Global/InputPasswordToggle'; +import { + helpers, + ipAddress, + maxLength, + minLength, + required, + requiredIf, +} from 'vuelidate/lib/validators'; +import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js'; +import { isoPortRegex } from '@/utilities/_sila/regexConstants'; + +export default { + name: 'Smtp', + components: { + IconAdd, + IconTrashcan, + PageSection, + TableRowAction, + InputPasswordToggle, + }, + mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin], + + data() { + return { + loading, + form: { + username: '', + password: '', + host: '', + port: '', + is_need_auth: false, + is_need_ssl: false, + }, + fields: [ + { + key: 'host', + label: this.$t('pageTransfer.table.userName'), + }, + { key: 'actions', label: '', tdClass: 'text-right' }, + ], + }; + }, + computed: { + settings() { + return this.$store.getters['smtpStore/settings']; + }, + subscribers() { + return this.$store.getters['smtpStore/subscribers'].map((subscriber) => { + return { + ...subscriber, + actions: [ + { + value: 'delete', + title: this.$t('pageTransfer.smtp.delSubscriber'), + }, + ], + }; + }); + }, + isNotAdmin() { + return ( + this.$store.getters['authentication/role'] === 'ReadOnly' || + this.$store.getters['authentication/role'] === 'Operator' + ); + }, + }, + watch: { + settings() { + this.setForm(); + }, + }, + created() { + this.startLoader(); + Promise.all([ + this.$store.dispatch('smtpStore/getSettings'), + this.$store.dispatch('smtpStore/getSubscribers'), + ]).finally(() => { + this.setForm(); + this.endLoader(); + }); + }, + validations() { + return { + form: { + username: { + required: requiredIf(function () { + return this.form.is_need_auth; + }), + maxLength: maxLength(16), + pattern: helpers.regex('pattern', /^([a-zA-Z_][a-zA-Z0-9_]*)/), + }, + password: { + required: requiredIf(function () { + return this.form.is_need_auth; + }), + minLength: minLength(8), + maxLength: maxLength(20), + }, + host: { + required, + ipAddress, + }, + port: { + required, + pattern: helpers.regex('pattern', isoPortRegex), + }, + }, + }; + }, + methods: { + onChangeAuthCheckbox($event) { + if (!$event) { + this.resetAuthForm(); + } + }, + onTableAction($event, { host }) { + if ($event === 'delete') { + this.deleteSubscriber(host); + } + }, + deleteSubscriber(host) { + this.startLoader(); + this.$store + .dispatch('smtpStore/deleteSubscriber', host) + .then((success) => this.successToast(success)) + .catch(({ message }) => this.errorToast(message)) + .finally(() => this.endLoader()); + }, + initAddModal() { + this.$bvModal.show('modal-smtp'); + }, + saveSmtp() { + this.$v.$touch(); + if (this.$v.$invalid) return; + + this.startLoader(); + if (!this.form.is_need_auth) { + // eslint-disable-next-line no-unused-vars + const { username, password, ...formWithoutCredits } = this.form; + this.form = formWithoutCredits; + } + + this.$store + .dispatch('smtpStore/setSettings', this.form) + .then((message) => this.successToast(message)) + .catch(({ message }) => this.errorToast(message)) + .finally(() => this.endLoader()); + }, + sendMail() { + this.$store + .dispatch('smtpStore/sendTestMessage', { + from: 'ex@mail.ru', + to: 'v.lysak@dunice.net', + subject: 'qwerty', + text: 'lol', + }) + .then((message) => this.successToast(message)) + .catch(({ message }) => this.errorToast(message)); + }, + setForm() { + if (!this.settings) { + return; + } + + this.form.username = this.settings.username; + this.form.password = this.settings.password; + this.form.host = this.settings.host; + this.form.port = this.settings.port; + this.form.is_need_auth = this.settings.is_need_auth; + this.form.is_need_ssl = this.settings.is_need_ssl; + }, + resetAuthForm() { + this.form.username = null; + this.form.password = null; + }, + }, +}; +</script> + +<style lang="scss" scoped> +.switch-group { + margin-bottom: 1.5rem; +} +.smtp-warning { + width: 50%; + @media (max-width: 1200px) { + width: 75%; + } + @media (max-width: 576px) { + width: 100%; + } +} +</style> diff --git a/src/views/_sila/Settings/TransferInfo/Snmp.vue b/src/views/_sila/Settings/TransferInfo/Snmp.vue new file mode 100644 index 00000000..ef9e18ac --- /dev/null +++ b/src/views/_sila/Settings/TransferInfo/Snmp.vue @@ -0,0 +1,139 @@ +<template> + <page-section :section-title="$t('pageTransfer.snmp.snmpTitle')"> + <b-row> + <b-col> + <div class="text-right"> + <b-button + variant="primary" + :disabled="loading || isNotAdmin" + @click="initAddModal()" + > + <icon-add /> + {{ $t('global.action.add') }} + </b-button> + </div> + <b-table + responsive="md" + hover + :busy="loading" + :fields="fields" + :items="subscribers" + :empty-text="$t('global.table.emptyMessage')" + show-empty + > + <!-- table actions column --> + <template #cell(actions)="{ item }"> + <table-row-action + v-for="(action, index) in item.actions" + :key="index" + :value="action.value" + :enabled="action.enabled" + :title="action.title" + @click-table-action="onTableAction($event, item)" + > + <template #icon> + <icon-trashcan + v-if="action.value === 'delete'" + :data-test-id="`snmp-tableRowAction-delete-${index}`" + /> + </template> + </table-row-action> + </template> + </b-table> + </b-col> + </b-row> + </page-section> +</template> + +<script> +import PageSection from '@/components/_sila/Global/PageSection'; +import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin'; +import TableRowAction from '@/components/_sila/Global/TableRowAction'; +import LoadingBarMixin, { + loading, +} from '@/components/_sila/Mixins/LoadingBarMixin'; + +import IconAdd from '@carbon/icons-vue/es/add--alt/20'; +import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; + +export default { + name: 'Snmp', + components: { + IconAdd, + IconTrashcan, + PageSection, + TableRowAction, + }, + mixins: [BVToastMixin, LoadingBarMixin], + + data() { + return { + loading, + actions: [ + { + value: 'delete', + title: this.$t('global.action.delete'), + }, + ], + fields: [ + { + key: 'host', + label: this.$t('pageTransfer.snmp.host'), + }, + { + key: 'port', + label: this.$t('pageTransfer.snmp.port'), + }, + { key: 'actions', label: '', tdClass: 'text-right' }, + ], + }; + }, + computed: { + subscribers() { + return this.$store.getters['snmpStore/subscribers'].map((subscriber) => { + return { + ...subscriber, + actions: [ + { + value: 'delete', + title: this.$t('pageTransfer.snmp.delSubscriber'), + }, + ], + }; + }); + }, + isNotAdmin() { + return ( + this.$store.getters['authentication/role'] === 'ReadOnly' || + this.$store.getters['authentication/role'] === 'Operator' + ); + }, + }, + + created() { + this.startLoader(); + this.$store.dispatch('snmpStore/getSubscribers').finally(() => { + this.endLoader(); + }); + }, + + methods: { + onTableAction($event, { Id }) { + if ($event === 'delete') { + this.deleteSubscriber(Id); + } + }, + deleteSubscriber(index) { + this.startLoader(); + this.$store + .dispatch('snmpStore/deleteSubscriber', index) + .then((success) => this.successToast(success)) + .catch(({ message }) => this.errorToast(message)) + .finally(() => this.endLoader()); + }, + initAddModal() { + this.$bvModal.show('modal-snmp'); + }, + }, +}; +</script> diff --git a/src/views/_sila/Settings/TransferInfo/Syslog.vue b/src/views/_sila/Settings/TransferInfo/Syslog.vue new file mode 100644 index 00000000..07884de5 --- /dev/null +++ b/src/views/_sila/Settings/TransferInfo/Syslog.vue @@ -0,0 +1,220 @@ +<template> + <page-section :section-title="$t('pageTransfer.syslog.title')"> + <b-row class="mt-4 justify-content-end syslog-warning"> + <b-col xs="12" sm="12"> + <div class="switch-group"> + <label for="statusSwitch">{{ + $t('pageTransfer.syslog.status') + }}</label> + <b-form-checkbox + id="statusSwitch" + v-model="syslogStatus" + data-test-id="checkbox-status" + switch + :disabled="loading || isNotAdmin" + @change="onChangeStatusCheckbox($event)" + > + <span v-if="syslogStatus"> + {{ $t('global.status.enabled') }} + </span> + <span v-else>{{ $t('global.status.disabled') }}</span> + </b-form-checkbox> + </div> + </b-col> + <b-col xs="12" sm="6"> + <b-form-group + :label="$t('pageTransfer.syslog.ip')" + label-for="syslog-ip" + > + <b-form-input + id="syslog-ip" + v-model="form.Address" + :state="getValidationState($v.form.Address)" + :disabled="!syslogStatus || loading || isNotAdmin" + @input="$v.form.Address.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.Address.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template v-if="!$v.form.Address.ipAddress"> + {{ $t('global.form.invalidFormat') }} + </template> + </b-form-invalid-feedback> + </b-form-group> + </b-col> + <b-col xs="12" sm="6"> + <b-form-group + :label="$t('pageTransfer.syslog.port')" + label-for="syslog-port" + > + <b-form-input + id="syslog-port" + v-model="form.Port" + type="number" + :state="getValidationState($v.form.Port)" + :disabled="!syslogStatus || loading || isNotAdmin" + @input="$v.form.Address.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.Port.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template v-if="!$v.form.Port.pattern"> + {{ $t('global.form.invalidFormat') }} + </template> + </b-form-invalid-feedback> + </b-form-group> + </b-col> + <b-col xs="4" class="d-flex justify-content-end align-items-start"> + <b-button + variant="primary" + :disabled="loading || isNotAdmin" + @click="saveSyslog" + > + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> + </page-section> +</template> + +<script> +import PageSection from '@/components/_sila/Global/PageSection'; +import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin'; +import LoadingBarMixin, { + loading, +} from '@/components/_sila/Mixins/LoadingBarMixin'; + +import { helpers, ipAddress, requiredIf } from 'vuelidate/lib/validators'; +import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js'; +import { isoPortRegex } from '@/utilities/_sila/regexConstants'; + +export default { + name: 'Syslog', + components: { + PageSection, + }, + mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin], + + data() { + return { + loading, + syslogStatus: false, + form: { + Address: null, + Port: null, + }, + }; + }, + computed: { + settings() { + return this.$store.getters['syslogStore/settings']; + }, + isNotAdmin() { + return ( + this.$store.getters['authentication/role'] === 'ReadOnly' || + this.$store.getters['authentication/role'] === 'Operator' + ); + }, + }, + + watch: { + settings() { + this.setForm(); + }, + }, + + created() { + this.startLoader(); + this.$store.dispatch('syslogStore/getSettings').finally(() => { + this.setForm(); + this.endLoader(); + }); + }, + + validations() { + return { + form: { + Address: { + required: requiredIf(function () { + return this.syslogStatus; + }), + ipAddress, + }, + Port: { + required: requiredIf(function () { + return this.syslogStatus; + }), + pattern: helpers.regex('pattern', isoPortRegex), + }, + }, + }; + }, + + methods: { + onChangeStatusCheckbox($event) { + if (!$event) { + this.resetForm(); + } + }, + saveSyslog() { + this.$v.$touch(); + if (this.$v.$invalid) return; + + this.startLoader(); + if (!this.syslogStatus) { + this.form = { + Address: '', + Port: 0, + }; + } + + this.form.Port = +this.form.Port; + this.$store + .dispatch('syslogStore/saveSettings', this.form) + .then((success) => this.successToast(success)) + .catch(({ message }) => this.errorToast(message)) + .finally(() => this.endLoader()); + }, + + setForm() { + if (!this.settings) { + return; + } + + const isOff = !this.settings.Address && this.settings.Port === 0; + + if (isOff) { + this.syslogStatus = false; + this.form.Address = null; + this.form.Port = null; + } else { + this.syslogStatus = true; + this.form.Address = this.settings.Address; + this.form.Port = this.settings.Port; + } + }, + + resetForm() { + this.form.Address = null; + this.form.Port = null; + }, + }, +}; +</script> + +<style lang="scss" scoped> +.switch-group { + margin-bottom: 1.5rem; +} +.syslog-warning { + width: 50%; + @media (max-width: 1200px) { + width: 75%; + } + @media (max-width: 576px) { + width: 100%; + } +} +</style> diff --git a/src/views/_sila/Settings/TransferInfo/Transfer.vue b/src/views/_sila/Settings/TransferInfo/Transfer.vue new file mode 100644 index 00000000..4b70778b --- /dev/null +++ b/src/views/_sila/Settings/TransferInfo/Transfer.vue @@ -0,0 +1,64 @@ +<template> + <b-container fluid="xl"> + <page-title :description="$t('pageTransfer.description')" /> + <snmp /> + <hr /> + <smtp /> + <hr /> + <syslog /> + <hr /> + <modal-snmp @ok="saveSnmp" /> + <modal-smtp @ok="saveSmtp" /> + </b-container> +</template> + +<script> +import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin'; +import LoadingBarMixin, { + loading, +} from '@/components/_sila/Mixins/LoadingBarMixin'; + +import PageTitle from '@/components/_sila/Global/PageTitle'; +import Snmp from './Snmp'; +import Smtp from './Smtp'; +import ModalSnmp from './ModalSnmp.vue'; +import ModalSmtp from './ModalSmtp.vue'; +import Syslog from './Syslog'; + +export default { + name: 'PowerRestorePolicy', + components: { + PageTitle, + Snmp, + ModalSnmp, + Smtp, + ModalSmtp, + Syslog, + }, + mixins: [BVToastMixin, LoadingBarMixin], + data() { + return { + loading, + }; + }, + methods: { + saveSnmp(modalFormData) { + this.startLoader(); + this.$store + .dispatch('snmpStore/addSubscriber', modalFormData) + .then((message) => this.successToast(message)) + .catch(({ message }) => this.errorToast(message)) + .finally(() => this.endLoader()); + }, + + saveSmtp(modalFormData) { + this.startLoader(); + this.$store + .dispatch('smtpStore/addSubscriber', modalFormData) + .then((message) => this.successToast(message)) + .catch(({ message }) => this.errorToast(message)) + .finally(() => this.endLoader()); + }, + }, +}; +</script> diff --git a/src/views/_sila/Settings/TransferInfo/WarningSmnp.vue b/src/views/_sila/Settings/TransferInfo/WarningSmnp.vue new file mode 100644 index 00000000..df97d1a1 --- /dev/null +++ b/src/views/_sila/Settings/TransferInfo/WarningSmnp.vue @@ -0,0 +1,57 @@ +<template> + <page-section section-title="Предупреждения SNmP"> + <b-row> + <b-col> + <b-table + hover + responsive="md" + show-empty + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + </b-table> + </b-col> + </b-row> + <b-row> + <b-col class="d-flex justify-content-end flex-wrap"> + <b-button variant="secondary" class="mr-3 mb-3"> + {{ 'Тестовое сообщение' }} + </b-button> + <b-button variant="primary" class="mb-3"> + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> + </page-section> +</template> + +<script> +import PageSection from '@/components/_sila/Global/PageSection'; + +export default { + name: 'WarningSmnp', + components: { + PageSection, + }, + + data() { + return { + fields: [ + { + key: 'id', + label: 'Тип предупреждения', + formatter: this.dataFormatter, + }, + { + key: 'health', + label: 'Значение', + formatter: this.dataFormatter, + tdClass: 'text-nowrap', + }, + ], + }; + }, + computed: {}, +}; +</script> diff --git a/src/views/_sila/Settings/TransferInfo/index.js b/src/views/_sila/Settings/TransferInfo/index.js new file mode 100644 index 00000000..50508f66 --- /dev/null +++ b/src/views/_sila/Settings/TransferInfo/index.js @@ -0,0 +1,2 @@ +import Transfer from './Transfer.vue'; +export default Transfer; |