홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Mahesh Raju-Huawei
Committed by Gerrit Code Review
34ffe4b6 1 parent 37393f56

[ONOS-4159] PCE Web GUI implementation:src and dst glymphs optimization 

Change-Id: I6fb0cfb15a8a88590c69dccdf61ff02537769890
Inline Side-by-side
Showing 5 changed files with 75 additions and 157 deletions
......@@ -109,8 +109,7 @@ public class PceWebTopovMessageHandler extends UiMessageHandler {
private Set<Link> allPathLinks;
private int highlightDelay;
private ElementId src, dst;
private String srcType, dstType;
private List<Path> paths;
private List<Path> paths = new LinkedList<>();
private int pathIndex;
private final Logger log = LoggerFactory.getLogger(getClass());
......@@ -137,8 +136,6 @@ public class PceWebTopovMessageHandler extends UiMessageHandler {
protected Collection<RequestHandler> createRequestHandlers() {
return ImmutableSet.of(
new ClearHandler(),
new SetSrcHandler(),
new SetDstHandler(),
new SetPathHandler(),
new UpdatePathQueryHandler(),
new UpdatePathHandler(),
......@@ -173,51 +170,6 @@ public class PceWebTopovMessageHandler extends UiMessageHandler {
}
/**
* Handles the 'set source' event received from the client.
*/
private final class SetSrcHandler extends RequestHandler {
public SetSrcHandler() {
super(PCEWEB_SET_SRC);
}
@Override
public void process(long sid, ObjectNode payload) {
String id = string(payload, ID);
src = elementId(id);
srcType = string(payload, TYPE);
if (src.equals(dst)) {
dst = null;
}
sendMessage(TopoJson.highlightsMessage(addBadge(new Highlights(),
srcType, src.toString(), SRC)));
}
}
/**
* Handles the 'set destination' event received from the client.
*/
private final class SetDstHandler extends RequestHandler {
public SetDstHandler() {
super(PCEWEB_SET_DST);
}
@Override
public void process(long sid, ObjectNode payload) {
String id = string(payload, ID);
dst = elementId(id);
dstType = string(payload, TYPE);
if (src.equals(dst)) {
src = null;
}
sendMessage(TopoJson.highlightsMessage(addBadge(new Highlights(),
dstType, dst.toString(), DST)));
}
}
/**
* Handles the 'path calculation' event received from the client.
*/
private final class SetPathHandler extends RequestHandler {
......@@ -228,6 +180,14 @@ public class PceWebTopovMessageHandler extends UiMessageHandler {
@Override
public void process(long sid, ObjectNode payload) {
String srcId = string(payload, SRCID);
src = elementId(srcId);
String dstId = string(payload, DSTID);
dst = elementId(dstId);
if (src.equals(dst)) {
src = null;
}
String bandWidth = string(payload, BANDWIDTH);
String bandWidthType = string(payload, BANDWIDTHTYPE);
String costType = string(payload, COSTTYPE);
......@@ -555,7 +515,7 @@ public class PceWebTopovMessageHandler extends UiMessageHandler {
/**
* Handles the highlights of selected path.
*/
private void hilightAndSendPaths() {
private void hilightAndSendPaths(Highlights highlights) {
PceWebLinkMap linkMap = new PceWebLinkMap();
allPathLinks.forEach(linkMap::add);
Set<Link> selectedPathLinks;
......@@ -563,7 +523,6 @@ public class PceWebTopovMessageHandler extends UiMessageHandler {
selectedPathLinks = paths.isEmpty() ?
ImmutableSet.of() : ImmutableSet.copyOf(paths.get(pathIndex).links());
Highlights highlights = new Highlights();
if (highlightDelay > 0) {
highlights.delay(highlightDelay);
}
......@@ -571,12 +530,6 @@ public class PceWebTopovMessageHandler extends UiMessageHandler {
plink.computeHilight(selectedPathLinks, allPathLinks);
highlights.add(plink.highlight(null));
}
if (src != null) {
highlights = addBadge(highlights, srcType, src.toString(), SRC);
}
if (dst != null) {
highlights = addBadge(highlights, dstType, dst.toString(), DST);
}
sendMessage(TopoJson.highlightsMessage(highlights));
}
......@@ -584,17 +537,13 @@ public class PceWebTopovMessageHandler extends UiMessageHandler {
* Handles the addition of badge and highlights.
*
* @param highlights highlights
* @param type device type
* @param elemId device to be add badge
* @param src device to be add badge
* @return
*/
private Highlights addBadge(Highlights highlights, String type,
private Highlights addBadge(Highlights highlights,
String elemId, String src) {
if (ROUTER.equals(type)) {
highlights = addDeviceBadge(highlights, elemId, src);
}
highlights = addDeviceBadge(highlights, elemId, src);
return highlights;
}
......@@ -603,7 +552,7 @@ public class PceWebTopovMessageHandler extends UiMessageHandler {
*
* @param h highlights
* @param elemId device to be add badge
* @param type device type
* @param type device badge value
* @return highlights
*/
private Highlights addDeviceBadge(Highlights h, String elemId, String type) {
......@@ -616,7 +565,7 @@ public class PceWebTopovMessageHandler extends UiMessageHandler {
/**
* Handles the node badge add and highlights.
*
* @param type device type
* @param type device badge value
* @return badge of given node
*/
private NodeBadge createBadge(String type) {
......@@ -656,21 +605,35 @@ public class PceWebTopovMessageHandler extends UiMessageHandler {
private void findTunnelAndHighlights() {
Collection<Tunnel> tunnelSet = null;
tunnelSet = tunnelService.queryTunnel(MPLS);
if (tunnelSet.size() == 0) {
log.warn("Tunnel does not exist");
return;
}
paths.removeAll(paths);
Highlights highlights = new Highlights();
for (Tunnel tunnel : tunnelSet) {
if (tunnel.path() == null) {
log.error("path does not exist");
return;
}
Link firstLink = tunnel.path().links().get(0);
if (firstLink != null) {
if (firstLink.src() != null) {
highlights = addBadge(highlights, firstLink.src().deviceId().toString(), SRC);
}
}
Link lastLink = tunnel.path().links().get(tunnel.path().links().size() - 1);
if (lastLink != null) {
if (lastLink.dst() != null) {
highlights = addBadge(highlights, lastLink.dst().deviceId().toString(), DST);
}
}
paths.add(tunnel.path());
}
if (tunnelSet.size() == 0) {
log.warn("Tunnel does not exist");
return;
}
ImmutableSet.Builder<Link> builder = ImmutableSet.builder();
allPathLinks = buildPaths(builder).build();
hilightAndSendPaths();
hilightAndSendPaths(highlights);
}
}
......
......@@ -28,9 +28,7 @@ import org.onosproject.net.Device;
import org.onosproject.net.DeviceId;
import org.onosproject.net.Link;
import org.onosproject.ui.UiTopoOverlay;
import org.onosproject.ui.topo.ButtonId;
import org.onosproject.ui.topo.PropertyPanel;
import org.onosproject.net.HostId;
import org.onosproject.net.device.DeviceService;
import org.onosproject.net.link.LinkEvent;
import org.onosproject.net.resource.ContinuousResource;
......@@ -56,8 +54,6 @@ public class PceWebTopovOverlay extends UiTopoOverlay {
public static final String ASBR_BIT = "externalBit";
public static final String TE_METRIC = "teCost";
private static final ButtonId SRC_BUTTON = new ButtonId("src");
private static final ButtonId DST_BUTTON = new ButtonId("dst");
/**
* Initialize the overlay ID.
*/
......@@ -80,8 +76,6 @@ public class PceWebTopovOverlay extends UiTopoOverlay {
pp.removeAllProps();
pp.addButton(SRC_BUTTON).addButton(DST_BUTTON);
pp.removeButtons(CoreButtons.SHOW_PORT_VIEW)
.removeButtons(CoreButtons.SHOW_GROUP_VIEW)
.removeButtons(CoreButtons.SHOW_METER_VIEW);
......@@ -156,9 +150,4 @@ public class PceWebTopovOverlay extends UiTopoOverlay {
return map;
}
@Override
public void modifyHostDetails(PropertyPanel pp, HostId hostId) {
pp.addButton(SRC_BUTTON).addButton(DST_BUTTON);
}
}
......
/* css for sample app topology overlay */
\ No newline at end of file
/* css for PCE web app topology overlay */
.radioButtonSpace {
margin-left:20px;
}
......
......@@ -75,11 +75,21 @@
p = form.append('p');
function addAttribute(name, id, nameField, type) {
p.append('input').attr({
type: type,
name: name,
id: id
});
if (type == 'radio') {
p.append('input').attr({
type: type,
name: name,
id: id,
class: 'radioButtonSpace'
});
} else {
p.append('input').attr({
type: type,
name: name,
id: id
});
}
p.append('span').text(nameField);
p.append('br');
......@@ -135,11 +145,21 @@
p = form.append('p');
function addAttribute(name, id, nameField, type) {
p.append('input').attr({
type: type,
name: name,
id: id
});
if (type == 'radio') {
p.append('input').attr({
type: type,
name: name,
id: id,
class: 'radioButtonSpace'
});
}
else {
p.append('input').attr({
type: type,
name: name,
id: id
});
}
p.append('span').text(nameField);
p.append('br');
......@@ -278,7 +298,7 @@
}
//setup path
function setMode() {
function setMode(node) {
function dOk() {
var bandWidth = isChecked('band-width-box'),
......@@ -320,6 +340,8 @@
}
wss.sendEvent(setPathmsg, {
srid: node[0],
dsid: node[1],
bw: bandValue,
bwtype: bandType,
ctype: costTypeVal,
......
......@@ -47,71 +47,19 @@
// They can be referenced (from this overlay) as '*src'
// That is, the '*' prefix stands in for 'PCE-web-overlay-'
glyphs: {
src: {
vb: '0 0 110 110',
d: 'M28.7,59.3 M14.9,53 M8.7,39 M32.4,92.5H25l-0.2-3.6' +
'c-0.5-9-5.4-23.9-12.9-33.5c-5.2-6.6-7-12.8-7-16.3c0-13.3,10.7-24,23.8-24c13.1,0,23.8,10.8,23.8,24c0,3.5-1.8,9.7-7,16.3' +
'C38,65,33.1,80,32.6,88.9L32.4,92.5z M27.9,89.5h1.7l0-0.7c0.5-9.4,5.7-25.2,13.5-35.2c4.7-6,6.4-11.4,6.4-14.5' +
'c0-11.6-9.3-21-20.8-21C17.3,18,7.9,27.5,7.9,39c0,3,1.7,8.4,6.4,14.5c7.9,10.1,13.1,25.8,13.5,35.2L27.9,89.5z M28.7,83.2' +
'M28.6,29.8c-4.7,0-8.5,3.8-8.5,8.5c0,4.7,3.8,8.5,8.5,8.5s8.5-3.8,8.5-8.5C37.1,33.6,33.3,29.8,28.6,29.8z M89.6,47 M89.6,29.5' +
'c-0.1,3.1-0.1,12.8,0,17c0.1,4.2,14.1-5.5,13.9-8.5C103.4,35.1,89.6,25.6,89.6,29.5z M51,38.1L89.5,38 M89.5,39.5l0-3L51,36.5l0,3' +
'L89.5,39.5z'
},
dst: {
vb: '0 0 110 110',
d: 'M80.3,59.8 M85.8,92.5h-7.2L78.4,89c-0.4-8.8-5.2-23.6-12.3-33' +
'c-4.9-6.5-6.7-12.5-6.7-16c0-13,10.2-23.7,22.7-23.7c12.5,0,22.7,10.6,22.7,23.7c0,3.5-1.8,9.5-6.7,16C91.2,65.4,86.4,80.1,86,89' +
'L85.8,92.5z M81.4,89.5H83l0-0.7c0.5-9.3,5.4-24.8,12.9-34.7c4.5-5.9,6.1-11.2,6.1-14.2c0-11.4-8.9-20.7-19.8-20.7' +
'c-10.9,0-19.8,9.3-19.8,20.7c0,3,1.6,8.3,6.1,14.2C76,64,80.9,79.5,81.4,88.8L81.4,89.5z M82.1,30.8c-4.5,0-8.1,3.7-8.1,8.4' +
's3.6,8.4,8.1,8.4c4.5,0,8.1-3.7,8.1-8.4S86.6,30.8,82.1,30.8z M47.2,47.5 M45.2,30.8c-0.1,3.1-0.1,12.6,0,16.7' +
'c0.1,4.1,13.4-5.4,13.3-8.4C58.4,36.2,45.2,26.9,45.2,30.8z M45.2,39.1L6.7,39.2 M45.2,40.6l0-3L6.7,37.7l0,3L45.2,40.6z'
},
jp: {
jp: {
vb: '0 0 110 110',
d: 'M84.3,89.3L58.9,64.2l-1.4,1.4L83,90.7L84.3,89.3z M27,7.6H7.4v19.2H27V7.6z' +
'M59.3,47.1H39.8v19.2h19.5V47.1z M102.1,79.5H82.6v19.2h19.5V79.5z M41.7,47.6L19,25.1l-1.2,1.2l22.7,22.5L41.7,47.6z'
},
},
// detail panel button definitions
buttons: {
src: {
gid: '*src',
tt: 'Set source node',
cb: function (data) {
$log.debug('Set src action invoked with data:', data);
pps.setSrc(selection);
}
},
dst: {
gid: '*dst',
tt: 'Set destination node',
cb: function (data) {
$log.debug('Set dst action invoked with data:', data);
pps.setDst(selection);
}
}
},
// Key bindings for PCE web overlay buttons
// Key bindings for PCE web overlay buttons
// NOTE: fully qual. button ID is derived from overlay-id and key-name
keyBindings: {
openBracket: {
cb: function () {
pps.setSrc(selection);
},
tt: 'Set source node',
gid: '*src'
},
closeBracket: {
cb: function () {
pps.setDst(selection);
},
tt: 'Set destination node',
gid: '*dst'
},
1: {
cb: function () {
pps.setMode();
pps.setMode(selection);
},
tt: 'Setup path',
gid: 'plus'
......@@ -137,16 +85,9 @@
tt: 'Show Tunnels',
gid: 'checkMark'
},
0: {
cb: function () {
pps.clear();
},
tt: 'Clear source and destination',
gid: 'xMark'
},
_keyOrder: [
'openBracket', 'closeBracket', '1', '2', '3', '4', '0'
'1', '2', '3', '4'
]
},
hooks: {
......