Topo2 - Show the mastership when selecting an instance panel

JIRA Tasks; ONOS-6292

Change-Id: If4e353495138e606c60430547d01f278b062f372

web/gui/src/main/webapp/app/view/topo2/topo2Device.js

@@ -81,6 +81,12 @@
                         detailsPanel.updateDetails(id, nodeType);
                         detailsPanel.show();
                     },
+                    displayMastership: function () {
+                        var id = this.mastershipService.mastership(),
+                            suppress = id ? this.get('master') !== id : false;
+
+                        this.set({ mastership: suppress });
+                    },
                     onExit: function () {
                         var node = this.el;
                         node.select('use')

web/gui/src/main/webapp/app/view/topo2/topo2Force.js

@@ -25,7 +25,7 @@
     // injected refs
     var $log, $loc, wss;
 
-    var t2is, t2rs, t2ls, t2vs, t2bcs, t2ss, t2bgs, t2tbs;
+    var t2is, t2rs, t2ls, t2vs, t2bcs, t2ss, t2bgs, t2tbs, t2mss;
     var svg, forceG, uplink, dim, opts, zoomer;
 
     // D3 Selections
@@ -49,6 +49,7 @@
         t2ss.init(svg, zoomer);
         t2ss.region = t2rs;
         t2rs.layout = t2ls;
+        t2mss.region = t2rs;
         t2tbs.init();
         navToBookmarkedRegion($loc.search().regionId);
     }
@@ -120,25 +121,6 @@
 
     // ========================== Main Service Definition
 
-    function showMastershipFor(id) {
-        suppressLayers(true);
-        node.each(function (n) {
-            if (n.master === id) {
-                n.el.classed('suppressedmax', false);
-            }
-        });
-    }
-
-    function supAmt(less) {
-        return less ? 'suppressed' : 'suppressedmax';
-    }
-
-    function suppressLayers(b, less) {
-        var cls = supAmt(less);
-        node.classed(cls, b);
-        // link.classed(cls, b);
-    }
-
     function newDim(_dim_) {
         dim = _dim_;
         t2vs.newDim(dim);
@@ -189,9 +171,9 @@
         '$log', '$location', 'WebSocketService', 'Topo2InstanceService',
         'Topo2RegionService', 'Topo2LayoutService', 'Topo2ViewService',
         'Topo2BreadcrumbService', 'Topo2ZoomService', 'Topo2SelectService',
-        'Topo2BackgroundService', 'Topo2ToolbarService',
+        'Topo2BackgroundService', 'Topo2ToolbarService', 'Topo2MastershipService',
         function (_$log_, _$loc_, _wss_, _t2is_, _t2rs_, _t2ls_,
-            _t2vs_, _t2bcs_, zoomService, _t2ss_, _t2bgs_, _t2tbs_) {
+            _t2vs_, _t2bcs_, zoomService, _t2ss_, _t2bgs_, _t2tbs_, _t2mss_) {
 
             $log = _$log_;
             $loc = _$loc_;
@@ -204,6 +186,7 @@
             t2ss = _t2ss_;
             t2bgs = _t2bgs_;
             t2tbs = _t2tbs_;
+            t2mss = _t2mss_;
 
             var onZoom = function () {
                 if (!t2rs.isLoadComplete()) {

web/gui/src/main/webapp/app/view/topo2/topo2Instance.js

@@ -2,7 +2,7 @@
     'use strict';
 
     // injected refs
-    var $log, ps, sus, gs, flash, ts;
+    var $log, ps, sus, gs, flash, ts, t2mss;
 
     // api from topo
     var api;
@@ -61,15 +61,14 @@
             .classed('affinity', false);
         el.classed('affinity', true);
 
-        // suppress all elements except nodes whose master is this instance
+        t2mss.setMastership(d.id);
-        api.showMastership(d.id);
     }
 
     function cancelAffinity() {
         d3.selectAll('.onosInst')
             .classed('mastership affinity', false);
 
-        api.showMastership(null);
+        t2mss.setMastership(null);
     }
 
     function attachUiBadge(svg) {
@@ -271,15 +270,16 @@
     angular.module('ovTopo2')
         .factory('Topo2InstanceService', [
             '$log', 'PanelService', 'SvgUtilService', 'GlyphService',
-            'FlashService', 'ThemeService',
+            'FlashService', 'ThemeService', 'Topo2MastershipService',
 
-            function (_$log_, _ps_, _sus_, _gs_, _flash_, _ts_) {
+            function (_$log_, _ps_, _sus_, _gs_, _flash_, _ts_, _t2mss_) {
                 $log = _$log_;
                 ps = _ps_;
                 sus = _sus_;
                 gs = _gs_;
                 flash = _flash_;
                 ts = _ts_;
+                t2mss = _t2mss_;
 
                 return {
                     initInst: initInst,

web/gui/src/main/webapp/app/view/topo2/topo2Link.js

@@ -22,7 +22,7 @@
 (function () {
     'use strict';
 
-    var $log, Collection, Model, ts, sus, t2zs, t2vs, t2lps, fn, ps;
+    var $log, Collection, Model, ts, sus, t2zs, t2vs, t2lps, fn, ps, t2mss;
 
     var linkLabelOffset = '0.35em';
 
@@ -134,7 +134,8 @@
                     this.get('type'),
                     {
                         enhanced: this.get('enhanced'),
-                        selected: this.get('selected')
+                        selected: this.get('selected'),
+                        suppressedmax: this.get('mastership')
                     }
                 );
             },
@@ -346,6 +347,9 @@
                 var visible = ps.getPrefs('topo2_prefs')['hosts'];
                 this.el.style('visibility', visible ? 'visible' : 'hidden');
             },
+            displayMastership: function () {
+                this.set({ mastership: t2mss.mastership() !== null});
+            },
             remove: function () {
 
                 var width = linkScale(widthRatio) / t2zs.scale();
@@ -376,8 +380,9 @@
         '$log', 'Topo2Collection', 'Topo2Model',
         'ThemeService', 'SvgUtilService', 'Topo2ZoomService',
         'Topo2ViewService', 'Topo2LinkPanelService', 'FnService', 'PrefsService',
+        'Topo2MastershipService',
         function (_$log_, _c_, _Model_, _ts_, _sus_,
-            _t2zs_, _t2vs_, _t2lps_, _fn_, _ps_) {
+            _t2zs_, _t2vs_, _t2lps_, _fn_, _ps_, _t2mss_) {
 
             $log = _$log_;
             ts = _ts_;
@@ -389,6 +394,7 @@
             t2lps = _t2lps_;
             fn = _fn_;
             ps = _ps_;
+            t2mss = _t2mss_;
 
             return {
                 createLinkCollection: createLinkCollection

web/gui/src/main/webapp/app/view/topo2/topo2Mastership.js

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2017-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 Mastership controller.
+ Controller that handles the state of the selected mastership
+ */
+
+(function () {
+
+    var instance;
+
+    angular.module('ovTopo2')
+        .factory('Topo2MastershipService', [
+
+            function () {
+
+                var MastershipController = function () {
+                    instance = this;
+                    this.region = null;
+                    this.currentMastership = null;
+                };
+
+                MastershipController.prototype = {
+                    displayMastership: function () {
+                        var nodes = this.region.regionNodes(),
+                            links = this.region.regionLinks();
+
+                        _.each(nodes.concat(links), function (n) {
+                            n.displayMastership(this.currentMastership);
+                        });
+                    },
+                    mastership: function () {
+                        return this.currentMastership;
+                    },
+                    setMastership: function (id) {
+                        this.currentMastership = id;
+                        this.displayMastership();
+                    }
+                }
+
+                return instance || new MastershipController();
+            }
+        ]);
+})();

web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js

@@ -54,9 +54,9 @@
         'Topo2Model', 'FnService', 'Topo2PrefsService',
         'SvgUtilService', 'IconService', 'ThemeService',
         'Topo2MapConfigService', 'Topo2ZoomService', 'Topo2NodePositionService',
-        'Topo2SelectService',
+        'Topo2SelectService', 'Topo2MastershipService',
         function (Model, _fn_, _ps_, _sus_, _is_, _ts_,
-            _t2mcs_, zoomService, _t2nps_, t2ss) {
+            _t2mcs_, zoomService, _t2nps_, t2ss, t2mss) {
 
             ts = _ts_;
             fn = _fn_;
@@ -69,6 +69,7 @@
             return Model.extend({
                 initialize: function () {
                     this.node = this.createNode();
+                    this.mastershipService = t2mss;
                     this._events = {
                         'mouseover': 'mouseoverHandler',
                         'mouseout': 'mouseoutHandler'
@@ -202,7 +203,8 @@
                             online: this.get('online'),
                             selected: this.get('selected'),
                             hovered: this.get('hovered'),
-                            fixed: this.get('fixed')
+                            fixed: this.get('fixed'),
+                            suppressedmax: this.get('mastership')
                         }
                     );
                 },
@@ -213,6 +215,9 @@
                 resetPosition: function () {
                     t2nps.setLongLat(this);
                 },
+                displayMastership: function () {
+                    this.set({ mastership: t2mss.mastership() !== null});
+                },
                 update: function () {
                     this.updateLabel();
                 },

web/gui/src/main/webapp/index.html

@@ -153,6 +153,7 @@
     <script src="app/view/topo2/topo2MapCountryFilters.js"></script>
     <script src="app/view/topo2/topo2MapConfig.js"></script>
     <script src="app/view/topo2/topo2MapDialog.js"></script>
+    <script src="app/view/topo2/topo2Mastership.js"></script>
     <script src="app/view/topo2/topo2Model.js"></script>
     <script src="app/view/topo2/topo2NodeModel.js"></script>
     <script src="app/view/topo2/topo2NodePosition.js"></script>