AMBARI-26107: Migrate away from DOMNodeInserted to MutationObserver (a…

…pache#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]>
Randiman · Aug 3, 2024 · 9f7dcc5 · 9f7dcc5
1 parent dd179db
commit 9f7dcc5
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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() {
     });
   });
 
-});
+});