Merge ~caleb-ellis/maas:machine-truncation-2.6 into maas:master

[Caleb Ellis]

Forward port machine list truncation from 2.6 branch.

## Done
- Copy+pasted the machine list truncation work from the 2.6 branch to here. This adds the "Show all..." functionality and simultaneously fixes the error where machines wouldn't load (likely fixed by `MachinesManager.clear()` being removed)

## QA
- Check that the machine list truncation works like in 2.6 i.e. a maximum of 5 machines show per group by default, clicking "Show all..." shows all. Test it out in grouping by status, grouping my owner, and no grouping.
- Go to a KVM details page and check that the machine list displays correctly there too.
- Go to any page that isn't the machine list and refresh the app. Navigate back to the machine list and check that the machines load in correctly.

[MAAS Lander (maas-lander)]

UNIT TESTS
-b machine-truncation-2.6 lp:~caleb-ellis/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: SUCCESS
COMMIT: 2241cbe331554d97ebe6a4fa81c6e78045e3372a

review: Approve

[Adam Collard (adam-collard)]

What's the rationale for this? I know we did it for 2.6, but do we want it in 2.7?

review: Needs Information

[Steve Rydz (steverydz)]

LGTM +1

review: Approve

[Caleb Ellis (caleb-ellis)]

To reiterate what was said on IRC - this branch improves first load performance on the machine list a lot by removing vs-repeat. It also solves the problem of having to reload the machine data every time a user navigates to the machine list. While we would have liked to have moved to React by now it just simply won't happen this cycle, so I've opted to pull in this stop-gap performance fix from 2.6.

Relevant performance discussions:
https://github.com/canonical-web-and-design/MAAS-squad/issues/1314
https://docs.google.com/document/d/18kE1XU56odpf_ZOWgiSaYPjLcmPfZy_AiK8ZiRn1mW8/edit

diff --git a/src/maasserver/static/js/angular/directives/machines_table.js b/src/maasserver/static/js/angular/directives/machines_table.js
index 0cd2753..7405028 100644
--- a/src/maasserver/static/js/angular/directives/machines_table.js
+++ b/src/maasserver/static/js/angular/directives/machines_table.js
@@ -74,15 +74,6 @@ function maasMachinesTable(
       NodeStatus.EXITING_RESCUE_MODE,
       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.
-    if (angular.isDefined($scope.loading)) {
-      MachinesManager.clear();
-      $scope.metadata = MachinesManager.getMetadata();
-    }
     const machines = MachinesManager.getItems();
 
     // Scope variables.
@@ -97,6 +88,29 @@ function maasMachinesTable(
       machineActions: GeneralManager.getData("machine_actions")
     };
 
+    $scope.DISPLAY_LIMIT = 5;
+    $scope.displayLimits = {};
+    const groupLabels = [
+      "Failed",
+      "New",
+      "Commissioning",
+      "Testing",
+      "Ready",
+      "Allocated",
+      "Deploying",
+      "Deployed",
+      "Rescue mode",
+      "Releasing",
+      "Broken",
+      "Other"
+    ];
+
+    $scope.getLimit = group => $scope.displayLimits[group.label];
+
+    $scope.loadAll = selectedGroup => {
+      $scope.displayLimits[selectedGroup.label] = undefined;
+    };
+
     $scope.statusMenuActions = [
       "commission",
       "acquire",
@@ -480,6 +494,9 @@ function maasMachinesTable(
             ]
           }
         ];
+        groupLabels.forEach(label => {
+          $scope.displayLimits[label] = $scope.DISPLAY_LIMIT;
+        });
         return;
       }
 
@@ -500,6 +517,9 @@ function maasMachinesTable(
         });
 
         $scope.groupedMachines = groupedByOwner;
+        groupedByOwner.forEach(owner => {
+          $scope.displayLimits[owner.label] = $scope.DISPLAY_LIMIT;
+        });
         return;
       }
 
@@ -509,6 +529,7 @@ function maasMachinesTable(
           machines: $scope.table.filteredMachines
         }
       ];
+      $scope.displayLimits["none"] = $scope.DISPLAY_LIMIT;
       return;
     };
 
@@ -517,6 +538,7 @@ function maasMachinesTable(
         $scope.table.machines,
         $scope.search
       );
+      $scope.displayLimits["none"] = $scope.DISPLAY_LIMIT;
     };
 
     // When the list of filtered machines change update the all checkbox.
diff --git a/src/maasserver/static/js/angular/directives/tests/test_machines_table.js b/src/maasserver/static/js/angular/directives/tests/test_machines_table.js
index 1d47339..d8403cd 100644
--- a/src/maasserver/static/js/angular/directives/tests/test_machines_table.js
+++ b/src/maasserver/static/js/angular/directives/tests/test_machines_table.js
@@ -1083,4 +1083,34 @@ barbaz`); // Has to be formatted this way for tooltip
       expect(scope.getArchitectureText("i386/generic")).toBe("i386");
     });
   });
+
+  describe("display limits", () => {
+    it("returns the default display limit for the group", () => {
+      const directive = compileDirective();
+      const scope = directive.isolateScope();
+
+      scope.groupByLabel = "status";
+      const group = {
+        label: "Allocated",
+        machines: []
+      };
+      scope.$digest();
+
+      expect(scope.getLimit(group)).toEqual(scope.DISPLAY_LIMIT);
+    });
+
+    it("sets the groups display limit to undefined", () => {
+      const directive = compileDirective();
+      const scope = directive.isolateScope();
+
+      scope.groupByLabel = "status";
+      const group = {
+        label: "New",
+        machines: []
+      };
+      scope.loadAll(group);
+
+      expect(scope.getLimit(group)).toEqual(undefined);
+    });
+  });
 });
diff --git a/src/maasserver/static/partials/machines-table.html b/src/maasserver/static/partials/machines-table.html
index c925b57..5f8c4a9 100644
--- a/src/maasserver/static/partials/machines-table.html
+++ b/src/maasserver/static/partials/machines-table.html
@@ -99,12 +99,13 @@
             <th class="p-table__col--storage u-align--right" role="columnheader"></th>
         </tr>
     </thead>
-    <tbody vs-repeat data-ng-if="!closedGroups.includes(group.label)">
-        <tr class="p-table__row" data-ng-repeat="node in group.machines | nodesFilter:search | orderBy:table.predicate:table.reverse track by node.system_id"
-            data-ng-class="{ 'table--error': machineHasError({ $machine: node }),
-                             'is-active': node.$selected,
-                             'is-grouped': group.label !== 'none'
-                            }"
+    <tbody data-ng-if="!closedGroups.includes(group.label)">
+        <tr class="p-table__row"
+            ng-class="{
+                'table--error': machineHasError({ $machine: node }),
+                'is-active': node.$selected,
+                'is-grouped': group.label !== 'none'}"
+            ng-repeat="node in group.machines | limitTo:getLimit(group) | nodesFilter:search | orderBy:table.predicate:table.reverse track by node.system_id"
             tabindex="0"
         >
             <td class="p-table__col--name p-double-row" aria-label="FQDN" data-ng-if="table.column === 'fqdn' || table.column === 'ip_address'">
@@ -449,6 +450,19 @@
                 </span>
             </td>
         </tr>
+        <tr data-ng-if="group.machines && group.machines.length > getLimit(group)">
+            <td colspan="12">
+                <div class="p-table__group-label" style="padding: .25rem 0 .3rem">
+                    <a class="p-muted-text" data-ng-click="loadAll(group)">
+                        <span>Show all</span>
+                        <span data-ng-if="group.label === 'none'">machines&hellip;</span>
+                        <span data-ng-if="group.label === 'No owner'">unowned&hellip;</span>
+                        <span data-ng-if="groupByLabel === 'owner' && group.label !== 'No owner'">owned by {$ group.label $}&hellip;</span>
+                        <span data-ng-if="groupByLabel === 'status'">{$ group.label | lowercase $}&hellip;</span>
+                    </a>
+                </div>
+            </td>
+        </tr>
     </tbody>
 </table>
 <div class="p-strip" data-ng-if="search && !loading && !table.filteredMachines.length">