From c515e6060fa69c71d2428d1de28d48760cdeb340 Mon Sep 17 00:00:00 2001 From: Steven Burrows Date: Thu, 13 Apr 2017 11:17:40 -0700 Subject: [PATCH] Topo2 - Show the mastership when selecting an instance panel JIRA Tasks; ONOS-6292 Change-Id: If4e353495138e606c60430547d01f278b062f372 --- .../main/webapp/app/view/topo2/topo2Device.js | 6 ++ .../main/webapp/app/view/topo2/topo2Force.js | 27 ++------- .../webapp/app/view/topo2/topo2Instance.js | 12 ++-- .../main/webapp/app/view/topo2/topo2Link.js | 12 +++- .../webapp/app/view/topo2/topo2Mastership.js | 58 +++++++++++++++++++ .../webapp/app/view/topo2/topo2NodeModel.js | 11 +++- web/gui/src/main/webapp/index.html | 1 + 7 files changed, 93 insertions(+), 34 deletions(-) create mode 100644 web/gui/src/main/webapp/app/view/topo2/topo2Mastership.js diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Device.js b/web/gui/src/main/webapp/app/view/topo2/topo2Device.js index fadcd9330c..6eb5704532 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2Device.js +++ b/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') diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Force.js b/web/gui/src/main/webapp/app/view/topo2/topo2Force.js index cfc3b7128e..b18ff326df 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2Force.js +++ b/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()) { diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Instance.js b/web/gui/src/main/webapp/app/view/topo2/topo2Instance.js index 8a3cf20026..044e3d6d5e 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2Instance.js +++ b/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 - api.showMastership(d.id); + t2mss.setMastership(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, diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Link.js b/web/gui/src/main/webapp/app/view/topo2/topo2Link.js index b4b7d95fea..f19f2df277 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2Link.js +++ b/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 diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Mastership.js b/web/gui/src/main/webapp/app/view/topo2/topo2Mastership.js new file mode 100644 index 0000000000..7b1735f0aa --- /dev/null +++ b/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(); + } + ]); +})(); \ No newline at end of file diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js b/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js index ccedaffd24..fb383d2a08 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js +++ b/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(); }, diff --git a/web/gui/src/main/webapp/index.html b/web/gui/src/main/webapp/index.html index 342f25d730..06d5a310f7 100644 --- a/web/gui/src/main/webapp/index.html +++ b/web/gui/src/main/webapp/index.html @@ -153,6 +153,7 @@ +