AMBARI-6884. Config History: implement UI tweaks for adding Config groups to history.(xiwang)

ambari-web/app/messages.js

@@ -1401,6 +1401,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.makeCurrent.message': 'Are you sure you want to make {0} the current version for {1}:{2} ?',
+
   'services.add.header':'Add Service Wizard',
   'services.reassign.header':'Move Master Wizard',
   'services.service.add':'Add Service',
@@ -1976,8 +1979,9 @@ Em.I18n.translations = {
 
   'dashboard.services.zookeeper.server' : 'ZooKeeper Server',
 
-  'dashboard.configHistory.title': 'Configs',
+  'dashboard.configHistory.title': 'Config History',
   'dashboard.configHistory.table.version.title' : 'Service',
+  'dashboard.configHistory.table.configGroup.title' : 'Config Group',
   'dashboard.configHistory.table.modified.title' : 'Modified',
   'dashboard.configHistory.table.empty' : 'No history to display',
   'dashboard.configHistory.table.version.versionText' : 'V{0}',

ambari-web/app/models/service_config_version.js

@@ -32,9 +32,8 @@ App.ServiceConfigVersion = DS.Model.extend({
   index: DS.attr('number'),
   isCurrent: DS.attr('boolean'),
   briefNotes: function () {
-    var length = this.get('isCurrent') ? 20 : 40;
-    return (typeof this.get('notes') === 'string') ? this.get('notes').slice(0, length) : "";
-  }.property('notes', 'isCurrent'),
+    return (typeof this.get('notes') === 'string') ? this.get('notes').slice(0, 80) : "";
+  }.property('notes'),
   versionText: function () {
     return Em.I18n.t('dashboard.configHistory.table.version.versionText').format(this.get('version'));
   }.property('version'),

ambari-web/app/styles/application.less

@@ -4914,6 +4914,7 @@ ul.inline li {
       height: 100%;
       .box {
         position: relative;
+        cursor: pointer;
         width: 72%;
         height: 90%;
         background-color: #ffffff;
@@ -4929,9 +4930,23 @@ ul.inline li {
           color: #555555;
         }
       }
-      .displayed {
+      .box.displayed {
+        border: 1px solid #444444;
+        .content {
+          color: #444444;
+          font-weight: bold;
+        }
+      }
+      .box.grayedOut {
         background-color: #eeeeee;
-        border: 1px solid #dddddd;
+        border: 1px solid #eeeeee;
+        .content {
+          color: #b8b8b8;
+        }
+        .top-label .label {
+          color: #eeeeee;
+          background-color: #b8b8b8;
+        }
       }
       .arrow-box {
         width: 20%;
@@ -4993,6 +5008,7 @@ ul.inline li {
     .dropdown-menu {
       min-width: 400px;
       margin-top: 4px;
+      font-size: 13px;
       li {
         line-height: 30px;
       }
@@ -5002,7 +5018,7 @@ ul.inline li {
         color: white;
       }
       .icon-caret-right {
-        font-size: 20px;
+        font-size: 18px;
         margin-right: 20px;
       }
       div.row-fluid, a {
@@ -5010,7 +5026,18 @@ ul.inline li {
       }
     }
     .dropdown-submenu .dropdown-menu {
-      min-width: 80px;
+      min-width: 200px;
+      line-height: 20px;
+      margin: 0px;
+      padding: 5px;
+      color: #333333;
+      cursor: default;
+      .content {
+        padding: 1px 5px 15px 5px;
+      }
+      .btn {
+        font-size: 13px;
+      }
     }
   }
 }

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

@@ -23,7 +23,7 @@
     {{#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"}}>
+        <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}}
@@ -42,50 +42,56 @@
   </div>
   <div class="version-info-bar">
     <div class="row-fluid">
-        <div class="btn-group pull-left">
-            <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 class="pointer dropdown-submenu">
-                      <div class="row-fluid">
-                          <div class="span2">{{serviceVersion.versionText}}</div>
-                          <div class="span6">{{serviceVersion.modifiedDate}}</div>
-                          <div class="span3">{{serviceVersion.author}}</div>
-                          <div class="pull-right"><i class="icon-caret-right"></i></div>
-                      </div>
-                      <ul class="dropdown-menu">
-                          <li><a {{action switchVersion serviceVersion target="view"}}>{{t common.view}}</a></li>
-                          <li><a {{action compare serviceVersion target="view"}}>{{t common.compare}}</a></li>
-                          <li><a {{action revert serviceVersion target="view"}}>{{t dashboard.configHistory.info-bar.revert.button}}</a></li>
-                      </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.serviceName}}
-                          &nbsp;<span class="lowercase ellipsis">{{t dashboard.configHistory.title}}</span>
-                      </a>
-                  </li>
-              {{/unless}}
-            </ul>
-        </div>
-        <div class="label-wrapper span8">
-            <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.modifiedDate}}</strong>
+      <div class="btn-group pull-left">
+        <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 class="pointer dropdown-submenu">
+              <div class="row-fluid" {{action switchVersion serviceVersion target="view"}}>
+                <div class="span2">{{serviceVersion.versionText}}</div>
+                <div class="span6">{{serviceVersion.modifiedDate}}</div>
+                <div class="span3">{{serviceVersion.author}}</div>
+                <div class="pull-right"><i class="icon-caret-right"></i></div>
+              </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>
+                </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>
+                </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.serviceName}}
+                  &nbsp;<span class="lowercase ellipsis">{{t dashboard.configHistory.title}}</span>
+              </a>
+            </li>
+          {{/unless}}
+        </ul>
+      </div>
+        <div class="label-wrapper span9" data-toggle="tooltip" {{bindAttr data-original-title="view.displayedServiceVersion.briefNotes" }}>
+          <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.modifiedDate}}</strong>
         </div>
         <div class="pull-right">
-            <div {{bindAttr class="view.displayedServiceVersion.isCurrent::hidden"}}>
-                <button class="btn" {{action doCancel target="controller"}} {{bindAttr disabled="view.versionActionsDisabled"}}>{{t common.cancel}}</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.displayedServiceVersion target="view"}} {{bindAttr disabled="view.versionActionsDisabled" class="view.displayedServiceVersion.isCurrent:hidden"}}>{{t dashboard.configHistory.info-bar.revert.button}}</button>
+          <div {{bindAttr class="view.displayedServiceVersion.isCurrent::hidden"}}>
+            <button class="btn" {{action doCancel target="controller"}} {{bindAttr disabled="view.versionActionsDisabled"}}>{{t common.cancel}}</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.displayedServiceVersion target="view"}} {{bindAttr disabled="view.versionActionsDisabled" class="view.displayedServiceVersion.isCurrent:hidden"}}>{{t dashboard.configHistory.info-bar.revert.button}}</button>
         </div>
     </div>
     <div class="label-wrapper">

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

@@ -21,6 +21,7 @@
         <thead>
         {{#view view.sortView classNames="label-row"}}
             {{view view.parentView.versionSort}}
+            {{view view.parentView.configGroupSort}}
             {{view view.parentView.modifiedSort}}
             {{view view.parentView.authorSort}}
             {{view view.parentView.notesSort}}
@@ -28,6 +29,7 @@
 
         <tr class="filter-row">
             <th class="first">{{view view.serviceFilterView}}</th>
+            <th>{{view view.configGroupFilterView}}</th>
             <th>{{view view.modifiedFilterView}}</th>
             <th>{{view view.authorFilterView}}</th>
             <th>{{view view.notesFilterView}}</th>
@@ -48,6 +50,7 @@
                       {{/if}}
                       <i {{bindAttr class=":icon-refresh :restart-required-service item.isRestartRequired::hidden"}}></i>
                     </td>
+                    <td>{{item.configGroup}}</td>
                     <td>{{item.modifiedDate}}</td>
                     <td>{{item.author}}</td>
                     <td>{{item.notes}}</td>

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

@@ -96,6 +96,12 @@ App.ConfigHistoryFlowView = Em.View.extend({
     this.set('showFullList', !(this.get('serviceVersions.length') > this.VERSIONS_IN_DROPDOWN));
   },
 
+  didInsertElement: function () {
+    App.tooltip(this.$('[data-toggle=tooltip]'),{
+      placement: 'bottom'
+    });
+  },
+
   willInsertElement: function () {
     var serviceVersions = this.get('serviceVersions');
     var startIndex = 0;
@@ -179,6 +185,7 @@ App.ConfigHistoryFlowView = Em.View.extend({
 
   /**
    * add config values of chosen version to view for comparison
+   * add a second version-info-bar for the chosen version
    */
   compare: function (event) {
     this.set('controller.compareServiceVersion', event.context);
@@ -193,9 +200,12 @@ App.ConfigHistoryFlowView = Em.View.extend({
       version: this.get('displayedServiceVersion.version'),
       serviceName: this.get('displayedServiceVersion.serviceName')
     });
+    var versionText = event.context? event.context.get('versionText') : this.get('displayedServiceVersion.versionText');
     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'))
+    );
   },
 
   /**

ambari-web/app/views/main/dashboard/config_history_view.js

@@ -93,18 +93,24 @@ App.MainConfigHistoryView = App.TableView.extend({
     displayName: Em.I18n.t('dashboard.configHistory.table.version.title'),
     classNames: ['first']
   }),
-  modifiedSort: sort.fieldView.extend({
+  configGroupSort: sort.fieldView.extend({
     column: 2,
+    name: 'configGroup',
+    displayName: Em.I18n.t('dashboard.configHistory.table.configGroup.title')
+  }),
+  modifiedSort: sort.fieldView.extend({
+    column: 3,
     name: 'appliedTime',
+    status: 'sorting_desc',
     displayName: Em.I18n.t('dashboard.configHistory.table.modified.title')
   }),
   authorSort: sort.fieldView.extend({
-    column: 3,
+    column: 4,
     name: 'author',
     displayName: Em.I18n.t('common.author')
   }),
   notesSort: sort.fieldView.extend({
-    column: 4,
+    column: 5,
     name: 'notes',
     displayName: Em.I18n.t('common.notes')
   }),
@@ -121,9 +127,22 @@ App.MainConfigHistoryView = App.TableView.extend({
     emptyValue: Em.I18n.t('common.all')
   }),
 
-  modifiedFilterView: filters.createSelectView({
+  configGroupFilterView: filters.createSelectView({
     column: 2,
     fieldType: 'filter-input-width',
+    content: function () {
+      return ['All'].concat(['g1','g2','gn']);
+    }.property('App.router.clusterController.isLoaded'),
+    onChangeValue: function () {
+      this.get('parentView').updateFilter(this.get('column'), this.get('actualValue'), 'select');
+    },
+    emptyValue: Em.I18n.t('common.all')
+  }),
+
+
+  modifiedFilterView: filters.createSelectView({
+    column: 3,
+    fieldType: 'filter-input-width',
     content: ['Any', 'Past 1 hour',  'Past 1 Day', 'Past 2 Days', 'Past 7 Days', 'Past 14 Days', 'Past 30 Days', 'Custom'],
     valueBinding: "controller.modifiedFilter.optionValue",
     startTimeBinding: "controller.modifiedFilter.actualValues.startTime",
@@ -134,7 +153,7 @@ App.MainConfigHistoryView = App.TableView.extend({
   }),
 
   authorFilterView: filters.createTextView({
-    column: 3,
+    column: 4,
     fieldType: 'filter-input-width',
     onChangeValue: function () {
       this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'string');
@@ -142,7 +161,7 @@ App.MainConfigHistoryView = App.TableView.extend({
   }),
 
   notesFilterView: filters.createTextView({
-    column: 4,
+    column: 5,
     fieldType: 'filter-input-width',
     onChangeValue: function () {
       this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'string');