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

[Blake Rouse]

Add the ability to sort the IP address table on the subnet details page.

[Jeffrey C Jones (trapnine)]

LGTM, might want to move some display strings to a central location, comments below.

review: Approve

[Mike Pontillo (mpontillo)]

Looks really good!

I made a number of comments below; nothing really blocking, but some things to consider and some minor cleanup.

review: Approve

[Blake Rouse (blake-rouse)]

Thanks for the reviews. Addressed all comments.

=== modified file 'src/maasserver/enum.py'
--- src/maasserver/enum.py	2016-04-11 16:23:26 +0000
+++ src/maasserver/enum.py	2016-06-16 14:50:25 +0000
@@ -134,6 +134,8 @@
     REGION_AND_RACK_CONTROLLER = 4
 
 
+# This is copied in static/js/angular/controllers/subnet_details.js. If you
+# update any choices you also need to update the controller.
 NODE_TYPE_CHOICES = (
     (NODE_TYPE.MACHINE, "Machine"),
     (NODE_TYPE.DEVICE, "Device"),
@@ -226,12 +228,14 @@
     DISCOVERED = 6
 
 
+# This is copied in static/js/angular/controllers/subnet_details.js. If you
+# update any choices you also need to update the controller.
 IPADDRESS_TYPE_CHOICES = (
-    (IPADDRESS_TYPE.AUTO, "Auto"),
-    (IPADDRESS_TYPE.STICKY, "Sticky"),
+    (IPADDRESS_TYPE.AUTO, "Automatic"),
+    (IPADDRESS_TYPE.STICKY, "Static"),
     (IPADDRESS_TYPE.USER_RESERVED, "User reserved"),
     (IPADDRESS_TYPE.DHCP, "DHCP"),
-    (IPADDRESS_TYPE.DISCOVERED, "Discovered"),
+    (IPADDRESS_TYPE.DISCOVERED, "Observed"),
     )
 
 
 
=== modified file 'src/maasserver/static/js/angular/controllers/subnet_details.js'
--- src/maasserver/static/js/angular/controllers/subnet_details.js	2016-06-09 17:18:10 +0000
+++ src/maasserver/static/js/angular/controllers/subnet_details.js	2016-06-16 14:50:25 +0000
@@ -8,10 +8,11 @@
     '$scope', '$rootScope', '$routeParams', '$filter', '$location',
     'SubnetsManager', 'IPRangesManager', 'SpacesManager', 'VLANsManager',
     'UsersManager', 'FabricsManager', 'ManagerHelperService', 'ErrorService',
+    'ConverterService',
     function(
         $scope, $rootScope, $routeParams, $filter, $location, SubnetsManager,
         IPRangesManager, SpacesManager, VLANsManager, UsersManager,
-        FabricsManager, ManagerHelperService, ErrorService) {
+        FabricsManager, ManagerHelperService, ErrorService, ConverterService) {
 
         // Set title and page.
         $rootScope.title = "Loading...";
@@ -29,10 +30,29 @@
         $scope.spaces = SpacesManager.getItems();
         $scope.vlans = VLANsManager.getItems();
         $scope.fabrics = FabricsManager.getItems();
+        $scope.reverse = false;
         $scope.newRange = null;
         $scope.editIPRange = null;
         $scope.deleteIPRange = null;
 
+        // Alloc type mapping.
+        var ALLOC_TYPES = {
+            0: 'Automatic',
+            1: 'Static',
+            4: 'User reserved',
+            5: 'DHCP',
+            6: 'Observed'
+        };
+
+        // Node type mapping.
+        var NODE_TYPES = {
+            0: 'Machine',
+            1: 'Device',
+            2: 'Rack controller',
+            3: 'Region controller',
+            4: 'Rack and region controller'
+        };
+
         // Updates the page title.
         function updateTitle() {
             subnet = $scope.subnet;
@@ -44,10 +64,75 @@
             }
         }
 
-        $scope.isSuperUser = function() {
-            return UsersManager.isSuperUser();
-        };
-
+        // Update the IP version of the CIDR.
+        function updateIPVersion() {
+            var ip = $scope.subnet.cidr.split('/')[0];
+            if(ip.indexOf(':') === -1) {
+                $scope.ipVersion = 4;
+            } else {
+                $scope.ipVersion = 6;
+            }
+        }
+
+        // Sort for IP address.
+        $scope.ipSort = function(ipAddress) {
+            if($scope.ipVersion === 4) {
+                return ConverterService.ipv4ToInteger(ipAddress.ip);
+            } else {
+                return ConverterService.ipv6Expand(ipAddress.ip);
+            }
+        };
+
+        // Set default predicate to the ipSort function.
+        $scope.predicate = $scope.ipSort;
+
+        // Return the name of the allocation type.
+        $scope.getAllocType = function(allocType) {
+            var str = ALLOC_TYPES[allocType];
+            if(angular.isString(str)) {
+                return str;
+            } else {
+                return "Unknown";
+            }
+        };
+
+        // Sort based on the name of the allocation type.
+        $scope.allocTypeSort = function(ipAddress) {
+            return $scope.getAllocType(ipAddress.alloc_type);
+        };
+
+        // Return the name of the node type.
+        $scope.getNodeType = function(nodeType) {
+            var str = NODE_TYPES[nodeType];
+            if(angular.isString(str)) {
+                return str;
+            } else {
+                return "Unknown";
+            }
+        };
+
+        // Sort based on the node type string.
+        $scope.nodeTypeSort = function(ipAddress) {
+            return $scope.getNodeType(ipAddress.node_summary.node_type);
+        };
+
+        // Sort based on the owner name.
+        $scope.ownerSort = function(ipAddress) {
+            var owner = ipAddress.user;
+            if(angular.isString(owner) && owner.length > 0) {
+                return owner;
+            } else {
+                return "MAAS";
+            }
+        };
+
+        // Called to change the sort order of the IP table.
+        $scope.sortIPTable = function(predicate) {
+            $scope.predicate = predicate;
+            $scope.reverse = !$scope.reverse;
+        };
+
+        // Return the name of the VLAN.
         $scope.getVLANName = function(vlan) {
            return VLANsManager.getName(vlan);
         };
@@ -179,6 +264,7 @@
             };
             $scope.$watch("subnet.fabric", updateFabric);
             $scope.$watch("subnet.vlan", updateFabric);
+            $scope.$watch("subnet.cidr", updateIPVersion);
         }
 
         // Load all the required managers.
 
=== modified file 'src/maasserver/static/js/angular/controllers/tests/test_subnet_details.js'
--- src/maasserver/static/js/angular/controllers/tests/test_subnet_details.js	2016-06-13 14:21:20 +0000
+++ src/maasserver/static/js/angular/controllers/tests/test_subnet_details.js	2016-06-16 14:50:25 +0000
@@ -72,6 +72,7 @@
     // Load any injected managers and services.
     var SubnetsManager, IPRangesManager, SpacesManager, VLANsManager;
     var FabricsManager, UsersManager, HelperService, ErrorService;
+    var ConverterService;
     beforeEach(inject(function($injector) {
         SubnetsManager = $injector.get("SubnetsManager");
         IPRangesManager = $injector.get("IPRangesManager");
@@ -81,6 +82,7 @@
         UsersManager = $injector.get("UsersManager");
         ManagerHelperService = $injector.get("ManagerHelperService");
         ErrorService = $injector.get("ErrorService");
+        ConverterService = $injector.get("ConverterService");
     }));
 
     var fabric, vlan, space, subnet;
@@ -209,6 +211,158 @@
         expect($rootScope.title).toBe(subnet.cidr + " (" + subnet.name + ")");
     });
 
+    describe("ipSort", function() {
+
+        it("calls ipv4ToInteger when ipVersion == 4", function() {
+            var controller = makeControllerResolveSetActiveItem();
+            $scope.ipVersion = 4;
+            var expected = {};
+            spyOn(ConverterService, "ipv4ToInteger").and.returnValue(expected);
+            var ipAddress = {
+                ip: {}
+            };
+            var observed = $scope.ipSort(ipAddress);
+            expect(ConverterService.ipv4ToInteger).toHaveBeenCalledWith(
+                ipAddress.ip);
+            expect(observed).toBe(expected);
+        });
+
+        it("calls ipv6Expand when ipVersion == 6", function() {
+            var controller = makeControllerResolveSetActiveItem();
+            $scope.ipVersion = 6;
+            var expected = {};
+            spyOn(ConverterService, "ipv6Expand").and.returnValue(expected);
+            var ipAddress = {
+                ip: {}
+            };
+            var observed = $scope.ipSort(ipAddress);
+            expect(ConverterService.ipv6Expand).toHaveBeenCalledWith(
+                ipAddress.ip);
+            expect(observed).toBe(expected);
+        });
+
+        it("is predicate default", function() {
+            var controller = makeControllerResolveSetActiveItem();
+            expect($scope.predicate).toBe($scope.ipSort);
+        });
+    });
+
+    describe("getAllocType", function() {
+
+        var scenarios = {
+            0: 'Automatic',
+            1: 'Static',
+            4: 'User reserved',
+            5: 'DHCP',
+            6: 'Observed',
+            7: 'Unknown'
+        };
+
+        angular.forEach(scenarios, function(expected, allocType) {
+            it("allocType( " + allocType + ") = " + expected, function() {
+                var controller = makeControllerResolveSetActiveItem();
+                expect($scope.getAllocType(allocType)).toBe(expected);
+            });
+        });
+    });
+
+    describe("allocTypeSort", function() {
+
+        it("calls getAllocType", function() {
+            var controller = makeControllerResolveSetActiveItem();
+            var expected = {};
+            spyOn($scope, "getAllocType").and.returnValue(expected);
+            var ipAddress = {
+                alloc_type: {}
+            };
+            var observed = $scope.allocTypeSort(ipAddress);
+            expect($scope.getAllocType).toHaveBeenCalledWith(
+                ipAddress.alloc_type);
+            expect(observed).toBe(expected);
+        });
+    });
+
+    describe("getNodeType", function() {
+
+        var scenarios = {
+            0: 'Machine',
+            1: 'Device',
+            2: 'Rack controller',
+            3: 'Region controller',
+            4: 'Rack and region controller',
+            5: 'Unknown'
+        };
+
+        angular.forEach(scenarios, function(expected, nodeType) {
+            it("nodeType( " + nodeType + ") = " + expected, function() {
+                var controller = makeControllerResolveSetActiveItem();
+                expect($scope.getNodeType(nodeType)).toBe(expected);
+            });
+        });
+    });
+
+    describe("nodeTypeSort", function() {
+
+        it("calls getNodeType", function() {
+            var controller = makeControllerResolveSetActiveItem();
+            var expected = {};
+            spyOn($scope, "getNodeType").and.returnValue(expected);
+            var ipAddress = {
+                node_summary: {
+                    node_type: {}
+                }
+            };
+            var observed = $scope.nodeTypeSort(ipAddress);
+            expect($scope.getNodeType).toHaveBeenCalledWith(
+                ipAddress.node_summary.node_type);
+            expect(observed).toBe(expected);
+        });
+    });
+
+    describe("ownerSort", function() {
+
+        it("returns owner", function() {
+            var controller = makeControllerResolveSetActiveItem();
+            var ipAddress = {
+                user: makeName("owner")
+            };
+            var observed = $scope.ownerSort(ipAddress);
+            expect(observed).toBe(ipAddress.user);
+        });
+
+        it("returns MAAS for empty string", function() {
+            var controller = makeControllerResolveSetActiveItem();
+            var ipAddress = {
+                user: ""
+            };
+            var observed = $scope.ownerSort(ipAddress);
+            expect(observed).toBe("MAAS");
+        });
+
+        it("returns MAAS for null", function() {
+            var controller = makeControllerResolveSetActiveItem();
+            var ipAddress = {
+                user: null
+            };
+            var observed = $scope.ownerSort(ipAddress);
+            expect(observed).toBe("MAAS");
+        });
+    });
+
+    describe("sortIPTable", function() {
+
+        it("sets predicate and inverts reverse", function() {
+            var controller = makeControllerResolveSetActiveItem();
+            $scope.reverse = true;
+            var predicate = {};
+            $scope.sortIPTable(predicate);
+            expect($scope.predicate).toBe(predicate);
+            expect($scope.reverse).toBe(false);
+            $scope.sortIPTable(predicate);
+            expect($scope.reverse).toBe(true);
+        });
+    });
+
     describe("deleteButton", function() {
 
         it("confirms delete", function() {
 
=== modified file 'src/maasserver/static/js/angular/services/converter.js'
--- src/maasserver/static/js/angular/services/converter.js	2016-03-28 13:54:47 +0000
+++ src/maasserver/static/js/angular/services/converter.js	2016-06-16 14:50:25 +0000
@@ -86,4 +86,59 @@
         this.roundByBlockSize = function(bytes, block_size) {
             return block_size * Math.floor(bytes / block_size);
         };
+
+        // Convert string ipv4 address into octets array.
+        this.ipv4ToOctets = function(ipAddress) {
+            var parts = ipAddress.split('.');
+            var octets = [];
+            angular.forEach(parts, function(part) {
+                octets.push(parseInt(part, 10));
+            });
+            return octets;
+        };
+
+        // Convert string ipv4 address into integer.
+        this.ipv4ToInteger = function(ipAddress) {
+            var octets = this.ipv4ToOctets(ipAddress);
+            return (
+                (octets[0] * Math.pow(256,3)) +
+                (octets[1] * Math.pow(256,2)) +
+                (octets[2] * 256) + octets[3]);
+        };
+
+        // Convert ipv6 address to a full ipv6 address, removing the
+        // '::' shortcut and padding each group with zeros.
+        this.ipv6Expand = function(ipAddress) {
+            var i, expandedAddress = ipAddress;
+            if(expandedAddress.indexOf("::") !== -1) {
+                // '::' is present so replace it with the required
+                // number of '0000:' based on its location in the string.
+                var split = ipAddress.split("::");
+                var groups = 0;
+                for(i = 0; i < split.length; i++) {
+                    groups += split[i].split(":").length;
+                }
+                expandedAddress = split[0] + ":";
+                for(i = 0; i < 8 - groups; i++) {
+                    expandedAddress += "0000:";
+                }
+                expandedAddress += split[1];
+            }
+            // Pad the output of each part with zeros.
+            var output = [], parts = expandedAddress.split(":");
+            angular.forEach(parts, function(part) {
+                output.push("0000".substr(part.length) + part);
+            });
+            return output.join(":");
+        };
+
+        // Convert string ipv6 into groups array.
+        this.ipv6ToGroups = function(ipAddress) {
+            var groups = [];
+            var parts = this.ipv6Expand(ipAddress).split(":");
+            angular.forEach(parts, function(part) {
+                groups.push(parseInt(part, 16));
+            });
+            return groups;
+        };
     });
 
=== modified file 'src/maasserver/static/js/angular/services/tests/test_converter.js'
--- src/maasserver/static/js/angular/services/tests/test_converter.js	2016-03-28 13:54:47 +0000
+++ src/maasserver/static/js/angular/services/tests/test_converter.js	2016-06-16 14:50:25 +0000
@@ -201,4 +201,108 @@
                 1024 * 1024 * 1024);
         });
     });
+
+    describe("ipv4ToOctets", function() {
+
+        var scenarios = [
+            {
+                input: "192.168.1.1",
+                output: [192,168,1,1]
+            },
+            {
+                input: "172.16.1.1",
+                output: [172,16,1,1]
+            },
+            {
+                input: "10.1.1.1",
+                output: [10,1,1,1]
+            }
+        ];
+
+        angular.forEach(scenarios, function(scenario) {
+            it("converts: " + scenario.input, function() {
+                var result = ConverterService.ipv4ToOctets(scenario.input);
+                expect(result).toEqual(scenario.output);
+            });
+        });
+    });
+
+    describe("ipv4ToInteger", function() {
+
+        var scenarios = [
+            {
+                input: "192.168.1.1",
+                output: 3232235777
+            },
+            {
+                input: "172.16.1.1",
+                output: 2886729985
+            },
+            {
+                input: "10.1.1.1",
+                output: 167837953
+            }
+        ];
+
+        angular.forEach(scenarios, function(scenario) {
+            it("converts: " + scenario.input, function() {
+                var result = ConverterService.ipv4ToInteger(scenario.input);
+                expect(result).toEqual(scenario.output);
+            });
+        });
+    });
+
+    describe("ipv6Expand", function() {
+
+        var scenarios = [
+            {
+                input: "::1",
+                output: "0000:0000:0000:0000:0000:0000:0000:0001"
+            },
+            {
+                input: "2001:db8::1",
+                output: "2001:0db8:0000:0000:0000:0000:0000:0001"
+            },
+            {
+                input: "2001:db8:1::1",
+                output: "2001:0db8:0001:0000:0000:0000:0000:0001"
+            },
+            {
+                input: "2001:db8::",
+                output: "2001:0db8:0000:0000:0000:0000:0000:0000"
+            }
+        ];
+
+        angular.forEach(scenarios, function(scenario) {
+            it("expands: " + scenario.input, function() {
+                var result = ConverterService.ipv6Expand(scenario.input);
+                expect(result).toBe(scenario.output);
+            });
+        });
+    });
+
+    describe("ipv6ToGroups", function() {
+
+        var scenarios = [
+            {
+                input: "::1",
+                output: [0, 0, 0, 0, 0, 0, 0, 1]
+            },
+            {
+                input: "2001:db8::1",
+                output: [8193, 3512, 0, 0, 0, 0, 0, 1]
+            },
+            {
+                input: "2001:db8:1::1",
+                output: [8193, 3512, 1, 0, 0, 0, 0, 1]
+            }
+        ];
+
+        angular.forEach(scenarios, function(scenario) {
+            it("converts: " + scenario.input, function() {
+                var result = ConverterService.ipv6ToGroups(scenario.input);
+                expect(result).toEqual(scenario.output);
+            });
+        });
+    });
 });
 
=== modified file 'src/maasserver/static/js/angular/services/validation.js'
--- src/maasserver/static/js/angular/services/validation.js	2016-03-28 13:54:47 +0000
+++ src/maasserver/static/js/angular/services/validation.js	2016-06-16 14:50:25 +0000
@@ -6,7 +6,8 @@
  * Used by controllers to validate user inputs.
  */
 
-angular.module('MAAS').service('ValidationService', function() {
+angular.module('MAAS').service('ValidationService', [
+    'ConverterService', function(ConverterService) {
 
         // Pattern that matches a domainname.
         // XXX 2016-02-24 lamont: This also matches "example.com.",
@@ -50,47 +51,6 @@
             return true;
         }
 
-        // Convert string ipv4 address into octets array.
-        function ipv4ToOctets(ipAddress) {
-            var parts = ipAddress.split('.');
-            var octets = [];
-            angular.forEach(parts, function(part) {
-                octets.push(parseInt(part, 10));
-            });
-            return octets;
-        }
-
-        // Convert ipv6 address to a full ipv6 address, removing the
-        // '::' shortcut.
-        function ipv6Expand(ipAddress) {
-            var i, expandedAddress = ipAddress;
-            if(expandedAddress.indexOf("::") !== -1) {
-                // '::' is present so replace it with the required
-                // number of '0000:' based on its location in the string.
-                var split = ipAddress.split("::");
-                var groups = 0;
-                for(i = 0; i < split.length; i++) {
-                    groups += split[i].split(":").length;
-                }
-                expandedAddress = split[0] + ":";
-                for(i = 0; i < 8 - groups; i++) {
-                    expandedAddress += "0000:";
-                }
-                expandedAddress += split[1];
-            }
-            return expandedAddress;
-        }
-
-        // Convert string ipv6 into octets array.
-        function ipv6ToOctets(ipAddress) {
-            var octets = [];
-            var parts = ipv6Expand(ipAddress).split(":");
-            angular.forEach(parts, function(part) {
-                octets.push(parseInt(part, 16));
-            });
-            return octets;
-        }
-
         // Return true if the domainname is valid, false otherwise.
         this.validateDomainName = function(domainname) {
             // Invalid if the domain is not a string, empty, or more than
@@ -140,8 +100,8 @@
                 ipAddress.indexOf(':') === -1) {
                 return false;
             }
-            var expandedAddress = ipv6Expand(ipAddress);
-            var octets = ipv6ToOctets(expandedAddress);
+            var expandedAddress = ConverterService.ipv6Expand(ipAddress);
+            var octets = ConverterService.ipv6ToGroups(expandedAddress);
             if(octets.length !== 8) {
                 return false;
             }
@@ -180,14 +140,14 @@
             if(this.validateIPv4(ipAddress) &&
                 this.validateIPv4(networkAddress)) {
                 return cidrMatcher(
-                    ipv4ToOctets(ipAddress),
-                    ipv4ToOctets(networkAddress),
+                    ConverterService.ipv4ToOctets(ipAddress),
+                    ConverterService.ipv4ToOctets(networkAddress),
                     8, cidrBits);
             } else if(this.validateIPv6(ipAddress) &&
                 this.validateIPv6(networkAddress)) {
                 return cidrMatcher(
-                    ipv6ToOctets(ipAddress),
-                    ipv6ToOctets(networkAddress),
+                    ConverterService.ipv6ToGroups(ipAddress),
+                    ConverterService.ipv6ToGroups(networkAddress),
                     16, cidrBits);
             }
             return false;
@@ -210,9 +170,9 @@
 
                 // Check that each octet is of the ip address is more or equal
                 // to the low address and less or equal to the high address.
-                ipOctets = ipv4ToOctets(ipAddress);
-                lowOctets = ipv4ToOctets(lowAddress);
-                highOctets = ipv4ToOctets(highAddress);
+                ipOctets = ConverterService.ipv4ToOctets(ipAddress);
+                lowOctets = ConverterService.ipv4ToOctets(lowAddress);
+                highOctets = ConverterService.ipv4ToOctets(highAddress);
                 for(i = 0; i < 4; i++) {
                     if(ipOctets[i] > highOctets[i] ||
                         ipOctets[i] < lowOctets[i]) {
@@ -226,9 +186,9 @@
 
                 // Check that each octet is of the ip address is more or equal
                 // to the low address and less or equal to the high address.
-                ipOctets = ipv6ToOctets(ipAddress);
-                lowOctets = ipv6ToOctets(lowAddress);
-                highOctets = ipv6ToOctets(highAddress);
+                ipOctets = ConverterService.ipv6ToGroups(ipAddress);
+                lowOctets = ConverterService.ipv6ToGroups(lowAddress);
+                highOctets = ConverterService.ipv6ToGroups(highAddress);
                 for(i = 0; i < 8; i++) {
                     if(ipOctets[i] > highOctets[i] ||
                         ipOctets[i] < lowOctets[i]) {
@@ -239,4 +199,4 @@
             }
             return false;
         };
-    });
+    }]);
 
=== modified file 'src/maasserver/static/partials/subnet-details.html'
--- src/maasserver/static/partials/subnet-details.html	2016-06-09 20:08:35 +0000
+++ src/maasserver/static/partials/subnet-details.html	2016-06-16 14:50:25 +0000
@@ -250,36 +250,33 @@
                 <table class="table-listing">
                     <thead>
                         <tr class="table-listing__row">
-                            <th class="table-listing__header table-col--20">IP Address</th>
-                            <th class="table-listing__header table-col--10">Type</th>
-                            <th class="table-listing__header table-col--15">Node</th>
-                            <th class="table-listing__header table-col--10">Interface</th>
-                            <th class="table-listing__header table-col--10">Usage</th>
-                            <th class="table-listing__header table-col--10">Owner</th>
-                            <th class="table-listing__header table-col--25">Last seen</th>
-                            <!-- XXX mpontillo need data for this -->
-                            <!--
-                            <th class="table-listing__header table-col--25" colspan="2">
-                                <a class="table-listing__header-link" href="#">Purpose</a>
-                                <span class="divide"></span>
-                                <a class="table-listing__header-link active" href="#">Last seen</a>
-                                <span class="divide"></span>
-                                <a  class="table-listing__header-link" href="#">Detected</a>
-                            </th>
-                            -->
+                            <th class="table-listing__header table-col--20">
+                                <a href="" data-ng-click="sortIPTable(ipSort)" data-ng-class="{sort: predicate === ipSort, 'sort-asc': reverse === false, 'sort-desc': reverse === true}">IP Address</a>
+                            </th>
+                            <th class="table-listing__header table-col--10">
+                                <a href="" data-ng-click="sortIPTable(allocTypeSort)" data-ng-class="{sort: predicate === allocTypeSort, 'sort-asc': reverse === false, 'sort-desc': reverse === true}">Type</a>
+                            </th>
+                            <th class="table-listing__header table-col--15">
+                                <a href="" data-ng-click="sortIPTable('node_summary.hostname')" data-ng-class="{sort: predicate === 'node_summary.hostname', 'sort-asc': reverse === false, 'sort-desc': reverse === true}">Node</a>
+                            </th>
+                            <th class="table-listing__header table-col--10">
+                                <a href="" data-ng-click="sortIPTable('node_summary.via')" data-ng-class="{sort: predicate === 'node_summary.via', 'sort-asc': reverse === false, 'sort-desc': reverse === true}">Interface</a>
+                            </th>
+                            <th class="table-listing__header table-col--10">
+                                <a href="" data-ng-click="sortIPTable(nodeTypeSort)" data-ng-class="{sort: predicate === nodeTypeSort, 'sort-asc': reverse === false, 'sort-desc': reverse === true}">Usage</a>
+                            </th>
+                            <th class="table-listing__header table-col--10">
+                                <a href="" data-ng-click="sortIPTable(ownerSort)" data-ng-class="{sort: predicate === ownerSort, 'sort-asc': reverse === false, 'sort-desc': reverse === true}">Owner</a>
+                            </th>
+                            <th class="table-listing__header table-col--25">
+                                <a href="" data-ng-click="sortIPTable('updated')" data-ng-class="{sort: predicate === 'updated', 'sort-asc': reverse === false, 'sort-desc': reverse === true}">Last seen</a>
+                            </th>
                         </tr>
                     </thead>
                     <tbody>
-                        <tr data-ng-repeat="ip in subnet.ip_addresses">
+                        <tr data-ng-repeat="ip in subnet.ip_addresses | orderBy:predicate:reverse track by ip.ip">
                             <td class="table-col--20">{$ ip.ip $}</td>
-                            <td class="table-col--10" data-ng-switch="ip.alloc_type">
-                                <span data-ng-switch-when="0">Automatic</span>
-                                <span data-ng-switch-when="1">Static</span>
-                                <span data-ng-switch-when="4">User reserved</span>
-                                <span data-ng-switch-when="5">DHCP</span>
-                                <span data-ng-switch-when="6">Observed</span>
-                                <span data-ng-switch-default>Unknown</span>
-                            </td>
+                            <td class="table-col--10">{$ getAllocType(ip.alloc_type) $}</td>
                             <td class="table-col--15" data-ng-switch="ip.node_summary.node_type">
                                 <span data-ng-switch-when="0"><a href="#/node/{$ ip.node_summary.system_id $}">{$ ip.node_summary.hostname $}</a></span>
                                 <span data-ng-switch-when="1">{$ ip.node_summary.hostname $}</span>
@@ -295,14 +292,7 @@
                                 <span data-ng-switch-when="4">{$ ip.node_summary.via $}</span>
                                 <span data-ng-switch-default>Unknown</span>
                             </td>
-                            <td class="table-col--10" data-ng-switch="ip.node_summary.node_type">
-                                <span data-ng-switch-when="0">Machine</span>
-                                <span data-ng-switch-when="1">Device</span>
-                                <span data-ng-switch-when="2">Rack controller</span>
-                                <span data-ng-switch-when="3">Region controller</span>
-                                <span data-ng-switch-when="4">Rack and region controller</span>
-                                <span data-ng-switch-default>Unknown</span>
-                            </td>
+                            <td class="table-col--10">{$ getNodeType(ip.node_summary.node_type) $}</td>
                             <td class="table-col--10">{$ ip.user ? ip.user : "MAAS" $}</td>
                             <td class="table-col--25">
                                 <time>{$ ip.updated $}</time>