MAAS

Merge ~ya-bo-ng/maas:kvm-pod-visual-updates into maas:master

  1. Git
  2. lp:~ya-bo-ng/maas
  3. kvm-pod-visual-updates
  4. Merge into master
Proposed by Anthony Dillon
Status: Merged
Approved by: Andres Rodriguez
Approved revision: e745ca39b1b86b48ad87dcee6be0cab5768089aa
Merge reported by: MAAS Lander
Merged at revision: not available
Proposed branch: ~ya-bo-ng/maas:kvm-pod-visual-updates
Merge into: maas:master
Diff against target: 418 lines (+164/-148)
6 files modified
src/maasserver/static/js/angular/directives/os_select.js (+28/-37)
src/maasserver/static/js/angular/factories/nodes.js (+1/-2)
src/maasserver/static/js/angular/factories/tests/test_nodes.js (+4/-4)
src/maasserver/static/partials/node-details.html (+60/-44)
src/maasserver/static/partials/nodes-list.html (+65/-61)
src/maasserver/static/scss/_utils.scss (+6/-0)
Reviewer Review Type Date Requested Status
Andres Rodriguez (community) Approve
MAAS Lander Approve
Lilyana Videnova (community) Approve
Review via email: mp+359202@code.launchpad.net

Commit message

LP: #1804547 - Visual improvements to KVM pod deploy overlay

To post a comment you must log in.
Revision history for this message
MAAS Lander (maas-lander) wrote :

UNIT TESTS
-b kvm-pod-visual-updates 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/4545/console
COMMIT: d37367bcb6d7cca1f0310f91d16d7985110fb66f

review: Needs Fixing
~ya-bo-ng/maas:kvm-pod-visual-updates updated
e745ca3... by Anthony Dillon

Fix tests

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

UNIT TESTS
-b kvm-pod-visual-updates lp:~ya-bo-ng/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: SUCCESS
COMMIT: 480d55e487c531cef0ecd3a7511e04a3ef34c79a

review: Approve
Revision history for this message
Andres Rodriguez (andreserl) wrote :

User experience of the combo boxes works well, but there's an issue with the "Choose your image" label that needs to be fixed:

http://people.canonical.com/~andreserl/choose-your-image.png

review: Needs Fixing
Revision history for this message
Andres Rodriguez (andreserl) wrote :

Also, the documentation doesn't make sense to send the user to "compose-a-machine".

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

> User experience of the combo boxes works well, but there's an issue with the
> "Choose your image" label that needs to be fixed:
>
> http://people.canonical.com/~andreserl/choose-your-image.png

Hi @Andres,

The "Choose your image" label + dropdowns look completely different in this branch:

https://usercontent.irccloud-cdn.com/file/xkt17Aih/image.png

Revision history for this message
Andres Rodriguez (andreserl) wrote :

I'm testing Ant's latest commit, which is 480d55e48 and it doesn't look like the screenshot provided.

Revision history for this message
Andres Rodriguez (andreserl) wrote :

Also, maybe you meant a different branch instead of the screenshot? If so, that's fine, but we are currently concentrated on fixing critical issues that affect the release, that change doesn't seem that a release blocker, but the current issue with this branch is.

Revision history for this message
Andres Rodriguez (andreserl) wrote :

FWIW, this branch fixes 2 issues that are targeted to RC2, which is currently blocked on those fixes. I would land this branch, but not until the label is fixed.

Revision history for this message
Anthony Dillon (ya-bo-ng) wrote :

Andres is true, your screenshot seems out of date from what I see. Have you tried `force-javascript`?

Revision history for this message
Anthony Dillon (ya-bo-ng) wrote :

Could you try force building the js and styles as it should look like this:
https://screenshots.firefox.com/6csbfTj6XBIywJAP/10.54.72.65

Revision history for this message
Steve Rydz (steverydz) wrote :

It's looking like that for me

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

UNIT TESTS
-b kvm-pod-visual-updates lp:~ya-bo-ng/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: SUCCESS
COMMIT: e745ca39b1b86b48ad87dcee6be0cab5768089aa

review: Approve
Revision history for this message
Andres Rodriguez (andreserl) wrote :

Discussed with Ant over IRC. WE've agreed that during RC releases we should avoid at all costs having re-designs, but in this case, being minimum we'll proceed.

review: Approve
Revision history for this message
Martin Storey (cassiocassio) wrote :

ty!

On Wed, Nov 28, 2018 at 2:39 PM Andres Rodriguez <email address hidden>
wrote:

> Review: Approve
>
> Discussed with Ant over IRC. WE've agreed that during RC releases we
> should avoid at all costs having re-designs, but in this case, being
> minimum we'll proceed.
> --
> https://code.launchpad.net/~ya-bo-ng/maas/+git/maas/+merge/359202
> Your team MAAS Committers is subscribed to branch maas:master.
>

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/os_select.js b/src/maasserver/static/js/angular/directives/os_select.js
2index 3b5732f..551ddb1 100644
3--- a/src/maasserver/static/js/angular/directives/os_select.js
4+++ b/src/maasserver/static/js/angular/directives/os_select.js
5@@ -7,43 +7,34 @@
6 angular.module('MAAS').run(['$templateCache', function ($templateCache) {
7 // Inject the os-select.html into the template cache.
8 $templateCache.put('directive/templates/os-select.html', [
9- '<ul class="p-inline-list--settings u-no-margin--top u-no-margin--left',
10- ' u-no-padding--left">',
11- '<li class="p-inline-list__item"> ',
12- '<label class="p-form__label">Choose your image</label>',
13- '</li>',
14- '<li class="p-inline-list__item"> ',
15- '<select name="os" ',
16- 'data-ng-model="ngModel.osystem" ',
17- 'data-ng-change="selectedOSChanged()" ',
18- 'data-ng-disabled="maasOsSelect.osystems.length <= 1" ',
19- 'data-ng-options="',
20- 'os[0] as os[1] disable when ',
21- 'installKVMSelectedAndNotUbuntu(os) ',
22- 'for os in maasOsSelect.osystems">',
23- '</select>',
24- '</li>',
25- '<li class="p-inline-list__item"> ',
26- '<select name="release" ',
27- 'data-ng-model="ngModel.release" ',
28- 'data-ng-change="selectedReleaseChanged()" ',
29- 'data-ng-disabled="maasOsSelect.releases.length <= 1" ',
30- 'data-ng-options="',
31- 'release[0] as release[1] disable when osOutdated(release,',
32- 'deployOptions)',
33- ' for release in releases">',
34- '</select>',
35- '</li>',
36- '<li class="p-inline-list__item"> ',
37- '<select name="hwe_kernel" data-ng-model="ngModel.hwe_kernel" ',
38- 'data-ng-show="hwe_kernels.length"',
39- 'data-ng-options="',
40- 'hwe_kernel[0] as hwe_kernel[1] for hwe_kernel ',
41- 'in hwe_kernels">',
42- '<option value="">Default kernel</option>',
43- '</select>',
44- '</li>',
45- '</ul>'
46+ '<label class="p-form__label">Choose your image</label>',
47+ '<div class="p-form__control"> ',
48+ '<select name="os" ',
49+ 'data-ng-model="ngModel.osystem" ',
50+ 'data-ng-change="selectedOSChanged()" ',
51+ 'data-ng-disabled="maasOsSelect.osystems.length <= 1" ',
52+ 'data-ng-options="',
53+ 'os[0] as os[1] disable when ',
54+ 'installKVMSelectedAndNotUbuntu(os) ',
55+ 'for os in maasOsSelect.osystems">',
56+ '</select>',
57+ '<select name="release" ',
58+ 'data-ng-model="ngModel.release" ',
59+ 'data-ng-change="selectedReleaseChanged()" ',
60+ 'data-ng-disabled="maasOsSelect.releases.length <= 1" ',
61+ 'data-ng-options="',
62+ 'release[0] as release[1] disable when osOutdated(release,',
63+ 'deployOptions)',
64+ ' for release in releases">',
65+ '</select>',
66+ '<select name="hwe_kernel" data-ng-model="ngModel.hwe_kernel" ',
67+ 'data-ng-show="hwe_kernels.length"',
68+ 'data-ng-options="',
69+ 'hwe_kernel[0] as hwe_kernel[1] for hwe_kernel ',
70+ 'in hwe_kernels">',
71+ '<option value="">Default kernel</option>',
72+ '</select>',
73+ '</div>'
74 ].join(''));
75 }]);
76
77diff --git a/src/maasserver/static/js/angular/factories/nodes.js b/src/maasserver/static/js/angular/factories/nodes.js
78index 9b5e310..2b4d0a8 100644
79--- a/src/maasserver/static/js/angular/factories/nodes.js
80+++ b/src/maasserver/static/js/angular/factories/nodes.js
81@@ -362,8 +362,7 @@ angular.module('MAAS').service(
82 return false;
83 }
84
85- if (KVMDeployOSBlacklist.includes(
86- osSelection.osystem + '/' + osSelection.release)) {
87+ if (KVMDeployOSBlacklist.includes(osSelection.release)) {
88 return false;
89 }
90
91diff --git a/src/maasserver/static/js/angular/factories/tests/test_nodes.js b/src/maasserver/static/js/angular/factories/tests/test_nodes.js
92index b624b42..08cc37a 100644
93--- a/src/maasserver/static/js/angular/factories/tests/test_nodes.js
94+++ b/src/maasserver/static/js/angular/factories/tests/test_nodes.js
95@@ -369,7 +369,7 @@ describe("NodesManager", function() {
96 it("returns false when ubuntu and precise", function() {
97 var osSelection = {
98 osystem: 'ubuntu',
99- release: 'precise'
100+ release: 'ubuntu/precise'
101 };
102
103 expect(MachinesManager.isModernUbuntu(osSelection)).toBe(false);
104@@ -378,7 +378,7 @@ describe("NodesManager", function() {
105 it("returns false when ubuntu and trusty", function() {
106 var osSelection = {
107 osystem: 'ubuntu',
108- release: 'trusty'
109+ release: 'ubuntu/trusty'
110 };
111
112 expect(MachinesManager.isModernUbuntu(osSelection)).toBe(false);
113@@ -387,7 +387,7 @@ describe("NodesManager", function() {
114 it("returns false when ubuntu and xenial", function() {
115 var osSelection = {
116 osystem: 'ubuntu',
117- release: 'xenial'
118+ release: 'ubuntu/xenial'
119 };
120
121 expect(MachinesManager.isModernUbuntu(osSelection)).toBe(false);
122@@ -396,7 +396,7 @@ describe("NodesManager", function() {
123 it("returns true when ubuntu and bionic", function() {
124 var osSelection = {
125 osystem: 'ubuntu',
126- release: 'bionic'
127+ release: 'ubuntu/bionic'
128 };
129
130 expect(MachinesManager.isModernUbuntu(osSelection)).toBe(true);
131diff --git a/src/maasserver/static/partials/node-details.html b/src/maasserver/static/partials/node-details.html
132index 4bdd438..5f981bd 100755
133--- a/src/maasserver/static/partials/node-details.html
134+++ b/src/maasserver/static/partials/node-details.html
135@@ -102,34 +102,44 @@
136 </li>
137 </ul>
138 </div>
139-
140- <div class="col-12 u-no-margin--left" data-ng-show="action.option.name === 'deploy' || action.option.name === 'release'">
141- <div class="ng-hide" data-ng-show="action.option.name === 'deploy'">
142- <div data-maas-os-select="osinfo" data-ng-model="osSelection"></div>
143- <div class="row" data-ng-if="isSuperUser()">
144- <ul class="p-inline-list--settings u-no-margin--left u-no-padding--left">
145- <li class="p-inline-list__item">
146- <label class="p-form__label">Additional installs</label>
147- </li>
148- <li class="p-inline-list__item">
149- <input id="installKVM" type="checkbox" data-ng-model="deployOptions.installKVM" ng-disabled="!nodesManager.isModernUbuntu(osSelection)">
150- <label for="installKVM">Register as MAAS KVM host</label>
151- </li>
152- <li class="p-inline-list__item">
153- <div data-ng-if="!nodesManager.isModernUbuntu(osSelection)" style="display: block">
154- <span class="p-icon--warning">Warning</span>
155- <strong>Warning:</strong> Ubuntu 18.04 is the minimum required. <a target="_blank"
156- class="p-link--external"
157- href="https://docs.maas.io/2.5/en/manage-pods-webui#compose-a-machine">Learn more</a>.
158- </div>
159- <div data-ng-if="nodesManager.isModernUbuntu(osSelection)" style="display: block">
160- <span class="p-icon--information"></span>
161- About <a target="_blank" class="p-link--external" href="https://docs.maas.io/2.5/en/manage-pods-webui#compose-a-machine">KVM hosts</a>
162+ </div>
163+ <div class="row">
164+ <div class="col-12" data-ng-show="action.option.name === 'deploy' || action.option.name === 'release'">
165+ <div class="p-form--stacked" >
166+ <div class="ng-hide" data-ng-show="action.option.name === 'deploy'">
167+ <div class="p-strip is-shallow u-no-padding--top">
168+ <div class="p-form__group">
169+ <div data-maas-os-select="osinfo" data-ng-model="osSelection" style="width: 100%"></div>
170+ </div>
171+ </div>
172+ <div data-ng-if="isSuperUser()" class="p-strip is-shallow u-no-padding--top">
173+ <div class="p-form__group">
174+ <label class="p-form__label u-no-padding--top">Additional installs</label>
175+ <div class="p-form__control" style="width: 70%">
176+ <input id="installKVM" type="checkbox" data-ng-model="deployOptions.installKVM" ng-disabled="!nodesManager.isModernUbuntu(osSelection)">
177+ <label for="installKVM" class="u-float--left" style="width: auto; margin-right: 1rem;">
178+ Register as MAAS KVM host
179+ </label>
180+ <span data-ng-if="!nodesManager.isModernUbuntu(osSelection)">
181+ <i class="p-icon--warning"></i>
182+ <strong>Warning:</strong> Ubuntu 18.04 is the minimum required. <a target="_blank"
183+ class="p-link--external"
184+ href="https://docs.maas.io/2.5/en/manage-pods-webui#compose-a-machine">Learn more</a>
185+ </span>
186+ <span data-ng-if="nodesManager.isModernUbuntu(osSelection)">
187+ <i class="p-icon--information">Information:</i>
188+ <a target="_blank" class="p-link--external"
189+ href="https://docs.maas.io/2.5/en/manage-pods-webui#compose-a-machine">Learn more</a>
190+ </span>
191 </div>
192- </li>
193- </ul>
194+ </div>
195+ </div>
196 </div>
197 </div>
198+ </div>
199+ </div>
200+ <div class="row">
201+ <div class="col-12 u-no-margin--left" data-ng-show="action.option.name === 'deploy' || action.option.name === 'release'">
202 <div data-ng-if="action.option.name === 'release'" class="u-no-margin--top">
203 <div data-maas-release-options="releaseOptions"></div>
204 </div>
205@@ -138,25 +148,31 @@
206 <div class="row">
207 <div class="col-12 u-align--right">
208 <div class="page-header__controls" data-ng-if="action.option.name !== 'commission' && action.option.name !== 'test' && !action.showing_confirmation">
209- <button class="p-button--base" data-ng-click="actionCancel()">Cancel</button>
210- <button class="p-button--neutral u-no-margin--top" data-ng-class="action.option.name === 'delete' ? 'p-button--negative' : 'p-button--positive'" data-ng-click="actionGo('nodes')" data-ng-hide="hasActionsFailed('nodes')">
211- <span data-ng-if="action.option.name === 'acquire'">Acquire {$ type_name $}</span>
212- <span data-ng-if="action.option.name === 'deploy'">Deploy {$ type_name $}</span>
213- <span data-ng-if="action.option.name === 'release'">Release {$ type_name $}</span>
214- <span data-ng-if="action.option.name === 'set-zone'">Set zone for {$ type_name $}</span>
215- <span data-ng-if="action.option.name === 'on'">Power on {$ type_name $}</span>
216- <span data-ng-if="action.option.name === 'off'">Power off {$ type_name $}</span>
217- <span data-ng-if="action.option.name === 'abort'">Abort action on {$ type_name $}</span>
218- <span data-ng-if="action.option.name === 'rescue-mode'">Rescue {$ type_name $}</span>
219- <span data-ng-if="action.option.name === 'exit-rescue-mode'">Exit rescue mode</span>
220- <span data-ng-if="action.option.name === 'mark-broken'">Mark {$ type_name $}</span>
221- <span data-ng-if="action.option.name === 'mark-fixed'">Mark {$ type_name $}</span>
222- <span data-ng-if="action.option.name === 'override-failed-testing'">Override failed testing</span>
223- <span data-ng-if="action.option.name === 'lock'">Lock {$ type_name $}</span>
224- <span data-ng-if="action.option.name === 'unlock'">Unlock {$ type_name $}</span>
225- <span data-ng-if="action.option.name === 'delete'">Delete {$ type_name $}</span>
226- <span data-ng-if="action.option.name === 'import-images'">Import images</span>
227- </button>
228+ <div class="u-space-between">
229+ <div class="u-align--right">
230+ <div data-ng-if="action.option.name !== 'commission' && action.option.name !== 'test'">
231+ <button class="p-button--base" data-ng-click="actionCancel()">Cancel</button>
232+ <button class="p-button--neutral u-no-margin--top" data-ng-class="action.option.name === 'delete' ? 'p-button--negative' : 'p-button--positive'" data-ng-click="actionGo('nodes')" data-ng-hide="hasActionsFailed('nodes')">
233+ <span data-ng-if="action.option.name === 'acquire'">Acquire {$ type_name $}</span>
234+ <span data-ng-if="action.option.name === 'deploy'">Deploy {$ type_name $}</span>
235+ <span data-ng-if="action.option.name === 'release'">Release {$ type_name $}</span>
236+ <span data-ng-if="action.option.name === 'set-zone'">Set zone for {$ type_name $}</span>
237+ <span data-ng-if="action.option.name === 'on'">Power on {$ type_name $}</span>
238+ <span data-ng-if="action.option.name === 'off'">Power off {$ type_name $}</span>
239+ <span data-ng-if="action.option.name === 'abort'">Abort action on {$ type_name $}</span>
240+ <span data-ng-if="action.option.name === 'rescue-mode'">Rescue {$ type_name $}</span>
241+ <span data-ng-if="action.option.name === 'exit-rescue-mode'">Exit rescue mode</span>
242+ <span data-ng-if="action.option.name === 'mark-broken'">Mark {$ type_name $}</span>
243+ <span data-ng-if="action.option.name === 'mark-fixed'">Mark {$ type_name $}</span>
244+ <span data-ng-if="action.option.name === 'override-failed-testing'">Override failed testing</span>
245+ <span data-ng-if="action.option.name === 'lock'">Lock {$ type_name $}</span>
246+ <span data-ng-if="action.option.name === 'unlock'">Unlock {$ type_name $}</span>
247+ <span data-ng-if="action.option.name === 'delete'">Delete {$ type_name $}</span>
248+ <span data-ng-if="action.option.name === 'import-images'">Import images</span>
249+ </button>
250+ </div>
251+ </div>
252+ </div>
253 </div>
254 </div>
255 </div>
256diff --git a/src/maasserver/static/partials/nodes-list.html b/src/maasserver/static/partials/nodes-list.html
257index ee5e96f..3d7b66d 100644
258--- a/src/maasserver/static/partials/nodes-list.html
259+++ b/src/maasserver/static/partials/nodes-list.html
260@@ -202,36 +202,36 @@
261 <form class="p-form">
262 <ul class="p-inline-list--settings u-no-margin--left u-no-padding--left ng-hide" data-ng-show="tabs[tab].actionOption.name === 'test'">
263 <li class="p-inline-list__item">
264- <input id="{$ tab $}-enableSSH" type="checkbox" data-ng-model="tabs[tab].commissionOptions.enableSSH"></input>
265+ <input id="{$ tab $}-enableSSH" type="checkbox" data-ng-model="tabs[tab].commissionOptions.enableSSH">
266 <label for="{$ tab $}-enableSSH">Allow SSH access and prevent machine powering off</label>
267 </li>
268 </ul>
269 <div class="p-form__group ng-hide" data-ng-show="tabs[tab].actionOption.name === 'deploy'">
270- <div class="p-form__control u-clearfix">
271- <div data-maas-os-select="osinfo" data-ng-model="tabs[tab].osSelection"></div>
272- <div class="row" data-ng-if="isSuperUser()">
273- <ul class="p-inline-list--settings u-no-margin--left u-no-padding--left">
274- <li class="p-inline-list__item">
275- <label class="p-form__label">Additional install</label>
276- </li>
277- <li class="p-inline-list__item">
278- <input id="{$ tab $}-installKVM" type="checkbox" data-ng-model="tabs[tab].deployOptions.installKVM" ng-disabled="!nodesManager.isModernUbuntu(tabs['machines'].osSelection)">
279- <label for="{$ tab $}-installKVM">Register as MAAS KVM host</label>
280- </li>
281- <li class="p-inline-list__item">
282- <div data-ng-if="!nodesManager.isModernUbuntu(tabs['machines'].osSelection)" style="display: block">
283- <span class="p-icon--warning">Warning</span>
284- <strong>Warning:</strong> Ubuntu 18.04 is the minimum required. <a class="p-link--external" target="_blank" href="https://docs.maas.io/2.5/en/manage-pods-webui#compose-a-machine">Learn more</a>.
285- </div>
286- <div data-ng-if="nodesManager.isModernUbuntu(tabs['machines'].osSelection)" style="display: block">
287- <span class="p-icon--information"></span>
288- <a
289- target="_blank"
290- class="p-link--external"
291- href="https://docs.maas.io/2.5/en/manage-pods-webui#compose-a-machine">Learn more</a>
292+ <div class="row p-form--stacked">
293+ <div class="col-12">
294+ <div class="p-strip is-shallow u-no-padding--top">
295+ <div class="p-form__group" data-maas-os-select="osinfo" data-ng-model="tabs[tab].osSelection" style="width: 100%"></div>
296+ </div>
297+ <div class="p-strip is-shallow u-no-padding--top" data-ng-if="isSuperUser()">
298+ <div class="p-form__group">
299+ <label class="p-form__label u-no-padding--top">Additional install</label>
300+ <div class="p-form__control" style="width: 70%">
301+ <input id="{$ tab $}-installKVM" type="checkbox" data-ng-model="tabs[tab].deployOptions.installKVM" ng-disabled="!nodesManager.isModernUbuntu(tabs['machines'].osSelection)">
302+ <label for="{$ tab $}-installKVM" class="u-float--left" style="width:auto; margin-right: 1rem;">
303+ Register as MAAS KVM host
304+ </label>
305+ <span data-ng-if="!nodesManager.isModernUbuntu(tabs['machines'].osSelection)">
306+ <i class="p-icon--warning"></i>
307+ <strong>Warning:</strong> Ubuntu 18.04 is the minimum required. <a class="p-link--external" target="_blank" href="https://docs.maas.io/2.5/en/manage-pods-webui#compose-a-machine">Learn more</a>.
308+ </span>
309+ <span data-ng-if="nodesManager.isModernUbuntu(tabs['machines'].osSelection)">
310+ <i class="p-icon--information">Information:</i>
311+ <a target="_blank" class="p-link--external"
312+ href="https://docs.maas.io/2.5/en/manage-pods-webui#compose-a-machine">Learn more</a>
313+ </span>
314+ </div>
315 </div>
316- </li>
317- </ul>
318+ </div>
319 </div>
320 </div>
321 <div data-ng-if="tabs[tab].actionOption.name === 'release'">
322@@ -279,42 +279,46 @@
323 </div>
324 <div class="row u-align--right" data-ng-if="tabs[tab].actionOption.name !== 'commission' && tabs[tab].actionOption.name !== 'test' && !tabs[tab].actionProgress.showing_confirmation">
325 <div class="col-12">
326- <button class="p-button--base" type="button" data-ng-click="actionCancel(tab)">Cancel</button>
327- <button data-ng-class="tabs[tab].actionOption.name === 'delete' ? 'p-button--negative' : 'p-button--positive'" data-ng-click="actionGo(tab)" data-ng-hide="hasActionsFailed(tab)">
328- <span data-ng-if="tabs[tab].actionOption.name === 'acquire'">Acquire {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
329- </span>
330- <span data-ng-if="tabs[tab].actionOption.name === 'deploy'">Deploy {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
331- </span>
332- <span data-ng-if="tabs[tab].actionOption.name === 'release'">Release {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
333- </span>
334- <span data-ng-if="tabs[tab].actionOption.name === 'set-zone'">Set zone for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
335- </span>
336- <span data-ng-if="tabs[tab].actionOption.name === 'set-pool'">Set pool for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
337- </span>
338- <span data-ng-if="tabs[tab].actionOption.name === 'on'">Power on {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
339- </span>
340- <span data-ng-if="tabs[tab].actionOption.name === 'off'">Power off {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
341- </span>
342- <span data-ng-if="tabs[tab].actionOption.name === 'abort'">Abort action for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
343- </span>
344- <span data-ng-if="tabs[tab].actionOption.name === 'rescue-mode'">Set rescue mode for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
345- </span>
346- <span data-ng-if="tabs[tab].actionOption.name === 'exit-rescue-mode'">Exit rescue mode for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
347- </span>
348- <span data-ng-if="tabs[tab].actionOption.name === 'mark-broken'">Mark {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $} as broken
349- </span>
350- <span data-ng-if="tabs[tab].actionOption.name === 'mark-fixed'">Mark {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $} as fixed
351- </span>
352- <span data-ng-if="tabs[tab].actionOption.name === 'override-failed-testing'">Override failed testing on {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
353- </span>
354- <span data-ng-if="tabs[tab].actionOption.name === 'lock'">Lock {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
355- </span>
356- <span data-ng-if="tabs[tab].actionOption.name === 'unlock'">Unlock {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
357- </span>
358- <span data-ng-if="tabs[tab].actionOption.name === 'delete'">Delete {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
359- </span>
360- </button>
361- <button class="p-button--neutral" data-ng-click="actionGo(tab)" data-ng-show="hasActionsFailed(tab)">Retry</button>
362+ <div class="u-space-between page-header__controls" data-ng-if="tabs[tab].actionOption.name !== 'commission' && tabs[tab].actionOption.name !== 'test'">
363+ <div class="u-align--right">
364+ <button class="p-button--base" type="button" data-ng-click="actionCancel(tab)">Cancel</button>
365+ <button data-ng-class="tabs[tab].actionOption.name === 'delete' ? 'p-button--negative' : 'p-button--positive'" data-ng-click="actionGo(tab)" data-ng-hide="hasActionsFailed(tab)">
366+ <span data-ng-if="tabs[tab].actionOption.name === 'acquire'">Acquire {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
367+ </span>
368+ <span data-ng-if="tabs[tab].actionOption.name === 'deploy'">Deploy {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
369+ </span>
370+ <span data-ng-if="tabs[tab].actionOption.name === 'release'">Release {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
371+ </span>
372+ <span data-ng-if="tabs[tab].actionOption.name === 'set-zone'">Set zone for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
373+ </span>
374+ <span data-ng-if="tabs[tab].actionOption.name === 'set-pool'">Set pool for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
375+ </span>
376+ <span data-ng-if="tabs[tab].actionOption.name === 'on'">Power on {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
377+ </span>
378+ <span data-ng-if="tabs[tab].actionOption.name === 'off'">Power off {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
379+ </span>
380+ <span data-ng-if="tabs[tab].actionOption.name === 'abort'">Abort action for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
381+ </span>
382+ <span data-ng-if="tabs[tab].actionOption.name === 'rescue-mode'">Set rescue mode for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
383+ </span>
384+ <span data-ng-if="tabs[tab].actionOption.name === 'exit-rescue-mode'">Exit rescue mode for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
385+ </span>
386+ <span data-ng-if="tabs[tab].actionOption.name === 'mark-broken'">Mark {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $} as broken
387+ </span>
388+ <span data-ng-if="tabs[tab].actionOption.name === 'mark-fixed'">Mark {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $} as fixed
389+ </span>
390+ <span data-ng-if="tabs[tab].actionOption.name === 'override-failed-testing'">Override failed testing on {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
391+ </span>
392+ <span data-ng-if="tabs[tab].actionOption.name === 'lock'">Lock {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
393+ </span>
394+ <span data-ng-if="tabs[tab].actionOption.name === 'unlock'">Unlock {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
395+ </span>
396+ <span data-ng-if="tabs[tab].actionOption.name === 'delete'">Delete {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
397+ </span>
398+ </button>
399+ <button class="p-button--neutral" data-ng-click="actionGo(tab)" data-ng-if="hasActionsFailed(tab)">Retry</button>
400+ </div>
401+ </div>
402 </div>
403 </div>
404 </section>
405diff --git a/src/maasserver/static/scss/_utils.scss b/src/maasserver/static/scss/_utils.scss
406index 7e38983..8d225ed 100644
407--- a/src/maasserver/static/scss/_utils.scss
408+++ b/src/maasserver/static/scss/_utils.scss
409@@ -52,3 +52,9 @@ $table-h-indent: $sph-intra--condensed;
410 .u-valign--middle {
411 vertical-align: middle;
412 }
413+
414+
415+.u-space-between {
416+ display: flex;
417+ justify-content: space-between;
418+}

Subscribers

People subscribed via source and target branches