1 files changed, 100 insertions, 16 deletions

diff --git a/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.js b/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.js
index 7a2dc4f9..5b7120fd 100644
--- a/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.js
+++ b/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.js
@@ -22,13 +22,17 @@
     'use strict';
 
     // injected refs
-    var $log, $scope, $location, fs, mast, ps, wss, is, ns;
+    var $log, $scope, $loc, fs, mast, ps, wss, is, ns, ks;
 
     // internal state
     var detailsPanel,
-        pStartY, pHeight,
-        top, bottom, iconDiv,
-        wSize;
+        pStartY,
+        pHeight,
+        top,
+        bottom,
+        iconDiv,
+        wSize,
+        editingName = false;
 
     // constants
     var topPdg = 13,
@@ -39,13 +43,15 @@
         pName = 'device-details-panel',
         detailsReq = 'deviceDetailsRequest',
         detailsResp = 'deviceDetailsResponse',
+        nameChangeReq = 'deviceNameChangeRequest',
+        nameChangeResp = 'deviceNameChangeResponse',
 
         propOrder = [
-            'type', 'masterid', 'chassisid',
+            'id', 'type', 'masterid', 'chassisid',
             'mfr', 'hw', 'sw', 'protocol', 'serial'
         ],
         friendlyProps = [
-            'Type', 'Master ID', 'Chassis ID',
+            'URI', 'Type', 'Master ID', 'Chassis ID',
             'Vendor', 'H/W Version', 'S/W Version', 'Protocol', 'Serial #'
         ],
         portCols = [
@@ -59,7 +65,9 @@
         if (detailsPanel.isVisible()) {
             $scope.selId = null;
             detailsPanel.hide();
+            return true;
         }
+        return false;
     }
 
     function addCloseBtn(div) {
@@ -68,6 +76,59 @@
         div.on('click', closePanel);
     }
 
+    function exitEditMode(nameH2, name) {
+        nameH2.html(name);
+        nameH2.classed('editable', 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', false);
+            nameH2.html('');
+            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();
@@ -78,7 +139,7 @@
         closeBtn = top.append('div').classed('close-btn', true);
         addCloseBtn(closeBtn);
         iconDiv = top.append('div').classed('dev-icon', true);
-        top.append('h2');
+        top.append('h2').classed('editable', true).on('click', editName);
 
         tblDiv = top.append('div').classed('top-tables', true);
         tblDiv.append('div').classed('left', true).append('table');
@@ -110,11 +171,11 @@
                         .append('tbody');
 
         is.loadEmbeddedIcon(iconDiv, details._iconid_type, 40);
-        top.select('h2').html(details.id);
+        top.select('h2').html(details.name);
 
         propOrder.forEach(function (prop, i) {
             // properties are split into two tables
-            addProp(i < 3 ? leftTbl : rightTbl, i, details[prop]);
+            addProp(i < 4 ? leftTbl : rightTbl, i, details[prop]);
         });
     }
 
@@ -156,14 +217,23 @@
         detailsPanel.width(tbWidth + ctnrPdg);
     }
 
+    function populateName(div, name) {
+        var lab = div.select('.label'),
+            val = div.select('.value');
+        lab.html('Friendly Name:');
+        val.html(name);
+    }
+
     function populateDetails(details) {
-        var topTbs, btmTbl, ports;
+        var nameDiv, topTbs, btmTbl, ports;
         setUpPanel();
 
+        nameDiv = top.select('.name-div');
         topTbs = top.select('.top-tables');
         btmTbl = bottom.select('table');
         ports = details.ports;
 
+        populateName(nameDiv, details.name);
         populateTop(topTbs, details);
         populateBottom(btmTbl, ports);
 
@@ -175,6 +245,13 @@
         $scope.$apply();
     }
 
+    function respNameCb(data) {
+        if (data.warn) {
+            $log.warn(data.warn, data.id);
+            top.select('h2').html(data.id);
+        }
+    }
+
     function createDetailsPane() {
         detailsPanel = ps.createPanel(pName, {
             width: wSize.width,
@@ -193,21 +270,26 @@
     .controller('OvDeviceCtrl',
         ['$log', '$scope', '$location', 'TableBuilderService', 'FnService',
             'MastService', 'PanelService', 'WebSocketService', 'IconService',
-            'NavService',
+            'NavService', 'KeyService',
 
         function (_$log_, _$scope_, _$location_,
-                  tbs, _fs_, _mast_, _ps_, _wss_, _is_, _ns_) {
+                  tbs, _fs_, _mast_, _ps_, _wss_, _is_, _ns_, _ks_) {
+            var params,
+                handlers = {};
+
             $log = _$log_;
             $scope = _$scope_;
-            $location = _$location_;
+            $loc = _$location_;
             fs = _fs_;
             mast = _mast_;
             ps = _ps_;
             wss = _wss_;
             is = _is_;
             ns = _ns_;
-            var params = $location.search(),
-                handlers = {};
+            ks = _ks_;
+
+            params = $loc.search();
+
             $scope.panelData = {};
             $scope.flowTip = 'Show flow view for selected device';
             $scope.portTip = 'Show port view for selected device';
@@ -215,6 +297,7 @@
 
             // details panel handlers
             handlers[detailsResp] = respDetailsCb;
+            handlers[nameChangeResp] = respNameCb;
             wss.bindHandlers(handlers);
 
             // query for if a certain device needs to be highlighted
@@ -278,7 +361,8 @@
             }
             // create key bindings to handle panel
             ks.keyBindings({
-                esc: [closePanel, 'Close the details panel'],
+                enter: editNameSave,
+                esc: [handleEscape, 'Close the details panel'],
                 _helpFormat: ['esc']
             });
             ks.gestureNotes([