1<template> 2 <b-container fluid="xl"> 3 <page-title :description="$t('pageSnmpAlerts.pageDescription')" /> 4 <b-row> 5 <b-col xl="9" class="text-right"> 6 <b-button variant="primary" @click="initModalAddDestination"> 7 <icon-add /> 8 {{ $t('pageSnmpAlerts.addDestination') }} 9 </b-button> 10 </b-col> 11 </b-row> 12 <b-row> 13 <b-col xl="9"> 14 <table-toolbar 15 ref="toolbar" 16 :selected-items-count="selectedRows.length" 17 :actions="tableToolbarActions" 18 @clear-selected="clearSelectedRows($refs.table)" 19 @batch-action="onBatchAction" 20 /> 21 <b-table 22 ref="table" 23 responsive="md" 24 selectable 25 show-empty 26 no-select-on-click 27 hover 28 :fields="fields" 29 :items="tableItems" 30 :empty-text="$t('global.table.emptyMessage')" 31 @row-selected="onRowSelected($event, tableItems.length)" 32 > 33 <!-- Checkbox column --> 34 <template #head(checkbox)> 35 <b-form-checkbox 36 v-model="tableHeaderCheckboxModel" 37 data-test-id="snmpAlerts-checkbox-selectAll" 38 :indeterminate="tableHeaderCheckboxIndeterminate" 39 @change="onChangeHeaderCheckbox($refs.table)" 40 > 41 <span class="sr-only">{{ $t('global.table.selectAll') }}</span> 42 </b-form-checkbox> 43 </template> 44 <template #cell(checkbox)="row"> 45 <b-form-checkbox 46 v-model="row.rowSelected" 47 :data-test-id="`snmpAlerts-checkbox-selectRow-${row.index}`" 48 @change="toggleSelectRow($refs.table, row.index)" 49 > 50 <span class="sr-only">{{ $t('global.table.selectItem') }}</span> 51 </b-form-checkbox> 52 </template> 53 54 <!-- table actions column --> 55 <template #cell(actions)="{ item }"> 56 <table-row-action 57 v-for="(action, index) in item.actions" 58 :key="index" 59 :value="action.value" 60 :enabled="action.enabled" 61 :title="action.title" 62 :data-test-id="`snmpAlerts-button-deleteRow-${item.index}`" 63 @click-table-action="onTableRowAction($event, item)" 64 > 65 <template #icon> 66 <icon-trashcan v-if="action.value === 'delete'" /> 67 </template> 68 </table-row-action> 69 </template> 70 </b-table> 71 </b-col> 72 </b-row> 73 <!-- Modals --> 74 <modal-add-destination @ok="onModalOk" /> 75 </b-container> 76</template> 77 78<script> 79import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; 80import ModalAddDestination from './ModalAddDestination'; 81import PageTitle from '@/components/Global/PageTitle'; 82import IconAdd from '@carbon/icons-vue/es/add--alt/20'; 83import TableToolbar from '@/components/Global/TableToolbar'; 84import TableRowAction from '@/components/Global/TableRowAction'; 85import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; 86import BVToastMixin from '@/components/Mixins/BVToastMixin'; 87 88import BVTableSelectableMixin, { 89 selectedRows, 90 tableHeaderCheckboxModel, 91 tableHeaderCheckboxIndeterminate, 92} from '@/components/Mixins/BVTableSelectableMixin'; 93export default { 94 name: 'SnmpAlerts', 95 components: { 96 PageTitle, 97 IconAdd, 98 TableToolbar, 99 IconTrashcan, 100 ModalAddDestination, 101 TableRowAction, 102 }, 103 mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin], 104 beforeRouteLeave(to, from, next) { 105 this.hideLoader(); 106 next(); 107 }, 108 data() { 109 return { 110 fields: [ 111 { 112 key: 'checkbox', 113 }, 114 { 115 key: 'IP', 116 label: this.$t('pageSnmpAlerts.table.ipaddress'), 117 }, 118 { 119 key: 'Port', 120 label: this.$t('pageSnmpAlerts.table.port'), 121 }, 122 { 123 key: 'actions', 124 label: '', 125 tdClass: 'text-right text-nowrap', 126 }, 127 ], 128 tableToolbarActions: [ 129 { 130 value: 'delete', 131 label: this.$t('global.action.delete'), 132 }, 133 ], 134 selectedRows: selectedRows, 135 tableHeaderCheckboxModel: tableHeaderCheckboxModel, 136 tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate, 137 }; 138 }, 139 computed: { 140 allSnmpDetails() { 141 return this.$store.getters['snmpAlerts/allSnmpDetails']; 142 }, 143 tableItems() { 144 // transform destination data to table data 145 return this.allSnmpDetails.map((subscriptions) => { 146 const [destination, dataWithProtocol, dataWithoutProtocol] = [ 147 subscriptions.Destination, 148 subscriptions.Destination.split('/')[2].split(':'), 149 subscriptions.Destination.split(':'), 150 ]; 151 //condition to check if destination comes with protocol or not 152 const conditionForProtocolCheck = destination.includes('://'); 153 const ip = conditionForProtocolCheck 154 ? dataWithProtocol[0] 155 : dataWithoutProtocol[0]; 156 const port = conditionForProtocolCheck 157 ? dataWithProtocol[1] 158 : dataWithoutProtocol[1]; 159 return { 160 IP: ip, 161 Port: port, 162 id: subscriptions.Id, 163 actions: [ 164 { 165 value: 'delete', 166 enabled: true, 167 title: this.$tc('pageSnmpAlerts.deleteDestination'), 168 }, 169 ], 170 ...subscriptions, 171 }; 172 }); 173 }, 174 }, 175 created() { 176 this.startLoader(); 177 this.$store 178 .dispatch('snmpAlerts/getSnmpDetails') 179 .finally(() => this.endLoader()); 180 }, 181 methods: { 182 onModalOk({ ipAddress, port }) { 183 const protocolIpAddress = 'snmp://' + ipAddress; 184 const destination = port 185 ? protocolIpAddress + ':' + port 186 : protocolIpAddress; 187 const data = { 188 Destination: destination, 189 SubscriptionType: 'SNMPTrap', 190 Protocol: 'SNMPv2c', 191 }; 192 this.startLoader(); 193 this.$store 194 .dispatch('snmpAlerts/addDestination', { data }) 195 .then((success) => this.successToast(success)) 196 .catch(({ message }) => this.errorToast(message)) 197 .finally(() => this.endLoader()); 198 }, 199 initModalAddDestination() { 200 this.$bvModal.show('add-destination'); 201 }, 202 initModalDeleteDestination(destination) { 203 this.$bvModal 204 .msgBoxConfirm( 205 this.$t('pageSnmpAlerts.modal.deleteConfirmMessage', { 206 destination: destination.id, 207 }), 208 { 209 title: this.$tc('pageSnmpAlerts.modal.deleteSnmpDestinationTitle'), 210 okTitle: this.$tc('pageSnmpAlerts.deleteDestination'), 211 cancelTitle: this.$t('global.action.cancel'), 212 autoFocusButton: 'ok', 213 }, 214 ) 215 .then((deleteConfirmed) => { 216 if (deleteConfirmed) { 217 this.deleteDestination(destination); 218 } 219 }); 220 }, 221 deleteDestination({ id }) { 222 this.startLoader(); 223 this.$store 224 .dispatch('snmpAlerts/deleteDestination', id) 225 .then((success) => this.successToast(success)) 226 .catch(({ message }) => this.errorToast(message)) 227 .finally(() => this.endLoader()); 228 }, 229 onBatchAction(action) { 230 if (action === 'delete') { 231 this.$bvModal 232 .msgBoxConfirm( 233 this.$tc( 234 'pageSnmpAlerts.modal.batchDeleteConfirmMessage', 235 this.selectedRows.length, 236 ), 237 { 238 title: this.$tc( 239 'pageSnmpAlerts.modal.deleteSnmpDestinationTitle', 240 this.selectedRows.length, 241 ), 242 okTitle: this.$tc( 243 'pageSnmpAlerts.deleteDestination', 244 this.selectedRows.length, 245 ), 246 cancelTitle: this.$t('global.action.cancel'), 247 autoFocusButton: 'ok', 248 }, 249 ) 250 .then((deleteConfirmed) => { 251 if (deleteConfirmed) { 252 this.startLoader(); 253 this.$store 254 .dispatch( 255 'snmpAlerts/deleteMultipleDestinations', 256 this.selectedRows, 257 ) 258 .then((messages) => { 259 messages.forEach(({ type, message }) => { 260 if (type === 'success') this.successToast(message); 261 if (type === 'error') this.errorToast(message); 262 }); 263 }) 264 .finally(() => this.endLoader()); 265 } 266 }); 267 } 268 }, 269 onTableRowAction(action, row) { 270 if (action === 'delete') { 271 this.initModalDeleteDestination(row); 272 } 273 }, 274 }, 275}; 276</script> 277