diff options
Diffstat (limited to 'src/views/Settings/SnmpAlerts/SnmpAlerts.vue')
| -rw-r--r-- | src/views/Settings/SnmpAlerts/SnmpAlerts.vue | 274 |
1 files changed, 274 insertions, 0 deletions
diff --git a/src/views/Settings/SnmpAlerts/SnmpAlerts.vue b/src/views/Settings/SnmpAlerts/SnmpAlerts.vue new file mode 100644 index 00000000..8a9b8e73 --- /dev/null +++ b/src/views/Settings/SnmpAlerts/SnmpAlerts.vue @@ -0,0 +1,274 @@ +<template> + <b-container fluid="xl"> + <page-title :description="$t('pageSnmpAlerts.pageDescription')" /> + <b-row> + <b-col xl="9" class="text-right"> + <b-button variant="primary" @click="initModalAddDestination"> + <icon-add /> + {{ $t('pageSnmpAlerts.addDestination') }} + </b-button> + </b-col> + </b-row> + <b-row> + <b-col xl="9"> + <table-toolbar + ref="toolbar" + :selected-items-count="selectedRows.length" + :actions="tableToolbarActions" + @clear-selected="clearSelectedRows($refs.table)" + @batch-action="onBatchAction" + /> + <b-table + ref="table" + responsive="md" + selectable + show-empty + no-select-on-click + hover + :fields="fields" + :items="tableItems" + :empty-text="$t('global.table.emptyMessage')" + @row-selected="onRowSelected($event, tableItems.length)" + > + <!-- Checkbox column --> + <template #head(checkbox)> + <b-form-checkbox + v-model="tableHeaderCheckboxModel" + data-test-id="snmpAlerts-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="`snmpAlerts-checkbox-selectRow-${row.index}`" + @change="toggleSelectRow($refs.table, row.index)" + > + <span class="sr-only">{{ $t('global.table.selectItem') }}</span> + </b-form-checkbox> + </template> + + <!-- 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" + :data-test-id="`snmpAlerts-button-deleteRow-${item.index}`" + @click-table-action="onTableRowAction($event, item)" + > + <template #icon> + <icon-trashcan v-if="action.value === 'delete'" /> + </template> + </table-row-action> + </template> + </b-table> + </b-col> + </b-row> + <!-- Modals --> + <modal-add-destination @ok="onModalOk" /> + </b-container> +</template> + +<script> +import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; +import ModalAddDestination from './ModalAddDestination'; +import PageTitle from '@/components/Global/PageTitle'; +import IconAdd from '@carbon/icons-vue/es/add--alt/20'; +import TableToolbar from '@/components/Global/TableToolbar'; +import TableRowAction from '@/components/Global/TableRowAction'; +import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; + +import BVTableSelectableMixin, { + selectedRows, + tableHeaderCheckboxModel, + tableHeaderCheckboxIndeterminate, +} from '@/components/Mixins/BVTableSelectableMixin'; +export default { + name: 'SnmpAlerts', + components: { + PageTitle, + IconAdd, + TableToolbar, + IconTrashcan, + ModalAddDestination, + TableRowAction, + }, + mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin], + beforeRouteLeave(to, from, next) { + this.hideLoader(); + next(); + }, + data() { + return { + fields: [ + { + key: 'checkbox', + }, + { + key: 'IP', + label: this.$t('pageSnmpAlerts.table.ipaddress'), + }, + { + key: 'Port', + label: this.$t('pageSnmpAlerts.table.port'), + }, + { + key: 'actions', + label: '', + tdClass: 'text-right text-nowrap', + }, + ], + tableToolbarActions: [ + { + value: 'delete', + label: this.$t('global.action.delete'), + }, + ], + selectedRows: selectedRows, + tableHeaderCheckboxModel: tableHeaderCheckboxModel, + tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate, + }; + }, + computed: { + allSnmpDetails() { + return this.$store.getters['snmpAlerts/allSnmpDetails']; + }, + tableItems() { + // transform destination data to table data + return this.allSnmpDetails.map((subscriptions) => { + const [destination, dataWithProtocol, dataWithoutProtocol] = [ + subscriptions.Destination, + subscriptions.Destination.split('/')[2].split(':'), + subscriptions.Destination.split(':'), + ]; + //condition to check if destination comes with protocol or not + const conditionForProtocolCheck = destination.includes('://'); + const ip = conditionForProtocolCheck + ? dataWithProtocol[0] + : dataWithoutProtocol[0]; + const port = conditionForProtocolCheck + ? dataWithProtocol[1] + : dataWithoutProtocol[1]; + return { + IP: ip, + Port: port, + id: subscriptions.Id, + actions: [ + { + value: 'delete', + enabled: true, + title: this.$tc('pageSnmpAlerts.deleteDestination'), + }, + ], + ...subscriptions, + }; + }); + }, + }, + created() { + this.startLoader(); + this.$store + .dispatch('snmpAlerts/getSnmpDetails') + .finally(() => this.endLoader()); + }, + methods: { + onModalOk({ ipAddress, port }) { + const protocolIpAddress = 'snmp://' + ipAddress; + const destination = port + ? protocolIpAddress + ':' + port + : protocolIpAddress; + const data = { + Destination: destination, + SubscriptionType: 'SNMPTrap', + Protocol: 'SNMPv2c', + }; + this.startLoader(); + this.$store + .dispatch('snmpAlerts/addDestination', { data }) + .then((success) => this.successToast(success)) + .catch(({ message }) => this.errorToast(message)) + .finally(() => this.endLoader()); + }, + initModalAddDestination() { + this.$bvModal.show('add-destination'); + }, + initModalDeleteDestination(destination) { + this.$bvModal + .msgBoxConfirm( + this.$t('pageSnmpAlerts.modal.deleteConfirmMessage', { + destination: destination.id, + }), + { + title: this.$tc('pageSnmpAlerts.modal.deleteSnmpDestinationTitle'), + okTitle: this.$tc('pageSnmpAlerts.deleteDestination'), + cancelTitle: this.$t('global.action.cancel'), + } + ) + .then((deleteConfirmed) => { + if (deleteConfirmed) { + this.deleteDestination(destination); + } + }); + }, + deleteDestination({ id }) { + this.startLoader(); + this.$store + .dispatch('snmpAlerts/deleteDestination', id) + .then((success) => this.successToast(success)) + .catch(({ message }) => this.errorToast(message)) + .finally(() => this.endLoader()); + }, + onBatchAction(action) { + if (action === 'delete') { + this.$bvModal + .msgBoxConfirm( + this.$tc( + 'pageSnmpAlerts.modal.batchDeleteConfirmMessage', + this.selectedRows.length + ), + { + title: this.$tc( + 'pageSnmpAlerts.modal.deleteSnmpDestinationTitle', + this.selectedRows.length + ), + okTitle: this.$tc( + 'pageSnmpAlerts.deleteDestination', + this.selectedRows.length + ), + cancelTitle: this.$t('global.action.cancel'), + } + ) + .then((deleteConfirmed) => { + if (deleteConfirmed) { + this.startLoader(); + this.$store + .dispatch( + 'snmpAlerts/deleteMultipleDestinations', + this.selectedRows + ) + .then((messages) => { + messages.forEach(({ type, message }) => { + if (type === 'success') this.successToast(message); + if (type === 'error') this.errorToast(message); + }); + }) + .finally(() => this.endLoader()); + } + }); + } + }, + onTableRowAction(action, row) { + if (action === 'delete') { + this.initModalDeleteDestination(row); + } + }, + }, +}; +</script> |