Merge lp:~blake-rouse/maas/fix-1566920 into lp:~maas-committers/maas/trunk

[Blake Rouse]

Fix handling no connected rack controllers on the machine details page. Cleanup error messages on the machine details page. Fix power_type options from being reset mid type.

[Mike Pontillo (mpontillo)]

Looks good to me. One comment/nit below.

review: Approve

[Andres Rodriguez (andreserl)]

missing changelog entry

review: Needs Fixing

=== modified file 'src/maasserver/static/js/angular/controllers/node_details.js'
--- src/maasserver/static/js/angular/controllers/node_details.js	2016-03-28 13:54:47 +0000
+++ src/maasserver/static/js/angular/controllers/node_details.js	2016-04-08 20:38:44 +0000
@@ -40,21 +40,6 @@
         $scope.checkingPower = false;
         $scope.devices = [];
 
-        // Holds errors that are displayed on the details page.
-        $scope.errors = {
-            invalid_arch: {
-                viewable: false,
-                message: "This node has an invalid architecture. Update the " +
-                    "architecture for this node in the summary section below."
-            },
-            missing_power: {
-                viewable: false,
-                message: "This node does not have a power type set and " +
-                    "MAAS will be unable to control it. Update the power " +
-                    "information in the power section below."
-            }
-        };
-
         // Node header section.
         $scope.header = {
             editing: false,
@@ -110,51 +95,6 @@
             summaryType: 'yaml'
         };
 
-        // Show given error.
-        function showError(name) {
-            $scope.errors[name].viewable = true;
-        }
-
-        // Hide given error.
-        function hideError(name) {
-            $scope.errors[name].viewable = false;
-        }
-
-        // Return true if the error is viewable.
-        function isErrorViewable(name) {
-            return $scope.errors[name].viewable;
-        }
-
-        // Return true if the architecture for the given node is invalid.
-        function hasInvalidArchitecture(node) {
-            return (
-                node.architecture === "" ||
-                $scope.summary.architecture.options.indexOf(
-                    node.architecture) === -1);
-        }
-
-        // Update the shown errors based on the status of the node.
-        function updateErrors() {
-            if('controller' !== $routeParams.type) {
-                // Check if the nodes power type is null, if so then show the
-                // missing_power error.
-                if($scope.node.power_type === "") {
-                    showError("missing_power");
-                } else {
-                    hideError("missing_power");
-                }
-
-                // Show architecture error if the node has no architecture
-                // or if the current architecture is not in the available
-                // architectures.
-                if(hasInvalidArchitecture($scope.node)) {
-                    showError("invalid_arch");
-                } else {
-                    hideError("invalid_arch");
-                }
-            }
-        }
-
         // Updates the page title.
         function updateTitle() {
             if($scope.node && $scope.node.fqdn) {
@@ -206,9 +146,6 @@
 
         // Updates the currently selected items in the power section.
         function updatePower() {
-            // Update the viewable errors.
-            updateErrors();
-
             // Do not update the selected items, when editing this would
             // cause the users selection to change.
             if($scope.power.editing) {
@@ -242,9 +179,6 @@
 
         // Updates the currently selected items in the summary section.
         function updateSummary() {
-            // Update the viewable errors.
-            updateErrors();
-
             // Do not update the selected items, when editing this would
             // cause the users selection to change.
             if($scope.summary.editing) {
@@ -260,7 +194,9 @@
             // Force editing mode on, if the architecture is invalid. This is
             // placed at the bottom because we wanted the selected items to
             // be filled in at least once.
-            if($scope.canEdit() && hasInvalidArchitecture($scope.node)) {
+            if($scope.canEdit() &&
+                $scope.hasUsableArchitectures() &&
+                $scope.hasInvalidArchitecture()) {
                 $scope.summary.editing = true;
             }
         }
@@ -434,6 +370,7 @@
             // are updated.
             $scope.$watch("node.power_type", updatePower);
             $scope.$watch("node.power_parameters", updatePower);
+            $scope.$watchCollection("power_types", updatePower);
 
             // Update the services when the services list is updated.
             $scope.$watch("node.service_ids", updateServices);
@@ -446,18 +383,6 @@
             $scope.$watch("node.installation_results", updateMachineOutput);
         }
 
-        // Update the node with new data on the region.
-        $scope.updateNode = function(node) {
-            return $scope.nodesManager.updateItem(node).then(function(node) {
-                updateHeader();
-                updateSummary();
-            }, function(error) {
-                console.log(error);
-                updateHeader();
-                updateSummary();
-            });
-        };
-
         // Called when the node has been loaded.
         function nodeLoaded(node) {
             $scope.node = node;
@@ -479,6 +404,18 @@
             }
         }
 
+        // Update the node with new data on the region.
+        $scope.updateNode = function(node) {
+            return $scope.nodesManager.updateItem(node).then(function(node) {
+                updateHeader();
+                updateSummary();
+            }, function(error) {
+                console.log(error);
+                updateHeader();
+                updateSummary();
+            });
+        };
+
         // Called for autocomplete when the user is typing a tag name.
         $scope.tagsAutocomplete = function(query) {
             return TagsManager.autocomplete(query);
@@ -681,6 +618,32 @@
             return UsersManager.isSuperUser();
         };
 
+        // Return true if their are usable architectures.
+        $scope.hasUsableArchitectures = function() {
+            return $scope.summary.architecture.options.length > 0;
+        };
+
+        // Return the placeholder text for the architecture dropdown.
+        $scope.getArchitecturePlaceholder = function() {
+            if($scope.hasUsableArchitectures()) {
+                return "Choose an architecture";
+            } else {
+                return "-- No usable architectures --";
+            }
+        };
+
+        // Return true if the saved architecture is invalid.
+        $scope.hasInvalidArchitecture = function() {
+            if(angular.isObject($scope.node)) {
+                return (
+                    $scope.node.architecture === "" ||
+                    $scope.summary.architecture.options.indexOf(
+                        $scope.node.architecture) === -1);
+            } else {
+                return false;
+            }
+        };
+
         // Return true if the current architecture selection is invalid.
         $scope.invalidArchitecture = function() {
             return (
@@ -689,9 +652,19 @@
                     $scope.summary.architecture.selected) === -1);
         };
 
+        // Return true if at least a rack controller is connected to the
+        // region controller.
+        $scope.isRackControllerConnected = function() {
+            // If power_types exist then a rack controller is connected.
+            return $scope.power_types.length > 0;
+        };
+
         // Return true when the edit buttons can be clicked.
         $scope.canEdit = function() {
-            return $scope.isSuperUser() && !$scope.isController;
+            return (
+                $scope.isRackControllerConnected() &&
+                $scope.isSuperUser() &&
+                !$scope.isController);
         };
 
         // Called to edit the node name.
@@ -761,7 +734,7 @@
         // Called to cancel editing in the summary section.
         $scope.cancelEditSummary = function() {
             // Leave edit mode only if node has valid architecture.
-            if(!hasInvalidArchitecture($scope.node)) {
+            if(!$scope.hasInvalidArchitecture()) {
                 $scope.summary.editing = false;
             }
 

=== modified file 'src/maasserver/static/js/angular/controllers/tests/test_node_details.js'
--- src/maasserver/static/js/angular/controllers/tests/test_node_details.js	2016-03-28 13:54:47 +0000
+++ src/maasserver/static/js/angular/controllers/tests/test_node_details.js	2016-04-08 20:38:44 +0000
@@ -328,37 +328,25 @@
         expect($rootScope.title).toBe(node.fqdn);
     });
 
-    it("invalid_arch error visible if node architecture empty", function() {
-        node.architecture = "";
-
-        var controller = makeControllerResolveSetActiveItem();
-        expect($scope.errors.invalid_arch.viewable).toBe(true);
-    });
-
-    it("invalid_arch error visible if node architecture not present",
-        function() {
-            GeneralManager._data.architectures.data = [makeName("arch")];
-
-            var controller = makeControllerResolveSetActiveItem();
-            expect($scope.errors.invalid_arch.viewable).toBe(true);
-        });
-
-    it("invalid_arch error not visible if node architecture present",
-        function() {
-            GeneralManager._data.architectures.data = [node.architecture];
-
-            var controller = makeControllerResolveSetActiveItem();
-            expect($scope.errors.invalid_arch.viewable).toBe(false);
-        });
-
     it("summary section placed in edit mode if architecture blank",
         function() {
             node.architecture = "";
+            GeneralManager._data.power_types.data = [{}];
+            GeneralManager._data.architectures.data = ["amd64/generic"];
 
             var controller = makeControllerResolveSetActiveItem();
             expect($scope.summary.editing).toBe(true);
         });
 
+    it("summary section not placed in edit mode if no usable architectures",
+        function() {
+            node.architecture = "";
+            GeneralManager._data.power_types.data = [{}];
+
+            var controller = makeControllerResolveSetActiveItem();
+            expect($scope.summary.editing).toBe(false);
+        });
+
     it("summary section not placed in edit mode if architecture present",
         function() {
             GeneralManager._data.architectures.data = [node.architecture];
@@ -375,25 +363,21 @@
         expect($scope.summary.tags).toEqual(node.tags);
     });
 
-    it("missing_power error visible if node power_type empty", function() {
-        var controller = makeControllerResolveSetActiveItem();
-        expect($scope.errors.missing_power.viewable).toBe(true);
-    });
-
-    it("missing_power error not visible if node power_type empty", function() {
-        node.power_type = makeName("power");
-
-        var controller = makeControllerResolveSetActiveItem();
-        expect($scope.errors.missing_power.viewable).toBe(false);
-    });
-
     it("power section placed in edit mode if power_type blank", function() {
+        GeneralManager._data.power_types.data = [{}];
+
         var controller = makeControllerResolveSetActiveItem();
         expect($scope.power.editing).toBe(true);
     });
 
+    it("power section not placed in edit mode if no power_types", function() {
+        var controller = makeControllerResolveSetActiveItem();
+        expect($scope.power.editing).toBe(false);
+    });
+
     it("power section not placed in edit mode if power_type", function() {
         node.power_type = makeName("power");
+        GeneralManager._data.power_types.data = [{}];
 
         var controller = makeControllerResolveSetActiveItem();
         expect($scope.power.editing).toBe(false);
@@ -564,7 +548,8 @@
         expect(watchCollections).toEqual([
             $scope.summary.architecture.options,
             $scope.summary.min_hwe_kernel.options,
-            $scope.summary.zone.options
+            $scope.summary.zone.options,
+            "power_types"
         ]);
     });
 
@@ -1190,6 +1175,75 @@
         });
     });
 
+    describe("hasUsableArchitectures", function() {
+
+        it("returns true if architecture available", function() {
+            var controller = makeController();
+            $scope.summary.architecture.options = ["amd64/generic"];
+            expect($scope.hasUsableArchitectures()).toBe(true);
+        });
+
+        it("returns false if no architecture available", function() {
+            var controller = makeController();
+            $scope.summary.architecture.options = [];
+            expect($scope.hasUsableArchitectures()).toBe(false);
+        });
+    });
+
+    describe("getArchitecturePlaceholder", function() {
+
+        it("returns choose if architecture available", function() {
+            var controller = makeController();
+            $scope.summary.architecture.options = ["amd64/generic"];
+            expect($scope.getArchitecturePlaceholder()).toBe(
+                "Choose an architecture");
+        });
+
+        it("returns error if no architecture available", function() {
+            var controller = makeController();
+            $scope.summary.architecture.options = [];
+            expect($scope.getArchitecturePlaceholder()).toBe(
+                "-- No usable architectures --");
+        });
+    });
+
+    describe("hasInvalidArchitecture", function() {
+
+        it("returns false if node is null", function() {
+            var controller = makeController();
+            $scope.node = null;
+            $scope.summary.architecture.options = ["amd64/generic"];
+            expect($scope.hasInvalidArchitecture()).toBe(false);
+        });
+
+        it("returns true if node.architecture is blank", function() {
+            var controller = makeController();
+            $scope.node = {
+                architecture: ""
+            };
+            $scope.summary.architecture.options = ["amd64/generic"];
+            expect($scope.hasInvalidArchitecture()).toBe(true);
+        });
+
+        it("returns true if node.architecture not in options", function() {
+            var controller = makeController();
+            $scope.node = {
+                architecture: "i386/generic"
+            };
+            $scope.summary.architecture.options = ["amd64/generic"];
+            expect($scope.hasInvalidArchitecture()).toBe(true);
+        });
+
+        it("returns false if node.architecture in options", function() {
+            var controller = makeController();
+            $scope.node = {
+                architecture: "amd64/generic"
+            };
+            $scope.summary.architecture.options = ["amd64/generic"];
+            expect($scope.hasInvalidArchitecture()).toBe(false);
+        });
+    });
+
     describe("invalidArchitecture", function() {
 
         it("returns true if selected architecture empty", function() {
@@ -1214,25 +1268,58 @@
         });
     });
 
+    describe("isRackControllerConnected", function() {
+
+        it("returns false no power_types", function() {
+            var controller = makeController();
+            $scope.power_types = [];
+            expect($scope.isRackControllerConnected()).toBe(false);
+        });
+
+        it("returns true if power_types", function() {
+            var controller = makeController();
+            $scope.power_types = [{}];
+            expect($scope.isRackControllerConnected()).toBe(true);
+        });
+    });
+
     describe("canEdit", function() {
 
-        it("returns false if not super user and not controller", function() {
+        it("returns false if not super user", function() {
             var controller = makeController();
             $scope.isController = false;
             spyOn($scope, "isSuperUser").and.returnValue(false);
+            spyOn(
+                $scope,
+                "isRackControllerConnected").and.returnValue(true);
             expect($scope.canEdit()).toBe(false);
         });
 
-        it("returns false if super user and controller", function() {
+        it("returns false if controller", function() {
             var controller = makeController();
             $scope.isController = true;
-            expect($scope.canEdit()).toBe(false);
-        });
-
-        it("returns true if super user and not controller",
+            spyOn(
+                $scope,
+                "isRackControllerConnected").and.returnValue(true);
+            expect($scope.canEdit()).toBe(false);
+        });
+
+        it("returns false if rack disconnected", function() {
+            var controller = makeController();
+            $scope.isController = false;
+            spyOn(
+                $scope,
+                "isRackControllerConnected").and.returnValue(false);
+            expect($scope.canEdit()).toBe(false);
+        });
+
+        it("returns true if super user, rack connected, not controller",
             function() {
                 var controller = makeController();
                 $scope.isController = false;
+                spyOn(
+                    $scope,
+                    "isRackControllerConnected").and.returnValue(true);
                 expect($scope.canEdit()).toBe(true);
             });
     });

=== modified file 'src/maasserver/static/js/angular/factories/general.js'
--- src/maasserver/static/js/angular/factories/general.js	2016-03-28 13:54:47 +0000
+++ src/maasserver/static/js/angular/factories/general.js	2016-04-08 20:38:44 +0000
@@ -108,7 +108,7 @@
                     polling: false,
                     nextPromise: null,
                     replaceData: function(oldData, newData) {
-                        // Update or add new power types.
+                        // Add new power types.
                         var i, j, newPowerType, oldPowerType;
                         for(i = 0; i < newData.length; i++) {
                             newPowerType = newData[i];
@@ -116,7 +116,6 @@
                             for(j = 0; j < oldData.length; j++) {
                                 oldPowerType = oldData[j];
                                 if(newPowerType.name === oldPowerType.name) {
-                                    angular.copy(newPowerType, oldPowerType);
                                     newItem = false;
                                     break;
                                 }

=== modified file 'src/maasserver/static/js/angular/factories/tests/test_general.js'
--- src/maasserver/static/js/angular/factories/tests/test_general.js	2016-03-28 13:54:47 +0000
+++ src/maasserver/static/js/angular/factories/tests/test_general.js	2016-04-08 20:38:44 +0000
@@ -169,7 +169,7 @@
             expect(data).toEqual([newPowerType]);
         });
 
-        it("updates power_type in array to be same object", function() {
+        it("doesnt update power_type in array to be same object", function() {
             var oldPowerType = {
                 name: makeName("power"),
                 fields: [
@@ -188,7 +188,8 @@
                 ]
             };
             replaceData(data, [newPowerType]);
-            expect(data).toEqual([newPowerType]);
+            expect(data).not.toEqual([newPowerType]);
+            expect(data[0]).toEqual(oldPowerType);
             expect(data[0]).toBe(oldPowerType);
         });
 

=== modified file 'src/maasserver/static/partials/node-details.html'
--- src/maasserver/static/partials/node-details.html	2016-03-28 13:54:47 +0000
+++ src/maasserver/static/partials/node-details.html	2016-04-08 20:38:44 +0000
@@ -137,19 +137,24 @@
             </div>
         </div>
     </header>
-    <div class="inner-wrapper">
-        <ul class="flash-messages">
-            <li class="flash-messages__item error ng-hide"
-                data-ng-repeat="(error_type, error) in errors"
-                data-ng-show="error.viewable">{$ error.message $}</li>
-        </ul>
-    </div>
     <div class="row">
         <div class="inner-wrapper">
             <form>
                 <div class="twelve-col">
                     <h2 class="title" data-ng-hide="isController">Machine summary</h2>
                     <h2 class="title" data-ng-show="isController">Controller summary</h2>
+                    <ul class="flash-messages" data-ng-if="isSuperUser()">
+                        <li class="flash-messages__item error"
+                            data-ng-if="!isController && !isRackControllerConnected()">Editing is currently disabled because no rack controller is currently connected to the region.</li>
+                        <li class="flash-messages__item error"
+                            data-ng-if="!isController && hasInvalidArchitecture() && isRackControllerConnected() && hasUsableArchitectures()">
+                                This machine currently has an invalid architecture. Update the architecture of this machine to make it deployable.
+                        </li>
+                        <li class="flash-messages__item error"
+                            data-ng-if="!isController && hasInvalidArchitecture() && isRackControllerConnected() && !hasUsableArchitectures()">
+                                No boot images have been imported for a valid architecture to be selected. Visit the <a href="images">images page</a> to start the import process.
+                        </li>
+                    </ul>
                 </div>
                 <fieldset class="six-col">
                     <div class="ng-hide" data-ng-show="isSuperUser() && !isController">
@@ -167,12 +172,12 @@
                         <div class="inline">
                             <label for="architecture" class="two-col">Architecture</label>
                             <div class="three-col">
-                                <select name="architecture" id="architecture" placeholder="Choose an architecture"
+                                <select name="architecture" id="architecture"
                                     data-ng-disabled="!summary.editing"
                                     data-ng-model="summary.architecture.selected"
                                     data-ng-options="arch for arch in summary.architecture.options"
                                     data-ng-class="{ invalid: invalidArchitecture() }">
-                                    <option value="" disabled="disabled">Choose an architecture</option>
+                                    <option value="" disabled="disabled">{$ getArchitecturePlaceholder() $}</option>
                                 </select>
                             </div>
                         </div>
@@ -332,32 +337,41 @@
         <div class="inner-wrapper">
             <form class="disabled">
                 <div class="twelve-col">
-                    <h2 class="title">Power</h2>
-                </div>
-                <div class="twelve-col ng-hide info" data-ng-show="power.type.name == 'manual'">
-                    <ul class="flash-messages">
-                        <li class="flash-messages__item info">
-                            Power control for this power type will need to be handled manually.
-                        </li>
-                    </ul>
-                </div>
-                <div class="twelve-col ng-hide error" data-ng-show="hasPowerError()">
-                    <ul class="flash-messages">
-                        <li class="flash-messages__item error">
+                    <h2 class="title left">Power</h2>
+                </div>
+                <div class="twelve-col">
+                    <ul class="flash-messages">
+                        <li class="flash-messages__item error" data-ng-if="!isRackControllerConnected()">
+                            Editing is currently disabled because no rack controller is current connected to the region.
+                        </li>
+                        <li class="flash-messages__item error" data-ng-if="isRackControllerConnected() && node.power_type == ''">
+                            This node does not have a power type set and MAAS will be unable to control it. Update the power
+                            information below.
+                        </li>
+                        <li class="flash-messages__item error" data-ng-if="hasPowerError()">
                             Power control software for this power type is missing from the
                             rack controller.  To proceed, install the {$ getPowerErrors() $}
                             on the rack controller.
                         </li>
+                        <li class="flash-messages__item info" data-ng-if="power.type.name == 'manual'">
+                            Power control for this power type will need to be handled manually.
+                        </li>
+                        <li class="flash-messages__item info" data-ng-if="power.editing && node.power_bmc_node_count > 1">
+                            This power controller manages {$ node.power_bmc_node_count - 1 $} other
+                            {$ node.power_bmc_node_count > 3 ? "nodes" : "node" $}.
+                            Changing power parameters will affect these nodes.
+                        </li>
                     </ul>
                 </div>
-                <fieldset class="six-col"
+                <fieldset class="six-col ng-hide"
+                    data-ng-show="power_types.length"
                     data-ng-disabled="!power.editing"
                     data-maas-power-parameters="power_types"
                     data-ng-model="power">
                 </fieldset>
                 <div class="controls" data-ng-hide="power.editing">
                     <a href="" class="link-cta-ubuntu secondary"
-                        data-ng-show="canEdit()"
+                        data-ng-show="canEdit() && power_types.length"
                         data-ng-click="editPower()">Edit</a>
                 </div>
                 <div class="controls ng-hide" data-ng-show="power.editing">
@@ -367,16 +381,7 @@
                         data-ng-class="{ secondary: invalidPowerType() }"
                         data-ng-click="saveEditPower()">Save changes</button>
                 </div>
-                <div class="twelve-col ng-hide info" data-ng-show="power.editing && node.power_bmc_node_count > 1">
-                    <ul class="flash-messages">
-                        <li class="flash-messages__item info">
-                            This power controller manages {$ node.power_bmc_node_count - 1 $} other
-                            {$ node.power_bmc_node_count > 3 ? "nodes" : "node" $}.
-                            Changing power parameters will affect these nodes. If this is not what you want,
-                            create a new power controller unique to this node by changing the power type.
-                        </li>
-                    </ul>
-                </div>
+
             </form>
         </div>
     </div>
@@ -495,7 +500,7 @@
                                 </div>
                                 <div class="table__data table-col--30">
                                     <span data-ng-repeat="subnet in vlanRow['subnets']">
-                                        <div class="margin-bottom--ten"> 
+                                        <div class="margin-bottom--ten">
                                             <a href="#/subnet/{$ subnet.id $}">{$ getSubnetText(subnet) $}</a>
                                         </div>
                                     </span>
@@ -515,25 +520,23 @@
         <div class="row">
             <div class="inner-wrapper">
                 <div class="twelve-col" data-ng-hide="loaded">
-                    <h2 class="title">Network</h2>
+                    <h2 class="title">Interfaces</h2>
                     <div class="twelve-col">Loading...</div>
                 </div>
                 <form class="ng-hide" data-ng-show="loaded">
                     <div class="twelve-col">
-                        <h2 class="title">Network</h2>
+                        <h2 class="title">Interfaces</h2>
                         <div class="twelve-col error">
-                            <ul class="flash-messages ng-hide" data-ng-show="!isController && isAllNetworkingDisabled() && isSuperUser()">
-                                <li class="flash-messages__item info">
-                                    Network configuration cannot be modified unless the node is Ready or Broken.
-                                </li>
-                            </ul>
-                            <ul class="flash-messages ng-hide" data-ng-show="!node.on_network">
-                                <li class="flash-messages__item error">
+                            <ul class="flash-messages" data-ng-if="
+                                (!isController && isAllNetworkingDisabled() && isSuperUser()) ||
+                                !node.on_network || (!isController && !isUbuntuOS())">
+                                <li class="flash-messages__item error" data-ng-if="!node.on_network">
                                     Node must be connected to a network.
                                 </li>
-                            </ul>
-                            <ul class="flash-messages ng-hide" data-ng-show="!isController && !isUbuntuOS()">
-                                <li class="flash-messages__item info">
+                                <li class="flash-messages__item info" data-ng-if="!isController && isAllNetworkingDisabled() && isSuperUser()">
+                                    Interface configuration cannot be modified unless the node is Ready or Broken.
+                                </li>
+                                <li class="flash-messages__item info" data-ng-if="!isController && !isUbuntuOS()">
                                     Custom network configuration only supported on Ubuntu. Using OS default configuration.
                                 </li>
                             </ul>
@@ -1105,12 +1108,10 @@
 
                         </main>
                     </section>
-
                     <a class="link-cta-ubuntu secondary tooltip"
                        data-tooltip="Create a tmpfs or ramfs filesystem"
                        ng-disabled="dropdown !== null"
                        ng-click="addSpecialFilesystem()">Add special filesystem</a>
-
                 </div>
                 <div class="twelve-col padding-bottom" data-ng-show="cachesets.length">
                     <h3>Available cache sets</h3>
@@ -1869,9 +1870,7 @@
         <div class="inner-wrapper">
             <div class="twelve-col">
                 <h2 class="title">Latest machine events</h2>
-                <h2 data-ng-hide="node.events.length">
-                    No events.
-                </h2>
+                <p data-ng-hide="node.events.length">No events.</p>
                 <table class="table-listing no-hover" data-ng-show="node.events.length">
                     <thead>
                         <tr class="table-listing__row">

=== modified file 'src/maasserver/static/partials/node-events.html'
--- src/maasserver/static/partials/node-events.html	2016-03-31 22:30:51 +0000
+++ src/maasserver/static/partials/node-events.html	2016-04-08 20:38:44 +0000
@@ -31,9 +31,9 @@
             <table class="table-listing " id="events-listing">
                 <thead>
                     <tr class="table-listing__row">
-                        <th class="table-listing__header t1"></th>
-                        <th class="table-listing__header t79">Event</th>
-                        <th class="table-listing__header t20">Time</th>
+                        <th class="table-listing__header table-col--1"></th>
+                        <th class="table-listing__header table-col--79">Event</th>
+                        <th class="table-listing__header table-col--20">Time</th>
                     </tr>
                 </thead>
                 <tbody>