Merge ~mpontillo/maas:dns-ui--add-record into maas:master

[Mike Pontillo]

Add form to create new DNS records.

 * Change karma configuration to use built JavaScript.
 * Reorganize YUI code into a specific directory.
 * Remove react and react-dom from vendor bundle.

[MAAS Lander (maas-lander)]

UNIT TESTS
-b dns-ui--add-record lp:~mpontillo/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: FAILED
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/1876/console
COMMIT: 0bc51c7dacfb0c0a403c6918718914ac07fe94ae

review: Needs Fixing

[Andres Rodriguez (andreserl)]

Just one thing in line I think it needs fixing.

review: Needs Fixing

[Andres Rodriguez (andreserl)]

lgtm!

review: Approve

[Mike Pontillo (mpontillo)]

Combining this branch with the branch it depends on.

review: Approve

Unmerged commits

dfcf3ba... by Mike Pontillo on 2018-03-08

Fix JavaScript tests.

0bc51c7... by Mike Pontillo on 2018-03-08

Fix JavaScript tests.

055af07... by Mike Pontillo on 2018-03-07

Add options drop-down for record type.

22b9d21... by Mike Pontillo on 2018-03-07

Support A and AAAA records indirectly.

661a207... by Mike Pontillo on 2018-03-07

Fix button alignment.

4113f5d... by Mike Pontillo on 2018-03-07

Add initial form for adding DNS records.

45aa878... by Mike Pontillo on 2018-03-07

Add 'Add record' button to domain details page.

9e45ddc... by Mike Pontillo on 2018-03-08

Remove YUI JavaScript file mistakenly added to karma config.

eead99a... by Mike Pontillo on 2018-03-08

Reorganize legacy YUI code. Use built JavaScript and sourcemaps during testing.

diff --git a/src/maasserver/static/js/angular/controllers/domain_details.js b/src/maasserver/static/js/angular/controllers/domain_details.js
index d8e50e5..fb0c4a2 100644
--- a/src/maasserver/static/js/angular/controllers/domain_details.js
+++ b/src/maasserver/static/js/angular/controllers/domain_details.js
@@ -23,6 +23,14 @@ angular.module('MAAS').controller('DomainDetailsController', [
         $scope.domain = null;
         $scope.predicate = "name";
         $scope.reverse = false;
+        $scope.action = null;
+
+        $scope.domainsManager = DomainsManager;
+        $scope.newObject = {};
+
+        $scope.supportedRecordTypes = [
+            'A', 'AAAA', 'CNAME', 'MX', 'NS', 'SRV', 'SSHFP', 'TXT'
+        ];
 
         // Updates the page title.
         function updateTitle() {
@@ -61,18 +69,26 @@ angular.module('MAAS').controller('DomainDetailsController', [
         // Called when the delete domain button is pressed.
         $scope.deleteButton = function() {
             $scope.error = null;
-            $scope.confirmingDelete = true;
+            $scope.actionInProgress = true;
+            $scope.action = 'delete';
+        };
+
+        // Called when the add record button is pressed.
+        $scope.addRecordButton = function() {
+            $scope.error = null;
+            $scope.actionInProgress = true;
+            $scope.action = 'add_record';
         };
 
         // Called when the cancel delete domain button is pressed.
-        $scope.cancelDeleteButton = function() {
-            $scope.confirmingDelete = false;
+        $scope.cancelAction = function() {
+            $scope.actionInProgress = false;
         };
 
         // Called when the confirm delete domain button is pressed.
         $scope.deleteConfirmButton = function() {
             DomainsManager.deleteDomain($scope.domain).then(function() {
-                $scope.confirmingDelete = false;
+                $scope.actionInProgress = false;
                 $location.path("/domains");
             }, function(error) {
                 $scope.error =
diff --git a/src/maasserver/static/js/angular/controllers/tests/test_domain_details.js b/src/maasserver/static/js/angular/controllers/tests/test_domain_details.js
index d1cfcb1..391efea 100644
--- a/src/maasserver/static/js/angular/controllers/tests/test_domain_details.js
+++ b/src/maasserver/static/js/angular/controllers/tests/test_domain_details.js
@@ -186,7 +186,7 @@ describe("DomainDetailsController", function() {
         it("confirms delete", function() {
             var controller = makeControllerResolveSetActiveItem();
             $scope.deleteButton();
-            expect($scope.confirmingDelete).toBe(true);
+            expect($scope.actionInProgress).toBe(true);
         });
 
         it("clears error", function() {
@@ -197,13 +197,13 @@ describe("DomainDetailsController", function() {
         });
     });
 
-    describe("cancelDeleteButton", function() {
+    describe("cancelAction", function() {
 
         it("cancels delete", function() {
             var controller = makeControllerResolveSetActiveItem();
             $scope.deleteButton();
-            $scope.cancelDeleteButton();
-            expect($scope.confirmingDelete).toBe(false);
+            $scope.cancelAction();
+            expect($scope.actionInProgress).toBe(false);
         });
     });
 
diff --git a/src/maasserver/static/js/angular/directives/maas_obj_form.js b/src/maasserver/static/js/angular/directives/maas_obj_form.js
index da907f9..7de2337 100644
--- a/src/maasserver/static/js/angular/directives/maas_obj_form.js
+++ b/src/maasserver/static/js/angular/directives/maas_obj_form.js
@@ -543,10 +543,10 @@ angular.module('MAAS').directive('maasObjField', ['$compile',
 
                 // type and key required.
                 var missingAttrs = [];
-                if(!angular.isString(attrs.type) && attrs.type.length === 0) {
+                if(!angular.isString(attrs.type) || attrs.type.length === 0) {
                     missingAttrs.push("type");
                 }
-                if(!angular.isString(attrs.key) && attrs.key.length === 0) {
+                if(!angular.isString(attrs.key) || attrs.key.length === 0) {
                     missingAttrs.push("key");
                 }
                 if(missingAttrs.length > 0) {
@@ -561,7 +561,8 @@ angular.module('MAAS').directive('maasObjField', ['$compile',
                 // Render the label.
                 var label = attrs.label || attrs.key;
 
-                if(attrs.disableLabel !== "true") {
+                if(attrs.disableLabel !== "true" &&
+                        !(attrs.type === "hidden")) {
                     var labelElement = angular.element('<label/>');
                     labelElement.attr('for', attrs.key);
                     labelElement.text(label);
@@ -830,6 +831,19 @@ angular.module('MAAS').directive('maasObjField', ['$compile',
                                 return val.text;
                             });
                     };
+                } else if(attrs.type === "hidden") {
+                    var hiddenScope = scope.$new();
+                    hiddenScope._toggle = controller.registerField(
+                        attrs.key, scope);
+                    inputElement = angular.element([
+                        '<input type="hidden" name="' + attrs.key + '" ',
+                        'id="' + attrs.key + '" ',
+                        'value="' + attrs.value + '">',
+                        '</input>'
+                    ].join(''));
+                    inputElement = $compile(inputElement)(hiddenScope);
+                    scope.getValue = () => attrs.value;
+                    scope.updateValue = () => null;
                 } else if(attrs.type === "onoffswitch") {
                     var switchScope = scope.$new();
                     switchScope._toggle = controller.registerField(
diff --git a/src/maasserver/static/js/angular/directives/tests/test_maas_obj_form.js b/src/maasserver/static/js/angular/directives/tests/test_maas_obj_form.js
index d37b891..031c881 100644
--- a/src/maasserver/static/js/angular/directives/tests/test_maas_obj_form.js
+++ b/src/maasserver/static/js/angular/directives/tests/test_maas_obj_form.js
@@ -442,6 +442,31 @@ describe("maasObjForm", function() {
         });
     });
 
+    describe("hidden", function() {
+
+        var directive, options;
+        beforeEach(function() {
+            $scope.obj = {
+                key: false
+            };
+            $scope.manager = {};
+            var html = [
+                '<maas-obj-form obj="obj" manager="manager">',
+                    '<maas-obj-field type="hidden" key="key" label="Key" ',
+                        'value="value">',
+                    '</maas-obj-field>',
+                '</maas-obj-form>'
+                ].join('');
+            directive = compileDirective(html);
+        });
+
+        it("creates hidden input field", function() {
+            var onoff = angular.element(directive.find("input"));
+            expect(onoff.length).toBe(1);
+        });
+    });
+
+
     describe("single field", function() {
 
         var directive, updateItemMethod, saveDefer;
diff --git a/src/maasserver/static/js/angular/factories/domains.js b/src/maasserver/static/js/angular/factories/domains.js
index 0d3fdf2..2662db8 100644
--- a/src/maasserver/static/js/angular/factories/domains.js
+++ b/src/maasserver/static/js/angular/factories/domains.js
@@ -42,6 +42,18 @@ angular.module('MAAS').factory(
             return RegionConnection.callMethod("domain.delete", domain);
         };
 
+        // Create a DNS record.
+        DomainsManager.prototype.createDNSRecord = function(record) {
+            if(record.rrtype === 'A' || record.rrtype === 'AAAA') {
+                record.ip_addresses = record.rrdata.split(/[ ,]+/);
+                return RegionConnection.callMethod(
+                    "domain.create_dnsresource", record);
+            } else {
+                return RegionConnection.callMethod(
+                    "domain.create_dnsdata", record);
+            }
+        };
+
         DomainsManager.prototype.getDefaultDomain = function() {
             if(this._items.length === 0) {
                 return null;
diff --git a/src/maasserver/static/js/angular/factories/tests/test_domains.js b/src/maasserver/static/js/angular/factories/tests/test_domains.js
index b740939..7988f01 100644
--- a/src/maasserver/static/js/angular/factories/tests/test_domains.js
+++ b/src/maasserver/static/js/angular/factories/tests/test_domains.js
@@ -14,6 +14,7 @@ describe("DomainsManager", function() {
     var DomainsManager;
     beforeEach(inject(function($injector) {
         DomainsManager = $injector.get("DomainsManager");
+        RegionConnection = $injector.get("RegionConnection");
     }));
 
     // Make a random domain.
@@ -60,6 +61,52 @@ describe("DomainsManager", function() {
         });
     });
 
+    describe("createDNSRecord", function() {
+        it("calls create_dnsresource for A record", function() {
+            spyOn(RegionConnection, "callMethod");
+            var record = {
+                'rrtype': 'A',
+                'rrdata': '192.168.0.1'
+            };
+            DomainsManager.createDNSRecord(record);
+            expect(RegionConnection.callMethod).toHaveBeenCalledWith(
+                "domain.create_dnsresource", record);
+        });
+
+        it("calls create_dnsresource for AAAA record", function() {
+            spyOn(RegionConnection, "callMethod");
+            var record = {
+                'rrtype': 'AAAA',
+                'rrdata': '2001:db8:1'
+            };
+            DomainsManager.createDNSRecord(record);
+            expect(RegionConnection.callMethod).toHaveBeenCalledWith(
+                "domain.create_dnsresource", record);
+        });
+
+        it("converts rrdata into list for A and AAAA", function() {
+            spyOn(RegionConnection, "callMethod");
+            var record = {
+                'rrtype': 'AAAA',
+                'rrdata': '2001:db8::1, 10.0.0.1 127.0.0.1'
+            };
+            DomainsManager.createDNSRecord(record);
+            expect(record.ip_addresses).toEqual([
+                '2001:db8::1', '10.0.0.1', '127.0.0.1'
+            ]);
+        });
+
+        it("calls create_dnsdata for other types", function() {
+            spyOn(RegionConnection, "callMethod");
+            var record = {
+                'rrtype': 'SRV'
+            };
+            DomainsManager.createDNSRecord(record);
+            expect(RegionConnection.callMethod).toHaveBeenCalledWith(
+                "domain.create_dnsdata", record);
+        });
+    });
+
     describe("getDomainByName", function() {
         it("returns null when no domains", function() {
             expect(DomainsManager.getDomainByName('meh')).toBe(null);
diff --git a/src/maasserver/static/partials/domain-details.html b/src/maasserver/static/partials/domain-details.html
index 451a203..31343c0 100644
--- a/src/maasserver/static/partials/domain-details.html
+++ b/src/maasserver/static/partials/domain-details.html
@@ -13,14 +13,17 @@
             </p>
         </div>
         <div class="col-4">
-            <div class="page-header__controls ng-hide" data-ng-show="isSuperUser() && !isDefaultDomain() && !loading">
+            <div class="page-header__controls ng-hide" data-ng-show="isSuperUser() && !loading">
                 <button class="p-button--negative"
                     data-ng-click="deleteButton()"
-                    data-ng-hide="confirmingDelete">Delete domain</button>
+                    data-ng-hide="actionInProgress || isDefaultDomain()">Delete domain</button>
+                <button class="p-button"
+                        data-ng-click="addRecordButton()"
+                        data-ng-hide="actionInProgress">Add record</button>
             </div>
         </div>
     </div>
-    <div data-ng-if="confirmingDelete">
+    <div data-ng-if="actionInProgress && action === 'delete'">
         <div class="row u-no-margin--top ng-hide" data-ng-hide="canBeDeleted()">
             <hr />
             <div class="row">
@@ -30,7 +33,7 @@
                     </p>
                 </div>
                 <div class="col-4 u-align--right">
-                    <button class="p-button--base" type="button" data-ng-click="cancelDeleteButton()">Cancel</button>
+                    <button class="p-button--base" type="button" data-ng-click="cancelAction()">Cancel</button>
                 </div>
             </div>
         </div>
@@ -43,7 +46,7 @@
                     </p>
                 </div>
                 <div class="col-4 u-align--right">
-                    <button class="p-button--base" type="button" data-ng-click="cancelDeleteButton()">Cancel</button>
+                    <button class="p-button--base" type="button" data-ng-click="cancelAction()">Cancel</button>
                     <button class="p-button--negative" data-ng-click="deleteConfirmButton()">Delete domain</button>
                 </div>
             </div>
@@ -57,12 +60,51 @@
                     </p>
                 </div>
                 <div class="col-4 u-align--right">
-                    <button class="p-button--base" type="button" data-ng-click="cancelDeleteButton()">Cancel</button>
+                    <button class="p-button--base" type="button" data-ng-click="cancelAction()">Cancel</button>
                     <button class="p-button--neutral" data-ng-click="deleteConfirmButton()">Retry</button>
                 </div>
             </div>
         </div>
     </div>
+    <div data-ng-if="actionInProgress && action === 'add_record'">
+        <maas-obj-form obj="newObject" manager="domainsManager" manager-method="createDNSRecord" class="p-form--stacked"
+            table-form="true" save-on-blur="false" after-save="cancelAction">
+            <!-- pre-process="actionDNSRecordPreSave" -->
+            <section class="row">
+              <div class="col-6">
+                <maas-obj-field
+                    subtle="false" type="text" key="name" label="Name" placeholder="Name"
+                    label-width="two" input-width="three"></maas-obj-field>
+                <maas-obj-field
+                    subtle="false" type="options" key="rrtype" label="Type"
+                    options="type as type for type in supportedRecordTypes"
+                    label-width="two" input-width="three"></maas-obj-field>
+              </div>
+              <div class="col-6">
+                <maas-obj-field
+                    subtle="false" type="text" key="rrdata" label="Data"
+                    placeholder="Data"
+                    label-width="two" input-width="three"></maas-obj-field>
+                <maas-obj-field
+                    subtle="false" type="text" key="ttl" label="TTL"
+                    placeholder="TTL in seconds (optional)"
+                    label-width="two" input-width="three"></maas-obj-field>
+                <maas-obj-field type="hidden" key="domain" value="{$ domain.id $}" />
+              </div>
+            </section>
+            <section class="row">
+                <div class="col-8">
+                    <maas-obj-errors class="page-header__message page-header__message--error"></maas-obj-errors>
+                </div>
+                <div class="col-4">
+                    <div class="u-align--right">
+                        <button class="p-button" data-ng-click="cancelAction()">Cancel</button>
+                        <button class="p-button--positive" maas-obj-save>Add record</button>
+                    </div>
+                </div>
+            </div>
+        </maas-obj-form>
+    </div>
 </header>
 <div class="p-strip" data-ng-show="!loading">
     <section class="row">