zRains commented on code in PR #3801:
URL: https://github.com/apache/ambari/pull/3801#discussion_r1701185657
##########
ambari-web/app/views/application.js:
##########
@@ -48,13 +48,25 @@ 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 => {
+ if (document.querySelector('.navigation-bar')) {
+ observer.disconnect();
+ $('.navigation-bar').navigationBar({
+ fitHeight: true,
+ collapseNavBarClass: 'icon-double-angle-left',
+ expandNavBarClass: 'icon-double-angle-right'
+ });
+ }
Review Comment:
The number of executions can be reduced.
```suggestion
var targetNode
if (mutation.type === 'childList' && (targetNode =
$('.navigation-bar')).length) {
observer.disconnect();
targetNode.navigationBar({
fitHeight: true,
collapseNavBarClass: 'icon-double-angle-left',
expandNavBarClass: 'icon-double-angle-right'
});
}
```
##########
ambari-web/test/views/main/service/info/metrics_view_test.js:
##########
@@ -214,19 +217,18 @@ 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;
- });
+ const observer = new MutationObserver(mock.callback);
Review Comment:
Although PhantomJS supports `MutationObserver`, the internal implementation
is inconsistent, leading to the loss of some APIs and causing test failures.
##########
ambari-web/app/views/main/service/info/metrics_view.js:
##########
@@ -280,27 +280,39 @@ 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(() => {
+ if (document.querySelector(selector)) {
Review Comment:
Same as above.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
