AMBARI-4859. Jobs table: After jobs background refresh (every 6 sec) sorting is is not working. (alexantonenko)

ambari-web/app/controllers/main/jobs_controller.js

@@ -27,8 +27,10 @@ App.MainJobsController = Em.ArrayController.extend({
   loaded : false,
   loading : false,
   loadJobsTimeout: null,
+  loadTimeout: null,
   jobsUpdateInterval: 6000,
   jobsUpdate: null,
+  sortingColumn: null,
 
   updateJobs: function (controllerName, funcName) {
     clearInterval(this.get('jobsUpdate'));
@@ -248,6 +250,7 @@ App.MainJobsController = Em.ArrayController.extend({
 
   loadJobs : function() {
     var self = this;
+    var timeout = this.get('loadTimeout');
     var yarnService = App.YARNService.find().objectAt(0);
     if (yarnService != null) {
       this.set('loading', true);
@@ -259,15 +262,26 @@ App.MainJobsController = Em.ArrayController.extend({
         complete : function(jqXHR, textStatus) {
           self.set('loading', false);
           self.set('loaded', true);
+          var sortColumn = self.get('sortingColumn');
+          if(sortColumn && sortColumn.get('status')){
+            var sortColumnStatus = sortColumn.get('status');
+            sortColumn.set('content', self.get('content'));
+            sortColumn.get('parentView').sort(sortColumn, sortColumnStatus === "sorting_desc" ? true : false);
+            sortColumn.set('status', sortColumnStatus);
+            self.set('content',sortColumn.get('parentView').get('content'));
+          }
         }
       }, function (jqXHR, textStatus) {
         App.hiveJobsMapper.map({entities : []});
       });
+    }else{
+      clearTimeout(timeout);
+      timeout = setTimeout(function(){
+        self.loadJobs();
+      }, 300);
     }
   },
 
-
-
   refreshLoadedJobs : function() {
     var timeout = this.get('loadJobsTimeout');
     var self = this;

ambari-web/app/templates/main/jobs.hbs

@@ -16,76 +16,75 @@
 * limitations under the License.
 }}
 
-<div id="jobs">
-
-    <div class="jobs_head">
-      <div>{{t menu.item.jobs}}</div>
-      <div class="jobs-type">
-       {{t jobs.type}} :
-       <button class="btn single-btn-group">
-        {{t jobs.type.hive}}
-       </button>
+{{#if controller.loaded}}
+  <div id="jobs">
+      <div class="jobs_head">
+        <div>{{t menu.item.jobs}}</div>
+        <div class="jobs-type">
+         {{t jobs.type}} :
+         <button class="btn single-btn-group">
+          {{t jobs.type.hive}}
+         </button>
+        </div>
       </div>
-    </div>
-
-    <table id="jobs-table" class="table table-bordered table-striped">
-        <thead>
-
-        {{#view view.sortView classNames="label-row" contentBinding="view.filteredContent"}}
-            {{view view.parentView.idSort}}
-            {{view view.parentView.userSort}}
-            {{view view.parentView.startTimeSort}}
-            {{view view.parentView.endTimeSort}}
-            {{view view.parentView.durationSort}}
-        {{/view}}
+      <table id="jobs-table" class="table table-bordered table-striped">
+          <thead>
+          {{#view view.sortView classNames="label-row" contentBinding="view.filteredContent"}}
+              {{view view.parentView.idSort}}
+              {{view view.parentView.userSort}}
+              {{view view.parentView.startTimeSort}}
+              {{view view.parentView.endTimeSort}}
+              {{view view.parentView.durationSort}}
+          {{/view}}
 
-        <tr id="filter-row" class="first">
-            <th>{{view view.jobsIdFilterView}}</th>
-            <th>{{view view.userFilterView}}</th>
-            <th class="start-time">{{view view.startTimeFilterView}}</th>
-            <th></th>
-            <th></th>
-        </tr>
-        </thead>
-        <tbody>
-        {{#if  view.noDataToShow}}
-            <tr>
-                <td class="no-data" {{bindAttr colspan="controller.columnsName.content.length"}}>{{t jobs.nothingToShow}}</td>
-            </tr>
-        {{else}}
-          {{#each job in view.pageContent}}
-            <tr>
-              <td class="id">
-                {{#if job.hasTezDag}}
-                  <a rel="tooltip" class="job-link" title="{{unbound job.queryText}}" href="#" {{action "showJobDetails" job}}>{{unbound job.name}}</a>
-                {{else}}
-                  <span rel="tooltip" class="job-link" title="{{unbound job.queryText}}">{{unbound job.name}}</a>
-                {{/if}}
-              </td>
-              <td>
-                {{job.user}}
-              </td>
-              <td>
-                {{job.startTimeDisplay}}
-              </td>
-              <td>
-                {{job.endTimeDisplay}}
-              </td>
-              <td>
-                {{job.durationDisplay}}
-              </td>
-            </tr>
-          {{/each}}
-        {{/if}}
-        </tbody>
-    </table>
+          <tr id="filter-row" class="first">
+              <th>{{view view.jobsIdFilterView}}</th>
+              <th>{{view view.userFilterView}}</th>
+              <th class="start-time">{{view view.startTimeFilterView}}</th>
+              <th></th>
+              <th></th>
+          </tr>
+          </thead>
+          <tbody>
+          {{#if  view.noDataToShow}}
+              <tr>
+                  <td class="no-data" {{bindAttr colspan="controller.columnsName.content.length"}}>{{t jobs.nothingToShow}}</td>
+              </tr>
+          {{else}}
+            {{#each job in view.pageContent}}
+              <tr>
+                <td class="id">
+                  {{#if job.hasTezDag}}
+                    <a rel="tooltip" class="job-link" title="{{unbound job.queryText}}" href="#" {{action "showJobDetails" job}}>{{unbound job.name}}</a>
+                  {{else}}
+                    <span rel="tooltip" class="job-link" title="{{unbound job.queryText}}">{{unbound job.name}}</a>
+                  {{/if}}
+                </td>
+                <td>
+                  {{job.user}}
+                </td>
+                <td>
+                  {{job.startTimeDisplay}}
+                </td>
+                <td>
+                  {{job.endTimeDisplay}}
+                </td>
+                <td>
+                  {{job.durationDisplay}}
+                </td>
+              </tr>
+            {{/each}}
+          {{/if}}
+          </tbody>
+      </table>
 
-    <div class="page-bar">
-        <div id="filtered-jobs">
-          {{view.filteredJobs}} - <a href="javascript:void(null);" {{action clearFilters target="view"}}>{{t jobs.filtered.clear}}</a>
-        </div>
-        <div class="items-on-page">
-            <label>{{t jobs.show.up.to}}: {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label>
-        </div>
-    </div>
-</div>
+      <div class="page-bar">
+          <div id="filtered-jobs">
+            {{view.filteredJobs}} - <a href="javascript:void(null);" {{action clearFilters target="view"}}>{{t jobs.filtered.clear}}</a>
+          </div>
+          <div class="items-on-page">
+              <label>{{t jobs.show.up.to}}: {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label>
+          </div>
+      </div>
+  </div>
+{{/if}}

ambari-web/app/views/common/sort_view.js

@@ -176,6 +176,7 @@ var fieldView = Em.View.extend({
       this.get('parentView').sort(this, true);
       this.set('status', 'sorting_desc');
     }
+    this.get('controller').set('sortingColumn', this);
   }
 });
 

ambari-web/app/views/main/jobs_view.js

@@ -27,9 +27,6 @@ App.MainJobsView = App.TableView.extend({
     return this.get('controller.content');
   }.property('controller.content.length'),
 
-  didInsertElement: function () {
-    this.set('filteredContent', this.get('controller.content'));
-  },
 
   /**
    * If no jobs table rows to show.
@@ -39,7 +36,7 @@ App.MainJobsView = App.TableView.extend({
   /*
    If no jobs to display set noDataToShow to true, else set emptyData to false.
    */
-  noDataToShowObserver:function(){
+  noDataToShowObserver: function () {
     if(this.get("controller.content.length") > 0){
       this.set("noDataToShow",false);
     }else{