Merge ~steverydz/maas:add-spaces-to-machines-table into maas:master

[Steve Rydz]

LP: #1822647 - Add spaces to machines table

Add spaces underneath zones in machines table

QA steps:
- Go to machines listing page
- See that under the "zones" table heading there is also "spaces"
- If there are no spaces then nothing is displayed under the zone
- If there is one space, the name of that space is displayed under the zone
- If there are multiple spaces, the number of spaces is shown with a tooltip listing all spaces

Spaces in table screenshot: https://images.zenhubusercontent.com/5a9d4ee34b5806bc2bc9694d/46f6b43d-0b93-40e8-b792-a88d0d5fee3b

Spaces in table with tooltip screenshot: https://images.zenhubusercontent.com/5a9d4ee34b5806bc2bc9694d/1b9bfff3-c98a-4f65-90b1-abaaf6cae2c9

[Caleb Ellis (caleb-ellis)]

LGTM! Just remember to run `bin/yarn prettier` (might need to run just `bin/yarn` first) because there's a couple of tiny linting errors.

review: Approve

[Steve Rydz (steverydz)]

> LGTM! Just remember to run `bin/yarn prettier` (might need to run just
> `bin/yarn` first) because there's a couple of tiny linting errors.

Done

[Barry McGee (barry-mcgee)]

Pettier CLI includes a `--check` flag which you could add as a build step.

https://prettier.io/docs/en/cli.html#check

diff --git a/src/maasserver/static/js/angular/directives/machines_table.js b/src/maasserver/static/js/angular/directives/machines_table.js
index 5cbd11c..9bfd714 100644
--- a/src/maasserver/static/js/angular/directives/machines_table.js
+++ b/src/maasserver/static/js/angular/directives/machines_table.js
@@ -349,6 +349,22 @@ function maasMachinesTable(
       }
     };
 
+    $scope.getSpacesTooltipMessage = spaces => {
+      var spacesMessage = "";
+
+      if (spaces.length > 1) {
+        spaces.forEach((space, index) => {
+          spacesMessage += space;
+
+          if (index !== spaces.length - 1) {
+            spacesMessage += "\n";
+          }
+        });
+      }
+
+      return spacesMessage;
+    };
+
     $scope.getGroupSelectedState = groupLabel => {
       const machineGroup = $scope.groupedMachines.find(group => {
         return group.label === groupLabel;
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 fc03e88..d23a087 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
@@ -1013,4 +1013,20 @@ describe("maasMachinesTable", function() {
       expect(scope.getGroupCountString("Failed")).toBe("2 machines");
     });
   });
+
+  describe("getSpacesTooltipMessage", () => {
+    it("correctly returns a list of spaces or empty string", () => {
+      const directive = compileDirective();
+      const scope = directive.isolateScope();
+      const machines = Array.from(Array(3)).map(makeMachine);
+      machines[0].spaces = [];
+      machines[1].spaces = ["foobar"];
+      machines[2].spaces = ["foobar", "barbaz"];
+
+      expect(scope.getSpacesTooltipMessage(machines[0].spaces)).toBe("");
+      expect(scope.getSpacesTooltipMessage(machines[1].spaces)).toBe("");
+      expect(scope.getSpacesTooltipMessage(machines[2].spaces)).toBe(`foobar
+barbaz`); // Has to be formatted this way for tooltip
+    });
+  });
 });
diff --git a/src/maasserver/static/partials/machines-table.html b/src/maasserver/static/partials/machines-table.html
index a23d462..1202e3c 100644
--- a/src/maasserver/static/partials/machines-table.html
+++ b/src/maasserver/static/partials/machines-table.html
@@ -36,8 +36,9 @@
                 <span role="columnheader" data-ng-click="sortTable('pool.name')" data-ng-class="{'is-sorted': table.predicate === 'pool.name', 'sort-asc': table.reverse === false, 'sort-desc': table.reverse === true}">Pool,</span>
                 <div>Note</div>
             </th>
-            <th class="p-table__col--zone p-double-row" title="Zone">
-                <span role="columnheader" data-ng-click="sortTable('zone.name')" data-ng-class="{'is-sorted': table.predicate === 'zone.name', 'sort-asc': table.reverse === false, 'sort-desc': table.reverse === true}">Zone</span>
+            <th class="p-table__col--zone p-double-row" title="Zone, Spaces">
+                <span role="columnheader" data-ng-click="sortTable('zone.name')" data-ng-class="{'is-sorted': table.predicate === 'zone.name', 'sort-asc': table.reverse === false, 'sort-desc': table.reverse === true}">Zone,</span>
+                <div>Spaces</div>
             </th>
             <th class="p-table__col--fabric p-double-row" title="Fabric, VLAN">
                 <span role="columnheader" data-ng-click="sortTable('vlan.fabric_name')" data-ng-class="{'is-sorted': table.predicate === 'vlan.fabric_name', 'sort-asc': table.reverse === false, 'sort-desc': table.reverse === true}">Fabric,</span>
@@ -312,14 +313,23 @@
                     </span>
                 </div>
             </td>
-            <td class="p-table__col--zone p-double-row" aria-label="Zone" title="{$ node.zone.name $}">
+            <td class="p-table__col--zone p-double-row" aria-label="Zone">
                 <div class="p-table-menu">
                     <div class="p-double-row__rows-container">
-                        <div class="p-double-row__main-row" aria-label="Zone">
+                        <div class="p-double-row__main-row" aria-label="Zone" title="{$ node.zone.name $}">
                             <i class="p-icon--spinner u-animation--spin" data-ng-if="node['set-zone-transition']">Setting zone</i>
                             <span data-ng-if="node.zone.name"><a class="p-link--soft" href="#/zone/{$ node.zone.id $}" title="{$ node.zone.name $}">{$ node.zone.name $}</a></span>
                             <span data-ng-if="!node.zone.name">-</span>
                         </div>
+                        <div class="p-double-row__muted-row" style="overflow: visible">
+                            <span data-ng-if="node.spaces.length === 1">
+                                {$ node.spaces[0] $}
+                            </span>
+                            <span data-ng-if="node.spaces.length > 1" class="p-tooltip p-tooltip--btm-left" aria-described-by="{$ node.hostname $}-spaces" style="overflow: visible">
+                                {$ node.spaces.length $} spaces
+                                <span class="p-tooltip__message" role="tooltip" id="{$ node.hostname $}-spaces">{$ getSpacesTooltipMessage(node.spaces) $}</span>
+                            </span>
+                        </div>
                     </div>
                     <button
                         data-ng-if="node.actions.indexOf('set-zone') !== -1 && !hideActions"