Added Flash info for toggle summary keycommand

Clear and re-render summary panel on websocket update event
Added topo2 Panel Service

Change-Id: Ib9e6f887816d133af61cb0312c4dacd95641228d

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');
         }]);
 })();

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,

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;
+        }
+    ]);
+
+})();

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
+            };
+        }
+    ]);
+
+})();

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>