ONOS-5470: Cluster Details panel added node properties, fixed icon and style.
Change-Id: I8737fb2822d0bf1ab760b9b77a8a07d9eba57b73
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.js b/web/gui/src/main/webapp/app/fw/svg/icon.js
index 15c89bc1..91b9aee 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.js
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.js
@@ -49,6 +49,7 @@
appInactive: 'unknown',
+ node: 'node',
devIcon_SWITCH: 'switch',
devIcon_ROADM: 'roadm',
devIcon_OTN: 'otn',
diff --git a/web/gui/src/main/webapp/app/view/cluster/cluster.css b/web/gui/src/main/webapp/app/view/cluster/cluster.css
index 13668e8..ee2e9f5 100644
--- a/web/gui/src/main/webapp/app/view/cluster/cluster.css
+++ b/web/gui/src/main/webapp/app/view/cluster/cluster.css
@@ -55,3 +55,13 @@
display: inline-block;
margin: 8px 0;
}
+
+#cluster-details-panel .top-content table {
+ font-size: 12pt;
+}
+
+#cluster-details-panel td.label {
+ font-weight: bold;
+ text-align: right;
+ padding-right: 6px;
+}
diff --git a/web/gui/src/main/webapp/app/view/cluster/cluster.js b/web/gui/src/main/webapp/app/view/cluster/cluster.js
index c849c48..37766c6 100644
--- a/web/gui/src/main/webapp/app/view/cluster/cluster.js
+++ b/web/gui/src/main/webapp/app/view/cluster/cluster.js
@@ -21,104 +21,120 @@
(function () {
'use strict';
- // injected references
- var $log, $scope, $location, fs, tbs, ns, mast, ps, wss, is, ks;
+ // injected references
+ var $log, $scope, $location, fs, tbs, ns, mast, ps, wss, is, ks;
- // internal state
- var detailsPanel,
- pStartY,
- pHeight,
- top,
- topContent,
- bottom,
- iconDiv,
- nameDiv,
- wSize;
+ // internal state
+ var detailsPanel,
+ pStartY,
+ pHeight,
+ top,
+ topTable,
+ bottom,
+ iconDiv,
+ nameDiv,
+ wSize;
- // constants
- var topPdg = 28,
- ctnrPdg = 24,
- scrollSize = 17,
- portsTblPdg = 50,
- htPdg = 479,
- wtPdg = 532,
+ // constants
+ var topPdg = 28,
+ ctnrPdg = 24,
+ scrollSize = 17,
+ portsTblPdg = 50,
+ htPdg = 479,
+ wtPdg = 532,
- pName = 'cluster-details-panel',
- detailsReq = 'clusterDetailsRequest',
- detailsResp = 'clusterDetailsResponse';
+ pName = 'cluster-details-panel',
+ detailsReq = 'clusterDetailsRequest',
+ detailsResp = 'clusterDetailsResponse',
- function closePanel() {
- if (detailsPanel.isVisible()) {
- $scope.selId = null;
- detailsPanel.hide();
- return true;
- }
- return false;
- }
+ propOrder = [
+ 'id', 'ip'
+ ],
+ friendlyProps = [
+ 'Node ID', 'IP Address'
+ ];
- function addCloseBtn(div) {
- is.loadEmbeddedIcon(div, 'close', 20);
- div.on('click', closePanel);
- }
-
- function setUpPanel() {
- var container, closeBtn, tblDiv;
- detailsPanel.empty();
-
- container = detailsPanel.append('div').classed('container', true);
-
- 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');
- topContent = top.append('div').classed('top-content', true);
- top.append('hr');
-
- //ToDo add more details
- }
-
- function populateTop(details) {
- is.loadEmbeddedIcon(iconDiv, 'm_node', 40);
- top.select('h2').html(details.id);
-
- //ToDo : Add more details
- }
-
- function createDetailsPane() {
- detailsPanel = ps.createPanel(pName, {
- width: wSize.width,
- margin: 0,
- hideMargin: 0
- });
- detailsPanel.el().style({
- position: 'absolute',
- top: pStartY + 'px'
- });
- $scope.hidePanel = function () { detailsPanel.hide(); };
+ function closePanel() {
+ if (detailsPanel.isVisible()) {
+ $scope.selId = null;
detailsPanel.hide();
+ return true;
}
+ return false;
+ }
- function populateDetails(details) {
+ function addCloseBtn(div) {
+ is.loadEmbeddedIcon(div, 'close', 20);
+ div.on('click', closePanel);
+ }
- setUpPanel();
- populateTop(details);
+ function setUpPanel() {
+ var container, closeBtn, tblDiv;
+ detailsPanel.empty();
- //ToDo add more details
- detailsPanel.height(pHeight);
- detailsPanel.width(wtPdg);
+ container = detailsPanel.append('div').classed('container', true);
- //Todo : remove this when server implementation is done
- // detailsPanel.show();
+ 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');
+ topTable = top.append('div').classed('top-content', true)
+ .append('table');
+ top.append('hr');
+
+ //ToDo add more details
+ }
+
+ function addProp(tbody, index, value) {
+ var tr = tbody.append('tr');
+
+ function addCell(cls, txt) {
+ tr.append('td').attr('class', cls).html(txt);
}
+ addCell('label', friendlyProps[index] + ' :');
+ addCell('value', value);
+ }
- function respDetailsCb(data) {
- $scope.panelData = data.details;
- $scope.$apply();
- //TODO Use populateDetails() when merging server code
- $log.debug('Get the details:', $scope.panelData);
- }
+ function populateTop(details) {
+ is.loadEmbeddedIcon(iconDiv, 'node', 40);
+ top.select('h2').html(details.id);
+
+ var tbody = topTable.append('tbody');
+
+ propOrder.forEach(function (prop, i) {
+ addProp(tbody, i, details[prop]);
+ });
+ }
+
+ function createDetailsPane() {
+ detailsPanel = ps.createPanel(pName, {
+ width: wSize.width,
+ margin: 0,
+ hideMargin: 0
+ });
+ detailsPanel.el().style({
+ position: 'absolute',
+ top: pStartY + 'px'
+ });
+ $scope.hidePanel = function () { detailsPanel.hide(); };
+ detailsPanel.hide();
+ }
+
+ function populateDetails(details) {
+ setUpPanel();
+ populateTop(details);
+
+ //ToDo add more details
+ detailsPanel.height(pHeight);
+ detailsPanel.width(wtPdg);
+ }
+
+ function respDetailsCb(data) {
+ $scope.panelData = data.details;
+ $scope.$apply();
+ }
angular.module('ovCluster', [])
@@ -127,51 +143,46 @@
'PanelService', 'KeyService', 'IconService','WebSocketService',
'FnService',
- function (_$log_, _$scope_, tbs, _ns_, _mast_, _ps_, _ks_, _is_,
- _wss_, _fs_) {
- var params,
- handlers = {};
+ function (_$log_, _$scope_, tbs, _ns_, _mast_, _ps_, _ks_, _is_,
+ _wss_, _fs_) {
+ var handlers = {};
- $log = _$log_;
- $scope = _$scope_;
- fs = _fs_;
- ns = _ns_;
- is = _is_;
- wss = _wss_;
- mast = _mast_;
- ps = _ps_;
+ $log = _$log_;
+ $scope = _$scope_;
+ fs = _fs_;
+ ns = _ns_;
+ is = _is_;
+ wss = _wss_;
+ mast = _mast_;
+ ps = _ps_;
- $scope.panelData = {};
+ $scope.panelData = {};
- tbs.buildTable({
- scope: $scope,
- selCb: selCb,
- tag: 'cluster'
- });
-
- // details panel handlers
- handlers[detailsResp] = respDetailsCb;
- wss.bindHandlers(handlers);
-
- function selCb($event, row) {
- if ($scope.selId) {
- wss.sendEvent(detailsReq, {id: row.id});
-
- //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);
+ tbs.buildTable({
+ scope: $scope,
+ selCb: selCb,
+ tag: 'cluster'
});
- $log.log('OvClusterCtrl has been created');
- }])
+ // details panel handlers
+ handlers[detailsResp] = respDetailsCb;
+ wss.bindHandlers(handlers);
+ function selCb($event, row) {
+ if ($scope.selId) {
+ wss.sendEvent(detailsReq, {id: row.id});
+ } else {
+ $scope.hidePanel();
+ }
+ $log.debug('Got a click on:', row);
+ }
+
+ $scope.$on('$destroy', function () {
+ wss.unbindHandlers(handlers);
+ });
+
+ $log.log('OvClusterCtrl has been created');
+ }])
.directive('clusterDetailsPanel',
['$rootScope', '$window', '$timeout', 'KeyService',