AMBARI-7000. Config History: Service Config page UI tweaks.(xiwang)

ambari-web/app/assets/data/configurations/service_version.json

@@ -2,11 +2,12 @@
   "items": [
     {
       "serviceconfigversion": "1",
-      "servicename": "HDFS",
       "createtime": "43800000000",
-      "appliedtime": "58600000000",
       "author": "admin",
-      "notes": "Notes should be here",
+      "group_id" : null,
+      "group_name" : null,
+      "service_config_version_note" : null,
+      "service_name" : "HDFS",
       "configurations": [
         {
           "type": "hdfs-site",

ambari-web/app/assets/data/configurations/service_versions.json

@@ -2,11 +2,12 @@
   "items": [
     {
       "serviceconfigversion": "1",
-      "servicename": "HDFS",
       "createtime": "43800000000",
-      "appliedtime": "58600000000",
       "author": "admin",
-      "notes": "Notes should be here",
+      "group_id" : null,
+      "group_name" : null,
+      "service_config_version_note" : "Notes should be here",
+      "service_name" : "HDFS",
       "configurations": [
         {
           "type": "core-site",
@@ -21,11 +22,12 @@
     },
     {
       "serviceconfigversion": "1",
-      "servicename": "YARN",
       "createtime": "43300000000",
-      "appliedtime": "58600000000",
       "author": "admin",
-      "notes": "Notes should be here",
+      "group_id" : null,
+      "group_name" : null,
+      "service_config_version_note" : "Notes should be here",
+      "service_name" : "YARN",
       "configurations": [
         {
           "type": "core-site",
@@ -40,11 +42,12 @@
     },
     {
       "serviceconfigversion": "2",
-      "servicename": "HDFS",
       "createtime": "43500000000",
-      "appliedtime": "58600000000",
       "author": "admin",
-      "notes": "Notes should be here",
+      "group_id" : null,
+      "group_name" : null,
+      "service_config_version_note" : "Notes should be here",
+      "service_name" : "HDFS",
       "configurations": [
         {
           "type": "core-site",
@@ -59,11 +62,12 @@
     },
     {
       "serviceconfigversion": "2",
-      "servicename": "YARN",
       "createtime": "13800000000",
-      "appliedtime": "58600000000",
       "author": "admin",
-      "notes": "Notes should be here",
+      "group_id" : null,
+      "group_name" : null,
+      "service_config_version_note" : "Notes should be here",
+      "service_name" : "YARN",
       "configurations": [
         {
           "type": "core-site",
@@ -78,11 +82,12 @@
     },
     {
       "serviceconfigversion": "3",
-      "servicename": "HDFS",
       "createtime": "23800000000",
-      "appliedtime": "58600000000",
       "author": "admin",
-      "notes": "Notes should be here",
+      "group_id" : null,
+      "group_name" : null,
+      "service_config_version_note" : "Notes should be here",
+      "service_name" : "HDFS",
       "configurations": [
         {
           "type": "core-site",
@@ -97,11 +102,12 @@
     },
     {
       "serviceconfigversion": "3",
-      "servicename": "YARN",
       "createtime": "47800000000",
-      "appliedtime": "58600000000",
       "author": "admin",
-      "notes": "Notes should be here",
+      "group_id" : null,
+      "group_name" : null,
+      "service_config_version_note" : "Notes should be here",
+      "service_name" : "YARN",
       "configurations": [
         {
           "type": "core-site",
@@ -116,11 +122,12 @@
     },
     {
       "serviceconfigversion": "4",
-      "servicename": "HDFS",
       "createtime": "43900000000",
-      "appliedtime": "58600000000",
       "author": "admin",
-      "notes": "Notes should be here",
+      "group_id" : null,
+      "group_name" : null,
+      "service_config_version_note" : "Notes should be here",
+      "service_name" : "HDFS",
       "configurations": [
         {
           "type": "core-site",
@@ -135,11 +142,12 @@
     },
     {
       "serviceconfigversion": "4",
-      "servicename": "YARN",
       "createtime": "33800000000",
-      "appliedtime": "58600000000",
       "author": "admin",
-      "notes": "Notes should be here",
+      "group_id" : null,
+      "group_name" : null,
+      "service_config_version_note" : "Notes should be here",
+      "service_name" : "YARN",
       "configurations": [
         {
           "type": "core-site",
@@ -154,11 +162,12 @@
     },
     {
       "serviceconfigversion": "5",
-      "servicename": "HDFS",
       "createtime": "41800000000",
-      "appliedtime": "58600000000",
       "author": "admin",
-      "notes": "Notes should be here",
+      "group_id" : null,
+      "group_name" : null,
+      "service_config_version_note" : "Notes should be here",
+      "service_name" : "HDFS",
       "configurations": [
         {
           "type": "core-site",
@@ -173,11 +182,12 @@
     },
     {
       "serviceconfigversion": "5",
-      "servicename": "YARN",
       "createtime": "46800000000",
-      "appliedtime": "58600000000",
       "author": "admin",
-      "notes": "Notes should be here",
+      "group_id" : null,
+      "group_name" : null,
+      "service_config_version_note" : "Notes should be here",
+      "service_name" : "YARN",
       "configurations": [
         {
           "type": "core-site",
@@ -192,11 +202,12 @@
     },
     {
       "serviceconfigversion": "6",
-      "servicename": "YARN",
       "createtime": "44800000000",
-      "appliedtime": "58600000000",
       "author": "admin",
-      "notes": "Notes should be here",
+      "group_id" : null,
+      "group_name" : null,
+      "service_config_version_note" : "Notes should be here",
+      "service_name" : "YARN",
       "configurations": [
         {
           "type": "core-site",

ambari-web/app/controllers/main/dashboard/config_history_controller.js

@@ -31,7 +31,7 @@ App.MainConfigHistoryController = Em.ArrayController.extend(App.TableServerMixin
   filteredCount: 0,
   mockUrl: '/data/configurations/service_versions.json',
   realUrl: function () {
-    return App.apiPrefix + '/clusters/' + App.get('clusterName') + '/configurations/serviceconfigversions?<parameters>fields=serviceconfigversion,user,appliedtime,createtime,service_name,service_config_version_note&minimal_response=true';
+    return App.apiPrefix + '/clusters/' + App.get('clusterName') + '/configurations/serviceconfigversions?<parameters>fields=serviceconfigversion,user,group_id,group_name,createtime,service_name,service_config_version_note&minimal_response=true';
   }.property('App.clusterName'),
 
   /**
@@ -41,7 +41,7 @@ App.MainConfigHistoryController = Em.ArrayController.extend(App.TableServerMixin
   colPropAssoc: function () {
     var associations = [];
     associations[1] = 'serviceVersion';
-    associations[2] = 'configGroup';
+    associations[2] = 'configGroupName';
     associations[3] = 'createTime';
     associations[4] = 'author';
     associations[5] = 'briefNotes';
@@ -56,7 +56,7 @@ App.MainConfigHistoryController = Em.ArrayController.extend(App.TableServerMixin
     },
     {
       name: 'configGroup',
-      key: 'group_name',////
+      key: 'group_name',
       type: 'EQUAL'
     },
     {

ambari-web/app/controllers/main/service/info/configs.js

@@ -79,8 +79,8 @@ App.MainServiceInfoConfigsController = Em.Controller.extend(App.ServerValidatorM
   }.property('App.isHadoop2Stack'),
 
   showConfigHistoryFeature: function() {
-    return (App.supports.configHistory && this.get('selectedConfigGroup.isDefault'));
-  }.property('selectedConfigGroup.isDefault'),
+    return App.supports.configHistory;
+  }.property('App.supports.configHistory'),
   /**
    * Map, which contains relation between group and site
    * to upload overridden properties

ambari-web/app/mappers/service_config_version_mapper.js

@@ -25,7 +25,8 @@ App.serviceConfigVersionsMapper = App.QuickDataMapper.create({
     service_id: 'service_name',
     version: "serviceconfigversion",
     create_time: 'createtime',
-    applied_time: 'appliedtime',
+    group_id: 'group_id',
+    group_name: 'group_name',
     author: 'user',
     notes: 'service_config_version_note',
     is_current: 'is_current',

ambari-web/app/messages.js

@@ -88,6 +88,7 @@ Em.I18n.translations = {
   'common.service': 'Service',
   'common.version':'Version',
   'common.description':'Description',
+  'common.default':'Default',
   'common.client':'Client',
   'common.zookeeper':'ZooKeeper',
   'common.hbase':'HBase',

ambari-web/app/models/service_config_version.js

@@ -23,7 +23,8 @@ var dateUtil = require('utils/date');
 
 App.ServiceConfigVersion = DS.Model.extend({
   serviceName: DS.attr('string'),
-  configGroup: DS.attr('string'),
+  groupName: DS.attr('string'),
+  groupId: DS.attr('string'),
   version: DS.attr('number'),
   createTime: DS.attr('number'),
   author: DS.attr('string'),
@@ -32,10 +33,13 @@ App.ServiceConfigVersion = DS.Model.extend({
   index: DS.attr('number'),
   isCurrent: DS.attr('boolean'),
   currentTooltip: function () {
-    return Em.I18n.t('dashboard.configHistory.table.current.tooltip').format(this.get('serviceName'), this.get('configGroup') || '');
-  }.property('serviceName', 'configGroup'),
+    return Em.I18n.t('dashboard.configHistory.table.current.tooltip').format(this.get('serviceName'), this.get('configGroupName'));
+  }.property('serviceName', 'configGroupName'),
+  configGroupName: function () {
+    return this.get('groupName') || (this.get('serviceName') + ' ' + Em.I18n.t('common.default'));
+  }.property('groupName'),
   briefNotes: function () {
-    return (typeof this.get('notes') === 'string') ? this.get('notes').slice(0, 100) : " ";
+    return (typeof this.get('notes') === 'string') ? this.get('notes').slice(0, 100) : "";
   }.property('notes'),
   versionText: function () {
     return Em.I18n.t('dashboard.configHistory.table.version.versionText').format(this.get('version'));

ambari-web/app/styles/application.less

@@ -1106,6 +1106,10 @@ h1 {
       .icon-lock {
         color: #008000;
       }
+      a.btn[disabled],
+      a.btn[disabled] [class^="icon-"], a [class*=" icon-"] {
+        cursor: not-allowed;
+      }
       .action{
         margin-left: 3px;
         margin-right: 1px;
@@ -1211,6 +1215,7 @@ h1 {
       -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
       box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+      cursor: not-allowed;
     }
   }
   .capacity-scheduler {
@@ -4957,11 +4962,15 @@ ul.inline li {
     .flow-element {
       width: 18%;
       height: 100%;
-      .box {
+      .version-box {
         position: relative;
+        height: 90%;
+      }
+      .version-box .box {
+        //position: relative;
         cursor: pointer;
         width: 72%;
-        height: 90%;
+        height: 100%;
         background-color: #ffffff;
         border: 1px solid #dddddd;
         font-size: @default-font-size;
@@ -4975,14 +4984,49 @@ ul.inline li {
           color: #555555;
         }
       }
-      .box.displayed {
+      .version-box .version-popover {
+        display: none;
+        position: absolute;
+        bottom: 89px;
+        left: -45px;
+        z-index: 1000;
+        float: left;
+        min-width: 290px;
+        padding: 8px;
+        list-style: none;
+        background-color: #ffffff;
+        border: 1px solid #c3c3c3;
+        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+        -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+        -webkit-background-clip: padding-box;
+        -moz-background-clip: padding;
+        background-clip: padding-box;
+        font-size: 13px;
+        .content {
+          padding: 1px 5px 15px 5px;
+          text-align: left;
+          .notes{
+            word-wrap: break-word;
+          }
+        }
+        .btn {
+          font-size: 13px;
+        }
+      }
+      .version-box:hover{
+        .version-popover {
+          display: block;
+        }
+      }
+      .version-box .box.displayed {
         border: 1px solid #444444;
         .content {
           color: #444444;
           font-weight: bold;
         }
       }
-      .box.grayedOut {
+      .version-box .box.grayedOut {
         background-color: #eeeeee;
         border: 1px solid #eeeeee;
         .content {
@@ -5006,7 +5050,7 @@ ul.inline li {
       .arrow-box {
         display: none;
       }
-      .box {
+      .version-box .box {
         width: 100%;
       }
       width: 13%;
@@ -5072,6 +5116,7 @@ ul.inline li {
     }
     .dropdown-submenu .dropdown-menu {
       min-width: 200px;
+      max-width: 300px;
       line-height: 20px;
       margin: 0px;
       padding: 5px;
@@ -5079,6 +5124,9 @@ ul.inline li {
       cursor: default;
       .content {
         padding: 1px 5px 15px 5px;
+        .notes{
+          word-wrap: break-word;
+        }
       }
       .btn {
         font-size: 13px;

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

@@ -23,18 +23,32 @@
     {{#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>
-        <div {{bindAttr class=":box :pull-right serviceVersion.isDisplayed:displayed"}} {{action switchVersion serviceVersion target="view"}}>
-          <div class="top-label">
-            <span class="label label-info">{{serviceVersion.versionText}}</span>
-            {{#if serviceVersion.isCurrent}}
-              <span class="label label-success">
+        <div class="version-box">
+          <div {{bindAttr class=":box :pull-right serviceVersion.isDisplayed:displayed serviceVersion.isDisabled:grayedOut"}} {{action switchVersion serviceVersion target="view"}}>
+            <div class="top-label">
+              <span class="label label-info">{{serviceVersion.versionText}}</span>
+              {{#if serviceVersion.isCurrent}}
+                <span class="label label-success">
                 {{t common.current}}
                 <i {{bindAttr class=":icon-refresh :restart-required-service view.serviceVersion.isRestartRequired::hidden"}}></i>
               </span>
-            {{/if}}
+              {{/if}}
+            </div>
+              <div class="content">{{serviceVersion.author}}</div>
+              <div class="content">{{serviceVersion.shortModifiedDate}}</div>
+          </div>
+
+          <div class="version-popover">
+            <div class="content"> <strong>{{serviceVersion.serviceName}}</strong> <span class="label label-info">{{serviceVersion.versionText}}</span> &nbsp;
+              <strong>{{t services.service.config.configHistory.configGroup}}:{{serviceVersion.configGroupName}}</strong>
+              <div class="notes">{{serviceVersion.briefNotes}}</div>
+            </div>
+            <div>
+              <button class="btn" {{action switchVersion serviceVersion target="view"}}><i class="icon-search"></i>&nbsp;{{t common.view}}</button>
+              <button class="btn" {{bindAttr disabled="serviceVersion.isDisabled"}} {{action compare serviceVersion target="view"}}><i class="icon-copy"></i>&nbsp;{{t common.compare}}</button>
+              <button class="btn" {{bindAttr disabled="serviceVersion.isDisabled"}} {{action revert serviceVersion target="view"}}>{{t dashboard.configHistory.info-bar.revert.button}}</button>
+            </div>
           </div>
-          <div class="content">{{serviceVersion.author}}</div>
-          <div class="content">{{serviceVersion.shortModifiedDate}}</div>
         </div>
       </div>
     {{/each}}
@@ -58,13 +72,13 @@
               </div>
               <ul class="dropdown-menu">
                 <div class="content"> <strong>{{serviceVersion.serviceName}}</strong> <span class="label label-info">{{serviceVersion.versionText}}</span> &nbsp;
-                    <strong>{{t services.service.config.configHistory.configGroup}}:{{serviceVersion.configGroup}}</strong>
-                    <div>{{serviceVersion.briefNotes}}</div>
+                    <strong>{{t services.service.config.configHistory.configGroup}}:{{serviceVersion.configGroupName}}</strong>
+                    <div class="notes">{{serviceVersion.briefNotes}}</div>
                 </div>
                 <div>
-                  <button class="btn" {{bindAttr disabled="view.disableView"}} {{action switchVersion serviceVersion target="view"}}><i class="icon-search"></i>&nbsp;{{t common.view}}</button>
-                  <button class="btn" {{bindAttr disabled="view.disableCompare"}} {{action compare serviceVersion target="view"}}><i class="icon-copy"></i>&nbsp;{{t common.compare}}</button>
-                  <button class="btn" {{bindAttr disabled="view.disableMakeCurrent"}} {{action revert serviceVersion target="view"}}>{{t dashboard.configHistory.info-bar.revert.button}}</button>
+                  <button class="btn" {{action switchVersion serviceVersion target="view"}}><i class="icon-search"></i>&nbsp;{{t common.view}}</button>
+                  <button class="btn" {{bindAttr disabled="serviceVersion.isDisabled"}} {{action compare serviceVersion target="view"}}><i class="icon-copy"></i>&nbsp;{{t common.compare}}</button>
+                  <button class="btn" {{bindAttr disabled="serviceVersion.isDisabled"}} {{action revert serviceVersion target="view"}}>{{t dashboard.configHistory.info-bar.revert.button}}</button>
                 </div>
               </ul>
             </li>

ambari-web/app/templates/main/dashboard/config_history.hbs

@@ -47,7 +47,7 @@
               </a>
               <i {{bindAttr class=":icon-refresh :restart-required-service item.isRestartRequired::hidden"}}></i>
             </td>
-            <td>{{item.configGroup}}
+            <td>{{item.configGroupName}}
               {{#if item.isCurrent}}
                 <span class="label label-success" rel="currentTooltip"
                 {{bindAttr data-original-title="item.currentTooltip"}}>{{t common.current}}
@@ -61,13 +61,13 @@
         {{/each}}
       {{else}}
         <tr>
-          <td class="first" colspan="6">
+          <td class="first" colspan="5">
             {{t dashboard.configHistory.table.empty}}
           </td>
         </tr>
       {{/if}}
     {{else}}
-      <tr><td colspan="6"><div class="spinner"></div></td></tr>
+      <tr><td colspan="5"><div class="spinner"></div></td></tr>
     {{/if}}
     </tbody>
 </table>

ambari-web/app/utils/ajax/ajax.js

@@ -1894,7 +1894,7 @@ var urls = {
     }
   },
   'service.serviceConfigVersions.get': {
-    real: '/clusters/{clusterName}/configurations/serviceconfigversions?service_name={serviceName}&fields=serviceconfigversion,user,appliedtime,createtime,service_name,service_config_version_note&minimal_response=true',
+    real: '/clusters/{clusterName}/configurations/serviceconfigversions?service_name={serviceName}&fields=serviceconfigversion,user,group_id,group_name,createtime,service_name,service_config_version_note&minimal_response=true',
     mock: '/data/configurations/service_versions.json'
   },
   'service.serviceConfigVersions.get.current': {

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

@@ -42,6 +42,14 @@ App.ConfigHistoryFlowView = Em.View.extend({
     return this.get('controller.selectedService.serviceName');
   }.property('controller.selectedService.serviceName'),
 
+  selectedConfigGroupName: function () {
+    return this.get('controller.selectedConfigGroup.displayName');
+  }.property('controller.selectedConfigGroup.displayName'),
+
+  isDefaultConfigGroupSelected: function () {
+    return this.get('controller.selectedConfigGroup.isDefault');
+  }.property('controller.selectedConfigGroup.isDefault'),
+
   displayedServiceVersion: function () {
     return this.get('serviceVersions').findProperty('isDisplayed');
   }.property('serviceVersions.@each.isDisplayed'),
@@ -64,11 +72,30 @@ App.ConfigHistoryFlowView = Em.View.extend({
   }.property('displayedServiceVersion'),
 
   serviceVersions: function () {
+    var serviceVersions;
     var allServiceVersions = App.ServiceConfigVersion.find().filterProperty('serviceName', this.get('serviceName'));
-    return allServiceVersions.sort(function (a, b) {
+    if (this.get('isDefaultConfigGroupSelected')) {
+      // filtered all versions which belong to default group
+      serviceVersions = allServiceVersions.filterProperty('groupName', null);
+      serviceVersions.forEach( function (version) {
+        version.set('isDisabled', false);
+      });
+    }else {
+      // filter out default group(should be grayedOut) and current selectedGroup versions
+      var defaultServiceVersions = allServiceVersions.filterProperty('groupName', null);
+      defaultServiceVersions.forEach( function (version) {
+        version.set('isDisabled', true);
+      });
+      var selectedServiceVersions = allServiceVersions.filterProperty('groupName', this.get('selectedConfigGroupName'));
+      selectedServiceVersions.forEach( function (version) {
+        version.set('isDisabled', false);
+      });
+      serviceVersions = selectedServiceVersions.concat(defaultServiceVersions) ;
+    }
+    return serviceVersions.sort(function (a, b) {
       return Em.get(a, 'createTime') - Em.get(b, 'createTime');
     });
-  }.property('serviceName'),
+  }.property('serviceName', 'selectedConfigGroupName', 'isDefaultConfigGroupSelected'),
   /**
    * service versions which in viewport and visible to user
    */
@@ -204,6 +231,8 @@ App.ConfigHistoryFlowView = Em.View.extend({
    * add a second version-info-bar for the chosen version
    */
   compare: function (event) {
+    var isDisabled = event.context ? event.context.get('isDisabled') : false;
+    if (isDisabled) return;
     this.set('controller.compareServiceVersion', event.context);
     this.get('controller').onConfigGroupChange();
   },
@@ -212,6 +241,8 @@ App.ConfigHistoryFlowView = Em.View.extend({
    */
   revert: function (event) {
     var self = this;
+    var isDisabled = event.context ? event.context.get('isDisabled') : false;
+    if (isDisabled) return;
     var serviceConfigVersion = event.context || Em.Object.create({
       version: this.get('displayedServiceVersion.version'),
       serviceName: this.get('displayedServiceVersion.serviceName')
@@ -220,7 +251,7 @@ App.ConfigHistoryFlowView = Em.View.extend({
     App.showConfirmationPopup(function () {
         self.sendRevertCall(serviceConfigVersion);
       },
-      Em.I18n.t('services.service.config.configHistory.makeCurrent.message').format(versionText, this.get('displayedServiceVersion.serviceName'), this.get('displayedServiceVersion.configGroup'))
+      Em.I18n.t('services.service.config.configHistory.makeCurrent.message').format(versionText, this.get('displayedServiceVersion.serviceName'), this.get('displayedServiceVersion.configGroupName'))
     );
   },