ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From onechipore...@apache.org
Subject ambari git commit: AMBARI-10703. Dependent configs information bar should float at the top of the page (onechiporenko)
Date Thu, 23 Apr 2015 15:28:24 GMT
Repository: ambari
Updated Branches:
  refs/heads/trunk ee3bfa112 -> 5a71e013d


AMBARI-10703. Dependent configs information bar should float at the top of the page (onechiporenko)


Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/5a71e013
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/5a71e013
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/5a71e013

Branch: refs/heads/trunk
Commit: 5a71e013db7ae396d347bfab7cd2d846dd54a004
Parents: ee3bfa1
Author: Oleg Nechiporenko <onechiporenko@apache.org>
Authored: Thu Apr 23 18:21:23 2015 +0300
Committer: Oleg Nechiporenko <onechiporenko@apache.org>
Committed: Thu Apr 23 18:21:23 2015 +0300

----------------------------------------------------------------------
 ambari-web/app/styles/config_history_flow.less  | 17 +++-
 .../templates/common/configs/service_config.hbs | 11 ++-
 ambari-web/app/utils/pages/scroll_manager.js    | 91 ++++++++++++++++++++
 .../views/common/configs/config_history_flow.js | 62 +++----------
 .../app/views/main/service/info/configs.js      | 21 ++++-
 5 files changed, 146 insertions(+), 56 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/5a71e013/ambari-web/app/styles/config_history_flow.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/config_history_flow.less b/ambari-web/app/styles/config_history_flow.less
index f62e995..5ed6e67 100644
--- a/ambari-web/app/styles/config_history_flow.less
+++ b/ambari-web/app/styles/config_history_flow.less
@@ -33,6 +33,21 @@
   }
 }
 
+.dependencies-info {
+  margin-bottom: 110px;
+}
+
+.dependencies-info-bar-wrapper {
+  position: fixed;
+  z-index: 2;
+  width: 757px;
+}
+@media (min-width: 1200px) {
+  .dependencies-info-bar-wrapper {
+    width: 970px;
+  }
+}
+
 #config_history_flow {
   margin-top: -5px;
   .version-slider {
@@ -181,7 +196,7 @@
   }
   .version-info-bar-wrapper {
     position: fixed;
-    z-index: 2;
+    z-index: 3;
     width: 747px;
   }
   @media (min-width: 1200px) {

http://git-wip-us.apache.org/repos/asf/ambari/blob/5a71e013/ambari-web/app/templates/common/configs/service_config.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/configs/service_config.hbs b/ambari-web/app/templates/common/configs/service_config.hbs
index 4c7a1f0..e516dc4 100644
--- a/ambari-web/app/templates/common/configs/service_config.hbs
+++ b/ambari-web/app/templates/common/configs/service_config.hbs
@@ -83,11 +83,14 @@
 {{/if}}
 
 {{#if versionLoaded}}
-  {{#if hasChangedDependencies}}
-    <div class="alert alert-warning">
-      <span>{{dependenciesMessage}}</span> <a href="#" {{action "showChangedDependentConfigs"
target="controller"}}>{{t common.showDetails}}</a>
+  <div {{bindAttr class="hasChangedDependencies:show:hide :dependencies-info"}}>
+    <div class="dependencies-info-bar-wrapper">
+      <div class="alert alert-warning">
+        <span>{{dependenciesMessage}}</span> <a
+          href="#" {{action "showChangedDependentConfigs" target="controller"}}>{{t common.showDetails}}</a>
+      </div>
     </div>
-  {{/if}}
+  </div>
   {{#if view.supportsConfigLayout}}
     <ul class="nav nav-tabs">
       {{#each tab in view.tabs}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/5a71e013/ambari-web/app/utils/pages/scroll_manager.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/utils/pages/scroll_manager.js b/ambari-web/app/utils/pages/scroll_manager.js
new file mode 100644
index 0000000..16b08f6
--- /dev/null
+++ b/ambari-web/app/utils/pages/scroll_manager.js
@@ -0,0 +1,91 @@
+/**
+ * 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.
+ */
+
+var App = require('app');
+
+function calculatePosition(movedTop, defaultTop, scrollTop, defaultLeft, scrollLeft) {
+  var css = {
+    top: 'auto',
+    left: 'auto'
+  };
+  if (scrollTop >= defaultTop) {
+    css.top = movedTop;
+  } else if (scrollTop > 0) {
+    css.top = (defaultTop - scrollTop) + 'px';
+  }
+  //if (css.top == '0px') debugger;
+  if (scrollLeft > 0) {
+    css.left = defaultLeft;
+  }
+  return css;
+}
+
+/**
+ *
+ * @type {Em.Object}
+ */
+App.ScrollManager = Em.Object.create({
+
+  /**
+   @typedef FixedElement
+   @type {object}
+   @property {string} id - identifier for element (not css-id). used to determine if element
already exists in the list !IMPORTANT - don't push same element two times!
+   @property {string} updatedElementSelector - css-selector for element that should be replaced
+   @property {string} elementForLeftOffsetSelector - css-selector for element which is used
to determine left-offset for <code>updatedElementSelector</code>-element
+   @property {number} defaultTop - value for top-offset when user scrolls not under the <code>updatedElementSelector</code>-element
+   @property {number} movedTop - value for top-offset when user scrolls  under the <code>updatedElementSelector</code>-element
+   */
+
+
+  /**
+   * List of elements that should be placed on the top of the page
+   * @type {FixedElement[]}
+   */
+  elements: [],
+
+  /**
+   * Recalculate position for each elements of the <code>elements</code>
+   * Should be called from some view
+   *
+   * @method updatePositionForElements
+   */
+  updatePositionForElements: function () {
+    var self = this;
+    //reset defaultTop value in closure
+    $(window).unbind('scroll');
+
+    $(window).on('scroll', function () {
+      self.get('elements').forEach(function (element) {
+        var defaultTop, defaultLeft;
+        var infoBar = $(Em.get(element, 'updatedElementSelector'));
+        var versionSlider = $(Em.get(element, 'elementForLeftOffsetSelector'));
+        var scrollTop = $(window).scrollTop();
+        var scrollLeft = $(window).scrollLeft();
+        if (!infoBar.length) {
+          return;
+        }
+        defaultTop = (infoBar.get(0).getBoundingClientRect() && infoBar.get(0).getBoundingClientRect().top)
|| Em.get(element, 'defaultTop');
+        // keep the version info bar always aligned to version slider
+        defaultLeft = (versionSlider.get(0).getBoundingClientRect() && versionSlider.get(0).getBoundingClientRect().left);
+        infoBar.css(calculatePosition(Em.get(element, 'movedTop'), defaultTop, scrollTop,
defaultLeft, scrollLeft));
+      });
+    });
+
+  }
+
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/5a71e013/ambari-web/app/views/common/configs/config_history_flow.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/common/configs/config_history_flow.js b/ambari-web/app/views/common/configs/config_history_flow.js
index f6f1e24..3554f00 100644
--- a/ambari-web/app/views/common/configs/config_history_flow.js
+++ b/ambari-web/app/views/common/configs/config_history_flow.js
@@ -17,6 +17,7 @@
  */
 
 var App = require('app');
+require('utils/pages/scroll_manager');
 
 App.ConfigHistoryFlowView = Em.View.extend({
   templateName: require('templates/common/configs/config_history_flow'),
@@ -211,7 +212,16 @@ App.ConfigHistoryFlowView = Em.View.extend({
     }
     this.set('startIndex', startIndex);
     this.adjustFlowView();
-    this.keepInfoBarAtTop();
+    if (!App.ScrollManager.get('elements').someProperty('id', 'configsManagePanel')) {
+      App.ScrollManager.get('elements').pushObject({
+        id: 'configsManagePanel',
+        updatedElementSelector: '#config_history_flow>.version-info-bar-wrapper',
+        elementForLeftOffsetSelector: '#config_history_flow>.version-slider',
+        defaultTop: 290,
+        movedTop: 10
+      });
+    }
+    App.ScrollManager.updatePositionForElements();
   },
 
   onChangeConfigGroup: function () {
@@ -257,58 +267,10 @@ App.ConfigHistoryFlowView = Em.View.extend({
     }
     this.set('startIndex', startIndex);
     this.adjustFlowView();
-    this.keepInfoBarAtTop();
+    App.ScrollManager.updatePositionForElements();
   }.observes('controller.selectedConfigGroup.name'),
 
   /**
-   * initialize event to keep info bar position at the top of the page
-   */
-  keepInfoBarAtTop: function () {
-    var defaultTop, defaultLeft;
-    var self = this;
-    //reset defaultTop value in closure
-    $(window).unbind('scroll');
-
-    $(window).on('scroll', function (event) {
-      var infoBar = $('#config_history_flow>.version-info-bar-wrapper');
-      var versionSlider = $('#config_history_flow>.version-slider');
-      var scrollTop = $(window).scrollTop();
-      var scrollLeft = $(window).scrollLeft();
-      if (infoBar.length === 0) {
-        $(window).unbind('scroll');
-        return;
-      }
-      //290 - default "top" property in px
-      defaultTop = defaultTop || (infoBar.get(0).getBoundingClientRect() && infoBar.get(0).getBoundingClientRect().top)
|| 290;
-      // keep the version info bar always aligned to version slider
-      defaultLeft = (versionSlider.get(0).getBoundingClientRect() && versionSlider.get(0).getBoundingClientRect().left);
-      self.setInfoBarPosition(infoBar, defaultTop, scrollTop, defaultLeft, scrollLeft);
-    })
-  },
-  /**
-   * calculate and reset top position of info bar
-   * @param infoBar
-   * @param defaultTop
-   * @param scrollTop
-   * @param defaultLeft
-   * @param scrollLeft
-   */
-  setInfoBarPosition: function (infoBar, defaultTop, scrollTop, defaultLeft, scrollLeft)
{
-    if (scrollTop > defaultTop) {
-      infoBar.css('top', '10px');
-    } else if (scrollTop > 0) {
-      infoBar.css('top', (defaultTop - scrollTop) + 'px');
-    } else {
-      infoBar.css('top', 'auto');
-    }
-    if (scrollLeft > 0) {
-      infoBar.css('left', defaultLeft);
-    } else {
-      infoBar.css('left', 'auto');
-    }
-  },
-
-  /**
    *  define the first element in viewport
    *  change visibility of arrows
    */

http://git-wip-us.apache.org/repos/asf/ambari/blob/5a71e013/ambari-web/app/views/main/service/info/configs.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/service/info/configs.js b/ambari-web/app/views/main/service/info/configs.js
index 4af04c3..998f3fe 100644
--- a/ambari-web/app/views/main/service/info/configs.js
+++ b/ambari-web/app/views/main/service/info/configs.js
@@ -18,12 +18,23 @@
 
 var App = require('app');
 var batchUtils = require('utils/batch_scheduled_requests');
+require('utils/pages/scroll_manager');
 
 App.MainServiceInfoConfigsView = Em.View.extend({
   templateName: require('templates/main/service/info/configs'),
   didInsertElement: function () {
     var controller = this.get('controller');
     controller.loadStep();
+    if (!App.ScrollManager.get('elements').someProperty('id', 'dependedConfigs')) {
+      App.ScrollManager.get('elements').pushObject({
+        id: 'dependedConfigs',
+        updatedElementSelector: '.dependencies-info-bar-wrapper',
+        elementForLeftOffsetSelector: '#config_history_flow>.version-slider',
+        defaultTop: 370,
+        movedTop: 70
+      });
+    }
+    App.ScrollManager.updatePositionForElements();
   },
 
   componentsCount: null,
@@ -53,5 +64,13 @@ App.MainServiceInfoConfigsView = Em.View.extend({
       label = Em.I18n.t('rollingrestart.dialog.title').format(App.format.role(componentName));
     }
     return label;
-  }.property('rollingRestartSlaveComponentName')
+  }.property('rollingRestartSlaveComponentName'),
+
+  /**
+   * @method onHasChangedDependenciesUpdated
+   */
+  onHasChangedDependenciesUpdated: function () {
+    App.ScrollManager.updatePositionForElements();
+  }.observes('controller.hasChangedDependencies')
+
 });


Mime
View raw message