Merge ~ya-bo-ng/maas:controllers-1.8-vanilla into maas: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
1082963... by Anthony Dillon

Remove duplicate clearfixes

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

LGTM

review: Approve
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
diff --git a/src/maasserver/static/js/angular/directives/call_to_action.js b/src/maasserver/static/js/angular/directives/call_to_action.js
index ff66f29..73b97b7 100644
--- a/src/maasserver/static/js/angular/directives/call_to_action.js
+++ b/src/maasserver/static/js/angular/directives/call_to_action.js
@@ -9,7 +9,8 @@ angular.module('MAAS').run(['$templateCache', function ($templateCache) {
9 $templateCache.put('directive/templates/cta.html', [9 $templateCache.put('directive/templates/cta.html', [
10 '<div class="p-contextual-menu">',10 '<div class="p-contextual-menu">',
11 '<button ',11 '<button ',
12 'class="p-button p-contextual-menu__toggle" ',12 'class="p-button p-contextual-menu__toggle',
13 ' p-button--min-margin-bottom" ',
13 'aria-controls="#cta-menu" ',14 'aria-controls="#cta-menu" ',
14 'aria-expanded="false" ',15 'aria-expanded="false" ',
15 'aria-haspopup="true" ',16 'aria-haspopup="true" ',
diff --git a/src/maasserver/static/js/angular/directives/maas_obj_form.js b/src/maasserver/static/js/angular/directives/maas_obj_form.js
index ef3cd60..b50b30b 100644
--- a/src/maasserver/static/js/angular/directives/maas_obj_form.js
+++ b/src/maasserver/static/js/angular/directives/maas_obj_form.js
@@ -581,8 +581,6 @@ angular.module('MAAS').directive('maasObjField', ['$compile',
581 labelElement.addClass("tablet-col-"581 labelElement.addClass("tablet-col-"
582 + attrs.labelWidthTablet);582 + attrs.labelWidthTablet);
583 }583 }
584 } else {
585 labelElement.addClass("u-margin--right");
586 }584 }
587 if(attrs.labelLeft === "true") {585 if(attrs.labelLeft === "true") {
588 labelElement.addClass('u-padding--left');586 labelElement.addClass('u-padding--left');
@@ -622,7 +620,6 @@ angular.module('MAAS').directive('maasObjField', ['$compile',
622 // Add the wrapper for the input.620 // Add the wrapper for the input.
623 var inputWrapper = angular.element('<div></div>');621 var inputWrapper = angular.element('<div></div>');
624 inputWrapper.addClass("p-form__control");622 inputWrapper.addClass("p-form__control");
625 inputWrapper.addClass("u-no-margin--top");
626623
627 if(attrs.inputWidthMobile) {624 if(attrs.inputWidthMobile) {
628 inputWrapper.addClass("mobile-col-"625 inputWrapper.addClass("mobile-col-"
diff --git a/src/maasserver/static/js/angular/directives/power_parameters.js b/src/maasserver/static/js/angular/directives/power_parameters.js
index 7dfcaaa..435b5ed 100644
--- a/src/maasserver/static/js/angular/directives/power_parameters.js
+++ b/src/maasserver/static/js/angular/directives/power_parameters.js
@@ -7,10 +7,12 @@
7angular.module('MAAS').run(['$templateCache', function ($templateCache) {7angular.module('MAAS').run(['$templateCache', function ($templateCache) {
8 // Inject the power-parameters.html into the template cache.8 // Inject the power-parameters.html into the template cache.
9 $templateCache.put('directive/templates/power-parameters.html', [9 $templateCache.put('directive/templates/power-parameters.html', [
10 '<div class="p-form__group">',10 '<div class="p-form__group u-clearfix">',
11 '<label for="power-type" ',11 '<label for="power-type" ',
12 'class="form__group-label col-2">Power type</label>',12 'class="p-form__label col-2 mobile-col-2 tablet-col-2">',
13 '<div class="form__group-input col-3">',13 'Power type',
14 '</label>',
15 '<div class="p-form__control col-3 mobile-col-2 tablet-col-3">',
14 '<select name="power-type" id="power-type" ',16 '<select name="power-type" id="power-type" ',
15 'data-ng-disabled="ngDisabled || ngModel.in_pod" ',17 'data-ng-disabled="ngDisabled || ngModel.in_pod" ',
16 'data-ng-class="{ invalid: !ngModel.type }" ',18 'data-ng-class="{ invalid: !ngModel.type }" ',
@@ -24,14 +26,15 @@ angular.module('MAAS').run(['$templateCache', function ($templateCache) {
24 '</select>',26 '</select>',
25 '</div>',27 '</div>',
26 '</div>',28 '</div>',
27 '<div class="p-form__group" ',29 '<div class="p-form__group u-clearfix" ',
28 'data-ng-repeat="field in ngModel.type.fields">',30 'data-ng-repeat="field in ngModel.type.fields">',
29 '<label for="{$ field.name $}" class="form__group-label col-2" ',31 '<label for="{$ field.name $}" ',
30 'data-ng-if="field.name !== ' + "'default_storage_pool' && ",32 'class="p-form__label col-2 mobile-col-2 tablet-col-2" ',
31 "(field.scope !== 'bmc' || !ngModel.in_pod)" + '">',33 'data-ng-if="field.name !== ' + "'default_storage_pool' && ",
34 "(field.scope !== 'bmc' || !ngModel.in_pod)" + '">',
32 '{$ field.label $}',35 '{$ field.label $}',
33 '</label>',36 '</label>',
34 '<div class="form__group-input col-3">',37 '<div class="p-form__control col-3 mobile-col-2 tablet-col-3">',
35 '<maas-power-input field="field" ',38 '<maas-power-input field="field" ',
36 'data-ng-disabled="ngDisabled || (field.scope === ',39 'data-ng-disabled="ngDisabled || (field.scope === ',
37 "'bmc' && ngModel.in_pod)" + '" ',40 "'bmc' && ngModel.in_pod)" + '" ',
diff --git a/src/maasserver/static/partials/cards/services.html b/src/maasserver/static/partials/cards/services.html
index 080b39a..0b3ad9b 100644
--- a/src/maasserver/static/partials/cards/services.html
+++ b/src/maasserver/static/partials/cards/services.html
@@ -1,9 +1,9 @@
1<header class="p-card__header">1<header class="p-card__header">
2 <h2 class="p-heading--four">Services</h2>2 <h2 class="p-heading--four">Services</h2>
3 <div class="u-vertically-center u-no-margin--top">3 <h3 class="p-heading--four">
4 <span data-maas-controller-status="node" data-maas-services="services" aria-label="Status" class="u-hide--small"></span>4 <span data-maas-controller-status="node" data-maas-services="services" aria-label="Status" class="u-hide--small"></span>
5 <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>5 <span data-maas-controller-status="node" data-maas-services="services" data-maas-text-only="true"></span>
6 </div>6 </h3>
7</header>7</header>
8<div>8<div>
9 <ul class="p-list-tree" aria-multiselectable="true" role="tablist">9 <ul class="p-list-tree" aria-multiselectable="true" role="tablist">
diff --git a/src/maasserver/static/partials/node-details.html b/src/maasserver/static/partials/node-details.html
index 0c397e2..bcb55a1 100755
--- a/src/maasserver/static/partials/node-details.html
+++ b/src/maasserver/static/partials/node-details.html
@@ -453,165 +453,169 @@
453 </table>453 </table>
454 </div>454 </div>
455 </section>455 </section>
456 <section class="p-strip" data-ng-if="section.area === 'configuration'">456 <section data-ng-if="section.area === 'configuration'">
457 <div class="row">457 <div class="p-strip">
458 <div class="col-10">
459 <h2 data-ng-if="!isController" class="p-heading--four">{$ node.node_type_display $} configuration</h2>
460 <h2 data-ng-if="isController" class="p-heading--four">Controller configuration</h2>
461 </div>
462 <div class="col-2" data-ng-if="!summary.editing">
463 <button class="p-button--neutral u-float--right"
464 data-ng-if="canEdit()"
465 data-ng-click="editSummary()">Edit</button>
466 </div>
467 </div>
468 <form class="p-form p-form--stacked">
469 <div class="row">458 <div class="row">
470 <div class="col-6">459 <div class="col-10">
471 <div class="p-form__group" data-ng-if="!isDevice && !isController"460 <h2 data-ng-if="!isController" class="p-heading--four">{$ node.node_type_display $} configuration</h2>
472 data-ng-class="{ 'is-error': invalidArchitecture() }">461 <h2 data-ng-if="isController" class="p-heading--four">Controller configuration</h2>
473 <label for="architecture" class="p-form__label">Architecture</label>462 </div>
474 <div class="p-form__control">463 <div class="col-2" data-ng-if="!summary.editing">
475 <select name="architecture" id="architecture" class="p-form-validation__input"464 <button class="p-button--neutral u-float--right u-no-margin--bottom"
476 data-ng-disabled="!summary.editing"465 data-ng-if="canEdit()"
477 data-ng-model="summary.architecture.selected"466 data-ng-click="editSummary()">Edit</button>
478 data-ng-options="arch for arch in summary.architecture.options">467 </div>
479 <option value="" disabled="disabled">{$ getArchitecturePlaceholder() $}</option>468 </div>
480 </select>469 <form class="p-form p-form--stacked">
470 <div class="row">
471 <div class="col-6">
472 <div class="p-form__group u-clearfix" data-ng-if="!isDevice && !isController"
473 data-ng-class="{ 'is-error': invalidArchitecture() }">
474 <label for="architecture" class="p-form__label col-2 mobile-col-2 tablet-col-2">Architecture</label>
475 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
476 <select name="architecture" id="architecture" class="p-form-validation__input"
477 data-ng-disabled="!summary.editing"
478 data-ng-model="summary.architecture.selected"
479 data-ng-options="arch for arch in summary.architecture.options">
480 <option value="" disabled="disabled">{$ getArchitecturePlaceholder() $}</option>
481 </select>
482 </div>
481 </div>483 </div>
482 </div>484 <div class="p-form__group u-clearfix" data-ng-if="!isDevice && !isController">
483 <div class="p-form__group" data-ng-if="!isDevice && !isController">485 <label for="min_hwe_kernel" class="p-form__label col-2 mobile-col-2 tablet-col-2">Minimum Kernel</label>
484 <label for="min_hwe_kernel" class="p-form__label">Minimum Kernel</label>486 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
485 <div class="p-form__control">487 <select name="min_hwe_kernel" id="min_hwe_kernel"
486 <select name="min_hwe_kernel" id="min_hwe_kernel"488 data-ng-disabled="!summary.editing"
487 data-ng-disabled="!summary.editing"489 data-ng-model="summary.min_hwe_kernel.selected"
488 data-ng-model="summary.min_hwe_kernel.selected"490 data-ng-options="hwe_kernel[0] as hwe_kernel[1] for hwe_kernel in summary.min_hwe_kernel.options">
489 data-ng-options="hwe_kernel[0] as hwe_kernel[1] for hwe_kernel in summary.min_hwe_kernel.options">491 <option value="">No minimum kernel</option>
490 <option value="">No minimum kernel</option>492 </select>
491 </select>493 </div>
492 </div>494 </div>
493 </div>495 <div class="p-form__group u-clearfix">
494 <div class="p-form__group">496 <label for="zone" class="p-form__label col-2 mobile-col-2 tablet-col-2">Zone</label>
495 <label for="zone" class="p-form__label">Zone</label>497 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
496 <div class="p-form__control">498 <select name="zone" id="zone"
497 <select name="zone" id="zone"499 data-ng-disabled="!summary.editing"
498 data-ng-disabled="!summary.editing"500 data-ng-model="summary.zone.selected"
499 data-ng-model="summary.zone.selected"501 data-ng-options="zone as zone.name for zone in summary.zone.options">
500 data-ng-options="zone as zone.name for zone in summary.zone.options">502 <option value="" disabled="disabled">Choose a zone</option>
501 <option value="" disabled="disabled">Choose a zone</option>503 </select>
502 </select>504 </div>
503 </div>505 </div>
504 </div>506 <div class="p-form__group u-clearfix" data-ng-if="!isDevice && !isController">
505 <div class="p-form__group" data-ng-if="!isDevice && !isController">507 <label for="pool" class="p-form__label col-2 mobile-col-2 tablet-col-2">Resource pool</label>
506 <label for="pool" class="p-form__label">Resource pool</label>508 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
507 <div class="p-form__control">509 <select name="pool" id="pool"
508 <select name="pool" id="pool"510 data-ng-disabled="!summary.editing"
509 data-ng-disabled="!summary.editing"511 data-ng-model="summary.pool.selected"
510 data-ng-model="summary.pool.selected"512 data-ng-options="pool as pool.name for pool in summary.pool.options">
511 data-ng-options="pool as pool.name for pool in summary.pool.options">513 <option value="" disabled="disabled">Choose a resource pool</option>
512 <option value="" disabled="disabled">Choose a resource pool</option>514 </select>
513 </select>515 </div>
514 </div>516 </div>
515 </div>517 <div class="p-form__group u-clearfix">
516 <div class="p-form__group">518 <label class="p-form__label col-2 mobile-col-2 tablet-col-2">Tags</label>
517 <label class="p-form__label">Tags</label>519 <div class="p-form__control col-3 mobile-col-2 tablet-col-3 tags--inline">
518 <div class="p-form__control tags--inline">520 <span data-ng-repeat="tag in node.tags" data-ng-hide="summary.editing">
519 <span data-ng-repeat="tag in node.tags" data-ng-hide="summary.editing">521 <a href="#/machines/?query=tags:({$ tag $})">{$ tag $}</a>
520 <a href="#/machines/?query=tags:({$ tag $})">{$ tag $}</a>522 </span>
521 </span>523 <tags-input data-ng-model="summary.tags"
522 <tags-input data-ng-model="summary.tags"524 data-ng-disabled="!summary.editing" allowed-tags-pattern="[\w-]+">
523 data-ng-show="summary.editing" allowed-tags-pattern="[\w-]+">525 <auto-complete source="tagsAutocomplete($query)"></auto-complete>
524 <auto-complete source="tagsAutocomplete($query)"></auto-complete>526 </tags-input>
525 </tags-input>527 </div>
526 </div>528 </div>
527 </div>529 </div>
528 </div>530 </div>
529 </div>531 <div class="row">
530 <div class="row">532 <div class="col-12 u-align--right" data-ng-if="summary.editing">
531 <div class="col-12 u-align--right" data-ng-if="summary.editing">533 <button class="p-button--base"
532 <button class="p-button--base"534 data-ng-click="cancelEditSummary()">Cancel</button>
533 data-ng-click="cancelEditSummary()">Cancel</button>535 <button class="p-button--positive"
534 <button class="p-button--positive"536 data-ng-class="{ secondary: invalidArchitecture() }"
535 data-ng-class="{ secondary: invalidArchitecture() }"537 data-ng-click="saveEditSummary()">Save changes</button>
536 data-ng-click="saveEditSummary()">Save changes</button>538 </div>
537 </div>539 </div>
538 </div>540 </form>
539 </form>
540 <div class="row" data-ng-if="!isDevice">
541 <div class="col-10">
542 <h2 class="p-heading--four">Power configuration</h2>
543 </div>
544 <div class="col-2">
545 <button class="p-button--neutral u-float--right"
546 data-ng-show="canEdit() && power_types.length"
547 data-ng-click="editPower()"
548 data-ng-if="!power.editing">Edit</button>
549 </div>
550 </div>541 </div>
551 <div class="row">542 <div class="p-strip">
552 <div class="col-12" data-ng-if="!isDevice">543 <div class="row" data-ng-if="!isDevice">
553 <div class="p-notification--negative" data-ng-if="!isRackControllerConnected()">544 <div class="col-10">
554 <p class="p-notification__response">545 <h2 class="p-heading--four">Power configuration</h2>
555 <span class="p-notification__status">Error:</span> Editing is currently
556 disabled because no rack controller is currently
557 connected to the region.</p>
558 </div>546 </div>
559 <div class="p-notification--negative"547 <div class="col-2">
560 data-ng-if="isRackControllerConnected() && node.power_type == '' && !isController">548 <button class="p-button--neutral u-float--right"
561 <p class="p-notification__response">549 data-ng-show="canEdit() && power_types.length"
562 <span class="p-notification__status">Error:</span> This node does not550 data-ng-click="editPower()"
563 have a power type set and MAAS will be unable to551 data-ng-if="!power.editing">Edit</button>
564 control it. Update the power information below.</p>
565 </div>
566 <div class="p-notification--warning"
567 data-ng-if="isRackControllerConnected() && node.power_type == '' && isController">
568 <p class="p-notification__response">
569 <span class="p-notification__status">Warning:</span> This node does not
570 have a power type set and MAAS will be unable to
571 control it. Update the power information below.</p>
572 </div>
573 <div class="p-notification--negative" data-ng-if="hasPowerError()">
574 <p class="p-notification__response">
575 <span class="p-notification__status">Error:</span> Power control
576 software for this power type is missing from the rack
577 controller. To proceed, install the
578 {$ getPowerErrors() $} on the rack controller.</p>
579 </div>
580 <div class="p-notification--negative" data-ng-if="hasPowerEventError()">
581 <p class="p-notification__response">
582 <span class="p-notification__status">Error:</span> {$ getPowerEventErrorText() $}</p>
583 </div>
584 <div class="p-notification" data-ng-if="power.type.name == 'manual'">
585 <p class="p-notification__response">Power control for
586 this power type will need to be handled manually.</p>
587 </div>
588 <div class="p-notification" data-ng-if="power.editing && node.power_bmc_node_count > 1">
589 <p class="p-notification__response">This power controller
590 manages {$ node.power_bmc_node_count - 1 $} other
591 {$ node.power_bmc_node_count > 3 ? "nodes" : "node" $}.
592 Changing power parameters will affect these nodes.</p>
593 </div>552 </div>
594 </div>553 </div>
595 </div>
596 <form class="p-form p-form--stacked" class="disabled" data-ng-if="!isDevice">
597 <div class="row">554 <div class="row">
598 <div class="col-6 ng-hide"555 <div class="col-12" data-ng-if="!isDevice">
599 data-ng-show="power_types.length"556 <div class="p-notification--negative" data-ng-if="!isRackControllerConnected()">
600 data-ng-disabled="!power.editing"557 <p class="p-notification__response">
601 data-maas-power-parameters="power_types"558 <span class="p-notification__status">Error:</span> Editing is currently
602 data-ng-model="power">559 disabled because no rack controller is currently
560 connected to the region.</p>
561 </div>
562 <div class="p-notification--negative"
563 data-ng-if="isRackControllerConnected() && node.power_type == '' && !isController">
564 <p class="p-notification__response">
565 <span class="p-notification__status">Error:</span> This node does not
566 have a power type set and MAAS will be unable to
567 control it. Update the power information below.</p>
568 </div>
569 <div class="p-notification--warning"
570 data-ng-if="isRackControllerConnected() && node.power_type == '' && isController">
571 <p class="p-notification__response">
572 <span class="p-notification__status">Warning:</span> This node does not
573 have a power type set and MAAS will be unable to
574 control it. Update the power information below.</p>
575 </div>
576 <div class="p-notification--negative" data-ng-if="hasPowerError()">
577 <p class="p-notification__response">
578 <span class="p-notification__status">Error:</span> Power control
579 software for this power type is missing from the rack
580 controller. To proceed, install the
581 {$ getPowerErrors() $} on the rack controller.</p>
582 </div>
583 <div class="p-notification--negative" data-ng-if="hasPowerEventError()">
584 <p class="p-notification__response">
585 <span class="p-notification__status">Error:</span> {$ getPowerEventErrorText() $}</p>
586 </div>
587 <div class="p-notification" data-ng-if="power.type.name == 'manual'">
588 <p class="p-notification__response">Power control for
589 this power type will need to be handled manually.</p>
590 </div>
591 <div class="p-notification" data-ng-if="power.editing && node.power_bmc_node_count > 1">
592 <p class="p-notification__response">This power controller
593 manages {$ node.power_bmc_node_count - 1 $} other
594 {$ node.power_bmc_node_count > 3 ? "nodes" : "node" $}.
595 Changing power parameters will affect these nodes.</p>
596 </div>
603 </div>597 </div>
604 </div>598 </div>
605 <div class="row">599 <form class="p-form p-form--stacked" class="disabled" data-ng-if="!isDevice">
606 <div class="col-12 u-align--right ng-hide" data-ng-show="power.editing">600 <div class="row">
607 <button class="p-button--base" type="button"601 <div class="col-6 ng-hide"
608 data-ng-click="cancelEditPower()">Cancel</button>602 data-ng-show="power_types.length"
609 <button class="p-button--positive"603 data-ng-disabled="!power.editing"
610 data-ng-class="{ secondary: invalidPowerType() }"604 data-maas-power-parameters="power_types"
611 data-ng-click="saveEditPower()">Save changes</button>605 data-ng-model="power">
606 </div>
612 </div>607 </div>
613 </div>608 <div class="row">
614 </form>609 <div class="col-12 u-align--right ng-hide" data-ng-show="power.editing">
610 <button class="p-button--base" type="button"
611 data-ng-click="cancelEditPower()">Cancel</button>
612 <button class="p-button--positive"
613 data-ng-class="{ secondary: invalidPowerType() }"
614 data-ng-click="saveEditPower()">Save changes</button>
615 </div>
616 </div>
617 </form>
618 </div>
615 </section>619 </section>
616 <section class="p-strip" data-ng-if="section.area === 'services'">620 <section class="p-strip" data-ng-if="section.area === 'services'">
617 <div class="row" data-ng-show="node.node_type == 3 || node.node_type == 4">621 <div class="row" data-ng-show="node.node_type == 3 || node.node_type == 4">
@@ -717,38 +721,38 @@
717 </div>721 </div>
718 <div class="row">722 <div class="row">
719 <form data-ng-if="loaded">723 <form data-ng-if="loaded">
720 <table class="p-table-expanding">724 <table class="p-table-expanding p-table--controller-vlans">
721 <thead>725 <thead>
722 <tr>726 <tr class="p-table__row">
723 <th class="col-2" title="Fabric">Fabric</th>727 <th title="Fabric">Fabric</th>
724 <th class="col-2" title="VLAN">VLAN</th>728 <th title="VLAN">VLAN</th>
725 <th class="col-1" title="DHCP">DHCP</th>729 <th title="DHCP">DHCP</th>
726 <th class="col-3" title="Subnets">Subnets</th>730 <th title="Subnets">Subnets</th>
727 <th class="col-2" title="Primary rack">Primary rack</th>731 <th title="Primary rack">Primary rack</th>
728 <th class="col-2" title="Secondary rack">Secondary rack</th>732 <th title="Secondary rack">Secondary rack</th>
729 </tr>733 </tr>
730 </thead>734 </thead>
731 <tbody>735 <tbody>
732 <tr class="table__row" data-ng-repeat="vlanRow in vlanTable">736 <tr class="p-table__row" data-ng-repeat="vlanRow in vlanTable">
733 <td class="col-2" title="{$ vlanRow['fabric'].name $}">737 <td title="{$ vlanRow['fabric'].name $}">
734 <a href="#/fabric/{$ vlanRow['fabric'].id $}">{$ vlanRow['fabric'].name $}</a>738 <a href="#/fabric/{$ vlanRow['fabric'].id $}">{$ vlanRow['fabric'].name $}</a>
735 </td>739 </td>
736 <td class="col-2" title="{$ vlanRow['fabric'].name $}">740 <td title="{$ getVLANText(vlanRow['vlan']) $}">
737 <a href="#/vlan/{$ vlanRow['vlan'].id $}">{$ getVLANText(vlanRow['vlan']) $}</a>741 <a href="#/vlan/{$ vlanRow['vlan'].id $}">{$ getVLANText(vlanRow['vlan']) $}</a>
738 </td>742 </td>
739 <td class="col-1">743 <td>
740 <span data-ng-if="vlanRow.vlan.dhcp_on === true || vlanRow.vlan.relay_vlan !== null || vlanRow.vlan.external_dhcp === true">Enabled</span>744 <span data-ng-if="vlanRow.vlan.dhcp_on === true || vlanRow.vlan.relay_vlan !== null || vlanRow.vlan.external_dhcp === true" title="Enabled">Enabled</span>
741 <span data-ng-if="vlanRow.vlan.dhcp_on !== true && vlanRow.vlan.relay_vlan === null">Disabled</span>745 <span data-ng-if="vlanRow.vlan.dhcp_on !== true && vlanRow.vlan.relay_vlan === null" title="Disabled">Disabled</span>
742 </td>746 </td>
743 <td class="col-3">747 <td>
744 <div class="u-no-margin--top" data-ng-repeat="subnet in vlanRow['subnets']">748 <div class="u-no-margin--top" data-ng-repeat="subnet in vlanRow['subnets']">
745 <a href="#/subnet/{$ subnet.id $}" title="{$ getSubnetText(subnet) $}">{$ getSubnetText(subnet) $}</a>749 <a href="#/subnet/{$ subnet.id $}" title="{$ getSubnetText(subnet) $}">{$ getSubnetText(subnet) $}</a>
746 </div>750 </div>
747 </td>751 </td>
748 <td class="col-2">752 <td>
749 <a href="#/controller/{$ vlanRow['primary_rack'].system_id $}" title="{$ vlanRow['primary_rack'].fqdn $}">{$ vlanRow['primary_rack'].fqdn $}</a>753 <a href="#/controller/{$ vlanRow['primary_rack'].system_id $}" title="{$ vlanRow['primary_rack'].fqdn $}">{$ vlanRow['primary_rack'].fqdn $}</a>
750 </td>754 </td>
751 <td class="col-2">755 <td>
752 <a href="#/controller/{$ vlanRow['secondary_rack'].system_id $}" title="{$ vlanRow['secondary_rack'].fqdn $}">{$ vlanRow['secondary_rack'].fqdn $}</a>756 <a href="#/controller/{$ vlanRow['secondary_rack'].system_id $}" title="{$ vlanRow['secondary_rack'].fqdn $}">{$ vlanRow['secondary_rack'].fqdn $}</a>
753 </td>757 </td>
754 </tr>758 </tr>
@@ -785,17 +789,17 @@
785 </div>789 </div>
786 </div>790 </div>
787 <div class="row">791 <div class="row">
788 <table class="p-table-expanding">792 <table class="p-table-expanding p-table--controller-interfaces">
789 <thead>793 <thead>
790 <tr data-ng-if="isDevice">794 <tr data-ng-if="isDevice" class="p-table--is-device">
791 <th class="table-col--30">MAC</th>795 <th>MAC</th>
792 <th class="table-col--25">Subnet</th>796 <th>Subnet</th>
793 <th class="table-col--25">IP Address</th>797 <th>IP Address</th>
794 <th class="table-col--15"><div class="u-align--right">Actions</div></th>798 <th><div class="u-align--right">Actions</div></th>
795 </tr>799 </tr>
796800
797 <tr data-ng-if="!isDevice">801 <tr data-ng-if="!isDevice" class="p-table--is-not-device">
798 <th class="table-col--16">802 <th>
799 <a data-ng-class="{ 'p-link--strong': tableInfo.column == 'name' }"803 <a data-ng-class="{ 'p-link--strong': tableInfo.column == 'name' }"
800 data-ng-click="tableInfo.column = 'name'">804 data-ng-click="tableInfo.column = 'name'">
801 Name805 Name
@@ -806,26 +810,26 @@
806 MAC810 MAC
807 </a>811 </a>
808 </th>812 </th>
809 <th class="table-col--7"><div data-ng-if="!isController" class="u-align--center">PXE</div></th>813 <th><div data-ng-if="!isController" class="u-align--center">PXE</div></th>
810 <th class="table-col--9">Type</th>814 <th>Type</th>
811 <th class="table-col--13">Fabric</th>815 <th>Fabric</th>
812 <th class="table-col--13">VLAN</th>816 <th>VLAN</th>
813 <th class="table-col--13">Subnet</th>817 <th>Subnet</th>
814 <th class="table-col--19">IP Address</th>818 <th>IP Address</th>
815 <th class="table-col--10"><div class="u-align--right">Actions</div></th>819 <th><div class="u-align--right">Actions</div></th>
816 </tr>820 </tr>
817 </thead>821 </thead>
818 <tbody data-selected-rows>822 <tbody data-selected-rows>
819 <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()">823 <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()">
820 <td class="table-col--30">{$ interface.mac_address $}</td>824 <td>{$ interface.mac_address $}</td>
821 <td class="table-col--25" aria-label="Subnet">825 <td aria-label="Subnet">
822 <span data-ng-if="!isEditing(interface) && (interface.subnet || (interface.fabric && !interface.discovered[0].subnet_id))">{$ getSubnetText(interface.subnet) $}</span>826 <span data-ng-if="!isEditing(interface) && (interface.subnet || (interface.fabric && !interface.discovered[0].subnet_id))">{$ getSubnetText(interface.subnet) $}</span>
823 <span data-ng-if="isAllNetworkingDisabled() && interface.discovered[0].subnet_id" title="{$ getSubnetText(getSubnet(interface.discovered[0].subnet_id)) $}">827 <span data-ng-if="isAllNetworkingDisabled() && interface.discovered[0].subnet_id" title="{$ getSubnetText(getSubnet(interface.discovered[0].subnet_id)) $}">
824 {$ getSubnetText(getSubnet(interface.discovered[0].subnet_id)) $}828 {$ getSubnetText(getSubnet(interface.discovered[0].subnet_id)) $}
825 </span>829 </span>
826 </td>830 </td>
827 <td class="table-col--25" aria-label="IP Address">{$ interface.ip_address $}</td>831 <td aria-label="IP Address">{$ interface.ip_address $}</td>
828 <td class="table-col--15 p-table--action-cell">832 <td class="p-table--action-cell">
829 <div class="u-align--right">833 <div class="u-align--right">
830 <div class="p-contextual-menu" toggle-ctrl data-ng-if="!isAllNetworkingDisabled() || isLimitedEditingAllowed(interface)">834 <div class="p-contextual-menu" toggle-ctrl data-ng-if="!isAllNetworkingDisabled() || isLimitedEditingAllowed(interface)">
831 <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>835 <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>
@@ -855,14 +859,14 @@
855 </td>859 </td>
856 <td class="p-table-expanding__panel col-12" data-ng-if="isInterfaceSelected(interface)">860 <td class="p-table-expanding__panel col-12" data-ng-if="isInterfaceSelected(interface)">
857 <div class="row" data-ng-if="isShowingAdd() || isEditing(interface) || isShowingDeleteConfirm() || isShowingAdd() && !newInterface.saving">861 <div class="row" data-ng-if="isShowingAdd() || isEditing(interface) || isShowingDeleteConfirm() || isShowingAdd() && !newInterface.saving">
858 <div class="table__dropdown-title" data-ng-if="windowWidth <= 768">862 <div class="u-position-relative u-clearfix" data-ng-if="windowWidth <= 768">
859 <h2 data-ng-click="cancel()" class="u-float--left p-heading--four">863 <h2 data-ng-click="cancel()" class="u-float--left p-heading--four">
860 <span data-ng-if="canAddAlias(newInterface.parent)">Adding alias</span>864 <span data-ng-if="canAddAlias(newInterface.parent)">Adding alias</span>
861 <span data-ng-if="canAddVLAN(newInterface.parent)">Adding VLAN</span>865 <span data-ng-if="canAddVLAN(newInterface.parent)">Adding VLAN</span>
862 <span data-ng-if="isEditing(interface)">Editing {$ interface.name $}</span>866 <span data-ng-if="isEditing(interface)">Editing {$ interface.name $}</span>
863 <span data-ng-if="isShowingDeleteConfirm()">Removing {$ interface.name $}</span>867 <span data-ng-if="isShowingDeleteConfirm()">Removing {$ interface.name $}</span>
864 </h2>868 </h2>
865 <button data-ng-click="cancel()" class="p-button u-float--right">869 <button data-ng-click="cancel()" class="p-button--base u-float--right p-button--close">
866 <i class="p-icon--remove">Cancel</i>870 <i class="p-icon--remove">Cancel</i>
867 </button>871 </button>
868 </div>872 </div>
@@ -956,10 +960,10 @@
956 data-ng-if="isEditing(editInterface)">960 data-ng-if="isEditing(editInterface)">
957 <div class="row">961 <div class="row">
958 <div class="col-6">962 <div class="col-6">
959 <maas-obj-field type="text" key="mac_address" label="MAC address" label-width="2" input-width="5"963 <maas-obj-field type="text" key="mac_address" label="MAC address"
960 data-ng-if="interface.type !== 'alias' && interface.type !== 'vlan'" disable-label="false"964 data-ng-if="interface.type !== 'alias' && interface.type !== 'vlan'" disable-label="false"
961 input-class="table__input u-margin--none" placeholder="00:00:00:00:00:00"></maas-obj-field>965 input-class="table__input" placeholder="00:00:00:00:00:00"></maas-obj-field>
962 <maas-obj-field type="tags" key="tags" label="Tags" label-width="2" input-width="5"966 <maas-obj-field type="tags" key="tags" label="Tags"
963 placeholder="Add a tag"967 placeholder="Add a tag"
964 data-ng-if="!isAllNetworkingDisabled(interface) && interface.type !== 'alias'"968 data-ng-if="!isAllNetworkingDisabled(interface) && interface.type !== 'alias'"
965 disable-label="false"></maas-obj-field>969 disable-label="false"></maas-obj-field>
@@ -1030,25 +1034,23 @@
1030 </td>1034 </td>
1031 </tr>1035 </tr>
10321036
1033 <tr data-ng-if="!isDevice" data-ng-class="{ disabled: isDisabled(), 'is-active': isInterfaceSelected(interface) && (!isAllNetworkingDisabled() || isLimitedEditingAllowed(interface)), noEdit: cannotEditInterface(interface) }"1037 <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) }"
1034 data-ng-repeat="interface in interfaces | removeInterfaceParents:newBondInterface:isAllNetworkingDisabled() | removeInterfaceParents:newBridgeInterface:isAllNetworkingDisabled()">1038 data-ng-repeat="interface in interfaces | removeInterfaceParents:newBondInterface:isAllNetworkingDisabled() | removeInterfaceParents:newBridgeInterface:isAllNetworkingDisabled()">
1035 <td class="table-col--16" aria-label="Name"1039 <td aria-label="Name" data-ng-class="{ 'is-error': isInterfaceNameInvalid(editInterface) }">
1036 data-ng-class="{ 'is-error': isInterfaceNameInvalid(editInterface) }">
1037 <span class="u-float--left" data-ng-if="!isController && !isAllNetworkingDisabled() && !isEditing(interface)">1040 <span class="u-float--left" data-ng-if="!isController && !isAllNetworkingDisabled() && !isEditing(interface)">
1038 <input type="checkbox" class="checkbox" id="{$ getUniqueKey(interface) $}"1041 <input type="checkbox" class="checkbox" id="{$ getUniqueKey(interface) $}"
1039 data-ng-hide="isAllNetworkingDisabled()"1042 data-ng-hide="isAllNetworkingDisabled()"
1040 data-ng-checked="isInterfaceSelected(interface)"1043 data-ng-checked="isInterfaceSelected(interface)"
1041 data-ng-click="toggleInterfaceSelect(interface)"1044 data-ng-click="toggleInterfaceSelect(interface)"
1042 data-ng-disabled="isDisabled()">1045 data-ng-disabled="isDisabled()">
1043 </span>1046 </span>
1044 <span data-ng-if="!isEditing(interface) || interface.type === 'vlan'" data-ng-show="tableInfo.column == 'name'" title="{$ interface.name $}">{$ interface.name $}</span>1047 <span data-ng-if="!isEditing(interface) || (!isEditing(interface) && interface.type === 'vlan')"
1045 <span class="ng-hide" data-ng-show="tableInfo.column == 'mac'" title="{$ interface.mac_address $}">{$ interface.mac_address $}</span>1048 data-ng-show="tableInfo.column == 'name'"
1046 <input type="text" class="p-form-validation__input u-no-margin--top"1049 title="{$ interface.name $}">{$ interface.name $}</span>
1047 data-ng-if="isEditing(interface) && interface.type !== 'vlan'"1050 <span class="ng-hide" data-ng-show="tableInfo.column == 'mac'"
1048 data-ng-disabled="isController"1051 title="{$ interface.mac_address $}">{$ interface.mac_address $}</span>
1049 data-ng-model="editInterface.name">
1050 </td>1052 </td>
1051 <td class="table-col--7" aria-label="Boot interface">1053 <td aria-label="Boot interface">
1052 <span class="u-align--center u-hide u-show--large">1054 <span class="u-align--center u-hide u-show--large">
1053 <input type="radio" name="bootInterface" id="{$ interface.name $}" checked1055 <input type="radio" name="bootInterface" id="{$ interface.name $}" checked
1054 data-ng-if="!isController && isBootInterface(interface) && !isEditing(interface)"1056 data-ng-if="!isController && isBootInterface(interface) && !isEditing(interface)"
@@ -1058,22 +1060,22 @@
1058 <span class="u-hide--large" data-ng-if="!isController && isBootInterface(interface) && !isEditing(interface)">Yes</span>1060 <span class="u-hide--large" data-ng-if="!isController && isBootInterface(interface) && !isEditing(interface)">Yes</span>
1059 <span class="u-hide--large" data-ng-if="!isController && !isBootInterface(interface) && !isEditing(interface)">No</span>1061 <span class="u-hide--large" data-ng-if="!isController && !isBootInterface(interface) && !isEditing(interface)">No</span>
1060 </td>1062 </td>
1061 <td class="table-col--9" aria-label="Type">1063 <td aria-label="Type">
1062 <span data-ng-if="!isEditing(interface)" title="{$ getInterfaceTypeText(interface) $}">{$ getInterfaceTypeText(interface) $}</span>1064 <span data-ng-if="!isEditing(interface)" title="{$ getInterfaceTypeText(interface) $}">{$ getInterfaceTypeText(interface) $}</span>
1063 </td>1065 </td>
1064 <td class="table-col--13" aria-label="Fabric">1066 <td aria-label="Fabric">
1065 <span data-ng-if="!isEditing(interface)" title="{$ interface.fabric.name || 'Disconnected' $}">{$ interface.fabric.name || "Disconnected" $}</span>1067 <span data-ng-if="!isEditing(interface)" title="{$ interface.fabric.name || 'Disconnected' $}">{$ interface.fabric.name || "Disconnected" $}</span>
1066 </td>1068 </td>
1067 <td class="table-col--13" aria-label="VLAN">1069 <td aria-label="VLAN">
1068 <span data-ng-if="!isEditing(interface)" title="{$ getVLANText(interface.vlan) $}">{$ getVLANText(interface.vlan) $}</span>1070 <span data-ng-if="!isEditing(interface)" title="{$ getVLANText(interface.vlan) $}">{$ getVLANText(interface.vlan) $}</span>
1069 </td>1071 </td>
1070 <td class="table-col--13" aria-label="Subnet">1072 <td aria-label="Subnet">
1071 <span data-ng-if="!isEditing(interface) && ((isDevice && interface.subnet) || (interface.fabric && !interface.discovered[0].subnet_id))" title="{$ getSubnetText(interface.subnet) $}">{$ getSubnetText(interface.subnet) $}</span>1073 <span data-ng-if="!isEditing(interface) && ((isDevice && interface.subnet) || (interface.fabric && !interface.discovered[0].subnet_id))" title="{$ getSubnetText(interface.subnet) $}">{$ getSubnetText(interface.subnet) $}</span>
1072 <span data-ng-if="isAllNetworkingDisabled() && interface.discovered[0].subnet_id">1074 <span data-ng-if="isAllNetworkingDisabled() && interface.discovered[0].subnet_id">
1073 {$ getSubnetText(getSubnet(interface.discovered[0].subnet_id)) $}1075 {$ getSubnetText(getSubnet(interface.discovered[0].subnet_id)) $}
1074 </span>1076 </span>
1075 </td>1077 </td>
1076 <td class="table-col--19" aria-label="IP Address">1078 <td aria-label="IP Address">
1077 <span data-ng-if="!isEditing(interface) && !interface.discovered[0].ip_address && interface.fabric" title="{$ interface.ip_address $} ({$ getLinkModeText(interface) $})">1079 <span data-ng-if="!isEditing(interface) && !interface.discovered[0].ip_address && interface.fabric" title="{$ interface.ip_address $} ({$ getLinkModeText(interface) $})">
1078 {$ interface.ip_address $} ({$ getLinkModeText(interface) $})1080 {$ interface.ip_address $} ({$ getLinkModeText(interface) $})
1079 </span>1081 </span>
@@ -1081,9 +1083,9 @@
1081 {$ interface.discovered[0].ip_address $} (DHCP)1083 {$ interface.discovered[0].ip_address $} (DHCP)
1082 </span>1084 </span>
1083 </td>1085 </td>
1084 <td class="table-col--10 p-table--action-cell">1086 <td class="p-table--action-cell">
1085 <div class="u-align--right">1087 <div class="u-align--right">
1086 <div class="p-contextual-menu" toggle-ctrl data-ng-if="!isAllNetworkingDisabled() || isLimitedEditingAllowed(interface)">1088 <div class="p-contextual-menu" toggle-ctrl data-ng-if="(!isAllNetworkingDisabled() || isLimitedEditingAllowed(interface)) && !isEditing(interface)">
1087 <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>1089 <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>
1088 <div class="p-contextual-menu__dropdown" role="menu" data-ng-show="isToggled">1090 <div class="p-contextual-menu__dropdown" role="menu" data-ng-show="isToggled">
1089 <button class="p-contextual-menu__link"1091 <button class="p-contextual-menu__link"
@@ -1116,14 +1118,14 @@
11161118
1117 <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)">1119 <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)">
1118 <div class="row" data-ng-if="isShowingAdd() || isEditing(interface) || isShowingDeleteConfirm() || isShowingAdd() && !newInterface.saving">1120 <div class="row" data-ng-if="isShowingAdd() || isEditing(interface) || isShowingDeleteConfirm() || isShowingAdd() && !newInterface.saving">
1119 <div class="table__dropdown-title" data-ng-if="windowWidth <= 768">1121 <div class="u-position-relative u-clearfix" data-ng-if="windowWidth <= 768">
1120 <h2 data-ng-click="cancel()" class="u-float--left p-heading--four">1122 <h2 data-ng-click="cancel()" class="u-float--left p-heading--four">
1121 <span data-ng-if="canAddAlias(newInterface.parent)">Adding alias</span>1123 <span data-ng-if="canAddAlias(newInterface.parent)">Adding alias</span>
1122 <span data-ng-if="canAddVLAN(newInterface.parent)">Adding VLAN</span>1124 <span data-ng-if="canAddVLAN(newInterface.parent)">Adding VLAN</span>
1123 <span data-ng-if="isEditing(interface)">Editing {$ interface.name $}</span>1125 <span data-ng-if="isEditing(interface)">Editing {$ interface.name $}</span>
1124 <span data-ng-if="isShowingDeleteConfirm()">Removing {$ interface.name $}</span>1126 <span data-ng-if="isShowingDeleteConfirm()">Removing {$ interface.name $}</span>
1125 </h2>1127 </h2>
1126 <button data-ng-click="cancel()" class="p-button u-float--right">1128 <button data-ng-click="cancel()" class="p-button--base u-float--right p-button--close">
1127 <i class="p-icon--remove">Cancel</i>1129 <i class="p-icon--remove">Cancel</i>
1128 </button>1130 </button>
1129 </div>1131 </div>
@@ -1213,76 +1215,100 @@
1213 </div>1215 </div>
1214 </div>1216 </div>
1215 </div>1217 </div>
1216 <maas-obj-form obj="editInterface" manager="nodesManager" manager-method="updateInterfaceForm"1218 <div class="row">
1217 table-form="true" save-on-blur="false" after-save="editSave" pre-process="preProcessInterface"1219 <div class="col-3 mobile-col-2 tablet-col-3" data-ng-if="windowWidth >= 768">
1218 data-ng-if="isEditing(editInterface)">1220 <input type="text" class="p-form-validation__input"
1221 data-ng-if="isEditing(interface) && interface.type !== 'vlan'"
1222 data-ng-disabled="isController"
1223 data-ng-model="editInterface.name">
1224 <span data-ng-if="!isEditing(interface) || interface.type === 'vlan'"
1225 data-ng-show="tableInfo.column == 'name'"
1226 title="{$ interface.name $}">{$ interface.name $}</span>
1227 </div>
1228 </div>
1229 <div class="row">
1230 <hr />
1219 <div class="row">1231 <div class="row">
1220 <div class="col-6">1232 <maas-obj-form obj="editInterface" manager="nodesManager" manager-method="updateInterfaceForm"
1221 <div class="p-form__group">1233 table-form="true" save-on-blur="false" after-save="editSave" pre-process="preProcessInterface"
1222 <label class="p-form__label">Type</label>1234 data-ng-if="isEditing(editInterface)">
1223 <div class="p-form__control">1235 <div class="row">
1224 <span>{$ getInterfaceTypeText(interface) $}</span>1236 <div class="col-6">
1237 <div class="p-form__group u-clearfix">
1238 <label class="p-form__label col-2 mobile-col-2 tablet-col-2">Type</label>
1239 <div class="p-form__control col-3 mobile-col-2 tablet-col-3">
1240 <span class="p-control-text">{$ getInterfaceTypeText(interface) $}</span>
1241 </div>
1242 </div>
1243 <maas-obj-field type="text" key="mac_address" label="MAC address"
1244 data-ng-if="interface.type !== 'alias' && interface.type !== 'vlan'" disable-label="false"
1245 disabled="isController" label-width="2" label-width-tablet="2" input-width="3" input-width-tablet="4"
1246 input-class="table__input" placeholder="00:00:00:00:00:00"></maas-obj-field>
1247 <div class="p-form__group u-clearfix" data-ng-if="!isAllNetworkingDisabled(interface)">
1248 <label class="p-form__label col-2 mobile-col-2 tablet-col-2">Tags</label>
1249 <div class="p-form__control col-3 mobile-col-2 tablet-col-3 tags--inline">
1250 <tags-input data-ng-model="interface.tags" allow-tags-pattern="[\w-]+"></tags-input>
1251 </div>
1252 </div>
1253 </div>
1254 <div class="col-6" data-ng-if="!isAllNetworkingDisabled(interface)">
1255 <maas-obj-field type="options" key="fabric" label="Fabric"
1256 disable-label="false"
1257 placeholder="Disconnected" placeholder-enabled="true"
1258 on-change="fabricChangedForm"
1259 options="fabric as fabric.name for fabric in fabrics"
1260 label-width="2" label-width-tablet="2" input-width="3" input-width-tablet="4"></maas-obj-field>
1261 <maas-obj-field type="options" key="vlan" label="VLAN"
1262 disable-label="false"
1263 data-ng-show="!isController && editInterface.$maasForm.getValue('fabric')"
1264 on-change="vlanChangedForm"
1265 options="vlan as getVLANText(vlan) for vlan in vlans | removeDefaultVLANIfVLAN:interface.type | filterByFabric:editInterface.$maasForm.getValue('fabric')"
1266 label-width="2" label-width-tablet="2" input-width="3" input-width-tablet="4">
1267 </maas-obj-field>
1268 <maas-obj-field type="options" key="subnet" label="Subnet" placeholder="Unconfigured" placeholder-enabled="true"
1269 disable-label="false"
1270 data-ng-show="!isController && editInterface.$maasForm.getValue('fabric')"
1271 on-change="subnetChangedForm"
1272 options="subnet as getSubnetText(subnet) for subnet in subnets | filterByVLAN:editInterface.$maasForm.getValue('vlan')"
1273 label-width="2" label-width-tablet="2" input-width="3" input-width-tablet="4">
1274 </maas-obj-field>
1275 <maas-obj-field type="options" key="subnet" label="Subnet" placeholder="Unconfigured" placeholder-enabled="true"
1276 data-ng-init="editInterface.subnet = editInterface.defaultSubnet"
1277 data-ng-if="!isController && editInterface.$maasForm.getValue('ip_assignment') === 'static'"
1278 on-change="subnetChangedForm"
1279 disable-label="false"
1280 options="subnet as getSubnetText(subnet) for subnet in subnets"
1281 label-width="2" label-width-tablet="2" input-width="3" input-width-tablet="4"></maas-obj-field>
1282 <maas-obj-field type="options" key="mode" label="IP mode"
1283 disable-label="false"
1284 data-ng-if="!isController && editInterface.$maasForm.getValue('fabric') && !isLinkModeDisabled(editInterface.$maasForm)"
1285 options="mode.mode as mode.text for mode in modes | filterLinkModes:editInterface.$maasForm"
1286 on-change="modeChangedForm"
1287 label-width="2" label-width-tablet="2" input-width="3" input-width-tablet="4">
1288 </maas-obj-field>
1289 <maas-obj-field type="text" key="ip_address" label="IP address" placeholder="IP Address"
1290 disable-label="false" input-class="table__input"
1291 data-ng-if="!isController && editInterface.$maasForm.getValue('fabric') && editInterface.$maasForm.getValue('mode') == 'static'"
1292 label-width="2" label-width-tablet="2" input-width="3" input-width-tablet="4">
1293 </maas-obj-field>
1225 </div>1294 </div>
1226 </div>1295 </div>
1227 <maas-obj-field type="text" key="mac_address" label="MAC address" label-width="2" input-width="5"1296 <div class="row">
1228 data-ng-if="interface.type !== 'alias' && interface.type !== 'vlan'" disable-label="false"1297 <hr />
1229 disabled="isController"1298 <div class="u-float--left">
1230 input-class="table__input u-margin--none" placeholder="00:00:00:00:00:00"></maas-obj-field>1299 <maas-obj-errors></maas-obj-errors>
1231 <maas-obj-field type="tags" key="tags" label="Tags" label-width="2" input-width="5"1300 </div>
1232 placeholder="Add a tag"1301 <div class="u-float--right">
1233 data-ng-if="!isAllNetworkingDisabled(interface) && interface.type !== 'alias'"1302 <button class="p-button--base"
1234 disable-label="false"></maas-obj-field>1303 data-ng-click="editCancel()">Cancel</button>
1235 </div>1304 <button class="p-button--positive"
1236 <div class="col-6" data-ng-if="!isAllNetworkingDisabled(interface)">1305 data-ng-disabled="(isInterfaceNameInvalid(editInterface)) || isIPAddressInvalid(editInterface) || isMACAddressInvalid(editInterface.mac_address, true)"
1237 <maas-obj-field type="options" key="fabric" label="Fabric" label-width="2" input-width="5"1306 maas-obj-save>Save</button>
1238 disable-label="false"1307 </div>
1239 placeholder="Disconnected" placeholder-enabled="true"1308 </div>
1240 on-change="fabricChangedForm"1309 </maas-obj-form>
1241 options="fabric as fabric.name for fabric in fabrics"></maas-obj-field>
1242 <maas-obj-field type="options" key="vlan" label="VLAN" label-width="2" input-width="5"
1243 disable-label="false"
1244 data-ng-show="!isController && editInterface.$maasForm.getValue('fabric')"
1245 on-change="vlanChangedForm"
1246 options="vlan as getVLANText(vlan) for vlan in vlans | removeDefaultVLANIfVLAN:interface.type | filterByFabric:editInterface.$maasForm.getValue('fabric')">
1247 </maas-obj-field>
1248 <maas-obj-field type="options" key="subnet" label="Subnet" placeholder="Unconfigured" placeholder-enabled="true"
1249 disable-label="false" label-width="2" input-width="5"
1250 data-ng-show="!isController && editInterface.$maasForm.getValue('fabric')"
1251 on-change="subnetChangedForm"
1252 options="subnet as getSubnetText(subnet) for subnet in subnets | filterByVLAN:editInterface.$maasForm.getValue('vlan')">
1253 </maas-obj-field>
1254 <maas-obj-field type="options" key="subnet" label="Subnet" placeholder="Unconfigured" placeholder-enabled="true"
1255 data-ng-init="editInterface.subnet = editInterface.defaultSubnet" label-width="2" input-width="5"
1256 data-ng-if="!isController && editInterface.$maasForm.getValue('ip_assignment') === 'static'"
1257 on-change="subnetChangedForm"
1258 disable-label="false"
1259 options="subnet as getSubnetText(subnet) for subnet in subnets"></maas-obj-field>
1260 <maas-obj-field type="options" key="mode" label="IP mode" label-width="2" input-width="5"
1261 disable-label="false"
1262 data-ng-if="!isController && editInterface.$maasForm.getValue('fabric') && !isLinkModeDisabled(editInterface.$maasForm)"
1263 options="mode.mode as mode.text for mode in modes | filterLinkModes:editInterface.$maasForm"
1264 on-change="modeChangedForm">
1265 </maas-obj-field>
1266 <maas-obj-field type="text" key="ip_address" label="IP address" placeholder="IP Address" label-width="two" input-width="three"
1267 disable-label="false" input-class="table__input u-margin--none"
1268 data-ng-if="!isController && editInterface.$maasForm.getValue('fabric') && editInterface.$maasForm.getValue('mode') == 'static'">
1269 </maas-obj-field>
1270 </div>
1271 </div>
1272 <div class="row u-no-margin--top">
1273 <hr />
1274 <div class="u-float--left">
1275 <maas-obj-errors></maas-obj-errors>
1276 </div>
1277 <div class="u-float--right u-no-margin--top">
1278 <button class="p-button--base"
1279 data-ng-click="editCancel()">Cancel</button>
1280 <button class="p-button--positive u-no-margin--top"
1281 data-ng-disabled="(isInterfaceNameInvalid(editInterface)) || isIPAddressInvalid(editInterface) || isMACAddressInvalid(editInterface.mac_address, true)"
1282 maas-obj-save>Save</button>
1283 </div>
1284 </div>1310 </div>
1285 </maas-obj-form>1311 </div>
1286 </div>1312 </div>
1287 <div class="row is-active" data-ng-if="isShowingDeleteConfirm() && isInterfaceSelected(interface)">1313 <div class="row is-active" data-ng-if="isShowingDeleteConfirm() && isInterfaceSelected(interface)">
1288 <div class="col-8">1314 <div class="col-8">
@@ -1337,7 +1363,7 @@
1337 </div>1363 </div>
1338 <div class="row" data-ng-if="windowWidth <= 768">1364 <div class="row" data-ng-if="windowWidth <= 768">
1339 <h2 class="u-float--left">Create bond</h2>1365 <h2 class="u-float--left">Create bond</h2>
1340 <button data-ng-click="cancel()" class="p-button u-float--right u-no-margin--top">1366 <button data-ng-click="cancel()" class="p-button--base u-float--right p-button--close">
1341 <i class="p-icon--close">Cancel</i>1367 <i class="p-icon--close">Cancel</i>
1342 </button>1368 </button>
1343 </div>1369 </div>
@@ -1830,7 +1856,11 @@
1830 </div>1856 </div>
1831 <div class="row">1857 <div class="row">
1832 <div class="col-12">1858 <div class="col-12">
1833 <p data-ng-if="!node.events.length">No events.</p>1859 <div class="p-notification" data-ng-if="!node.events.length">
1860 <p class="p-notification__response">
1861 No events found.
1862 </p>
1863 </div>
1834 <table data-ng-if="node.events.length">1864 <table data-ng-if="node.events.length">
1835 <thead>1865 <thead>
1836 <tr>1866 <tr>
@@ -1853,9 +1883,7 @@
1853 </div>1883 </div>
1854 <div class="row">1884 <div class="row">
1855 <div class="col-12 u-align--center">1885 <div class="col-12 u-align--center">
1856 <p>1886 <button class="p-button--neutral" data-ng-show="allowShowMoreEvents()" data-ng-click="showMoreEvents()">Load next 10 events</button>
1857 <button class="p-button--neutral" data-ng-show="allowShowMoreEvents()" data-ng-click="showMoreEvents()">Load next 10 events</button>
1858 </p>
1859 </div>1887 </div>
1860 </div>1888 </div>
1861 </section>1889 </section>
@@ -1869,7 +1897,9 @@
1869 <div data-ng-if="resultsLoaded">1897 <div data-ng-if="resultsLoaded">
1870 <div class="row">1898 <div class="row">
1871 <div class="col-12">1899 <div class="col-12">
1872 <div data-maas-cta="logs.availableOptions" data-ng-model="logs.option" data-ng-change="updateLogOutput()"></div>1900 <div class="u-sv2">
1901 <div data-maas-cta="logs.availableOptions" data-ng-model="logs.option" data-ng-change="updateLogOutput()"></div>
1902 </div>
1873 </div>1903 </div>
1874 </div>1904 </div>
1875 <div class="row">1905 <div class="row">
diff --git a/src/maasserver/static/partials/script-results-list.html b/src/maasserver/static/partials/script-results-list.html
index 08bc55f..9ff651f 100644
--- a/src/maasserver/static/partials/script-results-list.html
+++ b/src/maasserver/static/partials/script-results-list.html
@@ -10,33 +10,33 @@
10 <h2 class="p-heading--four" data-ng-if="hardware_type.title !== 'null'">{$ hardware_type.title $}</h2>10 <h2 class="p-heading--four" data-ng-if="hardware_type.title !== 'null'">{$ hardware_type.title $}</h2>
11 <div data-ng-repeat="(title, results) in hardware_type.results">11 <div data-ng-repeat="(title, results) in hardware_type.results">
12 <h3 class="p-heading--five" data-ng-if="title !== 'null'">{$ title $}</h3>12 <h3 class="p-heading--five" data-ng-if="title !== 'null'">{$ title $}</h3>
13 <table class="p-table-expanding">13 <table class="p-table-expanding p-table--controllers-commissioning">
14 <thead>14 <thead>
15 <tr>15 <tr>
16 <th class="table-col--15">Name</th>16 <th class="col-3">Name</th>
17 <th class="table-col--15">Tags</th>17 <th class="col-2">Tags</th>
18 <th class="table-col--20">Runtime</th>18 <th class="col-1">Runtime</th>
19 <th class="table-col--20">Date</th>19 <th class="col-3">Date</th>
20 <th class="table-col--25">Result</th>20 <th class="col-2">Result</th>
21 <th class="table-col--5"><div class="u-align--right">Actions</div></th>21 <th><div class="u-align--right">Actions</div></th>
22 </tr>22 </tr>
23 </thead>23 </thead>
24 <tbody>24 <tbody>
25 <tr data-ng-repeat="result in results" data-ng-class="{'is-active': result.showing_results || result.showing_history}">25 <tr data-ng-repeat="result in results" data-ng-class="{'is-active': result.showing_results || result.showing_history}">
26 <td class="table-col--15" data-ng-click="result.showing_results = !result.showing_results" aria-label="Name" title="{$ result.name $}">26 <td class="col-3" data-ng-click="result.showing_results = !result.showing_results" aria-label="Name" title="{$ result.name $}">
27 <span data-maas-script-status="script-status" data-script-status="result.status"></span>27 <span data-maas-script-status="script-status" data-script-status="result.status"></span>
28 {$ result.name $}28 {$ result.name $}
29 </td>29 </td>
30 <td class="table-col--15" aria-label="Tags"><span data-ng-hide="result.showing_history" title="{$ result.tags $}">{$ result.tags $}</span></td>30 <td class="col-2" aria-label="Tags"><span data-ng-hide="result.showing_history" title="{$ result.tags $}">{$ result.tags $}</span></td>
31 <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>31 <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>
32 <td class="table-col--20" aria-label="Date"><span data-ng-hide="result.showing_history" title="{$ result.updated $}">{$ result.updated $}</span></td>32 <td class="col-3" aria-label="Date"><span data-ng-hide="result.showing_history" title="{$ result.updated $}">{$ result.updated $}</span></td>
33 <td class="table-col--25 p-table--action-cell u-wrap" aria-label="Result">33 <td class="col-2 p-table--action-cell u-wrap" aria-label="Result">
34 <span data-ng-hide="result.showing_history">34 <span data-ng-hide="result.showing_history">
35 <!-- 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)-->35 <!-- 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)-->
36 {$ 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>36 {$ 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>
37 </span>37 </span>
38 </td>38 </td>
39 <td class="table-col--5 p-table--action-cell">39 <td class="p-table--action-cell">
40 <div class="u-align--right">40 <div class="u-align--right">
41 <div class="p-contextual-menu" toggle-ctrl data-ng-hide="isShowingAdd() || isEditing(interface) || isShowingDeleteConfirm() || isShowingAdd()">41 <div class="p-contextual-menu" toggle-ctrl data-ng-hide="isShowingAdd() || isEditing(interface) || isShowingDeleteConfirm() || isShowingAdd()">
42 <button class="p-button--base is-small p-contextual-menu__toggle" data-ng-click="toggleMenu()">42 <button class="p-button--base is-small p-contextual-menu__toggle" data-ng-click="toggleMenu()">
diff --git a/src/maasserver/static/scss/_maas.scss b/src/maasserver/static/scss/_maas.scss
index 170d343..9f1ec21 100644
--- a/src/maasserver/static/scss/_maas.scss
+++ b/src/maasserver/static/scss/_maas.scss
@@ -127,6 +127,7 @@
127127
128 .p-contextual-menu__dropdown {128 .p-contextual-menu__dropdown {
129 display: block;129 display: block;
130 z-index: 20;
130 }131 }
131132
132 .p-form__controls {133 .p-form__controls {
diff --git a/src/maasserver/static/scss/_patterns_table-expanding.scss b/src/maasserver/static/scss/_patterns_table-expanding.scss
index 067f351..139947d 100644
--- a/src/maasserver/static/scss/_patterns_table-expanding.scss
+++ b/src/maasserver/static/scss/_patterns_table-expanding.scss
@@ -6,10 +6,12 @@
6 }6 }
77
8 .p-table-expanding {8 .p-table-expanding {
9
9 td.p-table-expanding__panel {10 td.p-table-expanding__panel {
10 @extend %vf-card;11 @extend %vf-card;
11 background-color: $color-x-light;12 background-color: $color-x-light;
12 border-top: 0;13 border-top: 0;
14 margin-bottom: 0;
13 margin-left: 0 !important;15 margin-left: 0 !important;
14 width: 100%; // overrides mobile card-table width16 width: 100%; // overrides mobile card-table width
1517
diff --git a/src/maasserver/static/scss/_patterns_tag-input.scss b/src/maasserver/static/scss/_patterns_tag-input.scss
index 688d9d4..8460849 100644
--- a/src/maasserver/static/scss/_patterns_tag-input.scss
+++ b/src/maasserver/static/scss/_patterns_tag-input.scss
@@ -96,9 +96,7 @@
96 outline: 0;96 outline: 0;
97 margin: 2px;97 margin: 2px;
98 padding: 0 0 0 5px;98 padding: 0 0 0 5px;
99 float: left;
100 height: 30px;99 height: 30px;
101 width: auto !important;
102 box-shadow: none;100 box-shadow: none;
103101
104 &:placeholder {102 &:placeholder {
diff --git a/src/maasserver/static/scss/_tables.scss b/src/maasserver/static/scss/_tables.scss
index 28e42e7..f534b9b 100644
--- a/src/maasserver/static/scss/_tables.scss
+++ b/src/maasserver/static/scss/_tables.scss
@@ -260,4 +260,104 @@
260 }260 }
261 }261 }
262 }262 }
263
264 .p-table--controller-interfaces {
265 .p-table--is-device {
266 th, td {
267 &:nth-child(1) {
268 width: 30%;
269 }
270 &:nth-child(2) {
271 width: 25%;
272 }
273 &:nth-child(3) {
274 width: 25%;
275 }
276 &:nth-child(4) {
277 width: 15%;
278 }
279 }
280 }
281
282 .p-table--is-not-device {
283 th, td {
284 &:nth-child(1) {
285 width: 16%;
286 }
287 &:nth-child(2) {
288 width: 7%;
289 }
290 &:nth-child(3) {
291 width: 9%;
292 }
293 &:nth-child(4) {
294 width: 13%;
295 }
296 &:nth-child(5) {
297 width: 13%;
298 }
299 &:nth-child(6) {
300 width: 13%;
301 }
302 &:nth-child(7) {
303 width: 19%;
304 }
305 &:nth-child(8) {
306 width: 10%;
307 }
308 }
309 }
310 }
311
312 .p-table--controllers-commissioning {
313 .p-table__row {
314 th, td {
315 &:nth-child(1) {
316 width: 15%;
317 }
318 &:nth-child(2) {
319 width: 15%;
320 }
321 &:nth-child(3) {
322 width: 20%;
323 }
324 &:nth-child(4) {
325 width: 20%;
326 }
327 &:nth-child(5) {
328 width: 25%;
329 }
330 &:nth-child(6) {
331 width: 5%;
332 }
333 }
334 }
335 }
336 .p-table--controller-vlans {
337 .p-table__row {
338 @media (min-width: $breakpoint-small) {
339 th, td {
340 &:nth-child(1) {
341 width: 15%;
342 }
343 &:nth-child(2) {
344 width: 15%;
345 }
346 &:nth-child(3) {
347 width: 10%;
348 }
349 &:nth-child(4) {
350 width: 20%;
351 }
352 &:nth-child(5) {
353 width: 20%;
354 }
355 &:nth-child(6) {
356 width: 20%;
357 }
358 }
359 }
360 }
361 }
263}362}
363

Subscribers

People subscribed via source and target branches