一、Ambari-web二次开发
ambari-web可以单独编译,用来修改ambari UI页面。采用ember.js(版本:v1.0.pre
)作为前端MVC框架和NodeJS相关工具,用handlebars.js作为页面渲染引擎,在CSS/HTML方面还用了Bootstrap(v2.1.1)框架。
Ambari-web目录结构:
目录或文件 | 描述 |
---|---|
app/ | 主要应用程序代码。包括Ember中的view、templates、controllers、models、routes |
config.coffee | brunch应用程序生成器的配置文件 |
package.json | npm包管理配置文件 |
test/ | 测试文件 |
vendor/ | Javascript库和样式表适用第三方库。 |
1.准备工作:
- npm安装:推荐v4.5.0
- brunch安装:推荐v1.7.20
- npm、brunch安装地址:点击这里
2.安装npm依赖包
# 切换到ambari-web目录下
cd /opt/ambari-web
npm install
3.编译源码
brunch build
# or实时编译
brunch w
4.替换文件,建立软连接
cd /usr/lib/ambari-server
# 备份web目录,也可将web目录改名
mv web web_bak
# 建立软链接 使ambari-server可以访问到我们修改编译后的代码
ln -s /opt/ambari-web/public web
5.重启服务
ambari-server restart
6.打开浏览器,输入ip:8080访问页面。
二、Ambari-admin二次开发
ambari-admin也可进行单独编译,使用的是angularjs + bower + gulp。
bower与npm的使用方式基本一样,angularjs也与emberjs风格类似。
1.准备工作
# 切换到admin-web目录下
cd 到 /opt/ambari-admin/src/main/resources/ui/admin-web
# 全局安装gulp,bower
npm install -g bower
npm install -g gulp
yum -y install git
2.编辑.bowerrc文件
{
"directory": "app/bower_components",
"allow_root": true //允许以root用户执行bower命令。也可以在执行命令的时候通过参数设定 如:bower install --allow-root 不要复制这段注释
}
3.安装npm、bower依赖包,
npm install
bower install
4.修改gulpfile.js文件
'use strict';
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var current = "build";
var config = {
start_task:{
test:"webserver",
build:"build"
}
};
/**
gulp.task('webserver', function(){
gulp.src('app').pipe(webserver({
port: 8000,//端口
host: '192.168.30.135',//域名
livereload: true,//实时刷新代码。不用f5刷新
directoryListing: true,
//fallback:'index.html',
open:true
}))
});
*/
gulp.task('styles', function () {
return gulp.src('app/styles/*.css')
.pipe($.order([
'app/styles/main.css',
'app/styles/custom-admin-ui.css' // This should always be the last stylesheet. So it can be dropped and be effective on build time
], { base: './' }))
.pipe($.concat('main.css'))
.pipe($.autoprefixer('last 1 version'))
.pipe(gulp.dest('.tmp/styles'))
.pipe($.size());
});
gulp.task('html', ['styles'], function () {
var jsFilter = $.filter('**/*.js');
var cssFilter = $.filter('**/*.css');
return gulp.src('app/*.html')
.pipe($.plumber())
.pipe($.useref.assets({searchPath: '{.tmp,app}'}))
.pipe(jsFilter)
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(cssFilter.restore())
.pipe($.useref.restore())
.pipe($.useref())
.pipe(gulp.dest('dist'))
.pipe($.size());
});
gulp.task('views', function () {
return gulp.src('app/views/**/*.html')
.pipe(gulp.dest('dist/views'));
});
gulp.task('xml', function () {
return gulp.src('app/*.xml')
.pipe(gulp.dest('dist'));
});
gulp.task('images', function () {
return gulp.src('app/img/**/*')
.pipe(gulp.dest('dist/img'))
.pipe($.size());
});
gulp.task('fonts', function () {
return $.bowerFiles()
.pipe($.filter('**/*.{eot,svg,ttf,woff}'))
.pipe($.flatten())
.pipe(gulp.dest('dist/fonts'))
.pipe($.size());
});
gulp.task('extras', function () {
return gulp.src(['app/*.*', '!app/*.html'], {dot: true})
.pipe(gulp.dest('dist'));
});
gulp.task('clean', function () {
return gulp.src(['.tmp', 'dist'], {read: false}).pipe($.clean());
});
gulp.task('build', ['html', 'views', 'images', 'xml', 'fonts', 'extras']);
gulp.task('default', ['clean'], function () {
gulp.start(config.start_task[current]);
});
5.开始编译
gulp
6.建立软连接
cd /var/lib/ambari-server/resources/views/work
mv ADMIN_VIEW\{2.6.1.0} /tmp
ln -s /opt/ambari-admin/src/main/resources/ui/admin-web/dist ADMIN_VIEW\{2.6.1.0}
cp /tmp/ADMIN_VIEW\{2.6.1.0}/view.xml ADMIN_VIEW\{2.6.1.0}/
7.重启服务
ambari-server restart
8.Tip
有时候页面内容不全或无法访问,实际上是创建的软连接ADMIN_VIEW{version}缺少东西,将之前备份的ADMIN_VIEW{version}文件内容替换进去,然后再执行ambari-server restart,gulp,刷新页面应该就成功了。
现在,我们更改源码的时候,再执行一下gulp,就可以看到效果了。修改完一次,手动执行一次gulp