Implemented SNMP alerts in Vue3 (#413)

* Implemented SNMP alerts in Vue3

- Implemented SNMP alerts page in Vue3.
- JIRA: https://jsw.ibm.com/browse/PFEBMC-2405

Signed-off-by: Nikhil Ashoka <[email protected]>

* Resolved code conflicts with 1060-vue3

- Resolved code conflicts at routes.js

* Implemented ModalAddDestination

- Implemented ModalAddDestination section in SNMP alerts page.

* Implemented Delete SNMP address

- Implemented Delete functionality in SNMP alerts page.

* Enabled Modal Add and styling fixes

- Enabled Modal to add the IP address and the Port.
- Replaced Bootstrap v4 breaking changes with Bootstrap v5 change.

---------

Signed-off-by: Nikhil Ashoka <[email protected]>

Author: Nikhil-Ashoka

src/components/Composables/useTableSelectableComposable.js

@@ -103,6 +103,26 @@ const useTableSelectableComposable = () => {
     }
   };
 
+  const toggleSelectRowByIpAddress = (tableRef, rowIndex, rowSelected, row) => {
+    if (tableRef && rowIndex !== undefined) {
+      if (!rowSelected) {
+        // Find the index of the object to remove
+        const indexToRemove = selectedRowsList.value.findIndex(
+          (item) => item.ip === row.ip,
+        );
+
+        // Check if the object exists in the array
+        if (indexToRemove !== -1) {
+          tableRef.unselectRow(rowIndex);
+          // Remove the object from the array
+          selectedRowsList.value.splice(indexToRemove, 1);
+        }
+      } else {
+        tableRef.selectRow(rowIndex);
+      }
+    }
+  };
+
   const onRowSelected = (selectedRows, totalRowsCount) => {
     if (selectedRows && totalRowsCount !== undefined) {
       if (selectedRowsList.value.indexOf(selectedRows) === -1) {
@@ -138,6 +158,7 @@ const useTableSelectableComposable = () => {
     toggleSelectRowById,
     toggleSelectRowByGroupName,
     toggleSelectRowByUsername,
+    toggleSelectRowByIpAddress,
     onRowSelected,
     onChangeHeaderCheckbox,
     selectedRowsList,

src/router/routes.js

@@ -45,6 +45,7 @@ import Network from '@/views/Settings/Network';
 import Dumps from '@/views/Logs/Dumps';
 import DateTime from '@/views/Settings/DateTime/DateTime.vue';
 import ChangePassword from '@/views/ChangePassword';
+import SnmpAlerts from '@/views/Settings/SnmpAlerts';
 
 const roles = {
   administrator: 'Administrator',
@@ -294,6 +295,14 @@ export const routes = [
           title: i18n.global.t('appPageTitle.powerRestorePolicy'),
         },
       },
+      {
+        path: '/settings/snmp-alerts',
+        name: 'snmp-alerts',
+        component: SnmpAlerts,
+        meta: {
+          title: i18n.global.t('appPageTitle.snmpAlerts'),
+        },
+      },
       {
         path: '/settings/date-time',
         name: 'date-time',

src/store/index.js

@@ -37,6 +37,7 @@ import DumpsStore from './modules/Logs/DumpsStore.js';
 import FieldCoreOverrideStore from './modules/ResourceManagement/FieldCoreOverrideStore.js';
 import PostCodeLogsStore from './modules/Logs/PostCodeLogsStore.js';
 import DateTimeStore from './modules/Settings/DateTimeStore';
+import SnmpAlertsStore from './modules/Settings/SnmpAlertsStore.js';
 // ... (export use other stores)
 export {
   EventLogStore,
@@ -77,4 +78,5 @@ export {
   DumpsStore,
   FieldCoreOverrideStore,
   DateTimeStore,
+  SnmpAlertsStore,
 };

src/store/modules/Settings/SnmpAlertsStore.js

@@ -1,19 +1,13 @@
 import api, { getResponseCount } from '@/store/api';
 import i18n from '@/i18n';
-const SnmpAlertsStore = {
-  namespaced: true,
-  state: {
+import { defineStore } from 'pinia';
+
+export const SnmpAlertsStore = defineStore('snmpAlerts', {
+  state: () => ({
     allSnmpDetails: [],
-  },
+  }),
   getters: {
-    allSnmpDetails(state) {
-      return state.allSnmpDetails;
-    },
-  },
-  mutations: {
-    setSnmpDetails(state, allSnmpDetails) {
-      state.allSnmpDetails = allSnmpDetails;
-    },
+    allSnmpDetailsGetter: (state) => state.allSnmpDetails,
   },
   actions: {
     async getSnmpAlertUrl() {
@@ -24,8 +18,8 @@ const SnmpAlertsStore = {
         .then((response) => response.data['@odata.id'])
         .catch((error) => console.log('Error', error));
     },
-    async getSnmpDetails({ commit, dispatch }) {
-      const snmpAlertUrl = await dispatch('getSnmpAlertUrl');
+    async getSnmpDetails() {
+      const snmpAlertUrl = await this.getSnmpAlertUrl();
       return await api
         .get(snmpAlertUrl)
         .then((response) =>
@@ -37,27 +31,31 @@ const SnmpAlertsStore = {
           const snmpDetailsDataFiltered = snmpDetailsData.filter(
             (item) => item.SubscriptionType === 'SNMPTrap',
           );
-          commit('setSnmpDetails', snmpDetailsDataFiltered);
+          const finalSNmpData = snmpDetailsDataFiltered.map((singleData) => {
+            singleData.isSelected = false;
+            return singleData;
+          })
+          this.allSnmpDetails = finalSNmpData;
         })
         .catch((error) => {
           console.log(error);
-          const message = i18n.t('pageSnmpAlerts.toast.errorLoadSnmpDetails');
+          const message = i18n.global.t('pageSnmpAlerts.toast.errorLoadSnmpDetails');
           throw new Error(message);
         });
     },
-    async deleteDestination({ dispatch }, id) {
-      const snmpAlertUrl = await dispatch('getSnmpAlertUrl');
+    async deleteDestination(id) {
+      const snmpAlertUrl = await this.getSnmpAlertUrl();
       return await api
         .delete(`${snmpAlertUrl}/${id}`)
-        .then(() => dispatch('getSnmpDetails'))
+        .then(() => this.getSnmpDetails())
         .then(() =>
-          i18n.t('pageSnmpAlerts.toast.successDeleteDestination', {
+          i18n.global.t('pageSnmpAlerts.toast.successDeleteDestination', {
             id,
           }),
         )
         .catch((error) => {
           console.log(error);
-          const message = i18n.t(
+          const message = i18n.global.t(
             'pageSnmpAlerts.toast.errorDeleteDestination',
             {
               id,
@@ -66,8 +64,8 @@ const SnmpAlertsStore = {
           throw new Error(message);
         });
     },
-    async deleteMultipleDestinations({ dispatch }, destination) {
-      const snmpAlertUrl = await dispatch('getSnmpAlertUrl');
+    async deleteMultipleDestinations(destination) {
+      const snmpAlertUrl = await this.getSnmpAlertUrl();
       const promises = destination.map(({ id }) => {
         return api.delete(`${snmpAlertUrl}/${id}`).catch((error) => {
           console.log(error);
@@ -77,22 +75,22 @@ const SnmpAlertsStore = {
       return await api
         .all(promises)
         .then((response) => {
-          dispatch('getSnmpDetails');
+          this.getSnmpDetails();
           return response;
         })
         .then(
           api.spread((...responses) => {
             const { successCount, errorCount } = getResponseCount(responses);
             let toastMessages = [];
             if (successCount) {
-              const message = i18n.tc(
+              const message = i18n.global.t(
                 'pageSnmpAlerts.toast.successBatchDelete',
                 successCount,
               );
               toastMessages.push({ type: 'success', message });
             }
             if (errorCount) {
-              const message = i18n.tc(
+              const message = i18n.global.t(
                 'pageSnmpAlerts.toast.errorBatchDelete',
                 errorCount,
               );
@@ -102,18 +100,18 @@ const SnmpAlertsStore = {
           }),
         );
     },
-    async addDestination({ dispatch }, { data }) {
-      const snmpAlertUrl = await dispatch('getSnmpAlertUrl');
+    async addDestination({ data }) {
+      const snmpAlertUrl = await this.getSnmpAlertUrl();
       return await api
         .post(snmpAlertUrl, data)
-        .then(() => dispatch('getSnmpDetails'))
-        .then(() => i18n.t('pageSnmpAlerts.toast.successAddDestination'))
+        .then(() => this.getSnmpDetails())
+        .then(() => i18n.global.t('pageSnmpAlerts.toast.successAddDestination'))
         .catch((error) => {
           console.log(error);
-          const message = i18n.t('pageSnmpAlerts.toast.errorAddDestination');
+          const message = i18n.global.t('pageSnmpAlerts.toast.errorAddDestination');
           throw new Error(message);
         });
     },
   },
-};
+});
 export default SnmpAlertsStore;