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';
49
50export default {
51  name: 'DNSTable',
52  components: {
53    IconAdd,
54    IconEdit,
55    IconTrashcan,
56    PageSection,
57    TableRowAction,
58  },
59  mixins: [BVToastMixin],
60  props: {
61    tabIndex: {
62      type: Number,
63      default: 0,
64    },
65  },
66  data() {
67    return {
68      form: {
69        dnsStaticTableItems: [],
70      },
71      actions: [
72        {
73          value: 'edit',
74          title: this.$t('global.action.edit'),
75        },
76        {
77          value: 'delete',
78          title: this.$t('global.action.delete'),
79        },
80      ],
81      dnsTableFields: [
82        {
83          key: 'address',
84          label: this.$t('pageNetwork.table.ipAddress'),
85        },
86        { key: 'actions', label: '', tdClass: 'text-right' },
87      ],
88    };
89  },
90  computed: {
91    ...mapState('network', ['ethernetData']),
92  },
93  watch: {
94    // Watch for change in tab index
95    tabIndex() {
96      this.getStaticDnsItems();
97    },
98    ethernetData() {
99      this.getStaticDnsItems();
100    },
101  },
102  created() {
103    this.getStaticDnsItems();
104    this.$store.dispatch('network/getEthernetData').finally(() => {
105      // Emit initial data fetch complete to parent component
106      this.$root.$emit('network-table-dns-complete');
107    });
108  },
109  methods: {
110    getStaticDnsItems() {
111      const index = this.tabIndex;
112      const dns = this.ethernetData[index].StaticNameServers || [];
113      this.form.dnsStaticTableItems = dns.map((server) => {
114        return {
115          address: server,
116          actions: [
117            {
118              value: 'delete',
119              title: this.$t('pageNetwork.table.deleteDns'),
120            },
121          ],
122        };
123      });
124    },
125    onDnsTableAction(action, $event, index) {
126      if ($event === 'delete') {
127        this.deleteDnsTableRow(index);
128      }
129    },
130    deleteDnsTableRow(index) {
131      this.form.dnsStaticTableItems.splice(index, 1);
132      const newDnsArray = this.form.dnsStaticTableItems.map((dns) => {
133        return dns.address;
134      });
135      this.$store
136        .dispatch('network/editDnsAddress', newDnsArray)
137        .then((message) => this.successToast(message))
138        .catch(({ message }) => this.errorToast(message));
139    },
140    initDnsModal() {
141      this.$bvModal.show('modal-dns');
142    },
143  },
144};
145</script>
146