Added Breadcrumbs module
Change-Id: Iba897409f728ffa7e58681788c63e3c251cd8358
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 6ec4f02..160525c 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2.css
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2.css
@@ -50,3 +50,19 @@
text-decoration: underline;
cursor: pointer;
}
+
+#breadcrumbs {
+ position: absolute;
+ padding: 10px 30px;
+ top: 54px;
+ width: 100%;
+}
+
+#breadcrumbs .breadcrumb {
+ display: inline-block;
+ margin-right: 20px;
+}
+
+.floatpanel {
+ top: 104px;
+}
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2.html b/web/gui/src/main/webapp/app/view/topo2/topo2.html
index 32913a9..6d6dbb5 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2.html
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2.html
@@ -33,7 +33,7 @@
<!-- Below here is good; Above here is temporary, for debugging -->
<svg viewBox="0 0 1000 1000"
- resize offset-height="56" offset-width="12"
- notifier="notifyResize()">
+ resize offset-height="56" offset-width="12"
+ notifier="notifyResize()">
</svg>
</div>
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2.js b/web/gui/src/main/webapp/app/view/topo2/topo2.js
index f62bf5c..ee6fa78 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2.js
@@ -28,7 +28,7 @@
fs, mast, ks, zs,
gs, ms, sus, flash,
wss, ps, th,
- t2es, t2fs, t2is;
+ t2es, t2fs, t2is, t2bcs;
// DOM elements
var ovtopo2, svg, defs, zoomLayer, mapG, spriteG, forceG, noDevsLayer;
@@ -92,12 +92,13 @@
'GlyphService', 'MapService', 'SvgUtilService', 'FlashService',
'WebSocketService', 'PrefsService', 'ThemeService',
'Topo2EventService', 'Topo2ForceService', 'Topo2InstanceService',
+ 'Topo2BreadcrumbService',
function (_$scope_, _$log_, _$loc_,
_fs_, _mast_, _ks_, _zs_,
_gs_, _ms_, _sus_, _flash_,
_wss_, _ps_, _th_,
- _t2es_, _t2fs_, _t2is_) {
+ _t2es_, _t2fs_, _t2is_, _t2bcs_) {
var params = _$loc_.search(),
projection,
@@ -134,6 +135,7 @@
t2es = _t2es_;
t2fs = _t2fs_;
t2is = _t2is_;
+ t2bcs = _t2bcs_;
// capture selected intent parameters (if they are set in the
// query string) so that the traffic overlay can highlight
@@ -179,6 +181,7 @@
// initialize the force layout, ready to render the topology
forceG = zoomLayer.append('g').attr('id', 'topo-force');
t2fs.init(svg, forceG, uplink, dim);
+ t2bcs.init();
// =-=-=-=-=-=-=-=-
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Breadcrumb.js b/web/gui/src/main/webapp/app/view/topo2/topo2Breadcrumb.js
new file mode 100644
index 0000000..d089acb
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Breadcrumb.js
@@ -0,0 +1,102 @@
+/*
+ * 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 Breadcrumb Module.
+ Module that renders the breadcrumbs for regions
+ */
+
+ (function () {
+ 'use strict';
+
+ var $log, wss;
+
+ var breadcrumbContainer,
+ breadcrumbs;
+
+ function init() {
+
+ breadcrumbs = [];
+ breadcrumbContainer = d3.select('#breadcrumbs');
+ render();
+ }
+
+ function addBreadcrumb(crumbs) {
+
+ // If `crumbs` is an array, merge with breadcrumbs;
+ if (crumbs.length) {
+ breadcrumbs = breadcrumbs.concat(crumbs);
+ } else {
+ breadcrumbs.push(crumbs);
+ }
+
+ render();
+ }
+
+ function navigateToRegion(data, index) {
+
+ if (index === breadcrumbs.length - 1) {
+ return;
+ }
+
+ // Remove breadcrumbs after index;
+ breadcrumbs.splice(index + 1);
+
+ wss.sendEvent('topo2navRegion', {
+ dir: 'up',
+ rid: data.id
+ });
+
+ render();
+ }
+
+ function render() {
+
+ var selection = breadcrumbContainer.selectAll('.breadcrumb')
+ .data(breadcrumbs);
+
+ selection.enter()
+ .append('div')
+ .attr('class', 'breadcrumb')
+ .on('click', navigateToRegion)
+ .append('text')
+ .text(function (d) {
+ return d.name;
+ });
+
+ selection.exit()
+ .transition()
+ .duration(200)
+ .style('opacity', 0)
+ .remove();
+ }
+
+ angular.module('ovTopo2')
+ .factory('Topo2BreadcrumbService',
+ ['$log', 'WebSocketService',
+
+ function (_$log_, _wss_) {
+
+ $log = _$log_;
+ wss = _wss_;
+
+ return {
+ init: init,
+ addBreadcrumb: addBreadcrumb
+ };
+ }]);
+
+})();
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 88bf086..5a4b528 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Device.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Device.js
@@ -107,7 +107,7 @@
id = "127.0.0.1", // TODO: This should be from node.master
otag = o ? 'online' : 'offline';
return o ? sus.cat7().getColor(id, 0, ts.theme())
- : dColTheme[ts.theme()][otag];
+ : '#ff0000';
}
function setDeviceColor() {
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 bbd7f8d..fb9d09e4 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Force.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Force.js
@@ -60,7 +60,7 @@
linkLabel,
node;
- var $log, wss, t2is, t2rs, t2ls, t2vs;
+ var $log, wss, t2is, t2rs, t2ls, t2vs, t2bcs;
var svg, forceG, uplink, dim, opts;
// ========================== Helper Functions
@@ -155,6 +155,7 @@
function currentLayout(data) {
$log.debug('>> topo2CurrentLayout event:', data);
+ t2bcs.addBreadcrumb(data.crumbs);
}
function currentRegion(data) {
@@ -232,8 +233,8 @@
angular.module('ovTopo2')
.factory('Topo2ForceService',
['$log', 'WebSocketService', 'Topo2InstanceService', 'Topo2RegionService',
- 'Topo2LayoutService', 'Topo2ViewService',
- function (_$log_, _wss_, _t2is_, _t2rs_, _t2ls_, _t2vs_) {
+ 'Topo2LayoutService', 'Topo2ViewService', 'Topo2BreadcrumbService',
+ function (_$log_, _wss_, _t2is_, _t2rs_, _t2ls_, _t2vs_, _t2bcs_) {
$log = _$log_;
wss = _wss_;
@@ -241,6 +242,7 @@
t2rs = _t2rs_;
t2ls = _t2ls_;
t2vs = _t2vs_;
+ t2bcs = _t2bcs_;
return {
diff --git a/web/gui/src/main/webapp/index.html b/web/gui/src/main/webapp/index.html
index 18e250f..3c0d721 100644
--- a/web/gui/src/main/webapp/index.html
+++ b/web/gui/src/main/webapp/index.html
@@ -127,6 +127,7 @@
<!-- Under development for Region support. -->
<script src="app/view/topo2/topo2.js"></script>
+ <script src="app/view/topo2/topo2Breadcrumb.js"></script>
<script src="app/view/topo2/topo2Collection.js"></script>
<script src="app/view/topo2/topo2D3.js"></script>
<script src="app/view/topo2/topo2Device.js"></script>
@@ -231,6 +232,7 @@
ng-controller="NavCtrl as navCtrl"
ng-include="'nav.html'"></div>
+ <div id="breadcrumbs"></div>
<div id="floatpanels"></div>
<div id="alerts"></div>
<div id="tooltip"></div>
diff --git a/web/gui/src/test/_karma/ev/topo2a/ev_2_currentLayout.json b/web/gui/src/test/_karma/ev/topo2a/ev_2_currentLayout.json
index 59e7393..51e0d83 100644
--- a/web/gui/src/test/_karma/ev/topo2a/ev_2_currentLayout.json
+++ b/web/gui/src/test/_karma/ev/topo2a/ev_2_currentLayout.json
@@ -4,6 +4,20 @@
"id": "_default_",
"parent": "",
"region": "",
- "regionName": ""
+ "regionName": "",
+ "crumbs": [
+ {
+ "id": "(root)",
+ "name": "(root)"
+ },
+ {
+ "id": "r1",
+ "name": "Region-One"
+ },
+ {
+ "id": "r3",
+ "name": "Region-Three"
+ }
+ ]
}
}