diff options
author | Vitalii Lysak <v.lysak@dunice.net> | 2022-09-14 14:53:52 +0300 |
---|---|---|
committer | Vitalii Lysak <v.lysak@dunice.net> | 2022-09-14 14:53:52 +0300 |
commit | 158e0373b621079a714086791113a7e021e326dc (patch) | |
tree | 989bcee5d27a24e8cb338ddfcfc8e475f70dd91d /src/views | |
parent | a38f344867bba7e9770865d68990442acb632459 (diff) | |
download | webui-vue-158e0373b621079a714086791113a7e021e326dc.tar.xz |
finish snmp component
Diffstat (limited to 'src/views')
-rw-r--r-- | src/views/_sila/Settings/TransferInfo/ModalSnmp.vue | 82 | ||||
-rw-r--r-- | src/views/_sila/Settings/TransferInfo/Snmp.vue | 81 | ||||
-rw-r--r-- | src/views/_sila/Settings/TransferInfo/Transfer.vue | 24 |
3 files changed, 161 insertions, 26 deletions
diff --git a/src/views/_sila/Settings/TransferInfo/ModalSnmp.vue b/src/views/_sila/Settings/TransferInfo/ModalSnmp.vue new file mode 100644 index 00000000..54679720 --- /dev/null +++ b/src/views/_sila/Settings/TransferInfo/ModalSnmp.vue @@ -0,0 +1,82 @@ +<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" /> + </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="text" /> + </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'; + +export default { + mixins: [VuelidateMixin], + data() { + return { + form: { + Destination: null, + SubscriptionType: 'SNMPTrap', + Protocol: 'SNMPv2c', + Context: 'testContext', + }, + host: null, + port: null, + }; + }, + methods: { + handleSubmit() { + this.$emit('ok', { + ...this.form, + Destination: 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.$emit('hidden'); + }, + onOk(bvModalEvt) { + // prevent modal close + bvModalEvt.preventDefault(); + this.handleSubmit(); + }, + }, +}; +</script> diff --git a/src/views/_sila/Settings/TransferInfo/Snmp.vue b/src/views/_sila/Settings/TransferInfo/Snmp.vue index 8a7ca730..4a0e0abe 100644 --- a/src/views/_sila/Settings/TransferInfo/Snmp.vue +++ b/src/views/_sila/Settings/TransferInfo/Snmp.vue @@ -6,7 +6,7 @@ <b-button variant="primary" :disabled="isNotAdmin" - @click="initSnmpModal()" + @click="initAddModal()" > <icon-add /> {{ $t('global.action.add') }} @@ -15,23 +15,27 @@ <b-table responsive="md" hover - :fields="snmpTableFields" - :items="form.snmpTableItems" + :busy="loading" + :fields="fields" + :items="subscribers" :empty-text="$t('global.table.emptyMessage')" show-empty > - <template #cell(actions)="{ item, index }"> + <!-- table actions column --> + <template #cell(actions)="{ item }"> <table-row-action - v-for="(action, actionIndex) in item.actions" - :key="actionIndex" + v-for="(action, index) in item.actions" + :key="index" :value="action.value" - :title="action.title" :enabled="action.enabled" - @click-table-action="onSnmpTableAction(action, $event, index)" + :title="action.title" + @click-table-action="onTableAction($event, item)" > <template #icon> - <icon-edit v-if="action.value === 'edit'" /> - <icon-trashcan v-if="action.value === 'delete'" /> + <icon-trashcan + v-if="action.value === 'delete'" + :data-test-id="`snmp-tableRowAction-delete-${index}`" + /> </template> </table-row-action> </template> @@ -44,39 +48,34 @@ <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 IconEdit from '@carbon/icons-vue/es/edit/20'; import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; -import TableRowAction from '@/components/_sila/Global/TableRowAction'; export default { name: 'Snmp', components: { IconAdd, - IconEdit, IconTrashcan, PageSection, TableRowAction, }, - mixins: [BVToastMixin], + mixins: [BVToastMixin, LoadingBarMixin], data() { return { - form: { - snmpTableItems: [], - }, + loading, actions: [ { - value: 'edit', - title: this.$t('global.action.edit'), - }, - { value: 'delete', title: this.$t('global.action.delete'), }, ], - snmpTableFields: [ + fields: [ { key: 'host', label: this.$t('pageTransfer.snmp.host'), @@ -90,6 +89,19 @@ export default { }; }, 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' || @@ -99,13 +111,30 @@ export default { }, created() { - this.getSnmpItems(); + this.startLoader(); + this.$store.dispatch('snmpStore/getSubscribers').finally(() => { + this.endLoader(); + this.isBusy = false; + }); }, methods: { - getSnmpItems() {}, - initSnmpModal() {}, - onSnmpTableAction() {}, + 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/Transfer.vue b/src/views/_sila/Settings/TransferInfo/Transfer.vue index 76f7f104..5f6d5058 100644 --- a/src/views/_sila/Settings/TransferInfo/Transfer.vue +++ b/src/views/_sila/Settings/TransferInfo/Transfer.vue @@ -6,13 +6,20 @@ <smtp /> <hr /> <!-- <syslog />--> + <modal-snmp @ok="saveSnmp" /> </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 Syslog from './Syslog'; export default { @@ -20,8 +27,25 @@ export default { components: { PageTitle, Snmp, + ModalSnmp, Smtp, // 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()); + }, + }, }; </script> |