一、最终效果与问题背景

先看最终效果，左侧 Service 列表数量被明确控制，页面渲染正常。

在 Ambari-Web 二次开发过程中，经常会遇到几个问题：

• 左侧 Service 数量过多，影响 UI 可读性
• 自定义 Service 已存在，但左侧不显示
• 删除某些 Service 后，页面渲染异常

结论先行

左侧 Service 的显示，并非只由一个文件控制。

二、通过 F12 溯源渲染来源

1、F12 查看网络与数据来源

在浏览器中按 F12，可以看到 Ambari-Web 在本地模式下并非直接请求后端接口， 而是读取 内置静态 JSON 数据 来模拟接口返回。

通过溯源可以定位到第一个关键文件：

ambari-web/app/assets/data/services/HDP2/services.json

三、第一个关键文件：services.json

1、文件作用说明

services.json 用于模拟 /api/v1/clusters/{cluster}/services 接口， 它决定了：

• 当前集群“有哪些 Service”
• Service 的 state / maintenance_state
• Alert 汇总信息

2、services.json 示例（节选）

{
  "href": "http://192.168.56.101:8080/api/v1/clusters/cl/services",
  "items": [
    {
      "ServiceInfo": {
        "service_name": "HDFS",
        "state": "STARTED",
        "maintenance_state": "OFF"
      }
    },
    {
      "ServiceInfo": {
        "service_name": "YARN",
        "state": "STARTED",
        "maintenance_state": "OFF"
      }
    }
  ]
}

关键点

services.json 决定“有哪些 Service 实例存在于集群中”

四、第二个关键文件：service_components.json

1、文件路径

第二个关键文件位于：

ambari-web/app/assets/data/stacks/HDP-2.1/service_components.json

2、文件作用说明

service_components.json 并不是简单的组件定义文件，它在 Ambari-Web 中承担着：

• 描述 Service 的结构完整性
• 参与 Service 是否可渲染的判断
• 决定 Service 是否被前端识别为“合法 Service”

3、service_components.json 示例（节选）

{
  "items": [
    {
      "ServiceInfo": {
        "service_name": "YARN",
        "state": "STARTED",
        "maintenance_state": "OFF"
      }
    },
    {
      "ServiceInfo": {
        "service_name": "TEST1",
        "state": "STARTED",
        "maintenance_state": "OFF"
      }
    }
  ]
}

注意

只在 services.json 中存在的 Service，不一定会被渲染。

五、为什么必须两个 JSON 同时存在

1、前端渲染的真实逻辑

Ambari-Web 在渲染左侧 Service 菜单时，实际执行的是一个 交集判断逻辑：

文件	角色
services.json	声明“集群里有哪些 Service 实例”
service_components.json	声明“哪些 Service 是合法可渲染的”

2、渲染规则总结

渲染规则总结

• Service 必须同时存在于 services.json 和 service_components.json
• 只存在其中一个文件 → 左侧不显示
• 两个文件任意缺失 → Service 被过滤

3、典型错误场景

常见错误

只在 services.json 中新增 Service → 页面不显示

只在 service_components.json 中新增 Service → 页面不显示

两个文件 Service 名不一致（大小写不同） → 页面不显示

六、如何控制左侧 Service 数量

1、减少 Service

• 从 services.json 中删除目标 Service
• 同时从 service_components.json 中删除对应项

2、增加 / 测试 Service

• 在 两个 JSON 文件中同时添加
• 保证 service_name 完全一致