AMBARI-7438. UI cleanup: Admin and SCV.(xiwang)

ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css

@@ -334,6 +334,11 @@
   width: 14px;
 }
 
+.groups-pane table .search-container .namefilter,
+.users-pane table .search-container .namefilter {
+  font-weight: normal;
+}
+
 .settings-edit-toggle.disabled, .properties-toggle.disabled{
   color: #999;
   cursor: not-allowed;

ambari-web/app/messages.js

@@ -1421,8 +1421,8 @@ Em.I18n.translations = {
     'on the Ambari Server host to make the JDBC driver available and to enable testing the database connection.',
 
   'services.service.config.configHistory.configGroup': 'Config Group',
-  'services.service.config.configHistory.leftArrow.tooltip': 'Show earlier versions',
-  'services.service.config.configHistory.rightArrow.tooltip': 'Show later versions',
+  'services.service.config.configHistory.rightArrow.tooltip': 'Show earlier versions',
+  'services.service.config.configHistory.leftArrow.tooltip': 'Show later versions',
   'services.service.config.configHistory.dismissIcon.tooltip': 'Dismiss',
   'services.service.config.configHistory.makeCurrent.message': 'Created from service config version {0}',
   'services.service.config.configHistory.comparing': 'Comparing',

ambari-web/app/styles/application.less

@@ -5120,7 +5120,7 @@ ul.inline li {
       cursor: pointer;
       .icon-chevron-right,
       .icon-chevron-left{
-       color: #c3c3c3;
+        color: #d2d9dd;
       }
       .icon-chevron-left:hover,
       .icon-chevron-right:hover{
@@ -5133,7 +5133,7 @@ ul.inline li {
       cursor: not-allowed;
       .icon-chevron-right,
       .icon-chevron-left{
-        color: #c3c3c3;
+        color: #d2d9dd;
       }
     }
   }
@@ -5220,6 +5220,10 @@ ul.inline li {
       cursor: default;
       .content {
         padding: 1px 5px 15px 5px;
+        .group {
+          text-align: right;
+          margin-top: -20px;
+        }
         .date{
           color: #808080;
           font-size: 11px;

ambari-web/app/templates/common/configs/config_history_flow.hbs

@@ -19,10 +19,10 @@
 
 <div id="config_history_flow" {{bindAttr class="view.showCompareVersionBar:two-stories-bar:one-story-bar"}}>
   <div class="version-slider">
-    <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>
+    <div {{bindAttr class=":icon-chevron-box :pull-left view.showLeftArrow::disabled"}} {{action shiftBack target="view"}} data-toggle="arrow-tooltip"
+      {{bindAttr data-original-title="view.leftArrowTooltip"}}><i class="icon-chevron-left icon-3x"></i></div>
+    <div {{bindAttr class=":icon-chevron-box :pull-left view.showRightArrow::disabled"}} {{action shiftForward target="view"}} data-toggle="arrow-tooltip"
+      {{bindAttr data-original-title="view.rightArrowTooltip"}}><i class="icon-chevron-right icon-3x"></i></div>
     {{#each serviceVersion in view.visibleServiceVersion}}
       {{view view.serviceVersionBox serviceVersionBinding=serviceVersion}}
     {{/each}}
@@ -54,63 +54,65 @@
       </div>
     {{/if}}
       <div class="version-info-bar">
-          <div class="row-fluid">
-            {{#if App.isManager}}
-              <div class="btn-group pull-left">
-                  <button id="toggle-dropdown-button" class="btn dropdown-toggle" data-toggle="dropdown" href="#" {{action hideFullList target="view"}} {{bindAttr disabled="view.versionActionsDisabled"}}>
-                      <i class="icon-random"></i>
-                      <span class="caret"></span>
-                  </button>
-                  <ul class="dropdown-menu">
-                    {{#each serviceVersion in view.dropDownList}}
-                        <li {{bindAttr class=":pointer :dropdown-submenu serviceVersion.isDisplayed:not-allowed"}}>
-                            <div class="row-fluid version-in-dropdown " {{action switchVersion serviceVersion target="view"}}>
-                                <div class="span2">{{serviceVersion.versionText}}</div>
-                                <div class="span6">{{serviceVersion.createdDate}}</div>
-                                <div class="span3">{{serviceVersion.author}}</div>
-                                <div class="pull-right"><i class="icon-caret-right"></i></div>
-                            </div>
-                            <ul class="dropdown-menu version-info-operations">
-                                <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>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}&nbsp;<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>&nbsp;{{t common.view}}</button>
-                                    <button {{bindAttr disabled="serviceVersion.disabledActionAttr.compare" class=":btn serviceVersion.isDisplayed:not-allowed-cursor" title="serviceVersion.disabledActionMessages.compare"}} {{action compare serviceVersion target="view"}}><i class="icon-copy"></i>&nbsp;{{t common.compare}}</button>
-                                    <button {{bindAttr disabled="serviceVersion.disabledActionAttr.revert" class=":btn serviceVersion.isCurrent:not-allowed-cursor" title="serviceVersion.disabledActionMessages.revert"}} {{action revert serviceVersion target="view"}}>{{t dashboard.configHistory.info-bar.revert.button}}</button>
-                                </div>
-                            </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}}&nbsp;{{view.displayName}}
-                                &nbsp;<span class="lowercase ellipsis">{{t dashboard.configHistory.title}}</span>
-                            </a>
-                        </li>
-                    {{/unless}}
-                  </ul>
-              </div>
-            {{/if}}
-              <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>
-                {{/if}}
-                  <strong>{{view.displayedServiceVersion.author}}</strong>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}&nbsp;<strong>{{view.displayedServiceVersion.createdDate}}</strong>
-              </div>
-            {{#if App.isManager}}
-              <div class="pull-right operations-button">
-                  <div {{bindAttr class="view.displayedServiceVersion.isCurrent::hidden"}}>
-                      <button class="btn" {{action doCancel target="controller"}} {{bindAttr disabled="view.isDiscardDisabled"}}>{{t common.discard}}</button>
-                      <button class="btn btn-success" {{action save target="view"}} {{bindAttr disabled="view.isSaveDisabled"}}>{{t common.save}}</button>
-                  </div>
-                  <button class="btn btn-success"  {{action revert view.serviceVersionsReferences.displayed target="view"}} {{bindAttr disabled="view.versionActionsDisabled" class="view.displayedServiceVersion.isCurrent:hidden"}}>{{view.displayedServiceVersion.makeCurrentButtonText}}</button>
-              </div>
-            {{/if}}
-          </div>
+        <div class="row-fluid">
+          {{#if App.isManager}}
+            <div class="btn-group pull-left">
+              <button id="toggle-dropdown-button" class="btn dropdown-toggle" data-toggle="dropdown" href="#" {{action hideFullList target="view"}} {{bindAttr disabled="view.versionActionsDisabled"}}>
+                <i class="icon-random"></i>
+                <span class="caret"></span>
+              </button>
+              <ul class="dropdown-menu">
+                {{#each serviceVersion in view.dropDownList}}
+                  <li {{bindAttr class=":pointer :dropdown-submenu serviceVersion.isDisplayed:not-allowed"}}>
+                    <div class="row-fluid version-in-dropdown " {{action switchVersion serviceVersion target="view"}}>
+                      <div class="span2">{{serviceVersion.versionText}}</div>
+                      <div class="span6">{{serviceVersion.createdDate}}</div>
+                      <div class="span3">{{serviceVersion.author}}</div>
+                      <div class="pull-right"><i class="icon-caret-right"></i></div>
+                    </div>
+                    <ul class="dropdown-menu version-info-operations">
+                      <div class="content">
+                        <span class="label label-info">{{serviceVersion.versionText}}</span>
+                        <div class="group"><strong>{{serviceVersion.configGroupName}}</strong></div>
+                        <div class="date"><strong>{{serviceVersion.author}}</strong>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}&nbsp;<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>&nbsp;{{t common.view}}</button>
+                        <button {{bindAttr disabled="serviceVersion.disabledActionAttr.compare" class=":btn serviceVersion.isDisplayed:not-allowed-cursor" title="serviceVersion.disabledActionMessages.compare"}} {{action compare serviceVersion target="view"}}><i class="icon-copy"></i>&nbsp;{{t common.compare}}</button>
+                        <button {{bindAttr disabled="serviceVersion.disabledActionAttr.revert" class=":btn serviceVersion.isCurrent:not-allowed-cursor" title="serviceVersion.disabledActionMessages.revert"}} {{action revert serviceVersion target="view"}}>{{t dashboard.configHistory.info-bar.revert.button}}</button>
+                      </div>
+                    </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}}&nbsp;{{view.displayName}}
+                            &nbsp;<span class="lowercase ellipsis">{{t dashboard.configHistory.title}}</span>
+                        </a>
+                    </li>
+                {{/unless}}
+              </ul>
+            </div>
+          {{/if}}
+            <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>
+              {{/if}}
+                <strong>{{view.displayedServiceVersion.author}}</strong>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}&nbsp;<strong>{{view.displayedServiceVersion.createdDate}}</strong>
+            </div>
+          {{#if App.isManager}}
+            <div class="pull-right operations-button">
+                <div {{bindAttr class="view.displayedServiceVersion.isCurrent::hidden"}}>
+                    <button class="btn" {{action doCancel target="controller"}} {{bindAttr disabled="view.isDiscardDisabled"}}>{{t common.discard}}</button>
+                    <button class="btn btn-success" {{action save target="view"}} {{bindAttr disabled="view.isSaveDisabled"}}>{{t common.save}}</button>
+                </div>
+                <button class="btn btn-success"  {{action revert view.serviceVersionsReferences.displayed target="view"}} {{bindAttr disabled="view.versionActionsDisabled" class="view.displayedServiceVersion.isCurrent:hidden"}}>{{view.displayedServiceVersion.makeCurrentButtonText}}</button>
+            </div>
+          {{/if}}
+        </div>
       </div>
   </div>
 </div>

ambari-web/app/templates/common/configs/service_version_box.hbs

@@ -36,7 +36,8 @@
     </div>
 
     <div class="version-popover">
-      <div class="content"><span class="label label-info">{{serviceVersion.versionText}}</span> <span class="pull-right"><strong>{{serviceVersion.configGroupName}}</strong></span>
+      <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>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}&nbsp;<strong>{{serviceVersion.createdDate}}</strong></div>
         <div class="notes">{{{serviceVersion.fullNotes}}}</div>
       </div>

ambari-web/app/views/common/configs/config_history_flow.js

@@ -27,6 +27,12 @@ App.ConfigHistoryFlowView = Em.View.extend({
   startIndex: 0,
   showLeftArrow: false,
   showRightArrow: false,
+  leftArrowTooltip: function () {
+    return this.get('showLeftArrow') ? Em.I18n.t('services.service.config.configHistory.leftArrow.tooltip') : null;
+  }.property('showLeftArrow'),
+  rightArrowTooltip: function () {
+    return this.get('showRightArrow') ? Em.I18n.t('services.service.config.configHistory.rightArrow.tooltip') : null;
+  }.property('showRightArrow'),
   VERSIONS_IN_FLOW: 6,
   VERSIONS_IN_DROPDOWN: 6,
   /**
@@ -126,7 +132,7 @@ App.ConfigHistoryFlowView = Em.View.extend({
    * by default 6 is number of items in short list
    */
   dropDownList: function () {
-    var serviceVersions = this.get('serviceVersions').slice(0).reverse();
+    var serviceVersions = this.get('serviceVersions').slice(0);
     if (this.get('showFullList')) {
       return serviceVersions;
     }