This is an automated email from the ASF dual-hosted git repository.
jialiang pushed a commit to branch branch-2.7
in repository https://gitbox.apache.org/repos/asf/ambari.git
The following commit(s) were added to refs/heads/branch-2.7 by this push:
new 04a0a11bb8 AMBARI-26107: Migrate away from DOMNodeInserted to
MutationObserver (#3801)
04a0a11bb8 is described below
commit 04a0a11bb8134dcbb3c8ab5af73be1a292139d63
Author: Prabhjyot <[email protected]>
AuthorDate: Fri Aug 2 22:09:34 2024 -0400
AMBARI-26107: Migrate away from DOMNodeInserted to MutationObserver (#3801)
* AMBARI-26107: migrate away from DOMNodeInserted to MutationObserver
Co-authored-by: zrain <[email protected]>
* Update ambari-web/app/views/main/service/info/metrics_view.js
Co-authored-by: zrain <[email protected]>
---------
Co-authored-by: zrain <[email protected]>
---
ambari-web/app/views/application.js | 27 ++++++++---
.../app/views/main/service/info/metrics_view.js | 55 +++++++++++++---------
.../views/main/service/info/metrics_view_test.js | 27 ++++++-----
3 files changed, 68 insertions(+), 41 deletions(-)
diff --git a/ambari-web/app/views/application.js
b/ambari-web/app/views/application.js
index a4b3b14b1f..5937f1ac35 100644
--- a/ambari-web/app/views/application.js
+++ b/ambari-web/app/views/application.js
@@ -48,13 +48,26 @@ App.ApplicationView = Em.View.extend({
*/
initNavigationBar: function () {
if (App.get('router.mainController.isClusterDataLoaded')) {
- $('body').on('DOMNodeInserted', '.navigation-bar', () => {
- $('.navigation-bar').navigationBar({
- fitHeight: true,
- collapseNavBarClass: 'icon-double-angle-left',
- expandNavBarClass: 'icon-double-angle-right'
- });
- $('body').off('DOMNodeInserted', '.navigation-bar');
+ const observer = new MutationObserver(mutations => {
+ var targetNode
+ if (mutations.some((mutation) => mutation.type === 'childList' &&
(targetNode = $('.navigation-bar')).length)) {
+ observer.disconnect();
+ targetNode.navigationBar({
+ fitHeight: true,
+ collapseNavBarClass: 'icon-double-angle-left',
+ expandNavBarClass: 'icon-double-angle-right',
+ });
+ }
+ });
+
+ setTimeout(() => {
+ // remove observer if selected element is not found in 10secs.
+ observer.disconnect();
+ }, 10000)
+
+ observer.observe(document.body, {
+ childList: true,
+ subtree: true
});
}
}.observes('App.router.mainController.isClusterDataLoaded')
diff --git a/ambari-web/app/views/main/service/info/metrics_view.js
b/ambari-web/app/views/main/service/info/metrics_view.js
index e61a62883d..b4c3cbac0a 100644
--- a/ambari-web/app/views/main/service/info/metrics_view.js
+++ b/ambari-web/app/views/main/service/info/metrics_view.js
@@ -280,27 +280,40 @@ App.MainServiceInfoMetricsView =
Em.View.extend(App.Persist, App.TimeRangeMixin,
makeSortable: function (selector, isNSLayout) {
var self = this;
var controller = this.get('controller');
- $('html').on('DOMNodeInserted', selector, function () {
- $(this).sortable({
- items: "> div",
- cursor: "move",
- tolerance: "pointer",
- scroll: false,
- update: function () {
- var layout = isNSLayout ? controller.get('selectedNSWidgetLayout') :
controller.get('activeWidgetLayout');
- var widgets = misc.sortByOrder($(selector + " .widget").map(function
() {
- return this.id;
- }), layout.get('widgets').toArray());
- controller.saveWidgetLayout(widgets, layout);
- },
- activate: function () {
- self.set('isMoving', true);
- },
- deactivate: function () {
- self.set('isMoving', false);
- }
- }).disableSelection();
- $('html').off('DOMNodeInserted', selector);
+ const observer = new MutationObserver(mutations => {
+ var targetNode
+ if (mutations.some((mutation) => mutation.type === 'childList' &&
(targetNode = $(selector)).length)) {
+ observer.disconnect();
+ $(targetNode).sortable({
+ items: "> div",
+ cursor: "move",
+ tolerance: "pointer",
+ scroll: false,
+ update: function () {
+ var layout = isNSLayout ? controller.get('selectedNSWidgetLayout')
: controller.get('activeWidgetLayout');
+ var widgets = misc.sortByOrder($(selector + "
.widget").map(function () {
+ return this.id;
+ }), layout.get('widgets').toArray());
+ controller.saveWidgetLayout(widgets, layout);
+ },
+ activate: function () {
+ self.set('isMoving', true);
+ },
+ deactivate: function () {
+ self.set('isMoving', false);
+ }
+ }).disableSelection();
+ }
+ });
+
+ setTimeout(() => {
+ // remove observer if selected element is not found in 10secs.
+ observer.disconnect();
+ }, 10000)
+
+ observer.observe(document.body, {
+ childList: true,
+ subtree: true
});
}
});
diff --git a/ambari-web/test/views/main/service/info/metrics_view_test.js
b/ambari-web/test/views/main/service/info/metrics_view_test.js
index 99442f17f8..3c49044b6e 100644
--- a/ambari-web/test/views/main/service/info/metrics_view_test.js
+++ b/ambari-web/test/views/main/service/info/metrics_view_test.js
@@ -214,19 +214,20 @@ describe('App.MainServiceInfoMetricsView', function() {
mock.sortable.restore();
});
- it("on() should be called", function() {
+ it("MutationObserver callback should be called", function() {
view.makeSortable('#widget_layout');
- expect(mock.on.calledWith('DOMNodeInserted',
'#widget_layout')).to.be.true;
- });
-
- it("sortable() should be called", function() {
- view.makeSortable('#widget_layout');
- expect(mock.sortable.called).to.be.true;
- });
-
- it("off() should be called", function() {
- view.makeSortable('#widget_layout');
- expect(mock.off.calledWith('DOMNodeInserted',
'#widget_layout')).to.be.true;
+ const callback = function () {
+ expect(true).to.be.true;
+ expect(document.querySelector('#widget_layout')).to.not.be.null;
+ observer.disconnect();
+ done();
+ };
+ const observer = new MutationObserver(callback);
+ const body = document.body;
+ observer.observe(body, { childList: true });
+ const elementWidget = document.createElement('div');
+ elementWidget.id='widget_layout';
+ body.appendChild(elementWidget);
});
});
@@ -333,4 +334,4 @@ describe('App.MainServiceInfoMetricsView', function() {
});
});
-});
\ No newline at end of file
+});
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
