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
=== modified file 'src/maasserver/static/partials/dashboard.html'
--- src/maasserver/static/partials/dashboard.html 2017-02-01 18:13:33 +0000
+++ src/maasserver/static/partials/dashboard.html 2017-02-02 20:26:39 +0000
@@ -1,224 +1,188 @@
1<div data-ng-hide="loaded">1<header class="page-header" sticky media-query="min-width: 769px">
2 <header class="page-header" sticky media-query="min-width: 769px">2 <div class="wrapper--inner">
3 <div class="wrapper--inner">3 <h1 class="page-header__title">Device discovery</h1>
4 <h1 class="page-header__title">Device discovery</h1>4 <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>
5 <p class="page-header__status">5 <div class="page-header__controls" data-ng-if="networkDiscovery">
6 <span class="u-text--loading"><i class="icon u-margin--right-tiny icon--loading u-animation--spin"></i>Searching network for devices&hellip;</span>6 <maas-obj-form obj="networkDiscovery" manager="configManager" inline="true">
7 </p>7 <maas-obj-field type="onoffswitch" key="value" label="Discovery enabled"
8 on-value="enabled" off-value="disabled" subtle="true" label-left="true"
9 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>
10 </maas-obj-form>
8 </div>11 </div>
9 </header>
10 <section class="row">
11 <div class="wrapper--inner">
12 <div class="twelve-col">
13 <table>
14 <thead>
15 <tr>
16 <th class="table-col--37">Name</th>
17 <th class="table-col--15">Mac address</th>
18 <th class="table-col--13">IP</th>
19 <th class="table-col--15">Rack</th>
20 <th class="table-col--20">Last seen</th>
21 </tr>
22 </thead>
23 <tbody>
24 <tr>
25 <td colspan="5">
26 No new discoveries
27 </td>
28 </tr>
29 </tbody>
30 </table>
31 </div>
32 </div>12 </div>
33 </section>13</header>
14<div class="wrapper--inner">
15 <maas-notifications></maas-notifications>
34</div>16</div>
3517<section class="row">
36<maas-notifications />18 <div class="wrapper--inner">
3719 <div class="p-notification--warning" data-ng-if="networkDiscovery.value === 'disabled'">
38<div class="ng-hide" data-ng-show="loaded">20 <p class="p-notification__response">
39 <header class="page-header" sticky media-query="min-width: 769px">21 <span class="p-notification__status">Warning:</span>List of devices will not update as discovery is turned off</p>
40 <div class="wrapper--inner">22 </div>
41 <h1 class="page-header__title">Device discovery</h1>23 <div class="twelve-col">
42 <p class="page-header__status" >{$ discoveredDevices.length $} items discovered</p>24 <div class="table" >
43 <div class="page-header__controls" data-ng-if="networkDiscovery">25 <header class="table__head u-display--desktop" sticky sticky-class="table__head--sticky" offset="116" media-query="min-width: 768px">
44 <maas-obj-form obj="networkDiscovery" manager="configManager" inline="true">26 <div class="table__row">
45 <maas-obj-field type="onoffswitch" key="value" label="Discovery enabled"27 <div class="table__header table-col--37">Name</div>
46 on-value="enabled" off-value="disabled" subtle="true" label-left="true"28 <div class="table__header table-col--15">Mac address</div>
47 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>29 <div class="table__header table-col--13">IP</div>
48 </maas-obj-form>30 <div class="table__header table-col--15">Rack</div>
49 </div>31 <div class="table__header table-col--20">Last seen</div>
50 </div>32 </div>
51 </header>33 </header>
52 <section class="row">34 <div class="table__body">
53 <div class="wrapper--inner">35 <div class="table__row table--success" data-ng-if="convertTo.saved">
54 <div class="p-notification--warning" data-ng-if="networkDiscovery.value === 'disabled'">36 <div class="table__data table-col--97">
55 <p class="p-notification__response">37 <i class="icon icon--success"></i> {$ convertTo.hostname $} has been add to {$ site $}.
56 <span class="p-notification__status">Warning:</span>List of devices will not update as discovery is turned off</p>38 <a href="#/node/{$ convertTo.parent $}" data-ng-if="convertTo.parent">Go to the machine devices page.</a>
57 </div>39 <a href="#/nodes/?tab=devices" data-ng-if="!convertTo.parent">Go to the device listing.</a>
58 <div class="twelve-col">40 </div>
59 <div class="table" >41 <div class="table__data table-col--3">
60 <header class="table__head u-display--desktop" sticky sticky-class="table__head--sticky" offset="116" media-query="min-width: 768px">42 <i class="icon icon--cross tooltip" aria-label="Clear"
61 <div class="table__row">43 data-ng-click="convertTo.saved = false">Clear</i>
62 <div class="table__header table-col--37">Name</div>44 </div>
63 <div class="table__header table-col--15">Mac address</div>45 </div>
64 <div class="table__header table-col--13">IP</div>46 <div class="table__row" data-ng-if="!discoveredDevices.length">
65 <div class="table__header table-col--15">Rack</div>47 <div class="table__data table-col--100">
66 <div class="table__header table-col--20">Last seen</div>48 No new discoveries
67 </div>49 </div>
68 </header>50 </div>
69 <div class="table__body">51 <div class="table__row"
70 <div class="table__row table--success" data-ng-if="convertTo.saved">52 data-ng-repeat="discovery in discoveredDevices | orderBy:'-last_seen' track by discovery.first_seen"
71 <div class="table__data table-col--97">53 data-ng-class="{'is-active' : discovery.first_seen === selectedDevice}">
72 <i class="icon icon--success"></i> {$ convertTo.hostname $} has been add to {$ site $}.54 <div data-ng-if="discovery.first_seen !== selectedDevice"
73 <a href="#/node/{$ convertTo.parent $}" data-ng-if="convertTo.parent">Go to the machine devices page.</a>55 data-ng-dblclick="toggleSelected(discovery.first_seen)">
74 <a href="#/nodes/?tab=devices" data-ng-if="!convertTo.parent">Go to the device listing.</a>56 <div class="table__data table-col--37" aria-label="Name">
75 </div>57 {$ getDiscoveryName(discovery) $}
58 <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>
59 </div>
60 <div class="table__data table-col--15" aria-label="MAC">
61 {$ discovery.mac_address $}<br/>
62 <small class="u-text--subtle u-display--desktop">{$ discovery.mac_organization || 'Unknown' $}</small>
63 </div>
64 <div class="table__data table-col--13 u-text--truncate" aria-label="IP Address">
65 {$ discovery.ip $}
66 </div>
67 <div class="table__data table-col--15" aria-label="Rack">
68 {$ discovery.observer_hostname $}
69 </div>
70 <div class="table__data table-col--17" aria-label="Last seen">
71 <time>{$ discovery.last_seen $}</time>
72 </div>
73 <div class="table__data table--mobile-controls table-col--3">
74 <div class="table__controls u-align--right">
75 <i class="icon icon--open tooltip u-display--desktop" aria-label="Open"
76 data-ng-click="toggleSelected(discovery.first_seen)">Open</i>
77 <a class="button--secondary u-display--mobile"
78 data-ng-click="toggleSelected(discovery.first_seen)">Add device</a>
79 </div>
80 </div>
81 </div>
82 <maas-obj-form data-ng-if="discovery.first_seen === selectedDevice"
83 obj="convertTo" manager="proxyManager" pre-process="preProcess"
84 after-save="afterSave" table-form="true" save-on-blur="false">
85 <div class="table__data table-col--20">
86 <maas-obj-field class="u-margin--bottom-none" type="text" key="hostname"
87 disable-label="true" placeholder="Hostname (optional)"></maas-obj-field>
88 </div>
89 <div class="table__data table-col--77"></div>
76 <div class="table__data table-col--3">90 <div class="table__data table-col--3">
77 <i class="icon icon--cross tooltip" aria-label="Clear"91 <i class="icon icon--close tooltip u-display--desktop" aria-label="Close"
78 data-ng-click="convertTo.saved = false">Clear</i>92 data-ng-click="toggleSelected(discovery.first_seen)">Close</i>
79 </div>93 </div>
80 </div>94 <div class="table__dropdown">
81 <div class="table__row" data-ng-if="!discoveredDevices.length">95 <div class="table__dropdown-title">
82 <div class="table__data table-col--100">96 <h2 data-ng-click="toggleSelected(selectedDevice)" class="u-float--left">Adding {$ getDiscoveryName(discovery) $}</h2>
83 No new discoveries97 <i data-ng-click="toggleSelected(selectedDevice)" class="icon icon--remove u-float--right u-margin--top-small u-margin--right-small"></i>
84 </div>98 </div>
85 </div>99 <div class="table__row is-active">
86 <div class="table__row"100 <div class="table__data table-col--100">
87 data-ng-repeat="discovery in discoveredDevices | orderBy:'-last_seen' track by discovery.first_seen"101 <div class="six-col">
88 data-ng-class="{'is-active' : discovery.first_seen === selectedDevice}">102 <dl>
89 <div data-ng-if="discovery.first_seen !== selectedDevice"103 <dt class="two-col">Mac</dt>
90 data-ng-dblclick="toggleSelected(discovery.first_seen)">104 <dd class="four-col last-col">{$ discovery.mac_address $}</dd>
91 <div class="table__data table-col--37" aria-label="Name">105 <dt class="two-col">IP</dt>
92 {$ getDiscoveryName(discovery) $}106 <dd class="four-col last-col">{$ discovery.ip $}</dd>
93 <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>107 <dt class="two-col">Rack</dt>
94 </div>108 <dd class="four-col last-col">{$ discovery.observer_hostname $}</dd>
95 <div class="table__data table-col--15" aria-label="MAC">109 <dt class="two-col">Last seen</dt>
96 {$ discovery.mac_address $}<br/>110 <dd class="four-col last-col"><time>{$ discovery.last_seen $}</time></dd>
97 <small class="u-text--subtle u-display--desktop">{$ discovery.mac_organization || 'Unknown' $}</small>111 </dl>
98 </div>112 </div>
99 <div class="table__data table-col--13 u-text--truncate" aria-label="IP Address">113 <div class="six-col last-col">
100 {$ discovery.ip $}114 <dl>
101 </div>115 <dt class="two-col">Fabric</dt>
102 <div class="table__data table-col--15" aria-label="Rack">116 <dd class="four-col last-col">{$ discovery.fabric_name $}</dd>
103 {$ discovery.observer_hostname $}117 <dt class="two-col">VLAN</dt>
104 </div>118 <dd class="four-col last-col">{$ getVLANName(discovery.vlan) $}</dd>
105 <div class="table__data table-col--17" aria-label="Last seen">119 <dt class="two-col">Subnet</dt>
106 <time>{$ discovery.last_seen $}</time>120 <dd class="four-col last-col">{$ getSubnetName(discovery.subnet) $}</dd>
107 </div>121 </dl>
108 <div class="table__data table--mobile-controls table-col--3">122 </div>
109 <div class="table__controls u-align--right">123 </div>
110 <i class="icon icon--open tooltip u-display--desktop" aria-label="Open"124 </div>
111 data-ng-click="toggleSelected(discovery.first_seen)">Open</i>125 <div class="table__row is-active u-padding--top-small">
112 <a class="button--secondary u-display--mobile"126 <div class="table__data table-col--100">
113 data-ng-click="toggleSelected(discovery.first_seen)">Add device</a>127 <fieldset class="form__fieldset six-col">
114 </div>128 <div class="form__group u-display--mobile">
115 </div>129 <label for="Name" class="form__group-label two-col">Name</label>
116 </div>130 <div class="form__group-input three-col">
117 <maas-obj-form data-ng-if="discovery.first_seen === selectedDevice"131 <maas-obj-field type="text" key="hostname"
118 obj="convertTo" manager="proxyManager" pre-process="preProcess"132 disable-label="true" placeholder="Hostname (optional)"></maas-obj-field>
119 after-save="afterSave" table-form="true" save-on-blur="false">133 </div>
120 <div class="table__data table-col--20">134 </div>
121 <maas-obj-field class="u-margin--bottom-none" type="text" key="hostname"135 <div class="form__group">
122 disable-label="true" placeholder="Hostname (optional)"></maas-obj-field>136 <label class="form__group-label two-col u-margin--bottom-small">Type</label>
123 </div>137 <div class="form__group-input three-col">
124 <div class="table__data table-col--77"></div>138 <select name="type" ng-model="convertTo.type">
125 <div class="table__data table-col--3">139 <option value="" disabled>Choose type</option>
126 <i class="icon icon--close tooltip u-display--desktop" aria-label="Close"140 <option value="device">Device</option>
127 data-ng-click="toggleSelected(discovery.first_seen)">Close</i>141 <option value="interface">Interface</option>
128 </div>142 </select>
129 <div class="table__dropdown">143 </div>
130 <div class="table__dropdown-title">144 </div>
131 <h2 data-ng-click="toggleSelected(selectedDevice)" class="u-float--left">Adding {$ getDiscoveryName(discovery) $}</h2>145 <maas-obj-field type="options" key="domain" label="Domain" placeholder="Choose domain"
132 <i data-ng-click="toggleSelected(selectedDevice)" class="icon icon--remove u-float--right u-margin--top-small u-margin--right-small"></i>146 label-width="two" input-width="three" subtle="false"
133 </div>147 options="domain as domain.name for domain in domains"
134 <div class="table__row is-active">148 data-ng-if="convertTo.type === 'device'"></maas-obj-field>
135 <div class="table__data table-col--100">149 <maas-obj-field type="options" subtle="false" key="system_id" label="Device name" placeholder="Select device name"
136 <div class="six-col">150 options="device.system_id as device.fqdn for device in devices | orderBy:'fqdn'"
137 <dl>151 label-width="two" label-info="Create as an interface on the selected device." input-width="three"
138 <dt class="two-col">Mac</dt>152 data-ng-if="convertTo.type === 'interface'"></maas-obj-field>
139 <dd class="four-col last-col">{$ discovery.mac_address $}</dd>153 </fieldset>
140 <dt class="two-col">IP</dt>154 <fieldset class="form__fieldset six-col last-col">
141 <dd class="four-col last-col">{$ discovery.ip $}</dd>155 <maas-obj-field type="options" subtle="false" key="parent" label="Parent" placeholder="Select parent (optional)" placeholder-enabled="true"
142 <dt class="two-col">Rack</dt>156 options="machine.system_id as machine.fqdn for machine in machines | filter:{status_code: 6} | orderBy:'fqdn'"
143 <dd class="four-col last-col">{$ discovery.observer_hostname $}</dd>157 label-width="two" label-info="Assign this device as a child of the parent machine." input-width="three"
144 <dt class="two-col">Last seen</dt>158 data-ng-if="convertTo.type === 'device'"></maas-obj-field>
145 <dd class="four-col last-col"><time>{$ discovery.last_seen $}</time></dd>159 <maas-obj-field type="options" subtle="false" key="ip_assignment" label="IP assignment" placeholder="Select IP assignment"
146 </dl>160 options="option[0] as option[1] for option in convertTo.deviceIPOptions" label-width="two" input-width="three"></maas-obj-field>
147 </div>161 </fieldset>
148 <div class="six-col last-col">162 </div>
149 <dl>163 </div>
150 <dt class="two-col">Fabric</dt>164 <div class="table__row is-active">
151 <dd class="four-col last-col">{$ discovery.fabric_name $}</dd>165 <div class="table__data u-float--left">
152 <dt class="two-col">VLAN</dt>166 <maas-obj-errors></maas-obj-errors>
153 <dd class="four-col last-col">{$ getVLANName(discovery.vlan) $}</dd>167 </div>
154 <dt class="two-col">Subnet</dt>168 <div class="table__data u-float--right">
155 <dd class="four-col last-col">{$ getSubnetName(discovery.subnet) $}</dd>169 <a class="button--base button--inline u-display--desktop" data-ng-click="toggleSelected(selectedDevice)">Cancel</a>
156 </dl>170 <button class="button--secondary button--inline"
157 </div>171 data-ng-click="convertTo.goTo = true"
158 </div>172 data-ng-if="!convertTo.$maasForm.getValue('parent')"
159 </div>173 maas-obj-save>Save and go to device listing</button>
160 <div class="table__row is-active u-padding--top-small">174 <button class="button--secondary button--inline"
161 <div class="table__data table-col--100">175 data-ng-click="convertTo.goTo = true"
162 <fieldset class="form__fieldset six-col">176 data-ng-if="convertTo.$maasForm.getValue('parent')"
163 <div class="form__group u-display--mobile">177 maas-obj-save>Save and go to machine details</button>
164 <label for="Name" class="form__group-label two-col">Name</label>178 <button class="button--positive button--inline" maas-obj-save>Save</button>
165 <div class="form__group-input three-col">179 </div>
166 <maas-obj-field type="text" key="hostname"180 </div>
167 disable-label="true" placeholder="Hostname (optional)"></maas-obj-field>181 </div>
168 </div>182 </maas-obj-form>
169 </div>
170 <div class="form__group">
171 <label class="form__group-label two-col u-margin--bottom-small">Type</label>
172 <div class="form__group-input three-col">
173 <select name="type" ng-model="convertTo.type">
174 <option value="" disabled>Choose type</option>
175 <option value="device">Device</option>
176 <option value="interface">Interface</option>
177 </select>
178 </div>
179 </div>
180 <maas-obj-field type="options" key="domain" label="Domain" placeholder="Choose domain"
181 label-width="two" input-width="three" subtle="false"
182 options="domain as domain.name for domain in domains"
183 data-ng-if="convertTo.type === 'device'"></maas-obj-field>
184 <maas-obj-field type="options" subtle="false" key="system_id" label="Device name" placeholder="Select device name"
185 options="device.system_id as device.fqdn for device in devices | orderBy:'fqdn'"
186 label-width="two" label-info="Create as an interface on the selected device." input-width="three"
187 data-ng-if="convertTo.type === 'interface'"></maas-obj-field>
188 </fieldset>
189 <fieldset class="form__fieldset six-col last-col">
190 <maas-obj-field type="options" subtle="false" key="parent" label="Parent" placeholder="Select parent (optional)" placeholder-enabled="true"
191 options="machine.system_id as machine.fqdn for machine in machines | filter:{status_code: 6} | orderBy:'fqdn'"
192 label-width="two" label-info="Assign this device as a child of the parent machine." input-width="three"
193 data-ng-if="convertTo.type === 'device'"></maas-obj-field>
194 <maas-obj-field type="options" subtle="false" key="ip_assignment" label="IP assignment" placeholder="Select IP assignment"
195 options="option[0] as option[1] for option in convertTo.deviceIPOptions" label-width="two" input-width="three"></maas-obj-field>
196 </fieldset>
197 </div>
198 </div>
199 <div class="table__row is-active">
200 <div class="table__data u-float--left">
201 <maas-obj-errors></maas-obj-errors>
202 </div>
203 <div class="table__data u-float--right">
204 <a class="button--base button--inline u-display--desktop" data-ng-click="toggleSelected(selectedDevice)">Cancel</a>
205 <button class="button--secondary button--inline"
206 data-ng-click="convertTo.goTo = true"
207 data-ng-if="!convertTo.$maasForm.getValue('parent')"
208 maas-obj-save>Save and go to device listing</button>
209 <button class="button--secondary button--inline"
210 data-ng-click="convertTo.goTo = true"
211 data-ng-if="convertTo.$maasForm.getValue('parent')"
212 maas-obj-save>Save and go to machine details</button>
213 <button class="button--positive button--inline" maas-obj-save>Save</button>
214 </div>
215 </div>
216 </div>
217 </maas-obj-form>
218 </div>
219 </div>183 </div>
220 </div>184 </div>
221 </div>185 </div>
222 </div>186 </div>
223 </section>187 </div>
224</div>188</section>
225189
=== modified file 'src/maasserver/static/partials/nodes-list.html'
--- src/maasserver/static/partials/nodes-list.html 2017-02-01 18:13:33 +0000
+++ src/maasserver/static/partials/nodes-list.html 2017-02-02 20:26:39 +0000
@@ -1,5 +1,3 @@
1<maas-notifications />
2
3<header class="page-header" sticky media-query="min-width: 769px">1<header class="page-header" sticky media-query="min-width: 769px">
4 <div class="wrapper--inner">2 <div class="wrapper--inner">
5 <!-- XXX ricgard 2016-06-16 - Need to add e2e test. -->3 <!-- XXX ricgard 2016-06-16 - Need to add e2e test. -->
@@ -610,7 +608,10 @@
610 </div>608 </div>
611 </div>609 </div>
612</header>610</header>
613<div class="row u-padding--top-none">611<div class="wrapper--inner">
612 <maas-notifications></maas-notifications>
613</div>
614<div class="u-padding--top-none">
614 <div class="wrapper--inner">615 <div class="wrapper--inner">
615 <aside class="three-col">616 <aside class="three-col">
616 <div class="accordion maas-accordion ng-hide" data-ng-show="currentpage === 'nodes'"617 <div class="accordion maas-accordion ng-hide" data-ng-show="currentpage === 'nodes'"