Remove IPV4 addresses

Tested: Able to remove existing IPV4
   addresses.

Change-Id: I772bee6ad6b68bc0a69351f3e5386acc659241ef
Signed-off-by: beccabroek <beccabroek@gmail.com>

3 files changed, 55 insertions, 20 deletions

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 @@ window.angular && (function(angular) {
       $scope.selectedInterface = '';
       $scope.confirm_settings = false;
       $scope.loading = false;
+      $scope.IPV4s_to_delete = [];
 
       loadNetworkInfo();
 
@@ -43,6 +44,15 @@ window.angular && (function(angular) {
         $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 @@ window.angular && (function(angular) {
 
         // 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 @@ window.angular && (function(angular) {
                 });
       }
 
+      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 @@ window.angular && (function(angular) {
             // 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;
     }