MAAS

Merge ~ya-bo-ng/maas:controllers-1.8-vanilla into maas:vanilla-1.7.1

  1. Git
  2. lp:~ya-bo-ng/maas
  3. controllers-1.8-vanilla
  4. Merge into vanilla-1.7.1
Proposed by Anthony Dillon
Status: Merged
Approved by: Anthony Dillon
Approved revision: 4568fd73d304fc98591d59f38383fdbe60e6f51e
Merge reported by: MAAS Lander
Merged at revision: not available
Proposed branch: ~ya-bo-ng/maas:controllers-1.8-vanilla
Merge into: maas:vanilla-1.7.1
Diff against target: 1070 lines (+441/-309)
10 files modified
src/maasserver/static/js/angular/directives/call_to_action.js (+2/-1)
src/maasserver/static/js/angular/directives/maas_obj_form.js (+0/-3)
src/maasserver/static/js/angular/directives/power_parameters.js (+11/-8)
src/maasserver/static/partials/cards/services.html (+3/-3)
src/maasserver/static/partials/node-details.html (+309/-279)
src/maasserver/static/partials/script-results-list.html (+13/-13)
src/maasserver/static/scss/_maas.scss (+1/-0)
src/maasserver/static/scss/_patterns_table-expanding.scss (+2/-0)
src/maasserver/static/scss/_patterns_tag-input.scss (+0/-2)
src/maasserver/static/scss/_tables.scss (+100/-0)
Reviewer Review Type Date Requested Status
MAAS Lander Approve
Steve Rydz (community) Approve
MAAS Maintainers Pending
Review via email: mp+352113@code.launchpad.net

Commit message

Apply mark up fixes for the controllers section to bring it inline with Vanilla 1.8

Description of the change

Apply mark up fixes for the controllers section to bring it inline with Vanilla 1.8

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

UNIT TESTS
-b controllers-1.8-vanilla lp:~ya-bo-ng/maas/+git/maas into -b vanilla-1.7.1 lp:~maas-committers/maas

STATUS: FAILED
LOG: http://maas-ci-jenkins.internal:8080/job/maas/job/branch-tester/3495/console
COMMIT: 6a3a10cd0a1dc07becc94eb015a0ebe22c27f4d6

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

UNIT TESTS
-b controllers-1.8-vanilla lp:~ya-bo-ng/maas/+git/maas into -b vanilla-1.7.1 lp:~maas-committers/maas

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

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

Just one minor comment in the code

review: Needs Fixing
~ya-bo-ng/maas:controllers-1.8-vanilla updated
1082963... by Anthony Dillon

Remove duplicate clearfixes

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

LGTM

review: Approve
~ya-bo-ng/maas:controllers-1.8-vanilla updated
4568fd7... by Anthony Dillon

Fix lint issues

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

UNIT TESTS
-b controllers-1.8-vanilla lp:~ya-bo-ng/maas/+git/maas into -b vanilla-1.7.1 lp:~maas-committers/maas

STATUS: SUCCESS
COMMIT: 4568fd73d304fc98591d59f38383fdbe60e6f51e

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/call_to_action.js b/src/maasserver/static/js/angular/directives/call_to_action.js
2index ff66f29..73b97b7 100644
3--- a/src/maasserver/static/js/angular/directives/call_to_action.js
4+++ b/src/maasserver/static/js/angular/directives/call_to_action.js
5@@ -9,7 +9,8 @@ angular.module('MAAS').run(['$templateCache', function ($templateCache) {
6 $templateCache.put('directive/templates/cta.html', [
7 '<div class="p-contextual-menu">',
8 '<button ',
9- 'class="p-button p-contextual-menu__toggle" ',
10+ 'class="p-button p-contextual-menu__toggle',
11+ ' p-button--min-margin-bottom" ',
12 'aria-controls="#cta-menu" ',
13 'aria-expanded="false" ',
14 'aria-haspopup="true" ',
15diff --git a/src/maasserver/static/js/angular/directives/maas_obj_form.js b/src/maasserver/static/js/angular/directives/maas_obj_form.js
16index ef3cd60..b50b30b 100644
17--- a/src/maasserver/static/js/angular/directives/maas_obj_form.js
18+++ b/src/maasserver/static/js/angular/directives/maas_obj_form.js
19@@ -581,8 +581,6 @@ angular.module('MAAS').directive('maasObjField', ['$compile',
20 labelElement.addClass("tablet-col-"
21 + attrs.labelWidthTablet);
22 }
23- } else {
24- labelElement.addClass("u-margin--right");
25 }
26 if(attrs.labelLeft === "true") {
27 labelElement.addClass('u-padding--left');
28@@ -622,7 +620,6 @@ angular.module('MAAS').directive('maasObjField', ['$compile',
29 // Add the wrapper for the input.
30 var inputWrapper = angular.element('<div></div>');
31 inputWrapper.addClass("p-form__control");
32- inputWrapper.addClass("u-no-margin--top");
33
34 if(attrs.inputWidthMobile) {
35 inputWrapper.addClass("mobile-col-"
36diff --git a/src/maasserver/static/js/angular/directives/power_parameters.js b/src/maasserver/static/js/angular/directives/power_parameters.js
37index 7dfcaaa..435b5ed 100644
38--- a/src/maasserver/static/js/angular/directives/power_parameters.js
39+++ b/src/maasserver/static/js/angular/directives/power_parameters.js
40@@ -7,10 +7,12 @@
41 angular.module('MAAS').run(['$templateCache', function ($templateCache) {
42 // Inject the power-parameters.html into the template cache.
43 $templateCache.put('directive/templates/power-parameters.html', [
44- '<div class="p-form__group">',
45+ '<div class="p-form__group u-clearfix">',
46 '<label for="power-type" ',
47- 'class="form__group-label col-2">Power type</label>',
48- '<div class="form__group-input col-3">',
49+ 'class="p-form__label col-2 mobile-col-2 tablet-col-2">',
50+ 'Power type',
51+ '</label>',
52+ '<div class="p-form__control col-3 mobile-col-2 tablet-col-3">',
53 '<select name="power-type" id="power-type" ',
54 'data-ng-disabled="ngDisabled || ngModel.in_pod" ',
55 'data-ng-class="{ invalid: !ngModel.type }" ',
56@@ -24,14 +26,15 @@ angular.module('MAAS').run(['$templateCache', function ($templateCache) {
57 '</select>',
58 '</div>',
59 '</div>',
60- '<div class="p-form__group" ',
61+ '<div class="p-form__group u-clearfix" ',
62 'data-ng-repeat="field in ngModel.type.fields">',
63- '<label for="{$ field.name $}" class="form__group-label col-2" ',
64- 'data-ng-if="field.name !== ' + "'default_storage_pool' && ",
65- "(field.scope !== 'bmc' || !ngModel.in_pod)" + '">',
66+ '<label for="{$ field.name $}" ',
67+ 'class="p-form__label col-2 mobile-col-2 tablet-col-2" ',
68+ 'data-ng-if="field.name !== ' + "'default_storage_pool' && ",
69+ "(field.scope !== 'bmc' || !ngModel.in_pod)" + '">',
70 '{$ field.label $}',
71 '</label>',
72- '<div class="form__group-input col-3">',
73+ '<div class="p-form__control col-3 mobile-col-2 tablet-col-3">',
74 '<maas-power-input field="field" ',
75 'data-ng-disabled="ngDisabled || (field.scope === ',
76 "'bmc' && ngModel.in_pod)" + '" ',
77diff --git a/src/maasserver/static/partials/cards/services.html b/src/maasserver/static/partials/cards/services.html
78index 080b39a..0b3ad9b 100644
79--- a/src/maasserver/static/partials/cards/services.html
80+++ b/src/maasserver/static/partials/cards/services.html
81@@ -1,9 +1,9 @@
82 <header class="p-card__header">
83 <h2 class="p-heading--four">Services</h2>
84- <div class="u-vertically-center u-no-margin--top">
85+ <h3 class="p-heading--four">
86 <span data-maas-controller-status="node" data-maas-services="services" aria-label="Status" class="u-hide--small"></span>
87- <h3 class="p-heading--four u-no-margin--top"><span data-maas-controller-status="node" data-maas-services="services" data-maas-text-only="true"></span></h3>
88- </div>
89+ <span data-maas-controller-status="node" data-maas-services="services" data-maas-text-only="true"></span>
90+ </h3>
91 </header>
92 <div>
93 <ul class="p-list-tree" aria-multiselectable="true" role="tablist">
94diff --git a/src/maasserver/static/partials/node-details.html b/src/maasserver/static/partials/node-details.html
95index 0c397e2..bcb55a1 100755
96--- a/src/maasserver/static/partials/node-details.html
97+++ b/src/maasserver/static/partials/node-details.html
98@@ -453,165 +453,169 @@
99 </table>
100 </div>
101 </section>
102- <section class="p-strip" data-ng-if="section.area === 'configuration'">
103- <div class="row">
104- <div class="col-10">
105- <h2 data-ng-if="!isController" class="p-heading--four">{$ node.node_type_display $} configuration</h2>
106- <h2 data-ng-if="isController" class="p-heading--four">Controller configuration</h2>
107- </div>
108- <div class="col-2" data-ng-if="!summary.editing">
109- <button class="p-button--neutral u-float--right"
110- data-ng-if="canEdit()"
111- data-ng-click="editSummary()">Edit</button>
112- </div>
113- </div>
114- <form class="p-form p-form--stacked">
115+ <section data-ng-if="section.area === 'configuration'">
116+ <div class="p-strip">
117 <div class="row">
118- <div class="col-6">
119- <div class="p-form__group" data-ng-if="!isDevice && !isController"
120- data-ng-class="{ 'is-error': invalidArchitecture() }">
121- <label for="architecture" class="p-form__label">Architecture</label>
122- <div class="p-form__control">
123- <select name="architecture" id="architecture" class="p-form-validation__input"
124- data-ng-disabled="!summary.editing"
125- data-ng-model="summary.architecture.selected"
126- data-ng-options="arch for arch in summary.architecture.options">
127- <option value="" disabled="disabled">{$ getArchitecturePlaceholder() $}</option>
128- </select>
129+ <div class="col-10">
130+ <h2 data-ng-if="!isController" class="p-heading--four">{$ node.node_type_display $} configuration</h2>
131+ <h2 data-ng-if="isController" class="p-heading--four">Controller configuration</h2>
132+ </div>
133+ <div class="col-2" data-ng-if="!summary.editing">
134+ <button class="p-button--neutral u-float--right u-no-margin--bottom"
135+ data-ng-if="canEdit()"
136+ data-ng-click="editSummary()">Edit</button>
137+ </div>
138+ </div>
139+ <form class="p-form p-form--stacked">
140+ <div class="row">
141+ <div class="col-6">
142+ <div class="p-form__group u-clearfix" data-ng-if="!isDevice && !isController"
143+ data-ng-class="{ 'is-error': invalidArchitecture() }">
144+ <label for="architecture" class="p-form__label col-2 mobile-col-2 tablet-col-2">Architecture</label>
145+ <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
146+ <select name="architecture" id="architecture" class="p-form-validation__input"
147+ data-ng-disabled="!summary.editing"
148+ data-ng-model="summary.architecture.selected"
149+ data-ng-options="arch for arch in summary.architecture.options">
150+ <option value="" disabled="disabled">{$ getArchitecturePlaceholder() $}</option>
151+ </select>
152+ </div>
153 </div>
154- </div>
155- <div class="p-form__group" data-ng-if="!isDevice && !isController">
156- <label for="min_hwe_kernel" class="p-form__label">Minimum Kernel</label>
157- <div class="p-form__control">
158- <select name="min_hwe_kernel" id="min_hwe_kernel"
159- data-ng-disabled="!summary.editing"
160- data-ng-model="summary.min_hwe_kernel.selected"
161- data-ng-options="hwe_kernel[0] as hwe_kernel[1] for hwe_kernel in summary.min_hwe_kernel.options">
162- <option value="">No minimum kernel</option>
163- </select>
164+ <div class="p-form__group u-clearfix" data-ng-if="!isDevice && !isController">
165+ <label for="min_hwe_kernel" class="p-form__label col-2 mobile-col-2 tablet-col-2">Minimum Kernel</label>
166+ <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
167+ <select name="min_hwe_kernel" id="min_hwe_kernel"
168+ data-ng-disabled="!summary.editing"
169+ data-ng-model="summary.min_hwe_kernel.selected"
170+ data-ng-options="hwe_kernel[0] as hwe_kernel[1] for hwe_kernel in summary.min_hwe_kernel.options">
171+ <option value="">No minimum kernel</option>
172+ </select>
173+ </div>
174 </div>
175- </div>
176- <div class="p-form__group">
177- <label for="zone" class="p-form__label">Zone</label>
178- <div class="p-form__control">
179- <select name="zone" id="zone"
180- data-ng-disabled="!summary.editing"
181- data-ng-model="summary.zone.selected"
182- data-ng-options="zone as zone.name for zone in summary.zone.options">
183- <option value="" disabled="disabled">Choose a zone</option>
184- </select>
185+ <div class="p-form__group u-clearfix">
186+ <label for="zone" class="p-form__label col-2 mobile-col-2 tablet-col-2">Zone</label>
187+ <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
188+ <select name="zone" id="zone"
189+ data-ng-disabled="!summary.editing"
190+ data-ng-model="summary.zone.selected"
191+ data-ng-options="zone as zone.name for zone in summary.zone.options">
192+ <option value="" disabled="disabled">Choose a zone</option>
193+ </select>
194+ </div>
195 </div>
196- </div>
197- <div class="p-form__group" data-ng-if="!isDevice && !isController">
198- <label for="pool" class="p-form__label">Resource pool</label>
199- <div class="p-form__control">
200- <select name="pool" id="pool"
201- data-ng-disabled="!summary.editing"
202- data-ng-model="summary.pool.selected"
203- data-ng-options="pool as pool.name for pool in summary.pool.options">
204- <option value="" disabled="disabled">Choose a resource pool</option>
205- </select>
206+ <div class="p-form__group u-clearfix" data-ng-if="!isDevice && !isController">
207+ <label for="pool" class="p-form__label col-2 mobile-col-2 tablet-col-2">Resource pool</label>
208+ <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
209+ <select name="pool" id="pool"
210+ data-ng-disabled="!summary.editing"
211+ data-ng-model="summary.pool.selected"
212+ data-ng-options="pool as pool.name for pool in summary.pool.options">
213+ <option value="" disabled="disabled">Choose a resource pool</option>
214+ </select>
215+ </div>
216 </div>
217- </div>
218- <div class="p-form__group">
219- <label class="p-form__label">Tags</label>
220- <div class="p-form__control tags--inline">
221- <span data-ng-repeat="tag in node.tags" data-ng-hide="summary.editing">
222- <a href="#/machines/?query=tags:({$ tag $})">{$ tag $}</a>
223- </span>
224- <tags-input data-ng-model="summary.tags"
225- data-ng-show="summary.editing" allowed-tags-pattern="[\w-]+">
226- <auto-complete source="tagsAutocomplete($query)"></auto-complete>
227- </tags-input>
228+ <div class="p-form__group u-clearfix">
229+ <label class="p-form__label col-2 mobile-col-2 tablet-col-2">Tags</label>
230+ <div class="p-form__control col-3 mobile-col-2 tablet-col-3 tags--inline">
231+ <span data-ng-repeat="tag in node.tags" data-ng-hide="summary.editing">
232+ <a href="#/machines/?query=tags:({$ tag $})">{$ tag $}</a>
233+ </span>
234+ <tags-input data-ng-model="summary.tags"
235+ data-ng-disabled="!summary.editing" allowed-tags-pattern="[\w-]+">
236+ <auto-complete source="tagsAutocomplete($query)"></auto-complete>
237+ </tags-input>
238+ </div>
239 </div>
240 </div>
241 </div>
242- </div>
243- <div class="row">
244- <div class="col-12 u-align--right" data-ng-if="summary.editing">
245- <button class="p-button--base"
246- data-ng-click="cancelEditSummary()">Cancel</button>
247- <button class="p-button--positive"
248- data-ng-class="{ secondary: invalidArchitecture() }"
249- data-ng-click="saveEditSummary()">Save changes</button>
250+ <div class="row">
251+ <div class="col-12 u-align--right" data-ng-if="summary.editing">
252+ <button class="p-button--base"
253+ data-ng-click="cancelEditSummary()">Cancel</button>
254+ <button class="p-button--positive"
255+ data-ng-class="{ secondary: invalidArchitecture() }"
256+ data-ng-click="saveEditSummary()">Save changes</button>
257+ </div>
258 </div>
259- </div>
260- </form>
261- <div class="row" data-ng-if="!isDevice">
262- <div class="col-10">
263- <h2 class="p-heading--four">Power configuration</h2>
264- </div>
265- <div class="col-2">
266- <button class="p-button--neutral u-float--right"
267- data-ng-show="canEdit() && power_types.length"
268- data-ng-click="editPower()"
269- data-ng-if="!power.editing">Edit</button>
270- </div>
271+ </form>
272 </div>
273- <div class="row">
274- <div class="col-12" data-ng-if="!isDevice">
275- <div class="p-notification--negative" data-ng-if="!isRackControllerConnected()">
276- <p class="p-notification__response">
277- <span class="p-notification__status">Error:</span> Editing is currently
278- disabled because no rack controller is currently
279- connected to the region.</p>
280+ <div class="p-strip">
281+ <div class="row" data-ng-if="!isDevice">
282+ <div class="col-10">
283+ <h2 class="p-heading--four">Power configuration</h2>
284 </div>
285- <div class="p-notification--negative"
286- data-ng-if="isRackControllerConnected() && node.power_type == '' && !isController">
287- <p class="p-notification__response">
288- <span class="p-notification__status">Error:</span> This node does not
289- have a power type set and MAAS will be unable to
290- control it. Update the power information below.</p>
291- </div>
292- <div class="p-notification--warning"
293- data-ng-if="isRackControllerConnected() && node.power_type == '' && isController">
294- <p class="p-notification__response">
295- <span class="p-notification__status">Warning:</span> This node does not
296- have a power type set and MAAS will be unable to
297- control it. Update the power information below.</p>
298- </div>
299- <div class="p-notification--negative" data-ng-if="hasPowerError()">
300- <p class="p-notification__response">
301- <span class="p-notification__status">Error:</span> Power control
302- software for this power type is missing from the rack
303- controller. To proceed, install the
304- {$ getPowerErrors() $} on the rack controller.</p>
305- </div>
306- <div class="p-notification--negative" data-ng-if="hasPowerEventError()">
307- <p class="p-notification__response">
308- <span class="p-notification__status">Error:</span> {$ getPowerEventErrorText() $}</p>
309- </div>
310- <div class="p-notification" data-ng-if="power.type.name == 'manual'">
311- <p class="p-notification__response">Power control for
312- this power type will need to be handled manually.</p>
313- </div>
314- <div class="p-notification" data-ng-if="power.editing && node.power_bmc_node_count > 1">
315- <p class="p-notification__response">This power controller
316- manages {$ node.power_bmc_node_count - 1 $} other
317- {$ node.power_bmc_node_count > 3 ? "nodes" : "node" $}.
318- Changing power parameters will affect these nodes.</p>
319+ <div class="col-2">
320+ <button class="p-button--neutral u-float--right"
321+ data-ng-show="canEdit() && power_types.length"
322+ data-ng-click="editPower()"
323+ data-ng-if="!power.editing">Edit</button>
324 </div>
325 </div>
326- </div>
327- <form class="p-form p-form--stacked" class="disabled" data-ng-if="!isDevice">
328 <div class="row">
329- <div class="col-6 ng-hide"
330- data-ng-show="power_types.length"
331- data-ng-disabled="!power.editing"
332- data-maas-power-parameters="power_types"
333- data-ng-model="power">
334+ <div class="col-12" data-ng-if="!isDevice">
335+ <div class="p-notification--negative" data-ng-if="!isRackControllerConnected()">
336+ <p class="p-notification__response">
337+ <span class="p-notification__status">Error:</span> Editing is currently
338+ disabled because no rack controller is currently
339+ connected to the region.</p>
340+ </div>
341+ <div class="p-notification--negative"
342+ data-ng-if="isRackControllerConnected() && node.power_type == '' && !isController">
343+ <p class="p-notification__response">
344+ <span class="p-notification__status">Error:</span> This node does not
345+ have a power type set and MAAS will be unable to
346+ control it. Update the power information below.</p>
347+ </div>
348+ <div class="p-notification--warning"
349+ data-ng-if="isRackControllerConnected() && node.power_type == '' && isController">
350+ <p class="p-notification__response">
351+ <span class="p-notification__status">Warning:</span> This node does not
352+ have a power type set and MAAS will be unable to
353+ control it. Update the power information below.</p>
354+ </div>
355+ <div class="p-notification--negative" data-ng-if="hasPowerError()">
356+ <p class="p-notification__response">
357+ <span class="p-notification__status">Error:</span> Power control
358+ software for this power type is missing from the rack
359+ controller. To proceed, install the
360+ {$ getPowerErrors() $} on the rack controller.</p>
361+ </div>
362+ <div class="p-notification--negative" data-ng-if="hasPowerEventError()">
363+ <p class="p-notification__response">
364+ <span class="p-notification__status">Error:</span> {$ getPowerEventErrorText() $}</p>
365+ </div>
366+ <div class="p-notification" data-ng-if="power.type.name == 'manual'">
367+ <p class="p-notification__response">Power control for
368+ this power type will need to be handled manually.</p>
369+ </div>
370+ <div class="p-notification" data-ng-if="power.editing && node.power_bmc_node_count > 1">
371+ <p class="p-notification__response">This power controller
372+ manages {$ node.power_bmc_node_count - 1 $} other
373+ {$ node.power_bmc_node_count > 3 ? "nodes" : "node" $}.
374+ Changing power parameters will affect these nodes.</p>
375+ </div>
376 </div>
377 </div>
378- <div class="row">
379- <div class="col-12 u-align--right ng-hide" data-ng-show="power.editing">
380- <button class="p-button--base" type="button"
381- data-ng-click="cancelEditPower()">Cancel</button>
382- <button class="p-button--positive"
383- data-ng-class="{ secondary: invalidPowerType() }"
384- data-ng-click="saveEditPower()">Save changes</button>
385+ <form class="p-form p-form--stacked" class="disabled" data-ng-if="!isDevice">
386+ <div class="row">
387+ <div class="col-6 ng-hide"
388+ data-ng-show="power_types.length"
389+ data-ng-disabled="!power.editing"
390+ data-maas-power-parameters="power_types"
391+ data-ng-model="power">
392+ </div>
393 </div>
394- </div>
395- </form>
396+ <div class="row">
397+ <div class="col-12 u-align--right ng-hide" data-ng-show="power.editing">
398+ <button class="p-button--base" type="button"
399+ data-ng-click="cancelEditPower()">Cancel</button>
400+ <button class="p-button--positive"
401+ data-ng-class="{ secondary: invalidPowerType() }"
402+ data-ng-click="saveEditPower()">Save changes</button>
403+ </div>
404+ </div>
405+ </form>
406+ </div>
407 </section>
408 <section class="p-strip" data-ng-if="section.area === 'services'">
409 <div class="row" data-ng-show="node.node_type == 3 || node.node_type == 4">
410@@ -717,38 +721,38 @@
411 </div>
412 <div class="row">
413 <form data-ng-if="loaded">
414- <table class="p-table-expanding">
415+ <table class="p-table-expanding p-table--controller-vlans">
416 <thead>
417- <tr>
418- <th class="col-2" title="Fabric">Fabric</th>
419- <th class="col-2" title="VLAN">VLAN</th>
420- <th class="col-1" title="DHCP">DHCP</th>
421- <th class="col-3" title="Subnets">Subnets</th>
422- <th class="col-2" title="Primary rack">Primary rack</th>
423- <th class="col-2" title="Secondary rack">Secondary rack</th>
424+ <tr class="p-table__row">
425+ <th title="Fabric">Fabric</th>
426+ <th title="VLAN">VLAN</th>
427+ <th title="DHCP">DHCP</th>
428+ <th title="Subnets">Subnets</th>
429+ <th title="Primary rack">Primary rack</th>
430+ <th title="Secondary rack">Secondary rack</th>
431 </tr>
432 </thead>
433 <tbody>
434- <tr class="table__row" data-ng-repeat="vlanRow in vlanTable">
435- <td class="col-2" title="{$ vlanRow['fabric'].name $}">
436+ <tr class="p-table__row" data-ng-repeat="vlanRow in vlanTable">
437+ <td title="{$ vlanRow['fabric'].name $}">
438 <a href="#/fabric/{$ vlanRow['fabric'].id $}">{$ vlanRow['fabric'].name $}</a>
439 </td>
440- <td class="col-2" title="{$ vlanRow['fabric'].name $}">
441+ <td title="{$ getVLANText(vlanRow['vlan']) $}">
442 <a href="#/vlan/{$ vlanRow['vlan'].id $}">{$ getVLANText(vlanRow['vlan']) $}</a>
443 </td>
444- <td class="col-1">
445- <span data-ng-if="vlanRow.vlan.dhcp_on === true || vlanRow.vlan.relay_vlan !== null || vlanRow.vlan.external_dhcp === true">Enabled</span>
446- <span data-ng-if="vlanRow.vlan.dhcp_on !== true && vlanRow.vlan.relay_vlan === null">Disabled</span>
447+ <td>
448+ <span data-ng-if="vlanRow.vlan.dhcp_on === true || vlanRow.vlan.relay_vlan !== null || vlanRow.vlan.external_dhcp === true" title="Enabled">Enabled</span>
449+ <span data-ng-if="vlanRow.vlan.dhcp_on !== true && vlanRow.vlan.relay_vlan === null" title="Disabled">Disabled</span>
450 </td>
451- <td class="col-3">
452+ <td>
453 <div class="u-no-margin--top" data-ng-repeat="subnet in vlanRow['subnets']">
454 <a href="#/subnet/{$ subnet.id $}" title="{$ getSubnetText(subnet) $}">{$ getSubnetText(subnet) $}</a>
455 </div>
456 </td>
457- <td class="col-2">
458+ <td>
459 <a href="#/controller/{$ vlanRow['primary_rack'].system_id $}" title="{$ vlanRow['primary_rack'].fqdn $}">{$ vlanRow['primary_rack'].fqdn $}</a>
460 </td>
461- <td class="col-2">
462+ <td>
463 <a href="#/controller/{$ vlanRow['secondary_rack'].system_id $}" title="{$ vlanRow['secondary_rack'].fqdn $}">{$ vlanRow['secondary_rack'].fqdn $}</a>
464 </td>
465 </tr>
466@@ -785,17 +789,17 @@
467 </div>
468 </div>
469 <div class="row">
470- <table class="p-table-expanding">
471+ <table class="p-table-expanding p-table--controller-interfaces">
472 <thead>
473- <tr data-ng-if="isDevice">
474- <th class="table-col--30">MAC</th>
475- <th class="table-col--25">Subnet</th>
476- <th class="table-col--25">IP Address</th>
477- <th class="table-col--15"><div class="u-align--right">Actions</div></th>
478+ <tr data-ng-if="isDevice" class="p-table--is-device">
479+ <th>MAC</th>
480+ <th>Subnet</th>
481+ <th>IP Address</th>
482+ <th><div class="u-align--right">Actions</div></th>
483 </tr>
484
485- <tr data-ng-if="!isDevice">
486- <th class="table-col--16">
487+ <tr data-ng-if="!isDevice" class="p-table--is-not-device">
488+ <th>
489 <a data-ng-class="{ 'p-link--strong': tableInfo.column == 'name' }"
490 data-ng-click="tableInfo.column = 'name'">
491 Name
492@@ -806,26 +810,26 @@
493 MAC
494 </a>
495 </th>
496- <th class="table-col--7"><div data-ng-if="!isController" class="u-align--center">PXE</div></th>
497- <th class="table-col--9">Type</th>
498- <th class="table-col--13">Fabric</th>
499- <th class="table-col--13">VLAN</th>
500- <th class="table-col--13">Subnet</th>
501- <th class="table-col--19">IP Address</th>
502- <th class="table-col--10"><div class="u-align--right">Actions</div></th>
503+ <th><div data-ng-if="!isController" class="u-align--center">PXE</div></th>
504+ <th>Type</th>
505+ <th>Fabric</th>
506+ <th>VLAN</th>
507+ <th>Subnet</th>
508+ <th>IP Address</th>
509+ <th><div class="u-align--right">Actions</div></th>
510 </tr>
511 </thead>
512 <tbody data-selected-rows>
513- <tr data-ng-if="isDevice" data-ng-class="{ disabled: isDisabled(), 'is-active': isInterfaceSelected(interface) && (!isAllNetworkingDisabled() || isLimitedEditingAllowed(interface)), noEdit: cannotEditInterface(interface) }" data-ng-repeat="interface in interfaces | removeInterfaceParents:newBondInterface:isAllNetworkingDisabled() | removeInterfaceParents:newBridgeInterface:isAllNetworkingDisabled()">
514- <td class="table-col--30">{$ interface.mac_address $}</td>
515- <td class="table-col--25" aria-label="Subnet">
516+ <tr data-ng-if="isDevice" class="p-table--is-device" data-ng-class="{ disabled: isDisabled(), 'is-active': isInterfaceSelected(interface) && (!isAllNetworkingDisabled() || isLimitedEditingAllowed(interface)), noEdit: cannotEditInterface(interface) }" data-ng-repeat="interface in interfaces | removeInterfaceParents:newBondInterface:isAllNetworkingDisabled() | removeInterfaceParents:newBridgeInterface:isAllNetworkingDisabled()">
517+ <td>{$ interface.mac_address $}</td>
518+ <td aria-label="Subnet">
519 <span data-ng-if="!isEditing(interface) && (interface.subnet || (interface.fabric && !interface.discovered[0].subnet_id))">{$ getSubnetText(interface.subnet) $}</span>
520 <span data-ng-if="isAllNetworkingDisabled() && interface.discovered[0].subnet_id" title="{$ getSubnetText(getSubnet(interface.discovered[0].subnet_id)) $}">
521 {$ getSubnetText(getSubnet(interface.discovered[0].subnet_id)) $}
522 </span>
523 </td>
524- <td class="table-col--25" aria-label="IP Address">{$ interface.ip_address $}</td>
525- <td class="table-col--15 p-table--action-cell">
526+ <td aria-label="IP Address">{$ interface.ip_address $}</td>
527+ <td class="p-table--action-cell">
528 <div class="u-align--right">
529 <div class="p-contextual-menu" toggle-ctrl data-ng-if="!isAllNetworkingDisabled() || isLimitedEditingAllowed(interface)">
530 <button class="p-button--base is-small p-contextual-menu__toggle" data-ng-click="toggleMenu()"><i class="p-icon--contextual-menu u-no-margin--right">Actions</i></button>
531@@ -855,14 +859,14 @@
532 </td>
533 <td class="p-table-expanding__panel col-12" data-ng-if="isInterfaceSelected(interface)">
534 <div class="row" data-ng-if="isShowingAdd() || isEditing(interface) || isShowingDeleteConfirm() || isShowingAdd() && !newInterface.saving">
535- <div class="table__dropdown-title" data-ng-if="windowWidth <= 768">
536+ <div class="u-position-relative u-clearfix" data-ng-if="windowWidth <= 768">
537 <h2 data-ng-click="cancel()" class="u-float--left p-heading--four">
538 <span data-ng-if="canAddAlias(newInterface.parent)">Adding alias</span>
539 <span data-ng-if="canAddVLAN(newInterface.parent)">Adding VLAN</span>
540 <span data-ng-if="isEditing(interface)">Editing {$ interface.name $}</span>
541 <span data-ng-if="isShowingDeleteConfirm()">Removing {$ interface.name $}</span>
542 </h2>
543- <button data-ng-click="cancel()" class="p-button u-float--right">
544+ <button data-ng-click="cancel()" class="p-button--base u-float--right p-button--close">
545 <i class="p-icon--remove">Cancel</i>
546 </button>
547 </div>
548@@ -956,10 +960,10 @@
549 data-ng-if="isEditing(editInterface)">
550 <div class="row">
551 <div class="col-6">
552- <maas-obj-field type="text" key="mac_address" label="MAC address" label-width="2" input-width="5"
553+ <maas-obj-field type="text" key="mac_address" label="MAC address"
554 data-ng-if="interface.type !== 'alias' && interface.type !== 'vlan'" disable-label="false"
555- input-class="table__input u-margin--none" placeholder="00:00:00:00:00:00"></maas-obj-field>
556- <maas-obj-field type="tags" key="tags" label="Tags" label-width="2" input-width="5"
557+ input-class="table__input" placeholder="00:00:00:00:00:00"></maas-obj-field>
558+ <maas-obj-field type="tags" key="tags" label="Tags"
559 placeholder="Add a tag"
560 data-ng-if="!isAllNetworkingDisabled(interface) && interface.type !== 'alias'"
561 disable-label="false"></maas-obj-field>
562@@ -1030,25 +1034,23 @@
563 </td>
564 </tr>
565
566- <tr data-ng-if="!isDevice" data-ng-class="{ disabled: isDisabled(), 'is-active': isInterfaceSelected(interface) && (!isAllNetworkingDisabled() || isLimitedEditingAllowed(interface)), noEdit: cannotEditInterface(interface) }"
567+ <tr data-ng-if="!isDevice" class="p-table--is-not-device" data-ng-class="{ disabled: isDisabled(), 'is-active': isInterfaceSelected(interface) && (!isAllNetworkingDisabled() || isLimitedEditingAllowed(interface)), noEdit: cannotEditInterface(interface) }"
568 data-ng-repeat="interface in interfaces | removeInterfaceParents:newBondInterface:isAllNetworkingDisabled() | removeInterfaceParents:newBridgeInterface:isAllNetworkingDisabled()">
569- <td class="table-col--16" aria-label="Name"
570- data-ng-class="{ 'is-error': isInterfaceNameInvalid(editInterface) }">
571+ <td aria-label="Name" data-ng-class="{ 'is-error': isInterfaceNameInvalid(editInterface) }">
572 <span class="u-float--left" data-ng-if="!isController && !isAllNetworkingDisabled() && !isEditing(interface)">
573 <input type="checkbox" class="checkbox" id="{$ getUniqueKey(interface) $}"
574- data-ng-hide="isAllNetworkingDisabled()"
575- data-ng-checked="isInterfaceSelected(interface)"
576- data-ng-click="toggleInterfaceSelect(interface)"
577- data-ng-disabled="isDisabled()">
578+ data-ng-hide="isAllNetworkingDisabled()"
579+ data-ng-checked="isInterfaceSelected(interface)"
580+ data-ng-click="toggleInterfaceSelect(interface)"
581+ data-ng-disabled="isDisabled()">
582 </span>
583- <span data-ng-if="!isEditing(interface) || interface.type === 'vlan'" data-ng-show="tableInfo.column == 'name'" title="{$ interface.name $}">{$ interface.name $}</span>
584- <span class="ng-hide" data-ng-show="tableInfo.column == 'mac'" title="{$ interface.mac_address $}">{$ interface.mac_address $}</span>
585- <input type="text" class="p-form-validation__input u-no-margin--top"
586- data-ng-if="isEditing(interface) && interface.type !== 'vlan'"
587- data-ng-disabled="isController"
588- data-ng-model="editInterface.name">
589+ <span data-ng-if="!isEditing(interface) || (!isEditing(interface) && interface.type === 'vlan')"
590+ data-ng-show="tableInfo.column == 'name'"
591+ title="{$ interface.name $}">{$ interface.name $}</span>
592+ <span class="ng-hide" data-ng-show="tableInfo.column == 'mac'"
593+ title="{$ interface.mac_address $}">{$ interface.mac_address $}</span>
594 </td>
595- <td class="table-col--7" aria-label="Boot interface">
596+ <td aria-label="Boot interface">
597 <span class="u-align--center u-hide u-show--large">
598 <input type="radio" name="bootInterface" id="{$ interface.name $}" checked
599 data-ng-if="!isController && isBootInterface(interface) && !isEditing(interface)"
600@@ -1058,22 +1060,22 @@
601 <span class="u-hide--large" data-ng-if="!isController && isBootInterface(interface) && !isEditing(interface)">Yes</span>
602 <span class="u-hide--large" data-ng-if="!isController && !isBootInterface(interface) && !isEditing(interface)">No</span>
603 </td>
604- <td class="table-col--9" aria-label="Type">
605+ <td aria-label="Type">
606 <span data-ng-if="!isEditing(interface)" title="{$ getInterfaceTypeText(interface) $}">{$ getInterfaceTypeText(interface) $}</span>
607 </td>
608- <td class="table-col--13" aria-label="Fabric">
609+ <td aria-label="Fabric">
610 <span data-ng-if="!isEditing(interface)" title="{$ interface.fabric.name || 'Disconnected' $}">{$ interface.fabric.name || "Disconnected" $}</span>
611 </td>
612- <td class="table-col--13" aria-label="VLAN">
613+ <td aria-label="VLAN">
614 <span data-ng-if="!isEditing(interface)" title="{$ getVLANText(interface.vlan) $}">{$ getVLANText(interface.vlan) $}</span>
615 </td>
616- <td class="table-col--13" aria-label="Subnet">
617+ <td aria-label="Subnet">
618 <span data-ng-if="!isEditing(interface) && ((isDevice && interface.subnet) || (interface.fabric && !interface.discovered[0].subnet_id))" title="{$ getSubnetText(interface.subnet) $}">{$ getSubnetText(interface.subnet) $}</span>
619 <span data-ng-if="isAllNetworkingDisabled() && interface.discovered[0].subnet_id">
620 {$ getSubnetText(getSubnet(interface.discovered[0].subnet_id)) $}
621 </span>
622 </td>
623- <td class="table-col--19" aria-label="IP Address">
624+ <td aria-label="IP Address">
625 <span data-ng-if="!isEditing(interface) && !interface.discovered[0].ip_address && interface.fabric" title="{$ interface.ip_address $} ({$ getLinkModeText(interface) $})">
626 {$ interface.ip_address $} ({$ getLinkModeText(interface) $})
627 </span>
628@@ -1081,9 +1083,9 @@
629 {$ interface.discovered[0].ip_address $} (DHCP)
630 </span>
631 </td>
632- <td class="table-col--10 p-table--action-cell">
633+ <td class="p-table--action-cell">
634 <div class="u-align--right">
635- <div class="p-contextual-menu" toggle-ctrl data-ng-if="!isAllNetworkingDisabled() || isLimitedEditingAllowed(interface)">
636+ <div class="p-contextual-menu" toggle-ctrl data-ng-if="(!isAllNetworkingDisabled() || isLimitedEditingAllowed(interface)) && !isEditing(interface)">
637 <button class="p-button--base is-small p-contextual-menu__toggle" data-ng-click="toggleMenu()"><i class="p-icon--contextual-menu u-no-margin--right">Actions</i></button>
638 <div class="p-contextual-menu__dropdown" role="menu" data-ng-show="isToggled">
639 <button class="p-contextual-menu__link"
640@@ -1116,14 +1118,14 @@
641
642 <td class="p-table-expanding__panel col-12" data-ng-class="{ 'u-no-padding': !isShowingAdd() && !isEditing(interface) && !isShowingDeleteConfirm() && !isShowingAdd() || newInterface.saving }" data-ng-if="isInterfaceSelected(interface)">
643 <div class="row" data-ng-if="isShowingAdd() || isEditing(interface) || isShowingDeleteConfirm() || isShowingAdd() && !newInterface.saving">
644- <div class="table__dropdown-title" data-ng-if="windowWidth <= 768">
645+ <div class="u-position-relative u-clearfix" data-ng-if="windowWidth <= 768">
646 <h2 data-ng-click="cancel()" class="u-float--left p-heading--four">
647 <span data-ng-if="canAddAlias(newInterface.parent)">Adding alias</span>
648 <span data-ng-if="canAddVLAN(newInterface.parent)">Adding VLAN</span>
649 <span data-ng-if="isEditing(interface)">Editing {$ interface.name $}</span>
650 <span data-ng-if="isShowingDeleteConfirm()">Removing {$ interface.name $}</span>
651 </h2>
652- <button data-ng-click="cancel()" class="p-button u-float--right">
653+ <button data-ng-click="cancel()" class="p-button--base u-float--right p-button--close">
654 <i class="p-icon--remove">Cancel</i>
655 </button>
656 </div>
657@@ -1213,76 +1215,100 @@
658 </div>
659 </div>
660 </div>
661- <maas-obj-form obj="editInterface" manager="nodesManager" manager-method="updateInterfaceForm"
662- table-form="true" save-on-blur="false" after-save="editSave" pre-process="preProcessInterface"
663- data-ng-if="isEditing(editInterface)">
664+ <div class="row">
665+ <div class="col-3 mobile-col-2 tablet-col-3" data-ng-if="windowWidth >= 768">
666+ <input type="text" class="p-form-validation__input"
667+ data-ng-if="isEditing(interface) && interface.type !== 'vlan'"
668+ data-ng-disabled="isController"
669+ data-ng-model="editInterface.name">
670+ <span data-ng-if="!isEditing(interface) || interface.type === 'vlan'"
671+ data-ng-show="tableInfo.column == 'name'"
672+ title="{$ interface.name $}">{$ interface.name $}</span>
673+ </div>
674+ </div>
675+ <div class="row">
676+ <hr />
677 <div class="row">
678- <div class="col-6">
679- <div class="p-form__group">
680- <label class="p-form__label">Type</label>
681- <div class="p-form__control">
682- <span>{$ getInterfaceTypeText(interface) $}</span>
683+ <maas-obj-form obj="editInterface" manager="nodesManager" manager-method="updateInterfaceForm"
684+ table-form="true" save-on-blur="false" after-save="editSave" pre-process="preProcessInterface"
685+ data-ng-if="isEditing(editInterface)">
686+ <div class="row">
687+ <div class="col-6">
688+ <div class="p-form__group u-clearfix">
689+ <label class="p-form__label col-2 mobile-col-2 tablet-col-2">Type</label>
690+ <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
691+ <span class="p-control-text">{$ getInterfaceTypeText(interface) $}</span>
692+ </div>
693+ </div>
694+ <maas-obj-field type="text" key="mac_address" label="MAC address"
695+ data-ng-if="interface.type !== 'alias' && interface.type !== 'vlan'" disable-label="false"
696+ disabled="isController" label-width="2" label-width-tablet="2" input-width="3" input-width-tablet="4"
697+ input-class="table__input" placeholder="00:00:00:00:00:00"></maas-obj-field>
698+ <div class="p-form__group u-clearfix" data-ng-if="!isAllNetworkingDisabled(interface)">
699+ <label class="p-form__label col-2 mobile-col-2 tablet-col-2">Tags</label>
700+ <div class="p-form__control col-3 mobile-col-2 tablet-col-3 tags--inline">
701+ <tags-input data-ng-model="interface.tags" allow-tags-pattern="[\w-]+"></tags-input>
702+ </div>
703+ </div>
704+ </div>
705+ <div class="col-6" data-ng-if="!isAllNetworkingDisabled(interface)">
706+ <maas-obj-field type="options" key="fabric" label="Fabric"
707+ disable-label="false"
708+ placeholder="Disconnected" placeholder-enabled="true"
709+ on-change="fabricChangedForm"
710+ options="fabric as fabric.name for fabric in fabrics"
711+ label-width="2" label-width-tablet="2" input-width="3" input-width-tablet="4"></maas-obj-field>
712+ <maas-obj-field type="options" key="vlan" label="VLAN"
713+ disable-label="false"
714+ data-ng-show="!isController && editInterface.$maasForm.getValue('fabric')"
715+ on-change="vlanChangedForm"
716+ options="vlan as getVLANText(vlan) for vlan in vlans | removeDefaultVLANIfVLAN:interface.type | filterByFabric:editInterface.$maasForm.getValue('fabric')"
717+ label-width="2" label-width-tablet="2" input-width="3" input-width-tablet="4">
718+ </maas-obj-field>
719+ <maas-obj-field type="options" key="subnet" label="Subnet" placeholder="Unconfigured" placeholder-enabled="true"
720+ disable-label="false"
721+ data-ng-show="!isController && editInterface.$maasForm.getValue('fabric')"
722+ on-change="subnetChangedForm"
723+ options="subnet as getSubnetText(subnet) for subnet in subnets | filterByVLAN:editInterface.$maasForm.getValue('vlan')"
724+ label-width="2" label-width-tablet="2" input-width="3" input-width-tablet="4">
725+ </maas-obj-field>
726+ <maas-obj-field type="options" key="subnet" label="Subnet" placeholder="Unconfigured" placeholder-enabled="true"
727+ data-ng-init="editInterface.subnet = editInterface.defaultSubnet"
728+ data-ng-if="!isController && editInterface.$maasForm.getValue('ip_assignment') === 'static'"
729+ on-change="subnetChangedForm"
730+ disable-label="false"
731+ options="subnet as getSubnetText(subnet) for subnet in subnets"
732+ label-width="2" label-width-tablet="2" input-width="3" input-width-tablet="4"></maas-obj-field>
733+ <maas-obj-field type="options" key="mode" label="IP mode"
734+ disable-label="false"
735+ data-ng-if="!isController && editInterface.$maasForm.getValue('fabric') && !isLinkModeDisabled(editInterface.$maasForm)"
736+ options="mode.mode as mode.text for mode in modes | filterLinkModes:editInterface.$maasForm"
737+ on-change="modeChangedForm"
738+ label-width="2" label-width-tablet="2" input-width="3" input-width-tablet="4">
739+ </maas-obj-field>
740+ <maas-obj-field type="text" key="ip_address" label="IP address" placeholder="IP Address"
741+ disable-label="false" input-class="table__input"
742+ data-ng-if="!isController && editInterface.$maasForm.getValue('fabric') && editInterface.$maasForm.getValue('mode') == 'static'"
743+ label-width="2" label-width-tablet="2" input-width="3" input-width-tablet="4">
744+ </maas-obj-field>
745 </div>
746 </div>
747- <maas-obj-field type="text" key="mac_address" label="MAC address" label-width="2" input-width="5"
748- data-ng-if="interface.type !== 'alias' && interface.type !== 'vlan'" disable-label="false"
749- disabled="isController"
750- input-class="table__input u-margin--none" placeholder="00:00:00:00:00:00"></maas-obj-field>
751- <maas-obj-field type="tags" key="tags" label="Tags" label-width="2" input-width="5"
752- placeholder="Add a tag"
753- data-ng-if="!isAllNetworkingDisabled(interface) && interface.type !== 'alias'"
754- disable-label="false"></maas-obj-field>
755- </div>
756- <div class="col-6" data-ng-if="!isAllNetworkingDisabled(interface)">
757- <maas-obj-field type="options" key="fabric" label="Fabric" label-width="2" input-width="5"
758- disable-label="false"
759- placeholder="Disconnected" placeholder-enabled="true"
760- on-change="fabricChangedForm"
761- options="fabric as fabric.name for fabric in fabrics"></maas-obj-field>
762- <maas-obj-field type="options" key="vlan" label="VLAN" label-width="2" input-width="5"
763- disable-label="false"
764- data-ng-show="!isController && editInterface.$maasForm.getValue('fabric')"
765- on-change="vlanChangedForm"
766- options="vlan as getVLANText(vlan) for vlan in vlans | removeDefaultVLANIfVLAN:interface.type | filterByFabric:editInterface.$maasForm.getValue('fabric')">
767- </maas-obj-field>
768- <maas-obj-field type="options" key="subnet" label="Subnet" placeholder="Unconfigured" placeholder-enabled="true"
769- disable-label="false" label-width="2" input-width="5"
770- data-ng-show="!isController && editInterface.$maasForm.getValue('fabric')"
771- on-change="subnetChangedForm"
772- options="subnet as getSubnetText(subnet) for subnet in subnets | filterByVLAN:editInterface.$maasForm.getValue('vlan')">
773- </maas-obj-field>
774- <maas-obj-field type="options" key="subnet" label="Subnet" placeholder="Unconfigured" placeholder-enabled="true"
775- data-ng-init="editInterface.subnet = editInterface.defaultSubnet" label-width="2" input-width="5"
776- data-ng-if="!isController && editInterface.$maasForm.getValue('ip_assignment') === 'static'"
777- on-change="subnetChangedForm"
778- disable-label="false"
779- options="subnet as getSubnetText(subnet) for subnet in subnets"></maas-obj-field>
780- <maas-obj-field type="options" key="mode" label="IP mode" label-width="2" input-width="5"
781- disable-label="false"
782- data-ng-if="!isController && editInterface.$maasForm.getValue('fabric') && !isLinkModeDisabled(editInterface.$maasForm)"
783- options="mode.mode as mode.text for mode in modes | filterLinkModes:editInterface.$maasForm"
784- on-change="modeChangedForm">
785- </maas-obj-field>
786- <maas-obj-field type="text" key="ip_address" label="IP address" placeholder="IP Address" label-width="two" input-width="three"
787- disable-label="false" input-class="table__input u-margin--none"
788- data-ng-if="!isController && editInterface.$maasForm.getValue('fabric') && editInterface.$maasForm.getValue('mode') == 'static'">
789- </maas-obj-field>
790- </div>
791- </div>
792- <div class="row u-no-margin--top">
793- <hr />
794- <div class="u-float--left">
795- <maas-obj-errors></maas-obj-errors>
796- </div>
797- <div class="u-float--right u-no-margin--top">
798- <button class="p-button--base"
799- data-ng-click="editCancel()">Cancel</button>
800- <button class="p-button--positive u-no-margin--top"
801- data-ng-disabled="(isInterfaceNameInvalid(editInterface)) || isIPAddressInvalid(editInterface) || isMACAddressInvalid(editInterface.mac_address, true)"
802- maas-obj-save>Save</button>
803- </div>
804+ <div class="row">
805+ <hr />
806+ <div class="u-float--left">
807+ <maas-obj-errors></maas-obj-errors>
808+ </div>
809+ <div class="u-float--right">
810+ <button class="p-button--base"
811+ data-ng-click="editCancel()">Cancel</button>
812+ <button class="p-button--positive"
813+ data-ng-disabled="(isInterfaceNameInvalid(editInterface)) || isIPAddressInvalid(editInterface) || isMACAddressInvalid(editInterface.mac_address, true)"
814+ maas-obj-save>Save</button>
815+ </div>
816+ </div>
817+ </maas-obj-form>
818 </div>
819- </maas-obj-form>
820+ </div>
821 </div>
822 <div class="row is-active" data-ng-if="isShowingDeleteConfirm() && isInterfaceSelected(interface)">
823 <div class="col-8">
824@@ -1337,7 +1363,7 @@
825 </div>
826 <div class="row" data-ng-if="windowWidth <= 768">
827 <h2 class="u-float--left">Create bond</h2>
828- <button data-ng-click="cancel()" class="p-button u-float--right u-no-margin--top">
829+ <button data-ng-click="cancel()" class="p-button--base u-float--right p-button--close">
830 <i class="p-icon--close">Cancel</i>
831 </button>
832 </div>
833@@ -1830,7 +1856,11 @@
834 </div>
835 <div class="row">
836 <div class="col-12">
837- <p data-ng-if="!node.events.length">No events.</p>
838+ <div class="p-notification" data-ng-if="!node.events.length">
839+ <p class="p-notification__response">
840+ No events found.
841+ </p>
842+ </div>
843 <table data-ng-if="node.events.length">
844 <thead>
845 <tr>
846@@ -1853,9 +1883,7 @@
847 </div>
848 <div class="row">
849 <div class="col-12 u-align--center">
850- <p>
851- <button class="p-button--neutral" data-ng-show="allowShowMoreEvents()" data-ng-click="showMoreEvents()">Load next 10 events</button>
852- </p>
853+ <button class="p-button--neutral" data-ng-show="allowShowMoreEvents()" data-ng-click="showMoreEvents()">Load next 10 events</button>
854 </div>
855 </div>
856 </section>
857@@ -1869,7 +1897,9 @@
858 <div data-ng-if="resultsLoaded">
859 <div class="row">
860 <div class="col-12">
861- <div data-maas-cta="logs.availableOptions" data-ng-model="logs.option" data-ng-change="updateLogOutput()"></div>
862+ <div class="u-sv2">
863+ <div data-maas-cta="logs.availableOptions" data-ng-model="logs.option" data-ng-change="updateLogOutput()"></div>
864+ </div>
865 </div>
866 </div>
867 <div class="row">
868diff --git a/src/maasserver/static/partials/script-results-list.html b/src/maasserver/static/partials/script-results-list.html
869index 08bc55f..9ff651f 100644
870--- a/src/maasserver/static/partials/script-results-list.html
871+++ b/src/maasserver/static/partials/script-results-list.html
872@@ -10,33 +10,33 @@
873 <h2 class="p-heading--four" data-ng-if="hardware_type.title !== 'null'">{$ hardware_type.title $}</h2>
874 <div data-ng-repeat="(title, results) in hardware_type.results">
875 <h3 class="p-heading--five" data-ng-if="title !== 'null'">{$ title $}</h3>
876- <table class="p-table-expanding">
877+ <table class="p-table-expanding p-table--controllers-commissioning">
878 <thead>
879 <tr>
880- <th class="table-col--15">Name</th>
881- <th class="table-col--15">Tags</th>
882- <th class="table-col--20">Runtime</th>
883- <th class="table-col--20">Date</th>
884- <th class="table-col--25">Result</th>
885- <th class="table-col--5"><div class="u-align--right">Actions</div></th>
886+ <th class="col-3">Name</th>
887+ <th class="col-2">Tags</th>
888+ <th class="col-1">Runtime</th>
889+ <th class="col-3">Date</th>
890+ <th class="col-2">Result</th>
891+ <th><div class="u-align--right">Actions</div></th>
892 </tr>
893 </thead>
894 <tbody>
895 <tr data-ng-repeat="result in results" data-ng-class="{'is-active': result.showing_results || result.showing_history}">
896- <td class="table-col--15" data-ng-click="result.showing_results = !result.showing_results" aria-label="Name" title="{$ result.name $}">
897+ <td class="col-3" data-ng-click="result.showing_results = !result.showing_results" aria-label="Name" title="{$ result.name $}">
898 <span data-maas-script-status="script-status" data-script-status="result.status"></span>
899 {$ result.name $}
900 </td>
901- <td class="table-col--15" aria-label="Tags"><span data-ng-hide="result.showing_history" title="{$ result.tags $}">{$ result.tags $}</span></td>
902- <td class="table-col--20 p-table--action-cell u-wrap" aria-label="Runtime"><span data-ng-hide="result.showing_history" data-maas-script-run-time="script-runtime" data-start-time="result.starttime" data-run-time="{{result.runtime}}" data-estimated-run-time="{{result.estimated_runtime}}" data-script-status="result.status"></span></td>
903- <td class="table-col--20" aria-label="Date"><span data-ng-hide="result.showing_history" title="{$ result.updated $}">{$ result.updated $}</span></td>
904- <td class="table-col--25 p-table--action-cell u-wrap" aria-label="Result">
905+ <td class="col-2" aria-label="Tags"><span data-ng-hide="result.showing_history" title="{$ result.tags $}">{$ result.tags $}</span></td>
906+ <td class="col-1 p-table--action-cell u-wrap" aria-label="Runtime"><span data-ng-hide="result.showing_history" data-maas-script-run-time="script-runtime" data-start-time="result.starttime" data-run-time="{{result.runtime}}" data-estimated-run-time="{{result.estimated_runtime}}" data-script-status="result.status"></span></td>
907+ <td class="col-3" aria-label="Date"><span data-ng-hide="result.showing_history" title="{$ result.updated $}">{$ result.updated $}</span></td>
908+ <td class="col-2 p-table--action-cell u-wrap" aria-label="Result">
909 <span data-ng-hide="result.showing_history">
910 <!-- Only link to the testing result when we've received it. This is indicated with status 2(passed), 3(failed), 4(timedout), 6(degraded), 8(failed installing), 9(skipped)-->
911 {$ result.status_name $} <a data-ng-if="result.status === 2 || result.status === 3 || result.status === 4 || result.status === 6 || result.status === 8 || result.status === 9" href="#/{$ type_name $}/{$ node.system_id $}/{$ section.area $}/{$ result.id $}">View log</a>
912 </span>
913 </td>
914- <td class="table-col--5 p-table--action-cell">
915+ <td class="p-table--action-cell">
916 <div class="u-align--right">
917 <div class="p-contextual-menu" toggle-ctrl data-ng-hide="isShowingAdd() || isEditing(interface) || isShowingDeleteConfirm() || isShowingAdd()">
918 <button class="p-button--base is-small p-contextual-menu__toggle" data-ng-click="toggleMenu()">
919diff --git a/src/maasserver/static/scss/_maas.scss b/src/maasserver/static/scss/_maas.scss
920index 170d343..9f1ec21 100644
921--- a/src/maasserver/static/scss/_maas.scss
922+++ b/src/maasserver/static/scss/_maas.scss
923@@ -127,6 +127,7 @@
924
925 .p-contextual-menu__dropdown {
926 display: block;
927+ z-index: 20;
928 }
929
930 .p-form__controls {
931diff --git a/src/maasserver/static/scss/_patterns_table-expanding.scss b/src/maasserver/static/scss/_patterns_table-expanding.scss
932index 067f351..139947d 100644
933--- a/src/maasserver/static/scss/_patterns_table-expanding.scss
934+++ b/src/maasserver/static/scss/_patterns_table-expanding.scss
935@@ -6,10 +6,12 @@
936 }
937
938 .p-table-expanding {
939+
940 td.p-table-expanding__panel {
941 @extend %vf-card;
942 background-color: $color-x-light;
943 border-top: 0;
944+ margin-bottom: 0;
945 margin-left: 0 !important;
946 width: 100%; // overrides mobile card-table width
947
948diff --git a/src/maasserver/static/scss/_patterns_tag-input.scss b/src/maasserver/static/scss/_patterns_tag-input.scss
949index 688d9d4..8460849 100644
950--- a/src/maasserver/static/scss/_patterns_tag-input.scss
951+++ b/src/maasserver/static/scss/_patterns_tag-input.scss
952@@ -96,9 +96,7 @@
953 outline: 0;
954 margin: 2px;
955 padding: 0 0 0 5px;
956- float: left;
957 height: 30px;
958- width: auto !important;
959 box-shadow: none;
960
961 &:placeholder {
962diff --git a/src/maasserver/static/scss/_tables.scss b/src/maasserver/static/scss/_tables.scss
963index 28e42e7..f534b9b 100644
964--- a/src/maasserver/static/scss/_tables.scss
965+++ b/src/maasserver/static/scss/_tables.scss
966@@ -260,4 +260,104 @@
967 }
968 }
969 }
970+
971+ .p-table--controller-interfaces {
972+ .p-table--is-device {
973+ th, td {
974+ &:nth-child(1) {
975+ width: 30%;
976+ }
977+ &:nth-child(2) {
978+ width: 25%;
979+ }
980+ &:nth-child(3) {
981+ width: 25%;
982+ }
983+ &:nth-child(4) {
984+ width: 15%;
985+ }
986+ }
987+ }
988+
989+ .p-table--is-not-device {
990+ th, td {
991+ &:nth-child(1) {
992+ width: 16%;
993+ }
994+ &:nth-child(2) {
995+ width: 7%;
996+ }
997+ &:nth-child(3) {
998+ width: 9%;
999+ }
1000+ &:nth-child(4) {
1001+ width: 13%;
1002+ }
1003+ &:nth-child(5) {
1004+ width: 13%;
1005+ }
1006+ &:nth-child(6) {
1007+ width: 13%;
1008+ }
1009+ &:nth-child(7) {
1010+ width: 19%;
1011+ }
1012+ &:nth-child(8) {
1013+ width: 10%;
1014+ }
1015+ }
1016+ }
1017+ }
1018+
1019+ .p-table--controllers-commissioning {
1020+ .p-table__row {
1021+ th, td {
1022+ &:nth-child(1) {
1023+ width: 15%;
1024+ }
1025+ &:nth-child(2) {
1026+ width: 15%;
1027+ }
1028+ &:nth-child(3) {
1029+ width: 20%;
1030+ }
1031+ &:nth-child(4) {
1032+ width: 20%;
1033+ }
1034+ &:nth-child(5) {
1035+ width: 25%;
1036+ }
1037+ &:nth-child(6) {
1038+ width: 5%;
1039+ }
1040+ }
1041+ }
1042+ }
1043+ .p-table--controller-vlans {
1044+ .p-table__row {
1045+ @media (min-width: $breakpoint-small) {
1046+ th, td {
1047+ &:nth-child(1) {
1048+ width: 15%;
1049+ }
1050+ &:nth-child(2) {
1051+ width: 15%;
1052+ }
1053+ &:nth-child(3) {
1054+ width: 10%;
1055+ }
1056+ &:nth-child(4) {
1057+ width: 20%;
1058+ }
1059+ &:nth-child(5) {
1060+ width: 20%;
1061+ }
1062+ &:nth-child(6) {
1063+ width: 20%;
1064+ }
1065+ }
1066+ }
1067+ }
1068+ }
1069 }
1070+

Subscribers

People subscribed via source and target branches