AMBARI-7395. Configs: hover dismiss issues and ui cleanup.(xiwang)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/6446499d Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/6446499d Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/6446499d Branch: refs/heads/branch-alerts-dev Commit: 6446499d27acfa78c78608293a377a43835911e2 Parents: 84133c2 Author: Xi Wang <xiw...@apache.org> Authored: Thu Sep 18 16:26:51 2014 -0700 Committer: Xi Wang <xiw...@apache.org> Committed: Thu Sep 18 16:50:29 2014 -0700 ---------------------------------------------------------------------- .../ui/admin-web/app/views/leftNavbar.html | 2 - ambari-web/app/messages.js | 1 + ambari-web/app/models/service_config_version.js | 7 ++- ambari-web/app/styles/application.less | 51 ++++++++++++-------- .../common/configs/config_history_flow.hbs | 20 ++++---- .../common/configs/service_version_box.hbs | 17 +++---- .../templates/main/dashboard/config_history.hbs | 6 +-- .../views/common/configs/config_history_flow.js | 19 +++----- 8 files changed, 63 insertions(+), 60 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/6446499d/ambari-admin/src/main/resources/ui/admin-web/app/views/leftNavbar.html ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/leftNavbar.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/leftNavbar.html index 0aa9340..8119428 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/views/leftNavbar.html +++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/leftNavbar.html @@ -66,7 +66,6 @@ Launch Install Wizard </a> </div> - </div> </div> @@ -98,6 +97,5 @@ </div> </div> - </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/6446499d/ambari-web/app/messages.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js index 1052d9b..67b7799 100644 --- a/ambari-web/app/messages.js +++ b/ambari-web/app/messages.js @@ -2013,6 +2013,7 @@ Em.I18n.translations = { 'dashboard.configHistory.table.configGroup.default' : 'default', 'dashboard.configHistory.table.empty' : 'No history to display', 'dashboard.configHistory.table.notes.default': 'Initial configurations for {0}', + 'dashboard.configHistory.table.notes.no': '<i>No notes</i>', 'dashboard.configHistory.table.version.versionText' : 'V{0}', 'dashboard.configHistory.table.version.prefix' : 'V', 'dashboard.configHistory.table.current.tooltip' : 'Current config for {0}:{1}', http://git-wip-us.apache.org/repos/asf/ambari/blob/6446499d/ambari-web/app/models/service_config_version.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/models/service_config_version.js b/ambari-web/app/models/service_config_version.js index 61703ad..0f436a8 100644 --- a/ambari-web/app/models/service_config_version.js +++ b/ambari-web/app/models/service_config_version.js @@ -42,9 +42,12 @@ App.ServiceConfigVersion = DS.Model.extend({ configGroupName: function () { return (this.get('groupName') === 'default') ? (this.get('displayName') + ' ' + Em.I18n.t('common.default')) : this.get('groupName'); }.property('groupName'), - briefNotes: function () { - return (typeof this.get('notes') === 'string') ? this.get('notes').slice(0, 81) : ""; + fullNotes: function () { + return (typeof this.get('notes') === 'string') ? this.get('notes') || Em.I18n.t('dashboard.configHistory.table.notes.no') : Em.I18n.t('dashboard.configHistory.table.notes.no'); }.property('notes'), + briefNotes: function () { + return this.get('fullNotes').slice(0, 81); + }.property('fullNotes'), moreNotesExists: function () { return (typeof this.get('notes') === 'string') ? this.get('notes').length > 80 : false; }.property('notes'), http://git-wip-us.apache.org/repos/asf/ambari/blob/6446499d/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 0420804..e20980a 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -4995,15 +4995,15 @@ ul.inline li { height: 58px; margin: 5px 0; .flow-element { - width: 18.5%; height: 58px; + width: 15.2%; .version-box { position: relative; height: 90%; } .version-box .box { cursor: pointer; - width: 72%; + width: 92%; height: 100%; background-color: #ffffff; -webkit-border-radius: 4px; @@ -5066,11 +5066,14 @@ ul.inline li { .date{ color: #808080; font-size: 11px; - word-wrap: break-word; + white-space: nowrap; } } - .btn { - font-size: 13px; + .version-operations-buttons { + text-align: center; + .btn { + font-size: 13px; + } } } .version-box:hover{ @@ -5098,17 +5101,10 @@ ul.inline li { } } - .arrow-box { - width: 20%; - margin-left: 1px; - margin-top: 9px; - .icon-arrow-right { - color: #c3c3c3; - } - } + } .first { - width: 13%; + width: 14%; margin-left: 0px; .arrow-box { display: none; @@ -5119,8 +5115,8 @@ ul.inline li { } .icon-chevron-box { - margin-top: 12px; - width: 5%; + margin-top: 10px; + width: 4%; cursor: pointer; .icon-chevron-right, .icon-chevron-left{ @@ -5131,6 +5127,15 @@ ul.inline li { color: #808080; } } + .icon-chevron-box.disabled { + margin-top: 10px; + width: 4%; + cursor: not-allowed; + .icon-chevron-right, + .icon-chevron-left{ + color: #c3c3c3; + } + } } .version-info-bar-wrapper { position: fixed; @@ -5208,8 +5213,9 @@ ul.inline li { min-width: 200px; max-width: 300px; line-height: 20px; + font-size: 13px; margin: 0px; - padding: 5px; + padding: 8px; color: #333333; cursor: default; .content { @@ -5217,7 +5223,7 @@ ul.inline li { .date{ color: #808080; font-size: 11px; - word-wrap: break-word; + white-space: nowrap; } .notes{ word-wrap: break-word; @@ -5225,8 +5231,11 @@ ul.inline li { white-space: pre-wrap; } } - .btn { - font-size: 13px; + .version-operations-buttons { + text-align: center; + .btn { + font-size: 13px; + } } } } @@ -7019,4 +7028,4 @@ i.icon-asterisks { } } } -} \ No newline at end of file +} http://git-wip-us.apache.org/repos/asf/ambari/blob/6446499d/ambari-web/app/templates/common/configs/config_history_flow.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/config_history_flow.hbs b/ambari-web/app/templates/common/configs/config_history_flow.hbs index 6904615..0addf30 100644 --- a/ambari-web/app/templates/common/configs/config_history_flow.hbs +++ b/ambari-web/app/templates/common/configs/config_history_flow.hbs @@ -19,13 +19,14 @@ <div id="config_history_flow" {{bindAttr class="view.showCompareVersionBar:two-stories-bar:one-story-bar"}}> <div class="version-slider"> - <div {{bindAttr class=":icon-chevron-box :pull-left view.showLeftArrow::hide"}} {{action shiftBack target="view"}} data-toggle="arrow-tooltip" - {{translateAttr data-original-title="services.service.config.configHistory.leftArrow.tooltip"}}><i class="icon-chevron-left icon-3x"></i></div> + <div {{bindAttr disabled="view.showLeftArrow"}} {{bindAttr class=":icon-chevron-box :pull-left view.showLeftArrow::disabled"}} {{action shiftBack target="view"}} data-toggle="arrow-tooltip" + {{translateAttr data-original-title="services.service.config.configHistory.rightArrow.tooltip"}}><i class="icon-chevron-left icon-3x"></i></div> + <div {{bindAttr disabled="view.showRightArrow"}} {{bindAttr class=":icon-chevron-box :pull-left view.showRightArrow::disabled"}} {{action shiftForward target="view"}} data-toggle="arrow-tooltip" + {{translateAttr data-original-title="services.service.config.configHistory.leftArrow.tooltip"}}><i class="icon-chevron-right icon-3x"></i></div> {{#each serviceVersion in view.visibleServiceVersion}} {{view view.serviceVersionBox serviceVersionBinding=serviceVersion}} {{/each}} - <div {{bindAttr class=":icon-chevron-box :pull-right view.showRightArrow::hide"}} {{action shiftForward target="view"}} data-toggle="arrow-tooltip" - {{translateAttr data-original-title="services.service.config.configHistory.rightArrow.tooltip"}}><i class="icon-chevron-right icon-3x"></i></div> + </div> <div class="version-info-bar-wrapper"> {{#if App.isManager}} @@ -35,7 +36,7 @@ <i class="icon-remove-circle icon-large"></i> </div> <div class="label-wrapper span8" - data-toggle="tooltip" {{bindAttr data-original-title="view.compareServiceVersion.notes"}}> + data-toggle="tooltip" {{bindAttr data-original-title="view.compareServiceVersion.fullNotes"}}> {{t services.service.config.configHistory.comparing}} <span class="label label-info">{{view.displayedServiceVersion.versionText}}</span> ... @@ -70,10 +71,9 @@ <div class="pull-right"><i class="icon-caret-right"></i></div> </div> <ul class="dropdown-menu version-info-operations"> - <div class="content"> <strong>{{serviceVersion.displayName}}</strong> <span class="label label-info">{{serviceVersion.versionText}}</span> - <strong>{{t services.service.config.configHistory.configGroup}}:{{serviceVersion.configGroupName}}</strong> - <div class="date">{{serviceVersion.createdDate}}</div> - <div class="notes">{{serviceVersion.notes}}</div> + <div class="content"><span class="label label-info">{{serviceVersion.versionText}}</span> <span class="pull-right"><strong>{{serviceVersion.configGroupName}}</strong></span> + <div class="date"><strong>{{serviceVersion.author}}</strong> {{t dashboard.configHistory.info-bar.authoredOn}} <strong>{{serviceVersion.createdDate}}</strong></div> + <div class="notes">{{{serviceVersion.fullNotes}}}</div> </div> <div class="version-operations-buttons"> <button {{bindAttr disabled="serviceVersion.disabledActionAttr.view" class=":btn serviceVersion.isDisplayed:not-allowed-cursor" title="serviceVersion.disabledActionMessages.view"}} {{action switchVersion serviceVersion target="view"}}><i class="icon-search"></i> {{t common.view}}</button> @@ -94,7 +94,7 @@ </ul> </div> {{/if}} - <div class="label-wrapper span8" data-toggle="tooltip" {{bindAttr data-original-title="view.displayedServiceVersion.notes"}}> + <div class="label-wrapper span8" data-toggle="tooltip" {{bindAttr data-original-title="view.displayedServiceVersion.fullNotes"}}> <span class="label label-info">{{view.displayedServiceVersion.versionText}}</span> {{#if view.displayedServiceVersion.isCurrent}} <span class="label label-success">{{t common.current}}</span> http://git-wip-us.apache.org/repos/asf/ambari/blob/6446499d/ambari-web/app/templates/common/configs/service_version_box.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/service_version_box.hbs b/ambari-web/app/templates/common/configs/service_version_box.hbs index debda80..4a23dc6 100644 --- a/ambari-web/app/templates/common/configs/service_version_box.hbs +++ b/ambari-web/app/templates/common/configs/service_version_box.hbs @@ -17,7 +17,7 @@ }} <div {{bindAttr class=":flow-element :pull-left serviceVersion.first:first"}}> - <div class="arrow-box pull-left"><i class="icon-arrow-right icon-3x"></i></div> + <div class="arrow-box pull-left"></div> <div class="version-box"> <div {{bindAttr class=":version-info :box :pull-right serviceVersion.isDisplayed:displayed serviceVersion.isDisabled:grayedOut"}} {{action switchVersion serviceVersion target="view.parentView"}}> <div class="top-label"> @@ -27,19 +27,18 @@ <div class="content">{{serviceVersion.timeSinceCreated}}</div> {{#if serviceVersion.isCurrent}} <div class="current-label"> - <span class="label label-success"> - {{t common.current}} - <i {{bindAttr class=":icon-refresh :restart-required-service serviceVersion.isRestartRequired::hidden"}}></i> - </span> + <span class="label label-success"> + {{t common.current}} + <i {{bindAttr class=":icon-refresh :restart-required-service serviceVersion.isRestartRequired::hidden"}}></i> + </span> </div> {{/if}} </div> <div class="version-popover"> - <div class="content"> <strong>{{serviceVersion.displayName}}</strong> <span class="label label-info">{{serviceVersion.versionText}}</span> - <strong>{{t services.service.config.configHistory.configGroup}}:{{serviceVersion.configGroupName}}</strong> - <div class="date">{{serviceVersion.createdDate}}</div> - <div class="notes">{{serviceVersion.notes}}</div> + <div class="content"><span class="label label-info">{{serviceVersion.versionText}}</span> <span class="pull-right"><strong>{{serviceVersion.configGroupName}}</strong></span> + <div class="date"><strong>{{serviceVersion.author}}</strong> {{t dashboard.configHistory.info-bar.authoredOn}} <strong>{{serviceVersion.createdDate}}</strong></div> + <div class="notes">{{{serviceVersion.fullNotes}}}</div> </div> <div class="version-operations-buttons"> <button {{bindAttr disabled="serviceVersion.disabledActionAttr.view" class=":btn serviceVersion.isDisplayed:not-allowed-cursor" title="serviceVersion.disabledActionMessages.view"}} {{action switchVersion serviceVersion target="view.parentView"}}><i class="icon-search"></i> {{t common.view}}</button> http://git-wip-us.apache.org/repos/asf/ambari/blob/6446499d/ambari-web/app/templates/main/dashboard/config_history.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard/config_history.hbs b/ambari-web/app/templates/main/dashboard/config_history.hbs index aa33887..9f7ee86 100644 --- a/ambari-web/app/templates/main/dashboard/config_history.hbs +++ b/ambari-web/app/templates/main/dashboard/config_history.hbs @@ -60,14 +60,14 @@ <td class="notes"> {{#if item.moreNotesExists}} {{#if view.showLessNotes}} - {{item.briefNotes}} + {{{item.briefNotes}}} <a {{action toggleShowLessStatus target="view"}} class="show-more-button">>> More</a> {{else}} - {{item.notes}} + {{{item.fullNotes}}} <a {{action toggleShowLessStatus target="view"}} class="show-more-button"><< Less</a> {{/if}} {{else}} - {{item.briefNotes}} + {{{item.briefNotes}}} {{/if}} </td> {{/view}} http://git-wip-us.apache.org/repos/asf/ambari/blob/6446499d/ambari-web/app/views/common/configs/config_history_flow.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/configs/config_history_flow.js b/ambari-web/app/views/common/configs/config_history_flow.js index 228df57..68cb57b 100644 --- a/ambari-web/app/views/common/configs/config_history_flow.js +++ b/ambari-web/app/views/common/configs/config_history_flow.js @@ -27,7 +27,7 @@ App.ConfigHistoryFlowView = Em.View.extend({ startIndex: 0, showLeftArrow: false, showRightArrow: false, - VERSIONS_IN_FLOW: 5, + VERSIONS_IN_FLOW: 6, VERSIONS_IN_DROPDOWN: 6, /** * flag identify whether to show all versions or short list of them @@ -97,7 +97,7 @@ App.ConfigHistoryFlowView = Em.View.extend({ }); return serviceVersions.sort(function (a, b) { - return Em.get(a, 'createTime') - Em.get(b, 'createTime'); + return Em.get(b, 'createTime') - Em.get(a, 'createTime'); }); }.property('serviceName', 'controller.selectedConfigGroup.name'), @@ -142,11 +142,6 @@ App.ConfigHistoryFlowView = Em.View.extend({ }, didInsertElement: function () { - $('.version-box').hoverIntent(function() { - $(this).find('.version-popover').delay(800).fadeIn(400); - }, function() { - $(this).find('.version-popover').hide(); - }); App.tooltip(this.$('[data-toggle=tooltip]'),{ placement: 'bottom' }); @@ -217,7 +212,6 @@ App.ConfigHistoryFlowView = Em.View.extend({ serviceVersions.forEach(function (serviceVersion, index) { // find current in default group if (serviceVersion.get('isCurrent') && serviceVersion.get('groupName') == Em.I18n.t('dashboard.configHistory.table.configGroup.default')){ - serviceVersion.set('isDisplayed', true); currentIndex = index; } @@ -228,7 +222,6 @@ App.ConfigHistoryFlowView = Em.View.extend({ // find current in selected group if (serviceVersion.get('isCurrent') && serviceVersion.get('groupName') == selectedGroupName){ serviceVersion.set('isDisplayed', true); - currentIndex = index; } }); @@ -238,7 +231,6 @@ App.ConfigHistoryFlowView = Em.View.extend({ // find current in default group if (serviceVersion.get('isCurrent') && serviceVersion.get('groupName') == Em.I18n.t('dashboard.configHistory.table.configGroup.default')){ serviceVersion.set('isDisplayed', true); - currentIndex = index; } }); @@ -297,7 +289,6 @@ App.ConfigHistoryFlowView = Em.View.extend({ */ adjustFlowView: function () { var startIndex = this.get('startIndex'); - this.get('serviceVersions').forEach(function (serviceVersion, index) { serviceVersion.set('first', (index === startIndex)); }); @@ -461,16 +452,18 @@ App.ConfigHistoryFlowView = Em.View.extend({ }); }, /** - * move back to the previous service version + * move back to the later service version */ shiftBack: function () { + if (!this.get('showLeftArrow')) return; this.decrementProperty('startIndex'); this.adjustFlowView(); }, /** - * move forward to the next service version + * move forward to the previous service version */ shiftForward: function () { + if (!this.get('showRightArrow')) return; this.incrementProperty('startIndex'); this.adjustFlowView(); },