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

点击卡片“大数据实战演练”，

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

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

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

最后，把我的座右铭送给大家：执行是消除焦虑的有效办法，明确并拆解自己的目标，一直行动，剩下的交给时间。共勉 💪。

关键词： ambari ambari^^页面 浏览器