[ONOS-6963] Show Pipeconf name in device detail view

Change-Id: I10477285fa61ede0420c15107cc6c3e626dc23db
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 35b89df..8d4b60f 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
@@ -32,6 +32,8 @@
 import org.onosproject.net.device.DeviceService;
 import org.onosproject.net.host.HostService;
 import org.onosproject.net.link.LinkService;
+import org.onosproject.net.pi.model.PiPipeconfId;
+import org.onosproject.net.pi.runtime.PiPipeconfService;
 import org.onosproject.ui.RequestHandler;
 import org.onosproject.ui.UiMessageHandler;
 import org.onosproject.ui.table.TableModel;
@@ -42,6 +44,7 @@
 import java.util.ArrayList;
 import java.util.Collection;
 import java.util.List;
+import java.util.Optional;
 import java.util.Set;
 
 import static com.google.common.base.Strings.emptyToNull;
@@ -80,6 +83,7 @@
     private static final String HW = "hw";
     private static final String SW = "sw";
     private static final String PROTOCOL = "protocol";
+    private static final String PIPECONF = "pipeconf";
     private static final String MASTER_ID = "masterid";
     private static final String CHASSIS_ID = "chassisid";
     private static final String SERIAL = "serial";
@@ -202,6 +206,7 @@
             data.put(CHASSIS_ID, device.chassisId().toString());
             data.put(MASTER_ID, masterFor != null ? masterFor.toString() : NONE);
             data.put(PROTOCOL, deviceProtocol(device));
+            data.put(PIPECONF, devicePipeconf(device));
 
             ArrayNode ports = arrayNode();
 
@@ -257,8 +262,17 @@
 
             return port;
         }
-    }
 
+        private String devicePipeconf(Device device) {
+            PiPipeconfService service = get(PiPipeconfService.class);
+            Optional<PiPipeconfId> pipeconfId = service.ofDevice(device.id());
+            if (pipeconfId.isPresent()) {
+                return pipeconfId.get().id();
+            } else {
+                return NONE;
+            }
+        }
+    }
 
     // handler for changing device friendly name
     private final class NameChangeHandler extends RequestHandler {
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 75bcee3..4fbb0df 100644
--- a/web/gui/src/main/webapp/app/view/device/device.js
+++ b/web/gui/src/main/webapp/app/view/device/device.js
@@ -40,6 +40,8 @@
         ctnrPdg = 24,
         scrollSize = 17,
         portsTblPdg = 50,
+        defaultLabelWidth = 110,
+        defaultValueWidth  = 80,
 
         pName = 'device-details-panel',
         detailsReq = 'deviceDetailsRequest',
@@ -49,6 +51,7 @@
         friendlyProps = [
             'URI', 'Type', 'Master ID', 'Chassis ID',
             'Vendor', 'H/W Version', 'S/W Version', 'Protocol', 'Serial #',
+            'Pipeconf',
         ],
         portCols = [
             'enabled', 'id', 'speed', 'type', 'elinks_dest', 'name',
@@ -150,11 +153,11 @@
     function addProp(tbody, index, value) {
         var tr = tbody.append('tr');
 
-        function addCell(cls, txt) {
-            tr.append('td').attr('class', cls).text(txt);
+        function addCell(cls, txt, width) {
+            tr.append('td').attr('class', cls).attr('width', width).text(txt);
         }
-        addCell('label', friendlyProps[index] + ' :');
-        addCell('value', value);
+        addCell('label', friendlyProps[index] + ' :', defaultLabelWidth);
+        addCell('value', value, defaultValueWidth);
     }
 
     function populateTop(tblDiv, details) {
@@ -173,11 +176,12 @@
         addProp(leftTbl, 1, device.type);
         addProp(leftTbl, 2, details['masterid']);
         addProp(leftTbl, 3, details['chassid']);
-        addProp(rightTbl, 4, device.mfr);
+        addProp(leftTbl, 4, device.mfr);
         addProp(rightTbl, 5, device.hw);
         addProp(rightTbl, 6, device.sw);
         addProp(rightTbl, 7, details['protocol']);
         addProp(rightTbl, 8, device.serial);
+        addProp(rightTbl, 9, details['pipeconf']);
     }
 
     function addPortRow(tbody, port) {