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'],