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

create17

于 2024-07-31 17:42:35 发布

阅读量676

点赞数 8

文章标签： ambari hadoop 大数据

本文链接：https://blog.csdn.net/create_17/article/details/140835723

版权

点击卡片“大数据实战演练”，选择“设为星标”或“置顶”

回复“资料”可领取独家整理的大数据学习资料！

回复“Ambari知识库”可领取独家整理的Ambari学习资料！

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

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

一、Ambari 问题描述

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

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

二、临时解决办法

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

临时解决方案如下：

访问 ambari-server 所在的节点，修改该文件：
./ambari-web/app/views/application.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 模块概述，适合开发验证时使用。

最后：

感谢群友 @昊的热心分享，解决了很多人都需要解决的问题，节省了大家的时间、精力。

如果大家有想加入【Ambari 专属技术交流群】的，可以加我好友 create17_ ，一起抱团成长。【Ambari 专属技术交流群】来啦

ending

一个人可以走得很快，但一群人才能走得更远。我的Ambari课程累计学员已经有 400+。感谢信任的同时，如果你需要一个良好的Ambari学习与交流环境，就请加入我们吧。这是一个学习Ambari的付费私密圈子，里面的人都是Ambari的活跃二次开发者，报名后，你可以享有知识星球 + 学员微信群 + 课程资料（笔记、视频等）+ 导师学习陪伴答疑服务，认识更多大佬，和大家一起成长。也欢迎大家点击左下角阅读原文了解我，希望我能提供的服务可以帮助到你。