AMBARI-7029. Configs: ui and general.(xiwang)

ambari-web/app/controllers/wizard/step8_controller.js

@@ -839,7 +839,6 @@ App.WizardStep8Controller = Em.Controller.extend(App.AddSecurityConfigs, {
     var configurationController = App.router.get('mainServiceInfoConfigsController');
     var configs = this.get('configs').slice(0);
     var configsMap = [];
-
     fileNamesToUpdate.forEach(function (fileName) {
       if (!fileName || /^(core)/.test(fileName)) return;
       var tagName = 'version' + (new Date).getTime();
@@ -1434,17 +1433,25 @@ App.WizardStep8Controller = Em.Controller.extend(App.AddSecurityConfigs, {
     selectedServices.forEach(function (service) {
       Object.keys(service.get('configTypes')).forEach(function (type) {
         if (!this.get('serviceConfigTags').someProperty('type', type)) {
+          var serviceVersionNotes = Em.I18n.t('dashboard.configHistory.table.notes.default').format(service.get('serviceName'));
           if (!App.supports.capacitySchedulerUi && service.get('serviceName') === 'MAPREDUCE' && (type === 'capacity-scheduler' || type === 'mapred-queue-acls')) {
             return;
           } else if (type === 'core-site') {
+            coreSiteObject.service_config_version_note = serviceVersionNotes
             this.get('serviceConfigTags').pushObject(coreSiteObject);
           } else if (type === 'storm-site') {
-            this.get('serviceConfigTags').pushObject(this.createStormSiteObj(tag));
+            var obj = this.createStormSiteObj(tag);
+            obj.service_config_version_note = serviceVersionNotes;
+            this.get('serviceConfigTags').pushObject(obj);
           } else if (type === 'zoo.cfg') {
-            this.get('serviceConfigTags').pushObject(this.createZooCfgObj(tag));
+            var obj = this.createZooCfgObj(tag);
+            obj.service_config_version_note = serviceVersionNotes;
+            this.get('serviceConfigTags').pushObject(obj);
           } else {
             var isNonXmlFile = type.endsWith('log4j') || type.endsWith('env') || type.endsWith('properties') || type.endsWith('conf');
-            this.get('serviceConfigTags').pushObject(this.createSiteObj(type, isNonXmlFile, tag));
+            var obj = this.createSiteObj(type, isNonXmlFile, tag);
+            obj.service_config_version_note = serviceVersionNotes;
+            this.get('serviceConfigTags').pushObject(obj);
           }
         }
       }, this);
@@ -1465,7 +1472,8 @@ App.WizardStep8Controller = Em.Controller.extend(App.AddSecurityConfigs, {
             type: _serviceConfig.type,
             tag: _serviceConfig.tag,
             properties: _serviceConfig.properties,
-            properties_attributes: _serviceConfig.properties_attributes
+            properties_attributes: _serviceConfig.properties_attributes,
+            service_config_version_note: _serviceConfig.service_config_version_note
           }
         }
       });

ambari-web/app/messages.js

@@ -1409,7 +1409,9 @@ Em.I18n.translations = {
     '<b>ambari-server setup --jdbc-db={0} --jdbc-driver=/path/to/{1}/driver.jar</b> ' +
     'on the Ambari Server host to make the JDBC driver available and to enable testing the database connection.',
 
-  'services.service.config.configHistory.configGroup': 'Group',
+  '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.makeCurrent.message': 'Created from service config version {0}',
 
   'services.add.header':'Add Service Wizard',
@@ -1992,6 +1994,7 @@ Em.I18n.translations = {
   'dashboard.configHistory.table.configGroup.title' : 'Config Group',
   'dashboard.configHistory.table.created.title' : 'Created',
   'dashboard.configHistory.table.empty' : 'No history to display',
+  'dashboard.configHistory.table.notes.default': 'Initial configurations for {0}',
   'dashboard.configHistory.table.version.versionText' : 'V{0}',
   'dashboard.configHistory.table.version.prefix' : 'V',
   'dashboard.configHistory.table.current.tooltip' : 'Current config for {0}:{1}',
@@ -2003,12 +2006,13 @@ Em.I18n.translations = {
   'dashboard.configHistory.info-bar.save.popup.title': 'Save Configuration',
   'dashboard.configHistory.info-bar.makeCurrent.popup.title': 'Make Current Confirmation',
   'dashboard.configHistory.info-bar.save.popup.placeholder': 'What did you change?',
-  'dashboard.configHistory.info-bar.revert.button': 'Make current',
+  'dashboard.configHistory.info-bar.revert.button': 'Make Current',
   'dashboard.configHistory.info-bar.view.button.disabled': 'You are currently viewing this version.',
   'dashboard.configHistory.info-bar.compare.button.disabled': 'You cannot compare against the same version.',
   'dashboard.configHistory.info-bar.revert.button.disabled': 'This is the current version.',
 
 
+
   'timeRange.presets.1hour':'1h',
   'timeRange.presets.12hour':'12h',
   'timeRange.presets.1day':'1d',

ambari-web/app/styles/application.less

@@ -4973,19 +4973,20 @@ ul.inline li {
         height: 90%;
       }
       .version-box .box {
-        //position: relative;
         cursor: pointer;
         width: 72%;
         height: 100%;
         background-color: #ffffff;
         border: 1px solid #dddddd;
-        font-size: @default-font-size;
+        font-size: 13px;
         .top-label {
           min-width: 20px;
           padding: 5px;
+          padding-bottom: 1px;
         }
         .content {
           padding: 0 5px;
+          line-height: 19px;
           text-align: center;
           color: #555555;
         }
@@ -4997,7 +4998,7 @@ ul.inline li {
         left: -45px;
         z-index: 1000;
         float: left;
-        min-width: 290px;
+        min-width: 300px;
         padding: 8px;
         list-style: none;
         background-color: #ffffff;
@@ -5053,18 +5054,20 @@ ul.inline li {
       }
     }
     .first {
+      width: 13%;
+      margin-left: 15px;
       .arrow-box {
         display: none;
       }
       .version-box .box {
         width: 100%;
       }
-      width: 13%;
     }
 
     .icon-chevron-box {
       margin-top: 25px;
       width: 5%;
+      cursor: pointer;
       .icon-chevron-right,
       .icon-chevron-left{
        color: #c3c3c3;

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

@@ -19,7 +19,8 @@
 
 <div id="config_history_flow" {{bindAttr class="view.showCompareVersionBar:two-stories-bar:one-story-bar"}}>
   <div class="version-slider">
-    <div {{bindAttr class=":icon-chevron-box :pull-left view.showLeftArrow::hide"}} {{action shiftBack target="view"}}><i class="icon-chevron-left icon-3x"></i></div>
+    <div {{bindAttr class=":icon-chevron-box :pull-left view.showLeftArrow::hide"}} {{action shiftBack target="view"}} data-toggle="arrow-tooltip"
+      {{translateAttr data-original-title="services.service.config.configHistory.leftArrow.tooltip"}}><i class="icon-chevron-left icon-3x"></i></div>
     {{#each serviceVersion in view.visibleServiceVersion}}
       <div {{bindAttr class=":flow-element :pull-left serviceVersion.first:first"}}>
         <div class="arrow-box pull-left"><i class="icon-arrow-right icon-3x"></i></div>
@@ -35,7 +36,7 @@
               {{/if}}
             </div>
               <div class="content">{{serviceVersion.author}}</div>
-              <div class="content">{{serviceVersion.shortModifiedDate}}</div>
+              <div class="content">{{serviceVersion.modifiedDate}}</div>
           </div>
 
           <div class="version-popover">
@@ -52,7 +53,8 @@
         </div>
       </div>
     {{/each}}
-    <div {{bindAttr class=":icon-chevron-box :pull-right view.showRightArrow::hide"}} {{action shiftForward target="view"}}><i class="icon-chevron-right icon-3x"></i></div>
+    <div {{bindAttr class=":icon-chevron-box :pull-right view.showRightArrow::hide"}} {{action shiftForward target="view"}} data-toggle="arrow-tooltip"
+      {{translateAttr data-original-title="services.service.config.configHistory.rightArrow.tooltip"}}><i class="icon-chevron-right icon-3x"></i></div>
   </div>
   <div class="version-info-bar-wrapper">
       <div {{bindAttr class="view.showCompareVersionBar::hidden :version-info-bar"}}>

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

@@ -139,6 +139,9 @@ App.ConfigHistoryFlowView = Em.View.extend({
     App.tooltip(this.$('[data-toggle=tooltip]'),{
       placement: 'bottom'
     });
+    App.tooltip(this.$('[data-toggle=arrow-tooltip]'),{
+      placement: 'top'
+    });
   },
 
   willInsertElement: function () {