Added Breadcrumbs module

Change-Id: Iba897409f728ffa7e58681788c63e3c251cd8358

@@ -50,3 +50,19 @@
     text-decoration: underline;
     text-decoration: underline;
     cursor: pointer;
     cursor: pointer;
 }
 }
+
+#breadcrumbs {
+    position: absolute;
+    padding: 10px 30px;
+    top: 54px;
+    width: 100%;
+}
+
+#breadcrumbs .breadcrumb {
+    display: inline-block;
+    margin-right: 20px;
+}
+
+.floatpanel {
+    top: 104px;
+}

@@ -28,7 +28,7 @@
         fs, mast, ks, zs,
         fs, mast, ks, zs,
         gs, ms, sus, flash,
         gs, ms, sus, flash,
         wss, ps, th,
         wss, ps, th,
-        t2es, t2fs, t2is;
+        t2es, t2fs, t2is, t2bcs;
 
 
     // DOM elements
     // DOM elements
     var ovtopo2, svg, defs, zoomLayer, mapG, spriteG, forceG, noDevsLayer;
     var ovtopo2, svg, defs, zoomLayer, mapG, spriteG, forceG, noDevsLayer;
@@ -92,12 +92,13 @@
         'GlyphService', 'MapService', 'SvgUtilService', 'FlashService',
         'GlyphService', 'MapService', 'SvgUtilService', 'FlashService',
         'WebSocketService', 'PrefsService', 'ThemeService',
         'WebSocketService', 'PrefsService', 'ThemeService',
         'Topo2EventService', 'Topo2ForceService', 'Topo2InstanceService',
         'Topo2EventService', 'Topo2ForceService', 'Topo2InstanceService',
+        'Topo2BreadcrumbService',
 
 
         function (_$scope_, _$log_, _$loc_,
         function (_$scope_, _$log_, _$loc_,
             _fs_, _mast_, _ks_, _zs_,
             _fs_, _mast_, _ks_, _zs_,
             _gs_, _ms_, _sus_, _flash_,
             _gs_, _ms_, _sus_, _flash_,
             _wss_, _ps_, _th_,
             _wss_, _ps_, _th_,
-            _t2es_, _t2fs_, _t2is_) {
+            _t2es_, _t2fs_, _t2is_, _t2bcs_) {
 
 
             var params = _$loc_.search(),
             var params = _$loc_.search(),
                 projection,
                 projection,
@@ -134,6 +135,7 @@
             t2es = _t2es_;
             t2es = _t2es_;
             t2fs = _t2fs_;
             t2fs = _t2fs_;
             t2is = _t2is_;
             t2is = _t2is_;
+            t2bcs = _t2bcs_;
 
 
             // capture selected intent parameters (if they are set in the
             // capture selected intent parameters (if they are set in the
             //  query string) so that the traffic overlay can highlight
             //  query string) so that the traffic overlay can highlight
@@ -179,6 +181,7 @@
             // initialize the force layout, ready to render the topology
             // initialize the force layout, ready to render the topology
             forceG = zoomLayer.append('g').attr('id', 'topo-force');
             forceG = zoomLayer.append('g').attr('id', 'topo-force');
             t2fs.init(svg, forceG, uplink, dim);
             t2fs.init(svg, forceG, uplink, dim);
+            t2bcs.init();
 
 
 
 
             // =-=-=-=-=-=-=-=-
             // =-=-=-=-=-=-=-=-

+/*
+ * 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
+            };
+        }]);
+
+})();

@@ -107,7 +107,7 @@
             id = "127.0.0.1", // TODO: This should be from node.master
             id = "127.0.0.1", // TODO: This should be from node.master
             otag = o ? 'online' : 'offline';
             otag = o ? 'online' : 'offline';
         return o ? sus.cat7().getColor(id, 0, ts.theme())
         return o ? sus.cat7().getColor(id, 0, ts.theme())
-                 : dColTheme[ts.theme()][otag];
+                 : '#ff0000';
     }
     }
 
 
     function setDeviceColor() {
     function setDeviceColor() {

@@ -60,7 +60,7 @@
         linkLabel,
         linkLabel,
         node;
         node;
 
 
-    var $log, wss, t2is, t2rs, t2ls, t2vs;
+    var $log, wss, t2is, t2rs, t2ls, t2vs, t2bcs;
     var svg, forceG, uplink, dim, opts;
     var svg, forceG, uplink, dim, opts;
 
 
     // ========================== Helper Functions
     // ========================== Helper Functions
@@ -155,6 +155,7 @@
 
 
     function currentLayout(data) {
     function currentLayout(data) {
         $log.debug('>> topo2CurrentLayout event:', data);
         $log.debug('>> topo2CurrentLayout event:', data);
+        t2bcs.addBreadcrumb(data.crumbs);
     }
     }
 
 
     function currentRegion(data) {
     function currentRegion(data) {
@@ -232,8 +233,8 @@
     angular.module('ovTopo2')
     angular.module('ovTopo2')
     .factory('Topo2ForceService',
     .factory('Topo2ForceService',
         ['$log', 'WebSocketService', 'Topo2InstanceService', 'Topo2RegionService',
         ['$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_;
             $log = _$log_;
             wss = _wss_;
             wss = _wss_;
@@ -241,6 +242,7 @@
             t2rs = _t2rs_;
             t2rs = _t2rs_;
             t2ls = _t2ls_;
             t2ls = _t2ls_;
             t2vs = _t2vs_;
             t2vs = _t2vs_;
+            t2bcs = _t2bcs_;
 
 
             return {
             return {
 
 

@@ -127,6 +127,7 @@
 
 
     <!-- Under development for Region support. -->
     <!-- Under development for Region support. -->
     <script src="app/view/topo2/topo2.js"></script>
     <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/topo2Collection.js"></script>
     <script src="app/view/topo2/topo2D3.js"></script>
     <script src="app/view/topo2/topo2D3.js"></script>
     <script src="app/view/topo2/topo2Device.js"></script>
     <script src="app/view/topo2/topo2Device.js"></script>
@@ -231,6 +232,7 @@
          ng-controller="NavCtrl as navCtrl"
          ng-controller="NavCtrl as navCtrl"
          ng-include="'nav.html'"></div>
          ng-include="'nav.html'"></div>
 
 
+    <div id="breadcrumbs"></div>
     <div id="floatpanels"></div>
     <div id="floatpanels"></div>
     <div id="alerts"></div>
     <div id="alerts"></div>
     <div id="tooltip"></div>
     <div id="tooltip"></div>

@@ -4,6 +4,20 @@
     "id": "_default_",
     "id": "_default_",
     "parent": "",
     "parent": "",
     "region": "",
     "region": "",
-    "regionName": ""
+    "regionName": "",
+    "crumbs": [
+      {
+        "id": "(root)",
+        "name": "(root)"
+      },
+      {
+        "id": "r1",
+        "name": "Region-One"
+      },
+      {
+        "id": "r3",
+        "name": "Region-Three"
+      }
+    ]
   }
   }
 }
 }