专栏首页大数据实战演练ambari-web/admin 前端二次开发
原创

ambari-web/admin 前端二次开发

一、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

有时候页面内容不全或无法访问,实际上是创建的软连接ADMINVIEW{version}缺少东西,将之前备份的ADMINVIEW{version}文件内容替换进去,然后再执行ambari-server restart,gulp,刷新页面应该就成功了。 现在,我们更改源码的时候,再执行一下gulp,就可以看到效果了。修改完一次,手动执行一次gulp


更多精彩干货内容,请关注微信公众号,谢谢

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Kerberos原理--经典对话

             “ 读完这篇文章,大概会对Kerberos原理更了解一些吧”

    create17
  • Windows本地安装配置Kerberos客户端

    在Ambari平台上,启用了Kerberos之后,一些服务的Web UI,像Namenode:50070、Oozie Web UI、Storm UI、Solr ...

    create17
  • 懒人:使用 idea 插件 Easy Code 自定义 MybatisPlus 模板一键快速生成所需代码

    连接成功后,这时候我们可以选择其中一个表,右键:EasyCode --> Generate Code,来快速生成 entity 、mapper、service...

    create17
  • RSA实现JS前端加密与PHP后端解密功能示例

    本文实例讲述了RSA实现JS前端加密与PHP后端解密功能。分享给大家供大家参考,具体如下:

    砸漏
  • 10年内,这三大领域将被人工智能和大数据重塑

    随着企业家弄清楚如何优化和改造效率低下的公司、产品和服务,从而更好、更快、更廉价地为消费者(我们)提供一切的时候,旧的系统将会崩溃。

    华章科技
  • 10年内,这三大领域将被人工智能和大数据重塑

    我们生活在一个不断瓦解的时代——不过这是一件好事。行业会被颠覆,大公司会垮掉。随着企业家弄清楚如何优化和改造效率低下的公司、产品和服务,从而更好、更快、更廉价地...

    钱塘数据
  • 2018年人工智能、量子计算等领域望获新进展

    2017年,诸多创新在科技史上留下浓墨重彩的一笔。一些科幻电影中描绘的未来场景,已出现在现实生活当中。新的一年,哪些技术突破会给人们带来新的惊喜? >> 人工智...

    企鹅号小编
  • 人工智能全局概览:通用智能的当前困境和未来可能

    来源:机器之心 作者:Mike Loukides、Ben Lorica 链接:http://www.jiqizhixin.com/article/1336(点...

    java达人
  • 未来5年,什么样的人最抢手

    1.新智能机器会威胁人类的生存吗? 2.你认为新智能机器会取代我们的工作吗? 如今臭名昭著的“人工智能奇点”之说在网上广泛流传,许多人都对此深信不疑。一些人纷纷...

    企鹅号小编
  • AI 能够解决中国的交通拥堵吗 ?

    聊起 AI,画面都充斥着机械语言:精密高级的芯片,光怪陆离的智能产业……你眼中的 AI 有什么样的能力?能给传统行业带来哪些变革与发展?基于此,云加社区联手知乎...

    云加社区

扫码关注云+社区

领取腾讯云代金券