CherryPick(1.6) PCE WEB GUI defect fixes

Change-Id: I76e5323e382b6d2f76b7642009f866e6ba2334f2
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 1aa0f1d..7c197d2 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
@@ -28,8 +28,6 @@
 import org.onosproject.net.HostId;
 import org.onosproject.net.Link;
 import org.onosproject.net.Path;
-import org.onosproject.net.topology.TopologyEvent;
-import org.onosproject.net.topology.TopologyListener;
 import org.onosproject.net.topology.TopologyService;
 import org.onosproject.ui.RequestHandler;
 import org.onosproject.ui.UiConnection;
@@ -51,6 +49,7 @@
 import org.slf4j.LoggerFactory;
 import org.onosproject.incubator.net.tunnel.IpTunnelEndPoint;
 import org.onosproject.incubator.net.tunnel.Tunnel;
+import static org.onosproject.incubator.net.tunnel.Tunnel.State.ACTIVE;
 import org.onosproject.incubator.net.tunnel.TunnelEndPoint;
 import org.onosproject.incubator.net.tunnel.TunnelEvent;
 import org.onosproject.incubator.net.tunnel.TunnelId;
@@ -82,6 +81,8 @@
     private static final String PCEWEB_SHOW_TUNNEL_REMOVE = "pceTopovShowTunnelsRem";
     private static final String PCEWEB_TUNNEL_UPDATE_INFO = "updatePathmsgInfo";
     private static final String PCEWEB_TUNNEL_UPDATE_INFO_REPLY = "pceTopovShowTunnelsUpdate";
+    private static final String PCEWEB_TUNNEL_QUERY_INFO = "pceTopovShowTunnelsQuery";
+    private static final String PCEWEB_TUNNEL_QUERY_INFO_SHOW = "pceTopovshowTunnelHighlightMsg";
     private static final String DST = "DST";
     private static final String SRC = "SRC";
     private static final String BANDWIDTH = "bw";
@@ -117,7 +118,6 @@
     private int pathIndex;
 
     private final Logger log = LoggerFactory.getLogger(getClass());
-    private final TopologyListener topologyListener = new InternalTopologyListener();
     private final TunnelListener tunnelListener = new InnerPceWebTunnelListener();
 
     protected TopologyService topologyService;
@@ -128,11 +128,9 @@
     public void init(UiConnection connection, ServiceDirectory directory) {
 
         super.init(connection, directory);
-        topologyService = directory.get(TopologyService.class);
         tunnelService = directory.get(TunnelService.class);
         pceService = directory.get(PceService.class);
         deviceService = directory.get(DeviceService.class);
-        topologyService.addListener(topologyListener);
         tunnelService.addListener(tunnelListener);
     }
 
@@ -146,12 +144,12 @@
                 new RemovePathQueryHandler(),
                 new RemovePathHandler(),
                 new UpdatePathInfoHandler(),
-                new ShowTunnelHandler());
+                new ShowTunnelHandler(),
+                new ShowTunnelHighlight());
     }
 
     @Override
     public void destroy() {
-        topologyService.removeListener(topologyListener);
         tunnelService.removeListener(tunnelListener);
         super.destroy();
     }
@@ -247,7 +245,10 @@
             ArrayNode arrayNode = arrayNode();
             for (Tunnel tunnel : tunnelSet) {
                 if (tunnel.type() == MPLS) {
-                    arrayNode.add(tunnel.tunnelId().toString());
+                    if (tunnel.state().equals(ACTIVE)) {
+                        arrayNode.add(tunnel.tunnelId().toString());
+                        arrayNode.add(tunnel.tunnelName().toString());
+                    }
                 }
             }
 
@@ -295,6 +296,7 @@
 
             if (tunnelIdStr == null) {
                 log.error("PCE update path is failed.");
+                return;
             }
 
             if (tunnelIdStr.equals(STRING_NULL)) {
@@ -354,7 +356,10 @@
 
             for (Tunnel tunnel : tunnelSet) {
                 if (tunnel.type() == MPLS) {
-                    arrayNode.add(tunnel.tunnelId().toString());
+                    if (tunnel.state().equals(ACTIVE)) {
+                        arrayNode.add(tunnel.tunnelId().toString());
+                        arrayNode.add(tunnel.tunnelName().toString());
+                    }
                 }
             }
 
@@ -395,7 +400,56 @@
 
         @Override
         public void process(long sid, ObjectNode payload) {
-            findTunnelAndHighlights();
+            ObjectNode result = objectNode();
+            ArrayNode arrayNode = arrayNode();
+            Collection<Tunnel> tunnelSet = null;
+
+            tunnelSet = tunnelService.queryTunnel(MPLS);
+            for (Tunnel tunnel : tunnelSet) {
+                if (tunnel.state().equals(ACTIVE)) {
+                    arrayNode.add(tunnel.tunnelId().toString());
+                    arrayNode.add(tunnel.tunnelName().toString());
+                }
+            }
+
+            result.putArray(BUFFER_ARRAY).addAll(arrayNode);
+            sendMessage(PCEWEB_TUNNEL_QUERY_INFO, sid, result);
+        }
+    }
+
+    /**
+     * Handles the 'show the existed tunnels' event received from the client.
+     */
+    private final class ShowTunnelHighlight extends RequestHandler {
+
+        public ShowTunnelHighlight() {
+            super(PCEWEB_TUNNEL_QUERY_INFO_SHOW);
+        }
+
+        @Override
+        public void process(long sid, ObjectNode payload) {
+            String tunnelIdStr = string(payload, TUNNEL_ID);
+
+            if (tunnelIdStr == null) {
+                log.error("Tunnel Id is NULL.");
+                return;
+            }
+
+            if (tunnelIdStr.equals(STRING_NULL)) {
+                log.error("Tunnel Id is NULL.");
+                return;
+            }
+
+            if (pceService == null) {
+                log.error("PCE service is not active");
+                return;
+            }
+
+            TunnelId tunnelId = TunnelId.valueOf(tunnelIdStr);
+            Tunnel tunnel = tunnelService.queryTunnel(tunnelId);
+            if (tunnel != null) {
+                highlightsForTunnel(tunnel);
+            }
         }
     }
 
@@ -458,7 +512,7 @@
      * @param bandWidth bandWidth
      * @param bandWidthType is the kbps or mbps
      * @param costType is igp or te
-     * @param tunnelName tunnel id
+     * @param tunnelIdStr tunnel id
      */
     private void findAndSendPathsUpdate(String bandWidth, String bandWidthType, String costType, String tunnelIdStr) {
         if (tunnelIdStr != null) {
@@ -489,7 +543,7 @@
     /**
      * Handles the remove path and highlights the paths if existed.
      *
-     * @param tunnelIdName tunnelId
+     * @param tunnelIdStr tunnelId
      */
     private void findAndSendPathsRemove(String tunnelIdStr) {
         if (tunnelIdStr != null) {
@@ -519,7 +573,6 @@
      * @param bandWidth bandWidth
      * @param bandWidthType is the kbps or mbps
      * @param costType is igp or te
-     * @param listConstrnt list of constraints
      * @return
      */
     private List<Constraint> addBandwidthCostTypeConstraints(String bandWidth,
@@ -622,16 +675,6 @@
     }
 
     /**
-     * Handles the event of topology listeners.
-     */
-    private class InternalTopologyListener implements TopologyListener {
-        @Override
-        public void event(TopologyEvent event) {
-            findTunnelAndHighlights();
-        }
-    }
-
-    /**
      * Handles the event of tunnel listeners.
      */
     private class InnerPceWebTunnelListener implements TunnelListener {
@@ -639,7 +682,7 @@
         public void event(TunnelEvent event) {
             Tunnel tunnel = event.subject();
             if (tunnel.type() == MPLS) {
-                findTunnelAndHighlights();
+                highlightsForTunnel(tunnel);
             }
         }
     }
@@ -664,6 +707,11 @@
                 sendMessage(TopoJson.highlightsMessage(highlights));
                 return;
             }
+            if (!tunnel.state().equals(ACTIVE)) {
+                log.debug("Tunnel state is not active");
+                sendMessage(TopoJson.highlightsMessage(highlights));
+                return;
+            }
             Link firstLink = tunnel.path().links().get(0);
             if (firstLink != null) {
                 if (firstLink.src() != null) {
@@ -683,4 +731,40 @@
         allPathLinks = buildPaths(builder).build();
         hilightAndSendPaths(highlights);
     }
+
+    /**
+     * Handles the event of topology listeners.
+     */
+    private void highlightsForTunnel(Tunnel tunnel) {
+        Highlights highlights = new Highlights();
+        paths.removeAll(paths);
+        if (tunnel.path() == null) {
+            log.error("path does not exist");
+            sendMessage(TopoJson.highlightsMessage(highlights));
+            return;
+        }
+        if (!tunnel.state().equals(ACTIVE)) {
+            log.debug("Tunnel state is not active");
+            sendMessage(TopoJson.highlightsMessage(highlights));
+            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(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 30b26cd..ef1c40a 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
@@ -21,24 +21,24 @@
 import java.util.Map;
 import java.util.Set;
 
-import org.onlab.util.Bandwidth;
 import org.onosproject.net.AnnotationKeys;
 import org.onosproject.net.Annotations;
 import org.onosproject.net.Device;
 import org.onosproject.net.DeviceId;
 import org.onosproject.net.Link;
+import org.onosproject.net.resource.ContinuousResource;
+import org.onosproject.net.resource.ResourceService;
+import org.onosproject.net.resource.Resource;
+import org.onosproject.net.resource.DiscreteResource;
+import org.onosproject.net.resource.Resources;
 import org.onosproject.ui.UiTopoOverlay;
 import org.onosproject.ui.topo.PropertyPanel;
 import org.onosproject.net.device.DeviceService;
 import org.onosproject.net.link.LinkEvent;
-import org.onosproject.net.resource.ContinuousResource;
-import org.onosproject.net.resource.DiscreteResource;
-import org.onosproject.net.resource.Resource;
-import org.onosproject.net.resource.ResourceService;
-import org.onosproject.net.resource.Resources;
 import org.onosproject.ui.topo.TopoConstants.CoreButtons;
 import org.onosproject.cli.AbstractShellCommand;
-
+import org.onlab.packet.Ip4Address;
+import org.onlab.packet.IpAddress;
 /**
  * PCE WEB topology overlay.
  */
@@ -49,11 +49,16 @@
     private static final String MY_TITLE = "Device details";
 
     public static final String AS_NUMBER = "asNumber";
-    public static final String DOMAIN_IDENTIFIER = "domainIdentifier";
+    public static final String LSR_ID = "lsrId";
     public static final String ABR_BIT = "abrBit";
     public static final String ASBR_BIT = "externalBit";
     public static final String TE_METRIC = "teCost";
-
+    public static final String ABR = "ABR";
+    public static final String ASBR = "ASBR";
+    public static final String ABR_ASBR = "ABR/ASBR";
+    public static final String INNER = "Inner";
+    public static final long IDENTIFIER_SET = 0x100000000L;
+    public static final long SET = 0xFFFFFFFFL;
     /**
      * Initialize the overlay ID.
      */
@@ -71,11 +76,8 @@
     public void modifyDeviceDetails(PropertyPanel pp, DeviceId deviceId) {
 
          pp.title(MY_TITLE);
-
          DeviceService deviceService = AbstractShellCommand.get(DeviceService.class);
-
          pp.removeAllProps();
-
          pp.removeButtons(CoreButtons.SHOW_PORT_VIEW)
                 .removeButtons(CoreButtons.SHOW_GROUP_VIEW)
                 .removeButtons(CoreButtons.SHOW_METER_VIEW);
@@ -85,10 +87,9 @@
             Device device = deviceService.getDevice(deviceId);
             Annotations annots = device.annotations();
 
-            String routerId = annots.value(AnnotationKeys.ROUTER_ID);
             String type = annots.value(AnnotationKeys.TYPE);
             String asNumber = annots.value(AS_NUMBER);
-            String domain = annots.value(DOMAIN_IDENTIFIER);
+            String lsrId = annots.value(LSR_ID);
             String abrStatus = annots.value(ABR_BIT);
             String asbrStatus = annots.value(ASBR_BIT);
 
@@ -96,24 +97,22 @@
                 pp.addProp("Type", type);
             }
 
-            if (routerId != null) {
-                pp.addProp("Router-ID", routerId);
-            }
-
             if (asNumber != null) {
                 pp.addProp("AS Number", asNumber);
             }
 
-            if (domain != null) {
-                pp.addProp("Domain ID", domain);
+            if (lsrId != null) {
+                pp.addProp("LSR ID", lsrId);
             }
 
-            if (abrStatus != null) {
-                pp.addProp("ABR Role", abrStatus);
-            }
-
-            if (asbrStatus != null) {
-                pp.addProp("ASBR Role", asbrStatus);
+            if (abrStatus.equals(true) && asbrStatus.equals(true)) {
+                pp.addProp("Position", ABR_ASBR);
+            } else if (abrStatus.equals(true)) {
+                pp.addProp("Position", ABR);
+            } else if (asbrStatus.equals(true)) {
+                pp.addProp("Position", ASBR);
+            } else {
+                pp.addProp("Position", INNER);
             }
         }
     }
@@ -122,30 +121,62 @@
     public Map<String, String> additionalLinkData(LinkEvent event) {
         Map<String, String> map = new HashMap<>();
         Link link = event.subject();
+        long srcPortNo;
+        long dstPortNo;
+        IpAddress ipDstAddress = null;
+        IpAddress ipSrcAddress = null;
+        String srcPort;
+        String dstPort;
+        String bandWidth;
 
-        map.put("Src port", link.src().port().toString());
-        map.put("Dst port", link.dst().port().toString());
+        srcPortNo = link.src().port().toLong();
+        if (((srcPortNo & IDENTIFIER_SET) == IDENTIFIER_SET)) {
+            srcPort = String.valueOf(srcPortNo);
+        } else {
+            ipSrcAddress = Ip4Address.valueOf((int) srcPortNo);
+            srcPort = ipSrcAddress.toString();
+        }
+
+        dstPortNo = link.dst().port().toLong();
+        if (((dstPortNo & IDENTIFIER_SET) == IDENTIFIER_SET)) {
+            dstPort = String.valueOf(dstPortNo);
+        } else {
+            ipDstAddress = Ip4Address.valueOf((int) dstPortNo);
+            dstPort = ipDstAddress.toString();
+        }
+
+        map.put("Src Address", srcPort);
+        map.put("Dst Address", dstPort);
         map.put("Te metric", link.annotations().value(TE_METRIC));
 
         ResourceService resService = AbstractShellCommand.get(ResourceService.class);
         DiscreteResource devResource = Resources.discrete(link.src().deviceId(), link.src().port()).resource();
         if (resService == null) {
-            log.warn("resource service does not exist ");
+            log.warn("resource service does not exist");
             return map;
         }
 
         if (devResource == null) {
-            log.warn("Device resources does not exist ");
+            log.warn("Device resources does not exist");
             return map;
         }
-        Set<Resource> resources = resService.getAvailableResources(devResource.id(), Bandwidth.class);
-        if (resources.isEmpty()) {
-            log.warn("Bandwidth resources does not exist ");
-            return map;
+        double regBandwidth = 0;
+        try {
+            Thread.sleep(100);
+        } catch (InterruptedException e) {
+            log.error("Exception occured while getting the bandwidth.");
+        }
+        Set<Resource> resources = resService.getRegisteredResources(devResource.id());
+        for (Resource res : resources) {
+            if (res instanceof ContinuousResource) {
+                regBandwidth = ((ContinuousResource) res).value();
+                break;
+            }
         }
 
-        if (resources.iterator().next() instanceof ContinuousResource) {
-            map.put("Bandwidth", ((ContinuousResource) resources.iterator().next()).toString());
+        if (regBandwidth != 0) {
+            bandWidth = String.valueOf(regBandwidth);
+            map.put("Bandwidth", bandWidth);
         }
 
         return map;
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 646fd43..c8b9295 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
@@ -21,7 +21,7 @@
 
     // injected refs
     var $log, fs, flash, wss, tps, ns, tds, ds;
-    var tunnelNameData, tunnelNameDataRemove, tunnelDataUpdateInfo, tunnelIdUpd;
+    var tunnelNameData, tunnelNameDataRemove, tunnelDataUpdateInfo, tunnelIdUpd, tunnelNameDataQuery;
    // constants
     var srcMessage = 'pceTopovSetSrc',
         dstMessage = 'pceTopovSetDst',
@@ -35,11 +35,15 @@
         showTunnelInfoMsg = 'pceTopovShowTunnels',
         queryDisplayTunnelMsg = 'pceTopovTunnelDisplay',
         showTunnelInfoRemoveMsg = 'pceTopovShowTunnelsRem',
-        showTunnelInfoUpdateMsg = 'pceTopovShowTunnelsUpdate';
+        showTunnelInfoUpdateMsg = 'pceTopovShowTunnelsUpdate',
+        showTunnelInfoQuery = 'pceTopovShowTunnelsQuery',
+        showTunnelHighlightMsg = 'pceTopovshowTunnelHighlightMsg';
+
     // internal state
     var currentMode = null;
     var handlerMap = {},
         handlerMapRem = {},
+        handlerMapshowQuery = {},
         handlerMapShowUpdate = {};
     // === ---------------------------
     // === Helper functions
@@ -92,6 +96,7 @@
                     id: id
                 });
             }
+
             p.append('span').text(nameField);
             p.append('br');
         }
@@ -107,13 +112,15 @@
         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-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');
-
+        p.append('span').text("Tunnel Name  *");
+        p.append('br');
+        addAttribute('pce-tunnel-name', 'pce-tunnel-name-id', null, 'text');
+        p.append('span').text("* indicates mandatory fields");
         return content;
     }
 
@@ -125,19 +132,17 @@
         p.append('span').text('Tunnel IDs');
         p.append('br');
 
-        data.a.forEach( function (val, idx) {
+        for (var idx = 0; idx < data.a.length; idx++) {
             p.append('input').attr({
                 id: 'tunnel-id-'+idx,
                 type: 'radio',
                 name: 'tunnel-id-name',
-                value: val
+                value: data.a[idx]
             });
-
-            p.append('span').text(val);
+            idx++;
+            p.append('span').text(data.a[idx]);
             p.append('br');
-
-        } );
-
+        }
         return content;
     }
 
@@ -192,7 +197,9 @@
             }
 
             if (constType == 'BW') {
-                addAttribute('band-width-name', 'update-band-width-box', 'Band Width', 'checkbox');
+                //addAttribute('band-width-name', 'update-band-width-box', 'Band Width', 'checkbox');
+                p.append('span').text('Band Width');
+                p.append('br');
                 p.append('input').attr({
                     id: 'update-band-width-value',
                     type: 'number',
@@ -211,10 +218,13 @@
                 p.append('br');
                 addAttribute('pce-band-type', 'update-band-kbps-val', 'kbps', 'radio');
                 addAttribute('pce-band-type', 'update-band-mbps-val', 'mbps', 'radio');
+                addAttribute('pce-band-type', 'update-band-none-val', 'none', 'radio');
             }
 
             if (constType == 'CT') {
-                addAttribute('pce-cost-type', 'update-pce-cost-type', 'Cost Type', 'checkbox');
+                //addAttribute('pce-cost-type', 'update-pce-cost-type', 'Cost Type', 'checkbox');
+                p.append('span').text('Cost Type');
+                p.append('br');
                 if (val == 'COST') {
                     p.append('input').attr({
                         id: 'update-pce-cost-type-igp',
@@ -226,6 +236,7 @@
                     p.append('span').text('IGP');
                     p.append('br');
                     addAttribute('pce-cost-type-value', 'update-pce-cost-type-te', 'TE', 'radio');
+                    addAttribute('pce-cost-type-value', 'update-pce-cost-type-none', 'none', 'radio');
  
                 } else {
                     addAttribute('pce-cost-type-value', 'update-pce-cost-type-igp', 'IGP', 'radio');
@@ -238,6 +249,7 @@
                     });
                     p.append('span').text('TE');
                     p.append('br');
+                    addAttribute('pce-cost-type-value', 'update-pce-cost-type-none', 'none', 'radio');
                 }
             }
         } );
@@ -251,24 +263,47 @@
             form = content.append('form'),
             p = form.append('p');
 
-        p.append('span').text('Tunnel IDs');
+        p.append('span').text('Tunnels');
         p.append('br');
 
-        data.a.forEach( function (val, idx) {
+        for (var idx = 0; idx < data.a.length; idx++) {
             p.append('input').attr({
                 id: 'tunnel-id-remove-'+idx,
                 type: 'checkbox',
                 name: 'tunnel-id-name-remove',
-                value: val
+                value: data.a[idx]
             });
-
-            p.append('span').text(val);
+            idx++;
+            p.append('span').text(data.a[idx]);
             p.append('br');
-        } );
+        }
 
         return content;
     }
 
+    function createUserTextQuery(data) {
+
+        var content = ds.createDiv(),
+            form = content.append('form'),
+            p = form.append('p');
+
+        p.append('span').text('Tunnels');
+        p.append('br');
+
+        for (var idx =0; idx < data.a.length; idx++) {
+            p.append('input').attr({
+                id: 'tunnel-id-query-'+idx,
+                type: 'radio',
+                name: 'tunnel-id-name-query',
+                value: data.a[idx]
+            });
+            idx++;
+            p.append('span').text(data.a[idx]);
+            p.append('br');
+        }
+        return content;
+    }
+
     function isChecked(cboxId) {
         return d3.select('#' + cboxId).property('checked');
     }
@@ -283,12 +318,13 @@
 
         function dOkUpdate() {
             var tdString = '' ;
-            tunnelNameData.a.forEach( function (val, idx) {
+            for (var idx = 0; idx < tunnelNameData.a.length; idx++) {
                 var tunnelName = isChecked('tunnel-id-'+idx);
                 if (tunnelName) {
-                    tdString = val;
+                    tdString = tunnelNameData.a[idx];
                 }
-            } );
+                idx++;
+            }
             //send event to server for getting the tunnel information.
             if (tdString != null) {
                 handlerMapShowUpdate[showTunnelInfoUpdateMsg] = showTunnelInfoUpdateMsgHandle;
@@ -313,31 +349,30 @@
     function dOkUpdateEvent() {
         $log.debug('Select constraints for update path Dialog OK button pressed');
 
-        var bandWidth = isChecked('update-band-width-box'),
-            bandValue = null,
+        var bandValue = null,
             bandType = null;
 
-        if (bandWidth) {
-            bandValue = getCheckedValue('update-band-width-value');
+        bandValue = getCheckedValue('update-band-width-value');
 
-            if (isChecked('update-band-kbps-val')) {
+        if (isChecked('update-band-kbps-val')) {
                     bandType = 'kbps';
-            } else if (isChecked('update-band-mbps-val')) {
+        } else if (isChecked('update-band-mbps-val')) {
                     bandType = 'mbps';
-            } else if (isChecked('update-band-bps-val')) {
+        } else if (isChecked('update-band-bps-val')) {
                     bandType = 'bps';
-            }
+        } else if (isChecked('update-band-none-val')) {
+                    bandType = null;
+                    bandValue = null;
         }
 
-        var costType = isChecked('update-pce-cost-type'),
-            costTypeVal = null;
+        var costTypeVal = null;
 
-        if (costType) {
-            if (isChecked('update-pce-cost-type-igp')) {
-                costTypeVal = 'igp';
-            } else if (isChecked('update-pce-cost-type-te')) {
-                costTypeVal = 'te';
-            }
+        if (isChecked('update-pce-cost-type-igp')) {
+            costTypeVal = 'igp';
+        } else if (isChecked('update-pce-cost-type-te')) {
+            costTypeVal = 'te';
+        } else if (isChecked('update-pce-cost-type-none')) {
+            costTypeVal = null;
         }
 
         wss.sendEvent(updatePathmsg, {
@@ -363,6 +398,18 @@
             .bindKeys();
     }
 
+    function showTunnelInformationQuery(data) {
+
+        wss.unbindHandlers(handlerMapshowQuery);
+        tunnelNameDataQuery = data;
+        tds.openDialog()
+            .setTitle('Available Tunnels for highlight')
+            .addContent(createUserTextQuery(data))
+            .addOk(dOkQuery, 'OK')
+            .addCancel(dClose, 'Close')
+            .bindKeys();
+    }
+
     function showTunnelInfoUpdateMsgHandle(data) {
 
         wss.unbindHandlers(handlerMapShowUpdate);
@@ -456,14 +503,30 @@
 
     function dOkRemove() {
 
-        tunnelNameDataRemove.a.forEach( function (val, idx) {
+        for (var idx = 0; idx < tunnelNameDataRemove.a.length; idx++) {
             var tunnelNameVal = isChecked('tunnel-id-remove-'+idx);
             if (tunnelNameVal) {
                 wss.sendEvent(remPathmsg, {
-                    tunnelid: val
+                    tunnelid: tunnelNameDataRemove.a[idx]
                 });
             }
-        } );
+            idx++;
+        }
+
+        flash.flash('remove path message');
+    }
+
+    function dOkQuery() {
+
+        for (var idx = 0; idx < tunnelNameDataQuery.a.length; idx++) {
+            var tunnelNameVal = isChecked('tunnel-id-query-'+idx);
+            if (tunnelNameVal) {
+                wss.sendEvent(showTunnelHighlightMsg, {
+                    tunnelid: tunnelNameDataQuery.a[idx]
+                });
+            }
+            idx++;
+        }
 
         flash.flash('remove path message');
     }
@@ -479,6 +542,9 @@
     }
 
   function queryTunnelDisplay() {
+        handlerMapshowQuery[showTunnelInfoQuery] = showTunnelInformationQuery;
+        wss.bindHandlers(handlerMapshowQuery);
+
         wss.sendEvent(queryDisplayTunnelMsg);
     }
     // === ---------------------------
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 b10b46a..92cc2d0 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
@@ -126,8 +126,8 @@
                 }
 
                 sep();
-                add('Src port');
-                add('Dst port');
+                add('Src Address');
+                add('Dst Address');
                 add('Te metric');
                 add('Bandwidth');