3.2 前端代码逻辑定位

在分析 Ambari 前端代码时，自定义命令的触发点与后端密切相关。通常我们会从后端权限点 RoleAuthorization.SERVICE_RUN_CUSTOM_COMMAND 逆向定位前端的交互入口与模板处理逻辑。实战技巧 只需以 SERVICE.RUN_CUSTOM_COMMAND 为关键词全局搜索，即可快速锁定前端模板与交互处理源。

3.2.1 基于 SERVICE.RUN_CUSTOM_COMMAND 定位模板

后端关于自定义命令的权限点 RoleAuthorization.SERVICE_RUN_CUSTOM_COMMAND，正是前端渲染按钮时的依据。只要在前端源码仓库中全局搜索 SERVICE.RUN_CUSTOM_COMMAND，就能准确定位到相关的模板代码。

最终我们发现关键模板位于：

• 路径：app/templates/main/service/item.hbs

模板代码片段如下：

{{#isAuthorized
        "SERVICE.RUN_CUSTOM_COMMAND, SERVICE.RUN_SERVICE_CHECK, SERVICE.START_STOP, SERVICE.TOGGLE_MAINTENANCE, SERVICE.ENABLE_HA"}}
    <div class="service-button">
        {{#if view.isMaintenanceActive}}
            <div class="btn-group display-inline-block">
                <button class="btn btn-success dropdown-toggle" id="service-actions-dropdown-btn" data-toggle="dropdown"
                        href="#">
                    {{t common.actions}}
                    <span class="caret"></span>
                </button>
                <ul class="pull-right dropdown-menu">
                    {{#if view.maintenance.length}}
                        {{#each option in view.maintenance}}
                            {{#unless option.isHidden}}
                                <li {{bindAttr
                                        class="option.disabled option.hasSubmenu:dropdown-submenu option.hasSubmenu:submenu-left"}}>
                                    <a {{action "doAction" option target="controller" href=true}}
                                        {{bindAttr data-title="option.tooltip" rel="view.tooltipAttribute"}}>
                                        <i {{bindAttr class="option.cssClass"}}></i>
                                        {{option.label}}
                                    </a>
                                </li>
                            {{/unless}}
                        {{/each}}
                    {{else}}
                        {{view App.SpinnerView classNames="service-button-spinner"}}
                    {{/if}}
                </ul>
            </div>
        {{/if}}
    </div>
{{/isAuthorized}}

3.2.2 搜索 Ember.js 视图逻辑

进一步分析可以发现，模板中出现的 view.maintenance 是整个服务所有可用操作项（包括自定义命令）的聚合。这部分数据由前端视图逻辑动态构造，核心在于 app/views/main/service/item.js：

App.MainServiceInfoMenuView = Em.View.extend({
    maintenance: [], // 维护模式下的服务操作
    isMaintenanceActive: false, // 是否激活维护模式
});

3.2.3 深入分析 ActionMap 中的自定义命令

自定义命令的核心元数据其实是通过 ActionMap 统一管理的。在 app/models/host_component.js 的 ActionMap 里，可以查到具体命令定义，例如 REFRESHQUEUES：

REFRESHQUEUES: {
    action: 'refreshYarnQueues',
    customCommand: 'REFRESHQUEUES',
    context: Em.I18n.t('services.service.actions.run.yarnRefreshQueues.context'),
    label: Em.I18n.t('services.service.actions.run.yarnRefreshQueues.menu'),
    cssClass: 'glyphicon glyphicon-refresh',
    disabled: false
},

这里定义了按钮触发的 action（会交给控制器）、customCommand（对应后端命令）、国际化 label 和菜单样式等。

只要在 ActionMap 增加一项配置，就能让新自定义命令出现在页面菜单中并实现交互闭环。

3.2.4 控制器中的操作实现

用户点击自定义命令后，Ember 控制器会调用对应方法，以 REFRESHQUEUES 为例，对应代码在 app/controllers/main/service/item.js：

refreshYarnQueues : function () {
    return App.showConfirmationPopup(() => {
        App.ajax.send({
            name: 'service.item.refreshQueueYarnRequest',
            sender: this,
            data: {
                command: "REFRESHQUEUES",
                context: Em.I18n.t('services.service.actions.run.yarnRefreshQueues.context'),
                hosts: App.MasterComponent.find('RESOURCEMANAGER').get('hostNames').join(','),
                serviceName: "YARN",
                componentName: "RESOURCEMANAGER",
                forceRefreshConfigTags: "capacity-scheduler"
            },
            success: 'refreshYarnQueuesSuccessCallback',
            error: 'refreshYarnQueuesErrorCallback',
            showLoadingPopup: true
        });
    });
}

3.2.5 请求发送与服务器交互

整个自定义命令的生命周期，始于前端按钮渲染，终于 Agent 实际执行，整个流程层次分明：

• 权限点驱动前端按钮渲染
• ActionMap 配置聚合命令元数据
• 控制器方法封装参数并发起请求
• 服务端/Agent 端下发执行实际命令