MAAS

Merge lp:~ubuntudotcom1/maas/bug-1453192-bug-1452931-storage-node-detail-model-underline into lp:~maas-committers/maas/trunk

  1. bug-1453192-bug-1452931-storage-node-detail-model-underline
  2. Merge into trunk
Proposed by ubuntudotcom1
Status: Merged
Approved by: ubuntudotcom1
Approved revision: no longer in the source branch.
Merged at revision: 3898
Proposed branch: lp:~ubuntudotcom1/maas/bug-1453192-bug-1452931-storage-node-detail-model-underline
Merge into: lp:~maas-committers/maas/trunk
Diff against target: 122 lines (+50/-50)
1 file modified
src/maasserver/static/partials/nodes-list.html (+50/-50)
To merge this branch: bzr merge lp:~ubuntudotcom1/maas/bug-1453192-bug-1452931-storage-node-detail-model-underline
Reviewer Review Type Date Requested Status
Blake Rouse (community) Approve
ubuntudotcom1 work in progress. Pending
Review via email: mp+258684@code.launchpad.net

Commit message

Address bug 1453192, bug 1452931, and (perhaps not comprehensively) bug 1453168 by applying correct dynamic CSS classes to node/device listing page column headers to indicate current sort predicate, current sort order (ascending vs. descending), and active display (in the case of FQDN / MAC). Finally, replace obsoleted acronym element with span in these headers.

Description of the change

Address bug 1453192, bug 1452931, and (perhaps not comprehensively) bug 1453168 by applying correct dynamic CSS classes to node/device listing page column headers to indicate current sort predicate, current sort order (ascending vs. descending), and active display (in the case of FQDN / MAC). Finally, replace obsoleted acronym element with span in these headers.

To post a comment you must log in.
Revision history for this message
Blake Rouse (blake-rouse) wrote :

This branch is really ready to go. Just some extras need to be added to finish it up. For now just forget about the CSS, the design team will do that part.

Get these items fixed up and it will be ready to go.

Thanks for doing this.

review: Needs Fixing
Revision history for this message
ubuntudotcom1 (ubuntudotcom1) wrote :

Address comments.

Revision history for this message
Blake Rouse (blake-rouse) wrote :

Almost there just forgot the sort-asc and sort-desc on the other <a>. Also don't forget to link your acronym bug.

Not going to block you on this. Just fixes the mentioned items and land it.

review: Approve
Revision history for this message
MAAS Lander (maas-lander) wrote :

There are additional revisions which have not been approved in review. Please seek review and approval of these new revisions.

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'src/maasserver/static/partials/nodes-list.html'
2--- src/maasserver/static/partials/nodes-list.html 2015-05-13 16:15:59 +0000
3+++ src/maasserver/static/partials/nodes-list.html 2015-05-14 19:32:55 +0000
4@@ -491,41 +491,41 @@
5 </th>
6 <th colspan="2" class="table-listing__header fixed">
7 <!-- XXX blake_r 2015-02-18 - Need to add e2e test. -->
8- <a href="" data-ng-click="selectColumnOrSort('fqdn', 'nodes')">
9- <acronym title="Fully Qualified Domain Name">FQDN</acronym>
10+ <a href="" data-ng-click="selectColumnOrSort('fqdn', 'nodes')" data-ng-class="{active: tabs.nodes.column === 'fqdn', sort: tabs.nodes.predicate === 'fqdn', 'sort-asc': tabs.nodes.reverse === false, 'sort-desc': tabs.nodes.reverse === true}">
11+ <span title="Fully Qualified Domain Name">FQDN</span>
12 </a> |
13- <a href="" data-ng-click="selectColumnOrSort('pxe_mac', 'nodes')">
14- <acronym title="Media Access Control addresses">MAC</acronym>
15+ <a href="" data-ng-click="selectColumnOrSort('pxe_mac', 'nodes')" data-ng-class="{active: tabs.nodes.column === 'pxe_mac', sort: tabs.nodes.predicate === 'pxe_mac', 'sort-asc': tabs.nodes.reverse === false, 'sort-desc': tabs.nodes.reverse === true}">
16+ <span title="Media Access Control addresses">MAC</span>
17 </a>
18 </th>
19- <th class="align-center">
20- <!-- XXX blake_r 2015-02-18 - Need to add e2e test. -->
21- <a href="" class="align-center" data-ng-click="sortTable('power_state', 'nodes')">Power</a>
22- </th>
23- <th>
24- <!-- XXX blake_r 2015-02-18 - Need to add e2e test. -->
25- <a href="" data-ng-click="sortTable('status', 'nodes')">Status</a>
26- </th>
27- <th>
28- <!-- XXX blake_r 2015-02-18 - Need to add e2e test. -->
29- <a href="" data-ng-click="sortTable('owner', 'nodes')">Owner</a>
30+ <th class="table-listing__header fixed align-center">
31+ <!-- XXX blake_r 2015-02-18 - Need to add e2e test. -->
32+ <a href="" class="align-center" data-ng-click="sortTable('power_state', 'nodes')" data-ng-class="{sort: tabs.nodes.predicate === 'power_state', 'sort-asc': tabs.nodes.reverse === false, 'sort-desc': tabs.nodes.reverse === true}">Power</a>
33+ </th>
34+ <th class="table-listing__header fixed">
35+ <!-- XXX blake_r 2015-02-18 - Need to add e2e test. -->
36+ <a href="" data-ng-click="sortTable('status', 'nodes')" data-ng-class="{sort: tabs.nodes.predicate === 'status', 'sort-asc': tabs.nodes.reverse === false, 'sort-desc': tabs.nodes.reverse === true}">Status</a>
37+ </th>
38+ <th class="table-listing__header fixed">
39+ <!-- XXX blake_r 2015-02-18 - Need to add e2e test. -->
40+ <a href="" data-ng-click="sortTable('owner', 'nodes')" data-ng-class="{sort: tabs.nodes.predicate === 'owner', 'sort-asc': tabs.nodes.reverse === false, 'sort-desc': tabs.nodes.reverse === true}">Owner</a>
41 </th>
42
43- <th class="align-right">
44- <!-- XXX blake_r 2015-02-18 - Need to add e2e test. -->
45- <a href="" data-ng-click="sortTable('cpu_count', 'nodes')">Cores</a>
46- </th>
47- <th class="align-right">
48- <!-- XXX blake_r 2015-02-18 - Need to add e2e test. -->
49- <a href="" data-ng-click="sortTable('memory', 'nodes')">RAM (GiB)</a>
50- </th>
51- <th class="align-right">
52- <!-- XXX blake_r 2015-02-18 - Need to add e2e test. -->
53- <a href="" data-ng-click="sortTable('disks', 'nodes')">Disks</a>
54- </th>
55- <th class="align-right">
56- <!-- XXX blake_r 2015-02-18 - Need to add e2e test. -->
57- <a href="" data-ng-click="sortTable('storage', 'nodes')">Storage (GB)</a>
58+ <th class="table-listing__header fixed align-right">
59+ <!-- XXX blake_r 2015-02-18 - Need to add e2e test. -->
60+ <a href="" data-ng-click="sortTable('cpu_count', 'nodes')" data-ng-class="{sort: tabs.nodes.predicate=== 'cpu_count', 'sort-asc': tabs.nodes.reverse === false, 'sort-desc': tabs.nodes.reverse === true}">Cores</a>
61+ </th>
62+ <th class="table-listing__header fixed align-right">
63+ <!-- XXX blake_r 2015-02-18 - Need to add e2e test. -->
64+ <a href="" data-ng-click="sortTable('memory', 'nodes')" data-ng-class="{sort: tabs.nodes.predicate === 'memory', 'sort-asc': tabs.nodes.reverse === false, 'sort-desc': tabs.nodes.reverse === true}">RAM (GiB)</a>
65+ </th>
66+ <th class="table-listing__header fixed align-right">
67+ <!-- XXX blake_r 2015-02-18 - Need to add e2e test. -->
68+ <a href="" data-ng-click="sortTable('disks', 'nodes')" data-ng-class="{sort: tabs.nodes.predicate === 'disks', 'sort-asc': tabs.nodes.reverse === false, 'sort-desc': tabs.nodes.reverse === true}">Disks</a>
69+ </th>
70+ <th class="table-listing__header fixed align-right">
71+ <!-- XXX blake_r 2015-02-18 - Need to add e2e test. -->
72+ <a href="" data-ng-click="sortTable('storage', 'nodes')" data-ng-class="{sort: tabs.nodes.predicate === 'storage', 'sort-asc': tabs.nodes.reverse === false, 'sort-desc': tabs.nodes.reverse === true}">Storage (GB)</a>
73 </th>
74 </tr>
75 </thead>
76@@ -582,26 +582,26 @@
77 <input type="checkbox" class="checkbox" data-ng-click="toggleCheckAll('devices')" data-ng-model="tabs.devices.allViewableChecked" id="check-all-devices" data-ng-disabled="hasActionsInProgress('devices')" />
78 <label for="check-all-devices" class="checkbox-label"></label>
79 </th>
80- <th class="table-listing__header t24">
81- <!-- XXX rvba 2015-02-25 - Need to add e2e test. -->
82- <a href="" data-ng-click="sortTable('fqdn', 'devices')">
83- <acronym title="Fully Qualified Domain Name">FQDN</acronym>
84- </a>
85- </th>
86- <th class="table-listing__header t25">
87- <a href="" data-ng-click="sortTable('primary_mac', 'devices')">
88- <acronym title="Media Access Control addresses">MAC</acronym>
89- </a>
90- </th>
91- <th class="table-listing__header t15">
92- <a href="" data-ng-click="sortTable('ip_assignment', 'devices')">IP assignment</a>
93- </th>
94- <th class="table-listing__header t20">
95- <a href="" data-ng-click="sortTable('ip_address', 'devices')">IP</a>
96- </th>
97- <th class="table-listing__header t15">
98- <!-- XXX rvba 2015-02-25 - Need to add e2e test. -->
99- <a href="" data-ng-click="sortTable('owner', 'devices')">Owner</a>
100+ <th class="table-listing__header fixed t24">
101+ <!-- XXX rvba 2015-02-25 - Need to add e2e test. -->
102+ <a href="" data-ng-click="sortTable('fqdn', 'devices')" data-ng-class="{sort: tabs.devices.predicate === 'fqdn', 'sort-asc': tabs.devices.reverse === false, 'sort-desc': tabs.devices.reverse === true}">
103+ <span title="Fully Qualified Domain Name">FQDN</span>
104+ </a>
105+ </th>
106+ <th class="table-listing__header fixed t25">
107+ <a href="" data-ng-click="sortTable('primary_mac', 'devices')" data-ng-class="{sort: tabs.devices.predicate === 'primary_mac', 'sort-asc': tabs.devices.reverse === false, 'sort-desc': tabs.devices.reverse === true}">
108+ <span title="Media Access Control addresses">MAC</span>
109+ </a>
110+ </th>
111+ <th class="table-listing__header fixed t15">
112+ <a href="" data-ng-click="sortTable('ip_assignment', 'devices')" data-ng-class="{sort: tabs.devices.predicate === 'ip_assignment', 'sort-asc': tabs.devices.reverse === false, 'sort-desc': tabs.devices.reverse === true}">IP assignment</a>
113+ </th>
114+ <th class="table-listing__header fixed t20">
115+ <a href="" data-ng-click="sortTable('ip_address', 'devices')" data-ng-class="{sort: tabs.devices.predicate === 'ip_address', 'sort-asc': tabs.devices.reverse === false, 'sort-desc': tabs.devices.reverse === true}">IP</a>
116+ </th>
117+ <th class="table-listing__header fixed t15">
118+ <!-- XXX rvba 2015-02-25 - Need to add e2e test. -->
119+ <a href="" data-ng-click="sortTable('owner', 'devices')" data-ng-class="{sort: tabs.devices.predicate === 'owner', 'sort-asc': tabs.devices.reverse === false, 'sort-desc': tabs.devices.reverse === true}">Owner</a>
120 </th>
121 </tr>
122 </thead>