[ONOS-4159] PCE Web GUI implementation:src and dst glymphs optimization
Change-Id: I6fb0cfb15a8a88590c69dccdf61ff02537769890
(cherry picked from commit 34ffe4b6a69199360d2766dfea5cddb5ca235807)
diff --git a/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovMessageHandler.java b/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovMessageHandler.java
index 72f0118..16ce224 100644
--- a/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovMessageHandler.java
+++ b/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovMessageHandler.java
@@ -109,8 +109,7 @@
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 @@
protected Collection<RequestHandler> createRequestHandlers() {
return ImmutableSet.of(
new ClearHandler(),
- new SetSrcHandler(),
- new SetDstHandler(),
new SetPathHandler(),
new UpdatePathQueryHandler(),
new UpdatePathHandler(),
@@ -173,51 +170,6 @@
}
/**
- * 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 @@
@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 @@
/**
* 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 @@
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 @@
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 @@
* 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 @@
*
* @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 @@
/**
* 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 @@
private void findTunnelAndHighlights() {
Collection<Tunnel> tunnelSet = null;
tunnelSet = tunnelService.queryTunnel(MPLS);
- for (Tunnel tunnel : tunnelSet) {
- if (tunnel.path() == null) {
- log.error("path does not exist");
- return;
- }
- paths.add(tunnel.path());
- }
-
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());
+ }
+
ImmutableSet.Builder<Link> builder = ImmutableSet.builder();
allPathLinks = buildPaths(builder).build();
- hilightAndSendPaths();
+ hilightAndSendPaths(highlights);
}
}
diff --git a/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovOverlay.java b/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovOverlay.java
index 044b7a2..30b26cd 100644
--- a/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovOverlay.java
+++ b/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovOverlay.java
@@ -28,9 +28,7 @@
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 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 @@
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 @@
return map;
}
-
- @Override
- public void modifyHostDetails(PropertyPanel pp, HostId hostId) {
- pp.addButton(SRC_BUTTON).addButton(DST_BUTTON);
- }
}
diff --git a/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopov.css b/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopov.css
index dcd4bcb..705f891 100644
--- a/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopov.css
+++ b/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopov.css
@@ -1 +1,4 @@
-/* css for sample app topology overlay */
\ No newline at end of file
+/* css for PCE web app topology overlay */
+.radioButtonSpace {
+ margin-left:20px;
+}
diff --git a/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovDemo.js b/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovDemo.js
index 586ebea..bf7723d 100644
--- a/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovDemo.js
+++ b/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovDemo.js
@@ -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,
diff --git a/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovOverlay.js b/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovOverlay.js
index 72dd1ef..b10b46a 100644
--- a/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovOverlay.js
+++ b/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovOverlay.js
@@ -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: {