MAAS

Merge ~ya-bo-ng/maas:style-dhcp-info-vlan-details into maas:master

  1. Git
  2. lp:~ya-bo-ng/maas
  3. style-dhcp-info-vlan-details
  4. Merge into master
Proposed by Anthony Dillon
Status: Merged
Approved by: Blake Rouse
Approved revision: 1d34d7600828d8c6f96a058bfcc5158cffab5e92
Merge reported by: MAAS Lander
Merged at revision: not available
Proposed branch: ~ya-bo-ng/maas:style-dhcp-info-vlan-details
Merge into: maas:master
Diff against target: 114 lines (+35/-29)
1 file modified
src/maasserver/static/partials/vlan-details.html (+35/-29)
Reviewer Review Type Date Requested Status
Blake Rouse (community) Approve
MAAS Lander Approve
Review via email: mp+343358@code.launchpad.net

Commit message

Styled the DHCP section of the VLAN details page

Description of the change

Replaced the definition list styling with horizontal key value styling.

To post a comment you must log in.
~ya-bo-ng/maas:style-dhcp-info-vlan-details updated
1d34d76... by Anthony Dillon

Fix up VLAN details header actions

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

Also improved the styling in the VLAN details page

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

UNIT TESTS
-b style-dhcp-info-vlan-details lp:~ya-bo-ng/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: SUCCESS
COMMIT: 1d34d7600828d8c6f96a058bfcc5158cffab5e92

review: Approve
Revision history for this message
Blake Rouse (blake-rouse) wrote :

Looks good.

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/partials/vlan-details.html b/src/maasserver/static/partials/vlan-details.html
2index 8a2826a..31fce98 100644
3--- a/src/maasserver/static/partials/vlan-details.html
4+++ b/src/maasserver/static/partials/vlan-details.html
5@@ -20,6 +20,8 @@
6 </div>
7 </div>
8 </div>
9+ </div>
10+ <div class="row">
11 <div class="page-header__dropdown" data-ng-class="{ 'is-open': vlanDetails.actionOption }" data-ng-if="vlanDetails.actionOption">
12 <div class="row">
13 <section class="page-header__section" data-ng-if="vlanDetails.actionOption.name === 'enable_dhcp'">
14@@ -193,33 +195,28 @@
15 </form>
16 </section>
17 </div>
18- <div class="row">
19+ <div class="row u-no-margin--top">
20 <section class="page-header__section col-12" data-ng-if="!vlanDetails.isActionError()">
21- <p class="page-header__message page-header__message--warning"
22- data-ng-if="vlanDetails.actionOption.name === 'disable_dhcp' && vlanDetails.vlan.dhcp_on">
23- Are you sure you want to disable DHCP on this VLAN? All subnets on this VLAN will be affected.
24+ <p class="col-8" data-ng-if="vlanDetails.actionOption.name === 'disable_dhcp' && vlanDetails.vlan.dhcp_on">
25+ <i class="p-icon--warning">Warning:</i> Are you sure you want to disable DHCP on this VLAN? All subnets on this VLAN will be affected.
26 </p>
27- <p class="page-header__message page-header__message--warning"
28- data-ng-if="vlanDetails.actionOption.name === 'disable_dhcp' && vlanDetails.vlan.relay_vlan">
29- Are you sure you want to disable DHCP relay on this VLAN? All subnets on this VLAN will be affected.
30+ <p class="col-8" data-ng-if="vlanDetails.actionOption.name === 'disable_dhcp' && vlanDetails.vlan.relay_vlan">
31+ <i class="p-icon--warning">Warning:</i> Are you sure you want to disable DHCP relay on this VLAN? All subnets on this VLAN will be affected.
32 </p>
33- <p class="page-header__message page-header__message--error"
34- data-ng-if="vlanDetails.actionOption.name === 'enable_dhcp' && vlanDetails.relatedSubnets.length === 0">
35- No subnets are available on this VLAN. DHCP cannot be enabled.
36+ <p class="col-8" data-ng-if="vlanDetails.actionOption.name === 'enable_dhcp' && vlanDetails.relatedSubnets.length === 0">
37+ <i class="p-icon--error">Error:</i> No subnets are available on this VLAN. DHCP cannot be enabled.
38 </p>
39- <p class="page-header__message page-header__message--warning"
40- data-ng-if="vlanDetails.actionOption.name === 'delete'">
41- Are you sure you want to delete this VLAN?
42+ <p class="col-8" data-ng-if="vlanDetails.actionOption.name === 'delete'">
43+ <i class="p-icon--warning">Warning:</i> Are you sure you want to delete this VLAN?
44 </p>
45- <div class="page-header__controls">
46- <button class="button--base button--inline" type="button" data-ng-click="vlanDetails.actionCancel()">Cancel</button>
47- <button class="button--inline" data-ng-class="vlanDetails.actionOption.name === 'delete' ? 'button--destructive' : 'button--positive'" data-ng-click="vlanDetails.actionGo()" data-ng-disabled="!vlanDetails.canPerformAction()">{$ vlanDetails.actionOption.title $}</button>
48+ <div class="page-header__controls u-no-margin--top">
49+ <button class="p-button--base" type="button" data-ng-click="vlanDetails.actionCancel()">Cancel</button>
50+ <button data-ng-class="vlanDetails.actionOption.name === 'delete' ? 'p-button--negative' : 'button--positive'" data-ng-click="vlanDetails.actionGo()" data-ng-disabled="!vlanDetails.canPerformAction()">{$ vlanDetails.actionOption.title $}</button>
51 </div>
52 </section>
53 </div>
54- <div class="row">
55- <section class="page-header__section col-12"
56- data-ng-if="vlanDetails.isActionError()">
57+ <div class="row" data-ng-if="vlanDetails.isActionError()">
58+ <section class="page-header__section col-12">
59 <p class="page-header__message page-header__message--error">{$ vlanDetails.actionError $}</p>
60 <div class="page-header__controls">
61 <button class="button--base button--inline u-margin--right" type="button" data-ng-click="vlanDetails.actionCancel()">Cancel</button>
62@@ -366,7 +363,7 @@
63 </div>
64 </div>
65 <div class="p-form p-form--stacked row">
66- <div class="col-6">
67+ <div class="col-8">
68 <div class="p-form__group">
69 <div class="p-form__label">
70 <p><strong>Status</strong></p>
71@@ -390,25 +387,34 @@
72 </p>
73 </div>
74 </div>
75- <div data-ng-if="vlanDetails.primaryRack">
76- <dt>Primary controller
77+ <div class="p-form__group" data-ng-if="vlanDetails.primaryRack">
78+ <div class="p-form__label">
79+ <p>
80+ <strong>Primary controller</strong>
81 <span class="p-tooltip p-tooltip--top-center">
82 <i class="p-icon--help">Help:</i>
83 <span class="p-tooltip__message" role="tooltip">The rack controller where DHCP service runs on.</span>
84 </span>
85- </dt>
86- <dd>{$ vlanDetails.primaryRack.hostname $}</dd>
87+ </p>
88+ </div>
89+ <div class="p-form__control">
90+ <p>{$ vlanDetails.primaryRack.hostname $}</p>
91 </div>
92- <div data-ng-if="vlanDetails.secondaryRack">
93- <dt>Secondary controller
94+ </div>
95+ <div class="p-form__group" data-ng-if="vlanDetails.secondaryRack">
96+ <div class="p-form__label">
97+ <p>
98+ <strong>Secondary controller</strong>
99 <span class="p-tooltip p-tooltip--top-center">
100 <i class="p-icon--help">Help:</i>
101 <span class="p-tooltip__message" role="tooltip">The rack controller that will take over DHCP services if the primary fails.</span>
102 </span>
103- </dt>
104- <dd>{$ vlanDetails.secondaryRack.hostname $}</dd>
105+ </p>
106 </div>
107- </dl>
108+ <div class="p-form__control">
109+ <p>{$ vlanDetails.secondaryRack.hostname $}</p>
110+ </div>
111+ </div>
112 </div>
113 </div>
114 </section>

Subscribers

People subscribed via source and target branches