【成神之路】Ambari实战-050-UI-如何通过配置修改ambari样式

于 2024-10-09 07:30:00 发布
阅读量714 收藏 13
点赞数 19
分类专栏： 成神之路 文章标签： javascript ambari hadoop bigtop ui 大数据 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TTBIGDATA/article/details/142735720
版权

在Ambari中，通过自定义UI控件（Widget），你可以灵活调整配置项的展现形式，使其更符合实际需求。这篇文章将详细介绍各种控件的使用，并提供代码示例和实际应用场景，帮助你成为UI配置的行家！💻✨

在这里插入图片描述

1. 配置说明

1.1 Ambari 配置中的 Widget 和 Metadata 结构

WidgetMetadata 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为例，配置的UI控件详细解析

2.1 Slider（滑块）：

适用于数值范围的配置

应用场景：
滑块（Slider）控件非常适合那些需要调整数值的配置，用户可以通过滑动来选择值，例如内存大小、文件大小或超时时间等。滑动条让数值调节变得简单直观。

在这里插入图片描述

  • 配置项：HBase Master Maximum Memory

    • 配置文件: hbase-env.xml
    • 描述: 该配置用于设置 HBase Master 进程的最大堆内存，默认值为 4096MB。Master 进程是 HBase 中的管理节点，负责管理 RegionServer 及集群的健康状态。适合用滑块来方便地调整内存大小。
    <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>
    • UI展现: 🎚️ 滑块可让用户在 0 到 16GB 范围内调整 HBase Master 的最大内存大小，用户可以通过拖动滑块来分配更多或更少的内存资源，适用于集群扩展时。

⬇️⬇️⬇️查看全部内容⬇️⬇️⬇️

更多详细内容请关注我们的微信公众号：发送"文章"关键字获取

或加入QQ1群，了解版本动向，解答大数据问题。

⬆️⬆️⬆️查看全部内容⬆️⬆️⬆️

2.7 Radio-Buttons（单选按钮）：

适用于互斥的配置选项

应用场景：
Radio-Buttons（单选按钮） 控件适用于那些互斥的配置选项，用户只能从多个选项中选择一个。这种控件用于模式选择、日志级别等，确保用户只能选择一个值，且每个选项都有对应的说明标签。

注意首先根据官方文档配置，entry 个数 > 3 ， 有label ，单选才会触发 radiobox 。但是目前页面上没看到，不知道是不是卡bug了

注意首先根据官方文档配置，entry 个数 > 3 ， 有label ，单选才会触发 radiobox 。但是目前页面上没看到，不知道是不是卡bug了

注意首先根据官方文档配置，entry 个数 > 3 ， 有label ，单选才会触发 radiobox 。但是目前页面上没看到，不知道是不是卡bug了

在这里插入图片描述

  • 配置项：Hive Log Level

    • 配置文件: hive-env.xml
    • 描述: 用户可以通过此单选按钮选择 Hive 的日志级别（INFO、DEBUG、WARN、ERROR）。该配置控制 Hive 的日志输出级别，用户可以根据需求选择合适的级别。
    <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>
    • UI展现: 🔘 用户可以通过单选按钮选择日志输出级别，INFO 为推荐选项，DEBUG 输出最详细的日志，WARN 和 ERROR 适合过滤不必要的信息，保证系统运行日志的简洁性。

3. 控件样式的区别（基于 value-attributes 关键字段）

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

关键字段解释

  1. entries 的个数：

    • 如果 entries 的个数少于等于 2，并且没有 label，页面会显示为 Toggle 切换开关。
    • 如果 entries 的个数大于 2 并且带有 label，页面会显示为 Radio-Buttons（单选按钮）。

  2. 是否有 label 标签：

    • 如果 entries 包含 label，表示每个选项有说明文字。对于 Radio-Buttons 控件来说，label 是必需的。
    • 如果没有 label，则视为没有选项说明。通常在下拉菜单或列表中不需要 label。

  3. selection-cardinality 的值：

    • 当 selection-cardinality 的值大于 1 时，表示用户可以选择多个选项，页面通常会显示为 List（列表） 控件。
    • 如果 selection-cardinality 的值为 1，页面会显示为单选控件（Combo 或 Radio-Buttons）。

  4. type 的值：

    • 当 type 为 directory 时，页面显示为 Directory（目录选择器）。
    • 当 type 为 directories 时，页面显示为 Directories（多目录选择器）。
    • 当 type 为 password 时，输入的字符会被隐藏，页面显示为 Password（密码输入框）。
    • 当 type 为 text 时，页面显示为 Text Field（单行文本框）。
    • 当 type 为 content 时，页面显示为 Text Area（多行文本区域）。
TTBIGDATA
关注
专栏目录
ansible-ambari-config-module:通过Ambari API更新Ambari配置的模块
05-16
ansible-ambari-config-module 通过Ambari API更新Ambari配置的模块。 请在以下位置找到实际的模块文件： extra_modules/ambari_cluster_config.pyextra_modules/ambari_service_control.pyextra_modules/ambari_...
Linux运维-Hadoop集群之ambari实践-30ambari-agent配置及启动.mp4
05-30
Linux运维-Hadoop集群之ambari实践-30ambari-agent配置及启动.mp4
apache-ambari-2.7.6-src.tar.gz
11-17
3. **资源管理**：Ambari允许用户调整服务的配置参数，以优化集群资源使用，例如修改YARN的内存分配或者HDFS的副本因子。 4. **升级与回滚**：当新的Hadoop版本发布时，Ambari提供平滑的升级路径，并且如果出现任何...
ambari-web:自定义ambari-web样式
05-06
Ambari-web可能支持主题系统，允许你通过更换预设的主题或者创建新的主题来改变整体样式。查找与主题相关的配置文件，如`themes`目录，修改或创建新主题。 5. **自定义组件样式**： 如果你希望改变特定组件（如...
ambari-2.7
10-17
ambari-2.7
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 1044
Vue 2 中使用 Vue I18n 插件实现中英文切换
【Vue】a-radio-group单选框数字与字符串回显问题
叶为正的博客
10-08 83
根据后端接口返回数字或字符串，来配置Ant Design of Vue中a-radio-group单选框的回显问题，注意value中的取值是不一样的。
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 494
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
2301_77012231的博客
10-01 630
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
vue-live2d看板娘集成方案设计使用教程
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1275
vue-live2d看板娘集成方案设计使用教程
Puppeteer自动化：使用JavaScript定制PDF下载
最新发布
ip16yun的博客
10-08 475
Puppeteer 是一个强大的Node.js库，提供了对无头Chrome或Chromium的控制，可以用于生成网页快照、抓取数据、自动化测试等任务。其中，生成PDF文件是一个常见的需求，本文将通过使用Puppeteer展示如何自动化生成定制的PDF，并使用代理IP、设置user-agent、cookie等技术来增强自动化过程的灵活性与稳定性。为了更好地理解如何定制Puppeteer生成的PDF文件，我们提供一个生成A4纸张格式的网页PDF的实例。用户可以根据需求自定义输出的PDF格式或内容。
如何使用Redisson的布隆过滤器？
付聪
10-02 476
【代码】如何使用Redisson的布隆过滤器？
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 6072
Webpack 打包后文件过大，如何优化？
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1232
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
解决IE中a标签中的图片有边框
weixin_41674235的博客
10-08 92
‌1、通过CSS去除边框‌：在CSS中为img标签添加border:0 none;样式，例如：img{border:0 none;这种方法适用于大多数现代浏览器‌12。3‌、通过JavaScript去除点击后的虚线框‌：在a标签中添加outline:none;和text-decoration:none;这可以同时去除点击后的虚线框和下划线‌。
React响应式修改数组和对象
警警的博客
09-30 944
React的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。你不能直接修改对象中的属性，而是需要创建一个新的对象来更新状态。不可变性（Immutability）：React中的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。避免直接修改状态：React的状态是不可变的，直接修改状态（如this.state.items.push(4)）不会触发重新渲染，因为React无法检测到这种变化。// 修改name属性。
Vue3实现mqtt的订阅与发布
徐三岁的博客
09-30 560
MQTT（Message Queuing Telemetry Transport）是一种轻量级的、基于发布/订阅模式的通信协议，通常用于连接物联网设备和应用程序之间的通信。它最初由IBM开发，现在由OASIS（Organization for the Advancement of Structured Information Standards）进行标准化。MQTT的工作原理：它采用发布/订阅模式，其中设备（称为客户端）可以发布消息到特定的主题（topics），而其他设备可以订阅这些主题以接收消息。
深入解析 JavaScript 中的普通函数与箭头函数：区别、适用场景与最佳实践
qq_22841387的博客
10-02 1157
在函数式编程的支持上，箭头函数作为 ES6 新引入的一种更为简洁的函数形式，极大地方便了开发者编写简洁高效的代码。然而，箭头函数的行为与传统的普通函数有所不同，尤其是在 this。普通函数在定义时，尤其是带有单行返回值的情况下，显得略微冗长。无论是全局调用、作为对象方法调用，还是在事件处理函数中调用，动态变化的场景，比如回调函数，尤其是在类方法中作为回调传递时，箭头函数避免了手动绑定。在回调函数、数组操作等场景中，箭头函数的简洁性尤为明显。在定义对象的方法时，箭头函数由于不绑定自己的。
【JAVA开源】基于Vue和SpringBoot的洗衣店订单管理系统
杨荧的CSDN博客
10-06 987
本文介绍了洗衣店订单管理系统的开发全过程。通过分析企业对于洗衣店订单管理系统的需求，创建了一个计算机管理洗衣店订单管理系统的方案。文章介绍了洗衣店订单管理系统的系统分析部分，包括可行性分析等，系统设计部分主要介绍了系统功能设计和数据库设计。
docker ambari-agent 设置ambari-server ip
06-08
要在Docker容器中设置Ambari-agent的Ambari-server IP地址，可以使用以下步骤： 1. 启动Ambari-agent容器时，使用`-e`选项设置`AMBARI_SERVER_HOST`环境变量，并将其设置为Ambari-server的IP地址。例如： ``` docker run -e AMBARI_SERVER_HOST=<ambari_server_ip> ... ``` 2. 在容器内部，编辑`/etc/ambari-agent/conf/ambari-agent.ini`文件，将`[server]`部分中的`hostname`设置为Ambari-server的IP地址。例如： ``` [server] hostname = <ambari_server_ip> ``` 3. 重启Ambari-agent服务，以使更改生效。例如： ``` ambari-agent restart ``` 这样，Ambari-agent将能够与指定的Ambari-server进行通信。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值