Network Settings: Add and Delete IPV4 and DNS address
Adds ability to add or delete static ipv4 and dns
addesses per interface.
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Ie143ded2f173dd48f137471a684ba0d35ab0bf69
diff --git a/src/views/Settings/Network/TableDns.vue b/src/views/Settings/Network/TableDns.vue
index 2578ba3..569109f 100644
--- a/src/views/Settings/Network/TableDns.vue
+++ b/src/views/Settings/Network/TableDns.vue
@@ -2,6 +2,12 @@
<page-section :section-title="$t('pageNetwork.staticDns')">
<b-row>
<b-col lg="6">
+ <div class="text-right">
+ <b-button variant="primary" @click="initDnsModal()">
+ <icon-add />
+ {{ $t('pageNetwork.table.addDnsAddress') }}
+ </b-button>
+ </div>
<b-table
responsive="md"
hover
@@ -11,7 +17,7 @@
class="mb-0"
show-empty
>
- <template #cell(actions)="{ item }">
+ <template #cell(actions)="{ item, index }">
<table-row-action
v-for="(action, actionIndex) in item.actions"
:key="actionIndex"
@@ -34,6 +40,7 @@
<script>
import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import IconAdd from '@carbon/icons-vue/es/add--alt/20';
import IconEdit from '@carbon/icons-vue/es/edit/20';
import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
import PageSection from '@/components/Global/PageSection';
@@ -43,6 +50,7 @@
export default {
name: 'DNSTable',
components: {
+ IconAdd,
IconEdit,
IconTrashcan,
PageSection,
@@ -87,6 +95,9 @@
tabIndex() {
this.getStaticDnsItems();
},
+ ethernetData() {
+ this.getStaticDnsItems();
+ },
},
created() {
this.getStaticDnsItems();
@@ -104,10 +115,6 @@
address: server,
actions: [
{
- value: 'edit',
- title: this.$t('pageNetwork.table.editDns'),
- },
- {
value: 'delete',
title: this.$t('pageNetwork.table.deleteDns'),
},
@@ -115,12 +122,24 @@
};
});
},
- onDnsTableAction(action, row) {
- if (action === 'delete') {
- this.form.dnsStaticTableItems.splice(row, 1);
- // TODO: delete row in store
+ onDnsTableAction(action, $event, index) {
+ if ($event === 'delete') {
+ this.deleteDnsTableRow(index);
}
},
+ deleteDnsTableRow(index) {
+ this.form.dnsStaticTableItems.splice(index, 1);
+ const newDnsArray = this.form.dnsStaticTableItems.map((dns) => {
+ return dns.address;
+ });
+ this.$store
+ .dispatch('network/editDnsAddress', newDnsArray)
+ .then((message) => this.successToast(message))
+ .catch(({ message }) => this.errorToast(message));
+ },
+ initDnsModal() {
+ this.$bvModal.show('modal-dns');
+ },
},
};
</script>