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
diff --git a/src/maasserver/static/js/angular/directives/os_select.js b/src/maasserver/static/js/angular/directives/os_select.js
index 3b5732f..551ddb1 100644
--- a/src/maasserver/static/js/angular/directives/os_select.js
+++ b/src/maasserver/static/js/angular/directives/os_select.js
@@ -7,43 +7,34 @@
7angular.module('MAAS').run(['$templateCache', function ($templateCache) {7angular.module('MAAS').run(['$templateCache', function ($templateCache) {
8 // Inject the os-select.html into the template cache.8 // Inject the os-select.html into the template cache.
9 $templateCache.put('directive/templates/os-select.html', [9 $templateCache.put('directive/templates/os-select.html', [
10 '<ul class="p-inline-list--settings u-no-margin--top u-no-margin--left',10 '<label class="p-form__label">Choose your image</label>',
11 ' u-no-padding--left">',11 '<div class="p-form__control"> ',
12 '<li class="p-inline-list__item"> ',12 '<select name="os" ',
13 '<label class="p-form__label">Choose your image</label>',13 'data-ng-model="ngModel.osystem" ',
14 '</li>',14 'data-ng-change="selectedOSChanged()" ',
15 '<li class="p-inline-list__item"> ',15 'data-ng-disabled="maasOsSelect.osystems.length <= 1" ',
16 '<select name="os" ',16 'data-ng-options="',
17 'data-ng-model="ngModel.osystem" ',17 'os[0] as os[1] disable when ',
18 'data-ng-change="selectedOSChanged()" ',18 'installKVMSelectedAndNotUbuntu(os) ',
19 'data-ng-disabled="maasOsSelect.osystems.length <= 1" ',19 'for os in maasOsSelect.osystems">',
20 'data-ng-options="',20 '</select>',
21 'os[0] as os[1] disable when ',21 '<select name="release" ',
22 'installKVMSelectedAndNotUbuntu(os) ',22 'data-ng-model="ngModel.release" ',
23 'for os in maasOsSelect.osystems">',23 'data-ng-change="selectedReleaseChanged()" ',
24 '</select>',24 'data-ng-disabled="maasOsSelect.releases.length <= 1" ',
25 '</li>',25 'data-ng-options="',
26 '<li class="p-inline-list__item"> ',26 'release[0] as release[1] disable when osOutdated(release,',
27 '<select name="release" ',27 'deployOptions)',
28 'data-ng-model="ngModel.release" ',28 ' for release in releases">',
29 'data-ng-change="selectedReleaseChanged()" ',29 '</select>',
30 'data-ng-disabled="maasOsSelect.releases.length <= 1" ',30 '<select name="hwe_kernel" data-ng-model="ngModel.hwe_kernel" ',
31 'data-ng-options="',31 'data-ng-show="hwe_kernels.length"',
32 'release[0] as release[1] disable when osOutdated(release,',32 'data-ng-options="',
33 'deployOptions)',33 'hwe_kernel[0] as hwe_kernel[1] for hwe_kernel ',
34 ' for release in releases">',34 'in hwe_kernels">',
35 '</select>',35 '<option value="">Default kernel</option>',
36 '</li>',36 '</select>',
37 '<li class="p-inline-list__item"> ',37 '</div>'
38 '<select name="hwe_kernel" data-ng-model="ngModel.hwe_kernel" ',
39 'data-ng-show="hwe_kernels.length"',
40 'data-ng-options="',
41 'hwe_kernel[0] as hwe_kernel[1] for hwe_kernel ',
42 'in hwe_kernels">',
43 '<option value="">Default kernel</option>',
44 '</select>',
45 '</li>',
46 '</ul>'
47 ].join(''));38 ].join(''));
48}]);39}]);
4940
diff --git a/src/maasserver/static/js/angular/factories/nodes.js b/src/maasserver/static/js/angular/factories/nodes.js
index 9b5e310..2b4d0a8 100644
--- a/src/maasserver/static/js/angular/factories/nodes.js
+++ b/src/maasserver/static/js/angular/factories/nodes.js
@@ -362,8 +362,7 @@ angular.module('MAAS').service(
362 return false;362 return false;
363 }363 }
364364
365 if (KVMDeployOSBlacklist.includes(365 if (KVMDeployOSBlacklist.includes(osSelection.release)) {
366 osSelection.osystem + '/' + osSelection.release)) {
367 return false;366 return false;
368 }367 }
369368
diff --git a/src/maasserver/static/js/angular/factories/tests/test_nodes.js b/src/maasserver/static/js/angular/factories/tests/test_nodes.js
index b624b42..08cc37a 100644
--- a/src/maasserver/static/js/angular/factories/tests/test_nodes.js
+++ b/src/maasserver/static/js/angular/factories/tests/test_nodes.js
@@ -369,7 +369,7 @@ describe("NodesManager", function() {
369 it("returns false when ubuntu and precise", function() {369 it("returns false when ubuntu and precise", function() {
370 var osSelection = {370 var osSelection = {
371 osystem: 'ubuntu',371 osystem: 'ubuntu',
372 release: 'precise'372 release: 'ubuntu/precise'
373 };373 };
374374
375 expect(MachinesManager.isModernUbuntu(osSelection)).toBe(false);375 expect(MachinesManager.isModernUbuntu(osSelection)).toBe(false);
@@ -378,7 +378,7 @@ describe("NodesManager", function() {
378 it("returns false when ubuntu and trusty", function() {378 it("returns false when ubuntu and trusty", function() {
379 var osSelection = {379 var osSelection = {
380 osystem: 'ubuntu',380 osystem: 'ubuntu',
381 release: 'trusty'381 release: 'ubuntu/trusty'
382 };382 };
383383
384 expect(MachinesManager.isModernUbuntu(osSelection)).toBe(false);384 expect(MachinesManager.isModernUbuntu(osSelection)).toBe(false);
@@ -387,7 +387,7 @@ describe("NodesManager", function() {
387 it("returns false when ubuntu and xenial", function() {387 it("returns false when ubuntu and xenial", function() {
388 var osSelection = {388 var osSelection = {
389 osystem: 'ubuntu',389 osystem: 'ubuntu',
390 release: 'xenial'390 release: 'ubuntu/xenial'
391 };391 };
392392
393 expect(MachinesManager.isModernUbuntu(osSelection)).toBe(false);393 expect(MachinesManager.isModernUbuntu(osSelection)).toBe(false);
@@ -396,7 +396,7 @@ describe("NodesManager", function() {
396 it("returns true when ubuntu and bionic", function() {396 it("returns true when ubuntu and bionic", function() {
397 var osSelection = {397 var osSelection = {
398 osystem: 'ubuntu',398 osystem: 'ubuntu',
399 release: 'bionic'399 release: 'ubuntu/bionic'
400 };400 };
401401
402 expect(MachinesManager.isModernUbuntu(osSelection)).toBe(true);402 expect(MachinesManager.isModernUbuntu(osSelection)).toBe(true);
diff --git a/src/maasserver/static/partials/node-details.html b/src/maasserver/static/partials/node-details.html
index 4bdd438..5f981bd 100755
--- a/src/maasserver/static/partials/node-details.html
+++ b/src/maasserver/static/partials/node-details.html
@@ -102,34 +102,44 @@
102 </li>102 </li>
103 </ul>103 </ul>
104 </div>104 </div>
105105 </div>
106 <div class="col-12 u-no-margin--left" data-ng-show="action.option.name === 'deploy' || action.option.name === 'release'">106 <div class="row">
107 <div class="ng-hide" data-ng-show="action.option.name === 'deploy'">107 <div class="col-12" data-ng-show="action.option.name === 'deploy' || action.option.name === 'release'">
108 <div data-maas-os-select="osinfo" data-ng-model="osSelection"></div>108 <div class="p-form--stacked" >
109 <div class="row" data-ng-if="isSuperUser()">109 <div class="ng-hide" data-ng-show="action.option.name === 'deploy'">
110 <ul class="p-inline-list--settings u-no-margin--left u-no-padding--left">110 <div class="p-strip is-shallow u-no-padding--top">
111 <li class="p-inline-list__item">111 <div class="p-form__group">
112 <label class="p-form__label">Additional installs</label>112 <div data-maas-os-select="osinfo" data-ng-model="osSelection" style="width: 100%"></div>
113 </li>113 </div>
114 <li class="p-inline-list__item">114 </div>
115 <input id="installKVM" type="checkbox" data-ng-model="deployOptions.installKVM" ng-disabled="!nodesManager.isModernUbuntu(osSelection)">115 <div data-ng-if="isSuperUser()" class="p-strip is-shallow u-no-padding--top">
116 <label for="installKVM">Register as MAAS KVM host</label>116 <div class="p-form__group">
117 </li>117 <label class="p-form__label u-no-padding--top">Additional installs</label>
118 <li class="p-inline-list__item">118 <div class="p-form__control" style="width: 70%">
119 <div data-ng-if="!nodesManager.isModernUbuntu(osSelection)" style="display: block">119 <input id="installKVM" type="checkbox" data-ng-model="deployOptions.installKVM" ng-disabled="!nodesManager.isModernUbuntu(osSelection)">
120 <span class="p-icon--warning">Warning</span>120 <label for="installKVM" class="u-float--left" style="width: auto; margin-right: 1rem;">
121 <strong>Warning:</strong> Ubuntu 18.04 is the minimum required. <a target="_blank"121 Register as MAAS KVM host
122 class="p-link--external"122 </label>
123 href="https://docs.maas.io/2.5/en/manage-pods-webui#compose-a-machine">Learn more</a>.123 <span data-ng-if="!nodesManager.isModernUbuntu(osSelection)">
124 </div>124 <i class="p-icon--warning"></i>
125 <div data-ng-if="nodesManager.isModernUbuntu(osSelection)" style="display: block">125 <strong>Warning:</strong> Ubuntu 18.04 is the minimum required. <a target="_blank"
126 <span class="p-icon--information"></span>126 class="p-link--external"
127 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>127 href="https://docs.maas.io/2.5/en/manage-pods-webui#compose-a-machine">Learn more</a>
128 </span>
129 <span data-ng-if="nodesManager.isModernUbuntu(osSelection)">
130 <i class="p-icon--information">Information:</i>
131 <a target="_blank" class="p-link--external"
132 href="https://docs.maas.io/2.5/en/manage-pods-webui#compose-a-machine">Learn more</a>
133 </span>
128 </div>134 </div>
129 </li>135 </div>
130 </ul>136 </div>
131 </div>137 </div>
132 </div>138 </div>
139 </div>
140 </div>
141 <div class="row">
142 <div class="col-12 u-no-margin--left" data-ng-show="action.option.name === 'deploy' || action.option.name === 'release'">
133 <div data-ng-if="action.option.name === 'release'" class="u-no-margin--top">143 <div data-ng-if="action.option.name === 'release'" class="u-no-margin--top">
134 <div data-maas-release-options="releaseOptions"></div>144 <div data-maas-release-options="releaseOptions"></div>
135 </div>145 </div>
@@ -138,25 +148,31 @@
138 <div class="row">148 <div class="row">
139 <div class="col-12 u-align--right">149 <div class="col-12 u-align--right">
140 <div class="page-header__controls" data-ng-if="action.option.name !== 'commission' && action.option.name !== 'test' && !action.showing_confirmation">150 <div class="page-header__controls" data-ng-if="action.option.name !== 'commission' && action.option.name !== 'test' && !action.showing_confirmation">
141 <button class="p-button--base" data-ng-click="actionCancel()">Cancel</button>151 <div class="u-space-between">
142 <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')">152 <div class="u-align--right">
143 <span data-ng-if="action.option.name === 'acquire'">Acquire {$ type_name $}</span>153 <div data-ng-if="action.option.name !== 'commission' && action.option.name !== 'test'">
144 <span data-ng-if="action.option.name === 'deploy'">Deploy {$ type_name $}</span>154 <button class="p-button--base" data-ng-click="actionCancel()">Cancel</button>
145 <span data-ng-if="action.option.name === 'release'">Release {$ type_name $}</span>155 <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')">
146 <span data-ng-if="action.option.name === 'set-zone'">Set zone for {$ type_name $}</span>156 <span data-ng-if="action.option.name === 'acquire'">Acquire {$ type_name $}</span>
147 <span data-ng-if="action.option.name === 'on'">Power on {$ type_name $}</span>157 <span data-ng-if="action.option.name === 'deploy'">Deploy {$ type_name $}</span>
148 <span data-ng-if="action.option.name === 'off'">Power off {$ type_name $}</span>158 <span data-ng-if="action.option.name === 'release'">Release {$ type_name $}</span>
149 <span data-ng-if="action.option.name === 'abort'">Abort action on {$ type_name $}</span>159 <span data-ng-if="action.option.name === 'set-zone'">Set zone for {$ type_name $}</span>
150 <span data-ng-if="action.option.name === 'rescue-mode'">Rescue {$ type_name $}</span>160 <span data-ng-if="action.option.name === 'on'">Power on {$ type_name $}</span>
151 <span data-ng-if="action.option.name === 'exit-rescue-mode'">Exit rescue mode</span>161 <span data-ng-if="action.option.name === 'off'">Power off {$ type_name $}</span>
152 <span data-ng-if="action.option.name === 'mark-broken'">Mark {$ type_name $}</span>162 <span data-ng-if="action.option.name === 'abort'">Abort action on {$ type_name $}</span>
153 <span data-ng-if="action.option.name === 'mark-fixed'">Mark {$ type_name $}</span>163 <span data-ng-if="action.option.name === 'rescue-mode'">Rescue {$ type_name $}</span>
154 <span data-ng-if="action.option.name === 'override-failed-testing'">Override failed testing</span>164 <span data-ng-if="action.option.name === 'exit-rescue-mode'">Exit rescue mode</span>
155 <span data-ng-if="action.option.name === 'lock'">Lock {$ type_name $}</span>165 <span data-ng-if="action.option.name === 'mark-broken'">Mark {$ type_name $}</span>
156 <span data-ng-if="action.option.name === 'unlock'">Unlock {$ type_name $}</span>166 <span data-ng-if="action.option.name === 'mark-fixed'">Mark {$ type_name $}</span>
157 <span data-ng-if="action.option.name === 'delete'">Delete {$ type_name $}</span>167 <span data-ng-if="action.option.name === 'override-failed-testing'">Override failed testing</span>
158 <span data-ng-if="action.option.name === 'import-images'">Import images</span>168 <span data-ng-if="action.option.name === 'lock'">Lock {$ type_name $}</span>
159 </button>169 <span data-ng-if="action.option.name === 'unlock'">Unlock {$ type_name $}</span>
170 <span data-ng-if="action.option.name === 'delete'">Delete {$ type_name $}</span>
171 <span data-ng-if="action.option.name === 'import-images'">Import images</span>
172 </button>
173 </div>
174 </div>
175 </div>
160 </div>176 </div>
161 </div>177 </div>
162 </div>178 </div>
diff --git a/src/maasserver/static/partials/nodes-list.html b/src/maasserver/static/partials/nodes-list.html
index ee5e96f..3d7b66d 100644
--- a/src/maasserver/static/partials/nodes-list.html
+++ b/src/maasserver/static/partials/nodes-list.html
@@ -202,36 +202,36 @@
202 <form class="p-form">202 <form class="p-form">
203 <ul class="p-inline-list--settings u-no-margin--left u-no-padding--left ng-hide" data-ng-show="tabs[tab].actionOption.name === 'test'">203 <ul class="p-inline-list--settings u-no-margin--left u-no-padding--left ng-hide" data-ng-show="tabs[tab].actionOption.name === 'test'">
204 <li class="p-inline-list__item">204 <li class="p-inline-list__item">
205 <input id="{$ tab $}-enableSSH" type="checkbox" data-ng-model="tabs[tab].commissionOptions.enableSSH"></input>205 <input id="{$ tab $}-enableSSH" type="checkbox" data-ng-model="tabs[tab].commissionOptions.enableSSH">
206 <label for="{$ tab $}-enableSSH">Allow SSH access and prevent machine powering off</label>206 <label for="{$ tab $}-enableSSH">Allow SSH access and prevent machine powering off</label>
207 </li>207 </li>
208 </ul>208 </ul>
209 <div class="p-form__group ng-hide" data-ng-show="tabs[tab].actionOption.name === 'deploy'">209 <div class="p-form__group ng-hide" data-ng-show="tabs[tab].actionOption.name === 'deploy'">
210 <div class="p-form__control u-clearfix">210 <div class="row p-form--stacked">
211 <div data-maas-os-select="osinfo" data-ng-model="tabs[tab].osSelection"></div>211 <div class="col-12">
212 <div class="row" data-ng-if="isSuperUser()">212 <div class="p-strip is-shallow u-no-padding--top">
213 <ul class="p-inline-list--settings u-no-margin--left u-no-padding--left">213 <div class="p-form__group" data-maas-os-select="osinfo" data-ng-model="tabs[tab].osSelection" style="width: 100%"></div>
214 <li class="p-inline-list__item">214 </div>
215 <label class="p-form__label">Additional install</label>215 <div class="p-strip is-shallow u-no-padding--top" data-ng-if="isSuperUser()">
216 </li>216 <div class="p-form__group">
217 <li class="p-inline-list__item">217 <label class="p-form__label u-no-padding--top">Additional install</label>
218 <input id="{$ tab $}-installKVM" type="checkbox" data-ng-model="tabs[tab].deployOptions.installKVM" ng-disabled="!nodesManager.isModernUbuntu(tabs['machines'].osSelection)">218 <div class="p-form__control" style="width: 70%">
219 <label for="{$ tab $}-installKVM">Register as MAAS KVM host</label>219 <input id="{$ tab $}-installKVM" type="checkbox" data-ng-model="tabs[tab].deployOptions.installKVM" ng-disabled="!nodesManager.isModernUbuntu(tabs['machines'].osSelection)">
220 </li>220 <label for="{$ tab $}-installKVM" class="u-float--left" style="width:auto; margin-right: 1rem;">
221 <li class="p-inline-list__item">221 Register as MAAS KVM host
222 <div data-ng-if="!nodesManager.isModernUbuntu(tabs['machines'].osSelection)" style="display: block">222 </label>
223 <span class="p-icon--warning">Warning</span>223 <span data-ng-if="!nodesManager.isModernUbuntu(tabs['machines'].osSelection)">
224 <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>.224 <i class="p-icon--warning"></i>
225 </div>225 <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>.
226 <div data-ng-if="nodesManager.isModernUbuntu(tabs['machines'].osSelection)" style="display: block">226 </span>
227 <span class="p-icon--information"></span>227 <span data-ng-if="nodesManager.isModernUbuntu(tabs['machines'].osSelection)">
228 <a228 <i class="p-icon--information">Information:</i>
229 target="_blank"229 <a target="_blank" class="p-link--external"
230 class="p-link--external"230 href="https://docs.maas.io/2.5/en/manage-pods-webui#compose-a-machine">Learn more</a>
231 href="https://docs.maas.io/2.5/en/manage-pods-webui#compose-a-machine">Learn more</a>231 </span>
232 </div>
232 </div>233 </div>
233 </li>234 </div>
234 </ul>
235 </div>235 </div>
236 </div>236 </div>
237 <div data-ng-if="tabs[tab].actionOption.name === 'release'">237 <div data-ng-if="tabs[tab].actionOption.name === 'release'">
@@ -279,42 +279,46 @@
279 </div>279 </div>
280 <div class="row u-align--right" data-ng-if="tabs[tab].actionOption.name !== 'commission' && tabs[tab].actionOption.name !== 'test' && !tabs[tab].actionProgress.showing_confirmation">280 <div class="row u-align--right" data-ng-if="tabs[tab].actionOption.name !== 'commission' && tabs[tab].actionOption.name !== 'test' && !tabs[tab].actionProgress.showing_confirmation">
281 <div class="col-12">281 <div class="col-12">
282 <button class="p-button--base" type="button" data-ng-click="actionCancel(tab)">Cancel</button>282 <div class="u-space-between page-header__controls" data-ng-if="tabs[tab].actionOption.name !== 'commission' && tabs[tab].actionOption.name !== 'test'">
283 <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)">283 <div class="u-align--right">
284 <span data-ng-if="tabs[tab].actionOption.name === 'acquire'">Acquire {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}284 <button class="p-button--base" type="button" data-ng-click="actionCancel(tab)">Cancel</button>
285 </span>285 <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)">
286 <span data-ng-if="tabs[tab].actionOption.name === 'deploy'">Deploy {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}286 <span data-ng-if="tabs[tab].actionOption.name === 'acquire'">Acquire {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
287 </span>287 </span>
288 <span data-ng-if="tabs[tab].actionOption.name === 'release'">Release {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}288 <span data-ng-if="tabs[tab].actionOption.name === 'deploy'">Deploy {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
289 </span>289 </span>
290 <span data-ng-if="tabs[tab].actionOption.name === 'set-zone'">Set zone for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}290 <span data-ng-if="tabs[tab].actionOption.name === 'release'">Release {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
291 </span>291 </span>
292 <span data-ng-if="tabs[tab].actionOption.name === 'set-pool'">Set pool for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}292 <span data-ng-if="tabs[tab].actionOption.name === 'set-zone'">Set zone for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
293 </span>293 </span>
294 <span data-ng-if="tabs[tab].actionOption.name === 'on'">Power on {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}294 <span data-ng-if="tabs[tab].actionOption.name === 'set-pool'">Set pool for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
295 </span>295 </span>
296 <span data-ng-if="tabs[tab].actionOption.name === 'off'">Power off {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}296 <span data-ng-if="tabs[tab].actionOption.name === 'on'">Power on {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
297 </span>297 </span>
298 <span data-ng-if="tabs[tab].actionOption.name === 'abort'">Abort action for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}298 <span data-ng-if="tabs[tab].actionOption.name === 'off'">Power off {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
299 </span>299 </span>
300 <span data-ng-if="tabs[tab].actionOption.name === 'rescue-mode'">Set rescue mode for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}300 <span data-ng-if="tabs[tab].actionOption.name === 'abort'">Abort action for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
301 </span>301 </span>
302 <span data-ng-if="tabs[tab].actionOption.name === 'exit-rescue-mode'">Exit rescue mode for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}302 <span data-ng-if="tabs[tab].actionOption.name === 'rescue-mode'">Set rescue mode for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
303 </span>303 </span>
304 <span data-ng-if="tabs[tab].actionOption.name === 'mark-broken'">Mark {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $} as broken304 <span data-ng-if="tabs[tab].actionOption.name === 'exit-rescue-mode'">Exit rescue mode for {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
305 </span>305 </span>
306 <span data-ng-if="tabs[tab].actionOption.name === 'mark-fixed'">Mark {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $} as fixed306 <span data-ng-if="tabs[tab].actionOption.name === 'mark-broken'">Mark {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $} as broken
307 </span>307 </span>
308 <span data-ng-if="tabs[tab].actionOption.name === 'override-failed-testing'">Override failed testing on {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}308 <span data-ng-if="tabs[tab].actionOption.name === 'mark-fixed'">Mark {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $} as fixed
309 </span>309 </span>
310 <span data-ng-if="tabs[tab].actionOption.name === 'lock'">Lock {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}310 <span data-ng-if="tabs[tab].actionOption.name === 'override-failed-testing'">Override failed testing on {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
311 </span>311 </span>
312 <span data-ng-if="tabs[tab].actionOption.name === 'unlock'">Unlock {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}312 <span data-ng-if="tabs[tab].actionOption.name === 'lock'">Lock {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
313 </span>313 </span>
314 <span data-ng-if="tabs[tab].actionOption.name === 'delete'">Delete {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}314 <span data-ng-if="tabs[tab].actionOption.name === 'unlock'">Unlock {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
315 </span>315 </span>
316 </button>316 <span data-ng-if="tabs[tab].actionOption.name === 'delete'">Delete {$ tabs[tab].selectedItems.length $} {$ pluralize(tab) $}
317 <button class="p-button--neutral" data-ng-click="actionGo(tab)" data-ng-show="hasActionsFailed(tab)">Retry</button>317 </span>
318 </button>
319 <button class="p-button--neutral" data-ng-click="actionGo(tab)" data-ng-if="hasActionsFailed(tab)">Retry</button>
320 </div>
321 </div>
318 </div>322 </div>
319 </div>323 </div>
320 </section>324 </section>
diff --git a/src/maasserver/static/scss/_utils.scss b/src/maasserver/static/scss/_utils.scss
index 7e38983..8d225ed 100644
--- a/src/maasserver/static/scss/_utils.scss
+++ b/src/maasserver/static/scss/_utils.scss
@@ -52,3 +52,9 @@ $table-h-indent: $sph-intra--condensed;
52.u-valign--middle {52.u-valign--middle {
53 vertical-align: middle;53 vertical-align: middle;
54}54}
55
56
57.u-space-between {
58 display: flex;
59 justify-content: space-between;
60}

Subscribers

People subscribed via source and target branches