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