Remove IPV4 addresses
Tested: Able to remove existing IPV4
addresses.
Change-Id: I772bee6ad6b68bc0a69351f3e5386acc659241ef
Signed-off-by: beccabroek <beccabroek@gmail.com>
diff --git a/app/configuration/controllers/network-controller.html b/app/configuration/controllers/network-controller.html
index 3b2567c..287698f 100644
--- a/app/configuration/controllers/network-controller.html
+++ b/app/configuration/controllers/network-controller.html
@@ -51,21 +51,24 @@
<span class="control__indicator control__indicator-on"></span>
</label>
</div>
- <fieldset class="net-config__static-ip-wrap" ng-repeat="ipv4 in interface.ipv4.values">
- <div class="column small-12 large-4">
- <label for="net-config__ipv4-address" class="inline">IPV4 address</label>
- <input id="net-config__ipv4-address" type="text" ng-disabled="interface.DHCPEnabled" ng-model="ipv4.Address"/>
- </div>
- <div class="column small-12 large-4">
- <label for="net-config__subnet" class="inline">Gateway</label>
- <input id="net-config__subnet" type="text" ng-disabled="interface.DHCPEnabled" value="" ng-model="ipv4.Gateway"/>
- </div>
- <!-- This netmask prefix length max only works with IPV4 -->
- <div class="column small-12 large-4">
- <label for="net-config__default-gateway" class="inline">Netmask Prefix Length</label>
- <input id="net-config__default-gateway" type="number" min="1" max="32" step="1" ng-disabled="interface.DHCPEnabled" ng-model="ipv4.PrefixLength"/>
- </div>
- </fieldset>
+ <div class="row column network-config__ipv4-wrap">
+ <fieldset class="net-config__static-ip-wrap" ng-repeat="ipv4 in interface.ipv4.values track by $index">
+ <div class="column small-12 large-3">
+ <label for="net-config__ipv4-address">IPV4 address</label>
+ <input id="net-config__ipv4-address" type="text" ng-disabled="interface.DHCPEnabled" ng-model="ipv4.Address"/>
+ </div>
+ <div class="column small-12 large-3">
+ <label for="net-config__subnet">Gateway</label>
+ <input id="net-config__subnet" type="text" ng-disabled="interface.DHCPEnabled" value="" ng-model="ipv4.Gateway"/>
+ </div>
+ <!-- This netmask prefix length max only works with IPV4 -->
+ <div class="column small-12 large-6">
+ <label for="net-config__default-gateway">Netmask Prefix Length</label>
+ <input id="net-config__default-gateway" class="column small-6" type="number" min="1" max="32" step="1" ng-disabled="interface.DHCPEnabled" ng-model="ipv4.PrefixLength"/>
+ <button class="network-config_remove-button inline" ng-click="removeIpv4Address($index)">Remove</button>
+ </div>
+ </fieldset>
+ </div>
</fieldset>
</section>
<section class="row column">
@@ -77,11 +80,11 @@
<fieldset class="net-config__static-ip-wrap" ng-repeat="dns in interface.Nameservers track by $index">
<div class="column small-12">
<label for="net-config__prime-dns{{$index+1}}">DNS Server {{$index+1}}</label>
- <input id="net-config__prime-dns{{$index+1}}" class="network-input column small-6 large-4 inline" type="text" ng-model="dns" ng-blur="interface.Nameservers[$index] = dns" set-focus-on-new-input//>
- <button class="dns__server-remove inline" ng-click="removeDNSField($index)">Remove</button>
+ <input id="net-config__prime-dns{{$index+1}}" class="network-input column small-6 large-4 inline" type="text" ng-model="dns" ng-blur="interface.Nameservers[$index] = dns" set-focus-on-new-input/>
+ <button class="network-config_remove-button inline" ng-click="removeDNSField($index)">Remove</button>
</div>
</fieldset>
- <div class="column small-12">
+ <div class="row column">
<button type="button" class="btn-primary inline dns_add" ng-click="addDNSField()">Add new DNS server</button>
</div>
</fieldset>
diff --git a/app/configuration/controllers/network-controller.js b/app/configuration/controllers/network-controller.js
index 4d11ae5..a9546d4 100644
--- a/app/configuration/controllers/network-controller.js
+++ b/app/configuration/controllers/network-controller.js
@@ -24,6 +24,7 @@
$scope.selectedInterface = '';
$scope.confirm_settings = false;
$scope.loading = false;
+ $scope.IPV4s_to_delete = [];
loadNetworkInfo();
@@ -43,6 +44,15 @@
$scope.interface.Nameservers.splice(index, 1);
};
+ $scope.removeIpv4Address = function(index) {
+ // Check if the IPV4 being removed has an id. This indicates that it is
+ // an existing address and needs to be removed in the back end.
+ if ($scope.interface.ipv4.values[index].id) {
+ $scope.IPV4s_to_delete.push($scope.interface.ipv4.values[index]);
+ }
+ $scope.interface.ipv4.values.splice(index, 1);
+ };
+
$scope.setNetworkSettings = function() {
// Hides the confirm network settings modal
$scope.confirm_settings = false;
@@ -79,6 +89,9 @@
// Set IPV4 IP Addresses, Netmask Prefix Lengths, and Gateways
if (!$scope.interface.DHCPEnabled) {
+ // Delete existing IPV4 addresses that were removed
+ promises.push(removeIPV4s());
+ // Update any changed IPV4 addresses
for (var i in $scope.interface.ipv4.values) {
if (!APIUtils.validIPV4IP(
$scope.interface.ipv4.values[i].Address)) {
@@ -202,6 +215,18 @@
});
}
+ function removeIPV4s() {
+ return $scope.IPV4s_to_delete.map(function(ipv4) {
+ return APIUtils.deleteIPV4($scope.selectedInterface, ipv4.id)
+ .then(
+ function(data) {},
+ function(error) {
+ console.log(JSON.stringify(error));
+ $scope.set_network_error = ipv4.Address;
+ })
+ });
+ }
+
function setIPV4(index) {
// The correct way to edit an IPV4 interface is to remove it and then
// add a new one
@@ -253,6 +278,10 @@
// page
$scope.old_interface = JSON.parse(JSON.stringify($scope.interface));
}
+ // Add id values to corresponding IPV4 objects
+ for (var i = 0; i < $scope.interface.ipv4.values.length; i++) {
+ $scope.interface.ipv4.values[i].id = $scope.interface.ipv4.ids[i];
+ }
});
}
}
diff --git a/app/configuration/styles/network.scss b/app/configuration/styles/network.scss
index db32e98..d776d13 100644
--- a/app/configuration/styles/network.scss
+++ b/app/configuration/styles/network.scss
@@ -47,11 +47,14 @@
{
margin-left: 3em;
}
- .dns__server-remove {
+ .network-config__ipv4-wrap {
+ padding-bottom: 1.8em;
+ }
+ .network-config_remove-button {
color: $medblue;
height: 2.1em;
- opacity: 1;
margin-left: 1em;
+ opacity: 1;
&:hover {
cursor: pointer;
}