MAAS

Merge ~ya-bo-ng/maas:subnet-ip-used-table into maas:master

  1. Git
  2. lp:~ya-bo-ng/maas
  3. subnet-ip-used-table
  4. Merge into master
Proposed by Anthony Dillon
Status: Merged
Approved by: Anthony Dillon
Approved revision: 9d445578f3ba20a2522abac75f76e215e11a0f25
Merge reported by: MAAS Lander
Merged at revision: not available
Proposed branch: ~ya-bo-ng/maas:subnet-ip-used-table
Merge into: maas:master
Diff against target: 121 lines (+56/-54)
1 file modified
src/maasserver/static/partials/subnet-details.html (+56/-54)
Reviewer Review Type Date Requested Status
Steve Rydz (community) Approve
Review via email: mp+375215@code.launchpad.net

Commit message

LP: #1850857 - Improve the layout of the subnets IP used table

Description of the change

Added grid columns around the table and added titles for more information when viewed on small screens.

To post a comment you must log in.
Revision history for this message
Steve Rydz (steverydz) wrote :

LGTM +1

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1diff --git a/src/maasserver/static/partials/subnet-details.html b/src/maasserver/static/partials/subnet-details.html
2index 498466b..12cb888 100755
3--- a/src/maasserver/static/partials/subnet-details.html
4+++ b/src/maasserver/static/partials/subnet-details.html
5@@ -557,60 +557,62 @@
6 </div>
7 </div>
8 <div class="row">
9- <table class="p-table">
10- <thead>
11- <tr>
12- <th>
13- <span role="columnheader" data-ng-click="sortIPTable(ipSort)" data-ng-class="{'is-sorted': predicate === ipSort, 'sort-asc': reverse === false, 'sort-desc': reverse === true}">IP Address</span>
14- </th>
15- <th>
16- <span role="columnheader" data-ng-click="sortIPTable(allocTypeSort)" data-ng-class="{'is-sorted': predicate === allocTypeSort, 'sort-asc': reverse === false, 'sort-desc': reverse === true}">Type</span>
17- </th>
18- <th>
19- <span role="columnheader" data-ng-click="sortIPTable('node_summary.hostname')" data-ng-class="{'is-sorted': predicate === 'node_summary.hostname', 'sort-asc': reverse === false, 'sort-desc': reverse === true}">Node</span>
20- </th>
21- <th>
22- <span role="columnheader" data-ng-click="sortIPTable('node_summary.via')" data-ng-class="{'is-sorted': predicate === 'node_summary.via', 'sort-asc': reverse === false, 'sort-desc': reverse === true}">Interface</span>
23- </th>
24- <th>
25- <span role="columnheader" data-ng-click="sortIPTable(nodeTypeSort)" data-ng-class="{'is-sorted': predicate === nodeTypeSort, 'sort-asc': reverse === false, 'sort-desc': reverse === true}">Usage</span>
26- </th>
27- <th>
28- <span role="columnheader" data-ng-click="sortIPTable(ownerSort)" data-ng-class="{'is-sorted': predicate === ownerSort, 'sort-asc': reverse === false, 'sort-desc': reverse === true}">Owner</span>
29- </th>
30- <th>
31- <span role="columnheader" data-ng-click="sortIPTable('updated')" data-ng-class="{'is-sorted': predicate === 'updated', 'sort-asc': reverse === false, 'sort-desc': reverse === true}">Last seen</span>
32- </th>
33- </tr>
34- </thead>
35- <tbody vs-repeat vs-scroll-parent="window">
36- <tr data-ng-repeat="ip in subnet.ip_addresses | orderBy:predicate:reverse track by ip.ip">
37- <td aria-label="IP Address">{$ ip.ip $}</td>
38- <td aria-label="Type">{$ getAllocType(ip.alloc_type) $}</td>
39- <td aria-label="Node" data-ng-switch="ip.node_summary.node_type">
40- <span data-ng-switch-when="0"><a href="#/machine/{$ ip.node_summary.system_id $}">{$ ip.node_summary.hostname $}</a></span>
41- <span data-ng-switch-when="1">{$ ip.node_summary.hostname $}</span>
42- <span data-ng-switch-when="2"><a href="#/controller/{$ ip.node_summary.system_id $}">{$ ip.node_summary.hostname $}</a></span>
43- <span data-ng-switch-when="3"><a href="#/controller/{$ ip.node_summary.system_id $}">{$ ip.node_summary.hostname $}</a></span>
44- <span data-ng-switch-when="4"><a href="#/controller/{$ ip.node_summary.system_id $}">{$ ip.node_summary.hostname $}</a></span>
45- <span data-ng-switch-default>{$ ip.node_summary.hostname $}</span>
46- </td>
47- <td aria-label="Interface" data-ng-switch="ip.node_summary.node_type">
48- <span data-ng-switch-when="0">{$ ip.node_summary.via $}</span>
49- <span data-ng-switch-when="1">{$ ip.node_summary.via $}</span>
50- <span data-ng-switch-when="2">{$ ip.node_summary.via $}</span>
51- <span data-ng-switch-when="3">{$ ip.node_summary.via $}</span>
52- <span data-ng-switch-when="4">{$ ip.node_summary.via $}</span>
53- <span data-ng-switch-default>Unknown</span>
54- </td>
55- <td aria-label="Usage">{$ getUsageForIP(ip) $}</td>
56- <td aria-label="Owner">{$ ip.user ? ip.user : "MAAS" $}</td>
57- <td aria-label="Last seen">
58- <time>{$ ip.updated $}</time>
59- </td>
60- </tr>
61- </tbody>
62- </table>
63+ <div class="col-12">
64+ <table class="p-table">
65+ <thead>
66+ <tr>
67+ <th>
68+ <span role="columnheader" data-ng-click="sortIPTable(ipSort)" data-ng-class="{'is-sorted': predicate === ipSort, 'sort-asc': reverse === false, 'sort-desc': reverse === true}">IP Address</span>
69+ </th>
70+ <th>
71+ <span role="columnheader" data-ng-click="sortIPTable(allocTypeSort)" data-ng-class="{'is-sorted': predicate === allocTypeSort, 'sort-asc': reverse === false, 'sort-desc': reverse === true}">Type</span>
72+ </th>
73+ <th>
74+ <span role="columnheader" data-ng-click="sortIPTable('node_summary.hostname')" data-ng-class="{'is-sorted': predicate === 'node_summary.hostname', 'sort-asc': reverse === false, 'sort-desc': reverse === true}">Node</span>
75+ </th>
76+ <th>
77+ <span role="columnheader" data-ng-click="sortIPTable('node_summary.via')" data-ng-class="{'is-sorted': predicate === 'node_summary.via', 'sort-asc': reverse === false, 'sort-desc': reverse === true}">Interface</span>
78+ </th>
79+ <th>
80+ <span role="columnheader" data-ng-click="sortIPTable(nodeTypeSort)" data-ng-class="{'is-sorted': predicate === nodeTypeSort, 'sort-asc': reverse === false, 'sort-desc': reverse === true}">Usage</span>
81+ </th>
82+ <th>
83+ <span role="columnheader" data-ng-click="sortIPTable(ownerSort)" data-ng-class="{'is-sorted': predicate === ownerSort, 'sort-asc': reverse === false, 'sort-desc': reverse === true}">Owner</span>
84+ </th>
85+ <th>
86+ <span role="columnheader" data-ng-click="sortIPTable('updated')" data-ng-class="{'is-sorted': predicate === 'updated', 'sort-asc': reverse === false, 'sort-desc': reverse === true}">Last seen</span>
87+ </th>
88+ </tr>
89+ </thead>
90+ <tbody vs-repeat vs-scroll-parent="window">
91+ <tr data-ng-repeat="ip in subnet.ip_addresses | orderBy:predicate:reverse track by ip.ip">
92+ <td aria-label="IP Address" title="{$ ip.ip $}">{$ ip.ip $}</td>
93+ <td aria-label="Type" title="{$ getAllocType(ip.alloc_type) $}">{$ getAllocType(ip.alloc_type) $}</td>
94+ <td aria-label="Node" data-ng-switch="ip.node_summary.node_type">
95+ <span data-ng-switch-when="0"><a href="#/machine/{$ ip.node_summary.system_id $}">{$ ip.node_summary.hostname $}</a></span>
96+ <span data-ng-switch-when="1">{$ ip.node_summary.hostname $}</span>
97+ <span data-ng-switch-when="2"><a href="#/controller/{$ ip.node_summary.system_id $}">{$ ip.node_summary.hostname $}</a></span>
98+ <span data-ng-switch-when="3"><a href="#/controller/{$ ip.node_summary.system_id $}">{$ ip.node_summary.hostname $}</a></span>
99+ <span data-ng-switch-when="4"><a href="#/controller/{$ ip.node_summary.system_id $}">{$ ip.node_summary.hostname $}</a></span>
100+ <span data-ng-switch-default>{$ ip.node_summary.hostname $}</span>
101+ </td>
102+ <td aria-label="Interface" data-ng-switch="ip.node_summary.node_type">
103+ <span data-ng-switch-when="0">{$ ip.node_summary.via $}</span>
104+ <span data-ng-switch-when="1">{$ ip.node_summary.via $}</span>
105+ <span data-ng-switch-when="2">{$ ip.node_summary.via $}</span>
106+ <span data-ng-switch-when="3">{$ ip.node_summary.via $}</span>
107+ <span data-ng-switch-when="4">{$ ip.node_summary.via $}</span>
108+ <span data-ng-switch-default>Unknown</span>
109+ </td>
110+ <td aria-label="Usage" title="{$ getUsageForIP(ip) $}">{$ getUsageForIP(ip) $}</td>
111+ <td aria-label="Owner" title="{$ ip.user ? ip.user : 'MAAS' $}">{$ ip.user ? ip.user : "MAAS" $}</td>
112+ <td aria-label="Last seen" title="{$ ip.updated $}">
113+ <time>{$ ip.updated $}</time>
114+ </td>
115+ </tr>
116+ </tbody>
117+ </table>
118+ </div>
119 </div>
120 </section>
121 </div>

Subscribers

People subscribed via source and target branches