Repository: ambari Updated Branches: refs/heads/trunk 3367667cd -> 4360fc62e
AMBARI-6595 Config History: Implement Config Version History Pulldown and hover menu actions (with mock data). (atkach) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/4360fc62 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/4360fc62 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/4360fc62 Branch: refs/heads/trunk Commit: 4360fc62ec1351d1b1c833dfa9191b5140f0a1d6 Parents: 3367667 Author: atkach <atk...@hortonworks.com> Authored: Thu Jul 24 16:42:52 2014 +0300 Committer: atkach <atk...@hortonworks.com> Committed: Thu Jul 24 16:42:52 2014 +0300 ---------------------------------------------------------------------- ambari-web/app/config.js | 3 +- ambari-web/app/messages.js | 6 ++ ambari-web/app/routes/main.js | 10 ++- ambari-web/app/styles/application.less | 50 ++++++++++++- .../common/configs/config_history_flow.hbs | 31 +++++++- .../common/configs/save_configuration.hbs | 22 ++++++ .../templates/common/configs/service_config.hbs | 6 +- .../views/common/configs/config_history_flow.js | 79 ++++++++++++++++++++ ambari-web/app/views/main/dashboard.js | 37 +++++---- 9 files changed, 214 insertions(+), 30 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/4360fc62/ambari-web/app/config.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/config.js b/ambari-web/app/config.js index 35800b7..ebd9372 100644 --- a/ambari-web/app/config.js +++ b/ambari-web/app/config.js @@ -79,7 +79,8 @@ App.supports = { ubuntu: true, views: false, flume: true, - databaseConnection: true + databaseConnection: true, + configHistory: true }; if (App.enableExperimental) { http://git-wip-us.apache.org/repos/asf/ambari/blob/4360fc62/ambari-web/app/messages.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js index b21b069..775ba30 100644 --- a/ambari-web/app/messages.js +++ b/ambari-web/app/messages.js @@ -212,6 +212,8 @@ Em.I18n.translations = { 'common.type.number': 'number', 'common.author': 'Author', 'common.notes': 'Notes', + 'common.view': 'View', + 'common.compare': 'Compare', 'passiveState.turnOn':'Turn On Maintenance Mode', 'passiveState.turnOff':'Turn Off Maintenance Mode', @@ -1934,6 +1936,10 @@ Em.I18n.translations = { 'dashboard.configHistory.table.filteredHostsInfo': '{0} of {1} versions showing', 'dashboard.configHistory.table.current': '(Current)', 'dashboard.configHistory.info-bar.authoredOn': 'authored on', + 'dashboard.configHistory.info-bar.changesToHandle': 'Changes to handle', + 'dashboard.configHistory.info-bar.showMore': 'Show more', + 'dashboard.configHistory.info-bar.save.popup.title': 'Save Configuration', + 'dashboard.configHistory.info-bar.save.popup.placeholder': 'What did you change?', 'timeRange.presets.1hour':'1h', 'timeRange.presets.12hour':'12h', http://git-wip-us.apache.org/repos/asf/ambari/blob/4360fc62/ambari-web/app/routes/main.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/routes/main.js b/ambari-web/app/routes/main.js index 9fd01a5..b383c9a 100644 --- a/ambari-web/app/routes/main.js +++ b/ambari-web/app/routes/main.js @@ -157,13 +157,17 @@ module.exports = Em.Route.extend({ configHistory: Em.Route.extend({ route: '/config_history', connectOutlets: function (router, context) { - router.set('mainDashboardController.selectedCategory', 'configHistory'); - router.get('mainDashboardController').connectOutlet('mainConfigHistory'); + if (App.get('supports.configHistory')) { + router.set('mainDashboardController.selectedCategory', 'configHistory'); + router.get('mainDashboardController').connectOutlet('mainConfigHistory'); + } else { + router.transitionTo('main.dashboard.widgets'); + } } }), goToServiceConfigs: function (router, event) { router.get('mainServiceItemController').set('routeToConfigs', true); - App.router.transitionTo('main.services.service.configs', App.Service.find(event.context)); + router.transitionTo('main.services.service.configs', App.Service.find(event.context)); router.get('mainServiceItemController').set('routeToConfigs', false); } }), http://git-wip-us.apache.org/repos/asf/ambari/blob/4360fc62/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 268ebf8..4ccd178 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -129,6 +129,7 @@ footer { @top-nav-menu-dropdown-border-color: #c3c3c3; @top-nav-menu-dropdown-bg-color: #ffffff; @top-nav-menu-dropdown-text-color: #333333; +@default-font-size: 14px; #top-nav { @@ -2496,7 +2497,7 @@ width:100%; } } -.modal-footer.align-center { +.align-center { text-align: center; } @@ -4847,6 +4848,7 @@ ul.inline li { } #config_history_flow { + margin-bottom: 100px; .version-slider { width: 100%; height: 100px; @@ -4860,24 +4862,27 @@ ul.inline li { height: 100%; background-color: #dcdcdc; border: 1px solid #000000; + font-size: 0.9em; .top-right-label { + font-size: @default-font-size; background-color: white; position: absolute; top: 0; left: 0; - width: 20px; + min-width: 20px; border: solid #000000; border-width: 0 1px 1px 0; padding: 5px; text-align: center; } .date { - margin-left: 35px; + margin-left: 40px; line-height: 30px; white-space: nowrap; } .content { padding: 0 5px; + line-height: 16px; } .current-label { position: absolute; @@ -4933,8 +4938,12 @@ ul.inline li { height: 60px; border: 2px solid #a9a9a9; background-color: #dcdcdc; - margin: 10px 0; + margin: 5px 0; padding: 5px; + position: fixed; + width: 52%; + z-index: 2; + min-width: 743px; .label-wrapper { line-height: 30px; @@ -4944,6 +4953,27 @@ ul.inline li { padding: 5px; } } + .dropdown-menu { + min-width: 660px; + li { + line-height: 30px; + } + li:hover { + background-color: #666666; + background-image: linear-gradient(to bottom, #666666, #555555); + color: white; + } + .icon-caret-right { + font-size: 20px; + margin-right: 20px; + } + div.row-fluid, a { + padding-left: 10px; + } + } + .dropdown-submenu .dropdown-menu { + min-width: 80px; + } } } @@ -4951,6 +4981,18 @@ ul.inline li { cursor: pointer; } +.lowercase { + text-transform:lowercase; +} +.ellipsis:after { + content: '...'; +} + +.full-width { + width: 100% +} + + .big-arrow-right { background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAA2CAQAAAAYac0YAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAFxIAABcSAWef0lIAAAC8SURBVGje7dfBDcIwDIXhv4h7uwmMkA1YjZGyQcMktBO0l6oEDhBQJMfoPZ9y8qcosmKonZ6RpaDunKr3FlhggQUWWGCBBRZYYOsI3Cy4Y7G2v81E4PY4Hqw9HzIQ8xtunfsCbp/7BPbAzcA+uDu49cmQZyJ44kL0xE0EL28XEoHZCzcRmL1Mhg3rg7tjPXAzLByJJoiB8/dYq5T+d0d6a6qwwgorrLDCCiussMIK+x/Yrjr3UriFXX/ZwVZCWg1F9uJ6aQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNC0wNy0yM1QxMzoxNzowNyswMjowMP0r3LUAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTQtMDctMjNUMTM6MTc6MDcrMDI6MDCMdmQJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAABJRU5ErkJggg==); http://git-wip-us.apache.org/repos/asf/ambari/blob/4360fc62/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 ac75cce..b94cabb 100644 --- a/ambari-web/app/templates/common/configs/config_history_flow.hbs +++ b/ambari-web/app/templates/common/configs/config_history_flow.hbs @@ -38,12 +38,35 @@ <div class="version-info-bar"> <div class="row-fluid"> <div class="btn-group pull-left"> - <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> + <a class="btn dropdown-toggle" data-toggle="dropdown" href="#" {{action hideFullList target="view"}}> <i class="icon-random"></i> <span class="caret"></span> </a> <ul class="dropdown-menu"> - + {{#each serviceVersion in view.dropDownList}} + <li class="pointer dropdown-submenu"> + <div class="row-fluid"> + <div class="span2">{{t common.version}}: {{serviceVersion.version}}</div> + <div class="span3">{{serviceVersion.date}}</div> + <div class="span2">{{serviceVersion.author}}</div> + <div class="span4"><span class="ellipsis">{{t dashboard.configHistory.info-bar.changesToHandle}}</span></div> + <div class="pull-right"><i class="icon-caret-right"></i></div> + </div> + <ul class="dropdown-menu"> + <li><a {{action "view" serviceVersion target="view"}}>{{t common.view}}</a></li> + <li><a {{action compare serviceVersion target="view"}}>{{t common.compare}}</a></li> + <li><a {{action revert serviceVersion target="view"}}>{{t common.revert}}</a></li> + </ul> + </li> + {{/each}} + {{#unless view.showFullList}} + <li class="align-center pointer" id="show_more"> + <a {{action openFullList target="view"}}> + {{t dashboard.configHistory.info-bar.showMore}} {{view.currentServiceVersion.serviceName}} + <span class="lowercase ellipsis">{{t dashboard.configHistory.title}}</span> + </a> + </li> + {{/unless}} </ul> </div> <div class="label-wrapper span8"> @@ -51,8 +74,8 @@ <strong>{{view.currentServiceVersion.author}}</strong> {{t dashboard.configHistory.info-bar.authoredOn}} <strong>{{view.currentServiceVersion.date}}</strong> </div> <div class="pull-right"> - <div class="btn">{{t common.cancel}}</div> - <div class="btn btn-success">{{t common.save}}</div> + <button class="btn" {{action cancel target="view"}}>{{t common.cancel}}</button> + <button class="btn btn-success" {{action save target="view"}}>{{t common.save}}</button> </div> </div> <div class="label-wrapper"> http://git-wip-us.apache.org/repos/asf/ambari/blob/4360fc62/ambari-web/app/templates/common/configs/save_configuration.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/save_configuration.hbs b/ambari-web/app/templates/common/configs/save_configuration.hbs new file mode 100644 index 0000000..ef39884 --- /dev/null +++ b/ambari-web/app/templates/common/configs/save_configuration.hbs @@ -0,0 +1,22 @@ +{{! +* Licensed to the Apache Software Foundation (ASF) under one +* or more contributor license agreements. See the NOTICE file +* distributed with this work for additional information +* regarding copyright ownership. The ASF licenses this file +* to you under the Apache License, Version 2.0 (the +* "License"); you may not use this file except in compliance +* with the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +}} + +<div class="row-fluid"> + <div class="span1">{{t common.notes}}</div> + <div class="span10">{{view view.notesArea}}</div> +</div> http://git-wip-us.apache.org/repos/asf/ambari/blob/4360fc62/ambari-web/app/templates/common/configs/service_config.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/service_config.hbs b/ambari-web/app/templates/common/configs/service_config.hbs index be92654..f566ab4 100644 --- a/ambari-web/app/templates/common/configs/service_config.hbs +++ b/ambari-web/app/templates/common/configs/service_config.hbs @@ -77,8 +77,10 @@ </div> {{/if}} -{{#if view.showConfigHistoryFlow}} - {{view App.ConfigHistoryFlowView serviceBinding="selectedService"}} +{{#if App.supports.configHistory}} + {{#if view.showConfigHistoryFlow}} + {{view App.ConfigHistoryFlowView serviceBinding="selectedService"}} + {{/if}} {{/if}} <div class="accordion"> http://git-wip-us.apache.org/repos/asf/ambari/blob/4360fc62/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 0fd27f6..882403e 100644 --- a/ambari-web/app/views/common/configs/config_history_flow.js +++ b/ambari-web/app/views/common/configs/config_history_flow.js @@ -27,6 +27,10 @@ App.ConfigHistoryFlowView = Em.View.extend({ startIndex: 0, showLeftArrow: true, showRightArrow: false, + /** + * flag identify whether to show all versions or short list of them + */ + showFullList: false, currentServiceVersion: function () { return this.get('serviceVersions').findProperty('current'); @@ -55,6 +59,26 @@ App.ConfigHistoryFlowView = Em.View.extend({ return this.get('serviceVersions').slice(this.get('startIndex'), (this.get('startIndex') + 5)); }.property('startIndex'), + /** + * list of service versions + * by default 6 is number of items in short list + */ + dropDownList: function () { + var serviceVersions = this.get('serviceVersions').without(this.get('currentServiceVersion')).reverse(); + if (this.get('showFullList')) { + return serviceVersions; + } + return serviceVersions.slice(0, 6); + }.property('serviceVersions', 'showFullList'), + + openFullList: function (event) { + event.stopPropagation(); + this.set('showFullList', true); + }, + hideFullList: function (event) { + this.set('showFullList', false); + }, + willInsertElement: function () { var serviceVersions = this.get('serviceVersions'); var startIndex = 0; @@ -79,6 +103,61 @@ App.ConfigHistoryFlowView = Em.View.extend({ this.set('showLeftArrow', (startIndex !== 0)); this.set('showRightArrow', ((startIndex + 5) !== this.get('serviceVersions.length'))); }, + + /** + * switch configs view version to chosen + */ + view: function () { + + }, + /** + * add config values of chosen version to view for comparison + */ + compare: function () { + + }, + /** + * revert config values to chosen version + */ + revert: function () { + + }, + /** + * cancel configuration saving + */ + cancel: function () { + + }, + /** + * save configuration + * @return {object} + */ + save: function () { + return App.ModalPopup.show({ + header: Em.I18n.t('dashboard.configHistory.info-bar.save.popup.title'), + bodyClass: Em.View.extend({ + templateName: require('templates/common/configs/save_configuration'), + notesArea: Em.TextArea.extend({ + classNames: ['full-width'], + placeholder: Em.I18n.t('dashboard.configHistory.info-bar.save.popup.placeholder') + }) + }), + footerClass: Ember.View.extend({ + templateName: require('templates/main/service/info/save_popup_footer') + }), + primary: Em.I18n.t('common.save'), + secondary: Em.I18n.t('common.cancel'), + onSave: function () { + this.hide(); + }, + onDiscard: function () { + this.hide(); + }, + onCancel: function () { + this.hide(); + } + }); + }, serviceVersions: [ Em.Object.create({ serviceName: 'HDFS', http://git-wip-us.apache.org/repos/asf/ambari/blob/4360fc62/ambari-web/app/views/main/dashboard.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/dashboard.js b/ambari-web/app/views/main/dashboard.js index 7c53064..9705203 100644 --- a/ambari-web/app/views/main/dashboard.js +++ b/ambari-web/app/views/main/dashboard.js @@ -24,23 +24,28 @@ App.MainDashboardView = Em.View.extend({ templateName: require('templates/main/dashboard'), selectedBinding: 'controller.selectedCategory', - categories: [ - { - name: 'widgets', - url: 'dashboard.index', - label: Em.I18n.t('dashboard.widgets.title') - }, - { - name: 'charts', - url: 'dashboard.charts.index', - label: Em.I18n.t('dashboard.heatmaps.title') - }, - { - name: 'configHistory', - url: 'dashboard.configHistory', - label: Em.I18n.t('dashboard.configHistory.title') + categories: function () { + var categories = [ + { + name: 'widgets', + url: 'dashboard.index', + label: Em.I18n.t('dashboard.widgets.title') + }, + { + name: 'charts', + url: 'dashboard.charts.index', + label: Em.I18n.t('dashboard.heatmaps.title') + } + ]; + if (App.get('supports.configHistory')) { + categories.push({ + name: 'configHistory', + url: 'dashboard.configHistory', + label: Em.I18n.t('dashboard.configHistory.title') + }) } - ], + return categories; + }.property('App.supports.configHistory'), NavItemView: Ember.View.extend({ tagName: 'li', classNameBindings: 'isActive:active'.w(),
