1 files changed, 139 insertions, 0 deletions
diff --git a/src/views/_sila/Settings/TransferInfo/Snmp.vue b/src/views/_sila/Settings/TransferInfo/Snmp.vue
new file mode 100644
index 00000000..ef9e18ac
--- /dev/null
+++ b/src/views/_sila/Settings/TransferInfo/Snmp.vue
@@ -0,0 +1,139 @@
+<template>
+  <page-section :section-title="$t('pageTransfer.snmp.snmpTitle')">
+    <b-row>
+      <b-col>
+        <div class="text-right">
+          <b-button
+            variant="primary"
+            :disabled="loading || isNotAdmin"
+            @click="initAddModal()"
+          >
+            <icon-add />
+            {{ $t('global.action.add') }}
+          </b-button>
+        </div>
+        <b-table
+          responsive="md"
+          hover
+          :busy="loading"
+          :fields="fields"
+          :items="subscribers"
+          :empty-text="$t('global.table.emptyMessage')"
+          show-empty
+        >
+          <!-- 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"
+              @click-table-action="onTableAction($event, item)"
+            >
+              <template #icon>
+                <icon-trashcan
+                  v-if="action.value === 'delete'"
+                  :data-test-id="`snmp-tableRowAction-delete-${index}`"
+                />
+              </template>
+            </table-row-action>
+          </template>
+        </b-table>
+      </b-col>
+    </b-row>
+  </page-section>
+</template>
+
+<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 IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
+
+export default {
+  name: 'Snmp',
+  components: {
+    IconAdd,
+    IconTrashcan,
+    PageSection,
+    TableRowAction,
+  },
+  mixins: [BVToastMixin, LoadingBarMixin],
+
+  data() {
+    return {
+      loading,
+      actions: [
+        {
+          value: 'delete',
+          title: this.$t('global.action.delete'),
+        },
+      ],
+      fields: [
+        {
+          key: 'host',
+          label: this.$t('pageTransfer.snmp.host'),
+        },
+        {
+          key: 'port',
+          label: this.$t('pageTransfer.snmp.port'),
+        },
+        { key: 'actions', label: '', tdClass: 'text-right' },
+      ],
+    };
+  },
+  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' ||
+        this.$store.getters['authentication/role'] === 'Operator'
+      );
+    },
+  },
+
+  created() {
+    this.startLoader();
+    this.$store.dispatch('snmpStore/getSubscribers').finally(() => {
+      this.endLoader();
+    });
+  },
+
+  methods: {
+    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>