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

Change-Id: I6fb0cfb15a8a88590c69dccdf61ff02537769890

[ONOS-4159] PCE Web GUI implementation:src and dst glymphs optimization
Change-Id: I6fb0cfb15a8a88590c69dccdf61ff02537769890
Mahesh Raju-Huawei · Gerrit Code Review
Commit 34ffe4b6a69199360d2766dfea5cddb5ca235807 34ffe4b6 1 parent 37393f56
Showing 5 changed files with 75 additions and 157 deletions
apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovMessageHandler.java
apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovOverlay.java
apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopov.css
apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovDemo.js
apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovOverlay.js
--- a/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovMessageHandler.java
View file @34ffe4b
+++ b/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovMessageHandler.java
View file @34ffe4b
@@ -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 = new LinkedList<>();
-    private List<Path> paths;
     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);
     }
 }
--- a/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovOverlay.java
View file @34ffe4b
+++ b/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovOverlay.java
View file @34ffe4b
@@ -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);
-    }
 }
--- a/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopov.css
View file @34ffe4b
+++ b/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopov.css
View file @34ffe4b
-/* css for sample app topology overlay  */
\ No newline at end of file
+/* css for PCE web app topology overlay  */
+.radioButtonSpace {
+    margin-left:20px;
+}
--- a/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovDemo.js
View file @34ffe4b
+++ b/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovDemo.js
View file @34ffe4b
@@ -75,11 +75,21 @@
             p = form.append('p');
         function addAttribute(name, id, nameField, type) {
-            p.append('input').attr({
+            if (type == 'radio') {
-                type: type,
+                p.append('input').attr({
-                name: name,
+                    type: type,
-                id: id
+                    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({
+            if (type == 'radio') {
-                type: type,
+                p.append('input').attr({
-                name: name,
+                    type: type,
-                id: id
+                    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,
--- a/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovOverlay.js
View file @34ffe4b
+++ b/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovOverlay.js
View file @34ffe4b
@@ -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: {
+             jp: {
-                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: {
                 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
+       // Key bindings for PCE web overlay buttons
-        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
         // 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: {