fix gearpump#1892: added instruction text to operate network graph (2…

…) minor tweaks of context menu

services/dashboard/index.html

@@ -77,8 +77,8 @@
 <script src="services/restapi.js"></script>
 <script src="services/health_check_service.js"></script>
 <script src="services/login_check.js"></script>
-<script src="views/widgets/radio_group.js"></script>
-<script src="views/widgets/metrics_period_switcher.js"></script>
+<script src="widgets/radio_group.js"></script>
+<script src="widgets/metrics_period_switcher.js"></script>
 <script src="views/landing/breadcrumbs.js"></script>
 <script src="views/landing/header.js"></script>
 <script src="views/cluster/master/master.js"></script>

services/dashboard/views/apps/apps.js

@@ -45,10 +45,10 @@ angular.module('dashboard')
       };
 
       $scope.composeMenuOptions = [{
-        text: '<i class="glyphicon glyphicon-none"></i> <b>Submit Gearpump Application</b>',
+        text: '<i class="glyphicon glyphicon-none"></i> <b>Submit Gearpump Application...</b>',
         click: $scope.openSubmitGearAppDialog
       }, {
-        text: '<i class="glyphicon glyphicon-none"></i> Submit Storm Application',
+        text: '<i class="glyphicon glyphicon-none"></i> Submit Storm Application...',
         click: $scope.openSubmitStormAppDialog
       }, {
         text: '<i class="glyphicon glyphicon-pencil"></i> Compose DAG',

services/dashboard/views/apps/compose/compose.js

@@ -79,7 +79,7 @@ angular.module('dashboard')
         options: $vis.newOptions(/*height=*/'400px'),
         data: $vis.newData(),
         events: {
-          doubleClick: function(data) {
+          onDoubleClick: function(data) {
             if (data.nodes.length === 1) {
               var processor = $scope.visGraph.data.nodes.get(data.nodes[0]);
               $scope.chooseProcessor(processor);
@@ -90,7 +90,7 @@ angular.module('dashboard')
               $scope.chooseProcessor();
             }
           },
-          oncontext: function(data) {
+          onContext: function(data) {
             if (data.hasOwnProperty('node')) {
               $scope.selectItemModify = function() {
                 $scope.chooseProcessor($scope.visGraph.data.nodes.get(data.node));
@@ -111,7 +111,7 @@ angular.module('dashboard')
             var elem = document.getElementById('contextmenu');
             $contextmenu.popup(elem, data.pointer.DOM);
           },
-          ondeletepressed: function(selection) {
+          onDeletePressed: function(selection) {
             if (selection.nodes.length === 1) {
               deleteProcessor(selection.nodes[0]);
             } else if (selection.edges.length === 1) {

services/dashboard/views/apps/streamingapp/dag.html

@@ -1,10 +1,12 @@
 <div class="col-md-8">
   <div class="panel panel-sm panel-default">
-    <div class="panel-heading">DAG</div>
+    <div class="panel-heading">DAG
+      <remark class="pull-right" type="info"
+              tooltip="The network graph represents the logical relationship of all processors. <b>Double click</b> a processor will show its details. <b>Tap or right click</b> on a processor will show all available operations.">Instructions</remark>
+    </div>
     <div class="panel-body">
       <div class="cm-container" id="dag-node-menu"
-           bs-dropdown html="true"
-           template-url="views/apps/streamingapp/popups/processor_menu.html"></div>
+           bs-dropdown="processorActionMenu" html="true"></div>
       <vis-network
         data="visGraph.data"
         options="visGraph.options"

services/dashboard/views/apps/streamingapp/dag.js

@@ -21,7 +21,17 @@ angular.module('dashboard')
     function($scope, $state, $modal, $contextmenu, $vis) {
       'use strict';
 
-      // todo: while metrics is not available, keep loading, otherwise the bandwidth is not calculable.
+      $scope.activeProcessorId = -1;
+      $scope.processorActionMenu = [{
+        text: '<i class="glyphicon glyphicon-stats"></i> <b>View Details</b>',
+        click: 'view()'
+      }, {
+        text: '<i class="glyphicon glyphicon-none"></i> Change Parallelism...',
+        click: 'modify({parallelism:true})'
+      }, {
+        text: '<i class="glyphicon glyphicon-none"></i> Change More...',
+        click: 'modify()'
+      }];
 
       var editorDialog = $modal({
         templateUrl: "views/apps/streamingapp/popups/dag_edit.html",
@@ -31,6 +41,11 @@ angular.module('dashboard')
         controller: 'StreamingAppDagEditCtrl'
       });
 
+      $scope.view = function() {
+        var options = {processorId: $scope.activeProcessorId};
+        $state.go('streamingapp.processor', options);
+      };
+
       $scope.modify = function(options) {
         $scope.modifyOptions = options;
         editorDialog.$promise.then(editorDialog.show);
@@ -40,27 +55,40 @@ angular.module('dashboard')
         options: $vis.newHierarchicalLayoutOptions({depth: $scope.dag.hierarchyDepth()}),
         data: $vis.newData(),
         events: {
-          doubleClick: function(data) {
+          onDoubleClick: function(data) {
             if (data.nodes.length === 1) {
               var processorId = Number(data.nodes[0]);
               $state.go('streamingapp.processor', {processorId: processorId});
             }
           },
-          oncontext: function(data) {
+          onContext: function(data) {
             if (data.hasOwnProperty('node')) {
-              var processorId = Number(data.node);
-              $scope.activeProcessor = $scope.dag.getProcessor(processorId);
-              showProcessorOperationsContextMenu(processorId, data.pointer.DOM);
+              $scope.activeProcessorId = Number(data.node);
+              $scope.$apply();
+              showProcessorOperationsContextMenu(data.pointer.DOM);
+            }
+          },
+          onSelectNode: function(data) {
+            if (data.nodes.length === 1) {
+              $scope.activeProcessorId = Number(data.nodes[0]);
+              $scope.$apply();
             }
+          },
+          onDeselectNode: function() {
+            $scope.activeProcessorId = -1;
+            $scope.$apply();
+          },
+          onHoverNode: function() {
+            $('html,body').css('cursor', 'pointer');
+          },
+          onBlurNode: function() {
+            $('html,body').css('cursor', 'default');
           }
         }
       };
 
-      function showProcessorOperationsContextMenu(processorId, position) {
+      function showProcessorOperationsContextMenu(position) {
         var elem = document.getElementById('dag-node-menu');
-        $scope.view = function() {
-          $state.go('streamingapp.processor', {processorId: processorId});
-        };
         $contextmenu.popup(elem, position);
       }
 

services/dashboard/views/apps/streamingapp/popups/dag_edit.js

@@ -11,7 +11,7 @@ angular.module('dashboard')
       var options = $scope.modifyOptions || {};
       $scope.changeParallelismOnly = options.parallelism;
 
-      var processor = $scope.activeProcessor;
+      var processor = $scope.dag.getProcessor($scope.activeProcessorId);
       $scope.processorId = processor.id;
       $scope.taskClass = processor.taskClass;
       $scope.description = processor.description;

services/dashboard/views/apps/streamingapp/vis/network.js

@@ -8,25 +8,22 @@ angular.module('dashboard')
   .directive('visNetwork', [function() {
     'use strict';
 
-    function overrideOnContextEvent(network, callback) {
+    function handleOnContextEvent(network, callback) {
       var rightClickHandler = function(args) {
-        function handleOnContext(data) {
-
+        function handleCallback(data) {
           // always disable the default context menu "Save image as, Copy Image..."
           vis.util.preventDefault(args.event);
 
-          if (callback) {
-            callback(angular.merge(data, {pointer: args.pointer}));
-          }
+          callback(angular.merge(data, {pointer: args.pointer}));
         }
 
         var selection = network.getNodeAt(args.pointer.DOM);
         if (angular.isDefined(selection)) {
-          handleOnContext({node: selection});
+          handleCallback({node: selection});
         } else {
           selection = network.getEdgeAt(args.pointer.DOM);
           if (angular.isDefined(selection)) {
-            handleOnContext({edge: selection});
+            handleCallback({edge: selection});
           }
         }
       };
@@ -37,22 +34,19 @@ angular.module('dashboard')
       network.on('hold', rightClickHandler);
     }
 
-    function overrideHoverNodeEvent(network, callback) {
-      network.on('hoverNode', function(args) {
-          if (callback) {
-            var nodeId = parseInt(args.node);
-            var radius = network.findNode(nodeId)[0].options.size;
-            var position = network.getPositions([nodeId])[nodeId];
-            position = network.canvasToDOM(position);
-            callback({
-              node: nodeId,
-              radius: Math.ceil(radius),
-              position: position
-            });
-          }
-          vis.util.preventDefault(args.event);
-        }
-      );
+    function overrideHoverNodeCallback(network, callback) {
+      return function(args) {
+        var nodeId = parseInt(args.node);
+        var radius = network.findNode(nodeId)[0].options.size;
+        var position = network.getPositions([nodeId])[nodeId];
+        position = network.canvasToDOM(position);
+        callback({
+          node: nodeId,
+          radius: Math.ceil(radius),
+          position: position
+        });
+        vis.util.preventDefault(args.event);
+      };
     }
 
     function handleDeleteKeyPressed(network, callback) {
@@ -80,17 +74,28 @@ angular.module('dashboard')
 
         angular.forEach(scope.events, function(callback, name) {
           switch (name) {
-            case 'click':
-            case 'doubleClick':
-              network.on(name, callback);
+            case 'onClick':
+              network.on('click', callback);
+              break;
+            case 'onDoubleClick':
+              network.on('doubleClick', callback);
+              break;
+            case 'onSelectNode':
+              network.on('selectNode', callback);
+              break;
+            case 'onDeselectNode':
+              network.on('deselectNode', callback);
+              break;
+            case 'onHoverNode':
+              network.on('hoverNode', overrideHoverNodeCallback(network, callback));
               break;
-            case 'oncontext':
-              overrideOnContextEvent(network, callback);
+            case 'onBlurNode':
+              network.on('blurNode', overrideHoverNodeCallback(network, callback));
               break;
-            case 'hoverNode':
-              overrideHoverNodeEvent(network, callback);
+            case 'onContext':
+              handleOnContextEvent(network, callback);
               break;
-            case 'ondeletepressed':
+            case 'onDeletePressed':
               handleDeleteKeyPressed(network, callback);
               break;
           }

services/dashboard/views/widgets/metrics_period_switcher.js → services/dashboard/widgets/metrics_period_switcher.js

@@ -10,7 +10,7 @@ angular.module('dashboard')
 
     return {
       restrict: 'E',
-      templateUrl: 'views/widgets/metrics_period_switcher.html',
+      templateUrl: 'widgets/metrics_period_switcher.html',
       scope: {
         pastHours: '=',
         viewCurrent: '='

services/dashboard/views/widgets/radio_group.js → services/dashboard/widgets/radio_group.js

@@ -10,7 +10,7 @@ angular.module('dashboard')
 
     return {
       restrict: 'E',
-      templateUrl: 'views/widgets/radio_group.html',
+      templateUrl: 'widgets/radio_group.html',
       replace: true,
       scope: {
         ngModel: '=',