ONOS-1479 - GUI Topology Overlay Work - (WIP)

- created TopoOverlayService to allow registration of topology overlays
- modified topoToolbar to include a radio button set for each registered overlay
- created seed traffic overlay

Change-Id: I70770cb1c691730914c81e497823ea08703587f1

+// sample topology overlay - client side
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log;
+
+    // our overlay definition
+    var overlay = {
+        overlayId: 'sampleTopoOver',
+
+        // NOTE: for the glyph, could alternately use id: <existingGlyphId>
+        //       instead of defining viewbox and data (vb, d)
+        //       glyph: { id: 'crown' }
+        glyph: {
+            vb: '0 0 8 8',
+            d: 'M1,4l2,-1l1,-2l1,2l2,1l-2,1l-1,2l-1,-2z'
+        },
+        tooltip: 'Sample Topology Overlay',
+
+        activate: activateOverlay,
+        deactivate: deactivateOverlay
+    };
+
+    // === implementation of overlay API (essentially callbacks)
+    function activateOverlay() {
+        $log.debug("sample topology overlay ACTIVATED");
+    }
+
+    function deactivateOverlay() {
+        $log.debug("sample topology overlay DEACTIVATED");
+    }
+
+
+    // invoke code to register with the overlay service
+    angular.module('ovSample')
+        .run(['$log', 'TopoOverlayService',
+
+            function (_$log_, tov) {
+                $log = _$log_;
+                tov.register(overlay);
+            }]);
+
+}());

@@ -477,7 +477,6 @@
     }
     }
 
 
     function init() {
     function init() {
-        clear();
         registerGlyphs(birdData);
         registerGlyphs(birdData);
         registerGlyphSet(glyphDataSet);
         registerGlyphSet(glyphDataSet);
         registerGlyphSet(badgeDataSet);
         registerGlyphSet(badgeDataSet);
@@ -595,6 +594,10 @@
                 addGlyph: addGlyph
                 addGlyph: addGlyph
             };
             };
         }]
         }]
-    );
+    )
+    .run(['$log', function ($log) {
+        $log.debug('Clearing glyph cache');
+        clear();
+    }]);
 
 
 }());
 }());

@@ -30,7 +30,7 @@
 
 
     // references to injected services etc.
     // references to injected services etc.
     var $scope, $log, $cookies, fs, ks, zs, gs, ms, sus, flash, wss, ps,
     var $scope, $log, $cookies, fs, ks, zs, gs, ms, sus, flash, wss, ps,
-        tes, tfs, tps, tis, tss, tls, tts, tos, fltr, ttbs, ttip;
+        tes, tfs, tps, tis, tss, tls, tts, tos, fltr, ttbs, ttip, tov;
 
 
     // DOM elements
     // DOM elements
     var ovtopo, svg, defs, zoomLayer, mapG, spriteG, forceG, noDevsLayer;
     var ovtopo, svg, defs, zoomLayer, mapG, spriteG, forceG, noDevsLayer;
@@ -396,11 +396,12 @@
             'TopoInstService', 'TopoSelectService', 'TopoLinkService',
             'TopoInstService', 'TopoSelectService', 'TopoLinkService',
             'TopoTrafficService', 'TopoObliqueService', 'TopoFilterService',
             'TopoTrafficService', 'TopoObliqueService', 'TopoFilterService',
             'TopoToolbarService', 'TopoSpriteService', 'TooltipService',
             'TopoToolbarService', 'TopoSpriteService', 'TooltipService',
+            'TopoOverlayService',
 
 
         function (_$scope_, _$log_, $loc, $timeout, _$cookies_, _fs_, mast, _ks_,
         function (_$scope_, _$log_, $loc, $timeout, _$cookies_, _fs_, mast, _ks_,
                   _zs_, _gs_, _ms_, _sus_, _flash_, _wss_, _ps_, _tes_, _tfs_,
                   _zs_, _gs_, _ms_, _sus_, _flash_, _wss_, _ps_, _tes_, _tfs_,
                   _tps_, _tis_, _tss_, _tls_, _tts_, _tos_, _fltr_, _ttbs_, tspr,
                   _tps_, _tis_, _tss_, _tls_, _tts_, _tos_, _fltr_, _ttbs_, tspr,
-                  _ttip_) {
+                  _ttip_, _tov_) {
             var projection,
             var projection,
                 dim,
                 dim,
                 uplink = {
                 uplink = {
@@ -438,6 +439,7 @@
             fltr = _fltr_;
             fltr = _fltr_;
             ttbs = _ttbs_;
             ttbs = _ttbs_;
             ttip = _ttip_;
             ttip = _ttip_;
+            tov = _tov_;
 
 
             $scope.notifyResize = function () {
             $scope.notifyResize = function () {
                 svgResized(fs.windowSize(mast.mastHeight()));
                 svgResized(fs.windowSize(mast.mastHeight()));
@@ -496,6 +498,8 @@
             // temporary solution for persisting user settings
             // temporary solution for persisting user settings
             restoreConfigFromPrefs();
             restoreConfigFromPrefs();
 
 
+            $log.debug('registered overlays...', tov.list());
+
             $log.log('OvTopoCtrl has been created');
             $log.log('OvTopoCtrl has been created');
         }]);
         }]);
 }());
 }());

+/*
+ * Copyright 2015 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 Overlay Module.
+
+ Provides overlay capabilities, allowing ONOS apps to provide additional
+ custom data/behavior for the topology view.
+
+ */
+
+(function () {
+    'use strict';
+
+    // constants
+    var tos = 'TopoOverlayService: ';
+
+    // injected refs
+    var $log, fs, gs;
+
+    // internal state
+    var overlays = {};
+
+    function error(fn, msg) {
+        $log.error(tos + fn + '(): ' + msg);
+    }
+
+    function warn(fn, msg) {
+        $log.warn(tos + fn + '(): ' + msg);
+    }
+
+    function handleGlyph(o) {
+        var gdata = fs.isO(o.glyph),
+            oid,
+            data = {};
+
+        if (!gdata) {
+            o._glyphId = 'unknown';
+        } else {
+            if (gdata.id) {
+                o._glyphId = gdata.id;
+            } else if (gdata.vb && gdata.d) {
+                oid = o.overlayId;
+                data['_' + oid] = gdata.vb;
+                data[oid] = gdata.d;
+                gs.registerGlyphs(data);
+                o._glyphId = oid;
+                $log.debug('registered overlay glyph:', oid);
+            } else {
+                warn('registerGlyph', 'problem with glyph data');
+            }
+        }
+    }
+
+    function register(overlay) {
+        var r = 'register',
+            over = fs.isO(overlay),
+            id = over ? over.overlayId : '';
+
+        if (!id) {
+            return error(r, 'not a recognized overlay');
+        }
+        if (overlays[id]) {
+            return warn(r, 'already registered: "' + id + '"');
+        }
+        overlays[id] = overlay;
+        handleGlyph(overlay);
+        $log.debug(tos + 'registered overlay: ' + id, overlay);
+    }
+
+    // NOTE: unregister needs to be called if an app is ever
+    //       deactivated/uninstalled via the applications view
+    function unregister(overlay) {
+        var u = 'unregister',
+            over = fs.isO(overlay),
+            id = over ? over.overlayId : '';
+
+        if (!id) {
+            return error(u, 'not a recognized overlay');
+        }
+        if (!overlays[id]) {
+            return warn(u, 'not registered: "' + id + "'")
+        }
+        delete overlays[id];
+        $log.debug(tos + 'unregistered overlay: ' + id);
+        // TODO: rebuild the toolbar overlay radio button set
+    }
+
+    function list() {
+        return d3.map(overlays).keys();
+    }
+
+    function overlay(id) {
+        return overlays[id];
+    }
+
+    angular.module('ovTopo')
+    .factory('TopoOverlayService',
+        ['$log', 'FnService', 'GlyphService',
+
+        function (_$log_, _fs_, _gs_) {
+            $log = _$log_;
+            fs = _fs_;
+            gs = _gs_;
+
+            return {
+                register: register,
+                unregister: unregister,
+                list: list,
+                overlay: overlay
+            }
+        }]);
+
+}());
\ No newline at end of file

@@ -23,7 +23,7 @@
     'use strict';
     'use strict';
 
 
     // injected references
     // injected references
-    var $log, fs, tbs, ps, api;
+    var $log, fs, tbs, ps, tov, api;
 
 
     // internal state
     // internal state
     var toolbar, keyData, cachedState;
     var toolbar, keyData, cachedState;
@@ -142,13 +142,50 @@
         addToggle('B');
         addToggle('B');
         addToggle('S', true);
         addToggle('S', true);
     }
     }
+
     function addSecondRow() {
     function addSecondRow() {
         //addToggle('X');
         //addToggle('X');
         addToggle('Z');
         addToggle('Z');
         addButton('N');
         addButton('N');
         addButton('L');
         addButton('L');
         addButton('R');
         addButton('R');
+        toolbar.addSeparator();
+        addButton('E');
+    }
+
+    function setOverlay(overlayId) {
+        if (!overlayId) {
+            $log.debug('CLEAR overlay');
+        } else {
+            $log.debug('SET overlay', overlayId);
+        }
+    }
+
+    function addOverlays() {
+        toolbar.addSeparator();
+
+        // generate radio button set for overlays; start with 'none'
+        var rset = [{
+                gid: 'unknown',
+                tooltip: 'No Overlay',
+                cb: function () { setOverlay(); }
+            }];
+
+        tov.list().forEach(function (key) {
+            var ov = tov.overlay(key);
+            rset.push({
+                gid: ov._glyphId,
+                tooltip: (ov.tooltip || '(no tooltip)'),
+                cb: function () {
+                    setOverlay(ov.overlayId);
+                }
+            });
+        });
+
+        toolbar.addRadioSet('topo-overlays', rset);
     }
     }
+
+    // TODO: 3rd row needs to be swapped in/out based on selected overlay
     function addThirdRow() {
     function addThirdRow() {
         addButton('V');
         addButton('V');
         addButton('leftArrow');
         addButton('leftArrow');
@@ -156,8 +193,6 @@
         addButton('W');
         addButton('W');
         addButton('A');
         addButton('A');
         addButton('F');
         addButton('F');
-        toolbar.addSeparator();
-        addButton('E');
     }
     }
 
 
     function createToolbar() {
     function createToolbar() {
@@ -166,8 +201,10 @@
         addFirstRow();
         addFirstRow();
         toolbar.addRow();
         toolbar.addRow();
         addSecondRow();
         addSecondRow();
+        addOverlays();
         toolbar.addRow();
         toolbar.addRow();
         addThirdRow();
         addThirdRow();
+
         if (cachedState.toolbar) {
         if (cachedState.toolbar) {
             toolbar.show();
             toolbar.show();
         } else {
         } else {
@@ -199,12 +236,14 @@
     angular.module('ovTopo')
     angular.module('ovTopo')
         .factory('TopoToolbarService',
         .factory('TopoToolbarService',
         ['$log', 'FnService', 'ToolbarService', 'PrefsService',
         ['$log', 'FnService', 'ToolbarService', 'PrefsService',
+            'TopoOverlayService',
 
 
-        function (_$log_, _fs_, _tbs_, _ps_) {
+        function (_$log_, _fs_, _tbs_, _ps_, _tov_) {
             $log = _$log_;
             $log = _$log_;
             fs = _fs_;
             fs = _fs_;
             tbs = _tbs_;
             tbs = _tbs_;
             ps = _ps_;
             ps = _ps_;
+            tov = _tov_;
 
 
             return {
             return {
                 init: init,
                 init: init,

+/*
+ * Copyright 2015 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 Traffic Module.
+ Defines behavior for viewing different traffic modes.
+ Installed as a Topology Overlay.
+ */
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log;
+
+    // traffic overlay definition
+    var overlay = {
+        overlayId: 'traffic',
+        glyph: { id: 'allTraffic' },
+        tooltip: 'Traffic Overlay',
+
+        activate: activateTraffic,
+        deactivate: deactivateTraffic
+    };
+
+    // === implementation of overlay API (essentially callbacks)
+    function activateTraffic() {
+        $log.debug("Topology traffic overlay ACTIVATED");
+    }
+
+    function deactivateTraffic() {
+        $log.debug("Topology traffic overlay DEACTIVATED");
+    }
+
+
+    // invoke code to register with the overlay service
+    angular.module('ovTopo')
+        .run(['$log', 'TopoOverlayService',
+
+        function (_$log_, tov) {
+            $log = _$log_;
+            tov.register(overlay);
+        }]);
+
+}());

@@ -104,10 +104,12 @@
     <script src="app/view/topo/topoLink.js"></script>
     <script src="app/view/topo/topoLink.js"></script>
     <script src="app/view/topo/topoModel.js"></script>
     <script src="app/view/topo/topoModel.js"></script>
     <script src="app/view/topo/topoOblique.js"></script>
     <script src="app/view/topo/topoOblique.js"></script>
+    <script src="app/view/topo/topoOverlay.js"></script>
     <script src="app/view/topo/topoPanel.js"></script>
     <script src="app/view/topo/topoPanel.js"></script>
     <script src="app/view/topo/topoSelect.js"></script>
     <script src="app/view/topo/topoSelect.js"></script>
     <script src="app/view/topo/topoSprite.js"></script>
     <script src="app/view/topo/topoSprite.js"></script>
     <script src="app/view/topo/topoTraffic.js"></script>
     <script src="app/view/topo/topoTraffic.js"></script>
+    <script src="app/view/topo/topoTrafficNew.js"></script>
     <script src="app/view/topo/topoToolbar.js"></script>
     <script src="app/view/topo/topoToolbar.js"></script>
     <script src="app/view/device/device.js"></script>
     <script src="app/view/device/device.js"></script>
     <script src="app/view/flow/flow.js"></script>
     <script src="app/view/flow/flow.js"></script>