[SDFAB-705] Fix GUI for the control and data plane resiliency

Additionally, fix similar issues in GUI2 and add initial
support for ports with name in GUI/GUI2.

This is also the first step towards supporting port with name widely in ONOS

Change-Id: Ib04f780bf0b7171e82a6beb69b39c0aaeb4be957
diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewMessageHandlerBase.java b/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewMessageHandlerBase.java
index ff52584..3bd4985 100644
--- a/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewMessageHandlerBase.java
+++ b/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewMessageHandlerBase.java
@@ -377,7 +377,7 @@
     private ObjectNode hostConnect(HostLocation location) {
         return objectNode()
                 .put("device", location.deviceId().toString())
-                .put("port", location.port().toLong());
+                .put("port", location.port().toString());
     }
 
     // Encodes the specified list of labels a JSON array.
@@ -639,7 +639,7 @@
         pp.addProp(LPL_A_TYPE, lion.getSafe(LPL_A_TYPE), lion.getSafe(DEVICE))
                 .addProp(LPL_A_ID, lion.getSafe(LPL_A_ID), did.toString())
                 .addProp(LPL_A_FRIENDLY, lion.getSafe(LPL_A_FRIENDLY), friendlyDevice(did))
-                .addProp(LPL_A_PORT, lion.getSafe(LPL_A_PORT), cp.port().toLong())
+                .addProp(LPL_A_PORT, lion.getSafe(LPL_A_PORT), cp.port().toString())
                 .addSeparator();
     }
 
@@ -649,7 +649,7 @@
         pp.addProp(LPL_B_TYPE, lion.getSafe(LPL_B_TYPE), lion.getSafe(DEVICE))
                 .addProp(LPL_B_ID, lion.getSafe(LPL_B_ID), did.toString())
                 .addProp(LPL_B_FRIENDLY, lion.getSafe(LPL_B_FRIENDLY), friendlyDevice(did))
-                .addProp(LPL_B_PORT, lion.getSafe(LPL_B_PORT), cp.port().toLong())
+                .addProp(LPL_B_PORT, lion.getSafe(LPL_B_PORT), cp.port().toString())
                 .addSeparator();
     }