左侧 Service 数量控制原理与实现

# 一、最终效果与问题背景

先看最终效果，左侧 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"
      }
    }
  ]
}

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

关键点

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"
      }
    }
  ]
}

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

注意

只在 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 完全一致

#Ambari #Ambari-Web #Service 列表 #左侧菜单 #前端二开

← Ambari-Web-3.0.0本地启动与二开环境搭建