AMBARI-2154. Unwanted auto scrolling on the Host detail page. (yusaku)

git-svn-id: https://svn.apache.org/repos/asf/incubator/ambari/trunk@1483622 13f79535-47bb-0310-9956-ffa450edef68

CHANGES.txt

@@ -862,6 +862,8 @@ Trunk (unreleased changes):
 
  BUG FIXES
 
+ AMBARI-2154. Unwanted auto scrolling on the Host detail page. (yusaku)
+
  AMBARI-2153. Reassign Master Wizard: Background Operations popup should show
  display names for services and components. (yusaku)
 

ambari-web/app/utils/ui_effects.js

@@ -0,0 +1,66 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+module.exports = {
+  /**
+   *
+   * @param node - DOM element which blinking
+   * @param delay - overall time of blinking
+   * @param callback
+   * @param interval - change frequence of blinking
+   */
+  pulsate: function (node, delay, callback, interval) {
+    var self = this;
+    /**
+     * execute single blink
+     * @param interval - time of single blink
+     * @param callback
+     * @param opacity
+     * @param iteration - current iteration(default amount of iterations: 10)
+     * @param isReverse - flag, that mean opacity increase or decrease
+     */
+    var blink = function (interval, callback, opacity, iteration, isReverse) {
+      var iterations = 10;
+      opacity = opacity || 1;
+      iteration = (iteration !== undefined) ? iteration : 10;
+      if (iteration > 0) {
+        iteration--;
+        setTimeout(function () {
+          isReverse = isReverse || (opacity <= 1 / (iterations / 2));
+          opacity = (isReverse) ? opacity + (1 / (iterations / 2)) : opacity - (1 / (iterations / 2));
+          node.css('opacity', opacity);
+          blink(interval, callback, opacity, iteration, isReverse);
+        }, interval / iterations);
+      } else {
+        node.css('opacity', 1);
+        callback();
+      }
+    };
+    interval = interval || 200;
+    if (delay > 0) {
+      delay -= interval;
+      setTimeout(function () {
+        blink(interval, function () {
+          self.pulsate(node, delay, callback, interval);
+        });
+      }, interval);
+    } else {
+      callback();
+    }
+  }
+};

ambari-web/app/views/main/dashboard/service.js

@@ -17,6 +17,7 @@
  */
 
 var App = require('app');
+var uiEffects = require('utils/ui_effects');
 
 require('models/alert');
 
@@ -38,10 +39,10 @@ App.MainDashboardServiceHealthView = Em.View.extend({
   },
 
   doBlink: function () {
+    var self = this;
     if (this.get('blink') && (this.get("state") == "inDOM")) {
-      this.$().effect("pulsate", { times: 1 }, "slow", function () {
-        var view = Em.View.views[$(this).attr('id')];
-        view.doBlink();
+      uiEffects.pulsate(self.$(), 1000, function(){
+        self.doBlink();
       });
     }
   }.observes('blink'),

ambari-web/app/views/main/host/summary.js

@@ -17,6 +17,7 @@
  */
 
 var App = require('app');
+var uiEffects = require('utils/ui_effects');
 
 App.MainHostSummaryView = Em.View.extend({
   templateName: require('templates/main/host/summary'),
@@ -177,7 +178,7 @@ App.MainHostSummaryView = Em.View.extend({
       var serviceComponent = this.get('content');
       var host = App.router.get('mainHostDetailsController.content');
       if(host){
-        var hostComponent = host.get('hostComponents').findProperty('componentName', serviceComponent.get('componentName'));
+        hostComponent = host.get('hostComponents').findProperty('componentName', serviceComponent.get('componentName'));
       }
       return hostComponent;
     }.property('content', 'App.router.mainHostDetailsController.content'),
@@ -237,8 +238,10 @@ App.MainHostSummaryView = Em.View.extend({
         if (dataNodeComponent)
           pulsate = dataNodeComponent.get('isDecommissioning');
       }
-      if (pulsate) {
-        this.$('.components-health').effect("pulsate", null, 1000, function () {
+      if (pulsate && !self.get('isBlinking')) {
+        self.set('isBlinking', true);
+        uiEffects.pulsate(self.$('.components-health'), 1000, function(){
+          !self.get('isDestroyed') && self.set('isBlinking', false);
           self.doBlinking();
         });
       }