AMBARI-6966. Config History: Config History Table tweaks.(xiwang)

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

@@ -41,9 +41,10 @@ App.MainConfigHistoryController = Em.ArrayController.extend(App.TableServerMixin
   colPropAssoc: function () {
     var associations = [];
     associations[1] = 'serviceVersion';
-    associations[2] = 'appliedTime';
-    associations[3] = 'author';
-    associations[4] = 'notes';
+    associations[2] = 'configGroup';
+    associations[3] = 'createTime';
+    associations[4] = 'author';
+    associations[5] = 'briefNotes';
     return associations;
   }.property(),
 
@@ -54,8 +55,13 @@ App.MainConfigHistoryController = Em.ArrayController.extend(App.TableServerMixin
       type: 'EQUAL'
     },
     {
-      name: 'appliedTime',
-      key: 'appliedtime',
+      name: 'configGroup',
+      key: 'group_name',////
+      type: 'EQUAL'
+    },
+    {
+      name: 'createTime',
+      key: 'createtime',
       type: 'MORE'
     },
     {
@@ -65,7 +71,7 @@ App.MainConfigHistoryController = Em.ArrayController.extend(App.TableServerMixin
     },
     {
       name: 'notes',
-      key: '',
+      key: 'service_config_version_note',
       type: 'MATCH'
     }
   ],
@@ -76,8 +82,12 @@ App.MainConfigHistoryController = Em.ArrayController.extend(App.TableServerMixin
       key: 'service_name'
     },
     {
-      name: 'appliedTime',
-      key: 'appliedtime'
+      name: 'configGroup',
+      key: 'group_name'
+    },
+    {
+      name: 'createTime',
+      key: 'createtime'
     },
     {
       name: 'author',
@@ -85,7 +95,7 @@ App.MainConfigHistoryController = Em.ArrayController.extend(App.TableServerMixin
     },
     {
       name: 'notes',
-      key: ''
+      key: 'service_config_version_note'
     }
   ],
 

ambari-web/app/messages.js

@@ -1991,6 +1991,7 @@ Em.I18n.translations = {
   'dashboard.configHistory.table.created.title' : 'Created',
   'dashboard.configHistory.table.empty' : 'No history to display',
   'dashboard.configHistory.table.version.versionText' : 'V{0}',
+  'dashboard.configHistory.table.current.tooltip' : 'Current config for {0}:{1}',
   'dashboard.configHistory.table.filteredHostsInfo': '{0} of {1} versions showing',
   'dashboard.configHistory.info-bar.authoredOn': 'authored on',
   'dashboard.configHistory.info-bar.changesToHandle': 'Changes to handle',

ambari-web/app/models/service_config_version.js

@@ -23,16 +23,19 @@ var dateUtil = require('utils/date');
 
 App.ServiceConfigVersion = DS.Model.extend({
   serviceName: DS.attr('string'),
+  configGroup: DS.attr('string'),
   version: DS.attr('number'),
   createTime: DS.attr('number'),
-  appliedTime: DS.attr('number'),
   author: DS.attr('string'),
   notes: DS.attr('string'),
   service: DS.belongsTo('App.Service'),
   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'),
   briefNotes: function () {
-    return (typeof this.get('notes') === 'string') ? this.get('notes').slice(0, 80) : "";
+    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

@@ -4904,9 +4904,39 @@ ul.inline li {
     thead {
       background: none repeat scroll 0 0 #F8F8F8;
     }
-    th {
-      select.filter-input-width, input.filter-input-width {
-          width: 80%;
+    // service name column
+    th:first-child,
+    td:first-child {
+      width: 15%;
+      select.filter-input-width{
+        width: 75%;
+      }
+    }
+    // config group, create time columns
+    th:first-child + th,
+    td:first-child + td,
+    th:first-child + th + th,
+    td:first-child + td + td {
+      width: 20%;
+      word-wrap: break-word;
+      select.filter-input-width{
+        width: 75%;
+      }
+    }
+   // author column
+    th:first-child + th + th + th,
+    td:first-child + td + td + td {
+      width: 10%;
+      input.filter-input-width {
+        width: 55%;
+      }
+    }
+    // notes column
+    th:first-child + th + th + th + th,
+    td:first-child + td + td + td + td {
+      word-wrap: break-word;
+      input.filter-input-width {
+        width: 75%;
       }
     }
   }
@@ -5118,6 +5148,7 @@ ul.inline li {
     font-size: 0.9em;
     th {
       padding: 4px;
+      padding-left: 10px;
     }
     .active-sort {
       color: #555555;

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

@@ -17,81 +17,84 @@
 }}
 
 <div id="config_history">
-    <table class="table advanced-header-table table-bordered table-striped" >
-        <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}}
-        {{/view}}
+  <table class="table advanced-header-table table-bordered table-striped" >
+    <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}}
+    {{/view}}
 
-        <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>
+    <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>
+    </tr>
+    </thead>
+    <tbody class="services-menu">
+    {{#if view.filteringComplete}}
+      {{#if view.pageContent}}
+        {{#each item in view.pageContent}}
+          {{#view view.ConfigVersionView contentBinding="item"}}
+            <td class="first">
+              <span class="label label-info">{{item.versionText}}</span>
+              <a {{action goToServiceConfigs item.serviceName}}>
+                {{item.serviceName}}
+              </a>
+              <i {{bindAttr class=":icon-refresh :restart-required-service item.isRestartRequired::hidden"}}></i>
+            </td>
+            <td>{{item.configGroup}}
+              {{#if item.isCurrent}}
+                <span class="label label-success" rel="currentTooltip"
+                {{bindAttr data-original-title="item.currentTooltip"}}>{{t common.current}}
+                </span>
+              {{/if}}
+            </td>
+            <td>{{item.modifiedDate}}</td>
+            <td>{{item.author}}</td>
+            <td>{{item.briefNotes}}</td>
+          {{/view}}
+        {{/each}}
+      {{else}}
+        <tr>
+          <td class="first" colspan="6">
+            {{t dashboard.configHistory.table.empty}}
+          </td>
         </tr>
-        </thead>
-        <tbody class="services-menu">
-        {{#if view.filteringComplete}}
-          {{#if view.pageContent}}
-            {{#each item in view.pageContent}}
-                <tr>
-                    <td class="first">
-                      <a {{action goToServiceConfigs item.serviceName}}>
-                      {{item.serviceName}}
-                      </a>
-                      <span class="label label-info">{{item.versionText}}</span>
-                      {{#if item.isCurrent}}
-                        <span class="label label-success">{{t common.current}}</span>
-                      {{/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>
-                </tr>
-            {{/each}}
-          {{else}}
-              <tr>
-                  <td class="first" colspan="4">
-                    {{t dashboard.configHistory.table.empty}}
-                  </td>
-              </tr>
-          {{/if}}
-        {{else}}
-          <tr><td colspan="4"><div class="spinner"></div></td></tr>
-        {{/if}}
-        </tbody>
-    </table>
+      {{/if}}
+    {{else}}
+      <tr><td colspan="6"><div class="spinner"></div></td></tr>
+    {{/if}}
+    </tbody>
+</table>
 
-    <div class="page-bar">
-        <div class="filtered-info span4">
-            <label>{{view.filteredContentInfo}} - <a {{action clearFilters target="view"}}
-                    href="#">{{t tableView.filters.clearAllFilters}}</a></label>
-        </div>
-        <div class="selected-hosts-info span4">
-          {{#if view.showSelectedFilter}}
-              <div>
-                  <a {{action filterSelected target="view"}} href="#">
-                    {{view.selectedHosts.length}}
-                    {{pluralize view.selectedHostsCount singular="t:hosts.filters.selectedHostInfo" plural="t:hosts.filters.selectedHostsInfo"}}
-                  </a>
-              </div>
-              - <a {{action clearSelection target="view"}} href="#">{{t hosts.filters.clearSelection}}</a>
-          {{/if}}
-        </div>
-        <div class="items-on-page">
-            <label>{{t common.show}}: {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label>
-        </div>
-        <div class="info">{{view.paginationInfo}}</div>
-        <div class="paging_two_button">
-          {{view view.paginationLeft}}
-          {{view view.paginationRight}}
+  <div class="page-bar">
+    <div class="filtered-info span4">
+      <label>{{view.filteredContentInfo}} - <a {{action clearFilters target="view"}}
+              href="#">{{t tableView.filters.clearAllFilters}}</a></label>
+    </div>
+    <div class="selected-hosts-info span4">
+      {{#if view.showSelectedFilter}}
+        <div>
+          <a {{action filterSelected target="view"}} href="#">
+            {{view.selectedHosts.length}}
+            {{pluralize view.selectedHostsCount singular="t:hosts.filters.selectedHostInfo" plural="t:hosts.filters.selectedHostsInfo"}}
+          </a>
         </div>
+          - <a {{action clearSelection target="view"}} href="#">{{t hosts.filters.clearSelection}}</a>
+      {{/if}}
+    </div>
+    <div class="items-on-page">
+      <label>{{t common.show}}: {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label>
+    </div>
+    <div class="info">{{view.paginationInfo}}</div>
+    <div class="paging_two_button">
+      {{view view.paginationLeft}}
+      {{view view.paginationRight}}
     </div>
+  </div>
 </div>

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

@@ -77,6 +77,7 @@ App.MainConfigHistoryView = App.TableView.extend({
     this.addObserver('displayLength', this, 'updatePagination');
     this.set('controller.isPolling', true);
     this.get('controller').doPolling();
+    //App.tooltip(this.$("[rel='currentTooltip']"));
   },
 
   /**
@@ -111,7 +112,7 @@ App.MainConfigHistoryView = App.TableView.extend({
   }),
   notesSort: sort.fieldView.extend({
     column: 5,
-    name: 'notes',
+    name: 'briefNotes',
     displayName: Em.I18n.t('common.notes')
   }),
 
@@ -183,6 +184,13 @@ App.MainConfigHistoryView = App.TableView.extend({
     }
   },
 
+  ConfigVersionView: Em.View.extend({
+    tagName: 'tr',
+    didInsertElement: function(){
+      App.tooltip(this.$("[rel='currentTooltip']"));
+    }
+  }),
+
   /**
    * sort content
    */