You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by ab...@apache.org on 2017/01/26 10:38:06 UTC
ambari git commit: AMBARI-19713 Styles for showing Config Changes
need more polishing. (ababiichuk)
Repository: ambari
Updated Branches:
refs/heads/trunk 35d277399 -> 03d90ae87
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/trunk
Commit: 03d90ae876c405d702b08609765715713d08dc19
Parents: 35d2773
Author: ababiichuk <ab...@hortonworks.com>
Authored: Wed Jan 25 20:44:26 2017 +0200
Committer: ababiichuk <ab...@hortonworks.com>
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,