ONOS-1749, ONOS-2386 - GUI -- Can jump to selected device in Device View from To…

…po View by clicking on Detail Panel title or action button. Bug fix for deselecting action buttons on Device View upon details panel close.

Change-Id: If0afe487cf486c17cca7a5950e2a49d3bd8d28bb

@@ -24,3 +24,8 @@
     padding-top: 20px;
     padding-bottom: 20px;
 }
+
+.clickable {
+    cursor: pointer;
+}
+

@@ -22,13 +22,13 @@
     'use strict';
 
     // injected refs
-    var $log, $scope, fs, mast, ps, wss, is, ns;
+    var $log, $scope, $location, fs, mast, ps, wss, is, ns;
 
     // internal state
     var detailsPanel,
         pStartY, pHeight,
         top, bottom, iconDiv,
-        wSize, selRow;
+        wSize;
 
     // constants
     var topPdg = 13,
@@ -60,8 +60,8 @@
         div.select('g').attr('transform', 'translate(25, 0) rotate(45)');
 
         div.on('click', function () {
+            $scope.selId = null;
             detailsPanel.hide();
-            selRow.removeClass('selected');
         });
     }
 
@@ -187,28 +187,39 @@
 
     angular.module('ovDevice', [])
     .controller('OvDeviceCtrl',
-        ['$log', '$scope', 'TableBuilderService', 'FnService',
+        ['$log', '$scope', '$location', 'TableBuilderService', 'FnService',
             'MastService', 'PanelService', 'WebSocketService', 'IconService',
             'NavService',
 
-        function (_$log_, _$scope_,
+        function (_$log_, _$scope_, _$location_,
                   tbs, _fs_, _mast_, _ps_, _wss_, _is_, _ns_) {
             $log = _$log_;
             $scope = _$scope_;
+            $location = _$location_;
             fs = _fs_;
             mast = _mast_;
             ps = _ps_;
             wss = _wss_;
             is = _is_;
             ns = _ns_;
-            var handlers = {};
+            var params = $location.search(),
+                handlers = {};
             $scope.panelData = [];
             $scope.flowTip = 'Show flow view for selected device';
             $scope.portTip = 'Show port view for selected device';
             $scope.groupTip = 'Show group view for selected device';
 
+            // details panel handlers
+            handlers[detailsResp] = respDetailsCb;
+            wss.bindHandlers(handlers);
+
+            // query for if a certain device needs to be highlighted
+            if (params.hasOwnProperty('devId')) {
+                $scope.selId = params['devId'];
+                wss.sendEvent(detailsReq, { id: $scope.selId });
+            }
+
             function selCb($event, row) {
-                selRow = angular.element($event.currentTarget);
                 if ($scope.selId) {
                     wss.sendEvent(detailsReq, { id: row.id });
                 } else {
@@ -223,10 +234,6 @@
                 selCb: selCb
             });
 
-            // details panel handlers
-            handlers[detailsResp] = respDetailsCb;
-            wss.bindHandlers(handlers);
-
             $scope.nav = function (path) {
                 if ($scope.selId) {
                     ns.navTo(path, { devId: $scope.selId });

@@ -23,7 +23,7 @@
     'use strict';
 
     // injected refs
-    var $log, $window, $rootScope, fs, ps, gs, flash, wss, bns, mast;
+    var $log, $window, $rootScope, fs, ps, gs, flash, wss, bns, mast, ns;
 
     // constants
     var pCls = 'topo-p',
@@ -33,7 +33,8 @@
             width: 260
         },
         sumMax = 240,
-        padTop = 20;
+        padTop = 20,
+        devPath = 'device';
 
     // internal state
     var useDetails = true,      // should we show details if we have 'em?
@@ -218,14 +219,22 @@
         detail.setup();
 
         var svg = detail.appendHeader('div')
-                .classed('icon', true)
+                .classed('icon clickable', true)
                 .append('svg'),
-            title = detail.appendHeader('h2'),
+            title = detail.appendHeader('h2')
+                .classed('clickable', true),
             table = detail.appendBody('table'),
             tbody = table.append('tbody');
 
         gs.addGlyph(svg, (data.type || 'unknown'), 40);
         title.text(data.id);
+        svg.on('click', function () {
+            ns.navTo(devPath, { devId: data.id });
+        });
+        title.on('click', function () {
+            ns.navTo(devPath, { devId: data.id });
+        });
+
         listProps(tbody, data);
         addBtnFooter();
     }
@@ -475,9 +484,10 @@
     .factory('TopoPanelService',
         ['$log', '$window', '$rootScope', 'FnService', 'PanelService', 'GlyphService',
             'FlashService', 'WebSocketService', 'ButtonService', 'MastService',
+            'NavService',
 
         function (_$log_, _$window_, _$rootScope_,
-                  _fs_, _ps_, _gs_, _flash_, _wss_, _bns_, _mast_) {
+                  _fs_, _ps_, _gs_, _flash_, _wss_, _bns_, _mast_, _ns_) {
             $log = _$log_;
             $window = _$window_;
             $rootScope = _$rootScope_;
@@ -488,6 +498,7 @@
             wss = _wss_;
             bns = _bns_;
             mast = _mast_;
+            ns = _ns_;
 
             return {
                 initPanels: initPanels,

@@ -41,7 +41,8 @@
         consumeClick = false;   // used to coordinate with SVG click handler
 
     // constants
-    var flowPath = 'flow',
+    var devPath = 'device',
+        flowPath = 'flow',
         portPath ='port',
         groupPath = 'group';
 
@@ -252,6 +253,14 @@
         // for now, we assume the node is a device if it has a URI
         if ((data.props).hasOwnProperty('URI')) {
             tps.addAction({
+                id: 'device-table-btn',
+                gid: data.type,
+                cb: function () {
+                    ns.navTo(devPath, { devId: data.props['URI'] });
+                },
+                tt: 'Show device view'
+            });
+            tps.addAction({
                 id: 'flows-table-btn',
                 gid: 'flowTable',
                 cb: function () {