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