Added Breadcrumbs module
Change-Id: Iba897409f728ffa7e58681788c63e3c251cd8358
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
+ };
+ }]);
+
+})();