From 606d21ab79245de4d5199f64702e7ba91b3abf9a Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 18 May 2018 21:22:31 +0300
Subject: [PATCH] Rule Chain UI improvements.

---
 ui/src/app/common/types.constant.js          |  2 +
 ui/src/app/locale/locale.constant.js         |  2 +
 ui/src/app/rulechain/rulechain.controller.js | 45 +++++++++++++++++---
 ui/src/app/rulechain/rulechain.scss          |  8 +++-
 4 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/ui/src/app/common/types.constant.js b/ui/src/app/common/types.constant.js
index 7f85f6adac..cf1023eb4e 100644
--- a/ui/src/app/common/types.constant.js
+++ b/ui/src/app/common/types.constant.js
@@ -560,6 +560,8 @@ export default angular.module('thingsboard.types', [])
                 },
                 INPUT: {
                     value: "INPUT",
+                    name: "rulenode.type-input",
+                    details: "rulenode.type-input-details",
                     nodeClass: "tb-input-type",
                     icon: "input",
                     special: true
diff --git a/ui/src/app/locale/locale.constant.js b/ui/src/app/locale/locale.constant.js
index b3dec38af8..d1b8db0e5f 100644
--- a/ui/src/app/locale/locale.constant.js
+++ b/ui/src/app/locale/locale.constant.js
@@ -1268,6 +1268,8 @@ export default angular.module('thingsboard.locale', [])
                     "type-external-details": "Interacts with external system",
                     "type-rule-chain": "Rule Chain",
                     "type-rule-chain-details": "Forwards incoming messages to specified Rule Chain",
+                    "type-input": "Input",
+                    "type-input-details": "Logical input of Rule Chain, forwards incoming messages to next related Rule Node",
                     "directive-is-not-loaded": "Defined configuration directive '{{directiveName}}' is not available.",
                     "ui-resources-load-error": "Failed to load configuration ui resources.",
                     "invalid-target-rulechain": "Unable to resolve target rule chain!",
diff --git a/ui/src/app/rulechain/rulechain.controller.js b/ui/src/app/rulechain/rulechain.controller.js
index 875bc5d59f..d15cf7467a 100644
--- a/ui/src/app/rulechain/rulechain.controller.js
+++ b/ui/src/app/rulechain/rulechain.controller.js
@@ -448,7 +448,7 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
     vm.nodeLibCallbacks = {
         nodeCallbacks: {
             'mouseEnter': function (event, node) {
-                displayNodeDescriptionTooltip(event, node);
+                displayLibNodeDescriptionTooltip(event, node);
             },
             'mouseLeave': function () {
                 destroyTooltips();
@@ -462,8 +462,8 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
     vm.typeHeaderMouseEnter = function(event, typeId) {
         var ruleNodeType = types.ruleNodeType[typeId];
         displayTooltip(event,
-            '<div class="tb-rule-node-tooltip">' +
-            '<div id="tooltip-content" layout="column">' +
+            '<div class="tb-rule-node-tooltip tb-lib-tooltip">' +
+            '<div id="tb-node-content" layout="column">' +
             '<div class="tb-node-title">' + $translate.instant(ruleNodeType.name) + '</div>' +
             '<div class="tb-node-details">' + $translate.instant(ruleNodeType.details) + '</div>' +
             '</div>' +
@@ -486,9 +486,9 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
         });
     }
 
-    function displayNodeDescriptionTooltip(event, node) {
+    function displayLibNodeDescriptionTooltip(event, node) {
         displayTooltip(event,
-            '<div class="tb-rule-node-tooltip">' +
+            '<div class="tb-rule-node-tooltip tb-lib-tooltip">' +
             '<div id="tb-node-content" layout="column">' +
             '<div class="tb-node-title">' + node.component.name + '</div>' +
             '<div class="tb-node-description">' + node.component.configurationDescriptor.nodeDefinition.description + '</div>' +
@@ -498,6 +498,32 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
         );
     }
 
+    function displayNodeDescriptionTooltip(event, node) {
+        if (!vm.errorTooltips[node.id]) {
+            var name, desc, details;
+            if (node.component.type == vm.types.ruleNodeType.INPUT.value) {
+                name = $translate.instant(vm.types.ruleNodeType.INPUT.name) + '';
+                desc = $translate.instant(vm.types.ruleNodeType.INPUT.details) + '';
+            } else {
+                name = node.name;
+                desc = $translate.instant(vm.types.ruleNodeType[node.component.type].name) + ' - ' + node.component.name;
+                if (node.additionalInfo) {
+                    details = node.additionalInfo.description;
+                }
+            }
+            var tooltipContent = '<div class="tb-rule-node-tooltip">' +
+                '<div id="tb-node-content" layout="column">' +
+                '<div class="tb-node-title">' + name + '</div>' +
+                '<div class="tb-node-description">' + desc + '</div>';
+            if (details) {
+                tooltipContent += '<div class="tb-node-details">' + details + '</div>';
+            }
+            tooltipContent += '</div>' +
+                '</div>';
+            displayTooltip(event, tooltipContent);
+        }
+    }
+
     function displayTooltip(event, content) {
         destroyTooltips();
         vm.tooltipTimeout = $timeout(() => {
@@ -607,6 +633,15 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
             },
             'nodeEdit': function (event, node) {
                 openNodeDetails(node);
+            },
+            'mouseEnter': function (event, node) {
+                displayNodeDescriptionTooltip(event, node);
+            },
+            'mouseLeave': function () {
+                destroyTooltips();
+            },
+            'mouseDown': function () {
+                destroyTooltips();
             }
         },
         isValidEdge: function (source, destination) {
diff --git a/ui/src/app/rulechain/rulechain.scss b/ui/src/app/rulechain/rulechain.scss
index 252ab3cadc..c51a955858 100644
--- a/ui/src/app/rulechain/rulechain.scss
+++ b/ui/src/app/rulechain/rulechain.scss
@@ -146,6 +146,9 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  svg {
+    display: block;
+  }
 }
 
 .tb-rule-node, #tb-rule-chain-context-menu .tb-context-menu-header {
@@ -467,7 +470,10 @@
 
 .tb-rule-node-tooltip {
   font-size: 14px;
-  width: 300px;
+  max-width: 300px;
+  &.tb-lib-tooltip {
+    width: 300px;
+  }
 }
 
 .tb-rule-node-help {