ambari前端功能业务再次整理

# 简介

目前只大概针对介绍web项目；

# 查找对应方法技巧

路由 => Model => Mapper => Ajax.url 接口过滤全局搜索；

# 查找示范

比如为什么服务中会显示不同Tab;显示Metrics Tab;

web/app/views/main/service/info/menu.js metricTab

if (this.get('metricTab')) {
  menuItems.push({
    label: Em.I18n.t('services.service.info.menu.metrics'),
    id: 'metrics-service-tab',
    routing: 'metrics'
  });

1
2
3
4
5
6

web/app/templates/main/service/item.hbs hasHeatmapTab

{{view App.MainServiceInfoMenuView
    configTabBinding="view.hasConfigTab"
    heatmapTabBinding="view.hasHeatmapTab"
    metricTabBinding="view.hasMetricTab"
    appTabBinding="view.hasAppTab"
}}

1
2
3
4
5
6

web/app/views/main/service/item.js isServiceWithWidgets

 hasMetricTab: function() {
    let serviceName = this.get('controller.content.serviceName');
    let graphs = require('data/service_graph_config')[serviceName.toLowerCase()];
    return graphs || App.StackService.find(serviceName).get('isServiceWithWidgets');
  }.property('controller.content.serviceName'),

1
2
3
4
5

发现数据有部分组成：data/service_graph_config; wdp_metrics和flume组件用前端本地的判断；

web/app/models/stack_service.js App.StackService Model

App.StackService = DS.Model.extend({
	isServiceWithWidgets: DS.attr('boolean', {defaultValue: false}),
})

1
2
3

web/app/mappers/stack_service_mapper.js App.stackServiceMapper

var App = require('app');

App.stackServiceMapper = App.QuickDataMapper.create({
  model: App.StackService,
  component_model: App.StackServiceComponent,

  config: {
    id: 'service_name',
    is_service_with_widgets: 'is_service_with_widgets',
  },
    map: function (json) {
       stackService.is_service_with_widgets = item.artifacts.someProperty('Artifacts.artifact_name', 'widgets_descriptor');
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

web/app/controllers/global/cluster_controller.js wizard.service_components

  /**
   * Order of loading:
   * 1. load all created service components
   * 2. request for service components supported by stack
   * 3. load stack components to model
   * 4. request for services
   * 5. put services in cache
   * 6. request for hosts and host-components (single call)
   * 7. request for service metrics
   * 8. load host-components to model
   * 9. load services from cache with metrics to model
   */
  loadClusterDataToModel: function() {
    var self = this;

    this.loadStackServiceComponents(function (data) {
      data.items.forEach(function (service) {
        service.StackServices.is_selected = true;
        service.StackServices.is_installed = false;
      }, self);
      App.stackServiceMapper.mapStackServices(data);
      App.config.setPreDefinedServiceConfigs(true);
      self.updateLoadStatus('stackComponents');
      self.loadServicesAndComponents();
    });
  },
    
  loadStackServiceComponents: function (callback) {
    var callbackObj = {
      loadStackServiceComponentsSuccess: callback
    };
    return App.ajax.send({
      name: 'wizard.service_components',
      data: {
        stackUrl: App.get('stackVersionURL'),
        stackVersion: App.get('currentStackVersionNumber')
      },
      sender: callbackObj,
      success: 'loadStackServiceComponentsSuccess'
    });
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

web/app/utils/ajax/ajax.js fields=StackServices/,components/,components

  'wizard.service_components': {
    'real': '{stackUrl}/services?fields=StackServices/*,components/*,components/dependencies/Dependencies/scope,components/dependencies/Dependencies/service_name,artifacts/Artifacts/artifact_name',
    'mock': '/data/stacks/HDP-2.1/service_components.json'
  },

1
2
3
4

浏览器模糊匹配搜索

# brunch构建/入口

# 构建

用的npm方式安装依赖(用它自带的没有跑通)，目前不支持mac系统构建；

brunch-config.js入口；

# 代理设置

  server: {
    path: 'brunch-server.js',
    port: localPort,
    base: '/',
    run: 'no'
  },

1
2
3
4
5
6

brunch-server.js本地代理接口；

注意这里还要配置ws支持websocket的代理；

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const { proxyApi, targetApi } = require('./app/conf');
const app = express();

exports.startServer = (port, path, callback) => {
  app.use(express.static(path));
  app.use(proxyApi, createProxyMiddleware({ target: targetApi, changeOrigin: true, ws: true, }));
  app.listen(port, function () {
    console.log(`app listening on http://localhost:${port}`);
    callback();
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 合并文件

做了相关js和css合并到app.js/vendor.js和app.css/vendor.css

files: {
  javascripts: {
    joinTo: {
      'javascripts/app.js': /^app/,
        'javascripts/vendor.js': /^vendor/,
    },
      stylesheets: {
        defaultExtension: 'css',
          joinTo: {
            'stylesheets/app.css': /^app/,
              'stylesheets/vendor.css': /^vendor/
          },
      },
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 压缩及日志console,debugger相关移除

压缩：

optimize：Boolean: determines if minifiers should be enabled or not. Default value is false (true if you run brunch build --production).
sourceMaps：Boolean: enables or disables Source Map generation. Default value is true (enabled), false (disabled) if you run brunch build --production.

Defaults

overrides: {
  production: {
    optimize: true,
    sourceMaps: false,
    plugins: {autoReload: {enabled: false}}
  }
}

1
2
3
4
5
6
7

日志：

npm install -D babel-plugin-transform-remove-console@6

配置NODE_ENV和--production设置；--production目前在wdp上构建会卡着，文件大压缩非常消耗内存和时间，目前先做回退处理；

"babel-plugin-transform-remove-console": "^6.9.4",
"build": "NODE_ENV=production brunch build --production"   

var isProd = process.env.NODE_ENV === 'production'
bablePlugins =['transform-object-rest-spread']
if (isProd) bablePlugins.push("transform-remove-console")

module.exports.config = {
  server: {
    path: 'brunch-server.js',
    port: localPort,
    base: '/',
    run: 'no'
  },
  // sourceMaps: false,
  plugins: {
    autoReload: {enabled: true},
    babel: {
      ignore: [
        /^(vendor|app\/data|app\/assets|test)/
      ],
      pattern: /\.(js)$/,
      plugins: bablePlugins
    },
    assetsmanager: {
      copyTo: {
        'stylesheets/fonts': ['vendor/theme/fonts/*'],
        // 'api-docs': ['api-docs/*']
      }
    }
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

回退处理：

"build": "NODE_ENV=production brunch build"   

var isProd = process.env.NODE_ENV === 'production'
 sourceMaps: false,
 //optimize: true,
 plugins: {
    autoReload: {enabled: !isProd},
  }

1
2
3
4
5
6
7
8

# 修改后自动加载【TODO】

# 入口

上面build打包构建后，生产index.html

# =>`index.html`

引入app.js和initalize.js两文件；

  <script src="javascripts/vendor.js"></script>
  <script src="javascripts/app.js"></script>
  <script>
      $(document).ready(function() {
          require('initialize');
          // make favicon work in firefox
          $('link[type*=icon]').detach().appendTo('head');
          $('#loading').remove();
      });
  </script>
<body>
    <div id="loading">...Loading...</div>
    <div id="wrapper">
    <!-- ApplicationView -->
    </div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# => `initalize.js`

把app挂载到全局的window中；后面config才进入；

初始化相关路由及controllers等，最后App.initialize

window.App = require('app');
require('config');
require('utils');
require('mixins');
require('models');
require('controllers');
require('templates');
require('views');

require('mappers');
require('utils/http_client');

App.initialize();

1
2
3
4
5
6
7
8
9
10
11
12
13

# => `app.js`

在init中，被引入为挂载到全局中；

# =>`main.js中initialize`

初始化StompClient连接和loadClusterData；

  initialize: function () {
    // Since we use only defaultTransaction, we can stub <code>removeCleanRecords</code> method,
    // because it would remove from and add records to the same (default) transaction
    App.store.defaultTransaction.reopen({
      removeCleanRecords: Em.K
    });
    const startSubscription = App.router.get('updateController').startSubscriptions.bind(App.router.get('updateController'));
    App.StompClient.connect()
      .done(startSubscription)
      .fail((dfd) => { dfd.always(startSubscription) });
    App.router.get('clusterController').loadClusterData();
    this.loadMenuList()
  },

1
2
3
4
5
6
7
8
9
10
11
12
13

update_controller.js

  // 初始化几个要订阅的主题
  startSubscriptions: function () {
    App.StompClient.subscribe('/events/hostcomponents', App.hostComponentStatusMapper.map.bind(App.hostComponentStatusMapper));
    App.StompClient.subscribe('/events/alerts', App.alertSummaryMapper.map.bind(App.alertSummaryMapper));
    App.StompClient.subscribe('/events/ui_topologies', App.topologyMapper.map.bind(App.topologyMapper));
    App.StompClient.subscribe('/events/configs', this.configsChangedHandler.bind(this));
    App.StompClient.subscribe('/events/services', App.serviceStateMapper.map.bind(App.serviceStateMapper));
    App.StompClient.subscribe('/events/hosts', App.hostStateMapper.map.bind(App.hostStateMapper));
    App.StompClient.subscribe('/events/alert_definitions', App.alertDefinitionsMapperAdapter.map.bind(App.alertDefinitionsMapperAdapter));
    App.StompClient.subscribe('/events/alert_group', App.alertGroupsMapperAdapter.map.bind(App.alertGroupsMapperAdapter));
    App.StompClient.subscribe('/events/upgrade', App.upgradeStateMapper.map.bind(App.upgradeStateMapper));
    
    App.router.get('backgroundOperationsController').subscribeToUpdates();
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 路由菜单部分TODO

# 登录/退出

# 登录验证

# 退出处理

# admin中的退出

# 组件服务

# 各Tab显示

# 后台任务操作记录

# 主机/警告列表

# 升级相关

# admin处理

# 参考链接

https://brunch.io/docs/config

上次更新: 2023/11/17, 05:08:19

← wdp项目docker及k8s之CI&CD实践 wdp前端相关交接文档→

ambari前端功能业务再次整理

# 简介

# 查找对应方法技巧

# 查找示范

# brunch构建/入口

# 构建

# 代理设置

# 合并文件

# 压缩及日志console,debugger相关移除

# 修改后自动加载【TODO】

# 入口

# **=>index.html **

# => initalize.js

# => app.js

# =>main.js中initialize

# 路由菜单部分TODO

# 登录/退出

# 登录验证

# 退出处理

# admin中的退出

# 组件服务

# 各Tab显示

# 后台任务操作记录

# 主机/警告列表

# 升级相关

# admin处理

# 参考链接

# =>`index.html`

# => `initalize.js`

# => `app.js`

# =>`main.js中initialize`