홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Mahesh Raju-Huawei
Committed by Gerrit Code Review
2cfa535e 1 parent 13bf46ec

[ONOS-4159] PCE Web GUI implementation:ClientsideChanges 

Change-Id: Ib8397ecc9ebe5a28550263ebe6e4eaf05712c05e
Inline Side-by-side
Showing 3 changed files with 351 additions and 149 deletions
...@@ -278,18 +278,16 @@ public class PceWebTopovMessageHandler extends UiMessageHandler { ...@@ -278,18 +278,16 @@ public class PceWebTopovMessageHandler extends UiMessageHandler {
278 .valueOf(dstDevice.annotations().value("lsrId"))); 278 .valueOf(dstDevice.annotations().value("lsrId")));
279 279
280 Collection<Tunnel> tunnelSet = tunnelService.queryTunnel(tunSrc, tunDst); 280 Collection<Tunnel> tunnelSet = tunnelService.queryTunnel(tunSrc, tunDst);
281 - if (tunnelSet != null) { 281 + ObjectNode result = objectNode();
282 - ObjectNode result = objectNode(); 282 + ArrayNode arrayNode = arrayNode();
283 - ArrayNode arrayNode = arrayNode(); 283 + for (Tunnel tunnel : tunnelSet) {
284 - 284 + if (tunnel.type() == MPLS) {
285 - for (Tunnel tunnel : tunnelSet) { 285 + arrayNode.add(tunnel.tunnelId().toString());
286 - if (tunnel.type() == MPLS) {
287 - arrayNode.add(tunnel.tunnelId().toString());
288 - }
289 } 286 }
290 - result.putArray(BUFFER_ARRAY).addAll(arrayNode); 287 + }
291 - sendMessage(PCEWEB_SHOW_TUNNEL, sid, result); 288 +
292 - } 289 + result.putArray(BUFFER_ARRAY).addAll(arrayNode);
290 + sendMessage(PCEWEB_SHOW_TUNNEL, sid, result);
293 } 291 }
294 } 292 }
295 293
...@@ -342,18 +340,17 @@ public class PceWebTopovMessageHandler extends UiMessageHandler { ...@@ -342,18 +340,17 @@ public class PceWebTopovMessageHandler extends UiMessageHandler {
342 .valueOf(dstDevice.annotations().value("lsrId"))); 340 .valueOf(dstDevice.annotations().value("lsrId")));
343 341
344 Collection<Tunnel> tunnelSet = tunnelService.queryTunnel(tunSrc, tunDst); 342 Collection<Tunnel> tunnelSet = tunnelService.queryTunnel(tunSrc, tunDst);
345 - if (tunnelSet != null) { 343 + ObjectNode result = objectNode();
346 - ObjectNode result = objectNode(); 344 + ArrayNode arrayNode = arrayNode();
347 - ArrayNode arrayNode = arrayNode(); 345 +
348 - 346 + for (Tunnel tunnel : tunnelSet) {
349 - for (Tunnel tunnel : tunnelSet) { 347 + if (tunnel.type() == MPLS) {
350 - if (tunnel.type() == MPLS) { 348 + arrayNode.add(tunnel.tunnelId().toString());
351 - arrayNode.add(tunnel.tunnelId().toString());
352 - }
353 } 349 }
354 - result.putArray(BUFFER_ARRAY).addAll(arrayNode); 350 + }
355 - sendMessage(PCEWEB_SHOW_TUNNEL_REMOVE, sid, result); 351 +
356 - } 352 + result.putArray(BUFFER_ARRAY).addAll(arrayNode);
353 + sendMessage(PCEWEB_SHOW_TUNNEL_REMOVE, sid, result);
357 } 354 }
358 } 355 }
359 356
......
...@@ -21,16 +21,23 @@ ...@@ -21,16 +21,23 @@
21 21
22 // injected refs 22 // injected refs
23 var $log, fs, flash, wss, tps, ns, tds, ds; 23 var $log, fs, flash, wss, tps, ns, tds, ds;
24 - 24 + var tunnelNameData, tunnelNameDataRemove;
25 // constants 25 // constants
26 var srcMessage = 'pceTopovSetSrc', 26 var srcMessage = 'pceTopovSetSrc',
27 dstMessage = 'pceTopovSetDst', 27 dstMessage = 'pceTopovSetDst',
28 clearMessage = 'pceTopovClear', 28 clearMessage = 'pceTopovClear',
29 - setModemsg = 'pceTopovSetMode', 29 + setPathmsg = 'pceTopovSetMode',
30 - L3dev = 'requestIpDevDetails'; 30 + updatePathmsgQuery = 'pceTopovUpdateQuery',
31 + remPathmsgQuery = 'pceTopovRemQuery',
32 + updatePathmsg = 'pceTopovUpdate',
33 + remPathmsg = 'pceTopovRem',
34 + showTunnelInfoMsg = 'pceTopovShowTunnels',
35 + queryDisplayTunnelMsg = 'pceTopovTunnelDisplay',
36 + showTunnelInfoRemoveMsg = 'pceTopovShowTunnelsRem';
31 // internal state 37 // internal state
32 var currentMode = null; 38 var currentMode = null;
33 - 39 + var handlerMap = {},
40 + handlerMapRem = {};
34 // === --------------------------- 41 // === ---------------------------
35 // === Helper functions 42 // === Helper functions
36 43
...@@ -58,153 +65,326 @@ ...@@ -58,153 +65,326 @@
58 flash.flash('Cleared source and destination'); 65 flash.flash('Cleared source and destination');
59 } 66 }
60 67
61 - function dOk() { 68 + function dClose() {
62 - var bandWidth = d3.select('#band-width-box').property("checked"); 69 + $log.debug('Dialog Close button clicked (or Esc pressed)');
63 - var bandValue = null; 70 + }
64 - var bandType = null;
65 -
66 - if (bandWidth) {
67 -
68 - bandValue = d3.select('#band-width-value').property("value");
69 71
70 - if (d3.select("#band-kpbs-val").property("checked")) { 72 + function createUserText() {
71 - bandType = 'kbps'; 73 + var content = ds.createDiv('constraints-input'),
72 - } else if (d3.select('#band-mpbs-val').property("checked")) { 74 + form = content.append('form'),
73 - bandType = 'mbps'; 75 + p = form.append('p');
74 - } 76 +
77 + function addAttribute(name, id, nameField, type) {
78 + p.append('input').attr({
79 + type: type,
80 + name: name,
81 + id: id
82 + });
83 +
84 + p.append('span').text(nameField);
85 + p.append('br');
75 } 86 }
76 87
77 - var costType = d3.select('#pce-cost-type').property("checked"); 88 + //Add the bandwidth related inputs.
78 - var costTypeVal = null; 89 + addAttribute('band-width-name', 'band-width-box', 'Band Width', 'checkbox');
90 + addAttribute('band-width-value-name', 'band-width-value', null, 'number');
91 + addAttribute('pce-band-type', 'band-kpbs-val', 'kbps', 'radio');
92 + addAttribute('pce-band-type', 'band-mpbs-val', 'mbps', 'radio');
93 + //Add the cost type related inputs.
94 + addAttribute('pce-cost-type-name', 'pce-cost-type', 'Cost Type', 'checkbox');
95 + addAttribute('pce-cost-type-valname', 'pce-cost-type-igp', 'IGP', 'radio');
96 + addAttribute('pce-cost-type-valname', 'pce-cost-type-te', 'TE', 'radio');
97 + //Add the LSP type related inputs.
98 + addAttribute('pce-lsp-type-name', 'pce-lsp-type', 'Lsp Type', 'checkbox');
99 + addAttribute('pce-lsp-type-valname', 'pce-lsp-type-cr', 'WITH SIGNALLING', 'radio');
100 + addAttribute('pce-lsp-type-valname', 'pce-lsp-type-srbe', 'WITHOUT SR WITHOUT SIGNALLING', 'radio');
101 + addAttribute('pce-lsp-type-valname', 'pce-lsp-type-srte', 'WITH SR WITHOUT SIGNALLING', 'radio');
102 + //Add the tunnel name
103 + addAttribute('pce-tunnel-name', 'pce-tunnel-name-id', 'Tunnel Name', 'text');
79 104
80 - if (costType) { 105 + return content;
106 + }
81 107
82 - if (d3.select("#pce-cost-type-igp").property("checked")) { 108 + function createUserTextUpdate(data) {
83 - costTypeVal = 'igp'; 109 + var content = ds.createDiv(),
84 - } else if (d3.select('#pce-cost-type-te').property("checked")) { 110 + form = content.append('form'),
85 - costTypeVal = 'te'; 111 + p = form.append('p');
86 - }
87 - }
88 112
89 - var lspType = d3.select('#pce-lsp-type').property("checked"); 113 + p.append('span').text('Tunnel IDs');
90 - var lspTypeVal = null; 114 + p.append('br');
91 115
92 - if (lspType) { 116 + data.a.forEach( function (val, idx) {
117 + p.append('input').attr({
118 + id: 'tunnel-id-'+idx,
119 + type: 'radio',
120 + name: 'tunnel-id-name',
121 + value: val
122 + });
93 123
94 - if (d3.select("#pce-lsp-type-cr").property("checked")) { 124 + p.append('span').text(val);
95 - lspTypeVal = 'cr'; 125 + p.append('br');
96 - } else if (d3.select('#pce-lsp-type-srbe').property("checked")) {
97 - lspTypeVal = 'srbe';
98 - } else if (d3.select('#pce-lsp-type-srte').property("checked")) {
99 - lspTypeVal = 'srte';
100 - }
101 - }
102 126
103 - //TBD: Read the user inputs and need to send the event for calculating the path based on constrainsts. 127 + } );
104 - // TBD: Need to read IGP cost type and LSP type.
105 - //wss.sendEvent(setModemsg);
106 - //flash.flash('creat path message');
107 128
108 - $log.debug('Dialog OK button clicked'); 129 + return content;
109 } 130 }
110 131
111 - function dClose() { 132 + function createUserTextUpdatePathEvent() {
112 - $log.debug('Dialog Close button clicked (or Esc pressed)'); 133 + var content = ds.createDiv(),
113 - } 134 + form = content.append('form'),
135 + p = form.append('p');
114 136
115 - function createUserText() { 137 + function addAttribute(name, id, nameField, type) {
116 - var content = ds.createDiv(); 138 + p.append('input').attr({
117 - var form = content.append('form'); 139 + type: type,
118 - var p = form.append('p'); 140 + name: name,
141 + id: id
142 + });
119 143
120 - //Add the bandwidth related inputs. 144 + p.append('span').text(nameField);
121 - p.append('input').attr({ 145 + p.append('br');
122 - id: 'band-width-box', 146 + }
123 - type: 'checkbox',
124 - name: 'band-width-name'
125 - });
126 - p.append('span').text('Band Width');
127 - p.append('br');
128 - p.append('input').attr({
129 - id: 'band-width-value',
130 - type: 'number',
131 - name: 'band-width-value-name'
132 - });
133 - p.append('input').attr({
134 - id: 'band-kpbs-val',
135 - type: 'radio',
136 - name: 'pce-band-type'
137 - });
138 - p.append('span').text('kpbs');
139 - p.append('input').attr({
140 - id: 'band-mpbs-val',
141 - type: 'radio',
142 - name: 'pce-band-type'
143 - });
144 - p.append('span').text('mpbs');
145 - p.append('br');
146 147
148 + //Add the bandwidth related inputs.
149 + addAttribute('band-width-name', 'update-band-width-box', 'Band Width', 'checkbox');
150 + addAttribute('band-width-value-name', 'update-band-width-value', null, 'number');
151 + addAttribute('pce-band-type', 'update-band-kpbs-val', 'kbps', 'radio');
152 + addAttribute('pce-band-type', 'update-band-mpbs-val', 'mbps', 'radio');
147 //Add the cost type related inputs. 153 //Add the cost type related inputs.
148 - p.append('input').attr({ 154 + addAttribute('pce-cost-type', 'update-pce-cost-type', 'Cost Type', 'checkbox');
149 - id: 'pce-cost-type', 155 + addAttribute('pce-cost-type-value', 'update-pce-cost-type-igp', 'IGP', 'radio');
150 - type: 'checkbox', 156 + addAttribute('pce-cost-type-value', 'update-pce-cost-type-te', 'TE', 'radio');
151 - name: 'pce-cost-type-name'
152 - });
153 - p.append('span').text('Cost Type');
154 - p.append('br');
155 - p.append('input').attr({
156 - id: 'pce-cost-type-igp',
157 - type: 'radio',
158 - name: 'pce-cost-type-valname'
159 - });
160 - p.append('span').text('IGP');
161 - p.append('input').attr({
162 - id: 'pce-cost-type-te',
163 - type: 'radio',
164 - name: 'pce-cost-type-valname'
165 - });
166 - p.append('span').text('TE');
167 - p.append('br');
168 157
169 - //Add the LSP type related inputs. 158 + return content;
170 - p.append('input').attr({ 159 + }
171 - id: 'pce-lsp-type', 160 +
172 - type: 'checkbox', 161 + function createUserTextRemove(data) {
173 - name: 'pce-lsp-type-name' 162 +
174 - }); 163 + var content = ds.createDiv(),
175 - p.append('span').text('Lsp Type'); 164 + form = content.append('form'),
165 + p = form.append('p');
166 +
167 + p.append('span').text('Tunnel IDs');
176 p.append('br'); 168 p.append('br');
177 - p.append('input').attr({ 169 +
178 - id: 'pce-lsp-type-cr', 170 + data.a.forEach( function (val, idx) {
179 - type: 'radio', 171 + p.append('input').attr({
180 - name: 'pce-lsp-type-valname' 172 + id: 'tunnel-id-remove-'+idx,
181 - }); 173 + type: 'checkbox',
182 - p.append('span').text('CR'); 174 + name: 'tunnel-id-name-remove',
183 - p.append('input').attr({ 175 + value: val
184 - id: 'pce-lsp-type-srbe', 176 + });
185 - type: 'radio', 177 +
186 - name: 'pce-lsp-type-valname' 178 + p.append('span').text(val);
187 - }); 179 + p.append('br');
188 - p.append('span').text('SR BE'); 180 + } );
189 - p.append('input').attr({
190 - id: 'pce-lsp-type-srte',
191 - type: 'radio',
192 - name: 'pce-lsp-type-valname'
193 - });
194 - p.append('span').text('SR TE');
195 181
196 return content; 182 return content;
197 } 183 }
198 184
185 + function isChecked(viewId) {
186 + return d3.select('#' + viewId).property('checked');
187 + }
188 +
189 + function getCheckedValue(viewId) {
190 + return d3.select('#' + viewId).property('value');
191 + }
192 +
193 + function showTunnelInformation(data) {
194 + wss.unbindHandlers(handlerMap);
195 + tunnelNameData = data;
196 +
197 + function dOkUpdate() {
198 + var tdString = '' ;
199 + tunnelNameData.a.forEach( function (val, idx) {
200 + var tunnelName = isChecked('tunnel-id-'+idx);
201 + if (tunnelName)
202 + {
203 + tdString = val;
204 + }
205 + } );
206 +
207 + if (tdString) {
208 + constraintsUpdateDialog(tdString);
209 + } else {
210 + $log.debug("No tunnel id is selected.");
211 + }
212 +
213 + $log.debug('Dialog OK button clicked');
214 + }
215 +
216 + tds.openDialog()
217 + .setTitle('Available LSPs with selected device')
218 + .addContent(createUserTextUpdate(data))
219 + .addOkChained(dOkUpdate, 'GOTO Selection of constraints')
220 + .addCancel(dClose, 'Close')
221 + .bindKeys();
222 + }
223 +
224 + function constraintsUpdateDialog(tunnelId) {
225 +
226 + // invoked when the OK button is pressed on this dialog
227 + function dOkUpdateEvent() {
228 + $log.debug('Select constraints for update path Dialog OK button pressed');
229 +
230 + var bandWidth = isChecked('update-band-width-box'),
231 + bandValue = null,
232 + bandType = null;
233 +
234 + if (bandWidth) {
235 + bandValue = d3.select('#update-band-width-value');
236 +
237 + if (isChecked('update-band-kpbs-val')) {
238 + bandType = 'kbps';
239 + } else if (isChecked('update-band-mpbs-val')) {
240 + bandType = 'mbps';
241 + }
242 + }
243 +
244 + var costType = isChecked('update-pce-cost-type'),
245 + costTypeVal = null;
246 +
247 + if (costType) {
248 + if (isChecked('update-pce-cost-type-igp')) {
249 + costTypeVal = 'igp';
250 + } else if (isChecked('update-pce-cost-type-te')) {
251 + costTypeVal = 'te';
252 + }
253 + }
254 +
255 + wss.sendEvent(updatePathmsg, {
256 + bw: bandValue,
257 + ctype: costTypeVal,
258 + tunnelname: tunnelId
259 + });
260 +
261 + flash.flash('update path message');
262 +
263 + }
264 +
265 + tds.openDialog()
266 + .setTitle('Select constraints for update path')
267 + .addContent(createUserTextUpdatePathEvent())
268 + .addCancel()
269 + .addOk(dOkUpdateEvent, 'Update Path') // NOTE: NOT the "chained" version!
270 + .bindKeys();
271 +
272 + }
273 +
274 + function showTunnelInformationRemove(data) {
275 +
276 + wss.unbindHandlers(handlerMapRem);
277 + tunnelNameDataRemove = data;
278 + tds.openDialog()
279 + .setTitle('Available Tunnels for remove')
280 + .addContent(createUserTextRemove(data))
281 + .addOk(dOkRemove, 'Remove')
282 + .addCancel(dClose, 'Close')
283 + .bindKeys();
284 + }
285 +
286 + //setup path
199 function setMode() { 287 function setMode() {
288 +
289 + function dOk() {
290 + var bandWidth = isChecked('band-width-box'),
291 + bandValue = null,
292 + bandType = null;
293 +
294 + if (bandWidth) {
295 + bandValue = getCheckedValue('band-width-value');
296 +
297 + if (isChecked('band-kpbs-val')) {
298 + bandType = 'kbps';
299 + } else if (isChecked('band-mpbs-val')) {
300 + bandType = 'mbps';
301 + }
302 + }
303 +
304 + var costType = isChecked('pce-cost-type'),
305 + costTypeVal = null;
306 +
307 + if (costType) {
308 + if (isChecked('pce-cost-type-igp')) {
309 + costTypeVal = 'igp';
310 + } else if (isChecked('pce-cost-type-te')) {
311 + costTypeVal = 'te';
312 + }
313 + }
314 +
315 + var lspType = isChecked('pce-lsp-type'),
316 + lspTypeVal = null;
317 +
318 + if (lspType) {
319 + if (isChecked('pce-lsp-type-cr')) {
320 + lspTypeVal = 'cr';
321 + } else if (isChecked('pce-lsp-type-srbe')) {
322 + lspTypeVal = 'srbe';
323 + } else if (isChecked('pce-lsp-type-srte')) {
324 + lspTypeVal = 'srte';
325 + }
326 + }
327 +
328 + wss.sendEvent(setPathmsg, {
329 + bw: bandValue,
330 + bwtype: bandType,
331 + ctype: costTypeVal,
332 + lsptype: lspTypeVal,
333 + tunnelname: getCheckedValue('pce-tunnel-name-id')
334 + });
335 +
336 + flash.flash('create path message');
337 + $log.debug('Dialog OK button clicked');
338 + }
339 +
200 tds.openDialog() 340 tds.openDialog()
201 - .setTitle('constraints user') 341 + .setTitle('constraints selection')
202 .addContent(createUserText()) 342 .addContent(createUserText())
203 .addOk(dOk, 'OK') 343 .addOk(dOk, 'OK')
204 .addCancel(dClose, 'Close') 344 .addCancel(dClose, 'Close')
205 .bindKeys(); 345 .bindKeys();
206 } 346 }
207 347
348 + function updatePath(node) {
349 +
350 + wss.sendEvent(updatePathmsgQuery, {
351 + srid: node[0],
352 + dsid: node[1]
353 + });
354 +
355 + handlerMap[showTunnelInfoMsg] = showTunnelInformation;
356 + wss.bindHandlers(handlerMap);
357 +
358 + flash.flash('update path message');
359 + }
360 +
361 + function dOkRemove() {
362 +
363 + tunnelNameDataRemove.a.forEach( function (val, idx) {
364 + var tunnelNameVal = isChecked('tunnel-id-remove-'+idx);
365 + if (tunnelNameVal) {
366 + wss.sendEvent(remPathmsg, {
367 + tunnelid: val
368 + });
369 + }
370 + } );
371 +
372 + flash.flash('remove path message');
373 + }
374 +
375 + function remPath(node) {
376 + wss.sendEvent(remPathmsgQuery, {
377 + srid: node[0],
378 + dsid: node[1]
379 + });
380 +
381 + handlerMapRem[showTunnelInfoRemoveMsg] = showTunnelInformationRemove;
382 + wss.bindHandlers(handlerMapRem);
383 + }
384 +
385 + function queryTunnelDisplay() {
386 + wss.sendEvent(queryDisplayTunnelMsg);
387 + }
208 // === --------------------------- 388 // === ---------------------------
209 // === Module Factory Definition 389 // === Module Factory Definition
210 390
...@@ -227,8 +407,10 @@ ...@@ -227,8 +407,10 @@
227 setSrc: setSrc, 407 setSrc: setSrc,
228 setDst: setDst, 408 setDst: setDst,
229 clear: clear, 409 clear: clear,
230 - setMode: setMode 410 + setMode: setMode,
231 - 411 + updatePath: updatePath,
412 + remPath: remPath,
413 + queryTunnelDisplay: queryTunnelDisplay
232 }; 414 };
233 }]); 415 }]);
234 }()); 416 }());
......
...@@ -34,7 +34,6 @@ ...@@ -34,7 +34,6 @@
34 glyphId: 'topo', 34 glyphId: 'topo',
35 tooltip: 'PCE web Topo Overlay', 35 tooltip: 'PCE web Topo Overlay',
36 36
37 -
38 activate: function () { 37 activate: function () {
39 $log.debug("PCE web topology overlay ACTIVATED"); 38 $log.debug("PCE web topology overlay ACTIVATED");
40 }, 39 },
...@@ -112,11 +111,32 @@ ...@@ -112,11 +111,32 @@
112 }, 111 },
113 1: { 112 1: {
114 cb: function () { 113 cb: function () {
115 - pps.setMode("shortest"); 114 + pps.setMode();
115 + },
116 + tt: 'Setup path',
117 + gid: 'plus'
118 + },
119 + 2: {
120 + cb: function () {
121 + pps.updatePath(selection);
116 }, 122 },
117 - tt: 'Select constraints for LSP', 123 + tt: 'Update path',
118 gid: '*jp' 124 gid: '*jp'
119 }, 125 },
126 + 3: {
127 + cb: function () {
128 + pps.remPath(selection);
129 + },
130 + tt: 'Remove path',
131 + gid: 'minus'
132 + },
133 + 4: {
134 + cb: function () {
135 + pps.queryTunnelDisplay();
136 + },
137 + tt: 'Show Tunnels',
138 + gid: 'checkMark'
139 + },
120 0: { 140 0: {
121 cb: function () { 141 cb: function () {
122 pps.clear(); 142 pps.clear();
...@@ -126,7 +146,7 @@ ...@@ -126,7 +146,7 @@
126 }, 146 },
127 147
128 _keyOrder: [ 148 _keyOrder: [
129 - 'openBracket', 'closeBracket', '1', '0' 149 + 'openBracket', 'closeBracket', '1', '2', '3', '4', '0'
130 ] 150 ]
131 }, 151 },
132 hooks: { 152 hooks: {
...@@ -145,6 +165,9 @@ ...@@ -145,6 +165,9 @@
145 }, 165 },
146 single: function (data) { 166 single: function (data) {
147 selectionCallback(data); 167 selectionCallback(data);
168 + },
169 + multi: function (selectOrder) {
170 + selectionCallback(selectOrder);
148 } 171 }
149 } 172 }
150 }; 173 };
......