홍길동 / 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 {
.valueOf(dstDevice.annotations().value("lsrId")));
Collection<Tunnel> tunnelSet = tunnelService.queryTunnel(tunSrc, tunDst);
if (tunnelSet != null) {
ObjectNode result = objectNode();
ArrayNode arrayNode = arrayNode();
for (Tunnel tunnel : tunnelSet) {
if (tunnel.type() == MPLS) {
arrayNode.add(tunnel.tunnelId().toString());
}
}
result.putArray(BUFFER_ARRAY).addAll(arrayNode);
sendMessage(PCEWEB_SHOW_TUNNEL, sid, result);
}
}
}
/**
* Handles the 'update path' event received from the client.
......@@ -342,7 +340,6 @@ public class PceWebTopovMessageHandler extends UiMessageHandler {
.valueOf(dstDevice.annotations().value("lsrId")));
Collection<Tunnel> tunnelSet = tunnelService.queryTunnel(tunSrc, tunDst);
if (tunnelSet != null) {
ObjectNode result = objectNode();
ArrayNode arrayNode = arrayNode();
......@@ -351,11 +348,11 @@ public class PceWebTopovMessageHandler extends UiMessageHandler {
arrayNode.add(tunnel.tunnelId().toString());
}
}
result.putArray(BUFFER_ARRAY).addAll(arrayNode);
sendMessage(PCEWEB_SHOW_TUNNEL_REMOVE, sid, result);
}
}
}
/**
* Handles the 'remove path' event received from the client.
......
......@@ -21,16 +21,23 @@
// injected refs
var $log, fs, flash, wss, tps, ns, tds, ds;
var tunnelNameData, tunnelNameDataRemove;
// constants
var srcMessage = 'pceTopovSetSrc',
dstMessage = 'pceTopovSetDst',
clearMessage = 'pceTopovClear',
setModemsg = 'pceTopovSetMode',
L3dev = 'requestIpDevDetails';
setPathmsg = 'pceTopovSetMode',
updatePathmsgQuery = 'pceTopovUpdateQuery',
remPathmsgQuery = 'pceTopovRemQuery',
updatePathmsg = 'pceTopovUpdate',
remPathmsg = 'pceTopovRem',
showTunnelInfoMsg = 'pceTopovShowTunnels',
queryDisplayTunnelMsg = 'pceTopovTunnelDisplay',
showTunnelInfoRemoveMsg = 'pceTopovShowTunnelsRem';
// internal state
var currentMode = null;
var handlerMap = {},
handlerMapRem = {};
// === ---------------------------
// === Helper functions
......@@ -58,153 +65,326 @@
flash.flash('Cleared source and destination');
}
function dOk() {
var bandWidth = d3.select('#band-width-box').property("checked");
var bandValue = null;
var bandType = null;
function dClose() {
$log.debug('Dialog Close button clicked (or Esc pressed)');
}
if (bandWidth) {
function createUserText() {
var content = ds.createDiv('constraints-input'),
form = content.append('form'),
p = form.append('p');
function addAttribute(name, id, nameField, type) {
p.append('input').attr({
type: type,
name: name,
id: id
});
p.append('span').text(nameField);
p.append('br');
}
//Add the bandwidth related inputs.
addAttribute('band-width-name', 'band-width-box', 'Band Width', 'checkbox');
addAttribute('band-width-value-name', 'band-width-value', null, 'number');
addAttribute('pce-band-type', 'band-kpbs-val', 'kbps', 'radio');
addAttribute('pce-band-type', 'band-mpbs-val', 'mbps', 'radio');
//Add the cost type related inputs.
addAttribute('pce-cost-type-name', 'pce-cost-type', 'Cost Type', 'checkbox');
addAttribute('pce-cost-type-valname', 'pce-cost-type-igp', 'IGP', 'radio');
addAttribute('pce-cost-type-valname', 'pce-cost-type-te', 'TE', 'radio');
//Add the LSP type related inputs.
addAttribute('pce-lsp-type-name', 'pce-lsp-type', 'Lsp Type', 'checkbox');
addAttribute('pce-lsp-type-valname', 'pce-lsp-type-cr', 'WITH SIGNALLING', 'radio');
addAttribute('pce-lsp-type-valname', 'pce-lsp-type-srbe', 'WITHOUT SR WITHOUT SIGNALLING', 'radio');
addAttribute('pce-lsp-type-valname', 'pce-lsp-type-srte', 'WITH SR WITHOUT SIGNALLING', 'radio');
//Add the tunnel name
addAttribute('pce-tunnel-name', 'pce-tunnel-name-id', 'Tunnel Name', 'text');
return content;
}
function createUserTextUpdate(data) {
var content = ds.createDiv(),
form = content.append('form'),
p = form.append('p');
p.append('span').text('Tunnel IDs');
p.append('br');
data.a.forEach( function (val, idx) {
p.append('input').attr({
id: 'tunnel-id-'+idx,
type: 'radio',
name: 'tunnel-id-name',
value: val
});
p.append('span').text(val);
p.append('br');
} );
return content;
}
function createUserTextUpdatePathEvent() {
var content = ds.createDiv(),
form = content.append('form'),
p = form.append('p');
function addAttribute(name, id, nameField, type) {
p.append('input').attr({
type: type,
name: name,
id: id
});
p.append('span').text(nameField);
p.append('br');
}
//Add the bandwidth related inputs.
addAttribute('band-width-name', 'update-band-width-box', 'Band Width', 'checkbox');
addAttribute('band-width-value-name', 'update-band-width-value', null, 'number');
addAttribute('pce-band-type', 'update-band-kpbs-val', 'kbps', 'radio');
addAttribute('pce-band-type', 'update-band-mpbs-val', 'mbps', 'radio');
//Add the cost type related inputs.
addAttribute('pce-cost-type', 'update-pce-cost-type', 'Cost Type', 'checkbox');
addAttribute('pce-cost-type-value', 'update-pce-cost-type-igp', 'IGP', 'radio');
addAttribute('pce-cost-type-value', 'update-pce-cost-type-te', 'TE', 'radio');
bandValue = d3.select('#band-width-value').property("value");
return content;
}
function createUserTextRemove(data) {
var content = ds.createDiv(),
form = content.append('form'),
p = form.append('p');
p.append('span').text('Tunnel IDs');
p.append('br');
data.a.forEach( function (val, idx) {
p.append('input').attr({
id: 'tunnel-id-remove-'+idx,
type: 'checkbox',
name: 'tunnel-id-name-remove',
value: val
});
p.append('span').text(val);
p.append('br');
} );
return content;
}
function isChecked(viewId) {
return d3.select('#' + viewId).property('checked');
}
function getCheckedValue(viewId) {
return d3.select('#' + viewId).property('value');
}
function showTunnelInformation(data) {
wss.unbindHandlers(handlerMap);
tunnelNameData = data;
function dOkUpdate() {
var tdString = '' ;
tunnelNameData.a.forEach( function (val, idx) {
var tunnelName = isChecked('tunnel-id-'+idx);
if (tunnelName)
{
tdString = val;
}
} );
if (tdString) {
constraintsUpdateDialog(tdString);
} else {
$log.debug("No tunnel id is selected.");
}
$log.debug('Dialog OK button clicked');
}
tds.openDialog()
.setTitle('Available LSPs with selected device')
.addContent(createUserTextUpdate(data))
.addOkChained(dOkUpdate, 'GOTO Selection of constraints')
.addCancel(dClose, 'Close')
.bindKeys();
}
function constraintsUpdateDialog(tunnelId) {
// invoked when the OK button is pressed on this dialog
function dOkUpdateEvent() {
$log.debug('Select constraints for update path Dialog OK button pressed');
if (d3.select("#band-kpbs-val").property("checked")) {
var bandWidth = isChecked('update-band-width-box'),
bandValue = null,
bandType = null;
if (bandWidth) {
bandValue = d3.select('#update-band-width-value');
if (isChecked('update-band-kpbs-val')) {
bandType = 'kbps';
} else if (d3.select('#band-mpbs-val').property("checked")) {
} else if (isChecked('update-band-mpbs-val')) {
bandType = 'mbps';
}
}
var costType = d3.select('#pce-cost-type').property("checked");
var costTypeVal = null;
var costType = isChecked('update-pce-cost-type'),
costTypeVal = null;
if (costType) {
if (isChecked('update-pce-cost-type-igp')) {
costTypeVal = 'igp';
} else if (isChecked('update-pce-cost-type-te')) {
costTypeVal = 'te';
}
}
wss.sendEvent(updatePathmsg, {
bw: bandValue,
ctype: costTypeVal,
tunnelname: tunnelId
});
flash.flash('update path message');
}
tds.openDialog()
.setTitle('Select constraints for update path')
.addContent(createUserTextUpdatePathEvent())
.addCancel()
.addOk(dOkUpdateEvent, 'Update Path') // NOTE: NOT the "chained" version!
.bindKeys();
}
function showTunnelInformationRemove(data) {
wss.unbindHandlers(handlerMapRem);
tunnelNameDataRemove = data;
tds.openDialog()
.setTitle('Available Tunnels for remove')
.addContent(createUserTextRemove(data))
.addOk(dOkRemove, 'Remove')
.addCancel(dClose, 'Close')
.bindKeys();
}
//setup path
function setMode() {
function dOk() {
var bandWidth = isChecked('band-width-box'),
bandValue = null,
bandType = null;
if (bandWidth) {
bandValue = getCheckedValue('band-width-value');
if (isChecked('band-kpbs-val')) {
bandType = 'kbps';
} else if (isChecked('band-mpbs-val')) {
bandType = 'mbps';
}
}
var costType = isChecked('pce-cost-type'),
costTypeVal = null;
if (d3.select("#pce-cost-type-igp").property("checked")) {
if (costType) {
if (isChecked('pce-cost-type-igp')) {
costTypeVal = 'igp';
} else if (d3.select('#pce-cost-type-te').property("checked")) {
} else if (isChecked('pce-cost-type-te')) {
costTypeVal = 'te';
}
}
var lspType = d3.select('#pce-lsp-type').property("checked");
var lspTypeVal = null;
var lspType = isChecked('pce-lsp-type'),
lspTypeVal = null;
if (lspType) {
if (d3.select("#pce-lsp-type-cr").property("checked")) {
if (isChecked('pce-lsp-type-cr')) {
lspTypeVal = 'cr';
} else if (d3.select('#pce-lsp-type-srbe').property("checked")) {
} else if (isChecked('pce-lsp-type-srbe')) {
lspTypeVal = 'srbe';
} else if (d3.select('#pce-lsp-type-srte').property("checked")) {
} else if (isChecked('pce-lsp-type-srte')) {
lspTypeVal = 'srte';
}
}
//TBD: Read the user inputs and need to send the event for calculating the path based on constrainsts.
// TBD: Need to read IGP cost type and LSP type.
//wss.sendEvent(setModemsg);
//flash.flash('creat path message');
wss.sendEvent(setPathmsg, {
bw: bandValue,
bwtype: bandType,
ctype: costTypeVal,
lsptype: lspTypeVal,
tunnelname: getCheckedValue('pce-tunnel-name-id')
});
flash.flash('create path message');
$log.debug('Dialog OK button clicked');
}
function dClose() {
$log.debug('Dialog Close button clicked (or Esc pressed)');
tds.openDialog()
.setTitle('constraints selection')
.addContent(createUserText())
.addOk(dOk, 'OK')
.addCancel(dClose, 'Close')
.bindKeys();
}
function createUserText() {
var content = ds.createDiv();
var form = content.append('form');
var p = form.append('p');
function updatePath(node) {
//Add the bandwidth related inputs.
p.append('input').attr({
id: 'band-width-box',
type: 'checkbox',
name: 'band-width-name'
});
p.append('span').text('Band Width');
p.append('br');
p.append('input').attr({
id: 'band-width-value',
type: 'number',
name: 'band-width-value-name'
});
p.append('input').attr({
id: 'band-kpbs-val',
type: 'radio',
name: 'pce-band-type'
wss.sendEvent(updatePathmsgQuery, {
srid: node[0],
dsid: node[1]
});
p.append('span').text('kpbs');
p.append('input').attr({
id: 'band-mpbs-val',
type: 'radio',
name: 'pce-band-type'
});
p.append('span').text('mpbs');
p.append('br');
//Add the cost type related inputs.
p.append('input').attr({
id: 'pce-cost-type',
type: 'checkbox',
name: 'pce-cost-type-name'
});
p.append('span').text('Cost Type');
p.append('br');
p.append('input').attr({
id: 'pce-cost-type-igp',
type: 'radio',
name: 'pce-cost-type-valname'
});
p.append('span').text('IGP');
p.append('input').attr({
id: 'pce-cost-type-te',
type: 'radio',
name: 'pce-cost-type-valname'
});
p.append('span').text('TE');
p.append('br');
handlerMap[showTunnelInfoMsg] = showTunnelInformation;
wss.bindHandlers(handlerMap);
//Add the LSP type related inputs.
p.append('input').attr({
id: 'pce-lsp-type',
type: 'checkbox',
name: 'pce-lsp-type-name'
});
p.append('span').text('Lsp Type');
p.append('br');
p.append('input').attr({
id: 'pce-lsp-type-cr',
type: 'radio',
name: 'pce-lsp-type-valname'
});
p.append('span').text('CR');
p.append('input').attr({
id: 'pce-lsp-type-srbe',
type: 'radio',
name: 'pce-lsp-type-valname'
});
p.append('span').text('SR BE');
p.append('input').attr({
id: 'pce-lsp-type-srte',
type: 'radio',
name: 'pce-lsp-type-valname'
flash.flash('update path message');
}
function dOkRemove() {
tunnelNameDataRemove.a.forEach( function (val, idx) {
var tunnelNameVal = isChecked('tunnel-id-remove-'+idx);
if (tunnelNameVal) {
wss.sendEvent(remPathmsg, {
tunnelid: val
});
p.append('span').text('SR TE');
}
} );
return content;
flash.flash('remove path message');
}
function setMode() {
tds.openDialog()
.setTitle('constraints user')
.addContent(createUserText())
.addOk(dOk, 'OK')
.addCancel(dClose, 'Close')
.bindKeys();
function remPath(node) {
wss.sendEvent(remPathmsgQuery, {
srid: node[0],
dsid: node[1]
});
handlerMapRem[showTunnelInfoRemoveMsg] = showTunnelInformationRemove;
wss.bindHandlers(handlerMapRem);
}
function queryTunnelDisplay() {
wss.sendEvent(queryDisplayTunnelMsg);
}
// === ---------------------------
// === Module Factory Definition
......@@ -227,8 +407,10 @@
setSrc: setSrc,
setDst: setDst,
clear: clear,
setMode: setMode
setMode: setMode,
updatePath: updatePath,
remPath: remPath,
queryTunnelDisplay: queryTunnelDisplay
};
}]);
}());
......
......@@ -34,7 +34,6 @@
glyphId: 'topo',
tooltip: 'PCE web Topo Overlay',
activate: function () {
$log.debug("PCE web topology overlay ACTIVATED");
},
......@@ -112,11 +111,32 @@
},
1: {
cb: function () {
pps.setMode("shortest");
pps.setMode();
},
tt: 'Setup path',
gid: 'plus'
},
2: {
cb: function () {
pps.updatePath(selection);
},
tt: 'Select constraints for LSP',
tt: 'Update path',
gid: '*jp'
},
3: {
cb: function () {
pps.remPath(selection);
},
tt: 'Remove path',
gid: 'minus'
},
4: {
cb: function () {
pps.queryTunnelDisplay();
},
tt: 'Show Tunnels',
gid: 'checkMark'
},
0: {
cb: function () {
pps.clear();
......@@ -126,7 +146,7 @@
},
_keyOrder: [
'openBracket', 'closeBracket', '1', '0'
'openBracket', 'closeBracket', '1', '2', '3', '4', '0'
]
},
hooks: {
......@@ -145,6 +165,9 @@
},
single: function (data) {
selectionCallback(data);
},
multi: function (selectOrder) {
selectionCallback(selectOrder);
}
}
};
......