AMBARI-7247. Slider View: App configs look inconsistent from Ambari's configs. (onechiporenko)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/9588d2a9 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/9588d2a9 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/9588d2a9 Branch: refs/heads/branch-alerts-dev Commit: 9588d2a9cd899193250cdc22c3cbd13dd1be969f Parents: 015e6ab Author: Oleg Nechiporenko <onechipore...@apache.org> Authored: Wed Sep 10 19:48:17 2014 +0300 Committer: Oleg Nechiporenko <onechipore...@apache.org> Committed: Wed Sep 10 19:48:17 2014 +0300 ---------------------------------------------------------------------- .../main/resources/ui/app/mixins/with_panels.js | 50 +++++++++++++++++ .../main/resources/ui/app/models/slider_app.js | 24 ++------- .../resources/ui/app/styles/application.less | 16 ++++++ .../ui/app/templates/slider_app/configs.hbs | 36 ++++++------- .../ui/app/templates/slider_app/summary.hbs | 10 ++-- .../src/main/resources/ui/app/translations.js | 3 +- .../ui/app/views/slider_app/configs_view.js | 57 ++++++++++++++++++++ 7 files changed, 152 insertions(+), 44 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/9588d2a9/contrib/views/slider/src/main/resources/ui/app/mixins/with_panels.js ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/mixins/with_panels.js b/contrib/views/slider/src/main/resources/ui/app/mixins/with_panels.js new file mode 100644 index 0000000..b1358be --- /dev/null +++ b/contrib/views/slider/src/main/resources/ui/app/mixins/with_panels.js @@ -0,0 +1,50 @@ +/** + * 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. + */ + +/** + * Mixin for views that use Bootstrap.BsPanelComponent component + * Add caret for collapsed/expanded panels at the left of panel's title + * Usage: + * <code> + * App.SomeView = Em.View.extend(App.WithPanels, { + * didInsertElement: function() { + * this.addCarets(); + * } + * }); + * </code> + * @type {Em.Mixin} + */ +App.WithPanels = Ember.Mixin.create({ + + /** + * Add caret before panel's title and add handlers for expand/collapse events + * Set caret-down when panel is expanded + * Set caret-right when panel is collapsed + * @method addArrows + */ + addCarets: function() { + var panel = $('.panel'); + panel.find('.panel-heading').prepend('<span class="pull-left icon icon-caret-down"></span>'); + panel.on('hidden.bs.collapse', function (e) { + $(e.delegateTarget).find('span.icon').addClass('icon-caret-right').removeClass('icon-caret-down'); + }).on('shown.bs.collapse', function (e) { + $(e.delegateTarget).find('span.icon').addClass('icon-caret-down').removeClass('icon-caret-right'); + }); + } + +}); http://git-wip-us.apache.org/repos/asf/ambari/blob/9588d2a9/contrib/views/slider/src/main/resources/ui/app/models/slider_app.js ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/models/slider_app.js b/contrib/views/slider/src/main/resources/ui/app/models/slider_app.js index 6d6bfcc..bf02f30 100644 --- a/contrib/views/slider/src/main/resources/ui/app/models/slider_app.js +++ b/contrib/views/slider/src/main/resources/ui/app/models/slider_app.js @@ -108,24 +108,6 @@ App.SliderApp = DS.Model.extend({ hiddenCategories: ['yarn-site', 'global'], /** - * Configs grouped to categories by site-objects - * @type {Array} - */ - configsByCategories: function () { - var configs = this.get('configs'), - hiddenCategories = this.get('hiddenCategories'), - groupedConfigs = []; - Ember.keys(configs).forEach(function (site) { - groupedConfigs.push({ - name: site, - configs: this.mapObject(configs[site]), - isVisible: !hiddenCategories.contains(site) - }); - }, this); - return groupedConfigs; - }.property('configs.@each'), - - /** * Display metrics only for running apps * @type {boolean} */ @@ -141,7 +123,11 @@ App.SliderApp = DS.Model.extend({ mapObject: function(o) { if (Ember.typeOf(o) !== 'object') return []; return Ember.keys(o).map(function(key) { - return {key: key, value: o[key]}; + return { + key: key, + value: o[key], + isMultiline: o[key].indexOf("\n") !== -1 || o[key].length > 100 + }; }); } http://git-wip-us.apache.org/repos/asf/ambari/blob/9588d2a9/contrib/views/slider/src/main/resources/ui/app/styles/application.less ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/styles/application.less b/contrib/views/slider/src/main/resources/ui/app/styles/application.less index 11ec39b..f5024a1 100644 --- a/contrib/views/slider/src/main/resources/ui/app/styles/application.less +++ b/contrib/views/slider/src/main/resources/ui/app/styles/application.less @@ -609,6 +609,22 @@ a { } } + +.app_configs { + a.accordion-toggle { + display: block; + } + .row { + margin: 10px 0; + textarea { + height: 200px; + padding-left: 5px; + padding-right: 5px; + resize: none; + } + } +} + .app-alerts { overflow-y: auto; ul { http://git-wip-us.apache.org/repos/asf/ambari/blob/9588d2a9/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/configs.hbs ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/configs.hbs b/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/configs.hbs index c3597d7..6eddc8d 100644 --- a/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/configs.hbs +++ b/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/configs.hbs @@ -16,27 +16,25 @@ * limitations under the License. }} -{{#if model.configsByCategories.length}} - {{#each configCategory in configsByCategories}} +<div class="app_configs"> + {{#each configCategory in view.configsByCategories}} {{#if configCategory.isVisible}} {{#bs-panel heading=configCategory.name collapsible=true}} - <table class="table table-striped table-bordered table-condensed"> - <thead> - <tr> - <th class="col-sm-4">{{t common.name}}</th> - <th>{{t common.value}}</th> - </tr> - </thead> - <tbody> - {{#each configCategory.configs}} - <tr> - <td>{{key}}</td> - <td>{{formatWordBreak value}}</td> - </tr> - {{/each}} - </tbody> - </table> + <div class="container-fluid"> + {{#each configCategory.configs}} + <div class="row"> + <div class="col-md-3">{{formatWordBreak key devider="."}}</div> + <div> + {{#if isMultiline}} + {{textarea disabled=true value=value classNames="col-md-6"}} + {{else}} + <input type="text" {{bind-attr value=value}} disabled="disabled" class="col-md-6" /> + {{/if}} + </div> + </div> + {{/each}} + </div> {{/bs-panel}} {{/if}} {{/each}} -{{/if}} \ No newline at end of file +</div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/9588d2a9/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/summary.hbs ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/summary.hbs b/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/summary.hbs index 0ba3998..cf86dc5 100644 --- a/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/summary.hbs +++ b/contrib/views/slider/src/main/resources/ui/app/templates/slider_app/summary.hbs @@ -67,11 +67,11 @@ {{/bs-panel}} <div class="panel panel-default panel-alerts"> <div class="panel-heading"> - Alerts + {{t common.alerts}} <div class="btn-group pull-right panel-link"> {{!-- <a class="btn btn-default btn-sm" target="_blank" rel="tooltip" {{translateAttr title="sliderApp.summary.go_to_nagios"}} - {{bindAttr href="view.nagiosUrl"}}> + {{bind-attr href="view.nagiosUrl"}}> <i class="icon-link"></i> </a>--}} </div> @@ -83,7 +83,7 @@ <div class="container-fluid"> <div class="row"> <div class="col-md-1 status-icon"> - <i {{bindAttr class="iconClass :icon-large"}}></i> + <i {{bind-attr class="iconClass :icon-large"}}></i> </div> <div class="col-md-11"> <div class="row"> @@ -105,11 +105,11 @@ {{#if controller.model.showMetrics}} <div class="panel panel-default"> <div class="panel-heading"> - Metrics + {{t common.metrics}} <div class="btn-group pull-right panel-link"> <a class="btn btn-default btn-sm" target="_blank" rel="tooltip" {{translateAttr title="sliderApp.summary.go_to_ganglia"}} - {{bindAttr href="view.gangliaUrl"}}> + {{bind-attr href="view.gangliaUrl"}}> <i class="icon-link"></i> </a> </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/9588d2a9/contrib/views/slider/src/main/resources/ui/app/translations.js ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/translations.js b/contrib/views/slider/src/main/resources/ui/app/translations.js index e5e6a79..efa3979 100644 --- a/contrib/views/slider/src/main/resources/ui/app/translations.js +++ b/contrib/views/slider/src/main/resources/ui/app/translations.js @@ -46,7 +46,8 @@ Em.I18n.translations = { 'started': 'Started', 'finished': 'Finished', 'diagnostics': 'Diagnostics', - 'description': 'Description' + 'description': 'Description', + 'alerts': 'Alerts' }, 'error.noHDFS': 'Slider applications view requires HDFS service.', http://git-wip-us.apache.org/repos/asf/ambari/blob/9588d2a9/contrib/views/slider/src/main/resources/ui/app/views/slider_app/configs_view.js ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/views/slider_app/configs_view.js b/contrib/views/slider/src/main/resources/ui/app/views/slider_app/configs_view.js new file mode 100644 index 0000000..5093fb9 --- /dev/null +++ b/contrib/views/slider/src/main/resources/ui/app/views/slider_app/configs_view.js @@ -0,0 +1,57 @@ +/** + * 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. + */ + +App.SliderAppConfigsView = Ember.View.extend(App.WithPanels, { + + /** + * List of configs group by categories + * @type {Object[]} + */ + configsByCategories: Em.A([]), + + /** + * Observer for model's configs + * Updates <code>configsByCategories</code> + * @method configsObserver + */ + configsObserver: function() { + var model = this.get('controller.content'), + configs = model.get('.configs'), + configsByCategories = this.get('configsByCategories'), + hiddenCategories = model.get('hiddenCategories'); + Em.keys(configs).forEach(function (site) { + if (configsByCategories.mapBy('name').contains(site)) { + var c = configsByCategories.findBy('name', site); + c.set('configs', model.mapObject(configs[site])); + c.set('isVisible', !hiddenCategories.contains(site)); + } + else { + configsByCategories.pushObject(Em.Object.create({ + name: site, + configs: model.mapObject(configs[site]), + isVisible: !hiddenCategories.contains(site) + })); + } + }); + }.observes('controller.content.configs.@each'), + + didInsertElement: function() { + this.addCarets(); + } + +});
