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

Proposed by Steve Rydz
Status: Merged
Approved by: Steve Rydz
Approved revision: 4da556293ec54eb9e920daccde80f3f9cd9b672d
Merge reported by: MAAS Lander
Merged at revision: not available
Proposed branch: ~steverydz/maas:add-spaces-to-machines-table
Merge into: maas:master
Diff against target: 94 lines (+46/-4)
3 files modified
src/maasserver/static/js/angular/directives/machines_table.js (+16/-0)
src/maasserver/static/js/angular/directives/tests/test_machines_table.js (+16/-0)
src/maasserver/static/partials/machines-table.html (+14/-4)
Reviewer Review Type Date Requested Status
Caleb Ellis (community) Approve
Review via email: mp+366650@code.launchpad.net

Commit message

LP: #1822647 - Add spaces to machines table

Description of the change

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

To post a comment you must log in.
Revision history for this message
Caleb Ellis (caleb-ellis) wrote :

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
Revision history for this message
Steve Rydz (steverydz) wrote :

> 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

Revision history for this message
Barry McGee (barry-mcgee) wrote :

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

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

There was an error fetching revisions from git servers. Please try again in a few minutes. If the problem persists, contact Launchpad support.

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
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(
349 }349 }
350 };350 };
351351
352 $scope.getSpacesTooltipMessage = spaces => {
353 var spacesMessage = "";
354
355 if (spaces.length > 1) {
356 spaces.forEach((space, index) => {
357 spacesMessage += space;
358
359 if (index !== spaces.length - 1) {
360 spacesMessage += "\n";
361 }
362 });
363 }
364
365 return spacesMessage;
366 };
367
352 $scope.getGroupSelectedState = groupLabel => {368 $scope.getGroupSelectedState = groupLabel => {
353 const machineGroup = $scope.groupedMachines.find(group => {369 const machineGroup = $scope.groupedMachines.find(group => {
354 return group.label === groupLabel;370 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() {
1013 expect(scope.getGroupCountString("Failed")).toBe("2 machines");1013 expect(scope.getGroupCountString("Failed")).toBe("2 machines");
1014 });1014 });
1015 });1015 });
1016
1017 describe("getSpacesTooltipMessage", () => {
1018 it("correctly returns a list of spaces or empty string", () => {
1019 const directive = compileDirective();
1020 const scope = directive.isolateScope();
1021 const machines = Array.from(Array(3)).map(makeMachine);
1022 machines[0].spaces = [];
1023 machines[1].spaces = ["foobar"];
1024 machines[2].spaces = ["foobar", "barbaz"];
1025
1026 expect(scope.getSpacesTooltipMessage(machines[0].spaces)).toBe("");
1027 expect(scope.getSpacesTooltipMessage(machines[1].spaces)).toBe("");
1028 expect(scope.getSpacesTooltipMessage(machines[2].spaces)).toBe(`foobar
1029barbaz`); // Has to be formatted this way for tooltip
1030 });
1031 });
1016});1032});
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 @@
36 <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>36 <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>
37 <div>Note</div>37 <div>Note</div>
38 </th>38 </th>
39 <th class="p-table__col--zone p-double-row" title="Zone">39 <th class="p-table__col--zone p-double-row" title="Zone, Spaces">
40 <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>40 <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>
41 <div>Spaces</div>
41 </th>42 </th>
42 <th class="p-table__col--fabric p-double-row" title="Fabric, VLAN">43 <th class="p-table__col--fabric p-double-row" title="Fabric, VLAN">
43 <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>44 <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 @@
312 </span>313 </span>
313 </div>314 </div>
314 </td>315 </td>
315 <td class="p-table__col--zone p-double-row" aria-label="Zone" title="{$ node.zone.name $}">316 <td class="p-table__col--zone p-double-row" aria-label="Zone">
316 <div class="p-table-menu">317 <div class="p-table-menu">
317 <div class="p-double-row__rows-container">318 <div class="p-double-row__rows-container">
318 <div class="p-double-row__main-row" aria-label="Zone">319 <div class="p-double-row__main-row" aria-label="Zone" title="{$ node.zone.name $}">
319 <i class="p-icon--spinner u-animation--spin" data-ng-if="node['set-zone-transition']">Setting zone</i>320 <i class="p-icon--spinner u-animation--spin" data-ng-if="node['set-zone-transition']">Setting zone</i>
320 <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>321 <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>
321 <span data-ng-if="!node.zone.name">-</span>322 <span data-ng-if="!node.zone.name">-</span>
322 </div>323 </div>
324 <div class="p-double-row__muted-row" style="overflow: visible">
325 <span data-ng-if="node.spaces.length === 1">
326 {$ node.spaces[0] $}
327 </span>
328 <span data-ng-if="node.spaces.length > 1" class="p-tooltip p-tooltip--btm-left" aria-described-by="{$ node.hostname $}-spaces" style="overflow: visible">
329 {$ node.spaces.length $} spaces
330 <span class="p-tooltip__message" role="tooltip" id="{$ node.hostname $}-spaces">{$ getSpacesTooltipMessage(node.spaces) $}</span>
331 </span>
332 </div>
323 </div>333 </div>
324 <button334 <button
325 data-ng-if="node.actions.indexOf('set-zone') !== -1 && !hideActions"335 data-ng-if="node.actions.indexOf('set-zone') !== -1 && !hideActions"

Subscribers

People subscribed via source and target branches