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