ONOS-5579 Refactoring Details Panel

Added an Editable Textfield Component
Refactored Device View
Refactored Host View

Change-Id: I7ca423f6c198f8e09b20ed4e57e352de04b797e9
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 4fbb0df..6bc66d8 100644
--- a/web/gui/src/main/webapp/app/view/device/device.js
+++ b/web/gui/src/main/webapp/app/view/device/device.js
@@ -22,17 +22,14 @@
     'use strict';
 
     // injected refs
-    var $log, $scope, $loc, fs, mast, ps, wss, is, ns, ks;
+    var $log, $scope, $loc, fs, mast, ps, wss, is, ns, ks, dps;
 
     // internal state
     var detailsPanel,
         pStartY,
         pHeight,
         top,
-        bottom,
-        iconDiv,
         wSize,
-        editingName = false,
         device;
 
     // constants
@@ -40,19 +37,12 @@
         ctnrPdg = 24,
         scrollSize = 17,
         portsTblPdg = 50,
-        defaultLabelWidth = 110,
-        defaultValueWidth  = 80,
 
         pName = 'device-details-panel',
         detailsReq = 'deviceDetailsRequest',
         detailsResp = 'deviceDetailsResponse',
         nameChangeReq = 'deviceNameChangeRequest',
         nameChangeResp = 'deviceNameChangeResponse',
-        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',
         ],
@@ -60,6 +50,11 @@
             'Enabled', 'ID', 'Speed', 'Type', 'Egress Links', 'Name',
         ];
 
+    var keyBindings = {
+        esc: [closePanel, 'Close the details panel'],
+        _helpFormat: ['esc'],
+    };
+
     function closePanel() {
         if (detailsPanel.isVisible()) {
             $scope.selId = null;
@@ -69,119 +64,44 @@
         return false;
     }
 
-    function addCloseBtn(div) {
-        is.loadEmbeddedIcon(div, 'close', 20);
-        div.on('click', closePanel);
-    }
-
-    function exitEditMode(nameH2, name) {
-        nameH2.text(name);
-        nameH2.classed('editable clickable', true);
-        editingName = false;
-        ks.enableGlobalKeys(true);
-    }
-
-    function editNameSave() {
-        var nameH2 = top.select('h2'),
-            id = $scope.panelData.id,
-            val,
-            newVal;
-
-        if (editingName) {
-            val = nameH2.select('input').property('value').trim();
-            newVal = val || id;
-
-            exitEditMode(nameH2, newVal);
-            $scope.panelData.name = newVal;
-            wss.sendEvent(nameChangeReq, { id: id, name: val });
-        }
-    }
-
-    function editNameCancel() {
-        if (editingName) {
-            exitEditMode(top.select('h2'), $scope.panelData.name);
-            return true;
-        }
-        return false;
-    }
-
-    function editName() {
-        var nameH2 = top.select('h2'),
-            tf, el;
-
-        if (!editingName) {
-            nameH2.classed('editable clickable', false);
-            nameH2.text('');
-            tf = nameH2.append('input').classed('name-input', true)
-                .attr('type', 'text')
-                .attr('value', $scope.panelData.name);
-            el = tf[0][0];
-            el.focus();
-            el.select();
-            editingName = true;
-            ks.enableGlobalKeys(false);
-        }
-    }
-
-    function handleEscape() {
-        return editNameCancel() || closePanel();
-    }
-
     function setUpPanel() {
-        var container, closeBtn, tblDiv;
-        detailsPanel.empty();
+        // var container, closeBtn, tblDiv;
 
-        container = detailsPanel.append('div').classed('container', true);
+        dps.empty();
+        dps.addContainers();
+        dps.addCloseButton(closePanel);
 
-        top = container.append('div').classed('top', true);
-        closeBtn = top.append('div').classed('close-btn', true);
-        addCloseBtn(closeBtn);
-        iconDiv = top.append('div').classed('dev-icon', true);
-        top.append('h2').classed('editable clickable', true).on('click', editName);
+        var top = dps.top();
+        var bottom = dps.bottom();
 
-        tblDiv = top.append('div').classed('top-tables', true);
-        tblDiv.append('div').classed('left', true).append('table');
-        tblDiv.append('div').classed('right', true).append('table');
+        dps.addHeading('dev-icon');
+        top.append('div').classed('top-content', true);
 
         top.append('hr');
 
-        bottom = container.append('div').classed('bottom', true);
         bottom.append('h2').classed('ports-title', true).text('Ports');
         bottom.append('table');
     }
 
-    function addProp(tbody, index, value) {
-        var tr = tbody.append('tr');
-
-        function addCell(cls, txt, width) {
-            tr.append('td').attr('class', cls).attr('width', width).text(txt);
-        }
-        addCell('label', friendlyProps[index] + ' :', defaultLabelWidth);
-        addCell('value', value, defaultValueWidth);
+    function friendlyPropsList(details) {
+        return {
+            'URI': device.id,
+            'Type': device.type,
+            'Master ID': details['masterid'],
+            'Chassis ID': details['chassid'],
+            'Vendor': device.mfr,
+            'H/W Version': device.hw,
+            'S/W Version': device.sw,
+            'Protocol': details['protocol'],
+            'Serial #': device.serial,
+            'Pipeconf': details['pipeconf'],
+        };
     }
 
     function populateTop(tblDiv, details) {
-        var leftTbl = tblDiv.select('.left')
-                        .select('table')
-                        .append('tbody'),
-            rightTbl = tblDiv.select('.right')
-                        .select('table')
-                        .append('tbody');
-
-        is.loadEmbeddedIcon(iconDiv, details._iconid_type, 40);
-        top.select('h2').text(details.name);
-
-        // === demonstrate use of JsonCodec object see ONOS-5976
-        addProp(leftTbl, 0, device.id);
-        addProp(leftTbl, 1, device.type);
-        addProp(leftTbl, 2, details['masterid']);
-        addProp(leftTbl, 3, details['chassid']);
-        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']);
+        is.loadEmbeddedIcon(dps.select('.iconDiv'), details._iconid_type, 40);
+        dps.top().select('h2').text(details.name);
+        dps.addPropsList(tblDiv, friendlyPropsList(details));
     }
 
     function addPortRow(tbody, port) {
@@ -193,6 +113,7 @@
     }
 
     function populateBottom(table, ports) {
+
         var theader = table.append('thead').append('tr'),
             tbody = table.append('tbody'),
             tbWidth, tbHeight;
@@ -200,16 +121,15 @@
         friendlyPortCols.forEach(function (col) {
             theader.append('th').text(col);
         });
+
         ports.forEach(function (port) {
             addPortRow(tbody, port);
         });
 
         tbWidth = fs.noPxStyle(tbody, 'width') + scrollSize;
         tbHeight = pHeight
-                    - (fs.noPxStyle(detailsPanel.el()
-                                        .select('.top'), 'height')
-                    + fs.noPxStyle(detailsPanel.el()
-                                        .select('.ports-title'), 'height')
+                    - (fs.noPxStyle(detailsPanel.el().select('.top'), 'height')
+                    + fs.noPxStyle(detailsPanel.el().select('.ports-title'), 'height')
                     + portsTblPdg);
 
         table.style({
@@ -223,15 +143,14 @@
     }
 
     function populateDetails(details) {
-        var topTbs, btmTbl, ports;
+        var btmTbl, ports;
 
         setUpPanel();
 
-        topTbs = top.select('.top-tables');
-        btmTbl = bottom.select('table');
+        btmTbl = dps.bottom().select('table');
         ports = details.ports;
 
-        populateTop(topTbs, details);
+        populateTop(dps.select('.top-content'), details);
         populateBottom(btmTbl, ports);
 
         detailsPanel.height(pHeight);
@@ -250,18 +169,19 @@
         }
     }
 
-    function createDetailsPane() {
-        detailsPanel = ps.createPanel(pName, {
+    function createDetailsPanel() {
+        detailsPanel = dps.create(pName, {
             width: wSize.width,
             margin: 0,
             hideMargin: 0,
+            scope: $scope,
+            keyBindings: keyBindings,
+            nameChangeRequest: nameChangeReq,
         });
-        detailsPanel.el().style({
-            position: 'absolute',
-            top: pStartY + 'px',
-        });
+
+        dps.setResponse(detailsResp, respDetailsCb);
+
         $scope.hidePanel = function () { detailsPanel.hide(); };
-        detailsPanel.hide();
     }
 
     // Sample functions for detail panel creation
@@ -283,10 +203,10 @@
         ['$log', '$scope', '$location', 'TableBuilderService',
             'TableDetailService', 'FnService',
             'MastService', 'PanelService', 'WebSocketService', 'IconService',
-            'NavService', 'KeyService',
+            'NavService', 'KeyService', 'DetailsPanelService',
 
         function (_$log_, _$scope_, _$location_,
-                  tbs, tds, _fs_, _mast_, _ps_, _wss_, _is_, _ns_, _ks_) {
+                  tbs, tds, _fs_, _mast_, _ps_, _wss_, _is_, _ns_, _ks_, _dps_) {
             var params,
                 handlers = {};
 
@@ -300,6 +220,7 @@
             is = _is_;
             ns = _ns_;
             ks = _ks_;
+            dps = _dps_;
 
             params = $loc.search();
 
@@ -310,7 +231,7 @@
             $scope.meterTip = 'Show meter view for selected device';
 
             // details panel handlers
-            handlers[detailsResp] = respDetailsCb;
+            // handlers[detailsResp] = respDetailsCb;
             handlers[nameChangeResp] = respNameCb;
             wss.bindHandlers(handlers);
 
@@ -352,6 +273,7 @@
             };
 
             $scope.$on('$destroy', function () {
+                dps.destroy();
                 wss.unbindHandlers(handlers);
             });
 
@@ -373,7 +295,7 @@
 
             function initPanel() {
                 heightCalc();
-                createDetailsPane();
+                createDetailsPanel();
             }
 
             // Safari has a bug where it renders the fixed-layout table wrong
@@ -384,11 +306,8 @@
                 initPanel();
             }
             // create key bindings to handle panel
-            ks.keyBindings({
-                enter: editNameSave,
-                esc: [handleEscape, 'Close the details panel'],
-                _helpFormat: ['esc'],
-            });
+            ks.keyBindings(keyBindings);
+
             ks.gestureNotes([
                 ['click', 'Select a row to show device details'],
                 ['scroll down', 'See more devices'],