Repository: ambari Updated Branches: refs/heads/trunk 7ad3d2f20 -> 81021351b
AMBARI-10581. Multiple config layout issues with Hive configs (Richard Zang via srimanth) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/81021351 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/81021351 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/81021351 Branch: refs/heads/trunk Commit: 81021351bf23cc365a90f47f08fc70cbdd9d0bb3 Parents: 7ad3d2f Author: Srimanth Gunturi <[email protected]> Authored: Sat Apr 18 13:53:45 2015 -0700 Committer: Srimanth Gunturi <[email protected]> Committed: Sat Apr 18 13:53:45 2015 -0700 ---------------------------------------------------------------------- .../HDP/2.2/services/HIVE/themes/theme.json | 66 +++++++++++++------- .../service/configs/widget_popover_support.js | 16 +---- ambari-web/app/models/configs/section.js | 25 +++++++- ambari-web/app/models/configs/sub_section.js | 27 +++++++- ambari-web/app/styles/application.less | 22 ++++--- .../configs/service_config_layout_tab.hbs | 2 +- 6 files changed, 108 insertions(+), 50 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/81021351/ambari-server/src/main/resources/stacks/HDP/2.2/services/HIVE/themes/theme.json ---------------------------------------------------------------------- diff --git a/ambari-server/src/main/resources/stacks/HDP/2.2/services/HIVE/themes/theme.json b/ambari-server/src/main/resources/stacks/HDP/2.2/services/HIVE/themes/theme.json index 0ba885f..e8ad1a2 100644 --- a/ambari-server/src/main/resources/stacks/HDP/2.2/services/HIVE/themes/theme.json +++ b/ambari-server/src/main/resources/stacks/HDP/2.2/services/HIVE/themes/theme.json @@ -11,6 +11,8 @@ "name": "settings", "display-name": "Settings", "layout": { + "tab-rows": 6, + "tab-columns": 3, "sections": [ { "name": "optimization", @@ -20,18 +22,18 @@ "row-span": "3", "column-span": "2", "section-columns": "2", - "section-rows": "3", + "section-rows": "4", "subsections": [ { "name": "optimization-row1-col1", "display-name": "Storage", "row-index": "0", "column-index": "0", - "row-span": "1", + "row-span": "2", "column-span": "1" }, { - "name": "optimization-row1-col2", + "name": "optimization-row1-col2-1", "display-name": "", "row-index": "0", "column-index": "1", @@ -39,9 +41,18 @@ "column-span": "1" }, { + "name": "optimization-row1-col2-2", + "display-name": "", + "row-index": "1", + "column-index": "1", + "row-span": "1", + "column-span": "1", + "border": true + }, + { "name": "optimization-row2-col1", "display-name": "Optimization Vectorization", - "row-index": "1", + "row-index": "2", "column-index": "0", "row-span": "1", "column-span": "1" @@ -49,7 +60,7 @@ { "name": "optimization-row2-col2", "display-name": "", - "row-index": "1", + "row-index": "2", "column-index": "1", "row-span": "1", "column-span": "1" @@ -57,7 +68,7 @@ { "name": "optimization-row3-col1", "display-name": "Memory", - "row-index": "2", + "row-index": "3", "column-index": "0", "row-span": "1", "column-span": "1" @@ -65,7 +76,7 @@ { "name": "optimization-row3-col2", "display-name": "", - "row-index": "2", + "row-index": "3", "column-index": "1", "row-span": "1", "column-span": "1" @@ -83,11 +94,18 @@ "section-rows": "2", "subsections": [ { - "name": "acid-transactions-row1-col1", + "name": "acid-transactions-row1-col1-1", "row-index": "0", "column-index": "0", "row-span": "1", "column-span": "1" + }, + { + "name": "acid-transactions-row1-col1-2", + "row-index": "1", + "column-index": "0", + "row-span": "1", + "column-span": "1" } ] }, @@ -99,7 +117,7 @@ "row-span": "3", "column-span": "2", "section-columns": "2", - "section-rows": "3", + "section-rows": "2", "subsections": [ { "name": "performance-row1-col1", @@ -147,7 +165,7 @@ "name": "interactive-query-row1-col1", "row-index": "0", "column-index": "0", - "row-span": "1", + "row-span": "2", "column-span": "1" } ] @@ -166,7 +184,7 @@ "name": "security-row1-col1", "row-index": "0", "column-index": "0", - "row-span": "1", + "row-span": "2", "column-span": "1" } ] @@ -190,12 +208,12 @@ "subsection-name": "optimization-row1-col1" }, { - "config": "hive-env/hive_exec_orc_storage_strategy", - "subsection-name": "optimization-row1-col2" + "config": "hive-site/hive.exec.orc.default.compress", + "subsection-name": "optimization-row1-col2-1" }, { - "config": "hive-site/hive.exec.orc.default.compress", - "subsection-name": "optimization-row1-col2" + "config": "hive-env/hive_exec_orc_storage_strategy", + "subsection-name": "optimization-row1-col2-2" }, { "config": "hive-site/hive.optimize.index.filter", @@ -207,11 +225,11 @@ }, { "config": "hive-site/hive.exec.orc.encoding.strategy", - "subsection-name": "optimization-row1-col2" + "subsection-name": "optimization-row1-col2-2" }, { "config": "hive-site/hive.exec.orc.compression.strategy", - "subsection-name": "optimization-row1-col2" + "subsection-name": "optimization-row1-col2-2" }, { "config": "hive-site/hive.vectorized.execution.enabled", @@ -231,31 +249,31 @@ }, { "config": "hive-env/hive_txn_acid", - "subsection-name": "acid-transactions-row1-col1" + "subsection-name": "acid-transactions-row1-col1-1" }, { "config": "hive-site/hive.txn.manager", - "subsection-name": "acid-transactions-row1-col1" + "subsection-name": "acid-transactions-row1-col1-1" }, { "config": "hive-site/hive.support.concurrency", - "subsection-name": "acid-transactions-row1-col1" + "subsection-name": "acid-transactions-row1-col1-1" }, { "config": "hive-site/hive.compactor.initiator.on", - "subsection-name": "acid-transactions-row1-col1" + "subsection-name": "acid-transactions-row1-col1-1" }, { "config": "hive-site/hive.compactor.worker.threads", - "subsection-name": "acid-transactions-row1-col1" + "subsection-name": "acid-transactions-row1-col1-1" }, { "config": "hive-site/hive.enforce.bucketing", - "subsection-name": "acid-transactions-row1-col1" + "subsection-name": "acid-transactions-row1-col1-2" }, { "config": "hive-site/hive.exec.dynamic.partition.mode", - "subsection-name": "acid-transactions-row1-col1" + "subsection-name": "acid-transactions-row1-col1-2" }, { "config": "hive-site/hive.execution.engine", http://git-wip-us.apache.org/repos/asf/ambari/blob/81021351/ambari-web/app/mixins/main/service/configs/widget_popover_support.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/mixins/main/service/configs/widget_popover_support.js b/ambari-web/app/mixins/main/service/configs/widget_popover_support.js index 9855396..6bc2016 100644 --- a/ambari-web/app/mixins/main/service/configs/widget_popover_support.js +++ b/ambari-web/app/mixins/main/service/configs/widget_popover_support.js @@ -43,21 +43,7 @@ App.WidgetPopoverSupport = Em.Mixin.create({ */ popoverPlacement: function () { // popover to left if config is located at the right most sub-section of the right most section. - return this.get('isWidgetInTheRightColumn') ? 'left' : 'right'; - }.property('isWidgetInTheRightColumn'), - - /** - * Determines if widget is in the right column - * @type {boolean} - */ - isWidgetInTheRightColumn: function () { - var secCI = this.get('section.columnIndex'); - var secCS = this.get('section.columnSpan'); - var tabCols = this.get('tab.columns'); - var subsecCI = this.get('subSection.columnIndex'); - var subsecCS = this.get('subSection.columnSpan'); - var secCols = this.get('section.sectionColumns'); - return ((secCI + secCS == tabCols) && (subsecCI + subsecCS == secCols)); + return this.get('section.isLastColumn') && this.get('subSection.isLastColumn')? 'left' : 'right'; }.property(), initPopover: function () { http://git-wip-us.apache.org/repos/asf/ambari/blob/81021351/ambari-web/app/models/configs/section.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/models/configs/section.js b/ambari-web/app/models/configs/section.js index d78cfea..ee40b63 100644 --- a/ambari-web/app/models/configs/section.js +++ b/ambari-web/app/models/configs/section.js @@ -29,7 +29,30 @@ App.Section = DS.Model.extend({ sectionColumns: DS.attr('number', {defaultValue: 1}), sectionRows: DS.attr('number', {defaultValue: 1}), subSections: DS.hasMany('App.SubSection'), - tab: DS.belongsTo('App.Tab') + tab: DS.belongsTo('App.Tab'), + isFirstRow: function () { + return this.get('rowIndex') == 0; + }.property(), + + isMiddleRow: function () { + return this.get('rowIndex') != 0 && (this.get('rowIndex') + this.get('rowSpan') < this.get('tab.rows')); + }.property(), + + isLastRow: function () { + return this.get('rowIndex') + this.get('rowSpan') == this.get('tab.rows'); + }.property(), + + isFirstColumn: function () { + return this.get('columnIndex') == 0; + }.property(), + + isMiddleColumn: function () { + return this.get('columnIndex') != 0 && (this.get('columnIndex') + this.get('columnSpan') < this.get('tab.columns')); + }.property(), + + isLastColumn: function () { + return this.get('columnIndex') + this.get('columnSpan') == this.get('tab.columns'); + }.property() }); http://git-wip-us.apache.org/repos/asf/ambari/blob/81021351/ambari-web/app/models/configs/sub_section.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/models/configs/sub_section.js b/ambari-web/app/models/configs/sub_section.js index 648aae3..d7099ac 100644 --- a/ambari-web/app/models/configs/sub_section.js +++ b/ambari-web/app/models/configs/sub_section.js @@ -22,13 +22,36 @@ App.SubSection = DS.Model.extend({ id: DS.attr('string'), name: DS.attr('string'), displayName: DS.attr('string'), - border: DS.attr('boolean', {defaultValue: true}), + border: DS.attr('boolean', {defaultValue: false}), rowIndex: DS.attr('number', {defaultValue: 1}), columnIndex: DS.attr('number', {defaultValue: 1}), rowSpan: DS.attr('number', {defaultValue: 1}), columnSpan: DS.attr('number', {defaultValue: 1}), section: DS.belongsTo('App.Section'), - configProperties: DS.hasMany('App.StackConfigProperty') + configProperties: DS.hasMany('App.StackConfigProperty'), + isFirstRow: function () { + return this.get('rowIndex') == 0; + }.property(), + + isMiddleRow: function () { + return this.get('rowIndex') != 0 && (this.get('rowIndex') + this.get('rowSpan') < this.get('section.sectionRows')); + }.property(), + + isLastRow: function () { + return this.get('rowIndex') + this.get('rowSpan') == this.get('section.sectionRows'); + }.property(), + + isFirstColumn: function () { + return this.get('columnIndex') == 0; + }.property(), + + isMiddleColumn: function () { + return this.get('columnIndex') != 0 && (this.get('columnIndex') + this.get('columnSpan') < this.get('section.sectionColumns')); + }.property(), + + isLastColumn: function () { + return this.get('columnIndex') + this.get('columnSpan') == this.get('section.sectionColumns'); + }.property() }); http://git-wip-us.apache.org/repos/asf/ambari/blob/81021351/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 8a7614b..938d539 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -5623,10 +5623,10 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox { table-layout: fixed; // for width to be equally distributed margin: 0 -20px; .config-section { - padding: 10px; + height: 100%; + padding: 30px; border: 1px solid #aaa; vertical-align: top; - h4 { font-size: 22px; font-weight: 400; @@ -5636,19 +5636,27 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox { font-size: 18px; font-weight: 400; } - - td:not(:first-of-type) { - border-left: 2px solid #ccc; // horizontal splitter + .vertical-splitter { + border-left: 2px solid #ccc; // vertical splitter padding-left: 20px; } + .config-subsection-table { width: 100%; - height: 90%; - border-spacing: 5px; + height: 90%; // fallback option + height: ~"calc(100% - 30px)"; border-collapse: separate; table-layout: fixed; .config-subsection { vertical-align: top; + &.no-horizontal-splitter { + border-bottom: none; // no horizontal splitter for subsection on the last row + } + border-bottom: 2px solid #ccc; // horizontal splitter + + .directories { + min-width: 0px !important; + } } } } http://git-wip-us.apache.org/repos/asf/ambari/blob/81021351/ambari-web/app/templates/common/configs/service_config_layout_tab.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/service_config_layout_tab.hbs b/ambari-web/app/templates/common/configs/service_config_layout_tab.hbs index 358b9e8..20d4ea8 100644 --- a/ambari-web/app/templates/common/configs/service_config_layout_tab.hbs +++ b/ambari-web/app/templates/common/configs/service_config_layout_tab.hbs @@ -27,7 +27,7 @@ {{#each subRow in section.subsectionRows}} <tr> {{#each subsection in subRow}} - <td {{bindAttr class="subsection.isHiddenByFilter:invisible :config-subsection"}}> + <td {{bindAttr class="subsection.isHiddenByFilter:invisible subsection.isFirstColumn::vertical-splitter :config-subsection subsection.isLastRow:no-horizontal-splitter" colspan="subsection.columnSpan" rowspan="subsection.rowSpan"}}> <h5>{{subsection.displayName}} </h5> {{#each config in subsection.configs}} {{#if config.widget}}
