Merge ~blr/maas:performance-tweaks into maas:master

[Kit Randel]

Improve initial load performance of machine listing after data has been loaded (e.g. when navigating from other tabs).

This branch make several performance improvements to the machine listing view:

1. Add a guard to the machines $watch expression (and a new loading binding to the machines-table directive), only updating grouping on status changes after machines have finished loading.

2. Add a track by expression for the parent groupby ng-repeat.

3. Clear machines from the manager on init. While this may feel like a step backwards, with all cached machines the initial digest cycle is slow and grows linearly slower with the number of machines. When the cached machine data is available to the directive, angular will block until the digest cycle is complete, leaving the user with an unresponsive UI. This way at least, the user sees a heading, some markup and a loading indicator. Unfortunately we are not likely to workaround this inefficiency in the performance of nested ng-repeats without a rewrite.

[Blake Rouse (blake-rouse)]

Looks good.

review: Approve

[MAAS Lander (maas-lander)]

LANDING
-b performance-tweaks lp:~blr/maas/+git/maas into -b master lp:~maas-committers/maas

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

[MAAS Lander (maas-lander)]

LANDING
-b performance-tweaks lp:~blr/maas/+git/maas into -b master lp:~maas-committers/maas

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

diff --git a/src/maasserver/static/js/angular/directives/machines_table.js b/src/maasserver/static/js/angular/directives/machines_table.js
index 56666d2..89b7ff1 100644
--- a/src/maasserver/static/js/angular/directives/machines_table.js
+++ b/src/maasserver/static/js/angular/directives/machines_table.js
@@ -22,6 +22,7 @@ function maasMachinesTable(
   return {
     restrict: "E",
     scope: {
+      loading: "=",
       search: "=",
       groupByLabel: "=",
       actionOption: "=",
@@ -72,6 +73,11 @@ function maasMachinesTable(
       NodeStatus.TESTING
     ];
 
+    // This is an performance optimisation to unblock initial rendering,
+    // otherwise when there are many machines, due to numerous nested
+    // ng-repeats the initial digest cycle is slow and the UI is
+    // blocked on first navigation.
+    MachinesManager.clear();
     const machines = MachinesManager.getItems();
 
     // Scope variables.
@@ -537,9 +543,11 @@ function maasMachinesTable(
           }
 
           // Check if status has changed, then run function to regroup machines
+          // if machines have been loaded
           if (
             newMachine.status !== oldMachine.status &&
-            $scope.groupByLabel !== "none"
+            $scope.groupByLabel !== "none" &&
+            !$scope.loading
           ) {
             $scope.updateGroupedMachines($scope.groupByLabel);
           }
diff --git a/src/maasserver/static/partials/machines-table.html b/src/maasserver/static/partials/machines-table.html
index 062e784..d5e9aab 100644
--- a/src/maasserver/static/partials/machines-table.html
+++ b/src/maasserver/static/partials/machines-table.html
@@ -53,7 +53,7 @@
         </tr>
     </thead>
 </table>
-<table data-ng-repeat="group in groupedMachines" data-ng-if="group.machines.length" class="p-table--machines" role="grid">
+<table data-ng-repeat="group in groupedMachines track by group.label" data-ng-if="group.machines.length" class="p-table--machines" role="grid">
     <thead>
         <tr
             class="p-table__group p-table__row"
diff --git a/src/maasserver/static/partials/nodes-list.html b/src/maasserver/static/partials/nodes-list.html
index 27813fa..17c5781 100644
--- a/src/maasserver/static/partials/nodes-list.html
+++ b/src/maasserver/static/partials/nodes-list.html
@@ -982,6 +982,7 @@ sudo maas-rack register --url {$ tabs.controllers.registerUrl $} --secret {$ tab
                 </div>
                 <div>
                     <maas-machines-table id="machines-listing"
+                        loading="loading"
                         search="tabs.machines.search"
                         group-by-label="tabs.machines.groupByLabel"
                         action-option="tabs.machines.actionOption"