quicklinks详解[二]

# 3. 实操与代码解析 🔧

# 3.1 从实战角度理解

QuickLinks 的整个生命周期，从 API 请求、模板解析到前端渲染，都是 Ambari 平台“配置即页面”理念的典型体现。本节将围绕* *接口调用、前后端协同、动态参数解析**等维度，带你理解其幕后逻辑，并结合实际案例，拆解流程细节。

提示

理解 QuickLinks，不仅仅是知道如何配，还要清楚每个环节出现问题时怎么排查、如何实现高可用的“自动适配”。

我们按照如下步骤进行逐层剖析：

请求环节解析：QuickLinks API 的实际调用与返回机制
触发程序追踪：前端 JS 如何发起请求，以及如何将模板转为页面链接
模板来源解析：QuickLinks 配置文件的实际存放与加载逻辑
模板解析流程：前端如何动态解析模板参数、渲染最终链接
参数详细解读：每个关键属性（如 protocol、port、url）的含义和最佳实践

# 3.1.1 请求环节解析

运维或开发可直接通过浏览器开发者工具（Network）或者 curl 抓包，获得 QuickLinks 的 API 请求与响应。

# 3.1.1.1 请求分析

curl 'http://localhost:28080/api/v1/stacks/BIGTOP/versions/3.1.0/services/HDFS/quicklinks?QuickLinkInfo/default=true&fields=*&_=1735612056333' \
  -H 'Accept: application/json, text/javascript, */*; q=0.01' \
  -H 'Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6' \
  -H 'Cache-Control: no-cache' \
  -H 'Connection: keep-alive' \
  -H 'Content-Type: text/plain' \
  -H 'Cookie: _ga=GA1.1.1039361229.1720495067; apt.uid=AP-YFGMCGUNNIFB-2-1732688353177-48447658.0.2.a2e3917a-4f22-4c24-8671-436b74b600a2; _ga_0C4M1PWYZ7=GS1.1.1732691986.16.0.1732691986.0.0.0; _ga_T11SF3WXX2=GS1.1.1732691986.15.0.1732691986.60.0.0; _ga_K2SPJK2C73=GS1.1.1732691986.15.0.1732691986.60.0.0; AMBARISESSIONID=node01d544tvt60a5n1ichl7mcslkv80.node0' \
  -H 'Pragma: no-cache' \
  -H 'Referer: http://localhost:28080/' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0' \
  -H 'X-Requested-By: X-Requested-By' \
  -H 'X-Requested-With: XMLHttpRequest' \
  -H 'sec-ch-ua: "Microsoft Edge";v="131", "Chromium";v="131", "Not_A Brand";v="24"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "Windows"'

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

请求 URL： http://localhost:28080/api/v1/stacks/BIGTOP/versions/3.1.0/services/HDFS/quicklinks
- 这里请求的是 BIGTOP 3.1.0 栈下 HDFS 服务的 QuickLinks 信息
请求参数：
- QuickLinkInfo/default=true：仅获取默认 QuickLinks 配置
- fields=*：返回全部字段内容

# 3.1.1.2 响应结果

接口返回值为完整 JSON，包括所有 QuickLinks 配置与参数，内容丰富且高度结构化：

{
  "href": "http://localhost:28080/api/v1/stacks/BIGTOP/versions/3.1.0/services/HDFS/quicklinks?QuickLinkInfo/default=true&fields=*&_=1735612056333",
  "items": [
    {
      "href": "http://localhost:28080/api/v1/stacks/BIGTOP/versions/3.1.0/services/HDFS/quicklinks/quicklinks.json",
      "QuickLinkInfo": {
        "default": true,
        "file_name": "quicklinks.json",
        "service_name": "HDFS",
        "stack_name": "BIGTOP",
        "stack_version": "3.1.0",
        "quicklink_data": {
          "QuickLinksConfiguration": {
            "description": "default quick links configuration",
            "name": "default",
            "configuration": {
              "protocol": {
                "type": "https",
                "checks": [
                  {
                    "property": "dfs.http.policy",
                    "desired": "HTTPS_ONLY",
                    "site": "hdfs-site"
                  }
                ]
              },
              "links": [
                {
                  "name": "namenode_ui",
                  "label": "NameNode UI",
                  "url": "%@://%@:%@",
                  "port": {
                    "regex": "\\w*:(\\d+)",
                    "site": "hdfs-site",
                    "http_property": "dfs.namenode.http-address",
                    "http_default_port": "50070",
                    "https_property": "dfs.namenode.https-address",
                    "https_default_port": "50470"
                  },
                  "visible": true,
                  "removed": false,
                  "component_name": "NAMENODE",
                  "requires_user_name": "false"
                },
                {
                  "name": "namenode_logs",
                  "label": "NameNode Logs",
                  "url": "%@://%@:%@/logs",
                  "port": {
                    "regex": "\\w*:(\\d+)",
                    "site": "hdfs-site",
                    "http_property": "dfs.namenode.http-address",
                    "http_default_port": "50070",
                    "https_property": "dfs.namenode.https-address",
                    "https_default_port": "50470"
                  },
                  "visible": true,
                  "removed": false,
                  "component_name": "NAMENODE",
                  "requires_user_name": "false"
                },
                {
                  "name": "namenode_jmx",
                  "label": "NameNode JMX",
                  "url": "%@://%@:%@/jmx",
                  "port": {
                    "regex": "\\w*:(\\d+)",
                    "site": "hdfs-site",
                    "http_property": "dfs.namenode.http-address",
                    "http_default_port": "50070",
                    "https_property": "dfs.namenode.https-address",
                    "https_default_port": "50470"
                  },
                  "visible": true,
                  "removed": false,
                  "component_name": "NAMENODE",
                  "requires_user_name": "false"
                },
                {
                  "name": "Thread Stacks",
                  "label": "Thread Stacks",
                  "url": "%@://%@:%@/stacks",
                  "port": {
                    "regex": "\\w*:(\\d+)",
                    "site": "hdfs-site",
                    "http_property": "dfs.namenode.http-address",
                    "http_default_port": "50070",
                    "https_property": "dfs.namenode.https-address",
                    "https_default_port": "50470"
                  },
                  "visible": true,
                  "removed": false,
                  "component_name": "NAMENODE",
                  "requires_user_name": "false"
                }
              ]
            }
          }
        }
      }
    }
  ]
}

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

# 3.1.2 触发程序追踪

# 3.1.2.1 前端触发点

QuickLinks 的 API 调用实际上是由前端 JS 逻辑自动发起。开发/运维如需追溯或自定义，可参考如下主干函数（典型为 Ember/Handlebars 体系，以下为伪代码简化版）：

// 获取当前服务所有 QuickLinks 组件名和主机名
function getQuickLinksHosts() {
    var links = App.QuickLinksConfig.find().mapProperty('links'),
        components = links.reduce(function (componentsArray, currentLinksArray) {
            var componentNames = currentLinksArray.mapProperty('component_name').uniq();
            return [].concat(_toConsumableArray(componentsArray), _toConsumableArray(componentNames));
        }, []),
        hosts = App.HostComponent.find().filter(function (component) {
            return components.contains(component.get('componentName'));
        }).mapProperty('hostName').uniq();

    if (hosts.length === 0) {
        return $.Deferred().reject().promise();
    }

    // 触发 ajax 请求
    return App.ajax.send({
        name: 'hosts.for_quick_links',
        sender: this,
        data: {
            clusterName: App.get('clusterName'),
            hosts: hosts.join(','),
            urlParams: this.get('content.serviceName') === 'HBASE' ? ',host_components/metrics/hbase/master/IsActiveMaster' : ''
        },
        success: 'setQuickLinksSuccessCallback'
    });
}

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

App.QuickLinksConfig.find() 获取 QuickLinks 模板配置
App.ajax.send() 触发后端接口，携带主机与组件等参数
setQuickLinksSuccessCallback 为处理 QuickLinks 成功返回的回调

# 3.1.2.2 推导请求来源

通过接口返回中的 QuickLinksConfiguration 字段，实际的 QuickLinks 配置模板均直接来源于 stacks 目录下的 JSON 文件。例如：

文件路径：stacks/BIGTOP/3.1.0/services/HDFS/quicklinks.json
文件内容结构：

笔记

QuickLinks 的可维护性极强——只需修改 stacks 下 JSON 配置，前端 UI 自动适配，无需任何重启或二次开发。这正是大数据平台“高可观测性”与“低代码运维”的核心体现。

#Ambari #QuickLinks #API调试 #前端渲染 #配置实战 #源码追踪

← quicklinks详解[一] quicklinks详解[三]→