Added changes for onos-5523
Fixed code as per review
Change-Id: Ie8e59e3be2a2d762a125e34852abb39548addfea
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.js b/web/gui/src/main/webapp/app/view/flow/flow.js
index 445288d..6f862fb 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.js
+++ b/web/gui/src/main/webapp/app/view/flow/flow.js
@@ -29,7 +29,7 @@
pStartY,
pHeight,
top,
- topContent,
+ topTable,
bottom,
iconDiv,
nameDiv,
@@ -46,7 +46,14 @@
pName = 'flow-details-panel',
detailsReq = 'flowDetailsRequest',
- detailsResp = 'flowDetailsResponse';
+ detailsResp = 'flowDetailsResponse',
+
+ propOrder = [
+ 'flowId', 'priority'
+ ],
+ friendlyProps = [
+ 'Flow ID', 'Flow Priority'
+ ];
function closePanel() {
if (detailsPanel.isVisible()) {
@@ -62,6 +69,10 @@
div.on('click', closePanel);
}
+ function handleEscape() {
+ return closePanel();
+ }
+
function setUpPanel() {
var container, closeBtn, tblDiv;
detailsPanel.empty();
@@ -73,17 +84,32 @@
addCloseBtn(closeBtn);
iconDiv = top.append('div').classed('dev-icon', true);
top.append('h2');
- topContent = top.append('div').classed('top-content', true);
+ topTable = top.append('div').classed('top-content', true)
+ .append('table');
top.append('hr');
//ToDo add more details
}
- function populateTop(details) {
- is.loadEmbeddedIcon(iconDiv, 'm_flows', 40);
- top.select('h2').html(details.id);
+ function addProp(tbody, index, value) {
+ var tr = tbody.append('tr');
- //ToDo : Add more details
+ function addCell(cls, txt) {
+ tr.append('td').attr('class', cls).html(txt);
+ }
+ addCell('label', friendlyProps[index] + ' :');
+ addCell('value', value);
+ }
+
+ function populateTop(details) {
+ is.loadEmbeddedIcon(iconDiv, 'flowTable', 40);
+ top.select('h2').html(details.flowId);
+
+ var tbody = topTable.append('tbody');
+
+ propOrder.forEach(function (prop, i) {
+ addProp(tbody, i, details[prop]);
+ });
}
function createDetailsPane() {
@@ -101,22 +127,18 @@
}
function populateDetails(details) {
-
setUpPanel();
populateTop(details);
//ToDo add more details
detailsPanel.height(pHeight);
detailsPanel.width(wtPdg);
-
- //Todo : remove this when server implementation is done
- detailsPanel.show();
}
function respDetailsCb(data) {
- var details = data.details;
- //TODO Use populateDetails() when merging server code
- $log.debug('Get the details:', details.id);
+ $log.debug("Got response from server :", data);
+ $scope.panelData = data.details;
+ $scope.$apply();
}
angular.module('ovFlow', [])
@@ -173,15 +195,16 @@
function selCb($event, row) {
if ($scope.selId) {
wss.sendEvent(detailsReq, {flowId: row.id, appId: row.appId});
-
- //ToDo : Remove this line when server implmentation is complete
- populateDetails($scope.selId);
} else {
$scope.hidePanel();
}
$log.debug('Got a click on:', row);
}
+ $scope.$on('$destroy', function () {
+ wss.unbindHandlers(handlers);
+ });
+
$scope.briefToggle = function () {
$scope.brief = !$scope.brief;
};
@@ -222,7 +245,22 @@
} else {
initPanel();
}
-
+ // create key bindings to handle panel
+ ks.keyBindings({
+ esc: [handleEscape, 'Close the details panel'],
+ _helpFormat: ['esc']
+ });
+ ks.gestureNotes([
+ ['click', 'Select a row to show cluster node details'],
+ ['scroll down', 'See available cluster nodes']
+ ]);
+ // if the panelData changes
+ scope.$watch('panelData', function () {
+ if (!fs.isEmptyObject(scope.panelData)) {
+ populateDetails(scope.panelData);
+ detailsPanel.show();
+ }
+ });
// if the window size changes
unbindWatch = $rootScope.$watchCollection(
function () {