diff options
Diffstat (limited to 'framework/src/onos/web/gui/src/main/webapp/app/view/device')
3 files changed, 113 insertions, 18 deletions
diff --git a/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.css b/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.css index fc08f68b..e0e9cf57 100644 --- a/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.css +++ b/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.css @@ -75,6 +75,15 @@ margin: 8px 0; } +#device-details-panel .editable { + cursor: pointer; + border-bottom: 1px dashed darkgreen; +} + +#device-details-panel h2 input { + font-size: 1.0em; +} + #device-details-panel .top div.left { float: left; padding: 0 18px 0 0; diff --git a/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.html b/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.html index 5d51d1d4..63a04db8 100644 --- a/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.html +++ b/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.html @@ -35,13 +35,14 @@ <tr> <td colId="available" class="table-icon" sortable></td> <td colId="type" class="table-icon" sortable></td> + <td colId="name" sortable>Friendly Name </td> <td colId="id" sortable>Device ID </td> <td colId="masterid" sortable>Master Instance </td> - <td colId="num_ports" sortable>Ports </td> + <td colId="num_ports" col-width="60px" sortable>Ports </td> <td colId="mfr" sortable>Vendor </td> <td colId="hw" sortable>H/W Version </td> <td colId="sw" sortable>S/W Version </td> - <td colId="protocol" sortable>Protocol </td> + <td colId="protocol" col-width="80px" sortable>Protocol </td> </tr> </table> </div> @@ -64,6 +65,7 @@ <td class="table-icon"> <div icon icon-id="{{dev._iconid_type}}"></div> </td> + <td>{{dev.name}}</td> <td>{{dev.id}}</td> <td>{{dev.masterid}}</td> <td>{{dev.num_ports}}</td> 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([ |