finish snmp component

6 files changed, 242 insertions, 27 deletions

diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json
index 034edff3..90cb6c64 100644
--- a/src/locales/ru-RU.json
+++ b/src/locales/ru-RU.json
@@ -1162,7 +1162,12 @@
     "snmp": {
       "snmpTitle": "Настройки SNMP",
       "host": "SNMP сервер",
-      "port": "SNMP порт"
+      "port": "SNMP порт",
+      "saveSubscriberSuсcess": "Подписчик успешно добавлен",
+      "deleteSubscriberSuсcess": "Подписчик успешно удален",
+      "saveSubscriberError": "Ошибка добавления подписчика",
+      "deleteSubscriberError": "Ошибка удаления подписчика",
+      "delSubscriber": "Удалить подписчика"
     },
     "table": {
       "userName": "Имя пользователя",
diff --git a/src/store/index.js b/src/store/index.js
index ba7cdf99..a30f71e2 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -31,6 +31,7 @@ import FactoryResetStore from './modules/Operations/FactoryResetStore';
 import KeyClearStore from './modules/Operations/KeyClearStore';
 import PciStore from './modules/HardwareStatus/PciStore';
 import SmtpStore from './modules/Settings/SmtpStore';
+import SnmpStore from './modules/Settings/SnmpStore';
 
 import WebSocketPlugin from './plugins/WebSocketPlugin';
 import DateTimeStore from './modules/Settings/DateTimeStore';
@@ -75,6 +76,7 @@ export default new Vuex.Store({
     keyClear: KeyClearStore,
     pciStore: PciStore,
     smtpStore: SmtpStore,
+    snmpStore: SnmpStore,
   },
   plugins: [WebSocketPlugin],
 });
diff --git a/src/store/modules/Settings/SnmpStore.js b/src/store/modules/Settings/SnmpStore.js
new file mode 100644
index 00000000..539b85f6
--- /dev/null
+++ b/src/store/modules/Settings/SnmpStore.js
@@ -0,0 +1,73 @@
+import api from '@/store/api';
+import i18n from '@/i18n';
+
+const SnmpStore = {
+  namespaced: true,
+  state: { subscribers: [] },
+  getters: { subscribers: (state) => state.subscribers },
+  mutations: {
+    setSubscribers: (state, data) => (state.subscribers = data),
+  },
+  actions: {
+    async deleteSubscriber({ dispatch }, index) {
+      return await api
+        .delete(`/redfish/v1/EventService/Subscriptions/${index}`)
+        .then(() => {
+          dispatch('getSubscribers');
+          return i18n.t('pageTransfer.snmp.deleteSubscriberSuсcess');
+        })
+        .catch((error) => {
+          console.log(error);
+          throw new Error(i18n.t('pageTransfer.snmp.deleteSubscriberError'));
+        });
+    },
+    async addSubscriber({ dispatch }, payload) {
+      return await api
+        .post('/redfish/v1/EventService/Subscriptions', payload)
+        .then(() => {
+          dispatch('getSubscribers');
+          return i18n.t('pageTransfer.snmp.saveSubscriberSuсcess');
+        })
+        .catch((error) => {
+          console.log(error);
+          throw new Error(i18n.t('pageTransfer.snmp.saveSubscriberError'));
+        });
+    },
+    async getSubscribers({ commit }) {
+      return await api
+        .get('/redfish/v1/EventService/Subscriptions')
+        .then(({ data: { Members } }) => {
+          return api.all(
+            Members.filter((member) => member['@odata.id'].includes('snmp'))
+          );
+        })
+        .then((members) => {
+          return api.all(members.map((member) => api.get(member['@odata.id'])));
+        })
+        .then((subscribersRow) => {
+          return subscribersRow.map((subscriberRow) => {
+            return subscriberRow.data;
+          });
+        })
+        .then((data) => {
+          return data.map((subscriber) => {
+            const host = subscriber.Destination.split('/')[2].split(':')[0];
+            const port = subscriber.Destination.split('/')[2].split(':')[1];
+            return {
+              ...subscriber,
+              host,
+              port,
+            };
+          });
+        })
+        .then((subscribers) => commit('setSubscribers', subscribers))
+        .catch((error) => {
+          console.log(error);
+          const message = i18n.t('pageUserManagement.toast.errorLoadUsers');
+          throw new Error(message);
+        });
+    },
+  },
+};
+
+export default SnmpStore;
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>