MAAS

Merge ~ya-bo-ng/maas:zones-page into ~deadlight/maas:vanilla

  1. Git
  2. lp:~ya-bo-ng/maas
  3. zones-page
  4. Merge into vanilla
Proposed by Anthony Dillon
Status: Merged
Approved by: Karl Williams
Approved revision: 26956fbfe99d417eff1a17780c7ec4d170836554
Merged at revision: 26956fbfe99d417eff1a17780c7ec4d170836554
Proposed branch: ~ya-bo-ng/maas:zones-page
Merge into: ~deadlight/maas:vanilla
Diff against target: 259 lines (+119/-103)
2 files modified
src/maasserver/static/partials/zone-details.html (+61/-50)
src/maasserver/static/partials/zones-list.html (+58/-53)
Reviewer Review Type Date Requested Status
Karl Williams Approve
Review via email: mp+335946@code.launchpad.net

Description of the change

Updated the zones section.
- Check the zone listing page
- Check a zone details page
- Create a zone
- Delete a zone

To post a comment you must log in.
Revision history for this message
Karl Williams (deadlight) wrote :

LGTM +1

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/zone-details.html b/src/maasserver/static/partials/zone-details.html
2index 15290c7..aae8a73 100644
3--- a/src/maasserver/static/partials/zone-details.html
4+++ b/src/maasserver/static/partials/zone-details.html
5@@ -19,69 +19,80 @@
6 </div>
7 </div>
8 </div>
9- <div class="row">
10- <div class="page-header__dropdown" data-ng-class="{ 'is-open': confirmingDelete }">
11- <section class="page-header__section ng-hide" data-ng-hide="canBeDeleted()">
12- <p class="page-header__message page-header__message--error">
13- Zone cannot be deleted because it is the default zone.
14- </p>
15- <div class="page-header__controls">
16- <button class="p-button--base is-inline" data-ng-click="cancelDeleteButton()">Cancel</button>
17+ <div class="row u-no-margin--top">
18+ <div data-ng-if="confirmingDelete">
19+ <hr />
20+ <section class="row ng-hide" data-ng-hide="canBeDeleted()">
21+ <div class="col-6">
22+ <p><i class="p-icon--error">Error:</i> Zone cannot be deleted because it is the default zone.</p>
23+ </div>
24+ <div class="col-6 u-align--right">
25+ <button class="p-button--base" data-ng-click="cancelDeleteButton()">Cancel</button>
26 </div>
27 </section>
28- <section class="page-header__section ng-hide" data-ng-show="canBeDeleted() && !error">
29- <p class="page-header__message page-header__message--error">
30- Are you sure you want to delete this zone?
31- </p>
32- <div class="page-header__controls">
33- <button class="p-button--base is-inline" data-ng-click="cancelDeleteButton()">Cancel</button>
34- <button class="p-button--negative is-inline" data-ng-click="deleteConfirmButton()">Delete zone</button>
35+ <section class="row ng-hide" data-ng-show="canBeDeleted() && !error">
36+ <div class="col-6">
37+ <p><i class="p-icon--error">Error:</i> Are you sure you want to delete this zone?</p>
38+ </div>
39+ <div class="col-6 u-align--right">
40+ <button class="p-button--base" data-ng-click="cancelDeleteButton()">Cancel</button>
41+ <button class="p-button--negative u-no-margin--top" data-ng-click="deleteConfirmButton()">Delete zone</button>
42 </div>
43 </section>
44- <section class="page-header__section ng-hide" data-ng-show="canBeDeleted() && error">
45- <p class="page-header__message page-header__message--error">{$ error $}</p>
46- <div class="page-header__controls">
47- <button class="p-button--base is-inline" data-ng-click="cancelDeleteButton()">Cancel</button>
48- <button class="p-button--neutral is-inline" data-ng-click="deleteConfirmButton()">Retry</button>
49+ <section class="row ng-hide" data-ng-show="canBeDeleted() && error">
50+ <div class="col-6">
51+ <p><i class="p-icon--error">Error:</i> {$ error $}</p>
52+ </div>
53+ <div class="col-6 u-align--right">
54+ <button class="p-button--base" data-ng-click="cancelDeleteButton()">Cancel</button>
55+ <button class="p-button--neutral u-no-margin--top" data-ng-click="deleteConfirmButton()">Retry</button>
56 </div>
57 </section>
58 </div>
59 </div>
60 </header>
61 <div data-ng-show="!loading">
62- <section class="row">
63- <div class="wrapper--inner">
64- <div class="twelve-col">
65- <h2 class="u-float--left">Zone summary</h2>
66- <button type="button" name="button" class="button--secondary button--inline u-float--right" data-ng-click="enterEditSummary()" data-ng-if="editSummary != true">Edit</button>
67+ <section class="p-strip">
68+ <div class="row">
69+ <div class="col-6">
70+ <h2>Zone summary</h2>
71 </div>
72- <div class="twelve-col" data-ng-if="editSummary != true">
73- <dl class="six-col">
74- <dt class="two-col">Name</dt>
75- <dd class="four-col last-col">{$ zone.name $}</dd>
76- <dt class="two-col">Description</dt>
77- <dd class="four-col last-col">{$ zone.description $}&nbsp;</dd>
78- <dt class="two-col">Machines</dt>
79- <dd class="four-col last-col"><a href="#/nodes?tab=nodes&query=zone:({$ zone.name $})">{$ zone.machines_count $}</a></dd>
80- </dl>
81+ <div class="col-6">
82+ <button type="button" name="button" class="p-button--neutral u-float--right" data-ng-click="enterEditSummary()" data-ng-if="editSummary != true">Edit</button>
83 </div>
84+ </div>
85+ <div class="row u-no-margin--top" data-ng-if="editSummary != true">
86+ <dl class="col-6">
87+ <dt>Name</dt>
88+ <dd>{$ zone.name $}</dd>
89+ <dt>Description</dt>
90+ <dd>{$ zone.description $}&nbsp;</dd>
91+ <dt>Machines</dt>
92+ <dd><a href="#/nodes?tab=nodes&query=zone:({$ zone.name $})">{$ zone.machines_count $}</a></dd>
93+ </dl>
94+ </div>
95+ <div class="row">
96 <maas-obj-form obj="zone" data-ng-if="editSummary == true" table-form="true" save-on-blur="false" after-save="exitEditSummary" manager="zoneManager" data-ng-disabled="!isSuperUser()">
97- <fieldset class="form__fieldset six-col">
98- <maas-obj-field type="text" key="name" label="Name" placeholder="Zone name"
99- label-width="two" input-width="three" blur-on-enter="true"></maas-obj-field>
100- <maas-obj-field type="textarea" key="description" label="Description" placeholder="Zone description"
101- label-width="two" input-width="three" blur-on-enter="true"></maas-obj-field>
102- <dl>
103- <dt class="two-col">Machines</dt>
104- <dd class="four-col last-col">
105- <a href="#/nodes?tab=nodes&query=zone:({$ zone.name $})">{$ zone.machines_count $}</a>
106- </dd>
107- </dl>
108- </fieldset>
109- <div class="twelve-col u-align--right">
110- <button class="button--base button--inline"
111- data-ng-click="exitEditSummary()">Cancel</button>
112- <button class="button--positive button--inline" maas-obj-save>Save summary</button>
113+ <div class="row">
114+ <div class="col-6">
115+ <maas-obj-field type="text" key="name" label="Name" placeholder="Zone name"
116+ label-width="2" input-width="5" blur-on-enter="true"></maas-obj-field>
117+ <maas-obj-field type="textarea" key="description" label="Description" placeholder="Zone description"
118+ label-width="2" input-width="5" blur-on-enter="true"></maas-obj-field>
119+ <dl>
120+ <dt class="col-2">Machines</dt>
121+ <dd class="col-5">
122+ <a href="#/nodes?tab=nodes&query=zone:({$ zone.name $})">{$ zone.machines_count $}</a>
123+ </dd>
124+ </dl>
125+ </div>
126+ </div>
127+ <div class="row">
128+ <div class="col-12 u-align--right">
129+ <button class="p-button--base"
130+ data-ng-click="exitEditSummary()">Cancel</button>
131+ <button class="p-button--positive" maas-obj-save>Save summary</button>
132+ </div>
133 </div>
134 </maas-obj-form>
135 </div>
136diff --git a/src/maasserver/static/partials/zones-list.html b/src/maasserver/static/partials/zones-list.html
137index 2b0f63b..a5f63d1 100755
138--- a/src/maasserver/static/partials/zones-list.html
139+++ b/src/maasserver/static/partials/zones-list.html
140@@ -16,61 +16,66 @@
141 </div>
142 </div>
143 </div>
144- <div class="row">
145- <div class="page-header__dropdown is-open" data-ng-if="action.open">
146- <div class="page-header__section col-12">
147- <maas-obj-form obj="action.obj" manager="zoneManager" manager-method="createItem"
148- inline="true" save-on-blur="false" after-save="closeZone">
149- <fieldset class="p-form__fieldset">
150- <maas-obj-field
151- type="text" key="name" label="Name (required)" subtle="false"
152- placeholder="Name (required)"></maas-obj-field>
153- </fieldset>
154- <div class="page-header__controls">
155- <button class="p-button--base is-inline" data-ng-click="closeZone()">Cancel</button>
156- <button class="p-button--positive is-inline" maas-obj-save>Add zone</button>
157- </div>
158- </maas-obj-form>
159+ <div class="row u-no-margin--top" data-ng-if="action.open">
160+ <hr />
161+ <maas-obj-form obj="action.obj" manager="zoneManager" manager-method="createItem"
162+ inline="true" save-on-blur="false" after-save="closeZone">
163+ <div class="col-6">
164+ <maas-obj-field
165+ type="text" key="name" label="Name (required)" subtle="false"
166+ placeholder="Name (required)" label-width="2" input-width="3" ></maas-obj-field>
167 </div>
168- </div>
169+ <div class="col-6 u-align--right">
170+ <button class="p-button--base" data-ng-click="closeZone()">Cancel</button>
171+ <button class="p-button--positive u-no-margin--top" maas-obj-save>Add zone</button>
172+ </div>
173+ </maas-obj-form>
174 </div>
175 </header>
176-<section class="row">
177- <div class="wrapper--inner">
178- <div class="twelve-col ng-hide" data-ng-show="!loading">
179- <h2>Physical zones <span class="icon icon--help tooltip tooltip--right"
180- aria-label="A representation of a grouping of nodes, typically by physical location.">
181- </span></h2>
182- <!-- Spaces grouped table -->
183- <table class="table-listing">
184- <thead>
185- <tr class="table-listing__row">
186- <th class="table__column--20">Name</th>
187- <th class="table__column--20">Description</th>
188- <th class="table__column--20">Machines</th>
189- <th class="table__column--15">Devices</th>
190- <th class="table__column--15">Controllers</th>
191- </tr>
192- </thead>
193- <tbody vs-repeat vs-scroll-parent="window">
194- <tr class="table-listing__row" data-ng-repeat="zone in zones">
195- <td class="table-listing__cell table__column--20" aria-label="Name">
196- <a href="#/zone/{$ zone.id $}">{$ zone.name $}</a>
197- </td>
198- <td class="table-listing__cell table__column--20" aria-label="Description">
199- {$ zone.description $}
200- </td>
201- <td class="table-listing__cell table__column--20" aria-label="Machines">
202- <a href="#/nodes?tab=nodes&query=zone:({$ zone.name $})">{$ zone.machines_count $}</a>
203- </td>
204- <td class="table-listing__cell table__column--30" aria-label="Devices">
205- <a href="#/nodes?tab=devices&query=zone:({$ zone.name $})">{$ zone.devices_count $}</a>
206- </td>
207- <td class="table-listing__cell table__column--30" aria-label="Controllers">
208- <a href="#/nodes?tab=controllers&query=zone:({$ zone.name $})">{$ zone.controllers_count $}</a>
209- </td>
210- </tr>
211- </tbody>
212- </table>
213+<section class="p-strip">
214+ <div class="row">
215+ <div class="col-12 ng-hide u-equal-height" data-ng-show="!loading">
216+ <h2 class="u-float--left">Physical zones</h2>
217+
218+ <span class="col-2 u-vertically-center">
219+ <span class=" p-tooltip p-tooltip--right">
220+ <i class="p-icon--help u-hide u-show--large">Help:</i>
221+ <span class="p-tooltip__message" role="tooltip">A representation of a grouping of nodes, typically by physical location.</span>
222+ </span>
223+ </span>
224 </div>
225+ </div>
226+ <div class="row">
227+ <!-- Spaces grouped table -->
228+ <table class="table-listing">
229+ <thead>
230+ <tr>
231+ <th>Name</th>
232+ <th>Description</th>
233+ <th>Machines</th>
234+ <th>Devices</th>
235+ <th>Controllers</th>
236+ </tr>
237+ </thead>
238+ <tbody vs-repeat vs-scroll-parent="window">
239+ <tr data-ng-repeat="zone in zones">
240+ <td aria-label="Name">
241+ <a href="#/zone/{$ zone.id $}">{$ zone.name $}</a>
242+ </td>
243+ <td aria-label="Description">
244+ {$ zone.description $}
245+ </td>
246+ <td aria-label="Machines">
247+ <a href="#/nodes?tab=nodes&query=zone:({$ zone.name $})">{$ zone.machines_count $}</a>
248+ </td>
249+ <td aria-label="Devices">
250+ <a href="#/nodes?tab=devices&query=zone:({$ zone.name $})">{$ zone.devices_count $}</a>
251+ </td>
252+ <td aria-label="Controllers">
253+ <a href="#/nodes?tab=controllers&query=zone:({$ zone.name $})">{$ zone.controllers_count $}</a>
254+ </td>
255+ </tr>
256+ </tbody>
257+ </table>
258+ </div>
259 </section>

Subscribers

People subscribed via source and target branches

to all changes: