Merge ~steverydz/maas:compose-machine-validation into maas:master

[Steve Rydz]

LP: #1823265 - Disable compose button if hostname contains underscore

Done
- Disabled "Compose" button if "Host name" contains an underscore
- Some minor eslint fixes

QA steps:
- Go to a POD detail page
- Select "Compose" from the "Take action" button
- Type in a "Host name" with an underscore in it
- See that the "Compose" button is disabled
- Remove the underscore from the "Host name"
- See that the "Compose" button is now enabled

[Caleb Ellis (caleb-ellis)]

LGTM!

review: Approve

diff --git a/src/maasserver/static/js/angular/controllers/pod_details.js b/src/maasserver/static/js/angular/controllers/pod_details.js
index aeaa539..8a32b8e 100644
--- a/src/maasserver/static/js/angular/controllers/pod_details.js
+++ b/src/maasserver/static/js/angular/controllers/pod_details.js
@@ -24,7 +24,9 @@ function PodDetailsController(
   VLANsManager,
   FabricsManager,
   SpacesManager,
-  ValidationService
+  ValidationService,
+  $log,
+  $document
 ) {
   // Set title and page.
   $rootScope.title = "Loading...";
@@ -190,11 +192,11 @@ function PodDetailsController(
   // Update the pod with new data on the region.
   $scope.updatePod = function(pod) {
     return $scope.podManager.updateItem(pod).then(
-      function(pod) {
+      function() {
         updateName();
       },
       function(error) {
-        console.log(error);
+        $log.error(error);
         updateName();
       }
     );
@@ -252,6 +254,12 @@ function PodDetailsController(
     var requests = $scope.compose.obj.requests;
     var valid = true;
 
+    var hostname = $scope.compose.obj.hostname;
+
+    if (hostname && hostname.includes("_")) {
+      return false;
+    }
+
     requests.forEach(function(request) {
       if (request.size > request.available || request.size === "") {
         valid = false;
@@ -458,12 +466,12 @@ function PodDetailsController(
   $scope.copyToClipboard = function($event) {
     var clipboardParent = $event.currentTarget.previousSibling;
     var clipboardValue = clipboardParent.previousSibling.value;
-    var el = document.createElement("textarea");
+    var el = $document.createElement("textarea");
     el.value = clipboardValue;
-    document.body.appendChild(el);
+    $document.body.appendChild(el);
     el.select();
-    document.execCommand("copy");
-    document.body.removeChild(el);
+    $document.execCommand("copy");
+    $document.body.removeChild(el);
   };
 
   // Called to cancel composition.
@@ -594,7 +602,7 @@ function PodDetailsController(
 
   $scope.selectSubnetByIP = function(iface) {
     if (iface.ipaddress) {
-      angular.forEach($scope.availableSubnets, function(subnet, idx) {
+      angular.forEach($scope.availableSubnets, function(subnet) {
         let inNetwork = ValidationService.validateIPInNetwork(
           iface.ipaddress,
           subnet.cidr
@@ -654,7 +662,7 @@ function PodDetailsController(
   // Start watching key fields.
   $scope.startWatching = function() {
     $scope.$watch("subnets", function() {
-      angular.forEach($scope.subnets, function(subnet, idx) {
+      angular.forEach($scope.subnets, function(subnet) {
         // filter subnets from vlans not attached to host
         if ($scope.pod.attached_vlans.includes(subnet.vlan)) {
           $scope.availableSubnets.push(_getSubnetDetails(subnet));
diff --git a/src/maasserver/static/partials/pod-details.html b/src/maasserver/static/partials/pod-details.html
index bcfc763..bb34204 100644
--- a/src/maasserver/static/partials/pod-details.html
+++ b/src/maasserver/static/partials/pod-details.html
@@ -47,7 +47,12 @@
                 </div>
                 <div class="row">
                     <div class="col-6">
-                        <maas-obj-field type="text" key="hostname" label="Hostname" subtle="false" placeholder="Hostname (optional)" label-width="2" label-width-tablet="2" input-width="3" input-width-tablet="4"></maas-obj-field>
+                        <div class="p-form__group">
+                            <label for="hostname" class="p-form__label col-2 tablet-col-2">Hostname</label>
+                            <div class="p-form__control col-3 tablet-col-4">
+                                <input type="text" name="hostname" id="hostname" data-ng-model="compose.obj.hostname" placeholder="Hostname (optional)">
+                            </div>
+                        </div>
                         <maas-obj-field type="options" key="domain" label="Domain" subtle="false" placeholder="Choose a domain"
                             options="domain.id as domain.name for domain in domains" label-width="2" label-width-tablet="2" input-width="3" input-width-tablet="4"></maas-obj-field>
                         <maas-obj-field type="options" key="zone"