Merge ~mpontillo/maas:fix-vlan-fabric-ui-update--bug-1793282 into maas:master

[Mike Pontillo]

LP: #1793282 - Refresh VLAN UI when fabric changes.

[Andres Rodriguez (andreserl)]

lgtm!

review: Approve

diff --git a/src/maasserver/static/js/angular/controllers/tests/test_vlan_details.js b/src/maasserver/static/js/angular/controllers/tests/test_vlan_details.js
index d587327..61411ca 100644
--- a/src/maasserver/static/js/angular/controllers/tests/test_vlan_details.js
+++ b/src/maasserver/static/js/angular/controllers/tests/test_vlan_details.js
@@ -29,10 +29,14 @@ describe("VLANDetailsController", function() {
     }
 
     // Make a fake fabric
-    function makeFabric() {
+    function makeFabric(id) {
+        if(id === undefined) {
+            id = 1;
+        }
         var fabric = {
-            id: 1,
-            name: 'fabric-0'
+            id: id,
+            name: 'fabric-' + id,
+            default_vlan_id: 5000
         };
         FabricsManager._items.push(fabric);
         return fabric;
@@ -113,15 +117,16 @@ describe("VLANDetailsController", function() {
         ErrorService = $injector.get("ErrorService");
     }));
 
-    var vlan, fabric, primaryController, secondaryController, $routeParams;
-    var space, subnet;
+    var vlan, fabric, fabric2, primaryController, secondaryController;
+    var space, subnet, $routeParams;
     beforeEach(function() {
         primaryController = makeRackController(1, "primary", "p1");
         secondaryController = makeRackController(2, "secondary", "p2");
         vlan = makeVLAN();
         VLANsManager.addRackController(vlan, primaryController);
         VLANsManager.addRackController(vlan, secondaryController);
-        fabric = makeFabric();
+        fabric = makeFabric(1);
+        fabric2 = makeFabric(2);
         space = makeSpace();
         subnet = makeSubnet();
         $routeParams = {
@@ -277,6 +282,16 @@ describe("VLANDetailsController", function() {
         expect(controller.title).toBe("Super Awesome VLAN in space");
     });
 
+    it("updates VLAN when fabric changes", function() {
+        vlan.name = "Super Awesome VLAN";
+        var controller = makeControllerResolveSetActiveItem();
+        expect(controller.title).toBe("Super Awesome VLAN in " + fabric.name);
+        fabric2.name = "space";
+        vlan.fabric = fabric2.id;
+        $scope.$digest();
+        expect(controller.title).toBe("Super Awesome VLAN in space");
+    });
+
     it("updates primaryRack variable when controller changes", function() {
         vlan.primary_rack = 0;
         var controller = makeControllerResolveSetActiveItem();
diff --git a/src/maasserver/static/js/angular/controllers/vlan_details.js b/src/maasserver/static/js/angular/controllers/vlan_details.js
index 6369092..a3a17c8 100644
--- a/src/maasserver/static/js/angular/controllers/vlan_details.js
+++ b/src/maasserver/static/js/angular/controllers/vlan_details.js
@@ -548,9 +548,17 @@ angular.module('MAAS').controller('VLANDetailsController', [
         // Called when the vlan has been loaded.
         function vlanLoaded(vlan) {
             vm.vlan = vlan;
+            updateVLAN();
+            vm.loaded = true;
+        }
+
+        function updateVLAN() {
+            if(!vm.loaded) {
+                return;
+            }
+            var vlan = vm.vlan;
             vm.fabric = FabricsManager.getItemFromList(vlan.fabric);
             vm.isFabricDefault = vm.fabric.default_vlan_id === vm.vlan.id;
-            vm.loaded = true;
 
             updateTitle();
             updateManagementRacks();
@@ -585,6 +593,7 @@ angular.module('MAAS').controller('VLANDetailsController', [
 
             $scope.$watch("vlanDetails.vlan.name", updateTitle);
             $scope.$watch("vlanDetails.vlan.vid", updateTitle);
+            $scope.$watch("vlanDetails.vlan.fabric", updateVLAN);
             $scope.$watch("vlanDetails.vlan.dhcp_on", updatePossibleActions);
             $scope.$watch(
                 "vlanDetails.vlan.relay_vlan", updatePossibleActions);