THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
...
The first step is to create a theme for your service in the stack definition folder. A theme provides necessary information of the UI to construct the enhanced configs. UI information like layout (tabs, sections, sub-sections), placement of configs in the sub-sections, and which widgets and units to use for each config
Modify metainfo.xml to define a theme by including a themes block.
<themes-dir>themes-dir</themes-dir>
<themes>
<theme>
<fileName>theme.json</fileName>
<default>true</default>
</theme>
</themes>The optional <themes-dir> element can be used if the default theme folder of 'themes' is not desired, or taken by another service in the same metainfo.xml.
Multiple themes can be defined, however only the first default theme will be used for the service.
Each theme points to a theme JSON file (via fileName element) in the themes-dir folder.
The theme.json file contains one configuration block containing three main keys
layouts - specify tabs, sections and sub-section layout
placement - specify configurations to place in sub-sections
widgets - specify which UI widgets to use for each config
{
"configuration": {
"layouts": [
...
],
"placement": {
...
},
"widgets": [
...
]
}
}Layouts - Multiple layouts can be defined in a theme. Currently only the first layout will be used while rendering. A layout has following content:
Tabs: Multiple tabs can be defined in a layout. Each tab can have its contents laid out using a simple grid-layout using the tab-columns and tab-rows keys.
In below example the Settings tab has a grid of 3 rows and 2 columns in which sections can be placed."layouts": [
{
"name": "default",
"tabs": [
{
"name": "settings",
"display-name": "Settings",
"layout": {
"tab-columns": "2",
"tab-rows": "3",
"sections": [ … ]
}
}]
}
]Sections: Each section is defined inside a tab and specifies its location and size inside the tab's grid-layout by using the row-index, column-index, row-span and column-span keys. Being a container itself, it can further define a grid-layout for the sub-sections it contains using the section-rows and section-columns keys.
In below example the MapReduce section occupies the first cell of the Settings tab grid, and itself has a grid-layout of 1 row and 3 columns."sections": [
{
"name": "section-mr-scheduler",
"display-name": "MapReduce",
"row-index": "0",
"column-index": "0",
"row-span": "1",
"column-span": "1",
"section-columns": "3",
"section-rows": "1",
"subsections": [ ... ]
},
...
]Sub-sections: Each sub-section is defined inside a section and specifies its location and size inside the section's grid-layout using the row-index, column-index, row-span and column-span keys. Each section also has an optional border boolean key which tells if a border should encapsulate its content.
"subsections": [
{
"name": "subsection-mr-scheduler-row1-col1",
"display-name": "MapReduce Framework",
"row-index": "0",
"column-index": "0",
"row-span": "1",
"column-span": "1"
},
...
]
Placement: Specifies the order of configurations that are to be placed into each sub-section. Each placement identifies a config, and which sub-section it should appear in. The placement specifies which layout it applies to using the configuration-layout key.
"placement": {
"configuration-layout": "default",
"configs": [
{
"config": "mapred-site/mapreduce.map.memory.mb",
"subsection-name": "subsection-mr-scheduler-row1-col1"
},
{
"config": "mapred-site/mapreduce.reduce.memory.mb",
"subsection-name": "subsection-mr-scheduler-row1-col2"
},
...
]
}- Wigets: The widgets array specifies which UI widget should be used to show a specific config. It also contains extra UI specific metadata required to show the widget.
In the example below, both configs are using the slider widget. However the unit varies, resulting in one config being shown in bytes and another being shown as percentage. This unit is purely for showing a config - which is different from the units in which it is actually persisted in Ambari. For example, the percent unit below maybe persisted as a float, while the MB config below can be persisted in B (bytes)."widgets": [
{
"config": "yarn-site/yarn.nodemanager.resource.memory-mb",
"widget": {
"type": "slider",
"units": [
{
"unit-name": "MB"
}
]
}
},
{
"config": "yarn-site/yarn.nodemanager.resource.percentage-physical-cpu-limit",
"widget": {
"type": "slider",
"units": [
{
"unit-name": "percent"
}
]
}
},
{
"config": "yarn-site/yarn.node-labels.enabled",
"widget": {
"type": "toggle"
}
},
...
]
...
Figure below shows some config dependencies - A effects B and C, each of which effects DE and FG respectively.
...
Now assume user changes B to B' - a call to /recommendations will only change D and E to D' and E' respectively (AB'CD'E'FG). No other config will be changed. Now assume that C is changed to C' - /recommendations will only change F and G to F' and G' while still keeping the values of B' D' E' intact (AB'C'D'E'F'G'). Now if you change A to A', it will affect all its children (A'B''C''D''E''F''G''). The user will have chance to pick and choose which he wants to apply.
...
HDFS HDP-2.2 theme.json
YARN HDP-2.2 theme.json
HIVE HDP-2.2 theme.json
RANGER HDP-2.3 theme_version_2.json
Appendix
Appendix A - Widget Non-UI Metadata
...
| Widget | Metadata Used |
|---|---|
| Slider | <value-attributes> |
| Combo, List | <value-attributes> |
| List | <value-attributes> |
| Time Interval Spinner | <value-attributes> |
| Toggle, Checkbox | <value-attributes> |
| Directory, Directories, Password, Text Field, Text Area | No value-attributes required |
| Radio-Buttons | <value-attributes> |
...