MAAS

Merge ~ya-bo-ng/maas:settings-qa into ~deadlight/maas:vanilla

  1. Git
  2. lp:~ya-bo-ng/maas
  3. settings-qa
  4. Merge into vanilla
Proposed by Anthony Dillon
Status: Merged
Merged at revision: 4eb1c5f5f21a377a4cc16508bb57ce60b7a8c5d9
Proposed branch: ~ya-bo-ng/maas:settings-qa
Merge into: ~deadlight/maas:vanilla
Diff against target: 365 lines (+104/-75)
8 files modified
src/maasserver/static/js/angular/directives/tests/test_maas_obj_form.js (+1/-1)
src/maasserver/static/partials/node-details.html (+1/-1)
src/maasserver/static/partials/settings.html (+19/-18)
src/maasserver/static/partials/ssh-keys.html (+15/-14)
src/maasserver/static/scss/_maas.scss (+14/-0)
src/maasserver/static/scss/_patterns_icons.scss (+1/-1)
src/maasserver/templates/maasserver/form_field.html (+8/-4)
src/maasserver/templates/maasserver/user_view.html (+45/-36)
Reviewer Review Type Date Requested Status
Karl Williams Approve
Review via email: mp+337497@code.launchpad.net
To post a comment you must log in.
Revision history for this message
Karl Williams (deadlight) wrote :

All issues addressed +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/js/angular/directives/tests/test_maas_obj_form.js b/src/maasserver/static/js/angular/directives/tests/test_maas_obj_form.js
2index faa744a..81d2c69 100644
3--- a/src/maasserver/static/js/angular/directives/tests/test_maas_obj_form.js
4+++ b/src/maasserver/static/js/angular/directives/tests/test_maas_obj_form.js
5@@ -448,7 +448,7 @@ describe("maasObjForm", function() {
6 var input = angular.element(
7 onoff.find("input.onoffswitch-checkbox"));
8 var label = angular.element(
9- onoff.find("label.onoffswitch-label"));
10+ onoff.find("label.onoffswitch-label u-no-margin--top"));
11 expect(onoff.length).toBe(1);
12 expect(input.length).toBe(1);
13 expect(label.length).toBe(1);
14diff --git a/src/maasserver/static/partials/node-details.html b/src/maasserver/static/partials/node-details.html
15index b7da348..cb42a18 100755
16--- a/src/maasserver/static/partials/node-details.html
17+++ b/src/maasserver/static/partials/node-details.html
18@@ -1280,7 +1280,7 @@
19 <div class="onoffswitch">
20 <input input id="bridge_stp" type="checkbox" name="bridge_stp" class="onoffswitch-checkbox"
21 data-ng-model="newBridgeInterface.bridge_stp">
22- <label class="onoffswitch-label" for="bridge_stp">
23+ <label class="onoffswitch-label u-no-margin--top" for="bridge_stp">
24 <span class="onoffswitch-inner"></span>
25 <span class="onoffswitch-switch"></span>
26 </label>
27diff --git a/src/maasserver/static/partials/settings.html b/src/maasserver/static/partials/settings.html
28index f700394..2980a4b 100644
29--- a/src/maasserver/static/partials/settings.html
30+++ b/src/maasserver/static/partials/settings.html
31@@ -39,7 +39,7 @@
32 <th class="col-2">Type</th>
33 <th class="col-4">Applies to</th>
34 <th class="col-1">Enabled</th>
35- <th class="col-3 u-align--right">Actions</th>
36+ <th class="col-3">Actions</th>
37 <th class="u-hide"><!-- empty cell required for validation --></th>
38 </tr>
39 </thead>
40@@ -56,17 +56,18 @@
41 <span>{$ getSnippetAppliesToText(snippet) $}</span>
42 </td>
43 <td class="col-1" aria-label="Enabled" data-ng-if="editSnippet !== snippet">
44- <div class="onoffswitch">
45+ <div class="onoffswitch" data-ng-if="deleteSnippet !== snippet">
46 <input type="checkbox" name="enabled" class="onoffswitch-checkbox u-float-none" id="enabled-{$ snippet.id $}"
47 data-ng-model="snippet.enabled"
48 data-ng-change="snippetToggle(snippet)">
49- <label class="onoffswitch-label" for="enabled-{$ snippet.id $}">
50+ <label class="onoffswitch-label u-no-margin--top" for="enabled-{$ snippet.id $}">
51 <span class="onoffswitch-inner"></span>
52 <span class="onoffswitch-switch"></span>
53 </label>
54 </div>
55 </td>
56- <td class="col-3 u-align--right" data-ng-if="editSnippet !== snippet && deleteSnippet !== snippet">
57+ <td class="col-3" data-ng-if="editSnippet !== snippet">
58+ <span data-ng-if="deleteSnippet !== snippet">
59 <button aria-label="Edit {$ snippet.name $}"
60 data-ng-click="toggleMenu(); snippetEnterEdit(snippet)">Edit</button>
61 <button aria-label="Remove {$ snippet.name $}"
62@@ -124,8 +125,8 @@
63 disable-label="true" rows="10"></maas-obj-field>
64 </div>
65 </div>
66- <div class="row">
67- <div class="col-8">
68+ <div class="row u-equal-height">
69+ <div class="col-8 u-vertically-center">
70 <maas-obj-errors></maas-obj-errors>
71 </div>
72 <div class="col-4 u-align--right">
73@@ -142,8 +143,8 @@
74 <h2 data-ng-click="snippetExitRemove(snippet)" class="u-float--left">Removing {$ snippet.name $}</h2>
75 <button data-ng-click="snippetExitRemove(snippet)" class="p-icon--close u-float--right"></button>
76 </div>
77- <div class="row u-no-margin--top">
78- <div class="col-6">
79+ <div class="row u-no-margin--top u-equal-height">
80+ <div class="col-6 u-vertically-center">
81 <p><i class="p-icon--warning">Warning:</i> Are you sure you want to remove this snippet?</p>
82 </div>
83 <div class="col-6 u-align--right">
84@@ -165,23 +166,23 @@
85 <div class="col-2">
86 <label for="name" class="u-hide u-show--small">Name</label>
87 <maas-obj-field type="text" key="name" placeholder="Name"
88- disable-label="true" input-class="table__input u-margin--none" class="u-margin--bottom-none"></maas-obj-field>
89+ disable-label="true" input-class="table__input" class="u-no-margin--top"></maas-obj-field>
90 </div>
91 <div class="col-2">
92 <label for="Select type" class="u-hide u-show--small">Select type</label>
93- <maas-obj-field type="options" key="type" class="u-margin--bottom-none" placeholder="Select type"
94- disable-label="true" input-class="table__input u-margin--none"
95+ <maas-obj-field type="options" key="type" class="u-no-margin--top" placeholder="Select type"
96+ disable-label="true" input-class="table__input"
97 options="type for type in snippetTypes"></maas-obj-field>
98 </div>
99 <div class="col-4">
100 <label for="subnet" class="u-hide u-show--small" data-ng-if="newSnippet.$maasForm.getValue('type') === 'Subnet'">Choose subnet</label>
101 <label for="node" class="u-hide u-show--small" data-ng-if="newSnippet.$maasForm.getValue('type') === 'Node'">Choose node</label>
102 <maas-obj-field type="options" key="subnet" placeholder="Choose subnet"
103- disable-label="true" input-class="table__input u-margin--none"
104+ disable-label="true" input-class="table__input"
105 options="subnet.id as getSubnetName(subnet) for subnet in subnets"
106 data-ng-if="newSnippet.$maasForm.getValue('type') === 'Subnet'"></maas-obj-field>
107 <maas-obj-field type="options" key="node" placeholder="Choose node"
108- disable-label="true" input-class="table__input u-margin--none"
109+ disable-label="true" input-class="table__input"
110 options="node.system_id as node.fqdn group by node.node_type_display for node in machines.concat(devices).concat(controllers)"
111 data-ng-if="newSnippet.$maasForm.getValue('type') === 'Node'">
112 </maas-obj-field>
113@@ -194,7 +195,7 @@
114 <input type="checkbox" name="enabled" class="onoffswitch-checkbox" id="newEnabled"
115 data-ng-model="newSnippet.data.enabled"
116 data-ng-disabled="newSnippet.saving" checked>
117- <label class="onoffswitch-label" for="newEnabled">
118+ <label class="onoffswitch-label u-no-margin--top" for="newEnabled">
119 <span class="onoffswitch-inner"></span>
120 <span class="onoffswitch-switch"></span>
121 </label>
122@@ -227,7 +228,7 @@
123 <input type="checkbox" name="enabled" class="onoffswitch-checkbox" id="newEnabled"
124 data-ng-model="newSnippet.data.enabled"
125 data-ng-disabled="newSnippet.saving" checked>
126- <label class="onoffswitch-label" for="newEnabled">
127+ <label class="onoffswitch-label u-no-margin--top" for="newEnabled">
128 <span class="onoffswitch-inner"></span>
129 <span class="onoffswitch-switch"></span>
130 </label>
131@@ -345,7 +346,7 @@
132 <input type="checkbox" name="enabled" class="onoffswitch-checkbox" id="enabled-repo-{$ repository.id $}"
133 data-ng-model="repository.enabled"
134 data-ng-change="repositoryEnabledToggle(repository)">
135- <label class="onoffswitch-label" for="enabled-repo-{$ repository.id $}">
136+ <label class="onoffswitch-label u-no-margin--top" for="enabled-repo-{$ repository.id $}">
137 <span class="onoffswitch-inner"></span>
138 <span class="onoffswitch-switch"></span>
139 </label>
140@@ -355,7 +356,7 @@
141 data-ng-if="isMirror(repository)">
142 <input type="checkbox" name="enabled" class="onoffswitch-checkbox u-float-none" id="enabled-repo-{$ repository.id $}"
143 data-ng-model="repository.enabled">
144- <label class="onoffswitch-label" for="enabled-repo-{$ repository.id $}">
145+ <label class="onoffswitch-label u-no-margin--top" for="enabled-repo-{$ repository.id $}">
146 <span class="onoffswitch-inner"></span>
147 <span class="onoffswitch-switch"></span>
148 </label>
149@@ -481,7 +482,7 @@
150 <div class="col-3">
151 <maas-obj-field class="u-margin--none" type="text" key="name" placeholder="Name" disable-label="true" input-class="table__input u-margin--none"></maas-obj-field>
152 </div>
153- <div class="col-5">
154+ <div class="col-4">
155 <maas-obj-field class="u-margin--none" type="text" key="url" placeholder="URL" disable-label="true" input-class="table__input u-margin--none"></maas-obj-field>
156 </div>
157 <div class="col-2 u-vertically-center">
158diff --git a/src/maasserver/static/partials/ssh-keys.html b/src/maasserver/static/partials/ssh-keys.html
159index 0ddeb6c..9bdce51 100644
160--- a/src/maasserver/static/partials/ssh-keys.html
161+++ b/src/maasserver/static/partials/ssh-keys.html
162@@ -14,28 +14,29 @@
163 <td aria-label="Source" class="col-4">{$ sourceTitles[group.source] $}</td>
164 <td data-ng-if="group.source === 'upload'" data-ng-bind-html="trustAsHtml(group.keys[0].display)" colspan="2" class="col-7">&nbsp;</td>
165 <td data-ng-if="group.source !== 'upload'" aria-label="ID" class="col-4">{$ group.authId $}</td>
166- <td data-ng-if="group.source !== 'upload'" aria-label="Number of keys" class="col-3">
167+ <td data-ng-if="group.source !== 'upload'" aria-label="Number of keys" class="col-1">
168 {$ group.keys.length $}
169- <a class="p-tooltip p-tooltip--top-right" data-ng-click="open(group, 'view')" aria-label="View keys" data-ng-if="group.source !== 'upload' && (openRow !== group.id || rowMode === 'delete')"><i class="p-icon--plus"></i><span class="p-tooltip__message" role="tooltip">View keys</span></a>
170-
171- <a class="p-tooltip p-tooltip--top-right" data-ng-click="close()" aria-label="Hide keys" data-ng-if="group.source !== 'upload' && openRow === group.id && rowMode === 'view'"><i class="p-icon--minus"></i><span class="p-tooltip__message" role="tooltip">Hide keys</span></a>
172 </td>
173- <td class="u-align--right" class="col-1">
174- <a class="p-tooltip p-tooltip--top-right js-delete-link" data-ng-click="open(group, 'delete')"><i class="p-icon--delete"></i><span class="p-tooltip__message" role="tooltip">Delete SSH key</span></a>
175+ <td class="u-align--right" class="col-3 u-align--right">
176+ <a class="p-button u-no-margin--top" data-ng-click="open(group, 'view')" aria-label="Show keys" data-ng-if="group.source !== 'upload' && (openRow !== group.id || rowMode === 'delete')">Show keys</a>
177+ <a class="p-button u-no-margin--top" data-ng-click="close()" aria-label="Hide keys" data-ng-if="group.source !== 'upload' && openRow === group.id && rowMode === 'view'">Hide keys</a>
178+ <a class="p-button u-no-margin--top js-delete-link" data-ng-click="open(group, 'delete')">Delete SSH key</a>
179 </td>
180 <td class="p-table-expanding__panel col-12 u-no-margin--left" data-ng-class="{ 'u-hide': group.id !== openRow || rowMode !== 'view' }">
181 <ul class="p-list">
182 <li data-ng-repeat="key in group.keys" data-ng-bind-html="trustAsHtml(key.display)"></li>
183 </ul>
184 </td>
185- <td class="p-table-expanding__panel col-12 u-no-margin--left" data-ng-class="{ 'u-hide': group.id !== openRow || rowMode !== 'delete' }">
186- <div class="col-8">
187- <span data-ng-if="group.source !== 'upload'"><span class="p-icon p-icon--warning"></span> Are you sure you want to remove this key source?</span>
188- <span data-ng-if="group.source === 'upload'"><span class="p-icon p-icon--warning"></span> Are you sure you want to remove this key?</span>
189- </div>
190- <div class="col-4 u-align--right">
191- <button class="p-button--base" data-ng-click="close()">Cancel</button>
192- <button class="p-button--negative" data-ng-click="confirmDelete(group)">Remove</button>
193+ <td class="p-table-expanding__panel" data-ng-class="{ 'u-hide': group.id !== openRow || rowMode !== 'delete' }">
194+ <div class="row u-equal-height">
195+ <div class="col-8 u-vertically-center">
196+ <span data-ng-if="group.source !== 'upload'"><span class="p-icon p-icon--warning">Warning:</span> Are you sure you want to remove this key source?</span>
197+ <span data-ng-if="group.source === 'upload'"><span class="p-icon p-icon--warning">Warning:</span> Are you sure you want to remove this key?</span>
198+ </div>
199+ <div class="col-4 u-align--right">
200+ <button class="p-button--base" data-ng-click="close()">Cancel</button>
201+ <button class="p-button--negative" data-ng-click="confirmDelete(group)">Remove</button>
202+ </div>
203 </div>
204 </td>
205 </tr>
206diff --git a/src/maasserver/static/scss/_maas.scss b/src/maasserver/static/scss/_maas.scss
207index f8386d3..6b4358d 100644
208--- a/src/maasserver/static/scss/_maas.scss
209+++ b/src/maasserver/static/scss/_maas.scss
210@@ -74,6 +74,13 @@
211 float: none;
212 }
213
214+ form {
215+ input[type="radio"],
216+ input[type="checkbox"] {
217+ float: left;
218+ }
219+ }
220+
221 th,
222 td {
223 display: table-cell !important;
224@@ -237,4 +244,11 @@
225 .col-12 {
226 width: 100%;
227 }
228+
229+ // Can be removed when the settings section is updated
230+ .errorlist {
231+ list-style: none;
232+ display: inline-block;
233+ margin-left: 0;
234+ }
235 }
236diff --git a/src/maasserver/static/scss/_patterns_icons.scss b/src/maasserver/static/scss/_patterns_icons.scss
237index aa5a8e9..9863264 100644
238--- a/src/maasserver/static/scss/_patterns_icons.scss
239+++ b/src/maasserver/static/scss/_patterns_icons.scss
240@@ -1,5 +1,5 @@
241 @mixin maas-icon-edit($color) {
242- background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3e%3ctitle%3eedit%3c/title%3e%3cg fill='" + rgba($color, 1) + "' fill-rule='evenodd'%3e%3cpath d='M17 15h5v1h-5zm-3 3h8v1h-8zm-3 3h11v1H11zm5.75-21L3.47 13.517S.956 17.465 0 21.987v.004l.002.004V22c4.532-.955 8.48-3.472 8.48-3.472L22 5.25 16.75 0zM4.51 14.555L7.454 17.5c-.2.114-2.99 2.064-5.544 2.602V20.093l-.002-.003c.537-2.546 2.485-5.334 2.602-5.537v.002z'/%3e%3cpath d='M2.234 18l1.85 1.85L1 21'/%3e%3c/g%3e%3c/svg%3e");
243+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3e%3ctitle%3eedit%3c/title%3e%3cg fill='" + encodecolor($color) + "' fill-rule='evenodd'%3e%3cpath d='M17 15h5v1h-5zm-3 3h8v1h-8zm-3 3h11v1H11zm5.75-21L3.47 13.517S.956 17.465 0 21.987v.004l.002.004V22c4.532-.955 8.48-3.472 8.48-3.472L22 5.25 16.75 0zM4.51 14.555L7.454 17.5c-.2.114-2.99 2.064-5.544 2.602V20.093l-.002-.003c.537-2.546 2.485-5.334 2.602-5.537v.002z'/%3e%3cpath d='M2.234 18l1.85 1.85L1 21'/%3e%3c/g%3e%3c/svg%3e");
244 }
245
246 @mixin maas-icon-power-on($color) {
247diff --git a/src/maasserver/templates/maasserver/form_field.html b/src/maasserver/templates/maasserver/form_field.html
248index 0762bd3..a50a5af 100644
249--- a/src/maasserver/templates/maasserver/form_field.html
250+++ b/src/maasserver/templates/maasserver/form_field.html
251@@ -1,5 +1,6 @@
252 {% load field_type %}
253-<li class="{{ field.html_name }}{% if css_class %} {{ css_class }}{% endif %}{% if field.errors %} error{% endif %}{% if field.help_text %} help-msg{% endif %}">
254+<li class="p-list__item">
255+<div class="p-form-validation {{ field.html_name }}{% if css_class %} {{ css_class }}{% endif %}{% if field.errors %} is-error{% endif %}">
256 {% if not field.is_hidden %}
257 {% ifequal field|field_type "CheckboxInput" %}
258 {{ field }}
259@@ -17,7 +18,10 @@
260 {{ field }}
261 {% endifnotequal %}
262 {% if field.errors %}
263- <p class="p-form-validation__message"><strong>Error:</strong> {{ field.errors }}</p>
264+ <span class="p-form-validation__message">
265+ <strong>Error:</strong> {{ field.errors }}
266+ </span>
267 {% endif %}
268- <p class="p-form-help-text">{% if field.help_text %}{{ field.help_text }}{% endif %}</p>
269-</li>
270+ <p>{% if field.help_text %}{{ field.help_text }}{% endif %}</p>
271+</div>
272+</li>
273\ No newline at end of file
274diff --git a/src/maasserver/templates/maasserver/user_view.html b/src/maasserver/templates/maasserver/user_view.html
275index 0202600..81dd82c 100644
276--- a/src/maasserver/templates/maasserver/user_view.html
277+++ b/src/maasserver/templates/maasserver/user_view.html
278@@ -3,42 +3,51 @@
279 {% block nav-active-settings %}active{% endblock %}
280 {% block title %}View user{% endblock %}
281 {% block page-title %}View user: {{ view_user.username }}{% endblock %}
282-{% block layout-modifiers %}sidebar{% endblock %}
283-
284-{% block sidebar %}
285-<div class="three-col append-one">
286- <h4>Actions</h4>
287- <a href="{% url 'accounts-edit' view_user.username %}" class="button--secondary button--inline">Edit user</a>
288- <a href="{% url 'accounts-del' view_user.username %}" class="button--destructive button--inline">Delete user</a>
289-</div>
290-{% endblock %}
291
292 {% block content %}
293-<div class="eight-col last-col">
294- <ul class="u-margin--left-none">
295- <li class="two-col">
296- <h4>Username</h4>
297- <span>{{ view_user.username }}</span>
298- </li>
299- <li class="three-col">
300- <h4>Full name</h4>
301- <span>{{ view_user.last_name }}</span>
302- </li>
303- <li class="three-col last-col">
304- <h4>Email address</h4>
305- <span>{{ view_user.email }}</span>
306- </li>
307- <li class="two-col clear">
308- <h4>MAAS Keys</h4>
309- <span>
310- {{ user.userprofile.get_authorisation_tokens.count }}
311- key{{ user.userprofile.get_authorisation_tokens.count|pluralize }}
312- </span>
313- </li>
314- <li class="three-col">
315- <h4>MAAS Administrator</h4>
316- <span>{{ view_user.is_superuser }}</span>
317- </li>
318- </ul>
319-</div>
320+<div class="p-strip">
321+ <form class="p-form p-form--stacked">
322+ <div class="row">
323+ <div class="col-4">
324+ <div class="p-form__group">
325+ <p class="p-form__label"><strong>Username</strong></p>
326+ <div class="p-form__control u-clearfix">
327+ <p>{{ view_user.username }}</p>
328+ </div>
329+ </div>
330+ <div class="p-form__group">
331+ <p class="p-form__label"><strong>Full name</strong></p>
332+ <div class="p-form__control u-clearfix">
333+ <p>{{ view_user.last_name }}</p>
334+ </div>
335+ </div>
336+ <div class="p-form__group">
337+ <p class="p-form__label"><strong>Email address</strong></p>
338+ <div class="p-form__control u-clearfix">
339+ <p>{{ view_user.email }}</p>
340+ </div>
341+ </div>
342+ </div>
343+ <div class="col-4">
344+ <div class="p-form__group">
345+ <p class="p-form__label"><strong>MAAS Keys</strong></p>
346+ <div class="p-form__control u-clearfix">
347+ <p>{{ user.userprofile.get_authorisation_tokens.count }}
348+ key{{ user.userprofile.get_authorisation_tokens.count|pluralize }}</p>
349+ </div>
350+ </div>
351+ <div class="p-form__group">
352+ <p class="p-form__label"><strong>MAAS Administrator</strong></p>
353+ <div class="p-form__control u-clearfix">
354+ <p>{{ view_user.is_superuser }}</p>
355+ </div>
356+ </div>
357+ </div>
358+ <div class="col-3">
359+ <h4>Actions</h4>
360+ <a href="{% url 'accounts-edit' view_user.username %}" class="p-button--neutral">Edit user</a>
361+ <a href="{% url 'accounts-del' view_user.username %}" class="p-button--negative">Delete user</a>
362+ </div>
363+ </div>
364+ </form>
365 {% endblock %}

Subscribers

People subscribed via source and target branches

to all changes: