Merge ~bjornt/maas:peer-proxy-ui into maas:master

[Björn Tillenius]

Change the proxy settings UI to enable configuring a peer proxy.

The network part of the settings page was split into "proxy", "ntp", and "dns", since it was getting too big.

The UI for setting proxy uses angular, so that the widget gets a bit more dynamic and shows the field for proxy URL only when needed. It still renders the required input fields so that the django form still is used to update the proxy settings. Converting it fully to angular was too much work.

Note that the single Javascript test I added is disabled. I couldn't get the tests to work. I'm proposing this for merge anyway, so that the rest of the code can be reviewed, and for someone else to figure out how to get the Javascript tests to work.

The problem I had with the Javascript tests is that the scope doesn't seem to be connected to the template. Inside the template, all scope variables are empty for some reason.

Note also that the UI needs some love to make it look nicer. I wanted to get some general feedback fore spending time on that, though.

[Lee Trager (ltrager)]

I really like splitting NTP and DNS into different sections, it makes the page much easier to read. I think we may want to use a drop down to select the proxy mode. The text field would be disabled for don't use and built-in. I'd ask Maria from design this before reworking incase I'm wrong.

I poked around and can't figure out why MAAS.templates is currently broken and wasn't able to come up with anything, Blake might know.

[Andres Rodriguez (andreserl)]

Maria's design and preference is what we have, but I'll talk to her
tomorrow!

On Fri, Jul 21, 2017 at 1:45 AM Lee Trager <email address hidden> wrote:

> I really like splitting NTP and DNS into different sections, it makes the
> page much easier to read. I think we may want to use a drop down to select
> the proxy mode. The text field would be disabled for don't use and
> built-in. I'd ask Maria from design this before reworking incase I'm wrong.
>
> I poked around and can't figure out why MAAS.templates is currently broken
> and wasn't able to come up with anything, Blake might know.
>
> Diff comments:
>
> > diff --git
> a/src/maasserver/static/js/angular/directives/proxy_settings.js
> b/src/maasserver/static/js/angular/directives/proxy_settings.js
> > new file mode 100644
> > index 0000000..0850058
> > --- /dev/null
> > +++ b/src/maasserver/static/js/angular/directives/proxy_settings.js
> > @@ -0,0 +1,43 @@
> > +/* Copyright 2018 Canonical Ltd. This software is licensed under the
>
> Pulling code from the future? ;)
>
> > + * GNU Affero General Public License version 3 (see the file LICENSE).
> > + *
> > + * Proxy settings directive.
> > +*/
> > +
> > +angular.module('MAAS').directive('maasProxySettings', [
> > + '$sce', 'ConfigsManager', 'ManagerHelperService', 'JSONService',
> > + function($sce, ConfigsManager, ManagerHelperService, JSONService) {
> > + return {
> > + restrict: "E",
> > + scope: {},
> > + templateUrl: 'static/partials/proxy-settings.html',
> > + controller: function($scope, $rootScope, $element,
> $document) {
> > + $scope.loading = true;
> > + $scope.configManager = ConfigsManager;
> > + var managers = [ConfigsManager];
> > + ManagerHelperService.loadManagers(
> > + $scope, managers).then(function() {
> > + $scope.loading = false;
> > + $scope.httpProxy = ConfigsManager.getItemFromList(
> > + "http_proxy");
> > + $scope.enableHttpProxy =
> ConfigsManager.getItemFromList(
> > + "enable_http_proxy");
> > + $scope.usePeerProxy =
> ConfigsManager.getItemFromList(
> > + "use_peer_proxy");
> > + if ($scope.enableHttpProxy.value) {
> > + if ($scope.httpProxy.value) {
> > + if ($scope.usePeerProxy.value) {
> > + $scope.proxy_type = "peer-proxy";
> > + } else {
> > + $scope.proxy_type = "external-proxy";
> > + }
> > + } else {
> > + $scope.proxy_type = "builtin-proxy";
> > + }
> > + } else {
> > + $scope.proxy_type = "no-proxy";
> > + }
> > + });
> > + }
> > + };
> > + }]);
> > diff --git
> a/src/maasserver/static/js/angular/directives/tests/test_proxy_settings.js
> b/src/maasserver/static/js/angula...

[Blake Rouse (blake-rouse)]

Looks like your using "{{ }}" in the angular directives in the HTML. I am very surprised that it works, since we set the template tag parser differently in MAAS so it works with Django. "{{ }}" is also used by Django, so we change it to "{$ $}".

@Lee - The issue is that you need the new dependency. So if you do "make clean && make" you would get the new dependency.

review: Needs Fixing

[Blake Rouse (blake-rouse)]

Also looks like you have debugger statement in JS test.

./src/maasserver/static/js/angular/directives/tests/test_proxy_settings.js
      62: Unexpected 'debugger'.
      62: Line contains a call to debugger.
Makefile:336: recipe for target 'lint-js' failed
make: *** [lint-js] Error 123

review: Needs Fixing

[Andres Rodriguez (andreserl)]

A few inline fixes wrt wording.

review: Needs Fixing

[Björn Tillenius (bjornt)]

> Looks like your using "{{ }}" in the angular directives in the HTML. I am very
> surprised that it works, since we set the template tag parser differently in
> MAAS so it works with Django. "{{ }}" is also used by Django, so we change it
> to "{$ $}".
>
> @Lee - The issue is that you need the new dependency. So if you do "make clean
> && make" you would get the new dependency.

Oh. Yeah, it seems to work with {{ }} as well, but I've changed it to {$ $} now. I was hoping that it would be the cause for the tests not working, but I still can't get the tests to work.

[Björn Tillenius (bjornt)]

> Also looks like you have debugger statement in JS test.
>
> ./src/maasserver/static/js/angular/directives/tests/test_proxy_settings.js
> 62: Unexpected 'debugger'.
> 62: Line contains a call to debugger.
> Makefile:336: recipe for target 'lint-js' failed
> make: *** [lint-js] Error 123

Fixed. I tried to debug the tests, but had no luck doing so.

[Björn Tillenius (bjornt)]

I addressed all the inlines comments. Will work on adding more Javascript tests, since Blake provided a patch to get the tests working.

[Björn Tillenius (bjornt)]

I've pushed the Javascript tests now, so it's ready for re-review.

[Blake Rouse (blake-rouse)]

Looks good other then the "{{}}" which should be fixed before landing this.

review: Approve

[Björn Tillenius (bjornt)]

I replaced {{ }} with {$ $}. I also addressed the review comments from design as well.

[MAAS Lander (maas-lander)]

LANDING
-b peer-proxy-ui lp:~bjornt/maas into -b master lp:~maas-committers/maas

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

4b3a4a0... by Björn Tillenius on 2017-07-27

Format imports.

diff --git a/Makefile b/Makefile
index 488fa82..9bbab61 100644
--- a/Makefile
+++ b/Makefile
@@ -187,6 +187,7 @@ define karma-deps
   karma-opera-launcher@0.3.0
   karma-phantomjs-launcher@0.2.3
   karma-failed-reporter@0.0.3
+  karma-ng-html2js-preprocessor@1.0.0
   phantomjs@2.1.7
 endef
 
diff --git a/src/maasserver/forms/__init__.py b/src/maasserver/forms/__init__.py
index a7314d0..35832d6 100644
--- a/src/maasserver/forms/__init__.py
+++ b/src/maasserver/forms/__init__.py
@@ -1418,12 +1418,21 @@ class MAASForm(ConfigForm):
     enable_analytics = get_config_field('enable_analytics')
 
 
-class NetworkForm(ConfigForm):
-    """Settings page, Network section."""
+class ProxyForm(ConfigForm):
+    """Settings page, Proxy section."""
     enable_http_proxy = get_config_field('enable_http_proxy')
+    use_peer_proxy = get_config_field('use_peer_proxy')
     http_proxy = get_config_field('http_proxy')
+
+
+class DNSForm(ConfigForm):
+    """Settings page, DNS section."""
     upstream_dns = get_config_field('upstream_dns')
     dnssec_validation = get_config_field('dnssec_validation')
+
+
+class NTPForm(ConfigForm):
+    """Settings page, NTP section."""
     ntp_servers = get_config_field('ntp_servers')
     ntp_external_only = get_config_field('ntp_external_only')
 
diff --git a/src/maasserver/static/js/angular/directives/proxy_settings.js b/src/maasserver/static/js/angular/directives/proxy_settings.js
 new file mode 100644
index 0000000..3e97777
--- /dev/null
+++ b/src/maasserver/static/js/angular/directives/proxy_settings.js
@@ -0,0 +1,41 @@
+/* Copyright 2017 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Proxy settings directive.
+*/
+
+angular.module('MAAS').directive('maasProxySettings', [
+    '$sce', 'ConfigsManager', 'ManagerHelperService', 'JSONService',
+    function($sce, ConfigsManager, ManagerHelperService, JSONService) {
+        return {
+            restrict: "E",
+            scope: {},
+            templateUrl: 'static/partials/proxy-settings.html',
+            controller: function($scope, $rootScope, $element, $document) {
+                $scope.loading = true;
+                ManagerHelperService.loadManager(
+                    $scope, ConfigsManager).then(function() {
+                    $scope.loading = false;
+                    $scope.httpProxy = ConfigsManager.getItemFromList(
+                        "http_proxy");
+                    $scope.enableHttpProxy = ConfigsManager.getItemFromList(
+                        "enable_http_proxy");
+                    $scope.usePeerProxy = ConfigsManager.getItemFromList(
+                        "use_peer_proxy");
+                    if ($scope.enableHttpProxy.value) {
+                        if ($scope.httpProxy.value) {
+                            if ($scope.usePeerProxy.value) {
+                                $scope.proxy_type = "peer-proxy";
+                            } else {
+                                $scope.proxy_type = "external-proxy";
+                            }
+                        } else {
+                            $scope.proxy_type = "builtin-proxy";
+                        }
+                    } else {
+                        $scope.proxy_type = "no-proxy";
+                    }
+                });
+            }
+        };
+    }]);
diff --git a/src/maasserver/static/js/angular/directives/tests/test_proxy_settings.js b/src/maasserver/static/js/angular/directives/tests/test_proxy_settings.js
 new file mode 100644
index 0000000..ce06777
--- /dev/null
+++ b/src/maasserver/static/js/angular/directives/tests/test_proxy_settings.js
@@ -0,0 +1,190 @@
+/* Copyright 2017 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Unit tests for MAAS proxy settings directive.
+ */
+
+describe("maasProxySettings", function() {
+
+    // Load the MAAS module.
+    beforeEach(module("MAAS"));
+    // Make the templates available.
+    beforeEach(module("MAAS.templates"));
+
+    // Get required angular pieces and create a new scope before each test.
+    var $scope, $compile, $q, ConfigsManager, ManagerHelperService;
+    beforeEach(inject(function($rootScope, $injector) {
+        $scope = $rootScope.$new();
+        $compile = $injector.get("$compile");
+        $q = $injector.get("$q");
+        ConfigsManager = $injector.get("ConfigsManager");
+        ManagerHelperService = $injector.get("ManagerHelperService");
+    }));
+
+    // Create the config options.
+    var httpProxy, enableHttpProxy, usePeerProxy;
+    beforeEach(function() {
+        httpProxy = {
+          name: 'http_proxy',
+          value: ''
+        };
+        enableHttpProxy = {
+            name: 'enable_http_proxy',
+            value: true
+        };
+        usePeerProxy = {
+            name: 'use_peer_proxy',
+            value: false
+        };
+        ConfigsManager._items = [httpProxy, enableHttpProxy, usePeerProxy];
+    });
+
+    // Return the compiled directive.
+    function compileDirective() {
+        var loadManagerDefer = $q.defer();
+        spyOn(ManagerHelperService, "loadManager").and.returnValue(
+          loadManagerDefer.promise);
+
+        var html = "<div><maas-proxy-settings></maas-proxy-settings></div>";
+        var directive = $compile(html)($scope);
+        $scope.$digest();
+        loadManagerDefer.resolve();
+        $scope.$digest();
+
+        return angular.element(
+            directive.find("maas-proxy-settings"));
+    }
+
+    it("no-proxy without http proxy", function() {
+        enableHttpProxy.value = false;
+        usePeerProxy.value = false;
+        httpProxy.value = '';
+        var directive = compileDirective(
+            '<maas-proxy-settings></maas-proxy-settings>');
+        var scope = directive.isolateScope();
+        var enableProxyField = angular.element(directive.find(
+            "#id_proxy-enable_http_proxy"));
+        var httpProxyField = angular.element(directive.find(
+            "#id_proxy-http_proxy"));
+        var usePeerProxyField = angular.element(directive.find(
+            "#id_proxy-use_peer_proxy"));
+        expect(scope.proxy_type).toBe("no-proxy");
+        expect(enableProxyField.attr("value")).toBe("False");
+        expect(httpProxyField.attr("value")).toBe(undefined);
+        expect(usePeerProxyField.attr("value")).toBe("False");
+    });
+
+    it("no-proxy with http_proxy set", function() {
+        enableHttpProxy.value = false;
+        usePeerProxy.value = false;
+        httpProxy.value = 'http://proxy.example.com/';
+        var directive = compileDirective(
+            '<maas-proxy-settings></maas-proxy-settings>');
+        var scope = directive.isolateScope();
+        var enableProxyField = angular.element(directive.find(
+            "#id_proxy-enable_http_proxy"));
+        var httpProxyField = angular.element(directive.find(
+            "#id_proxy-http_proxy"));
+        var usePeerProxyField = angular.element(directive.find(
+            "#id_proxy-use_peer_proxy"));
+        expect(scope.proxy_type).toBe("no-proxy");
+        expect(enableProxyField.attr("value")).toBe("False");
+        expect(httpProxyField.attr("value")).toBe(undefined);
+        expect(usePeerProxyField.attr("value")).toBe("False");
+    });
+
+    it("no-proxy with use_peer_proxy set", function() {
+        enableHttpProxy.value = false;
+        usePeerProxy.value = true;
+        httpProxy.value = 'http://peer-proxy.example.com/';
+        var directive = compileDirective(
+            '<maas-proxy-settings></maas-proxy-settings>');
+        var scope = directive.isolateScope();
+        var enableProxyField = angular.element(directive.find(
+            "#id_proxy-enable_http_proxy"));
+        var httpProxyField = angular.element(directive.find(
+            "#id_proxy-http_proxy"));
+        var usePeerProxyField = angular.element(directive.find(
+            "#id_proxy-use_peer_proxy"));
+        expect(scope.proxy_type).toBe("no-proxy");
+        expect(enableProxyField.attr("value")).toBe("False");
+        expect(httpProxyField.attr("value")).toBe(undefined);
+        expect(usePeerProxyField.attr("value")).toBe("False");
+    });
+
+    it("builtin-proxy", function() {
+        enableHttpProxy.value = true;
+        usePeerProxy.value = false;
+        httpProxy.value = '';
+        var directive = compileDirective(
+            '<maas-proxy-settings></maas-proxy-settings>');
+        var scope = directive.isolateScope();
+        var enableProxyField = angular.element(directive.find(
+            "#id_proxy-enable_http_proxy"));
+        var httpProxyField = angular.element(directive.find(
+            "#id_proxy-http_proxy"));
+        var usePeerProxyField = angular.element(directive.find(
+            "#id_proxy-use_peer_proxy"));
+        expect(scope.proxy_type).toBe("builtin-proxy");
+        expect(enableProxyField.attr("value")).toBe("True");
+        expect(httpProxyField.attr("value")).toBe(undefined);
+        expect(usePeerProxyField.attr("value")).toBe("False");
+    });
+
+    it("builtin-proxy with use_peer_proxy set", function() {
+        enableHttpProxy.value = true;
+        usePeerProxy.value = true;
+        httpProxy.value = '';
+        var directive = compileDirective(
+            '<maas-proxy-settings></maas-proxy-settings>');
+        var scope = directive.isolateScope();
+        var enableProxyField = angular.element(directive.find(
+            "#id_proxy-enable_http_proxy"));
+        var httpProxyField = angular.element(directive.find(
+            "#id_proxy-http_proxy"));
+        var usePeerProxyField = angular.element(directive.find(
+            "#id_proxy-use_peer_proxy"));
+        expect(scope.proxy_type).toBe("builtin-proxy");
+        expect(enableProxyField.attr("value")).toBe("True");
+        expect(httpProxyField.attr("value")).toBe(undefined);
+        expect(usePeerProxyField.attr("value")).toBe("False");
+    });
+
+    it("external-proxy set", function() {
+        enableHttpProxy.value = true;
+        usePeerProxy.value = false;
+        httpProxy.value = 'http://proxy.example.com/';
+        var directive = compileDirective(
+            '<maas-proxy-settings></maas-proxy-settings>');
+        var scope = directive.isolateScope();
+        var enableProxyField = angular.element(directive.find(
+            "#id_proxy-enable_http_proxy"));
+        var httpProxyField = angular.element(directive.find(
+            "#id_proxy-http_proxy"));
+        var usePeerProxyField = angular.element(directive.find(
+            "#id_proxy-use_peer_proxy"));
+        expect(scope.proxy_type).toBe("external-proxy");
+        expect(enableProxyField.attr("value")).toBe("True");
+        expect(httpProxyField.attr("value")).toBe("http://proxy.example.com/");
+        expect(usePeerProxyField.attr("value")).toBe("False");
+    });
+
+    it("peer-proxy set", function() {
+        enableHttpProxy.value = true;
+        usePeerProxy.value = true;
+        httpProxy.value = 'http://proxy.example.com/';
+        var directive = compileDirective(
+            '<maas-proxy-settings></maas-proxy-settings>');
+        var scope = directive.isolateScope();
+        var enableProxyField = angular.element(directive.find(
+            "#id_proxy-enable_http_proxy"));
+        var httpProxyField = angular.element(directive.find(
+            "#id_proxy-http_proxy"));
+        var usePeerProxyField = angular.element(directive.find(
+            "#id_proxy-use_peer_proxy"));
+        expect(scope.proxy_type).toBe("peer-proxy");
+        expect(enableProxyField.attr("value")).toBe("True");
+        expect(httpProxyField.attr("value")).toBe("http://proxy.example.com/");
+        expect(usePeerProxyField.attr("value")).toBe("True");
+    });
+});
diff --git a/src/maasserver/static/partials/proxy-settings.html b/src/maasserver/static/partials/proxy-settings.html
 new file mode 100644
index 0000000..a3ee21b
--- /dev/null
+++ b/src/maasserver/static/partials/proxy-settings.html
@@ -0,0 +1,48 @@
+<li class="help-msg">
+<div>
+  <label>HTTP proxy used by MAAS to download images, and by provisioned machines for APT packages.</label>
+</div>
+<div>
+  <input type="radio" ng-model="proxy_type" name="maas_proxy"
+         id="maas_no_proxy" value="no-proxy">
+  <label for="maas_no_proxy">Don't use a proxy</label>
+</div>
+<div>
+  <input type="radio" ng-model="proxy_type" name="maas_proxy"
+         id="maas_builtin_proxy" value="builtin-proxy">
+  <label for="maas_builtin_proxy">MAAS Built-in</label>
+</div>
+<div>
+  <input type="radio" ng-model="proxy_type" name="maas_proxy" id="maas_external_proxy" value="external-proxy">
+  <label for="maas_external_proxy">External</label>
+  <input type="url" ng-if="proxy_type == 'external-proxy'"
+         id="id_proxy-http_proxy" name="proxy-http_proxy"
+         ng-model="httpProxy.value" value="{$ httpProxy.value $}">
+  <span ng-if="proxy_type == 'external-proxy'" class="help u-display--block">
+    <small>
+    Enter the external proxy URL MAAS will use to download images and
+    machines to download APT packages.
+    </small>
+  </span>
+</div>
+<div>
+  <input type="radio" ng-model="proxy_type" name="maas_proxy" id="maas_peer_proxy" value="peer-proxy">
+  <label for="maas_peer_proxy">Peer</label>
+  <input type="url" ng-if="proxy_type == 'peer-proxy'"
+         id="id_proxy-http_proxy" name="proxy-http_proxy"
+         ng-model="httpProxy.value" value="{$ httpProxy.value $}">
+  <span ng-if="proxy_type == 'peer-proxy'" class="help u-display--block">
+    <small>
+    Enter the external proxy URL that the MAAS built-in proxy will use
+    as an upstream cache peer. Machines will be configured to use MAAS'
+    built-in proxy to download APT packages.
+    </small>
+  </span>
+</div>
+<input type="hidden" id="id_proxy-enable_http_proxy"
+       name="proxy-enable_http_proxy"
+       value="{$ proxy_type == 'no-proxy' ? 'False' : 'True' $}" >
+<input type="hidden" id="id_proxy-use_peer_proxy"
+       name="proxy-use_peer_proxy"
+       value="{$ proxy_type == 'peer-proxy' ? 'True' : 'False' $}" >
+</li>
diff --git a/src/maasserver/templates/maasserver/settings.html b/src/maasserver/templates/maasserver/settings.html
index 9c82b3d..2f87f22 100644
--- a/src/maasserver/templates/maasserver/settings.html
+++ b/src/maasserver/templates/maasserver/settings.html
@@ -5,6 +5,8 @@
 {% block title %}Settings{% endblock %}
 {% block page-title %}Settings{% endblock %}
 
+{% block ng-app %}data-ng-app="MAAS"{% endblock %}
+
 {% block head %}
 {% endblock %}
 
@@ -157,14 +159,46 @@
         </div>
     </div>
     <div class="eight-col u-border--bottom">
-        <div id="network" class="eight-col">
-            <h2>Network Configuration</h2>
+        <div id="proxy" class="eight-col">
+            <h2>Proxy</h2>
+            <span class="u-text--loading" data-ng-if="loading"><i class="icon icon--loading u-animation--spin"></i> Loading...</span>
+
+            <form action="{% url 'settings' %}" method="post">
+                {% csrf_token %}
+                <ul>
+                    <maas-proxy-settings data-ng-if="!loading"></maas-proxy-settings>
+                </ul>
+                <input type="hidden" name="proxy_submit" value="1" />
+                <button type="submit" class="button--positive button--inline u-float--right">Save</button>
+            </form>
+        </div>
+    </div>
+    <div class="eight-col u-border--bottom">
+        <div id="dns" class="eight-col">
+            <h2>DNS</h2>
+            <form action="{% url 'settings' %}" method="post">
+                {% csrf_token %}
+                <ul>
+                    {% for field in dns_form %}
+                        {% include "maasserver/form_field.html" %}
+                    {% endfor %}
+                </ul>
+                <input type="hidden" name="dns_submit" value="1" />
+                <button type="submit" class="button--positive button--inline u-float--right">Save</button>
+            </form>
+        </div>
+    </div>
+    <div class="eight-col u-border--bottom">
+        <div id="ntp" class="eight-col">
+            <h2>NTP</h2>
             <form action="{% url 'settings' %}" method="post">
                 {% csrf_token %}
                 <ul>
-                    {% for field in network_form %} {% include "maasserver/form_field.html" %} {% endfor %}
+                    {% for field in ntp_form %}
+                        {% include "maasserver/form_field.html" %}
+                    {% endfor %}
                 </ul>
-                <input type="hidden" name="network_submit" value="1" />
+                <input type="hidden" name="ntp_submit" value="1" />
                 <button type="submit" class="button--positive button--inline u-float--right">Save</button>
             </form>
         </div>
diff --git a/src/maasserver/views/combo.py b/src/maasserver/views/combo.py
index b1d6615..55e2d2d 100644
--- a/src/maasserver/views/combo.py
+++ b/src/maasserver/views/combo.py
@@ -119,6 +119,7 @@ MERGE_VIEWS = {
             "js/angular/directives/placeholder.js",
             "js/angular/directives/pod_parameters.js",
             "js/angular/directives/power_parameters.js",
+            "js/angular/directives/proxy_settings.js",
             "js/angular/directives/release_name.js",
             "js/angular/directives/release_options.js",
             "js/angular/directives/script_select.js",
diff --git a/src/maasserver/views/settings.py b/src/maasserver/views/settings.py
index 2a410fa..6549d34 100644
--- a/src/maasserver/views/settings.py
+++ b/src/maasserver/views/settings.py
@@ -33,12 +33,14 @@ from maasserver.exceptions import CannotDeleteUserException
 from maasserver.forms import (
     CommissioningForm,
     DeployForm,
+    DNSForm,
     EditUserForm,
     GlobalKernelOptsForm,
     MAASForm,
     NetworkDiscoveryForm,
-    NetworkForm,
     NewUserCreationForm,
+    NTPForm,
+    ProxyForm,
     StorageSettingsForm,
     ThirdPartyDriversForm,
     UbuntuForm,
@@ -211,8 +213,22 @@ def settings(request):
         return response
 
     # Process the network form.
-    network_form, response = process_form(
-        request, NetworkForm, reverse('settings'), 'network',
+    proxy_form, response = process_form(
+        request, ProxyForm, reverse('settings'), 'proxy',
+        "Configuration updated.")
+    if response is not None:
+        return response
+
+    # Process the DNS form.
+    dns_form, response = process_form(
+        request, DNSForm, reverse('settings'), 'dns',
+        "Configuration updated.")
+    if response is not None:
+        return response
+
+    # Process the NTP form.
+    ntp_form, response = process_form(
+        request, NTPForm, reverse('settings'), 'ntp',
         "Configuration updated.")
     if response is not None:
         return response
@@ -279,7 +295,9 @@ def settings(request):
             'show_license_keys': show_license_keys,
             'license_keys': license_keys,
             'maas_form': maas_form,
-            'network_form': network_form,
+            'proxy_form': proxy_form,
+            'dns_form': dns_form,
+            'ntp_form': ntp_form,
             'network_discovery_form': network_discovery_form,
             'third_party_drivers_form': third_party_drivers_form,
             'storage_settings_form': storage_settings_form,
diff --git a/src/maasserver/views/tests/test_settings.py b/src/maasserver/views/tests/test_settings.py
index 1f6a941..c7ba9b0 100644
--- a/src/maasserver/views/tests/test_settings.py
+++ b/src/maasserver/views/tests/test_settings.py
@@ -107,7 +107,7 @@ class SettingsTest(MAASServerTestCase):
         self.assertEqual(
             new_name, Config.objects.get_config('maas_name'))
 
-    def test_settings_network_POST(self):
+    def test_proxy_proxy_POST(self):
         # Disable boot source cache signals.
         self.addCleanup(bootsources.signals.enable)
         bootsources.signals.disable()
@@ -116,13 +116,56 @@ class SettingsTest(MAASServerTestCase):
         response = self.client.post(
             reverse('settings'),
             get_prefixed_form_data(
-                prefix='network',
+                prefix='proxy',
                 data={
                     'http_proxy': new_proxy,
+                    'enable_http_proxy': True,
+                    'use_peer_proxy': True,
                 }))
         self.assertEqual(
             http.client.FOUND, response.status_code, response.content)
         self.assertEqual(new_proxy, Config.objects.get_config('http_proxy'))
+        self.assertTrue(Config.objects.get_config('enable_http_proxy'))
+        self.assertTrue(Config.objects.get_config('use_peer_proxy'))
+
+    def test_settings_dns_POST(self):
+        # Disable boot source cache signals.
+        self.addCleanup(bootsources.signals.enable)
+        bootsources.signals.disable()
+        self.client_log_in(as_admin=True)
+        new_upstream = "8.8.8.8"
+        response = self.client.post(
+            reverse('settings'),
+            get_prefixed_form_data(
+                prefix='dns',
+                data={
+                    'upstream_dns': new_upstream,
+                    'dnssec_validation': 'no',
+                }))
+        self.assertEqual(
+            http.client.FOUND, response.status_code, response.content)
+        self.assertEqual(
+            new_upstream, Config.objects.get_config('upstream_dns'))
+        self.assertEqual('no', Config.objects.get_config('dnssec_validation'))
+
+    def test_settings_ntp_POST(self):
+        # Disable boot source cache signals.
+        self.addCleanup(bootsources.signals.enable)
+        bootsources.signals.disable()
+        self.client_log_in(as_admin=True)
+        new_servers = "ntp.example.com"
+        response = self.client.post(
+            reverse('settings'),
+            get_prefixed_form_data(
+                prefix='ntp',
+                data={
+                    'ntp_servers': new_servers,
+                    'ntp_external_only': True,
+                }))
+        self.assertEqual(
+            http.client.FOUND, response.status_code, response.content)
+        self.assertEqual(new_servers, Config.objects.get_config('ntp_servers'))
+        self.assertTrue(Config.objects.get_config('ntp_external_only'))
 
     def test_settings_commissioning_POST(self):
         self.client_log_in(as_admin=True)
diff --git a/src/maastesting/karma.conf.js b/src/maastesting/karma.conf.js
index 66fe913..33e5f5f 100644
--- a/src/maastesting/karma.conf.js
+++ b/src/maastesting/karma.conf.js
@@ -24,7 +24,8 @@ module.exports = function(config) {
       '../../src/maasserver/static/js/angular/maas.js',
       '../../src/maasserver/static/js/angular/testing/*.js',
       '../../src/maasserver/static/js/angular/*/*.js',
-      '../../src/maasserver/static/js/angular/*/tests/test_*.js'
+      '../../src/maasserver/static/js/angular/*/tests/test_*.js',
+      '../../src/maasserver/static/partials/*.html'
     ],
 
 
@@ -36,8 +37,17 @@ module.exports = function(config) {
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
+        '../../src/maasserver/static/partials/*.html': ['ng-html2js']
     },
 
+    ngHtml2JsPreprocessor: {
+        // If your build process changes the path to your templates,
+        // use stripPrefix and prependPrefix to adjust it.
+        stripPrefix: ".*src/maasserver/",
+
+        // the name of the Angular module to create
+        moduleName: 'MAAS.templates'
+    },
 
     // test results reporter to use
     // possible values: 'dots', 'progress'
@@ -79,7 +89,8 @@ module.exports = function(config) {
       'karma-firefox-launcher',
       'karma-opera-launcher',
       'karma-phantomjs-launcher',
-      'karma-failed-reporter'
+      'karma-failed-reporter',
+      'karma-ng-html2js-preprocessor'
     ]
   });
 };