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