Merge ~blake-rouse/maas:fix-vlan-editing into maas:master

[Blake Rouse]

LP: #1684085 - Add edit button to vlan and space details page.

[Andres Rodriguez (andreserl)]

lgtm!

review: Approve

[MAAS Lander (maas-lander)]

LANDING
-b fix-vlan-editing lp:~blake-rouse/maas into -b master lp:~maas-committers/maas

STATUS: FAILED BUILD
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/393/consoleText

diff --git a/src/maasserver/static/js/angular/controllers/space_details.js b/src/maasserver/static/js/angular/controllers/space_details.js
index c5707aa..5383c9a 100644
--- a/src/maasserver/static/js/angular/controllers/space_details.js
+++ b/src/maasserver/static/js/angular/controllers/space_details.js
@@ -25,6 +25,7 @@ angular.module('MAAS').controller('SpaceDetailsController', [
         $scope.spaceManager = SpacesManager;
         $scope.subnets = SubnetsManager.getItems();
         $scope.loaded = false;
+        $scope.editSummary = false;
 
         // Updates the page title.
         function updateTitle() {
@@ -68,6 +69,16 @@ angular.module('MAAS').controller('SpaceDetailsController', [
             return UsersManager.isSuperUser();
         };
 
+        // Called when the "edit" button is cliked in the space summary
+        $scope.enterEditSummary = function() {
+            $scope.editSummary = true;
+        };
+
+        // Called when the "cancel" button is cliked in the space summary
+        $scope.exitEditSummary = function() {
+            $scope.editSummary = false;
+        };
+
         // Return true if this is the default Space
         $scope.isDefaultSpace = function() {
             if(!angular.isObject($scope.space)) {
diff --git a/src/maasserver/static/js/angular/controllers/tests/test_space_details.js b/src/maasserver/static/js/angular/controllers/tests/test_space_details.js
index 18b9967..2c66146 100644
--- a/src/maasserver/static/js/angular/controllers/tests/test_space_details.js
+++ b/src/maasserver/static/js/angular/controllers/tests/test_space_details.js
@@ -175,6 +175,25 @@ describe("SpaceDetailsController", function() {
         expect($rootScope.title).toBe(space.name);
     });
 
+    describe("enterEditSummary", function() {
+
+      it("sets editSummary", function() {
+        var controller = makeController();
+        $scope.enterEditSummary();
+        expect($scope.editSummary).toBe(true);
+      });
+    });
+
+    describe("exitEditSummary", function() {
+
+      it("sets editSummary", function() {
+        var controller = makeController();
+        $scope.enterEditSummary();
+        $scope.exitEditSummary();
+        expect($scope.editSummary).toBe(false);
+      });
+    });
+
     describe("canBeDeleted", function() {
 
         it("returns false if space is null", function() {
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 9e30e59..d587327 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
@@ -572,6 +572,47 @@ describe("VLANDetailsController", function() {
         });
     });
 
+    describe("enterEditSummary", function() {
+
+      it("sets editSummary", function() {
+        var controller = makeController();
+        controller.enterEditSummary();
+        expect(controller.editSummary).toBe(true);
+      });
+    });
+
+    describe("exitEditSummary", function() {
+
+      it("sets editSummary", function() {
+        var controller = makeController();
+        controller.enterEditSummary();
+        controller.exitEditSummary();
+        expect(controller.editSummary).toBe(false);
+      });
+    });
+
+    describe("getSpaceName", function() {
+
+      it("returns space name", function() {
+        var controller = makeController();
+        var spaceName = makeName("space");
+        SpacesManager._items = [{
+            id: 1,
+            name: spaceName
+        }];
+        controller.vlan = {
+          space: 1
+        };
+        expect(controller.getSpaceName()).toBe(spaceName);
+      });
+
+      it("returns space (undefined)", function() {
+        var controller = makeController();
+        controller.vlan = {};
+        expect(controller.getSpaceName()).toBe("(undefined)");
+      });
+    });
+
     describe("updatePossibleActions", function() {
 
         // Note: updatePossibleActions() is called indirectly by these tests
diff --git a/src/maasserver/static/js/angular/controllers/vlan_details.js b/src/maasserver/static/js/angular/controllers/vlan_details.js
index 97a6f4b..6369092 100644
--- a/src/maasserver/static/js/angular/controllers/vlan_details.js
+++ b/src/maasserver/static/js/angular/controllers/vlan_details.js
@@ -74,12 +74,34 @@ angular.module('MAAS').controller('VLANDetailsController', [
         vm.provideDHCPAction = {};
         vm.primaryRack = null;
         vm.secondaryRack = null;
+        vm.editSummary = false;
+
 
         // Return true if the authenticated user is super user.
         vm.isSuperUser = function() {
             return UsersManager.isSuperUser();
         };
 
+        // Called when the "edit" button is cliked in the vlan summary
+        vm.enterEditSummary = function() {
+            vm.editSummary = true;
+        };
+
+        // Called when the "cancel" button is cliked in the vlan summary
+        vm.exitEditSummary = function() {
+            vm.editSummary = false;
+        };
+
+        // Get the space name for the VLAN.
+        vm.getSpaceName = function() {
+            var space = SpacesManager.getItemFromList(vm.vlan.space);
+            if(space) {
+              return space.name;
+            } else {
+              return "(undefined)";
+            }
+        };
+
         // Get the aciton structure for the action with the specified name.
         vm.getActionByName = function(name) {
             var i;
diff --git a/src/maasserver/static/partials/space-details.html b/src/maasserver/static/partials/space-details.html
index 4230f85..856dd01 100644
--- a/src/maasserver/static/partials/space-details.html
+++ b/src/maasserver/static/partials/space-details.html
@@ -45,15 +45,29 @@
     <section class="row">
         <div class="wrapper--inner">
             <div class="twelve-col">
-                <h2>Space summary</h2>
+              <h2 class="u-float--left">Space summary</h2>
+              <button type="button" name="button" class="button--secondary button--inline u-float--right" data-ng-click="enterEditSummary()" data-ng-if="!editSummary">Edit</button>
             </div>
-            <maas-obj-form obj="space" table-form="true" manager="spaceManager" data-ng-disabled="!isSuperUser()">
+            <div class="twelve-col" data-ng-if="!editSummary">
+                <dl class="six-col">
+                    <dt class="two-col">Name</dt>
+                    <dd class="four-col last-col">{$ space.name $}</dd>
+                    <dt class="two-col">Description</dt>
+                    <dd class="four-col last-col">{$ space.description $}</dd>
+                </dl>
+            </div>
+            <maas-obj-form obj="space" table-form="true" manager="spaceManager" data-ng-disabled="!isSuperUser()" data-ng-if="editSummary" table-form="true" save-on-blur="false" after-save="exitEditSummary">
                 <fieldset class="form__fieldset six-col">
                     <maas-obj-field type="text" key="name" label="Name" placeholder="Space name"
                         label-width="two" input-width="three" blur-on-enter="true"></maas-obj-field>
                     <maas-obj-field type="textarea" key="description" label="Description" placeholder="Space description"
                         label-width="two" input-width="three" blur-on-enter="true"></maas-obj-field>
                 </fieldset>
+                <div class="twelve-col u-align--right">
+                    <button class="button--base button--inline"
+                       data-ng-click="exitEditSummary()">Cancel</button>
+                    <button class="button--positive button--inline" maas-obj-save>Save summary</button>
+                </div>
             </maas-obj-form>
         </div>
     </section>
diff --git a/src/maasserver/static/partials/vlan-details.html b/src/maasserver/static/partials/vlan-details.html
index 1d33549..a653cdc 100644
--- a/src/maasserver/static/partials/vlan-details.html
+++ b/src/maasserver/static/partials/vlan-details.html
@@ -222,9 +222,39 @@
     <section class="row">
         <div class="wrapper--inner">
             <div class="twelve-col">
-                <h2>VLAN Summary</h2>
+                <h2 class="u-float--left">VLAN Summary</h2>
+                <button type="button" name="button" class="button--secondary button--inline u-float--right" data-ng-click="vlanDetails.enterEditSummary()" data-ng-if="!vlanDetails.editSummary">Edit</button>
             </div>
-            <maas-obj-form obj="vlanDetails.vlan" manager="vlanDetails.vlanManager" data-ng-disabled="!vlanDetails.isSuperUser()">
+            <div class="twelve-col" data-ng-if="!vlanDetails.editSummary">
+                <dl class="six-col">
+                    <dt class="two-col">VID</dt>
+                    <dd class="four-col last-col">{$ vlanDetails.vlan.vid $}</dd>
+                    <dt class="two-col">Name</dt>
+                    <dd class="four-col last-col">{$ vlanDetails.vlan.name $}</dd>
+                    <dt class="two-col">MTU</dt>
+                    <dd class="four-col last-col">{$ vlanDetails.vlan.mtu $}</dd>
+                    <dt class="two-col">Space</dt>
+                    <dd class="four-col last-col">{$ vlanDetails.getSpaceName() $}</dd>
+                    <dt class="two-col">Description</dt>
+                    <dd class="four-col last-col">{$ vlanDetails.vlan.description $}</dd>
+                </dl>
+                <dl class="six-col last-col">
+                  <dt class="two-col">Fabric</dt>
+                  <dd class="four-col last-col">
+                      <a href="#/fabric/{$ vlanDetails.fabric.id $}">{$ vlanDetails.fabric.name $}</a>
+                  </dd>
+                  <div data-ng-if="vlanDetails.relatedControllers">
+                      <dt class="two-col">Rack controllers <span class="icon icon--help tooltip" aria-label="A rack controller controls hosts and images and runs network services&#xa;like DHCP for connected VLANs."></span></dt>
+                      <dd class="four-col last-col">
+                          <span data-ng-repeat="rack in vlanDetails.relatedControllers">
+                              <a href="#/node/controller/{$ rack.system_id $}">{$ rack.hostname $}</a>
+                          </span>&nbsp;
+                      </dd>
+                  </div>
+                </dl>
+            </div>
+            <maas-obj-form obj="vlanDetails.vlan" manager="vlanDetails.vlanManager" data-ng-disabled="!vlanDetails.isSuperUser()" data-ng-if="vlanDetails.editSummary"
+              table-form="true" save-on-blur="false" after-save="vlanDetails.exitEditSummary">
                 <fieldset class="form__fieldset six-col">
                     <maas-obj-field type="text" key="vid" label="VID" placeholder="VLAN VID"
                         label-width="two" input-width="three" blur-on-enter="true"></maas-obj-field>
@@ -254,6 +284,11 @@
                         </div>
                     </dl>
                 </div>
+                <div class="twelve-col u-align--right">
+                    <button class="button--base button--inline"
+                       data-ng-click="vlanDetails.exitEditSummary()">Cancel</button>
+                    <button class="button--positive button--inline" maas-obj-save>Save summary</button>
+                </div>
             </maas-obj-form>
         </div>
     </section>