ONOS-1820 - GUI -- Base port stats view created. Navigate to it using device or topo view.

Change-Id: I87b1caea74dc4974b0a4fd1fdde7b7bd3269ca86
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 cd0799b..855f3a0 100644
--- a/web/gui/src/main/webapp/app/view/device/device.js
+++ b/web/gui/src/main/webapp/app/view/device/device.js
@@ -36,8 +36,10 @@
         scrollSize = 17,
         portsTblPdg = 50,
         flowPath = 'flow',
+        portPath = 'port',
 
         pName = 'device-details-panel',
+        bName = 'dev-dets-p',
         detailsReq = 'deviceDetailsRequest',
         detailsResp = 'deviceDetailsResponse',
 
@@ -116,13 +118,24 @@
             addProp(i < 3 ? leftTbl : rightTbl, i, details[prop]);
         });
 
-        bns.button(btnsDiv,
-            'dev-dets-p-flows',
+        bns.button(
+            btnsDiv,
+            bName + '-flows',
             'flowTable',
             function () {
                 ns.navTo(flowPath, { devId: details.id });
             },
-            'Show flows table for this device');
+            'Show flow view for this device'
+        );
+        bns.button(
+            btnsDiv,
+            bName + '-ports',
+            'chain',
+            function () {
+                ns.navTo(portPath, { devId: details.id });
+            },
+            'Show port view for this device'
+        );
     }
 
     function addPortRow(tbody, port) {