Ambari页面在浏览器中出现错位的临时&永久解决办法

大家好，我是create17，见字如面。

今天给大家同步一个这两天出现的 Ambari 页面在浏览器中错位的问题，今天群友 @昊 及时给出了解决方案，同步给大家。

一、Ambari 问题描述

最近有群友反馈 Ambari 页面在浏览器中显示错位的问题，每个人都遇到了，如下图所示：

紧接着就有群友回复已经解决了，真的强

二、临时解决办法

今天群友 @昊 给出了解决方案，后面本人应该会提 pr 到 Ambari 社区。

临时解决方案如下：

访问 ambari-server 所在的节点，修改该文件： ./ambari-web/app/views/application.js （笔误：要修改app.js，详见评论区），原始代码：

/**
   * Navigation Bar should be initialized after cluster data is loaded
   */
  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')

修改为：

/**
 * Navigation Bar should be initialized after cluster data is loaded
 */
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 编译后的文件，如果 ambari 卸载重新部署，就又会有问题。

如果要永久解决，则需要编译 ambari 源码，重新部署 ambari-server rpm 包。

源码位置在：./ambari-web/app/views/application.js，修改后，需要整体编译 ambari 源码。在编译过程中，主要是将 ambari-web 模块进行编译，然后将编译后的 public 目录文件打到 ambari-server rpm 中。

编译文档可参考：国内网络编译，Ambari 2.7.6 全部模块源码编译笔记

ambari-web 模块也可以单独编译：Ambari 前端之 ambari-web 模块概述，适合开发验证时使用。