홍길동 / 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 324 additions and 122 deletions
...@@ -278,20 +278,18 @@ public class PceWebTopovMessageHandler extends UiMessageHandler { ...@@ -278,20 +278,18 @@ 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) {
282 ObjectNode result = objectNode(); 281 ObjectNode result = objectNode();
283 ArrayNode arrayNode = arrayNode(); 282 ArrayNode arrayNode = arrayNode();
284 -
285 for (Tunnel tunnel : tunnelSet) { 283 for (Tunnel tunnel : tunnelSet) {
286 if (tunnel.type() == MPLS) { 284 if (tunnel.type() == MPLS) {
287 arrayNode.add(tunnel.tunnelId().toString()); 285 arrayNode.add(tunnel.tunnelId().toString());
288 } 286 }
289 } 287 }
288 +
290 result.putArray(BUFFER_ARRAY).addAll(arrayNode); 289 result.putArray(BUFFER_ARRAY).addAll(arrayNode);
291 sendMessage(PCEWEB_SHOW_TUNNEL, sid, result); 290 sendMessage(PCEWEB_SHOW_TUNNEL, sid, result);
292 } 291 }
293 } 292 }
294 - }
295 293
296 /** 294 /**
297 * Handles the 'update path' event received from the client. 295 * Handles the 'update path' event received from the client.
...@@ -342,7 +340,6 @@ public class PceWebTopovMessageHandler extends UiMessageHandler { ...@@ -342,7 +340,6 @@ 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) {
346 ObjectNode result = objectNode(); 343 ObjectNode result = objectNode();
347 ArrayNode arrayNode = arrayNode(); 344 ArrayNode arrayNode = arrayNode();
348 345
...@@ -351,11 +348,11 @@ public class PceWebTopovMessageHandler extends UiMessageHandler { ...@@ -351,11 +348,11 @@ public class PceWebTopovMessageHandler extends UiMessageHandler {
351 arrayNode.add(tunnel.tunnelId().toString()); 348 arrayNode.add(tunnel.tunnelId().toString());
352 } 349 }
353 } 350 }
351 +
354 result.putArray(BUFFER_ARRAY).addAll(arrayNode); 352 result.putArray(BUFFER_ARRAY).addAll(arrayNode);
355 sendMessage(PCEWEB_SHOW_TUNNEL_REMOVE, sid, result); 353 sendMessage(PCEWEB_SHOW_TUNNEL_REMOVE, sid, result);
356 } 354 }
357 } 355 }
358 - }
359 356
360 /** 357 /**
361 * Handles the 'remove path' event received from the client. 358 * Handles the 'remove path' event received from the client.
......
...@@ -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 71
66 - if (bandWidth) { 72 + function createUserText() {
73 + var content = ds.createDiv('constraints-input'),
74 + form = content.append('form'),
75 + p = form.append('p');
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');
86 + }
87 +
88 + //Add the bandwidth related inputs.
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');
104 +
105 + return content;
106 + }
107 +
108 + function createUserTextUpdate(data) {
109 + var content = ds.createDiv(),
110 + form = content.append('form'),
111 + p = form.append('p');
112 +
113 + p.append('span').text('Tunnel IDs');
114 + p.append('br');
115 +
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 + });
123 +
124 + p.append('span').text(val);
125 + p.append('br');
126 +
127 + } );
128 +
129 + return content;
130 + }
131 +
132 + function createUserTextUpdatePathEvent() {
133 + var content = ds.createDiv(),
134 + form = content.append('form'),
135 + p = form.append('p');
136 +
137 + function addAttribute(name, id, nameField, type) {
138 + p.append('input').attr({
139 + type: type,
140 + name: name,
141 + id: id
142 + });
143 +
144 + p.append('span').text(nameField);
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');
153 + //Add the cost type related inputs.
154 + addAttribute('pce-cost-type', 'update-pce-cost-type', 'Cost Type', 'checkbox');
155 + addAttribute('pce-cost-type-value', 'update-pce-cost-type-igp', 'IGP', 'radio');
156 + addAttribute('pce-cost-type-value', 'update-pce-cost-type-te', 'TE', 'radio');
67 157
68 - bandValue = d3.select('#band-width-value').property("value"); 158 + return content;
159 + }
160 +
161 + function createUserTextRemove(data) {
162 +
163 + var content = ds.createDiv(),
164 + form = content.append('form'),
165 + p = form.append('p');
166 +
167 + p.append('span').text('Tunnel IDs');
168 + p.append('br');
169 +
170 + data.a.forEach( function (val, idx) {
171 + p.append('input').attr({
172 + id: 'tunnel-id-remove-'+idx,
173 + type: 'checkbox',
174 + name: 'tunnel-id-name-remove',
175 + value: val
176 + });
177 +
178 + p.append('span').text(val);
179 + p.append('br');
180 + } );
181 +
182 + return content;
183 + }
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');
69 229
70 - if (d3.select("#band-kpbs-val").property("checked")) { 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')) {
71 bandType = 'kbps'; 238 bandType = 'kbps';
72 - } else if (d3.select('#band-mpbs-val').property("checked")) { 239 + } else if (isChecked('update-band-mpbs-val')) {
73 bandType = 'mbps'; 240 bandType = 'mbps';
74 } 241 }
75 } 242 }
76 243
77 - var costType = d3.select('#pce-cost-type').property("checked"); 244 + var costType = isChecked('update-pce-cost-type'),
78 - var costTypeVal = null; 245 + costTypeVal = null;
79 246
80 if (costType) { 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
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;
81 306
82 - if (d3.select("#pce-cost-type-igp").property("checked")) { 307 + if (costType) {
308 + if (isChecked('pce-cost-type-igp')) {
83 costTypeVal = 'igp'; 309 costTypeVal = 'igp';
84 - } else if (d3.select('#pce-cost-type-te').property("checked")) { 310 + } else if (isChecked('pce-cost-type-te')) {
85 costTypeVal = 'te'; 311 costTypeVal = 'te';
86 } 312 }
87 } 313 }
88 314
89 - var lspType = d3.select('#pce-lsp-type').property("checked"); 315 + var lspType = isChecked('pce-lsp-type'),
90 - var lspTypeVal = null; 316 + lspTypeVal = null;
91 317
92 if (lspType) { 318 if (lspType) {
93 - 319 + if (isChecked('pce-lsp-type-cr')) {
94 - if (d3.select("#pce-lsp-type-cr").property("checked")) {
95 lspTypeVal = 'cr'; 320 lspTypeVal = 'cr';
96 - } else if (d3.select('#pce-lsp-type-srbe').property("checked")) { 321 + } else if (isChecked('pce-lsp-type-srbe')) {
97 lspTypeVal = 'srbe'; 322 lspTypeVal = 'srbe';
98 - } else if (d3.select('#pce-lsp-type-srte').property("checked")) { 323 + } else if (isChecked('pce-lsp-type-srte')) {
99 lspTypeVal = 'srte'; 324 lspTypeVal = 'srte';
100 } 325 }
101 } 326 }
102 327
103 - //TBD: Read the user inputs and need to send the event for calculating the path based on constrainsts. 328 + wss.sendEvent(setPathmsg, {
104 - // TBD: Need to read IGP cost type and LSP type. 329 + bw: bandValue,
105 - //wss.sendEvent(setModemsg); 330 + bwtype: bandType,
106 - //flash.flash('creat path message'); 331 + ctype: costTypeVal,
332 + lsptype: lspTypeVal,
333 + tunnelname: getCheckedValue('pce-tunnel-name-id')
334 + });
107 335
336 + flash.flash('create path message');
108 $log.debug('Dialog OK button clicked'); 337 $log.debug('Dialog OK button clicked');
109 } 338 }
110 339
111 - function dClose() { 340 + tds.openDialog()
112 - $log.debug('Dialog Close button clicked (or Esc pressed)'); 341 + .setTitle('constraints selection')
342 + .addContent(createUserText())
343 + .addOk(dOk, 'OK')
344 + .addCancel(dClose, 'Close')
345 + .bindKeys();
113 } 346 }
114 347
115 - function createUserText() { 348 + function updatePath(node) {
116 - var content = ds.createDiv();
117 - var form = content.append('form');
118 - var p = form.append('p');
119 349
120 - //Add the bandwidth related inputs. 350 + wss.sendEvent(updatePathmsgQuery, {
121 - p.append('input').attr({ 351 + srid: node[0],
122 - id: 'band-width-box', 352 + dsid: node[1]
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 }); 353 });
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 354
147 - //Add the cost type related inputs. 355 + handlerMap[showTunnelInfoMsg] = showTunnelInformation;
148 - p.append('input').attr({ 356 + wss.bindHandlers(handlerMap);
149 - id: 'pce-cost-type',
150 - type: 'checkbox',
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 357
169 - //Add the LSP type related inputs. 358 + flash.flash('update path message');
170 - p.append('input').attr({ 359 + }
171 - id: 'pce-lsp-type', 360 +
172 - type: 'checkbox', 361 + function dOkRemove() {
173 - name: 'pce-lsp-type-name' 362 +
174 - }); 363 + tunnelNameDataRemove.a.forEach( function (val, idx) {
175 - p.append('span').text('Lsp Type'); 364 + var tunnelNameVal = isChecked('tunnel-id-remove-'+idx);
176 - p.append('br'); 365 + if (tunnelNameVal) {
177 - p.append('input').attr({ 366 + wss.sendEvent(remPathmsg, {
178 - id: 'pce-lsp-type-cr', 367 + tunnelid: val
179 - type: 'radio',
180 - name: 'pce-lsp-type-valname'
181 - });
182 - p.append('span').text('CR');
183 - p.append('input').attr({
184 - id: 'pce-lsp-type-srbe',
185 - type: 'radio',
186 - name: 'pce-lsp-type-valname'
187 - });
188 - p.append('span').text('SR BE');
189 - p.append('input').attr({
190 - id: 'pce-lsp-type-srte',
191 - type: 'radio',
192 - name: 'pce-lsp-type-valname'
193 }); 368 });
194 - p.append('span').text('SR TE'); 369 + }
370 + } );
195 371
196 - return content; 372 + flash.flash('remove path message');
197 } 373 }
198 374
199 - function setMode() { 375 + function remPath(node) {
200 - tds.openDialog() 376 + wss.sendEvent(remPathmsgQuery, {
201 - .setTitle('constraints user') 377 + srid: node[0],
202 - .addContent(createUserText()) 378 + dsid: node[1]
203 - .addOk(dOk, 'OK') 379 + });
204 - .addCancel(dClose, 'Close') 380 +
205 - .bindKeys(); 381 + handlerMapRem[showTunnelInfoRemoveMsg] = showTunnelInformationRemove;
382 + wss.bindHandlers(handlerMapRem);
206 } 383 }
207 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 };
......