AMBARI-10881. Widgets: ui changes v3a(XIWANG)

ambari-web/app/controllers/main/service/info/summary.js

@@ -354,7 +354,7 @@ App.MainServiceInfoSummaryController = Em.Controller.extend(App.WidgetSectionMix
    * @param {object|null} data
    */
   loadAllSharedWidgetsSuccessCallback: function (data) {
-    var widgetIds = this.get('widgets').mapProperty('id');
+    var widgetIds = this.get('widgets') ? this.get('widgets').mapProperty('id'): [];
     if (data.items[0] && data.items.length) {
       this.set("allSharedWidgets",
         data.items.filter(function (widget) {
@@ -404,7 +404,7 @@ App.MainServiceInfoSummaryController = Em.Controller.extend(App.WidgetSectionMix
    * @param {object|null} data
    */
   loadMineWidgetsSuccessCallback: function (data) {
-    var widgetIds = this.get('widgets').mapProperty('id');
+    var widgetIds = this.get('widgets') ? this.get('widgets').mapProperty('id'): [];
     if (data.items[0] && data.items.length) {
       this.set("mineWidgets",
         data.items.filter(function (widget) {

ambari-web/app/controllers/main/service/widgets/create/step1_controller.js

@@ -48,8 +48,7 @@ App.WidgetWizardStep1Controller = Em.Controller.extend({
         name: option.get('name'),
         displayName: option.get('displayName'),
         iconPath: option.get('iconPath'),
-        description: option.get('description'),
-        isSelected: option.get('name') == selectedType
+        description: option.get('description')
       }
     });
   }.property('widgetType'),
@@ -60,6 +59,7 @@ App.WidgetWizardStep1Controller = Em.Controller.extend({
    */
   chooseOption: function (event) {
     this.set('widgetType', event.context);
+    $("[rel='selectable-tooltip']").trigger('mouseleave');
     this.next();
   },
 

ambari-web/app/controllers/main/service/widgets/create/step3_controller.js

@@ -90,7 +90,7 @@ App.WidgetWizardStep3Controller = Em.Controller.extend({
       WidgetInfo: {
         widget_name: this.get('widgetName'),
         widget_type: this.get('content.widgetType'),
-        description: this.get('widgetDescription') || " ",
+        description: this.get('widgetDescription') || "",
         scope: this.get('widgetScope').toUpperCase(),
         "metrics": this.get('widgetMetrics').map(function (metric) {
           return {

ambari-web/app/messages.js

@@ -2265,9 +2265,10 @@ Em.I18n.translations = {
   'dashboard.button.reset': 'Reset all widgets to default ',
   'dashboard.button.gangliaLink': 'View metrics in Ganglia',
   'dashboard.widgets.create': 'Create Widget',
-  'dashboard.widgets.actions.browse': 'Browse & Manage Widgets',
+  'dashboard.widgets.actions.browse': 'Browse Widgets',
   'dashboard.widgets.layout.import': 'Import a layout',
   'dashboard.widgets.layout.save': 'Save a layout',
+  'dashboard.widgets.addButton.tooltip': 'Add Widget',
   'dashboard.widgets.browser.header': 'Widget Browser',
   'dashboard.widgets.browser.menu.shared': 'Shared',
   'dashboard.widgets.browser.menu.mine': 'Mine',
@@ -2511,7 +2512,7 @@ Em.I18n.translations = {
   'widget.create.wizard.header': 'Create Widget',
   'widget.create.wizard.step1.header': 'Select Type',
   'widget.create.wizard.step1.body.text': 'What type of widget do you want to create?',
-  'widget.create.wizard.step1.body.button.choose': 'Select',
+  'widget.create.wizard.step1.body.choose.tooltip': 'Click tp select',
   'widget.create.wizard.step2.header': 'Metrics and Expression',
   'widget.create.wizard.step2.body.text':'Define the expression with any metrics and valid operators. </br>Use parentheses when necessary.',
   'widget.create.wizard.step2.body.template':'Define the template first, a template can have any number of {{expression}} and any string.',
@@ -2528,7 +2529,7 @@ Em.I18n.translations = {
 
   'widget.edit.wizard.header': 'Edit Widget',
 
-  'widget.clone.body': 'Are you sure you want to clone current widget {0}?',
+  'widget.clone.body': 'Are you sure you want to clone current widget <b>{0}</b>?',
 
   'dashboard.widgets.wizard.step2.addMetrics': 'Add Metrics and operators here...',
   'dashboard.widgets.wizard.step2.newMetric': '+ Add Metric',

ambari-web/app/styles/enhanced_service_dashboard.less

@@ -196,6 +196,24 @@
         margin-left: -10px;
       }
     }
+    .thumbnail .hidden-description{
+      display: none;
+      color: #555555;
+      z-index: 7;
+      font-size: 12px;
+      font-weight: bold;
+      line-height: 18px;
+      text-align: center;
+      text-decoration: none;
+      position: absolute;
+      top: 40px;
+      padding: 8px 5px;
+      width: 89%;
+      height: 62%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      background: rgba(255,255,255, 0.7);
+    }
   }
 }
 
@@ -212,24 +230,10 @@
       }
       .span6.widget-info-section:hover {
         background-color: #eee;
+        cursor: pointer;
         .icon {
           background-color: white;
         }
-        .widget-section-actions {
-          display: block;
-        }
-      }
-      .span6.widget-info-section.is-selected {
-        background-color: #eee;
-        .icon {
-          background-color: white;
-        }
-      }
-      .span6.widget-info-section.is-selected:hover {
-        background-color: #eee;
-        .widget-section-actions {
-          display: none;
-        }
       }
       .icon {
         border: 1px solid #ddd;
@@ -260,16 +264,6 @@
           height: 60px;
         }
       }
-      .widget-section-actions {
-        display: none;
-        position: relative;
-        top: -30px;
-        right: 30px;
-        .btn {
-          padding: 3px 8px;
-          width: 70px;
-        }
-      }
     }
   }
   .step2 {
@@ -279,20 +273,19 @@
       }
       .controls {
         margin-left: 130px;
+        line-height: 40px;
         .threshold-input {
-          width: 85px;
-          //margin-left: 0px;
+          width: 100px;
         }
       }
     }
     .badge-container {
-      height: 26px;
       width: 80px;
       .OK, .WARNING, .CRITICAL {
         line-height: 26px;
         height: 26px;
         display: inline-block;
-        width: 60px;
+        width: 65px;
         text-align: center;
       }
       .OK {
@@ -592,13 +585,19 @@
         .label-description {
           padding-top: 5px;
           .label-text {
-            display: block;
+            display: inline-block;
             font-size: 14px;
             font-weight: bold;
             margin-bottom: 1px;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            width: 86%;
+          }
+          .is-shared-icon {
+            display: inline-block;
+            margin-bottom: 0px;
+            margin-right: 5px;
           }
           .description-text {
             font-size: 12px;
@@ -609,11 +608,7 @@
             height: 40px;
           }
         }
-        .is-shared-icon {
-          position: relative;
-          top: -5px;
-          left: 10px;
-        }
+
         .widget-section-actions {
           position: relative;
           top: -10px;

ambari-web/app/templates/common/modal_popups/widget_browser_popup.hbs

@@ -47,14 +47,15 @@
                 </div>
                 <div class="label-description span8">
                   <p class="label-text">{{widget.widgetName}}</p>
+                  <p class="is-shared-icon pull-right">
+                    {{#if widget.isShared}}
+                        <i class="icon-group" rel="shared-icon-tooltip"
+                          {{translateAttr data-original-title="dashboard.widgets.browser.shareIcon.tooltip"}}></i>
+                    {{/if}}
+                  </p>
                   <p class="description-text">{{widget.description}}</p>
                 </div>
-                <div class="is-shared-icon pull-left">
-                  {{#if widget.isShared}}
-                    <i class="icon-group" rel="shared-icon-tooltip"
-                      {{translateAttr data-original-title="dashboard.widgets.browser.shareIcon.tooltip"}}></i>
-                  {{/if}}
-                </div>
+
                 <div class="widget-section-actions btn-group pull-right">
                   {{#if widget.added}}
                     <button type="button" class="btn added-btn" {{action "hideWidget" widget target="controller"}} >

ambari-web/app/templates/common/widget/gauge_widget.hbs

@@ -29,6 +29,11 @@
       <i class="icon-edit"></i>
     </a>
     <div class="content"> {{view view.chartView}}</div>
+    {{#if view.content.description}}
+      <div class="hidden-description">
+        {{view.content.description}}
+      </div>
+    {{/if}}
   {{else}}
     <div class="spinner"></div>
   {{/if}}

ambari-web/app/templates/common/widget/graph_widget.hbs

@@ -28,8 +28,12 @@
     <a class="corner-icon pull-right" href="#" {{action editWidget target="view"}}>
       <i class="icon-edit"></i>
     </a>
-
     <div class="content"> {{view view.graphView}}</div>
+    {{#if view.content.description}}
+      <div class="hidden-description">
+        {{view.content.description}}
+      </div>
+    {{/if}}
   {{else}}
     <div class="spinner"></div>
   {{/if}}

ambari-web/app/templates/common/widget/number_widget.hbs

@@ -29,6 +29,11 @@
       <i class="icon-edit"></i>
     </a>
     <div {{bindAttr class="view.contentColor :content"}}>{{view.displayValue}}</div>
+    {{#if view.content.description}}
+      <div class="hidden-description">
+        {{view.content.description}}
+      </div>
+    {{/if}}
   {{else}}
     <div class="spinner"></div>
   {{/if}}

ambari-web/app/templates/common/widget/template_widget.hbs

@@ -29,6 +29,11 @@
       <i class="icon-edit"></i>
     </a>
     <div class="content"> {{view.value}}</div>
+    {{#if view.content.description}}
+      <div class="hidden-description">
+        {{view.content.description}}
+      </div>
+    {{/if}}
   {{else}}
     <div class="spinner"></div>
   {{/if}}

ambari-web/app/templates/main/service/info/summary.hbs

@@ -131,9 +131,9 @@
                   </div>
                 {{/each}}
                 <div class="span2p4">
-                  <button id="add-widget-action-box"
-                          class="btn btn-default" {{action "goToWidgetsBrowser" controller.content target="controller"}}><i
-                          class="icon-plus"></i></button>
+                  <button id="add-widget-action-box" class="btn btn-default" {{action "goToWidgetsBrowser" controller.content target="controller"}}
+                          rel="add-widget-tooltip" {{translateAttr data-original-title="dashboard.widgets.addButton.tooltip"}}>
+                    <i class="icon-plus"></i></button>
                 </div>
               </div>
             {{/if}}

ambari-web/app/templates/main/service/widgets/create/step1.hbs

@@ -24,7 +24,9 @@
 
     <div class="widgets-info-container row-fluid">
       {{#each option in options}}
-        <div {{bindAttr class="option.isSelected:is-selected :span6 :row-fluid :widget-info-section"}}>
+        <div class="span6 row-fluid widget-info-section" rel="selectable-tooltip"
+          {{translateAttr data-original-title="widget.create.wizard.step1.body.choose.tooltip"}}
+          {{action "chooseOption" option.name target="controller"}}>
           <div class="icon span4">
             <a class="widget-icon-image" target="_blank"><img {{bindAttr src="option.iconPath"}}></a>
           </div>
@@ -32,11 +34,6 @@
             <p class="label-text">{{option.displayName}}</p>
             <p class="description-text">{{option.description}}</p>
           </div>
-          <div class="widget-section-actions pull-right">
-            <button type="button" class="btn btn-primary" {{action "chooseOption" option.name target="controller"}} >
-              {{t widget.create.wizard.step1.body.button.choose}}
-            </button>
-          </div>
         </div>
       {{/each}}
     </div>

ambari-web/app/templates/main/service/widgets/create/widget_property_threshold.hbs

@@ -16,19 +16,17 @@
 * limitations under the License.
 }}
 
-<div>
-    <div class="span2 badge-container"><span {{bindAttr class=":label view.property.badgeOK"}}>{{view.property.badgeOK}}</span>&nbsp;</div>
-    <div {{bindAttr class=":span2 :threshold-input property.isSmallValueValid::error"}} rel="threshold-tooltip"
-      {{translateAttr data-original-title="dashboard.widgets.wizard.step2.threshold.ok.tooltip"}}>
-      {{view Em.TextField valueBinding="view.property.smallValue" class ="span10"}}
-    </div>
-    <div class="span2 badge-container"><span {{bindAttr class=":label view.property.badgeWarning"}}>{{view.property.badgeWarning}}</span>&nbsp;</div>
-    <div {{bindAttr class=":span2 :threshold-input property.isBigValueValid::error"}} rel="threshold-tooltip"
-      {{translateAttr data-original-title="dashboard.widgets.wizard.step2.threshold.warning.tooltip"}}>
-      {{view Em.TextField valueBinding="view.property.bigValue" class ="span10"}}
-    </div>
-    <div class="span3 badge-container"><span {{bindAttr class=":label view.property.badgeCritical"}}>{{view.property.badgeCritical}}</span>&nbsp;</div>
-    <div {{bindAttr class="property.threshold:error"}}>
-      {{view.property.errorMsg}}
-    </div>
+<div class="row-fluid">
+  <div class="span3 badge-container"><span {{bindAttr class=":label view.property.badgeWarning"}}>{{view.property.badgeWarning}}</span>&nbsp;</div>
+  <div {{bindAttr class=":span2 :threshold-input property.isSmallValueValid::error"}} rel="threshold-tooltip"
+    {{translateAttr data-original-title="dashboard.widgets.wizard.step2.threshold.ok.tooltip"}}>
+    {{view Em.TextField valueBinding="view.property.smallValue" class ="span10"}}
+</div>
+</div>
+<div class="row-fluid">
+  <div class="span3 badge-container"><span {{bindAttr class=":label view.property.badgeCritical"}}>{{view.property.badgeCritical}}</span>&nbsp;</div>
+  <div {{bindAttr class=":span2 :threshold-input property.isBigValueValid::error"}} rel="threshold-tooltip"
+    {{translateAttr data-original-title="dashboard.widgets.wizard.step2.threshold.warning.tooltip"}}>
+    {{view Em.TextField valueBinding="view.property.bigValue" class ="span10"}}
+  </div>
 </div>

ambari-web/app/views/main/service/info/summary.js

@@ -314,23 +314,24 @@ App.MainServiceInfoSummaryView = Em.View.extend(App.UserPref, {
       var stackService = App.StackService.find().findProperty('serviceName', serviceName);
       if (!graphNames && !stackService.get('isServiceWithWidgets')) {
         self.set('serviceMetricGraphs', []);
-        self.set('isServiceMetricLoaded', true);
+        self.set('isServiceMetricLoaded', false);
         return;
       }
     } else if (!graphNames) {
       self.set('serviceMetricGraphs', []);
-      self.set('isServiceMetricLoaded', true);
+      self.set('isServiceMetricLoaded', false);
       return;
     }
     // load time range for current service from server
     self.getUserPref(self.get('persistKey')).complete(function () {
       var index = self.get('currentTimeRangeIndex');
-      graphNames.forEach(function(graphName) {
-        graphObjects.push(App["ChartServiceMetrics" + graphName].extend({
-          currentTimeIndex : index
-        }));
-      });
-
+      if (graphNames) {
+        graphNames.forEach(function(graphName) {
+          graphObjects.push(App["ChartServiceMetrics" + graphName].extend({
+            currentTimeIndex : index
+          }));
+        });
+      }
       while(graphObjects.length) {
         result.push(graphObjects.splice(0, chunkSize));
       }
@@ -567,6 +568,20 @@ App.MainServiceInfoSummaryView = Em.View.extend(App.UserPref, {
       }
     }
     this.makeSortable();
+    Em.run.later(this, function () {
+      App.tooltip($("[rel='add-widget-tooltip']"));
+      // enalble description show up on hover
+      $('.thumbnail').hoverIntent(function() {
+        var self = this;
+        setTimeout(function() {
+          if ($(self).is(':hover')) {
+            $(self).find('.hidden-description').fadeIn(200);
+          }
+        }, 1000);
+      }, function() {
+        $(this).find('.hidden-description').hide();
+      });
+    }, 1000);
   },
 
   /**

ambari-web/app/views/main/service/widgets/create/step1_view.js

@@ -25,6 +25,9 @@ App.WidgetWizardStep1View = Em.View.extend({
   didInsertElement: function () {
     var controller = this.get('controller');
     controller.loadStep();
+    Em.run.later(this, function () {
+      App.tooltip($("[rel='selectable-tooltip']"));
+    }, 300);
   }
 
 });