MAAS

Merge ~ya-bo-ng/maas:general-ui-node-details into maas:master

  1. Git
  2. lp:~ya-bo-ng/maas
  3. general-ui-node-details
  4. Merge into master
Proposed by Anthony Dillon
Status: Merged
Approved by: Andres Rodriguez
Approved revision: 28e9d6706b075648a8142a2338a3a937255aeb48
Merge reported by: MAAS Lander
Merged at revision: not available
Proposed branch: ~ya-bo-ng/maas:general-ui-node-details
Merge into: maas:master
Diff against target: 233 lines (+54/-52)
8 files modified
src/maasserver/static/partials/cards/controller.html (+8/-8)
src/maasserver/static/partials/cards/device.html (+6/-6)
src/maasserver/static/partials/cards/hardware_info.html (+11/-11)
src/maasserver/static/partials/cards/images.html (+3/-3)
src/maasserver/static/partials/cards/machine.html (+9/-9)
src/maasserver/static/partials/cards/storage.html (+5/-3)
src/maasserver/static/partials/node-details.html (+7/-7)
src/maasserver/static/partials/script-results-list.html (+5/-5)
Reviewer Review Type Date Requested Status
Andres Rodriguez (community) Approve
Review via email: mp+338509@code.launchpad.net

Commit message

General UI improvements for node details

Description of the change

Fixed some table layouts
Updated the cards to use more condensed lists instead of paragraphs

To post a comment you must log in.
Revision history for this message
Andres Rodriguez (andreserl) wrote :

lgtm!

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

LANDING
-b general-ui-node-details lp:~ya-bo-ng/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: FAILED BUILD
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/1700/consoleText

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1diff --git a/src/maasserver/static/partials/cards/controller.html b/src/maasserver/static/partials/cards/controller.html
2index e2ce338..ed49860 100644
3--- a/src/maasserver/static/partials/cards/controller.html
4+++ b/src/maasserver/static/partials/cards/controller.html
5@@ -7,14 +7,14 @@
6 <p data-ng-if="showFailedTestWarning()"><i class="p-icon--warning">Warning:</i> Node has failed tests; use with caution!</p>
7 </h3>
8 </header>
9-<div>
10- <p data-ng-if="node.version">Version: {$ node.version__long $}</p>
11- <p data-ng-if="!node.version">Version: <span>Unknown (&lt; 2.3.0)</span></p>
12- <p data-ng-if="node.show_os_info">OS: <span data-maas-release-name="node.osystem + '/' + node.distro_series"></span></p>
13- <p>Domain: {$ header.domain.selected.name $}</p>
14- <p>Zone: {$ summary.zone.selected.name $}</p>
15- <p data-ng-if="node.power_type">Power type: {$ node.power_type $}</p>
16-</div>
17+<ul class="p-list">
18+ <li class="p-list__item" data-ng-if="node.version">Version: {$ node.version__long $}</li>
19+ <li class="p-list__item" data-ng-if="!node.version">Version: <span>Unknown (&lt; 2.3.0)</span></li>
20+ <li class="p-list__item" data-ng-if="node.show_os_info">OS: <span data-maas-release-name="node.osystem + '/' + node.distro_series"></span></li>
21+ <li class="p-list__item">Domain: {$ header.domain.selected.name $}</li>
22+ <li class="p-list__item">Zone: {$ summary.zone.selected.name $}</li>
23+ <li class="p-list__item" data-ng-if="node.power_type">Power type: {$ node.power_type $}</li>
24+</ul>
25 <footer class="p-card__footer">
26 <p data-ng-if="isSuperUser()"><a data-ng-click="section.area = 'configuration'">Edit &rsaquo;</a></p>
27 </footer>
28diff --git a/src/maasserver/static/partials/cards/device.html b/src/maasserver/static/partials/cards/device.html
29index f1b1fee..d599afd 100644
30--- a/src/maasserver/static/partials/cards/device.html
31+++ b/src/maasserver/static/partials/cards/device.html
32@@ -1,12 +1,12 @@
33 <header class="p-card__header">
34 <h2 class="p-heading--four">Overview</h2>
35 </header>
36-<div>
37- <p data-ng-if="node.owner">Owner: {$ node.owner $}</p>
38- <p data-ng-if="!node.owner">Owner: <span>(unassigned)</span></p>
39- <p>Domain: {$ header.domain.selected.name $}</p>
40- <p>Zone: {$ summary.zone.selected.name $}</p>
41-</div>
42+<ul class="p-list">
43+ <li class="p-list__item" data-ng-if="node.owner">Owner: {$ node.owner $}</li>
44+ <li class="p-list__item" data-ng-if="!node.owner">Owner: <span>(unassigned)</span></li>
45+ <li class="p-list__item">Domain: {$ header.domain.selected.name $}</li>
46+ <li class="p-list__item">Zone: {$ summary.zone.selected.name $}</li>
47+</ul>
48 <footer class="p-card__footer">
49 <p data-ng-if="isSuperUser()"><a data-ng-click="section.area = 'configuration'">Edit &rsaquo;</a></p>
50 </footer>
51diff --git a/src/maasserver/static/partials/cards/hardware_info.html b/src/maasserver/static/partials/cards/hardware_info.html
52index f168260..6daeae7 100644
53--- a/src/maasserver/static/partials/cards/hardware_info.html
54+++ b/src/maasserver/static/partials/cards/hardware_info.html
55@@ -1,14 +1,14 @@
56 <header class="p-card__header">
57 <h2 class="p-heading--four">Hardware information</h2>
58 </header>
59-<div>
60- <p>System vendor: {$ node.metadata.system_vendor || "Unknown" $}</p>
61- <p>System product: {$ node.metadata.system_product || "Unknown" $}</p>
62- <p>System version: {$ node.metadata.system_version || "Unknown" $}</p>
63- <p>System serial: {$ node.metadata.system_serial || "Unknown" $}</p>
64- <p>Mainboard vendor: {$ node.metadata.mainboard_vendor || "Unknown" $}</p>
65- <p>Mainboard product: {$ node.metadata.mainboard_product || "Unknown" $}</p>
66- <p>Mainboard firmware version: {$ node.metadata.mainboard_firmware_version || "Unknown" $}</p>
67- <p>Mainboard firmware date: {$ node.metadata.mainboard_firmware_date || "Unknown" $}</p>
68- <p>CPU model: {$ node.metadata.cpu_model || "Unknown" $}</p>
69-</div>
70+<ul class="p-list">
71+ <li class="p-list__item">System vendor: {$ node.metadata.system_vendor || "Unknown" $}</li>
72+ <li class="p-list__item">System product: {$ node.metadata.system_product || "Unknown" $}</li>
73+ <li class="p-list__item">System version: {$ node.metadata.system_version || "Unknown" $}</li>
74+ <li class="p-list__item">System serial: {$ node.metadata.system_serial || "Unknown" $}</li>
75+ <li class="p-list__item">Mainboard vendor: {$ node.metadata.mainboard_vendor || "Unknown" $}</li>
76+ <li class="p-list__item">Mainboard product: {$ node.metadata.mainboard_product || "Unknown" $}</li>
77+ <li class="p-list__item">Mainboard firmware version: {$ node.metadata.mainboard_firmware_version || "Unknown" $}</li>
78+ <li class="p-list__item">Mainboard firmware date: {$ node.metadata.mainboard_firmware_date || "Unknown" $}</li>
79+ <li class="p-list__item">CPU model: {$ node.metadata.cpu_model || "Unknown" $}</li>
80+</ul>
81diff --git a/src/maasserver/static/partials/cards/images.html b/src/maasserver/static/partials/cards/images.html
82index 112cebf..b130827 100644
83--- a/src/maasserver/static/partials/cards/images.html
84+++ b/src/maasserver/static/partials/cards/images.html
85@@ -4,9 +4,9 @@
86 <maas-controller-image-status system-id="node.system_id"></maas-controller-image-status>
87 </h3>
88 </header>
89-<div>
90- <p>Last image sync: {$ node.last_image_sync || 'never' $}</p>
91-</div>
92+<ul class="p-list">
93+ <li class="p-list__item">Last image sync: {$ node.last_image_sync || 'never' $}</li>
94+</ul>
95 <footer class="p-card__footer">
96 <p><a href="#/images">Go to images &rsaquo;</a></p>
97 </footer>
98diff --git a/src/maasserver/static/partials/cards/machine.html b/src/maasserver/static/partials/cards/machine.html
99index ac0fe81..d06a451 100644
100--- a/src/maasserver/static/partials/cards/machine.html
101+++ b/src/maasserver/static/partials/cards/machine.html
102@@ -9,15 +9,15 @@
103 </h3>
104 <p data-ng-if="showFailedTestWarning()"><i class="p-icon--warning">Warning:</i> Machine has failed tests; use with caution!</p>
105 </header>
106-<div class="u-padding--bottom">
107- <p data-ng-if="node.owner">Owner: {$ node.owner $}</p>
108- <p data-ng-if="!node.owner">Owner: <span>(unassigned)</span></p>
109- <p data-ng-if="node.show_os_info && isUbuntuOS() && !isController">Kernel: {$ node.hwe_kernel $}</p>
110- <p data-ng-if="node.show_os_info && node.third_party_driver">Third Party Driver: {$ node.third_party_driver.module $} "{$ node.third_party_driver.comment $}"</p>
111- <p>Domain: {$ header.domain.selected.name $}</p>
112- <p>Zone: {$ summary.zone.selected.name $}</p>
113- <p data-ng-if="node.power_type">Power type: {$ node.power_type $}</p>
114-</div>
115+<ul class="p-list">
116+ <li class="p-list__item" data-ng-if="node.owner">Owner: {$ node.owner $}</li>
117+ <li class="p-list__item" data-ng-if="!node.owner">Owner: <span>(unassigned)</span></li>
118+ <li class="p-list__item" data-ng-if="node.show_os_info && isUbuntuOS() && !isController">Kernel: {$ node.hwe_kernel $}</li>
119+ <li class="p-list__item" data-ng-if="node.show_os_info && node.third_party_driver">Third Party Driver: {$ node.third_party_driver.module $} "{$ node.third_party_driver.comment $}"</li>
120+ <li class="p-list__item">Domain: {$ header.domain.selected.name $}</li>
121+ <li class="p-list__item">Zone: {$ summary.zone.selected.name $}</li>
122+ <li class="p-list__item" data-ng-if="node.power_type">Power type: {$ node.power_type $}</li>
123+</ul>
124 <footer class="p-card__footer">
125 <p data-ng-if="isSuperUser()"><a data-ng-click="section.area = 'configuration'">Edit &rsaquo;</a></p>
126 </footer>
127diff --git a/src/maasserver/static/partials/cards/storage.html b/src/maasserver/static/partials/cards/storage.html
128index f56981a..a4cd169 100644
129--- a/src/maasserver/static/partials/cards/storage.html
130+++ b/src/maasserver/static/partials/cards/storage.html
131@@ -4,9 +4,11 @@
132 <h3 class="p-heading--three" data-ng-if="node.storage == 0"><strong>Unknown</strong></h3>
133 </header>
134 <div>
135- <div data-ng-repeat="gs in node.grouped_storages">
136- <p data-ng-if="gs.count > 0">{$ gs.count $}x{$ (gs.size / 1000 / 1000 / 1000).toFixed(0) $}GB ({$ gs.disk_type $})</p>
137- </div>
138+ <ul class="p-list">
139+ <li class="p-list__item" data-ng-repeat="gs in node.grouped_storages">
140+ <span data-ng-if="gs.count > 0">{$ gs.count $}x{$ (gs.size / 1000 / 1000 / 1000).toFixed(0) $}GB ({$ gs.disk_type $})</span>
141+ </li>
142+ </ul>
143 </div>
144 <footer class="p-card__footer">
145 <p data-ng-if="!isDevice && !(isController && node.status === 'New') && node.storage > 0">
146diff --git a/src/maasserver/static/partials/node-details.html b/src/maasserver/static/partials/node-details.html
147index 2f9d2f9..b2b062d 100755
148--- a/src/maasserver/static/partials/node-details.html
149+++ b/src/maasserver/static/partials/node-details.html
150@@ -468,8 +468,8 @@
151 <h2 data-ng-if="!isController">{$ node.node_type_display $} configuration</h2>
152 <h2 data-ng-if="isController">Controller configuration</h2>
153 </div>
154- <div class="col-2 u-align--right">
155- <button class="p-button--neutral"
156+ <div class="col-2">
157+ <button class="p-button--neutral u-float--right"
158 data-ng-if="canEdit()"
159 data-ng-click="editSummary()">Edit</button>
160 </div>
161@@ -539,8 +539,8 @@
162 <div class="col-10" data-ng-if="!isDevice">
163 <h2>Power configuration</h2>
164 </div>
165- <div class="col-2 u-align--right">
166- <button class="p-button--neutral"
167+ <div class="col-2">
168+ <button class="p-button--neutral u-float--right"
169 data-ng-show="canEdit() && power_types.length"
170 data-ng-click="editPower()"
171 data-ng-if="!power.editing">Edit</button>
172@@ -809,7 +809,7 @@
173 <th class="col-1"><span data-ng-if="!isDevice">VLAN</span></th>
174 <th class="col-3">Subnet</th>
175 <th class="col-2">IP Address</th>
176- <th class="col-1 u-align--center">Actions</th>
177+ <th class="col-1"><div class="u-align--right">Actions</div></th>
178 </tr>
179 </thead>
180 <tbody data-selected-rows>
181@@ -1850,8 +1850,8 @@
182 <span data-ng-if="item.test_status === 6">Degraded</span>
183 <span data-ng-if="item.test_status === -1">Unknown</span>
184 </td>
185- <td class="col-1 u-align--right">
186- <div class="p-contextual-menu" toggle-ctrl
187+ <td class="col-1">
188+ <div class="p-contextual-menu u-align--right" toggle-ctrl
189 data-ng-if="canAddLogicalVolume(item) || canAddPartition(item) || canEdit(item) || canDelete(item)">
190 <button class="p-contextual-menu__toggle p-button--base" aria-controls="#{$ item.name $}-menu"
191 data-ng-click="toggleMenu()" aria-haspopup="true"><i class="p-icon--contextual-menu u-no-margin--right">Actions</i></button>
192diff --git a/src/maasserver/static/partials/script-results-list.html b/src/maasserver/static/partials/script-results-list.html
193index bf56517..4c9ebfc 100644
194--- a/src/maasserver/static/partials/script-results-list.html
195+++ b/src/maasserver/static/partials/script-results-list.html
196@@ -17,8 +17,8 @@
197 <th class="col-2">Tags</th>
198 <th class="col-1">Runtime</th>
199 <th class="col-3">Date</th>
200- <th class="col-1">Result</th>
201- <th class="col-1"><div class="u-align--center">Actions</div></th>
202+ <th class="col-2">Result</th>
203+ <th class="col-1"><div class="u-align--right">Actions</div></th>
204 </tr>
205 </thead>
206 <tbody>
207@@ -30,7 +30,7 @@
208 <td class="col-2" aria-label="Tags"><span data-ng-hide="result.showing_history">{$ result.tags $}</span></td>
209 <td class="col-1" aria-label="Runtime"><span data-ng-hide="result.showing_history" data-maas-script-run-time="script-runtime" data-start-time="result.starttime" data-run-time="{{result.runtime}}" data-estimated-run-time="{{result.estimated_runtime}}" data-script-status="result.status"></span></td>
210 <td class="col-3" aria-label="Date"><span data-ng-hide="result.showing_history">{$ result.updated $}</span></td>
211- <td class="col-1" aria-label="Result">
212+ <td class="col-2" aria-label="Result">
213 <span data-ng-hide="result.showing_history">
214 <!-- Only link to the testing result when we've received it. This is indicated with status 2(passed), 3(failed), 4(timedout), 6(degraded), 8(failed installing)-->
215 {$ result.status_name $} <a data-ng-if="result.status === 2 || result.status === 3 || result.status === 4 || result.status === 6 || result.status === 8" href="#/node/{$ type_name $}/{$ node.system_id $}/{$ section.area $}/{$ result.id $}">View log</a>
216@@ -60,7 +60,7 @@
217 {$ item.title $}
218 <span class="p-tooltip__message" role="tooltip">{$ item.description $}</span>
219 </dt>
220- <dd class="table-col--50 u-text--subtle">{$ item.value $}</dd>
221+ <dd>{$ item.value $}</dd>
222 </dl>
223 </div>
224 </td>
225@@ -77,7 +77,7 @@
226 </td>
227 <td class="col-2" aria-label="Tags">{$ result.tags $}</td>
228 <td class="col-1" aria-label="Runtime"><span data-maas-script-run-time="script-runtime" data-start-time="item.starttime" data-run-time="{{item.runtime}}" data-estimated-run-time="{{item.estimated_runtime}}" data-script-status="item.status"></span></td>
229- <td class="col-2" aria-label="Date">{$ item.updated $}</td>
230+ <td class="col-3" aria-label="Date">{$ item.updated $}</td>
231 <td class="col-2" aria-label="Status">
232 <!-- Only link to the testing result when we've received it. This is indicated with status 2(passed), 3(failed), 4(timedout), 6(degraded), 8(failed installing)-->
233 {$ item.status_name $} <a data-ng-if="item.status === 2 || item.status === 3 || item.status === 4 || item.status === 6 || item.status === 8" href="#/node/{$ type_name $}/{$ node.system_id $}/{$ section.area $}/{$ item.id $}">View log</a>

Subscribers

People subscribed via source and target branches