Add tooltip for action (#765)

* Fix #741 Remove the usage of view * change button to phglyphicon, start and stop button combine into one * add tooltip * add tooltip for rules and actions
Intel-bigdata · Jul 26, 2017 · 504a5ad · 504a5ad
1 parent 6d690cc
commit 504a5ad
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 14 deletions.
diff --git a/smart-zeppelin/zeppelin-web/src/app/app.js b/smart-zeppelin/zeppelin-web/src/app/app.js
@@ -249,11 +249,11 @@ var zeppelinWebApp = angular.module('zeppelinWebApp', [
   // constants
   .constant('conf', {
     restapiProtocol: 'v1',
-    restapiRoot: rootPath,
+    restapiRoot: 'http://localhost:8080/',
     restapiQueryInterval: 3 * 1000, // in milliseconds
     restapiQueryTimeout: 30 * 1000, // in milliseconds
     restapiTaskLevelMetricsQueryLimit: 100,
-    loginUrl: rootPath + 'login'
+    loginUrl: 'http://localhost:8080/' + 'login'
   })
   .constant('TRASH_FOLDER_ID', '~Trash');
 

diff --git a/smart-zeppelin/zeppelin-web/src/app/dashboard/views/actions/actions.js b/smart-zeppelin/zeppelin-web/src/app/dashboard/views/actions/actions.js
@@ -46,7 +46,7 @@ angular.module('zeppelinWebApp')
         $stb.indicator().key('state').canSort('state.condition+"_"+createTime').styleClass('td-no-padding').done(),
         $stb.text('ID').key('id').canSort().sortDefaultDescent().done(),
         $stb.text('Cmdlet ID').key('cid').canSort().done(),
-        $stb.text('Name').key('actionName').canSort().done(),
+        $stb.text('Name').key(['actionName']).canSort().done(),
           // $stb.link('Name').key('name').canSort('name.text').styleClass('col-md-1').done(),
         // group 2/3 (5-col)
         $stb.datetime('Create Time').key('createTime').canSort().done(),
@@ -73,7 +73,14 @@ angular.module('zeppelinWebApp')
             // name: {href: pageUrl, text: rule.appName},
             state: {tooltip: action.status, condition: action.finished ? '' : 'good', shape: 'stripe'},
             //user: rule.user,
-            actionName: action.actionName,
+            actionName: {
+              title: "ID:" + action.actionId + " Cmdlet ID:" + action.cmdletId + " Name:" + action.actionName
+              + " Create Time:" + new Date(action.createTime).toUTCString()
+              + " Finish Time:" + new Date(action.finished ? action.finishTime : "-").toUTCString()
+              + " Running Time:" + action.uptime + "ms"
+              + " Succeed:" + (action.finished ? action.successful : "-"),
+              value: action.actionName
+            },
             createTime: action.createTime,
             finishTime: action.finished ? action.finishTime : "-",
             runningTime: action.uptime,
@@ -82,7 +89,7 @@ angular.module('zeppelinWebApp')
             succeed: action.finished ? action.successful : "-",
             view: {
               href: action.pageUrl,
-              text: function() {
+              icon: function() {
                 return 'glyphicon glyphicon-info-sign';
               },
               class: 'btn-xs btn-info'
@@ -101,5 +108,11 @@ angular.module('zeppelinWebApp')
     actions0.$subscribe($scope, function (actions) {
       updateTable(actions);
     });
+
+    $(function () {
+      $("[data-toggle='tooltip']").tooltip({
+        container: body
+      });
+    });
   }
 
diff --git a/smart-zeppelin/zeppelin-web/src/app/dashboard/views/rules/rules.js b/smart-zeppelin/zeppelin-web/src/app/dashboard/views/rules/rules.js
@@ -42,7 +42,7 @@ angular.module('zeppelinWebApp')
         // group 1/3 (4-col)
         $stb.indicator().key('state').canSort('state.condition+"_"+submitTime').styleClass('td-no-padding').done(),
         $stb.text('ID').key('id').canSort().sortDefaultDescent().done(),
-        $stb.text('Name').key('ruleName').canSort().done(),
+        $stb.text('Name').key(['ruleName']).canSort().done(),
           // $stb.link('Name').key('name').canSort('name.text').styleClass('col-md-1').done(),
         // group 2/3 (5-col)
         $stb.datetime('Submission Time').key('submitTime').canSort().done(),
@@ -67,7 +67,15 @@ angular.module('zeppelinWebApp')
             // name: {href: pageUrl, text: rule.appName},
             state: {tooltip: rule.state, condition: rule.isRunning ? 'good' : '', shape: 'stripe'},
             //user: rule.user,
-            ruleName: rule.ruleName,
+            ruleName: {
+              value: rule.ruleName,
+              title: "ID:" + rule.id + " Name:" + rule.ruleName
+              + " Submission Time:" + new Date(rule.submitTime).toUTCString()
+              + " Last Check Time:" + new Date(rule.lastCheckTime).toUTCString()
+              + " Checked Number:" + rule.numChecked
+              + " Cmdlets Generated:" + rule.numCmdsGen
+              + " Status:" +  rule.state
+            },
             submitTime: rule.submitTime,
             lastCheckTime: rule.lastCheckTime,
             numChecked: rule.numChecked,
@@ -76,7 +84,7 @@ angular.module('zeppelinWebApp')
             // stopTime: rule.finishTime || '-',
             status: rule.state,
             active: {
-              text: function() {
+              icon: function() {
                 if(rule.isRunning) {
                   return 'glyphicon glyphicon-pause';
                 }else {
@@ -99,7 +107,7 @@ angular.module('zeppelinWebApp')
             },
             view: {
               href: rule.pageUrl,
-              text: function() {
+              icon: function() {
                 return 'glyphicon glyphicon-info-sign';
               },
               class: 'btn-xs btn-info',
@@ -115,7 +123,7 @@ angular.module('zeppelinWebApp')
             //   }
             // },
             delete: {
-              text: function() {
+              icon: function() {
                 return 'glyphicon glyphicon-trash';
               },
               class: 'btn-xs btn-danger',

diff --git a/smart-zeppelin/zeppelin-web/src/app/dashing/dashing.js b/smart-zeppelin/zeppelin-web/src/app/dashing/dashing.js
@@ -1614,12 +1614,13 @@ angular.module('dashing.property', [
                   message: 'Ignore `value.value`, because it is a reversed field.',
                   object: value
                 });
-                delete value.value;
+                // delete value.value;
               }
               angular.merge($scope, value);
             } else if (angular.isNumber(value)) {
               if ($scope.renderer === renderer.NUMBER) {
-                $scope.raw = value;
+                // $scope.raw = value;
+                $scope.raw = value.value;
               }
             }
           });

diff --git a/smart-zeppelin/zeppelin-web/src/app/dashing/property/property.html b/smart-zeppelin/zeppelin-web/src/app/dashing/property/property.html
@@ -18,7 +18,7 @@
     -->
 <ng-switch on="renderer"><a ng-switch-when="Link" ng-href="{{href}}" ng-bind="text" ng-attr-target="{{target}}"></a>
   <button ng-switch-when="Button" ng-if="!hide" type="button" class="btn btn-default {{class}}"
-          ng-click="click()" ng-disabled="disabled" ng-attr-bs-tooltip="tooltip"><span class="{{text()}}"></span></button>
+          ng-click="click()" ng-disabled="disabled" ng-attr-bs-tooltip="tooltip"><span class="{{icon()}}"></span></button>
   <tag ng-switch-when="Tag" text="{{text}}" ng-attr-href="{{href}}" ng-attr-condition="{{condition}}"
        ng-attr-tooltip="{{tooltip}}"></tag>
   <indicator ng-switch-when="Indicator" ng-attr-shape="{{shape}}" ng-attr-condition="{{condition}}"
@@ -30,5 +30,5 @@
           ng-attr-readable="{{readable}}"></number>
   <div ng-switch-when="Number1" ng-bind="value|number:1"></div>
   <div ng-switch-when="Number2" ng-bind="value|number:2"></div>
-  <div ng-switch-default ng-bind="value"></div>
+  <div ng-switch-default ng-bind="value" data-toggle="tooltip" title="{{title}}"></div>
 </ng-switch>