diff --git a/core/api/src/main/java/org/onosproject/net/AnnotationKeys.java b/core/api/src/main/java/org/onosproject/net/AnnotationKeys.java
index 05bf54e..b7c8a32 100644
--- a/core/api/src/main/java/org/onosproject/net/AnnotationKeys.java
+++ b/core/api/src/main/java/org/onosproject/net/AnnotationKeys.java
@@ -76,6 +76,12 @@
     public static final String OPTICAL_WAVES = "optical.waves";
 
     /**
+     * Annotation key for the port name.
+     */
+    public static final String PORT_NAME = "portName";
+
+
+    /**
      * Returns the value annotated object for the specified annotation key.
      * The annotated value is expected to be String that can be parsed as double.
      * If parsing fails, the returned value will be 1.0.
diff --git a/providers/openflow/device/src/main/java/org/onosproject/provider/of/device/impl/OpenFlowDeviceProvider.java b/providers/openflow/device/src/main/java/org/onosproject/provider/of/device/impl/OpenFlowDeviceProvider.java
index 78b6903..e23c7d6 100644
--- a/providers/openflow/device/src/main/java/org/onosproject/provider/of/device/impl/OpenFlowDeviceProvider.java
+++ b/providers/openflow/device/src/main/java/org/onosproject/provider/of/device/impl/OpenFlowDeviceProvider.java
@@ -22,6 +22,7 @@
 import org.apache.felix.scr.annotations.Deactivate;
 import org.apache.felix.scr.annotations.Reference;
 import org.apache.felix.scr.annotations.ReferenceCardinality;
+import org.onosproject.net.AnnotationKeys;
 import org.onosproject.net.DefaultAnnotations;
 import org.onosproject.net.Device;
 import org.onosproject.net.DeviceId;
@@ -352,7 +353,7 @@
             String portName = Strings.emptyToNull(port.getName());
             if (portName != null) {
                 annotations = DefaultAnnotations.builder()
-                        .set("portName", portName).build();
+                        .set(AnnotationKeys.PORT_NAME, portName).build();
             }
             return annotations;
         }
diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/DeviceViewMessageHandler.java b/web/gui/src/main/java/org/onosproject/ui/impl/DeviceViewMessageHandler.java
index 67a9ee3..7937c6b 100644
--- a/web/gui/src/main/java/org/onosproject/ui/impl/DeviceViewMessageHandler.java
+++ b/web/gui/src/main/java/org/onosproject/ui/impl/DeviceViewMessageHandler.java
@@ -20,6 +20,7 @@
 import com.fasterxml.jackson.databind.node.ObjectNode;
 import com.google.common.collect.ImmutableSet;
 import org.onosproject.mastership.MastershipService;
+import org.onosproject.net.AnnotationKeys;
 import org.onosproject.net.ConnectPoint;
 import org.onosproject.net.Device;
 import org.onosproject.net.DeviceId;
@@ -30,6 +31,7 @@
 
 import java.util.ArrayList;
 import java.util.Arrays;
+import java.util.Collections;
 import java.util.List;
 import java.util.Set;
 
@@ -56,6 +58,7 @@
     private static final String PORTS = "ports";
     private static final String ENABLED = "enabled";
     private static final String SPEED = "speed";
+    private static final String NAME = "name";
 
     private static final ObjectMapper MAPPER = new ObjectMapper();
 
@@ -118,7 +121,14 @@
         data.put(PROTOCOL, device.annotations().value(PROTOCOL));
 
         ArrayNode ports = MAPPER.createArrayNode();
-        for (Port p : service.getPorts(deviceId)) {
+
+        List<Port> portList = new ArrayList<>(service.getPorts(deviceId));
+        Collections.sort(portList, (p1, p2) -> {
+            long delta = p1.number().toLong() - p2.number().toLong();
+            return delta == 0 ? 0 : (delta < 0 ? -1 : +1);
+        });
+
+        for (Port p : portList) {
             ports.add(portData(p, deviceId));
         }
         data.set(PORTS, ports);
@@ -142,11 +152,13 @@
     private ObjectNode portData(Port p, DeviceId id) {
         ObjectNode port = MAPPER.createObjectNode();
         LinkService ls = get(LinkService.class);
+        String name = p.annotations().value(AnnotationKeys.PORT_NAME);
 
         port.put(ID, p.number().toString());
         port.put(TYPE, p.type().toString());
         port.put(SPEED, p.portSpeed());
         port.put(ENABLED, p.isEnabled());
+        port.put(NAME, name != null ? name : "");
 
         Set<Link> links = ls.getEgressLinks(new ConnectPoint(id, p.number()));
         if (!links.isEmpty()) {
diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewWebSocket.java b/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewWebSocket.java
index a5d7c20..16b0eb6 100644
--- a/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewWebSocket.java
+++ b/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewWebSocket.java
@@ -184,7 +184,7 @@
 
     @Override
     public void onOpen(Connection connection) {
-        log.info("GUI client connected");
+        log.info("Legacy GUI client connected");
         this.connection = connection;
         this.control = (FrameConnection) connection;
         addListeners();
@@ -199,7 +199,7 @@
     public synchronized void onClose(int closeCode, String message) {
         removeListeners();
         timer.cancel();
-        log.info("GUI client disconnected");
+        log.info("Legacy GUI client disconnected");
     }
 
     @Override
diff --git a/web/gui/src/main/webapp/app/view/device/device.js b/web/gui/src/main/webapp/app/view/device/device.js
index 496a654..fa4dcf9 100644
--- a/web/gui/src/main/webapp/app/view/device/device.js
+++ b/web/gui/src/main/webapp/app/view/device/device.js
@@ -50,10 +50,10 @@
             'Vendor', 'H/W Version', 'S/W Version', 'Protocol', 'Serial #'
         ],
         portCols = [
-            'enabled', 'id', 'speed', 'type', 'elinks_dest'
+            'enabled', 'id', 'speed', 'type', 'elinks_dest', 'name'
         ],
         friendlyPortCols = [
-            'Enabled', 'ID', 'Speed', 'Type', 'Egress Links'
+            'Enabled', 'ID', 'Speed', 'Type', 'Egress Links', 'Name'
         ];
 
     function addCloseBtn(div) {