MAAS

Merge lp:~blake-rouse/maas/fix-broken-ui into lp:~maas-committers/maas/trunk

  1. fix-broken-ui
  2. Merge into trunk
Proposed by Blake Rouse
Status: Merged
Approved by: Blake Rouse
Approved revision: no longer in the source branch.
Merged at revision: 5686
Proposed branch: lp:~blake-rouse/maas/fix-broken-ui
Merge into: lp:~maas-committers/maas/trunk
Diff against target: 430 lines (+184/-219)
2 files modified
src/maasserver/static/partials/dashboard.html (+180/-216)
src/maasserver/static/partials/nodes-list.html (+4/-3)
To merge this branch: bzr merge lp:~blake-rouse/maas/fix-broken-ui
Reviewer Review Type Date Requested Status
Andres Rodriguez (community) Approve
Review via email: mp+316271@code.launchpad.net

Commit message

Fix maas-notification directive to render correctly with angular from Xenial. Fix dashboard to show the loading of discovered items.

To post a comment you must log in.
Revision history for this message
Andres Rodriguez (andreserl) wrote :

lgtm! just make sure it gets attached to a bug.

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'src/maasserver/static/partials/dashboard.html'
2--- src/maasserver/static/partials/dashboard.html 2017-02-01 18:13:33 +0000
3+++ src/maasserver/static/partials/dashboard.html 2017-02-02 20:26:39 +0000
4@@ -1,224 +1,188 @@
5-<div data-ng-hide="loaded">
6- <header class="page-header" sticky media-query="min-width: 769px">
7- <div class="wrapper--inner">
8- <h1 class="page-header__title">Device discovery</h1>
9- <p class="page-header__status">
10- <span class="u-text--loading"><i class="icon u-margin--right-tiny icon--loading u-animation--spin"></i>Searching network for devices&hellip;</span>
11- </p>
12+<header class="page-header" sticky media-query="min-width: 769px">
13+ <div class="wrapper--inner">
14+ <h1 class="page-header__title">Device discovery</h1>
15+ <p class="page-header__status">{$ discoveredDevices.length $} items discovered <span class="u-text--loading" data-ng-if="!loaded"><i class="icon icon--loading u-animation--spin"></i> Loading...</span></p>
16+ <div class="page-header__controls" data-ng-if="networkDiscovery">
17+ <maas-obj-form obj="networkDiscovery" manager="configManager" inline="true">
18+ <maas-obj-field type="onoffswitch" key="value" label="Discovery enabled"
19+ on-value="enabled" off-value="disabled" subtle="true" label-left="true"
20+ label-info="When enabled, MAAS will use passive techniques, such as listening to&#xa; ARP requests and DNS advertisements, to observe networks attached&#xa; to rack controllers. Active subnet mapping can also be enabled in the&#xa; Device Discovery section of the Settings page."></maas-obj-field>
21+ </maas-obj-form>
22 </div>
23- </header>
24- <section class="row">
25- <div class="wrapper--inner">
26- <div class="twelve-col">
27- <table>
28- <thead>
29- <tr>
30- <th class="table-col--37">Name</th>
31- <th class="table-col--15">Mac address</th>
32- <th class="table-col--13">IP</th>
33- <th class="table-col--15">Rack</th>
34- <th class="table-col--20">Last seen</th>
35- </tr>
36- </thead>
37- <tbody>
38- <tr>
39- <td colspan="5">
40- No new discoveries
41- </td>
42- </tr>
43- </tbody>
44- </table>
45- </div>
46 </div>
47- </section>
48+</header>
49+<div class="wrapper--inner">
50+ <maas-notifications></maas-notifications>
51 </div>
52-
53-<maas-notifications />
54-
55-<div class="ng-hide" data-ng-show="loaded">
56- <header class="page-header" sticky media-query="min-width: 769px">
57- <div class="wrapper--inner">
58- <h1 class="page-header__title">Device discovery</h1>
59- <p class="page-header__status" >{$ discoveredDevices.length $} items discovered</p>
60- <div class="page-header__controls" data-ng-if="networkDiscovery">
61- <maas-obj-form obj="networkDiscovery" manager="configManager" inline="true">
62- <maas-obj-field type="onoffswitch" key="value" label="Discovery enabled"
63- on-value="enabled" off-value="disabled" subtle="true" label-left="true"
64- label-info="When enabled, MAAS will use passive techniques, such as listening to&#xa; ARP requests and DNS advertisements, to observe networks attached&#xa; to rack controllers. Active subnet mapping can also be enabled in the&#xa; Device Discovery section of the Settings page."></maas-obj-field>
65- </maas-obj-form>
66- </div>
67- </div>
68- </header>
69- <section class="row">
70- <div class="wrapper--inner">
71- <div class="p-notification--warning" data-ng-if="networkDiscovery.value === 'disabled'">
72- <p class="p-notification__response">
73- <span class="p-notification__status">Warning:</span>List of devices will not update as discovery is turned off</p>
74- </div>
75- <div class="twelve-col">
76- <div class="table" >
77- <header class="table__head u-display--desktop" sticky sticky-class="table__head--sticky" offset="116" media-query="min-width: 768px">
78- <div class="table__row">
79- <div class="table__header table-col--37">Name</div>
80- <div class="table__header table-col--15">Mac address</div>
81- <div class="table__header table-col--13">IP</div>
82- <div class="table__header table-col--15">Rack</div>
83- <div class="table__header table-col--20">Last seen</div>
84- </div>
85- </header>
86- <div class="table__body">
87- <div class="table__row table--success" data-ng-if="convertTo.saved">
88- <div class="table__data table-col--97">
89- <i class="icon icon--success"></i> {$ convertTo.hostname $} has been add to {$ site $}.
90- <a href="#/node/{$ convertTo.parent $}" data-ng-if="convertTo.parent">Go to the machine devices page.</a>
91- <a href="#/nodes/?tab=devices" data-ng-if="!convertTo.parent">Go to the device listing.</a>
92- </div>
93+<section class="row">
94+ <div class="wrapper--inner">
95+ <div class="p-notification--warning" data-ng-if="networkDiscovery.value === 'disabled'">
96+ <p class="p-notification__response">
97+ <span class="p-notification__status">Warning:</span>List of devices will not update as discovery is turned off</p>
98+ </div>
99+ <div class="twelve-col">
100+ <div class="table" >
101+ <header class="table__head u-display--desktop" sticky sticky-class="table__head--sticky" offset="116" media-query="min-width: 768px">
102+ <div class="table__row">
103+ <div class="table__header table-col--37">Name</div>
104+ <div class="table__header table-col--15">Mac address</div>
105+ <div class="table__header table-col--13">IP</div>
106+ <div class="table__header table-col--15">Rack</div>
107+ <div class="table__header table-col--20">Last seen</div>
108+ </div>
109+ </header>
110+ <div class="table__body">
111+ <div class="table__row table--success" data-ng-if="convertTo.saved">
112+ <div class="table__data table-col--97">
113+ <i class="icon icon--success"></i> {$ convertTo.hostname $} has been add to {$ site $}.
114+ <a href="#/node/{$ convertTo.parent $}" data-ng-if="convertTo.parent">Go to the machine devices page.</a>
115+ <a href="#/nodes/?tab=devices" data-ng-if="!convertTo.parent">Go to the device listing.</a>
116+ </div>
117+ <div class="table__data table-col--3">
118+ <i class="icon icon--cross tooltip" aria-label="Clear"
119+ data-ng-click="convertTo.saved = false">Clear</i>
120+ </div>
121+ </div>
122+ <div class="table__row" data-ng-if="!discoveredDevices.length">
123+ <div class="table__data table-col--100">
124+ No new discoveries
125+ </div>
126+ </div>
127+ <div class="table__row"
128+ data-ng-repeat="discovery in discoveredDevices | orderBy:'-last_seen' track by discovery.first_seen"
129+ data-ng-class="{'is-active' : discovery.first_seen === selectedDevice}">
130+ <div data-ng-if="discovery.first_seen !== selectedDevice"
131+ data-ng-dblclick="toggleSelected(discovery.first_seen)">
132+ <div class="table__data table-col--37" aria-label="Name">
133+ {$ getDiscoveryName(discovery) $}
134+ <i data-ng-show="discovery.is_external_dhcp === true" class="icon icon--info tooltip u-margin--left-tiny ng-hide" aria-label="This device is providing DHCP."></i>
135+ </div>
136+ <div class="table__data table-col--15" aria-label="MAC">
137+ {$ discovery.mac_address $}<br/>
138+ <small class="u-text--subtle u-display--desktop">{$ discovery.mac_organization || 'Unknown' $}</small>
139+ </div>
140+ <div class="table__data table-col--13 u-text--truncate" aria-label="IP Address">
141+ {$ discovery.ip $}
142+ </div>
143+ <div class="table__data table-col--15" aria-label="Rack">
144+ {$ discovery.observer_hostname $}
145+ </div>
146+ <div class="table__data table-col--17" aria-label="Last seen">
147+ <time>{$ discovery.last_seen $}</time>
148+ </div>
149+ <div class="table__data table--mobile-controls table-col--3">
150+ <div class="table__controls u-align--right">
151+ <i class="icon icon--open tooltip u-display--desktop" aria-label="Open"
152+ data-ng-click="toggleSelected(discovery.first_seen)">Open</i>
153+ <a class="button--secondary u-display--mobile"
154+ data-ng-click="toggleSelected(discovery.first_seen)">Add device</a>
155+ </div>
156+ </div>
157+ </div>
158+ <maas-obj-form data-ng-if="discovery.first_seen === selectedDevice"
159+ obj="convertTo" manager="proxyManager" pre-process="preProcess"
160+ after-save="afterSave" table-form="true" save-on-blur="false">
161+ <div class="table__data table-col--20">
162+ <maas-obj-field class="u-margin--bottom-none" type="text" key="hostname"
163+ disable-label="true" placeholder="Hostname (optional)"></maas-obj-field>
164+ </div>
165+ <div class="table__data table-col--77"></div>
166 <div class="table__data table-col--3">
167- <i class="icon icon--cross tooltip" aria-label="Clear"
168- data-ng-click="convertTo.saved = false">Clear</i>
169- </div>
170- </div>
171- <div class="table__row" data-ng-if="!discoveredDevices.length">
172- <div class="table__data table-col--100">
173- No new discoveries
174- </div>
175- </div>
176- <div class="table__row"
177- data-ng-repeat="discovery in discoveredDevices | orderBy:'-last_seen' track by discovery.first_seen"
178- data-ng-class="{'is-active' : discovery.first_seen === selectedDevice}">
179- <div data-ng-if="discovery.first_seen !== selectedDevice"
180- data-ng-dblclick="toggleSelected(discovery.first_seen)">
181- <div class="table__data table-col--37" aria-label="Name">
182- {$ getDiscoveryName(discovery) $}
183- <i data-ng-show="discovery.is_external_dhcp === true" class="icon icon--info tooltip u-margin--left-tiny ng-hide" aria-label="This device is providing DHCP."></i>
184- </div>
185- <div class="table__data table-col--15" aria-label="MAC">
186- {$ discovery.mac_address $}<br/>
187- <small class="u-text--subtle u-display--desktop">{$ discovery.mac_organization || 'Unknown' $}</small>
188- </div>
189- <div class="table__data table-col--13 u-text--truncate" aria-label="IP Address">
190- {$ discovery.ip $}
191- </div>
192- <div class="table__data table-col--15" aria-label="Rack">
193- {$ discovery.observer_hostname $}
194- </div>
195- <div class="table__data table-col--17" aria-label="Last seen">
196- <time>{$ discovery.last_seen $}</time>
197- </div>
198- <div class="table__data table--mobile-controls table-col--3">
199- <div class="table__controls u-align--right">
200- <i class="icon icon--open tooltip u-display--desktop" aria-label="Open"
201- data-ng-click="toggleSelected(discovery.first_seen)">Open</i>
202- <a class="button--secondary u-display--mobile"
203- data-ng-click="toggleSelected(discovery.first_seen)">Add device</a>
204- </div>
205- </div>
206- </div>
207- <maas-obj-form data-ng-if="discovery.first_seen === selectedDevice"
208- obj="convertTo" manager="proxyManager" pre-process="preProcess"
209- after-save="afterSave" table-form="true" save-on-blur="false">
210- <div class="table__data table-col--20">
211- <maas-obj-field class="u-margin--bottom-none" type="text" key="hostname"
212- disable-label="true" placeholder="Hostname (optional)"></maas-obj-field>
213- </div>
214- <div class="table__data table-col--77"></div>
215- <div class="table__data table-col--3">
216- <i class="icon icon--close tooltip u-display--desktop" aria-label="Close"
217- data-ng-click="toggleSelected(discovery.first_seen)">Close</i>
218- </div>
219- <div class="table__dropdown">
220- <div class="table__dropdown-title">
221- <h2 data-ng-click="toggleSelected(selectedDevice)" class="u-float--left">Adding {$ getDiscoveryName(discovery) $}</h2>
222- <i data-ng-click="toggleSelected(selectedDevice)" class="icon icon--remove u-float--right u-margin--top-small u-margin--right-small"></i>
223- </div>
224- <div class="table__row is-active">
225- <div class="table__data table-col--100">
226- <div class="six-col">
227- <dl>
228- <dt class="two-col">Mac</dt>
229- <dd class="four-col last-col">{$ discovery.mac_address $}</dd>
230- <dt class="two-col">IP</dt>
231- <dd class="four-col last-col">{$ discovery.ip $}</dd>
232- <dt class="two-col">Rack</dt>
233- <dd class="four-col last-col">{$ discovery.observer_hostname $}</dd>
234- <dt class="two-col">Last seen</dt>
235- <dd class="four-col last-col"><time>{$ discovery.last_seen $}</time></dd>
236- </dl>
237- </div>
238- <div class="six-col last-col">
239- <dl>
240- <dt class="two-col">Fabric</dt>
241- <dd class="four-col last-col">{$ discovery.fabric_name $}</dd>
242- <dt class="two-col">VLAN</dt>
243- <dd class="four-col last-col">{$ getVLANName(discovery.vlan) $}</dd>
244- <dt class="two-col">Subnet</dt>
245- <dd class="four-col last-col">{$ getSubnetName(discovery.subnet) $}</dd>
246- </dl>
247- </div>
248- </div>
249- </div>
250- <div class="table__row is-active u-padding--top-small">
251- <div class="table__data table-col--100">
252- <fieldset class="form__fieldset six-col">
253- <div class="form__group u-display--mobile">
254- <label for="Name" class="form__group-label two-col">Name</label>
255- <div class="form__group-input three-col">
256- <maas-obj-field type="text" key="hostname"
257- disable-label="true" placeholder="Hostname (optional)"></maas-obj-field>
258- </div>
259- </div>
260- <div class="form__group">
261- <label class="form__group-label two-col u-margin--bottom-small">Type</label>
262- <div class="form__group-input three-col">
263- <select name="type" ng-model="convertTo.type">
264- <option value="" disabled>Choose type</option>
265- <option value="device">Device</option>
266- <option value="interface">Interface</option>
267- </select>
268- </div>
269- </div>
270- <maas-obj-field type="options" key="domain" label="Domain" placeholder="Choose domain"
271- label-width="two" input-width="three" subtle="false"
272- options="domain as domain.name for domain in domains"
273- data-ng-if="convertTo.type === 'device'"></maas-obj-field>
274- <maas-obj-field type="options" subtle="false" key="system_id" label="Device name" placeholder="Select device name"
275- options="device.system_id as device.fqdn for device in devices | orderBy:'fqdn'"
276- label-width="two" label-info="Create as an interface on the selected device." input-width="three"
277- data-ng-if="convertTo.type === 'interface'"></maas-obj-field>
278- </fieldset>
279- <fieldset class="form__fieldset six-col last-col">
280- <maas-obj-field type="options" subtle="false" key="parent" label="Parent" placeholder="Select parent (optional)" placeholder-enabled="true"
281- options="machine.system_id as machine.fqdn for machine in machines | filter:{status_code: 6} | orderBy:'fqdn'"
282- label-width="two" label-info="Assign this device as a child of the parent machine." input-width="three"
283- data-ng-if="convertTo.type === 'device'"></maas-obj-field>
284- <maas-obj-field type="options" subtle="false" key="ip_assignment" label="IP assignment" placeholder="Select IP assignment"
285- options="option[0] as option[1] for option in convertTo.deviceIPOptions" label-width="two" input-width="three"></maas-obj-field>
286- </fieldset>
287- </div>
288- </div>
289- <div class="table__row is-active">
290- <div class="table__data u-float--left">
291- <maas-obj-errors></maas-obj-errors>
292- </div>
293- <div class="table__data u-float--right">
294- <a class="button--base button--inline u-display--desktop" data-ng-click="toggleSelected(selectedDevice)">Cancel</a>
295- <button class="button--secondary button--inline"
296- data-ng-click="convertTo.goTo = true"
297- data-ng-if="!convertTo.$maasForm.getValue('parent')"
298- maas-obj-save>Save and go to device listing</button>
299- <button class="button--secondary button--inline"
300- data-ng-click="convertTo.goTo = true"
301- data-ng-if="convertTo.$maasForm.getValue('parent')"
302- maas-obj-save>Save and go to machine details</button>
303- <button class="button--positive button--inline" maas-obj-save>Save</button>
304- </div>
305- </div>
306- </div>
307- </maas-obj-form>
308- </div>
309+ <i class="icon icon--close tooltip u-display--desktop" aria-label="Close"
310+ data-ng-click="toggleSelected(discovery.first_seen)">Close</i>
311+ </div>
312+ <div class="table__dropdown">
313+ <div class="table__dropdown-title">
314+ <h2 data-ng-click="toggleSelected(selectedDevice)" class="u-float--left">Adding {$ getDiscoveryName(discovery) $}</h2>
315+ <i data-ng-click="toggleSelected(selectedDevice)" class="icon icon--remove u-float--right u-margin--top-small u-margin--right-small"></i>
316+ </div>
317+ <div class="table__row is-active">
318+ <div class="table__data table-col--100">
319+ <div class="six-col">
320+ <dl>
321+ <dt class="two-col">Mac</dt>
322+ <dd class="four-col last-col">{$ discovery.mac_address $}</dd>
323+ <dt class="two-col">IP</dt>
324+ <dd class="four-col last-col">{$ discovery.ip $}</dd>
325+ <dt class="two-col">Rack</dt>
326+ <dd class="four-col last-col">{$ discovery.observer_hostname $}</dd>
327+ <dt class="two-col">Last seen</dt>
328+ <dd class="four-col last-col"><time>{$ discovery.last_seen $}</time></dd>
329+ </dl>
330+ </div>
331+ <div class="six-col last-col">
332+ <dl>
333+ <dt class="two-col">Fabric</dt>
334+ <dd class="four-col last-col">{$ discovery.fabric_name $}</dd>
335+ <dt class="two-col">VLAN</dt>
336+ <dd class="four-col last-col">{$ getVLANName(discovery.vlan) $}</dd>
337+ <dt class="two-col">Subnet</dt>
338+ <dd class="four-col last-col">{$ getSubnetName(discovery.subnet) $}</dd>
339+ </dl>
340+ </div>
341+ </div>
342+ </div>
343+ <div class="table__row is-active u-padding--top-small">
344+ <div class="table__data table-col--100">
345+ <fieldset class="form__fieldset six-col">
346+ <div class="form__group u-display--mobile">
347+ <label for="Name" class="form__group-label two-col">Name</label>
348+ <div class="form__group-input three-col">
349+ <maas-obj-field type="text" key="hostname"
350+ disable-label="true" placeholder="Hostname (optional)"></maas-obj-field>
351+ </div>
352+ </div>
353+ <div class="form__group">
354+ <label class="form__group-label two-col u-margin--bottom-small">Type</label>
355+ <div class="form__group-input three-col">
356+ <select name="type" ng-model="convertTo.type">
357+ <option value="" disabled>Choose type</option>
358+ <option value="device">Device</option>
359+ <option value="interface">Interface</option>
360+ </select>
361+ </div>
362+ </div>
363+ <maas-obj-field type="options" key="domain" label="Domain" placeholder="Choose domain"
364+ label-width="two" input-width="three" subtle="false"
365+ options="domain as domain.name for domain in domains"
366+ data-ng-if="convertTo.type === 'device'"></maas-obj-field>
367+ <maas-obj-field type="options" subtle="false" key="system_id" label="Device name" placeholder="Select device name"
368+ options="device.system_id as device.fqdn for device in devices | orderBy:'fqdn'"
369+ label-width="two" label-info="Create as an interface on the selected device." input-width="three"
370+ data-ng-if="convertTo.type === 'interface'"></maas-obj-field>
371+ </fieldset>
372+ <fieldset class="form__fieldset six-col last-col">
373+ <maas-obj-field type="options" subtle="false" key="parent" label="Parent" placeholder="Select parent (optional)" placeholder-enabled="true"
374+ options="machine.system_id as machine.fqdn for machine in machines | filter:{status_code: 6} | orderBy:'fqdn'"
375+ label-width="two" label-info="Assign this device as a child of the parent machine." input-width="three"
376+ data-ng-if="convertTo.type === 'device'"></maas-obj-field>
377+ <maas-obj-field type="options" subtle="false" key="ip_assignment" label="IP assignment" placeholder="Select IP assignment"
378+ options="option[0] as option[1] for option in convertTo.deviceIPOptions" label-width="two" input-width="three"></maas-obj-field>
379+ </fieldset>
380+ </div>
381+ </div>
382+ <div class="table__row is-active">
383+ <div class="table__data u-float--left">
384+ <maas-obj-errors></maas-obj-errors>
385+ </div>
386+ <div class="table__data u-float--right">
387+ <a class="button--base button--inline u-display--desktop" data-ng-click="toggleSelected(selectedDevice)">Cancel</a>
388+ <button class="button--secondary button--inline"
389+ data-ng-click="convertTo.goTo = true"
390+ data-ng-if="!convertTo.$maasForm.getValue('parent')"
391+ maas-obj-save>Save and go to device listing</button>
392+ <button class="button--secondary button--inline"
393+ data-ng-click="convertTo.goTo = true"
394+ data-ng-if="convertTo.$maasForm.getValue('parent')"
395+ maas-obj-save>Save and go to machine details</button>
396+ <button class="button--positive button--inline" maas-obj-save>Save</button>
397+ </div>
398+ </div>
399+ </div>
400+ </maas-obj-form>
401 </div>
402 </div>
403 </div>
404 </div>
405- </section>
406-</div>
407+ </div>
408+</section>
409
410=== modified file 'src/maasserver/static/partials/nodes-list.html'
411--- src/maasserver/static/partials/nodes-list.html 2017-02-01 18:13:33 +0000
412+++ src/maasserver/static/partials/nodes-list.html 2017-02-02 20:26:39 +0000
413@@ -1,5 +1,3 @@
414-<maas-notifications />
415-
416 <header class="page-header" sticky media-query="min-width: 769px">
417 <div class="wrapper--inner">
418 <!-- XXX ricgard 2016-06-16 - Need to add e2e test. -->
419@@ -610,7 +608,10 @@
420 </div>
421 </div>
422 </header>
423-<div class="row u-padding--top-none">
424+<div class="wrapper--inner">
425+ <maas-notifications></maas-notifications>
426+</div>
427+<div class="u-padding--top-none">
428 <div class="wrapper--inner">
429 <aside class="three-col">
430 <div class="accordion maas-accordion ng-hide" data-ng-show="currentpage === 'nodes'"