AMBARI-19713 Styles for showing Config Changes need more polishing. (ababiichuk)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/03d90ae8 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/03d90ae8 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/03d90ae8 Branch: refs/heads/branch-dev-patch-upgrade Commit: 03d90ae876c405d702b08609765715713d08dc19 Parents: 35d2773 Author: ababiichuk <[email protected]> Authored: Wed Jan 25 20:44:26 2017 +0200 Committer: ababiichuk <[email protected]> Committed: Thu Jan 26 12:31:59 2017 +0200 ---------------------------------------------------------------------- ambari-web/app/styles/application.less | 66 +++++++++----- ambari-web/app/styles/common.less | 6 +- .../modal_popups/dependent_configs_list.hbs | 91 +------------------- .../modal_popups/dependent_configs_table.hbs | 72 ++++++++++++++++ .../dependent_configs_list_popup.js | 19 ++++ 5 files changed, 141 insertions(+), 113 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/03d90ae8/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index cf84c5b..612c09c 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -2290,28 +2290,52 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox { td { min-width: 120px; word-break: break-all; + &.check-box-col { + min-width: 5px; + width: 5px; + } + &.config-dependency-name { + min-width: @config-dependency-t-name-width; + } + &.config-dependency-service { + min-width: @config-dependency-t-service-width; + max-width: @config-dependency-t-service-width; + } + &.config-dependency-group { + max-width: @config-dependency-t-group-width; + } + &.config-dependency-filename { + max-width: @config-dependency-t-filename-width; + } + &.config-dependency-value, + &.config-dependency-recommended-value { + width: @config-dependency-t-value-width; + min-width: @config-dependency-t-value-width; + } + .diff { + td { + color: #fff; + &.empty { + width: 50%; + } + &.delete { + background-color: @health-status-red !important; + } + &.insert { + background-color: @health-status-green !important; + } + &.replace { + background-color: @health-status-orange !important; + } + } + } } - td.check-box-col { - min-width: 5px; - width: 5px; - } - td.config-dependency-name { - min-width: @config-dependency-t-name-width; - } - td.config-dependency-service { - min-width: @config-dependency-t-service-width; - max-width: @config-dependency-t-service-width; - } - td.config-dependency-group { - max-width: @config-dependency-t-group-width; - } - td.config-dependency-filename { - max-width: @config-dependency-t-filename-width; - } - td.config-dependency-value, - td.config-dependency-recommended-value { - width: @config-dependency-t-value-width; - min-width: @config-dependency-t-value-width; + .config-dependencies-headings-wrapper { + width: 100%; + .config-dependencies-heading { + float: left; + width: 50%; + } } } http://git-wip-us.apache.org/repos/asf/ambari/blob/03d90ae8/ambari-web/app/styles/common.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/common.less b/ambari-web/app/styles/common.less index 5541d7c..29bb49d 100644 --- a/ambari-web/app/styles/common.less +++ b/ambari-web/app/styles/common.less @@ -35,11 +35,11 @@ /************************************************************************ * Health status(service/host/host component health)icon colors ***********************************************************************/ -@health-status-red: #ff0000; +@health-status-red: #EF6162; @health-status-blue: #0000ff; -@health-status-green: #5AB400; +@health-status-green: #3FAE2A; @health-status-yellow: #FFD13D; -@health-status-orange: #FF8E00; +@health-status-orange: #E98A41; @maintenance-black: #000; /************************************************************************ * Health status(service/host/host component health)icon colors ends http://git-wip-us.apache.org/repos/asf/ambari/blob/03d90ae8/ambari-web/app/templates/common/modal_popups/dependent_configs_list.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/modal_popups/dependent_configs_list.hbs b/ambari-web/app/templates/common/modal_popups/dependent_configs_list.hbs index c53e29d..3a03c07 100644 --- a/ambari-web/app/templates/common/modal_popups/dependent_configs_list.hbs +++ b/ambari-web/app/templates/common/modal_popups/dependent_configs_list.hbs @@ -18,96 +18,9 @@ <span id="config-dependencies" class="limited-height-2"> {{#if view.recommendations.length}} - <h4>{{t popup.dependent.configs.table.recommended}}</h4> - <div class="alert alert-warning"> - {{#if view.isAfterRecommendation}} - <div>{{t popup.dependent.configs.title.recommendation}}</div> - {{/if}} - <div>{{t popup.dependent.configs.title.values}}</div> - </div> - <table class="table table-hover"> - <thead> - <tr> - <th>{{t common.property}}</th> - <th>{{t common.service}}</th> - <th>{{t common.configGroup}}</th> - <th>{{t common.fileName}}</th> - <th class="row-fluid"> - <div class="col-md-6"> - {{t popup.dependent.configs.table.currentValue}} - </div> - <div class="col-md-6"> - {{t popup.dependent.configs.table.recommendedValue}} - </div> - </th> - <th class="check-box-col">{{view view.toggleAll}}<label {{bindAttr for="view.toggleAllId"}}></label></th> - </tr> - </thead> - <tbody> - {{#each recommendation in view.recommendations}} - <tr {{bindAttr class="recommendation.saveRecommended:active"}}> - <td class="config-dependency-name">{{recommendation.propertyName}}</td> - <td class="config-dependency-service">{{recommendation.serviceDisplayName}}</td> - <td class="config-dependency-group"> - <span {{bindAttr class="recommendation.allowChangeGroup::not-active-link"}} ><a href="javascript:void(null);" class="black" - {{action showSelectGroupPopup recommendation.serviceName target="App.router.mainServiceInfoConfigsController"}}> - {{recommendation.configGroup}} - </a></span> - </td> - <td class="config-dependency-filename">{{recommendation.propertyFileName}}</td> - <td> - <div> - {{view App.ConfigDiffView configBinding="recommendation"}} - </div> - </td> - <td class="check-box-col">{{view App.CheckboxView checkedBinding="recommendation.saveRecommended"}}</td> - </tr> - {{/each}} - </tbody> - </table> + {{view App.DependentConfigsTableView recommendationsBinding="view.recommendations"}} {{/if}} {{#if view.requiredChanges.length}} - <h4>{{t popup.dependent.configs.table.required}}</h4> - <div class="alert alert-warning"> - {{t popup.dependent.configs.title.required}} - </div> - <table class="table table-hover"> - <thead> - <tr> - <th>{{t common.property}}</th> - <th>{{t common.service}}</th> - <th>{{t common.configGroup}}</th> - <th>{{t common.fileName}}</th> - <th class="row-fluid"> - <div class="col-md-6"> - {{t popup.dependent.configs.table.currentValue}} - </div> - <div class="col-md-6"> - {{t popup.dependent.configs.table.newValue}} - </div> - </th> - </tr> - </thead> - <tbody> - {{#each recommendation in view.requiredChanges}} - <tr> - <td class="config-dependency-name">{{recommendation.propertyName}}</td> - <td class="config-dependency-service">{{recommendation.serviceDisplayName}}</td> - <td class="config-dependency-group"> - <span {{bindAttr class="recommendation.allowChangeGroup::not-active-link"}} ><a href="javascript:void(null);" class="black" - {{action showSelectGroupPopup recommendation.serviceName target="App.router.mainServiceInfoConfigsController"}}> - {{recommendation.configGroup}} - </a></span> - </td> - <td class="config-dependency-filename">{{recommendation.propertyFileName}}</td> - <td> - <div> - {{view App.ConfigDiffView configBinding="recommendation"}} - </div> - </td> - </tr> - {{/each}} - </tbody> - </table> + {{view App.DependentConfigsTableView recommendationsBinding="view.requiredChanges" isEditable=false}} {{/if}} </span> http://git-wip-us.apache.org/repos/asf/ambari/blob/03d90ae8/ambari-web/app/templates/common/modal_popups/dependent_configs_table.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/modal_popups/dependent_configs_table.hbs b/ambari-web/app/templates/common/modal_popups/dependent_configs_table.hbs new file mode 100644 index 0000000..eed81f5 --- /dev/null +++ b/ambari-web/app/templates/common/modal_popups/dependent_configs_table.hbs @@ -0,0 +1,72 @@ +{{! +* 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. +}} + +<h4>{{view.title}}</h4> +<div class="alert alert-warning">{{{view.message}}}</div> +<table class="table table-hover"> + <thead> + <tr> + <th>{{t common.property}}</th> + <th>{{t common.service}}</th> + <th>{{t common.configGroup}}</th> + <th>{{t common.fileName}}</th> + <th> + <div class="config-dependencies-headings-wrapper"> + <div class="config-dependencies-heading"> + {{t popup.dependent.configs.table.currentValue}} + </div> + <div class="config-dependencies-heading"> + {{#if view.isEditable}} + {{t popup.dependent.configs.table.recommendedValue}} + {{else}} + {{t popup.dependent.configs.table.newValue}} + {{/if}} + </div> + </div> + </th> + {{#if view.isEditable}} + <th class="check-box-col">{{view view.parentView.toggleAll}}<label {{bindAttr for="view.parentView.toggleAllId"}}></label></th> + {{/if}} + </tr> + </thead> + <tbody> + {{#each recommendation in view.recommendations}} + <tr {{bindAttr class="recommendation.saveRecommended:active"}}> + <td class="config-dependency-name">{{recommendation.propertyName}}</td> + <td class="config-dependency-service">{{recommendation.serviceDisplayName}}</td> + <td class="config-dependency-group"> + <span {{bindAttr class="recommendation.allowChangeGroup::not-active-link"}} > + <a href="javascript:void(null);" class="black" + {{action showSelectGroupPopup recommendation.serviceName target="App.router.mainServiceInfoConfigsController"}}> + {{recommendation.configGroup}} + </a> + </span> + </td> + <td class="config-dependency-filename">{{recommendation.propertyFileName}}</td> + <td> + <div> + {{view App.ConfigDiffView configBinding="recommendation"}} + </div> + </td> + {{#if view.isEditable}} + <td class="check-box-col">{{view App.CheckboxView checkedBinding="recommendation.saveRecommended"}}</td> + {{/if}} + </tr> + {{/each}} + </tbody> +</table> http://git-wip-us.apache.org/repos/asf/ambari/blob/03d90ae8/ambari-web/app/views/common/modal_popups/dependent_configs_list_popup.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/modal_popups/dependent_configs_list_popup.js b/ambari-web/app/views/common/modal_popups/dependent_configs_list_popup.js index e8e6df5..ffb3add 100644 --- a/ambari-web/app/views/common/modal_popups/dependent_configs_list_popup.js +++ b/ambari-web/app/views/common/modal_popups/dependent_configs_list_popup.js @@ -18,6 +18,25 @@ var App = require('app'); +App.DependentConfigsTableView = Em.View.extend({ + templateName: require('templates/common/modal_popups/dependent_configs_table'), + recommendations: [], + isEditable: true, + title: Em.computed.ifThenElse('isEditable', Em.I18n.t('popup.dependent.configs.table.recommended'), Em.I18n.t('popup.dependent.configs.table.required')), + message: function () { + var message = ''; + if (this.get('isEditable')) { + if (this.get('parentView.isAfterRecommendation')) { + message += Em.I18n.t('popup.dependent.configs.title.recommendation') + '<br>'; + } + message += Em.I18n.t('popup.dependent.configs.title.values'); + } else { + message += Em.I18n.t('popup.dependent.configs.title.required'); + } + return message; + }.property('isEditable') +}); + App.DependentConfigsListView = Em.View.extend({ templateName: require('templates/common/modal_popups/dependent_configs_list'), isAfterRecommendation: true,
