1<template>
2  <page-section :section-title="$t('pageNetwork.staticDns')">
3    <b-row>
4      <b-col lg="6">
5        <div class="text-right">
6          <b-button variant="primary" @click="initDnsModal()">
7            <icon-add />
8            {{ $t('pageNetwork.table.addDnsAddress') }}
9          </b-button>
10        </div>
11        <b-table
12          responsive="md"
13          hover
14          :fields="dnsTableFields"
15          :items="form.dnsStaticTableItems"
16          :empty-text="$t('global.table.emptyMessage')"
17          class="mb-0"
18          show-empty
19        >
20          <template #cell(actions)="{ item, index }">
21            <table-row-action
22              v-for="(action, actionIndex) in item.actions"
23              :key="actionIndex"
24              :value="action.value"
25              :title="action.title"
26              :enabled="action.enabled"
27              @click-table-action="onDnsTableAction(action, $event, index)"
28            >
29              <template #icon>
30                <icon-edit v-if="action.value === 'edit'" />
31                <icon-trashcan v-if="action.value === 'delete'" />
32              </template>
33            </table-row-action>
34          </template>
35        </b-table>
36      </b-col>
37    </b-row>
38  </page-section>
39</template>
40
41<script>
42import BVToastMixin from '@/components/Mixins/BVToastMixin';
43import IconAdd from '@carbon/icons-vue/es/add--alt/20';
44import IconEdit from '@carbon/icons-vue/es/edit/20';
45import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
46import PageSection from '@/components/Global/PageSection';
47import TableRowAction from '@/components/Global/TableRowAction';
48import { mapState } from 'vuex';
49import { useI18n } from 'vue-i18n';
50import i18n from '@/i18n';
51
52export default {
53  name: 'DNSTable',
54  components: {
55    IconAdd,
56    IconEdit,
57    IconTrashcan,
58    PageSection,
59    TableRowAction,
60  },
61  mixins: [BVToastMixin],
62  props: {
63    tabIndex: {
64      type: Number,
65      default: 0,
66    },
67  },
68  data() {
69    return {
70      $t: useI18n().t,
71      form: {
72        dnsStaticTableItems: [],
73      },
74      actions: [
75        {
76          value: 'edit',
77          title: 'global.action.edit',
78        },
79        {
80          value: 'delete',
81          title: 'global.action.delete',
82        },
83      ],
84      dnsTableFields: [
85        {
86          key: 'address',
87          label: i18n.global.t('pageNetwork.table.ipAddress'),
88        },
89        { key: 'actions', label: '', tdClass: 'text-right' },
90      ],
91    };
92  },
93  computed: {
94    ...mapState('network', ['ethernetData']),
95  },
96  watch: {
97    // Watch for change in tab index
98    tabIndex() {
99      this.getStaticDnsItems();
100    },
101    ethernetData() {
102      this.getStaticDnsItems();
103    },
104  },
105  created() {
106    this.getStaticDnsItems();
107    this.$store.dispatch('network/getEthernetData').finally(() => {
108      // Emit initial data fetch complete to parent component
109      this.$root.$emit('network-table-dns-complete');
110    });
111  },
112  methods: {
113    getStaticDnsItems() {
114      const index = this.tabIndex;
115      const dns = this.ethernetData[index].StaticNameServers || [];
116      this.form.dnsStaticTableItems = dns.map((server) => {
117        return {
118          address: server,
119          actions: [
120            {
121              value: 'delete',
122              title: 'pageNetwork.table.deleteDns',
123            },
124          ],
125        };
126      });
127    },
128    onDnsTableAction(action, $event, index) {
129      if ($event === 'delete') {
130        this.deleteDnsTableRow(index);
131      }
132    },
133    deleteDnsTableRow(index) {
134      this.form.dnsStaticTableItems.splice(index, 1);
135      const newDnsArray = this.form.dnsStaticTableItems.map((dns) => {
136        return dns.address;
137      });
138      this.$store
139        .dispatch('network/editDnsAddress', newDnsArray)
140        .then((message) => this.successToast(message))
141        .catch(({ message }) => this.errorToast(message));
142    },
143    initDnsModal() {
144      this.$bvModal.show('modal-dns');
145    },
146  },
147};
148</script>
149