ambari-server页面错位问题解决

背景：

项目新安装的ambari集群页面错位如下

解决办法（临时）：

修改ambari-server的前端文件：/usr/lib/ambari-server/web/javascripts/app.js

原代码：

initNavigationBar: function () {
    if (App.get('router.mainController.isClusterDataLoaded')) {
      $('body').on('DOMNodeInserted', '.navigation-bar', function () {
        $('.navigation-bar').navigationBar({
          fitHeight: true,
          collapseNavBarClass: 'icon-double-angle-left',
          expandNavBarClass: 'icon-double-angle-right'
        });
        $('body').off('DOMNodeInserted', '.navigation-bar');
      });
    }
  }.observes('App.router.mainController.isClusterDataLoaded')

替换后代码：

initNavigationBar: function () {
    let navigationBarObserver = null;
    if (App.get('router.mainController.isClusterDataLoaded')) {
      navigationBarObserver = new MutationObserver((mutationsList) => {
        mutationsList.forEach((mutation) => {
          if (mutation.type === 'childList') {
            mutation.addedNodes.forEach((node) => {
              if (node.classList && node.classList.contains('navigation-bar')) {
                $(node).navigationBar({
                  fitHeight: true,
                  collapseNavBarClass: 'icon-double-angle-left',
                  expandNavBarClass: 'icon-double-angle-right'
                });
                navigationBarObserver.disconnect();
              }
            });
          }
        });
      });
      const targetNode = document.body;
      const config = { childList: true, subtree: true };
      navigationBarObserver.observe(targetNode, config);
    }
  }.observes('App.router.mainController.isClusterDataLoaded')

替换后刷新即可恢复。

参考：

链接：Ambari页面在浏览器中出现错位的临时&永久解决办法
以及文中对文件位置的修正评论：