TT Bigdata TT Bigdata
首页
  • 部署专题

    • 常规安装
    • 一键部署
  • 组件安装

    • 常规&高可用
  • 版本专题

    • 更新说明
  • Ambari-Env

    • 环境准备
    • 开始使用
  • 组件编译

    • 专区—Ambari
    • 专区—Bigtop
  • 报错解决

    • 专区—Ambari
    • 专区—Bigtop
  • 其他技巧

    • Maven镜像加速
    • Gradle镜像加速
    • Bower镜像加速
    • 虚拟环境思路
    • R环境安装+一键安装脚本
    • Ivy配置私有镜像仓库
    • Node.js 多版本共存方案
    • Ambari Web本地启动
    • Npm镜像加速
    • PostgreSQL快速安装
    • Temurin JDK 23快速安装
  • 成神之路

    • 专区—Ambari
    • 专区—Bigtop
  • 集成案例

    • Redis集成教学
    • Dolphin集成教学
    • Doris集成教学
    • 持续整理...
  • 模板代码

    • 各类组件
    • 通用模板
  • 国产化&其他系统

    • Centos系列
    • Kylin系列
    • OpenEuler系列
    • Rocky系列
    • Ubuntu系列
  • 生产调优

    • 组件调优指南
    • 1v1指导调优
  • 定制开发

    • 组件版本定制
    • 样式风格定制
  • 蓝图愿景
  • 技术支持
  • 合作共建
GitHub (opens new window)

JaneTTR

数据酿造智慧,每一滴都是沉淀!
首页
  • 部署专题

    • 常规安装
    • 一键部署
  • 组件安装

    • 常规&高可用
  • 版本专题

    • 更新说明
  • Ambari-Env

    • 环境准备
    • 开始使用
  • 组件编译

    • 专区—Ambari
    • 专区—Bigtop
  • 报错解决

    • 专区—Ambari
    • 专区—Bigtop
  • 其他技巧

    • Maven镜像加速
    • Gradle镜像加速
    • Bower镜像加速
    • 虚拟环境思路
    • R环境安装+一键安装脚本
    • Ivy配置私有镜像仓库
    • Node.js 多版本共存方案
    • Ambari Web本地启动
    • Npm镜像加速
    • PostgreSQL快速安装
    • Temurin JDK 23快速安装
  • 成神之路

    • 专区—Ambari
    • 专区—Bigtop
  • 集成案例

    • Redis集成教学
    • Dolphin集成教学
    • Doris集成教学
    • 持续整理...
  • 模板代码

    • 各类组件
    • 通用模板
  • 国产化&其他系统

    • Centos系列
    • Kylin系列
    • OpenEuler系列
    • Rocky系列
    • Ubuntu系列
  • 生产调优

    • 组件调优指南
    • 1v1指导调优
  • 定制开发

    • 组件版本定制
    • 样式风格定制
  • 蓝图愿景
  • 技术支持
  • 合作共建
GitHub (opens new window)
  • 方法论

  • 代码生命周期-metainfo

  • 架构剖析

  • UI样式

    • 修改ambari样式-基于配置方式
      • 1. 配置说明
        • 1.1 Ambari 配置中的 Widget 与 Metadata 结构
      • 2. HBase为例,常用控件详解
        • 2.1 Slider(滑块)🎚️
        • 2.2 Combo(下拉菜单)⬇️
        • 2.3 List(列表)📋
        • 2.4 Time Interval Spinner(时间间隔选择器)⏳
        • 2.5 Toggle/Checkbox(开关、复选框)🔘
        • 2.6 Directory/Directories/Password/Text Field/Text Area
        • Directory
        • Directories
        • Password
        • Text Field
        • Text Area
        • 2.7 Radio-Buttons(单选按钮)
      • 3. 控件样式的区别(基于 value-attributes 关键字段)
        • 关键字段解释
    • 修改ambari样式-前端View扩展[一]
    • 修改ambari样式-前端View扩展[二]
  • GOD-Ambari
  • UI样式
JaneTTR
2025-06-02
目录

修改ambari样式-基于配置方式

在 Ambari 中,通过自定义 UI 控件(Widget),你可以灵活调整配置项的展现形式,让每一个参数都能用最直观的方式配置,真正做到“所见即所得”。本文将详细梳理各种控件的用法,并给出实际代码示例和典型应用场景,帮助你成为 UI 配置的高手!💻✨

Widget 示例界面

# 1. 配置说明

# 1.1 Ambari 配置中的 Widget 与 Metadata 结构

Widget Metadata Used (元数据使用) 解释 (Explanation)
Slider(滑块) <value-attributes>
<type>int</type>
<minimum>1073741824</minimum>
<maximum>17179869184</maximum>
<unit>B</unit>
<increment-step>1073741824</increment-step>
</value-attributes>
滑块控件用于调整数值范围,适合设置内存或磁盘大小等配置项。用户可以通过滑动条来选择一个范围,比如1GB到16GB。🎚️
Combo(下拉菜单) <value-attributes>
<type>value-list</type>
<entries>
<entry><value>2</value></entry>
<entry><value>4</value></entry>
<entry><value>8</value></entry>
</entries>
<selection-cardinality>1</selection-cardinality>
</value-attributes>
下拉菜单适合选择固定选项的配置,比如从多个调度器中选择一个。⬇️
List(列表) <value-attributes>
<type>value-list</type>
<entries>
<entry><value>2</value></entry>
<entry><value>4</value></entry>
<entry><value>8</value></entry>
</entries>
<selection-cardinality>2+</selection-cardinality>
</value-attributes>
列表控件允许用户选择多个值,适合配置多个路径或选项的场景,比如磁盘路径的选择。📋
Time Interval Spinner(时间间隔选择器) <value-attributes>
<type>int</type>
<minimum>0</minimum>
<maximum>2592000000</maximum>
<unit>milliseconds</unit>
</value-attributes>
时间选择器用于设置时间间隔,支持从毫秒到天的配置。⏳
Toggle, Checkbox(切换按钮、复选框) <value-attributes>
<type>value-list</type>
<entries>
<entry>
<value>true</value>
<label>Enabled</label>
</entry>
<entry>
<value>false</value>
<label>Disabled</label>
</entry>
</entries>
<selection-cardinality>1</selection-cardinality>
</value-attributes>
适合启用或禁用某项功能的场景,例如开关某个服务。🔘
Directory, Directories, Password, Text Field, Text Area 无需特定的 <value-attributes> 元素。
用户直接输入路径、密码或其他文本内容。
这些控件适用于需要手动输入的场景,例如目录路径、密码或大段文本。📂🔑
Radio-Buttons(单选按钮) <value-attributes>
<type>value-list</type>
<entries>
<entry><value>1</value><label>Option 1</label></entry>
<entry><value>2</value><label>Option 2</label></entry>
</entries>
<selection-cardinality>1</selection-cardinality>
</value-attributes>
单选按钮用于让用户在多个选项中选择一个,适合互斥选项的配置场景。🔘

# 2. HBase为例,常用控件详解

# 2.1 Slider(滑块)🎚️

滑块适合数值范围选择,如内存、磁盘空间等。

滑块控件UI


<property>
    <name>hbase_master_heapsize</name>
    <value>4096</value>
    <description>Maximum amount of memory each HBase Master can use.</description>
    <display-name>HBase Master Maximum Memory</display-name>
    <value-attributes>
        <type>int</type>
        <minimum>0</minimum>
        <maximum>16384</maximum>
        <unit>MB</unit>
        <increment-step>256</increment-step>
    </value-attributes>
    <on-ambari-upgrade add="false"/>
</property>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  • UI展现:可在 0~16GB 间拖动设置,适用于 Master 内存分配。

# 2.2 Combo(下拉菜单)⬇️

用于固定选项的单选场景,如策略、模式、倍数等。

下拉菜单UI


<property>
    <name>hbase.hregion.memstore.block.multiplier</name>
    <value>4</value>
    <description>Block updates if memstore has ...</description>
    <display-name>HBase Region Block Multiplier</display-name>
    <value-attributes>
        <type>value-list</type>
        <entries>
            <entry>
                <value>2</value>
            </entry>
            <entry>
                <value>4</value>
            </entry>
            <entry>
                <value>8</value>
            </entry>
        </entries>
        <selection-cardinality>1</selection-cardinality>
    </value-attributes>
    <on-ambari-upgrade add="false"/>
</property>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  • UI展现:下拉选择倍数,影响 memstore flush 频率。

# 2.3 List(列表)📋

支持多选,用于多个路径或 IP 配置场景。

目前暂未在代码中找到符合这项配置 目前暂未在代码中找到符合这项配置 目前暂未在代码中找到符合这项配置

笔记

只要 <selection-cardinality>2+</selection-cardinality> 就能触发 List 多选模式。


# 2.4 Time Interval Spinner(时间间隔选择器)⏳

用于设置超时、调度等时间参数。

时间选择器UI


<property>
    <name>hbase.zookeeper.property.maxSessionTimeout</name>
    <value>180000</value>
    <description>Maximum ZooKeeper session timeout in milliseconds. The default is 180 seconds.</description>
    <display-name>Zookeeper Session Timeout</display-name>
    <value-attributes>
        <type>int</type>
        <minimum>10000</minimum>
        <maximum>300000</maximum>
        <unit>milliseconds</unit>
        <increment-step>10000</increment-step>
    </value-attributes>
    <on-ambari-upgrade add="false"/>
</property>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 2.5 Toggle/Checkbox(开关、复选框)🔘

用于布尔类型的配置,如功能启用/禁用。

Toggle Checkbox UI


<property>
    <name>hbase.security.authorization</name>
    <value>true</value>
    <description>Whether to enable HBase ACL based access control checks for user permissions.</description>
    <display-name>Enable Authorization</display-name>
    <value-attributes>
        <type>value-list</type>
        <entries>
            <entry>
                <label>Enabled</label>
                <value>true</value>
            </entry>
            <entry>
                <label>Disabled</label>
                <value>false</value>
            </entry>
        </entries>
        <selection-cardinality>1</selection-cardinality>
    </value-attributes>
    <on-ambari-upgrade add="false"/>
</property>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 2.6 Directory/Directories/Password/Text Field/Text Area

# Directory

目录控件


<property>
    <name>hbase.tmp.dir</name>
    <value>/tmp/hbase</value>
    <description>Temporary directory on the local filesystem.</description>
    <value-attributes>
        <type>directory</type>
    </value-attributes>
    <on-ambari-upgrade add="true"/>
</property>
1
2
3
4
5
6
7
8
9
10

# Directories

多目录控件


<property>
    <name>yarn.nodemanager.log-dirs</name>
    <display-name>YARN NodeManager Log Directories</display-name>
    <value>/hadoop/yarn/log1,/hadoop/yarn/log2</value>
    <description>Where to store container logs.</description>
    <value-attributes>
        <type>directories</type>
    </value-attributes>
    <on-ambari-upgrade add="true"/>
</property>
1
2
3
4
5
6
7
8
9
10
11

# Password

密码控件


<property require-input="true">
    <name>javax.jdo.option.ConnectionPassword</name>
    <value></value>
    <property-type>PASSWORD</property-type>
    <description>Password to use against metastore database.</description>
    <value-attributes>
        <type>password</type>
    </value-attributes>
</property>
1
2
3
4
5
6
7
8
9
10

# Text Field


<property>
    <name>hbase.master.info.bindAddress</name>
    <value>0.0.0.0</value>
    <display-name>HBase Master Bind Address</display-name>
    <description>The bind address for the HBase Master web UI.</description>
    <value-attributes>
        <type>text</type>
    </value-attributes>
    <on-ambari-upgrade add="false"/>
</property>
1
2
3
4
5
6
7
8
9
10
11

# Text Area

多行文本控件


<property>
    <name>content</name>
    <display-name>HBase-env template</display-name>
    <description>Jinja template for hbase-env.sh file</description>
    <value>略 不然markdown 显示错位</value>
    <value-attributes>
        <type>content</type>
    </value-attributes>
    <on-ambari-upgrade add="false"/>
</property>
1
2
3
4
5
6
7
8
9
10
11

# 2.7 Radio-Buttons(单选按钮)

单选按钮UI


<property>
    <name>hive.log.level</name>
    <description>Hive Log level to control log4j - Options are INFO, DEBUG, WARN, ERROR</description>
    <value>INFO</value>
    <display-name>Hive Log Level</display-name>
    <value-attributes>
        <type>value-list</type>
        <entries>
            <entry>
                <value>INFO</value>
                <label>INFO (Recommended)</label>
            </entry>
            <entry>
                <value>DEBUG</value>
                <label>DEBUG (Most Verbose)</label>
            </entry>
            <entry>
                <value>WARN</value>
                <label>WARN</label>
            </entry>
            <entry>
                <value>ERROR</value>
                <label>ERROR (Least Verbose)</label>
            </entry>
        </entries>
        <selection-cardinality>1</selection-cardinality>
    </value-attributes>
    <on-ambari-upgrade add="false"/>
</property>
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
  • 注意:官方文档要求 entry 个数大于 3 且有 label,单选才会触发 radiobox。部分页面未展示,疑似有 bug。

# 3. 控件样式的区别(基于 value-attributes 关键字段)

条件 页面样式 解释 示例配置
entries 个数 <= 2 且 无 label Toggle 切换开关 当 entries 少于等于 2 且没有 label 时,页面会显示为切换开关,用于简单启用/禁用功能。 hbase.security.authorization
entries 个数 <= 2 且 带有 label Toggle 切换开关 尽管带有 label,但因为选项少于等于 2,依旧会显示为切换开关。 hbase.security.authentication
entries 个数 > 2 且 带有 label Radio-Buttons(单选按钮) 当 entries 大于 2 且每个选项带有 label 时,显示为单选按钮,用户只能选择一个选项。 hive.log.level
entries 个数 > 2 且 无 label Combo(下拉菜单) 如果选项超过 2 且没有 label,页面会显示为下拉菜单,用户可以从中选择一个选项。 hbase.security.authentication
selection-cardinality > 1 且 无 label List(列表) 当 selection-cardinality 大于 1 且没有 label 时,页面会显示为列表,用户可以选择多个选项。 hbase.coprocessor.region.classes
type=directory Directory(目录选择器) 当 type 为 directory 时,页面展示为单个目录路径输入框。 hbase.tmp.dir
type=directories Directories(多目录选择器) 当 type 为 directories 时,页面展示为多个目录路径输入框,用户可以输入多个路径。 yarn.nodemanager.log-dirs
type=password Password(密码输入框) 当 type 为 password 时,输入的内容会被隐藏,适用于输入密码。 javax.jdo.option.ConnectionPassword
type=text Text Field(单行文本框) 当 type 为 text 时,页面展示为单行文本输入框,适用于输入简短的字符串内容。 hbase.master.info.bindAddress
type=content Text Area(多行文本区域) 当 type 为 content 时,页面展示为多行文本输入框,通常用于输入长文本或脚本内容。 hbase-env.sh

# 关键字段解释

  • entries 的个数 小于等于2并无label时为Toggle,多于2且有label则为Radio-Buttons。
  • 是否有 label 有 label 会显示成带说明的选项,Radio-Buttons 推荐加 label。
  • selection-cardinality 大于1即支持多选(List)。
  • type 决定了是目录选择、密码、单行、多行等基础控件类型。
#Widget#value-attributes#Ambari#前端可视化#配置技巧
java 请求过程泛化及补充[二]
修改ambari样式-前端View扩展[一]

← java 请求过程泛化及补充[二] 修改ambari样式-前端View扩展[一]→

最近更新
01
Pandoc 缺失导致 SparkR 构建失败
06-08
02
Cyrus SASL/GSASL 缺失解决
06-07
03
Hadoop_3.3.4 编译实战 1.0.0+
06-06
更多文章>
Theme by Vdoing | Copyright © 2017-2025 JaneTTR | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式