Topo2: Hide Breadcrumbs if there are no subregions configured in root
Change-Id: Ifa62e60b92271b263be6689522e0ccd2205a06c7
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2.css b/web/gui/src/main/webapp/app/view/topo2/topo2.css
index cda26af..5e05ff3 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2.css
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2.css
@@ -19,6 +19,11 @@
ONOS GUI -- Topology View (layout) -- CSS file
*/
+#mast {
+ position: relative;
+ z-index: 1000;
+}
+
/* --- Base SVG Layer --- */
#ov-topo2 svg {
@@ -93,6 +98,9 @@
top: 104px;
}
+.breadcrumb--hidden #topo2-p-instance.floatpanel {
+ top: 64px;
+}
/* -- Base Device Styles -- */
#ov-topo2 svg .node {
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Breadcrumb.js b/web/gui/src/main/webapp/app/view/topo2/topo2Breadcrumb.js
index 3f7cb0e..78e486c 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Breadcrumb.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Breadcrumb.js
@@ -32,13 +32,16 @@
function init() {
$log.debug("Topo2BreadcrumbService Initiated");
breadcrumbs = [];
- breadcrumbContainer = d3.select('#breadcrumbs').append('span')
+ breadcrumbContainer = d3.select('#breadcrumbs');
+
+ breadcrumbContainer
+ .append('span')
.text('Regions: ');
+
render();
}
function addBreadcrumb(crumbs) {
-
breadcrumbContainer.selectAll('.breadcrumb').remove();
breadcrumbs = crumbs.reverse();
render();
@@ -82,6 +85,25 @@
.remove();
}
+ function hide() {
+
+ var view = d3.select('body');
+ view.classed('breadcrumb--hidden', true);
+
+ var startTranslateState = 'translate(0px,0%)',
+ endTranslateState = 'translate(0px,-100%)',
+ translateInterpolator = d3.interpolateString(startTranslateState, endTranslateState);
+
+ breadcrumbContainer
+ .transition()
+ .duration(600)
+ .style('opacity', 0)
+ .styleTween('transform', function (d) {
+ return translateInterpolator;
+ });
+
+ }
+
angular.module('ovTopo2')
.factory('Topo2BreadcrumbService',
['$log', 'WebSocketService',
@@ -93,7 +115,8 @@
return {
init: init,
- addBreadcrumb: addBreadcrumb
+ addBreadcrumb: addBreadcrumb,
+ hide: hide
};
}]);
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
index 8df63d6..b40eff7 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
@@ -23,12 +23,15 @@
'use strict';
// Injected Services
- var $log, t2sr, t2ds, t2hs, t2ls, t2zs, t2dps;
+ var $log, t2sr, t2ds, t2hs, t2ls, t2zs, t2dps, t2bcs;
var Model;
// Internal
var region
+ // 'static' vars
+ var ROOT = '(root)';
+
function init() {}
function addRegion(data) {
@@ -54,7 +57,6 @@
link.createLink();
});
-
// TODO: replace with an algorithm that computes appropriate transition
// based on the location of the "region node" on the parent map
@@ -83,6 +85,11 @@
};
+ // Hide Breadcrumbs if there are no subregions configured in the root region
+ if (isRootRegion() && !region.get('subregions').models.length) {
+ t2bcs.hide();
+ }
+
setTimeout(function () {
var regionPZ = regionPanZooms[region.get('id')];
t2zs.panAndZoom(regionPZ.translate, regionPZ.scale);
@@ -143,8 +150,6 @@
return true;
}
- // TODO: close details panel
-
return false;
}
@@ -167,13 +172,18 @@
return false;
}
+ function isRootRegion() {
+ return region.get('id') === ROOT;
+ }
+
angular.module('ovTopo2')
.factory('Topo2RegionService',
['$log', 'Topo2Model',
'Topo2SubRegionService', 'Topo2DeviceService',
'Topo2HostService', 'Topo2LinkService', 'Topo2ZoomService', 'Topo2DetailsPanelService',
+ 'Topo2BreadcrumbService',
- function (_$log_, _Model_, _t2sr_, _t2ds_, _t2hs_, _t2ls_, _t2zs_, _t2dps_) {
+ function (_$log_, _Model_, _t2sr_, _t2ds_, _t2hs_, _t2ls_, _t2zs_, _t2dps_, _t2bcs_) {
$log = _$log_;
Model = _Model_;
@@ -183,6 +193,7 @@
t2ls = _t2ls_;
t2zs = _t2zs_;
t2dps = _t2dps_;
+ t2bcs = _t2bcs_;
return {
init: init,
@@ -194,8 +205,6 @@
deselectAllNodes: deselectAllNodes,
deselectLink: deselectLink,
-
- getSubRegions: t2sr.getSubRegions
};
}]);