MAAS

Merge ~ya-bo-ng/maas:form-improves-labels into maas:master

  1. Git
  2. lp:~ya-bo-ng/maas
  3. form-improves-labels
  4. Merge into master
Proposed by Anthony Dillon
Status: Merged
Approved by: Anthony Dillon
Approved revision: 95c7d97bc20494eb3f12dd00f04653af9d7ea033
Merge reported by: MAAS Lander
Merged at revision: not available
Proposed branch: ~ya-bo-ng/maas:form-improves-labels
Merge into: maas:master
Diff against target: 879 lines (+187/-164)
13 files modified
src/maasserver/static/js/angular/directives/power_parameters.js (+39/-38)
src/maasserver/static/js/angular/directives/tests/test_power_parameters.js (+3/-3)
src/maasserver/static/js/angular/factories/tests/test_zones.js (+0/-1)
src/maasserver/static/partials/dashboard.html (+7/-7)
src/maasserver/static/partials/domain-details.html (+6/-6)
src/maasserver/static/partials/fabric-details.html (+9/-9)
src/maasserver/static/partials/node-details.html (+14/-5)
src/maasserver/static/partials/node-result.html (+6/-6)
src/maasserver/static/partials/subnet-details.html (+46/-42)
src/maasserver/static/partials/vlan-details.html (+30/-28)
src/maasserver/static/partials/zone-details.html (+8/-14)
src/maasserver/static/scss/_patterns_forms.scss (+14/-0)
src/maasserver/templates/maasserver/user_view.html (+5/-5)
Reviewer Review Type Date Requested Status
MAAS Lander Approve
Lilyana Videnova (community) Approve
Review via email: mp+363353@code.launchpad.net

Commit message

Muted uneditable form labels

Description of the change

Slightly mute the styling of form field labels when they are not editable to make the data more clear.

Uneditable:
https://user-images.githubusercontent.com/1413534/53012452-eb2f3d80-343a-11e9-8639-4b8998142e90.png

Editable:
https://user-images.githubusercontent.com/1413534/53012480-f84c2c80-343a-11e9-8166-021c3dc249e7.png

To post a comment you must log in.
~ya-bo-ng/maas:form-improves-labels updated
d8467c4... by Anthony Dillon

Catch a few missing labels

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

UNIT TESTS
-b form-improves-labels lp:~ya-bo-ng/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: FAILED
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/5104/console
COMMIT: fa36611341fb5b55558254925c8c29b48e7f0917

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

UNIT TESTS
-b form-improves-labels lp:~ya-bo-ng/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: FAILED
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/5105/console
COMMIT: fbae2bdc1ba63815aa7b87977120225af10b3bb6

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

UNIT TESTS
-b form-improves-labels lp:~ya-bo-ng/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: FAILED
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/5120/console
COMMIT: 405503ae30037080d3cb8575d5ff4914823a3028

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

UNIT TESTS
-b form-improves-labels lp:~ya-bo-ng/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: SUCCESS
COMMIT: 18ac912d64ebb64a6837892c30b69c14b27d3324

review: Approve
Revision history for this message
Lilyana Videnova (lilyanavidenova) wrote :

lgtm!

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

UNIT TESTS
-b form-improves-labels lp:~ya-bo-ng/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: FAILED
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/5129/console
COMMIT: dd6bd32b4154323accc20385e12e6049dd48d1ee

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

UNIT TESTS
-b form-improves-labels lp:~ya-bo-ng/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: FAILED
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/5137/console
COMMIT: d8467c4b401cfa92ad1d2f90b935cf5c366e9505

review: Needs Fixing
~ya-bo-ng/maas:form-improves-labels updated
95c7d97... by Anthony Dillon

Test CI again

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

UNIT TESTS
-b form-improves-labels lp:~ya-bo-ng/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: SUCCESS
COMMIT: 95c7d97bc20494eb3f12dd00f04653af9d7ea033

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/js/angular/directives/power_parameters.js b/src/maasserver/static/js/angular/directives/power_parameters.js
2index 435b5ed..21ad17f 100644
3--- a/src/maasserver/static/js/angular/directives/power_parameters.js
4+++ b/src/maasserver/static/js/angular/directives/power_parameters.js
5@@ -6,44 +6,45 @@
6
7 angular.module('MAAS').run(['$templateCache', function ($templateCache) {
8 // Inject the power-parameters.html into the template cache.
9- $templateCache.put('directive/templates/power-parameters.html', [
10- '<div class="p-form__group u-clearfix">',
11- '<label for="power-type" ',
12- 'class="p-form__label col-2 mobile-col-2 tablet-col-2">',
13- 'Power type',
14- '</label>',
15- '<div class="p-form__control col-3 mobile-col-2 tablet-col-3">',
16- '<select name="power-type" id="power-type" ',
17- 'data-ng-disabled="ngDisabled || ngModel.in_pod" ',
18- 'data-ng-class="{ invalid: !ngModel.type }" ',
19- 'data-ng-model="ngModel.type" ',
20- 'data-ng-options="',
21- 'type as type.description ',
22- 'for type in maasPowerParameters track by type.name">',
23- '<option value="" disabled selected>',
24- 'Select your power type',
25- '</option>',
26- '</select>',
27- '</div>',
28- '</div>',
29- '<div class="p-form__group u-clearfix" ',
30- 'data-ng-repeat="field in ngModel.type.fields">',
31- '<label for="{$ field.name $}" ',
32- 'class="p-form__label col-2 mobile-col-2 tablet-col-2" ',
33- 'data-ng-if="field.name !== ' + "'default_storage_pool' && ",
34- "(field.scope !== 'bmc' || !ngModel.in_pod)" + '">',
35- '{$ field.label $}',
36- '</label>',
37- '<div class="p-form__control col-3 mobile-col-2 tablet-col-3">',
38- '<maas-power-input field="field" ',
39- 'data-ng-disabled="ngDisabled || (field.scope === ',
40- "'bmc' && ngModel.in_pod)" + '" ',
41- 'data-ng-if="field.name !== ' + "'default_storage_pool' ",
42- "&& (field.scope !== 'bmc' || !ngModel.in_pod)" + '" ',
43- 'data-ng-model="ngModel.parameters[field.name]">',
44- '</div>',
45- '</div>'
46- ].join(''));
47+ $templateCache.put('directive/templates/power-parameters.html',
48+ `<div class="p-form__group u-clearfix">
49+ <label for="power-type"
50+ class="p-form__label col-2 mobile-col-2 tablet-col-2"
51+ data-ng-class="{'is-disabled': !ngModel.editing }">
52+ Power type
53+ </label>
54+ <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
55+ <select name="power-type" id="power-type"
56+ data-ng-disabled="ngDisabled || ngModel.in_pod"
57+ data-ng-class="{ invalid: !ngModel.type }"
58+ data-ng-model="ngModel.type"
59+ data-ng-options="type as type.description
60+ for type in maasPowerParameters track by type.name">
61+ <option value="" disabled selected>
62+ Select your power type
63+ </option>
64+ </select>
65+ </div>
66+ </div>
67+ <div class="p-form__group u-clearfix"
68+ data-ng-repeat="field in ngModel.type.fields">
69+ <label for="{$ field.name $}"
70+ class="p-form__label col-2 mobile-col-2 tablet-col-2"
71+ data-ng-class="{'is-disabled': !ngModel.editing }"
72+ data-ng-if="field.name !== 'default_storage_pool' &&
73+ (field.scope !== 'bmc' || !ngModel.in_pod)">
74+ {$ field.label $}
75+ </label>
76+ <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
77+ <maas-power-input field="field"
78+ data-ng-disabled="ngDisabled ||
79+ (field.scope === 'bmc' && ngModel.in_pod)"
80+ data-ng-if="field.name !== 'default_storage_pool'
81+ && (field.scope !== 'bmc' || !ngModel.in_pod)"
82+ data-ng-model="ngModel.parameters[field.name]">
83+ </div>
84+ </div>`
85+ );
86 }]);
87
88 angular.module('MAAS').directive('maasPowerInput', ['$compile',
89diff --git a/src/maasserver/static/js/angular/directives/tests/test_power_parameters.js b/src/maasserver/static/js/angular/directives/tests/test_power_parameters.js
90index d760a12..fc1e39e 100644
91--- a/src/maasserver/static/js/angular/directives/tests/test_power_parameters.js
92+++ b/src/maasserver/static/js/angular/directives/tests/test_power_parameters.js
93@@ -195,9 +195,9 @@ describe("maasPowerParameters", function() {
94 var directive = compileDirective("powerTypes", "value");
95 var select = directive.find("select");
96 expect(select.attr("data-ng-model")).toBe("ngModel.type");
97- expect(select.attr("data-ng-options")).toBe("type as " +
98- "type.description for type " +
99- "in maasPowerParameters track by type.name");
100+ expect(select.attr("data-ng-options")).toBe(
101+ `type as type.description
102+ for type in maasPowerParameters track by type.name`);
103 expect(select.attr("data-ng-disabled")).toBe(
104 "ngDisabled || ngModel.in_pod");
105 });
106diff --git a/src/maasserver/static/js/angular/factories/tests/test_zones.js b/src/maasserver/static/js/angular/factories/tests/test_zones.js
107index dc5a8de..0cd424a 100644
108--- a/src/maasserver/static/js/angular/factories/tests/test_zones.js
109+++ b/src/maasserver/static/js/angular/factories/tests/test_zones.js
110@@ -60,7 +60,6 @@ describe("ZonesManager", function() {
111 for(i=0;i<3;i++) {
112 ZonesManager._items.push(makeZone());
113 }
114-
115 expect(ZonesManager.getDefaultZone({
116 zone: ZonesManager._items[2].id
117 })).toBe(
118diff --git a/src/maasserver/static/partials/dashboard.html b/src/maasserver/static/partials/dashboard.html
119index c9d6eed..b0b36b7 100644
120--- a/src/maasserver/static/partials/dashboard.html
121+++ b/src/maasserver/static/partials/dashboard.html
122@@ -115,7 +115,7 @@
123 <div class="row is-active">
124 <div class="col-6">
125 <div class="p-form__group u-clearfix">
126- <label class="p-form__label col-2 mobile-col-2 tablet-col-2"><strong>Mac</strong></label>
127+ <label class="p-form__label is-disabled col-2 mobile-col-2 tablet-col-2">Mac</label>
128 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
129 <span class="p-control-text">
130 {$ discovery.mac_address $}
131@@ -123,7 +123,7 @@
132 </div>
133 </div>
134 <div class="p-form__group u-clearfix">
135- <label class="p-form__label col-2 mobile-col-2 tablet-col-2"><strong>IP</strong></label>
136+ <label class="p-form__label is-disabled col-2 mobile-col-2 tablet-col-2">IP</label>
137 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
138 <span class="p-control-text">
139 {$ discovery.ip $}
140@@ -131,7 +131,7 @@
141 </div>
142 </div>
143 <div class="p-form__group u-clearfix">
144- <label class="p-form__label col-2 mobile-col-2 tablet-col-2"><strong>Rack</strong></label>
145+ <label class="p-form__label is-disabled col-2 mobile-col-2 tablet-col-2">Rack</label>
146 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
147 <span class="p-control-text">
148 {$ discovery.observer_hostname $}
149@@ -139,7 +139,7 @@
150 </div>
151 </div>
152 <div class="p-form__group u-clearfix">
153- <label class="p-form__label col-2 mobile-col-2 tablet-col-2"><strong>Last seen</strong></label>
154+ <label class="p-form__label is-disabled col-2 mobile-col-2 tablet-col-2">Last seen</label>
155 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
156 <span class="p-control-text">
157 {$ discovery.last_seen $}
158@@ -149,7 +149,7 @@
159 </div>
160 <div class="col-6">
161 <div class="p-form__group u-clearfix">
162- <label class="p-form__label col-2 mobile-col-2 tablet-col-2"><strong>Fabric</strong></label>
163+ <label class="p-form__label is-disabled col-2 mobile-col-2 tablet-col-2">Fabric</label>
164 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
165 <span class="p-control-text">
166 {$ discovery.fabric_name $}
167@@ -157,7 +157,7 @@
168 </div>
169 </div>
170 <div class="p-form__group u-clearfix">
171- <label class="p-form__label col-2 mobile-col-2 tablet-col-2"><strong>VLAN</strong></label>
172+ <label class="p-form__label is-disabled col-2 mobile-col-2 tablet-col-2">VLAN</label>
173 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
174 <span class="p-control-text">
175 {$ getVLANName(discovery.vlan) $}
176@@ -165,7 +165,7 @@
177 </div>
178 </div>
179 <div class="p-form__group u-clearfix">
180- <label class="p-form__label col-2 mobile-col-2 tablet-col-2"><strong>Subnet</strong></label>
181+ <label class="p-form__label is-disabled col-2 mobile-col-2 tablet-col-2">Subnet</label>
182 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
183 <a href="#/subnet/{$ discovery.subnet $}" class="p-control-text">{$ getSubnetName(discovery.subnet) $}</a>
184 </div>
185diff --git a/src/maasserver/static/partials/domain-details.html b/src/maasserver/static/partials/domain-details.html
186index 4240de3..2104073 100644
187--- a/src/maasserver/static/partials/domain-details.html
188+++ b/src/maasserver/static/partials/domain-details.html
189@@ -133,16 +133,16 @@
190 <div class="form p-form--stacked row" data-ng-if="editSummary != true">
191 <div class="col-6">
192 <div class="p-form__group">
193- <div class="p-form__label">
194- <p><strong>Name</strong></p>
195+ <div class="p-form__label is-disabled">
196+ <p>Name</p>
197 </div>
198 <div class="p-form__control">
199 <p>{$ domain.name $}</p>
200 </div>
201 </div>
202 <div class="p-form__group">
203- <div class="p-form__label">
204- <p><strong>TTL</strong></p>
205+ <div class="p-form__label is-disabled">
206+ <p>TTL</p>
207 </div>
208 <div class="p-form__control">
209 <p data-ng-if="domain.ttl">{$ domain.ttl $}</p>
210@@ -152,8 +152,8 @@
211 </div>
212 <div class="col-6">
213 <div class="p-form__group">
214- <div class="p-form__label">
215- <p><strong>Authoritative</strong></p>
216+ <div class="p-form__label is-disabled">
217+ <p>Authoritative</p>
218 </div>
219 <div class="p-form__control">
220 <span data-ng-if="domain.authoritative == false">No</span>
221diff --git a/src/maasserver/static/partials/fabric-details.html b/src/maasserver/static/partials/fabric-details.html
222index b6d51d9..a64c43a 100644
223--- a/src/maasserver/static/partials/fabric-details.html
224+++ b/src/maasserver/static/partials/fabric-details.html
225@@ -83,16 +83,16 @@
226 <div class="form p-form--stacked row" data-ng-if="editSummary != true">
227 <div class="col-6">
228 <div class="p-form__group">
229- <div class="p-form__label col-2 tablet-col-2">
230- <div><strong>Name:</strong></div>
231+ <div class="p-form__label is-disabled col-2 tablet-col-2">
232+ <div>Name</div>
233 </div>
234 <div class="p-form__control col-3 tablet-col-4">
235 <p>{$ fabric.name $}</p>
236 </div>
237 </div>
238 <div class="p-form__group">
239- <div class="p-form__label col-2 tablet-col-2">
240- <div><strong>Description:</strong></div>
241+ <div class="p-form__label is-disabled col-2 tablet-col-2">
242+ <div>Description</div>
243 </div>
244 <div class="p-form__control col-4 tablet-col-4">
245 <p>{$ fabric.description $}</p>
246@@ -101,12 +101,12 @@
247 </div>
248 <div class="col-6">
249 <div class="p-form__group">
250- <div class="p-form__label col-2 tablet-col-2">
251- <div><strong>Rack controllers</strong></div>
252+ <div class="p-form__label is-disabled col-2 tablet-col-2">
253+ <div>Rack controllers</div>
254 </div>
255 <div class="p-form__control col-3 tablet-col-4">
256 <span data-ng-repeat="rack in racks | orderBy:'hostname' track by rack.system_id">
257- <a href="#/controller/{$ rack.system_id $}">{$ rack.hostname $}</a>,
258+ <a href="#/controller/{$ rack.system_id $}">{$ rack.hostname $}</a><span ng-show="!$last">,</span>
259 </span>
260 </div>
261 </div>
262@@ -122,12 +122,12 @@
263 </div>
264 <div class="col-6">
265 <div class="p-form__group">
266- <div class="p-form__label col-2 tablet-col-2">
267+ <div class="p-form__label is-disabled col-2 tablet-col-2">
268 <p>Rack controllers</p>
269 </div>
270 <div class="p-form__control col-3 tablet-col-4">
271 <span data-ng-repeat="rack in racks | orderBy:'hostname' track by rack.system_id">
272- <a href="#/controller/{$ rack.system_id $}">{$ rack.hostname $}</a>,
273+ <a href="#/controller/{$ rack.system_id $}">{$ rack.hostname $}</a><span ng-show="!$last">,</span>
274 </span>
275 </div>
276 </div>
277diff --git a/src/maasserver/static/partials/node-details.html b/src/maasserver/static/partials/node-details.html
278index 77fc542..6411386 100755
279--- a/src/maasserver/static/partials/node-details.html
280+++ b/src/maasserver/static/partials/node-details.html
281@@ -527,7 +527,9 @@
282 <div class="col-6">
283 <div class="p-form__group u-clearfix" data-ng-if="!isDevice && !isController"
284 data-ng-class="{ 'is-error': invalidArchitecture() }">
285- <label for="architecture" class="p-form__label col-2 mobile-col-2 tablet-col-2">Architecture</label>
286+ <label for="architecture"
287+ class="p-form__label col-2 mobile-col-2 tablet-col-2"
288+ data-ng-class="{'is-disabled': !summary.editing }">Architecture</label>
289 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
290 <select name="architecture" id="architecture" class="p-form-validation__input"
291 data-ng-disabled="!summary.editing"
292@@ -538,7 +540,9 @@
293 </div>
294 </div>
295 <div class="p-form__group u-clearfix" data-ng-if="!isDevice && !isController">
296- <label for="min_hwe_kernel" class="p-form__label col-2 mobile-col-2 tablet-col-2">Minimum Kernel</label>
297+ <label for="min_hwe_kernel"
298+ class="p-form__label col-2 mobile-col-2 tablet-col-2"
299+ data-ng-class="{'is-disabled': !summary.editing }">Minimum Kernel</label>
300 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
301 <select name="min_hwe_kernel" id="min_hwe_kernel"
302 data-ng-disabled="!summary.editing"
303@@ -549,7 +553,9 @@
304 </div>
305 </div>
306 <div class="p-form__group u-clearfix">
307- <label for="zone" class="p-form__label col-2 mobile-col-2 tablet-col-2">Zone</label>
308+ <label for="zone"
309+ class="p-form__label col-2 mobile-col-2 tablet-col-2"
310+ data-ng-class="{'is-disabled': !summary.editing }">Zone</label>
311 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
312 <select name="zone" id="zone"
313 data-ng-disabled="!summary.editing"
314@@ -560,7 +566,9 @@
315 </div>
316 </div>
317 <div class="p-form__group u-clearfix" data-ng-if="!isDevice && !isController">
318- <label for="pool" class="p-form__label col-2 mobile-col-2 tablet-col-2">Resource pool</label>
319+ <label for="pool"
320+ class="p-form__label col-2 mobile-col-2 tablet-col-2"
321+ data-ng-class="{'is-disabled': !summary.editing }">Resource pool</label>
322 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
323 <select name="pool" id="pool"
324 data-ng-disabled="!summary.editing"
325@@ -571,7 +579,8 @@
326 </div>
327 </div>
328 <div class="p-form__group u-clearfix">
329- <label class="p-form__label col-2 mobile-col-2 tablet-col-2">Tags</label>
330+ <label class="p-form__label col-2 mobile-col-2 tablet-col-2"
331+ data-ng-class="{'is-disabled': !summary.editing }">Tags</label>
332 <div class="p-form__control col-3 mobile-col-2 tablet-col-3 tags--inline">
333 <span data-ng-repeat="tag in node.tags" data-ng-hide="summary.editing">
334 <a href="#/machines/?query=tags:({$ tag $})">{$ tag $}</a>
335diff --git a/src/maasserver/static/partials/node-result.html b/src/maasserver/static/partials/node-result.html
336index 4acabb1..d5f427e 100644
337--- a/src/maasserver/static/partials/node-result.html
338+++ b/src/maasserver/static/partials/node-result.html
339@@ -24,7 +24,7 @@
340 <div class="col-6">
341 <div class="p-form__group">
342 <div class="p-form__label">
343- <strong>Status</strong>
344+ Status
345 </div>
346 <div class="p-form__control">
347 <p class="ng-binding u-no-padding--top">
348@@ -34,7 +34,7 @@
349 </div>
350 <div class="p-form__group">
351 <div class="p-form__label">
352- <strong>Exit Status</strong>
353+ Exit Status
354 </div>
355 <div class="p-form__control">
356 <p class="ng-binding u-no-padding--top" data-ng-if="result.exit_status || result.exit_status === 0">{$ result.exit_status $}</p>
357@@ -43,7 +43,7 @@
358 </div>
359 <div class="p-form__group">
360 <div class="p-form__label">
361- <strong>Tags</strong>
362+ Tags
363 </div>
364 <div class="p-form__control">
365 <p class="ng-binding u-no-padding--top" data-ng-if="result.tags">{$ result.tags $}</p>
366@@ -54,7 +54,7 @@
367 <div class="col-6">
368 <div class="p-form__group">
369 <div class="p-form__label">
370- <strong>Start Time</strong>
371+ Start Time
372 </div>
373 <div class="p-form__control">
374 <p class="ng-binding u-no-padding--top" data-ng-if="result.started">{$ result.started $}</p>
375@@ -63,7 +63,7 @@
376 </div>
377 <div class="p-form__group">
378 <div class="p-form__label">
379- <strong>End Time</strong>
380+ End Time
381 </div>
382 <div class="p-form__control">
383 <p class="ng-binding u-no-padding--top" data-ng-if="result.ended">{$ result.ended $}</p>
384@@ -72,7 +72,7 @@
385 </div>
386 <div class="p-form__group">
387 <div class="p-form__label">
388- <strong>Runtime</strong>
389+ Runtime
390 </div>
391 <div class="p-form__control">
392 <p class="ng-binding u-no-padding--top" data-ng-if="result.runtime">{$ result.runtime $}</p>
393diff --git a/src/maasserver/static/partials/subnet-details.html b/src/maasserver/static/partials/subnet-details.html
394index e449d35..3d884dd 100755
395--- a/src/maasserver/static/partials/subnet-details.html
396+++ b/src/maasserver/static/partials/subnet-details.html
397@@ -84,24 +84,24 @@
398 <div class="form p-form--stacked row" data-ng-if="editSummary != true">
399 <div class="col-6">
400 <div class="p-form__group">
401- <div class="p-form__label col-2 tablet-col-2">
402- <p><strong>Name</strong></p>
403+ <div class="p-form__label is-disabled col-2 tablet-col-2">
404+ <p>Name</p>
405 </div>
406 <div class="p-form__control col-4 tablet-col-3">
407 <p>{$ subnet.name $}</p>
408 </div>
409 </div>
410 <div class="p-form__group">
411- <div class="p-form__label col-2 tablet-col-2">
412- <p><strong>CIDR</strong></p>
413+ <div class="p-form__label is-disabled col-2 tablet-col-2">
414+ <p>CIDR</p>
415 </div>
416 <div class="p-form__control col-4 tablet-col-3">
417 <p>{$ subnet.cidr $}</span>
418 </div>
419 </div>
420 <div class="p-form__group">
421- <div class="p-form__label col-2 tablet-col-2">
422- <p><strong>Gateway IP</strong></p>
423+ <div class="p-form__label is-disabled col-2 tablet-col-2">
424+ <p>Gateway IP</p>
425 </div>
426 <div class="p-form__control col-4 tablet-col-3">
427 <p data-ng-if="subnet.gateway_ip">{$ subnet.gateway_ip $}</p>
428@@ -109,8 +109,8 @@
429 </div>
430 </div>
431 <div class="p-form__group">
432- <div class="p-form__label col-2 tablet-col-2">
433- <p><strong>DNS</strong></p>
434+ <div class="p-form__label is-disabled col-2 tablet-col-2">
435+ <p>DNS</p>
436 </div>
437 <div class="p-form__control col-4 tablet-col-3">
438 <p data-ng-if="subnet.dns_servers">{$ subnet.dns_servers $}</p>
439@@ -118,8 +118,8 @@
440 </div>
441 </div>
442 <div class="p-form__group">
443- <div class="p-form__label col-2 tablet-col-2">
444- <p><strong>Description</strong></p>
445+ <div class="p-form__label is-disabled col-2 tablet-col-2">
446+ <p>Description</p>
447 </div>
448 <div class="p-form__control col-4 tablet-col-3">
449 <p data-ng-if="subnet.description">{$ subnet.description $}</p>
450@@ -129,9 +129,9 @@
451 </div>
452 <div class="col-6">
453 <div class="p-form__group">
454- <div class="p-form__label col-2 tablet-col-2">
455+ <div class="p-form__label is-disabled col-2 tablet-col-2">
456 <p>
457- <strong>Managed allocation</strong>
458+ Managed allocation
459 <span data-ng-if="subnet.managed == false" class="p-tooltip p-tooltip--btm-right">
460 <i class="p-icon--information">Help:</i>
461 <span class="p-tooltip__message" role="tooltip">MAAS allocates IP addresses only from&#xa;the reserved ranges on this subnet.</span>
462@@ -149,9 +149,9 @@
463 </div>
464 </div>
465 <div class="p-form__group">
466- <div class="p-form__label col-2 tablet-col-2">
467+ <div class="p-form__label is-disabled col-2 tablet-col-2">
468 <p>
469- <strong>Active discovery</strong>
470+ Active discovery
471 <span data-ng-if="subnet.managed == true" class="p-tooltip p-tooltip--btm-right">
472 <i class="p-icon--information u-no-margin--right">Help:</i>
473 <span class="p-tooltip__message" role="tooltip">When enabled, MAAS will scan this subnet {$ active_discovery_interval | lowercase $}&#xa;to discover hosts that have not been discovered passively.</span>
474@@ -164,9 +164,9 @@
475 </div>
476 </div>
477 <div class="p-form__group">
478- <div class="p-form__label col-2 tablet-col-2">
479+ <div class="p-form__label is-disabled col-2 tablet-col-2">
480 <p>
481- <strong>Proxy access</strong>
482+ Proxy access
483 <span data-ng-if="subnet.allow_proxy == false" class="p-tooltip p-tooltip--btm-right">
484 <i class="p-icon--information">Help:</i>
485 <span class="p-tooltip__message" role="tooltip">MAAS will not allow clients from this&#xa;subnet to access the MAAS proxy.</span>
486@@ -184,9 +184,9 @@
487 </div>
488 </div>
489 <div class="p-form__group">
490- <div class="p-form__label col-2 tablet-col-2">
491+ <div class="p-form__label is-disabled col-2 tablet-col-2">
492 <p>
493- <strong>Allow DNS resolution</strong>
494+ Allow DNS resolution
495 <span data-ng-if="subnet.allow_dns == false" class="p-tooltip p-tooltip--btm-right">
496 <i class="p-icon--information">Help:</i>
497 <span class="p-tooltip__message" role="tooltip">MAAS will not allow clients from this&#xa;subnet to use MAAS for DNS resolution.</span>
498@@ -204,34 +204,36 @@
499 </div>
500 </div>
501 <div class="p-form__group">
502- <div class="p-form__label col-2 tablet-col-2">
503- <p><strong>Fabric</strong></p>
504+ <div class="p-form__label is-disabled col-2 tablet-col-2">
505+ <p>Fabric</p>
506 </div>
507 <div class="p-form__control col-4 tablet-col-3">
508 <p>{$ subnet.fabric_name $}</p>
509 </div>
510 </div>
511 <div class="p-form__group">
512- <div class="p-form__label col-2 tablet-col-2">
513- <p><strong>VLAN</strong></p>
514+ <div class="p-form__label is-disabled col-2 tablet-col-2">
515+ <p>VLAN</p>
516 </div>
517 <div class="p-form__control col-4 tablet-col-3">
518 <p>{$ subnet.vlan_name $}</p>
519 </div>
520 </div>
521 <div class="p-form__group">
522- <div class="p-form__label col-2 tablet-col-2">
523- <p><strong>Space</strong></p>
524+ <div class="p-form__label is-disabled col-2 tablet-col-2">
525+ <p>Space</p>
526 </div>
527 <div class="p-form__control col-4 tablet-col-3">
528- <a data-ng-if="space !== null" href="#/space/{$ space.id $}">{$ space.name $}</a>
529- <span data-ng-if="space === null">
530- (undefined)
531- <span class="p-tooltip p-tooltip--top-center">
532- <i class="p-icon--warning">Warning:</i>
533- <span class="p-tooltip__message" role="tooltip">This subnet does not belong to a space.&#xa;MAAS integrations require a space in order to determine the purpose of a network.</span>
534+ <p>
535+ <a data-ng-if="space !== null" href="#/space/{$ space.id $}">{$ space.name $}</a>
536+ <span data-ng-if="space === null">
537+ (undefined)
538+ <span class="p-tooltip p-tooltip--top-center">
539+ <i class="p-icon--warning">Warning:</i>
540+ <span class="p-tooltip__message" role="tooltip">This subnet does not belong to a space.&#xa;MAAS integrations require a space in order to determine the purpose of a network.</span>
541+ </span>
542 </span>
543- </span>
544+ </p>
545 </div>
546 </div>
547 </div>
548@@ -286,18 +288,20 @@
549 options="v.id as getVLANName(v) for v in vlans | filterByFabric:subnet.$maasForm.getValue('fabric')"
550 label-width="2" label-width-tablet="2" input-width="3" input-width-tablet="4"></maas-obj-field>
551 <div class="p-form__group">
552- <div class="p-form__label col-2 tablet-col-2">
553+ <div class="p-form__label is-disabled col-2 tablet-col-2">
554 <p>Space</p>
555 </div>
556 <div class="p-form__control col-4 tablet-col-3">
557- <a data-ng-if="space !== null" href="#/space/{$ space.id $}">{$ space.name $}</a>
558- <span data-ng-if="space === null">
559- (undefined)
560- <span class="p-tooltip p-tooltip--top-center">
561- <i class="p-icon--warning">Warning:</i>
562- <span class="p-tooltip__message" role="tooltip">This subnet does not belong to a space.&#xa;MAAS integrations require a space in order to determine the purpose of a network.</span>
563+ <p>
564+ <a data-ng-if="space !== null" href="#/space/{$ space.id $}">{$ space.name $}</a>
565+ <span data-ng-if="space === null">
566+ (undefined)
567+ <span class="p-tooltip p-tooltip--top-center">
568+ <i class="p-icon--warning">Warning:</i>
569+ <span class="p-tooltip__message" role="tooltip">This subnet does not belong to a space.&#xa;MAAS integrations require a space in order to determine the purpose of a network.</span>
570+ </span>
571 </span>
572- </span>
573+ </p>
574 </div>
575 </div>
576 </div>
577@@ -477,7 +481,7 @@
578 <div class="col-6">
579 <div class="row">
580 <div class="col-2">
581- <p><strong>Subnet addresses</strong></p>
582+ <p class="p-form__label is-disabled">Subnet addresses</p>
583 </div>
584 <div class="col-4">
585 <p>{$ subnet.statistics.total_addresses $}</p>
586@@ -486,7 +490,7 @@
587
588 <div class="row">
589 <div class="col-2">
590- <p><strong>Availability</strong></p>
591+ <p class="p-form__label is-disabled">Availability</p>
592 </div>
593 <div class="col-4">
594 <p>{$ subnet.statistics.num_available $} ({$ subnet.statistics.available_string $})</p>
595@@ -499,7 +503,7 @@
596 <!-- <dt class="u-hide ng-hide">Reserved</dt>
597 <dd class="u-hide ng-hide">10%</dd> -->
598 <div class="col-2">
599- <p><strong>Used</strong></p>
600+ <p class="p-form__label is-disabled">Used</p>
601 </div>
602 <div class="col-4">
603 <p>{$ subnet.statistics.usage_string $}</p>
604diff --git a/src/maasserver/static/partials/vlan-details.html b/src/maasserver/static/partials/vlan-details.html
605index b363f0f..22d97dd 100644
606--- a/src/maasserver/static/partials/vlan-details.html
607+++ b/src/maasserver/static/partials/vlan-details.html
608@@ -240,40 +240,40 @@
609 <div class="p-form p-form--stacked row" data-ng-if="!vlanDetails.editSummary">
610 <div class="col-6">
611 <div class="p-form__group">
612- <div class="p-form__label col-2 mobile-col-2 tablet-col-2">
613- <p><strong>VID</strong></p>
614+ <div class="p-form__label is-disabled col-2 mobile-col-2 tablet-col-2">
615+ <p>VID</p>
616 </div>
617 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
618 <p>{$ vlanDetails.vlan.vid $}</p>
619 </div>
620 </div>
621 <div class="p-form__group">
622- <div class="p-form__label col-2 mobile-col-2 tablet-col-2">
623- <p><strong>Name</strong></p>
624+ <div class="p-form__label is-disabled col-2 mobile-col-2 tablet-col-2">
625+ <p>Name</p>
626 </div>
627 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
628 <p>{$ vlanDetails.vlan.name $}</p>
629 </div>
630 </div>
631 <div class="p-form__group">
632- <div class="p-form__label col-2 mobile-col-2 tablet-col-2">
633- <p><strong>MTU</strong></p>
634+ <div class="p-form__label is-disabled col-2 mobile-col-2 tablet-col-2">
635+ <p>MTU</p>
636 </div>
637 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
638 <p>{$ vlanDetails.vlan.mtu $}</p>
639 </div>
640 </div>
641 <div class="p-form__group">
642- <div class="p-form__label col-2 mobile-col-2 tablet-col-2">
643- <p><strong>Space</strong></p>
644+ <div class="p-form__label is-disabled col-2 mobile-col-2 tablet-col-2">
645+ <p>Space</p>
646 </div>
647 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
648 <p>{$ vlanDetails.getSpaceName() $}</p>
649 </div>
650 </div>
651 <div class="p-form__group">
652- <div class="p-form__label col-2 mobile-col-2 tablet-col-2">
653- <p><strong>Description</strong></p>
654+ <div class="p-form__label is-disabled col-2 mobile-col-2 tablet-col-2">
655+ <p>Description</p>
656 </div>
657 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
658 <p>{$ vlanDetails.vlan.description $}</p>
659@@ -282,16 +282,16 @@
660 </div>
661 <div class="col-6">
662 <div class="p-form__group">
663- <div class="p-form__label col-2 mobile-col-2 tablet-col-2">
664- <p><strong>Fabric</strong></p>
665+ <div class="p-form__label is-disabled col-2 mobile-col-2 tablet-col-2">
666+ <p>Fabric</p>
667 </div>
668 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
669 <p><a href="#/fabric/{$ vlanDetails.fabric.id $}">{$ vlanDetails.fabric.name $}</a></p>
670 </div>
671 </div>
672 <div class="p-form__group" data-ng-if="vlanDetails.relatedControllers">
673- <div class="p-form__label col-2 mobile-col-2 tablet-col-2">
674- <p><strong>Rack controllers</strong>
675+ <div class="p-form__label is-disabled col-2 mobile-col-2 tablet-col-2">
676+ <p>Rack controllers
677 <span class="p-tooltip p-tooltip--top-center">
678 <i class="p-icon--information">Help:</i>
679 <span class="p-tooltip__message" role="tooltip">A rack controller controls hosts and images and runs network services&#xa;like DHCP for connected VLANs.</span>
680@@ -299,7 +299,7 @@
681 </div>
682 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
683 <span data-ng-repeat="rack in vlanDetails.relatedControllers">
684- <a href="#/controller/{$ rack.system_id $}">{$ rack.hostname $}</a>,
685+ <a href="#/controller/{$ rack.system_id $}">{$ rack.hostname $}</a><span ng-show="!$last">,</span>
686 </span>
687 </div>
688 </div>
689@@ -326,17 +326,19 @@
690 <maas-obj-field type="options" key="fabric" label="Fabric"
691 options="fabric.id as fabric.name for fabric in vlanDetails.fabrics" label-width="2" label-width-tablet="2" input-width="3" input-width-tablet="4"></maas-obj-field>
692 <div class="p-form__group" data-ng-if="vlanDetails.relatedControllers">
693- <div class="p-form__label col-2 mobile-col-2 tablet-col-2">
694- <p><strong>Rack controllers</strong>
695+ <div class="p-form__label is-disabled col-2 mobile-col-2 tablet-col-2">
696+ <p>Rack controllers
697 <span class="p-tooltip p-tooltip--top-center">
698 <i class="p-icon--information">Help:</i>
699 <span class="p-tooltip__message" role="tooltip">A rack controller controls hosts and images and runs network services&#xa;like DHCP for connected VLANs.</span>
700 </span></p>
701 </div>
702 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
703- <span data-ng-repeat="rack in vlanDetails.relatedControllers">
704- <a href="#/controller/{$ rack.system_id $}">{$ rack.hostname $}</a>,
705- </span>
706+ <p>
707+ <span data-ng-repeat="rack in vlanDetails.relatedControllers">
708+ <a href="#/controller/{$ rack.system_id $}">{$ rack.hostname $}</a><span ng-show="!$last">,</span>
709+ </span>
710+ </p>
711 </div>
712 </div>
713 </div>
714@@ -365,8 +367,8 @@
715 <div class="p-form p-form--stacked row">
716 <div class="col-8">
717 <div class="p-form__group">
718- <div class="p-form__label">
719- <p><strong>Status</strong></p>
720+ <div class="p-form__label is-disabled">
721+ <p>Status</p>
722 </div>
723 <div class="p-form__control">
724 <p>{$ vlanDetails.getDHCPStatus() $}</p>
725@@ -374,8 +376,8 @@
726 </div>
727
728 <div class="p-form__group" data-ng-if="vlanDetails.vlan.external_dhcp">
729- <div class="p-form__label">
730- <p><strong>External DHCP</strong></p>
731+ <div class="p-form__label is-disabled">
732+ <p>External DHCP</p>
733 </div>
734 <div class="p-form__control">
735 <p>
736@@ -388,9 +390,9 @@
737 </div>
738 </div>
739 <div class="p-form__group" data-ng-if="vlanDetails.primaryRack">
740- <div class="p-form__label">
741+ <div class="p-form__label is-disabled">
742 <p>
743- <strong>Primary controller</strong>
744+ Primary controller
745 <span class="p-tooltip p-tooltip--top-center">
746 <i class="p-icon--help">Help:</i>
747 <span class="p-tooltip__message" role="tooltip">The rack controller where DHCP service runs on.</span>
748@@ -402,9 +404,9 @@
749 </div>
750 </div>
751 <div class="p-form__group" data-ng-if="vlanDetails.secondaryRack">
752- <div class="p-form__label">
753+ <div class="p-form__label is-disabled">
754 <p>
755- <strong>Secondary controller</strong>
756+ Secondary controller
757 <span class="p-tooltip p-tooltip--top-center">
758 <i class="p-icon--help">Help:</i>
759 <span class="p-tooltip__message" role="tooltip">The rack controller that will take over DHCP services if the primary fails.</span>
760diff --git a/src/maasserver/static/partials/zone-details.html b/src/maasserver/static/partials/zone-details.html
761index 2a81b5e..cb5d7e7 100644
762--- a/src/maasserver/static/partials/zone-details.html
763+++ b/src/maasserver/static/partials/zone-details.html
764@@ -70,25 +70,19 @@
765 <div class="row form p-form--stacked" data-ng-if="editSummary != true">
766 <div class="col-6">
767 <div class="p-form__group">
768- <div class="p-form__label">
769- <p><strong>Name</strong></p>
770- </div>
771+ <p class="p-form__label is-disabled">Name</p>
772 <div class="p-form__control">
773 <p>{$ zone.name $}</p>
774 </div>
775 </div>
776 <div class="p-form__group">
777- <div class="p-form__label">
778- <p><strong>Description</strong></p>
779- </div>
780+ <p class="p-form__label is-disabled">Description</p>
781 <div class="p-form__control">
782 <p>{$ zone.description $}</p>
783 </div>
784 </div>
785 <div class="p-form__group">
786- <div class="p-form__label">
787- <p><strong>Machines</strong></p>
788- </div>
789+ <p class="p-form__label is-disabled">Machines</p>
790 <div class="p-form__control">
791 <p>{$ zone.machines_count $}</p>
792 </div>
793@@ -103,12 +97,12 @@
794 label-width="2" input-width="4" blur-on-enter="true"></maas-obj-field>
795 <maas-obj-field type="textarea" key="description" label="Description" placeholder="Zone description"
796 label-width="2" input-width="4" blur-on-enter="true"></maas-obj-field>
797- <dl>
798- <dt class="col-2">Machines</dt>
799- <dd class="col-4">
800+ <div class="p-form__group">
801+ <p class="p-form__label is-disabled">Machines</p>
802+ <div class="p-form__control">
803 <a href="#/machines&query=zone:({$ zone.name $})">{$ zone.machines_count $}</a>
804- </dd>
805- </dl>
806+ </div>
807+ </div>
808 </div>
809 </div>
810 <div class="row">
811diff --git a/src/maasserver/static/scss/_patterns_forms.scss b/src/maasserver/static/scss/_patterns_forms.scss
812index 812e66f..276b6d8 100644
813--- a/src/maasserver/static/scss/_patterns_forms.scss
814+++ b/src/maasserver/static/scss/_patterns_forms.scss
815@@ -14,6 +14,20 @@
816 padding-right: $sp-x-large;
817 }
818 }
819+
820+ .p-form__label {
821+ color: $color-dark;
822+
823+ &.is-disabled {
824+ color: $color-mid-dark;
825+ }
826+ }
827+
828+ maas-obj-form[disabled="disabled"] {
829+ .p-form__label {
830+ color: $color-mid-dark;
831+ }
832+ }
833 }
834
835 @mixin maas-p-form-stacked {
836diff --git a/src/maasserver/templates/maasserver/user_view.html b/src/maasserver/templates/maasserver/user_view.html
837index 5028a4e..1d6cf98 100644
838--- a/src/maasserver/templates/maasserver/user_view.html
839+++ b/src/maasserver/templates/maasserver/user_view.html
840@@ -11,19 +11,19 @@
841 <div class="row">
842 <div class="col-6">
843 <div class="p-form__group">
844- <p class="p-form__label col-2 tablet-col-2"><strong>Username</strong></p>
845+ <p class="p-form__label col-2 tablet-col-2">Username</p>
846 <div class="p-form__control col-4 tablet-col-3">
847 <p>{{ view_user.username }}</p>
848 </div>
849 </div>
850 <div class="p-form__group">
851- <p class="p-form__label col-2 tablet-col-2"><strong>Full name</strong></p>
852+ <p class="p-form__label col-2 tablet-col-2">Full name</p>
853 <div class="p-form__control col-4 tablet-col-3">
854 <p>{{ view_user.last_name }}</p>
855 </div>
856 </div>
857 <div class="p-form__group">
858- <p class="p-form__label col-2 tablet-col-2"><strong>Email address</strong></p>
859+ <p class="p-form__label col-2 tablet-col-2">Email address</p>
860 <div class="p-form__control col-4 tablet-col-3">
861 <p>{{ view_user.email }}</p>
862 </div>
863@@ -31,14 +31,14 @@
864 </div>
865 <div class="col-6">
866 <div class="p-form__group">
867- <p class="p-form__label col-2 tablet-col-2"><strong>MAAS Keys</strong></p>
868+ <p class="p-form__label col-2 tablet-col-2">MAAS Keys</p>
869 <div class="p-form__control col-4 tablet-col-3">
870 <p>{{ user.userprofile.get_authorisation_tokens.count }}
871 key{{ user.userprofile.get_authorisation_tokens.count|pluralize }}</p>
872 </div>
873 </div>
874 <div class="p-form__group">
875- <p class="p-form__label col-2 tablet-col-2"><strong>MAAS Administrator</strong></p>
876+ <p class="p-form__label col-2 tablet-col-2">MAAS Administrator</p>
877 <div class="p-form__control col-4 tablet-col-3">
878 <p>{{ view_user.is_superuser }}</p>
879 </div>

Subscribers

People subscribed via source and target branches