Added Flash info for toggle summary keycommand
Clear and re-render summary panel on websocket update event
Added topo2 Panel Service
Change-Id: Ib9e6f887816d133af61cb0312c4dacd95641228d
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2.js b/web/gui/src/main/webapp/app/view/topo2/topo2.js
index ef76ac1..363cec5 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2.js
@@ -88,13 +88,15 @@
'WebSocketService', 'PrefsService', 'ThemeService',
'Topo2EventService', 'Topo2ForceService', 'Topo2InstanceService',
'Topo2BreadcrumbService', 'Topo2KeyCommandService', 'Topo2MapService',
- 'Topo2MapConfigService',
+ 'Topo2MapConfigService', 'Topo2SummaryPanelService',
function (_$scope_, _$log_, _$loc_,
_fs_, _mast_, _ks_, _zs_,
_gs_, _ms_, _sus_, _flash_,
_wss_, _ps_, _th_,
- _t2es_, _t2fs_, _t2is_, _t2bcs_, _t2kcs_, _t2ms_, _t2mcs_) {
+ _t2es_, _t2fs_, _t2is_, _t2bcs_, _t2kcs_, _t2ms_, _t2mcs_,
+ summaryPanel
+ ) {
var params = _$loc_.search(),
dim,
@@ -218,6 +220,8 @@
// $log.debug('registered overlays...', tov.list());
+ summaryPanel.init();
+
$log.log('OvTopo2Ctrl has been created');
}]);
})();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2KeyCommands.js b/web/gui/src/main/webapp/app/view/topo2/topo2KeyCommands.js
index 1b0b10f..8571575 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2KeyCommands.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2KeyCommands.js
@@ -17,7 +17,8 @@
(function () {
// Injected Services
- var ks, t2ps, t2ms, ps, t2is;
+ var ks, t2ps, t2ms, ps, t2is, t2sp;
+
var topo2ForceService;
// Commmands
@@ -25,7 +26,8 @@
L: [cycleDeviceLabels, 'Cycle device labels'],
G: [openMapSelection, 'Select background geo map'],
B: [toggleMap, 'Toggle background geo map'],
- I: [toggleInstancePanel, 'Toggle ONOS Instance Panel']
+ I: [toggleInstancePanel, 'Toggle ONOS Instance Panel'],
+ O: [toggleSummary, 'Toggle the Summary Panel']
};
function init(t2fs) {
@@ -71,17 +73,21 @@
updatePrefsState('insts', t2is.toggle(x));
}
+ function toggleSummary() {
+ t2sp.toggle();
+ }
+
angular.module('ovTopo2')
.factory('Topo2KeyCommandService',
['KeyService', 'Topo2PrefsService', 'Topo2MapService', 'PrefsService',
- 'Topo2InstanceService',
- function (_ks_, _t2ps_, _t2ms_, _ps_, _t2is_) {
-
+ 'Topo2InstanceService', 'Topo2SummaryPanelService',
+ function (_ks_, _t2ps_, _t2ms_, _ps_, _t2is_, _t2sp_) {
t2ps = _t2ps_;
t2ms = _t2ms_;
t2is = _t2is_;
ps = _ps_;
ks = _ks_;
+ t2sp = _t2sp_;
return {
init: init,
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Panel.js b/web/gui/src/main/webapp/app/view/topo2/topo2Panel.js
new file mode 100644
index 0000000..bfd2a3f
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Panel.js
@@ -0,0 +1,75 @@
+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Topology Layout Module.
+ Module that contains the d3.force.layout logic
+ */
+
+(function () {
+ 'use strict';
+
+ var ps;
+
+ var Panel = function (id, options) {
+ this.id = id;
+ this.p = ps.createPanel(this.id, options);
+ this.setup();
+
+ this.p.show();
+ };
+
+ Panel.prototype = {
+ setup: function () {
+ var panel = this.p;
+ panel.empty();
+
+ panel.append('div').classed('header', true);
+ panel.append('div').classed('body', true);
+ panel.append('div').classed('footer', true);
+
+ this.header = panel.el().select('.header');
+ this.body = panel.el().select('.body');
+ this.footer = panel.el().select('.body');
+ },
+ appendToHeader: function (x) {
+ return this.header.append(x);
+ },
+ appendToBody: function (x) {
+ return this.body.append(x);
+ },
+ appendToFooter: function (x) {
+ return this.footer.append(x);
+ },
+ emptyRegions: function () {
+ this.header.selectAll("*").remove();
+ this.body.selectAll("*").remove();
+ this.footer.selectAll("*").remove();
+ },
+ destory: function () {
+ ps.destroy(this.id);
+ }
+ };
+
+ angular.module('ovTopo2')
+ .factory('Topo2PanelService', ['PanelService',
+ function (_ps_) {
+ ps = _ps_;
+ return Panel;
+ }
+ ]);
+
+})();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2SummaryPanel.js b/web/gui/src/main/webapp/app/view/topo2/topo2SummaryPanel.js
new file mode 100644
index 0000000..149e7cc
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2SummaryPanel.js
@@ -0,0 +1,128 @@
+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Topology Layout Module.
+ Module that contains the d3.force.layout logic
+ */
+
+(function () {
+ 'use strict';
+
+ // Injected Services
+ var Panel, gs, wss, flash;
+
+ // Internal State
+ var summaryPanel, summaryData;
+
+ // configuration
+ var id = 'topo-p-summary',
+ className = 'topo-p',
+ handlerMap = {
+ showSummary: handleSummaryData
+ };
+
+ function init() {
+
+ bindHandlers();
+ wss.sendEvent('requestSummary');
+
+ summaryPanel = new Panel(id, {
+ class: className
+ });
+
+ summaryPanel.p.classed(className, true);
+ }
+
+ function addProp(tbody, label, value) {
+ var tr = tbody.append('tr'),
+ lab;
+ if (typeof label === 'string') {
+ lab = label.replace(/_/g, ' ');
+ } else {
+ lab = label;
+ }
+
+ function addCell(cls, txt) {
+ tr.append('td').attr('class', cls).html(txt);
+ }
+ addCell('label', lab + ' :');
+ addCell('value', value);
+ }
+
+ function addSep(tbody) {
+ tbody.append('tr').append('td').attr('colspan', 2).append('hr');
+ }
+
+ function listProps(tbody, data) {
+ summaryData.propOrder.forEach(function (p) {
+ if (p === '-') {
+ addSep(tbody);
+ } else {
+ addProp(tbody, p, summaryData.props[p]);
+ }
+ });
+ }
+
+ function render() {
+ summaryPanel.emptyRegions();
+
+ var svg = summaryPanel.appendToHeader('div')
+ .classed('icon', true)
+ .append('svg'),
+ title = summaryPanel.appendToHeader('h2'),
+ table = summaryPanel.appendToBody('table'),
+ tbody = table.append('tbody');
+
+ title.text(summaryData.title);
+ gs.addGlyph(svg, 'bird', 24, 0, [1, 1]);
+ listProps(tbody);
+ }
+
+ function handleSummaryData(data) {
+ summaryData = data;
+ render();
+ }
+
+ function bindHandlers() {
+ wss.bindHandlers(handlerMap);
+ }
+
+ function toggle() {
+ var on = summaryPanel.p.toggle(),
+ verb = on ? 'Show' : 'Hide';
+ flash.flash(verb + ' Summary Panel');
+ }
+
+ angular.module('ovTopo2')
+ .factory('Topo2SummaryPanelService',
+ ['Topo2PanelService', 'GlyphService', 'WebSocketService', 'FlashService',
+ function (_ps_, _gs_, _wss_, _flash_) {
+
+ Panel = _ps_;
+ gs = _gs_;
+ wss = _wss_;
+ flash = _flash_;
+
+ return {
+ init: init,
+
+ toggle: toggle
+ };
+ }
+ ]);
+
+})();
diff --git a/web/gui/src/main/webapp/index.html b/web/gui/src/main/webapp/index.html
index 6ef80d3..91bf48d 100644
--- a/web/gui/src/main/webapp/index.html
+++ b/web/gui/src/main/webapp/index.html
@@ -145,9 +145,11 @@
<script src="app/view/topo2/topo2MapDialog.js"></script>
<script src="app/view/topo2/topo2Model.js"></script>
<script src="app/view/topo2/topo2NodeModel.js"></script>
+ <script src="app/view/topo2/topo2Panel.js"></script>
<script src="app/view/topo2/topo2Prefs.js"></script>
<script src="app/view/topo2/topo2Region.js"></script>
<script src="app/view/topo2/topo2Select.js"></script>
+ <script src="app/view/topo2/topo2SummaryPanel.js"></script>
<script src="app/view/topo2/topo2SubRegion.js"></script>
<script src="app/view/topo2/topo2Theme.js"></script>
<script src="app/view/topo2/topo2View.js"></script>