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

    • 加载原理深度剖析[一]
    • 加载原理深度剖析[二]
    • 加载原理深度剖析[三]
    • 结构与层级深入解读
    • configFile详解[一]
    • configFile详解[二]
    • cardinality详解[一]
    • cardinality详解[二]
    • cardinality详解[三]
    • category详解[一]
    • category详解[二]
    • category详解[三]
    • theme详解[一]
      • 1. 引言与问题概述
        • 1.1 背景介绍
        • 1.2 文章目标 🎯
      • 2. 核心概念解析 🧠
        • 2.1 Ambari 主题引入方式
        • 2.2 theme.json 字段详解
        • 2.2.1 layouts 字段结构
        • 2.2.2 placement 字段扩展解析
        • 2.2.3 widgets 字段控件类型
    • theme详解[二]
    • theme详解[三]
    • commandScript详解[二]
    • commandScript详解[一]
    • commandScript详解[三]
    • customCommand详解[一]
    • customCommand详解[二]
    • customCommand详解[三]
    • requiredServices详解[一]
    • requiredServices详解[二]
    • osSpecifics详解[一]
    • osSpecifics详解[二]
    • osSpecifics详解[三]
    • quicklinks详解[一]
    • quicklinks详解[二]
    • quicklinks详解[三]
    • quicklinks详解[四]
  • 架构剖析

  • UI样式

  • GOD-Ambari
  • 代码生命周期-metainfo
JaneTTR
2025-06-02
目录

theme详解[一]

# 1. 引言与问题概述

# 1.1 背景介绍

随着大数据平台管理场景日益复杂,Ambari 的原生界面在交互和美观性方面已难以满足实际集群管理需求。早期版本中的 UI 主要以简单输入框、下拉菜单为主,缺少可视化和模块化的控件,导致用户在集群配置、批量操作等场景下体验较差。

为提升易用性和自定义能力,Ambari 在新版本中引入了 theme.json 机制。结合 metainfo.xml,开发者不仅可以根据实际场景灵活调整 UI 布局,还能扩展各种控件(如滑块、时间选择、测试连接按钮等),极大丰富了交互方式。通过自定义主题,不仅美化了前端页面,还让配置流程更直观分层,提升了整体效率。

这些改造的核心收益包括:

  • 丰富控件交互 🎨:通过 widget 体系,为每个配置项绑定合适的交互组件,操作逻辑一目了然。
  • 结构分层清晰 🧩:分区分层展示配置项,便于快速定位、理解依赖关系,提高批量运维效率。
  • 易于维护与扩展 🚀:灵活的主题机制降低了 UI 变更和功能增强的门槛,便于后续定制开发。

提示

从实际使用效果看,页面交互更灵活,维护门槛显著降低,非常适合多变的企业级场景需求。


风格对比举例

  • 原始风格:

    image-20241005001004741

  • 改造后风格:

    image-20241005001113279

# 1.2 文章目标 🎯

本篇将系统讲解 Ambari theme.json 的使用、源码关联和二次开发技巧,帮助你快速掌握页面定制能力,主要覆盖三个方面:

  1. 掌握 UI 定制技巧:通过 theme.json 与 metainfo.xml 配置,灵活定义各类控件与页面风格,打造属于你的 Ambari 管理界面。
  2. 深入源码剖析:梳理 theme.json 与 Ambari 前端渲染流程的关联脉络,为源码级定制或 bug 修复打下基础。
  3. 支持高效二次开发:总结适用于实际业务的二次开发方法,轻松扩展自定义控件或特殊逻辑,满足复杂集群管理诉求。

阅读完本文后,你将能独立实现 Ambari 页面定制,并理解背后设计原理,为后续深度优化和集成开发提供坚实支撑。

# 2. 核心概念解析 🧠

# 2.1 Ambari 主题引入方式

Ambari 的主题通常通过各组件的 metainfo.xml 文件指定。例如,以 RANGER 组件为例,可在 metainfo.xml 中通过如下方式引入 theme.json 文件:


<themes>
    <theme>
        <fileName>credentials.json</fileName>
        <default>true</default>
    </theme>
    <theme>
        <fileName>database.json</fileName>
        <default>true</default>
    </theme>
    <theme>
        <fileName>directories.json</fileName>
        <default>true</default>
    </theme>
    <theme>
        <fileName>theme_version_2.json</fileName>
        <default>true</default>
    </theme>
</themes>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

image-20241005002910403

这些主题文件统一存放于如下目录(以 RANGER 为例):

resources/stacks/BIGTOP/3.2.0/services/RANGER/themes/
│
├── credentials.json
├── database.json
├── directories.json
└── theme_version_2.json
1
2
3
4
5
6

实际使用时,只需将 RANGER 替换为其他组件名(如 HDFS、HIVE),保持同样的结构即可。

# 2.2 theme.json 字段详解

theme.json 用于定义页面布局、配置项分区及控件类型,下面结合实际案例进行分层讲解。

# 2.2.1 layouts 字段结构

image-20241005004931465

层级 字段 类型 说明 示例
顶层 name string 布局名称,通常为 "default" "default"
顶层 tabs array 标签页集合,支持多页切换 -
二级 name string 标签页名(区分不同配置分组) "ranger_admin_settings"
二级 display-name string 标签页显示名称 "Ranger Admin"
二级 layout object 包含分区、行列数等布局定义 -
三级 sections array 分区集合,每个分区可多行多列嵌套 -

笔记

每层结构都支持自定义行列数与分区,实现灵活页面编排。

布局示例:

{
  "name": "default",
  "layouts": [
    {
      "name": "default",
      "tabs": [
        {
          "name": "ranger_admin_settings",
          "display-name": "Ranger Admin",
          "layout": {
            "tab-columns": "2",
            "tab-rows": "2",
            "sections": [
              {
                "name": "section-ranger-admin",
                "display-name": "Ranger Admin",
                "section-columns": "2",
                "section-rows": "3",
                "subsections": [
                  {
                    "name": "subsection-ranger-db-row1-col1",
                    "row-index": "0",
                    "column-index": "0"
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  ]
}
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

# 2.2.2 placement 字段扩展解析

placement 字段除配置项摆放,还可通过 property_value_attributes 和 depends-on 实现更复杂的属性控制与依赖逻辑。

字段名称 说明 示例
property_value_attributes 控制属性(如 UI 专用、可见性等) {"ui_only_property": true}
depends-on 配置项依赖关系,支持 if-then-else 结构 见下方代码示例

示例代码:

{
  "placement": {
    "configuration-layout": "default",
    "configs": [
      {
        "config": "admin-properties/DB_FLAVOR",
        "subsection-name": "subsection-ranger-db-row1-col1"
      },
      {
        "config": "admin-properties/db_user",
        "subsection-name": "subsection-ranger-db-row1-col1",
        "property_value_attributes": {
          "ui_only_property": true
        },
        "depends-on": [
          {
            "configs": [
              "ranger-env/create_db_dbuser"
            ],
            "if": "${ranger-env/create_db_dbuser}",
            "then": {
              "property_value_attributes": {
                "visible": false
              }
            },
            "else": {
              "property_value_attributes": {
                "visible": true
              }
            }
          }
        ]
      }
    ]
  }
}
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

提示

这样就能实现配置项联动显示/隐藏、只读等复杂场景,非常适合实际运维和业务自定义需求。

# 2.2.3 widgets 字段控件类型

widgets 字段定义了每个配置项的前端控件类型。常用类型如下表:

type 类型 组件名 说明
checkbox 复选框 多选逻辑
combo 下拉选择框 单/多选
text-field 单行输入框 基本文本输入
text-area 多行输入框 便于输入长文本
password 密码输入框 输入内容不可见
toggle 开关按钮 常用于二元状态切换
radio-button 单选按钮 一组中只能选一个
slider 滑动条 区间数值选择
label 文本标签 仅用于展示,无输入
test-db-connection 测试连接按钮 检查数据库连通性,配合多属性
directory 目录路径输入框 输入或浏览本地目录
directories 多路径输入框 一次配置多个目录
time-interval-spinner 时间选择器 选择时间区间
list 列表组件 支持动态增删项

控件示例:

{
  "config": "ranger-env/test_db_connection",
  "widget": {
    "type": "test-db-connection",
    "display-name": "Test Connection",
    "required-properties": {
      "jdbc.driver.class": "ranger-admin-site/ranger.jpa.jdbc.driver",
      "jdbc.driver.url": "ranger-admin-site/ranger.jpa.jdbc.url",
      "db.connection.source.host": "ranger-site/ranger_admin_hosts",
      "db.type": "admin-properties/DB_FLAVOR",
      "db.connection.destination.host": "admin-properties/db_host",
      "db.connection.user": "admin-properties/db_user",
      "db.connection.password": "admin-properties/db_password"
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意

实际页面自定义时,建议结合控件类型与属性联动能力,充分利用 theme.json 灵活性,为不同业务需求量身打造最佳交互体验。

#theme.json#metainfo.xml#可视化#UI美化#运维工具
category详解[三]
theme详解[二]

← category详解[三] theme详解[二]→

最近更新
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
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式