AMBARI-5858 Convert Hosts table to use server-side paging. (atkach)

ambari-web/app/controllers/global/update_controller.js

@@ -35,6 +35,43 @@ App.UpdateController = Em.Controller.extend({
     return (App.testMode) ? testUrl : App.apiPrefix + '/clusters/' + this.get('clusterName') + url;
   },
 
+  /**
+   * construct URL from real URL and query parameters
+   * @param testUrl
+   * @param realUrl
+   * @param queryParams
+   * @return {String}
+   */
+  getComplexUrl: function (testUrl, realUrl, queryParams) {
+    var url = App.apiPrefix + '/clusters/' + App.get('clusterName');
+    var params = '';
+    if (App.testMode) {
+      url = testUrl;
+    } else {
+      if (queryParams) {
+        queryParams.forEach(function (param) {
+          params += param.key + '=' + param.value + '&';
+        });
+      }
+      url += realUrl.replace('<parameters>', params);
+    }
+    return url;
+  },
+
+  /**
+   * depict query parameters of table
+   */
+  queryParams: Em.Object.create({
+    'Hosts': []
+  }),
+
+  /**
+   * map describes relations between updater function and table
+   */
+  tableUpdaterMap: {
+    'Hosts': 'updateHost'
+  },
+
   /**
    * Start polling, when <code>isWorking</code> become true
    */
@@ -81,9 +118,11 @@ App.UpdateController = Em.Controller.extend({
 
   updateHost: function (callback) {
     var testUrl = App.get('isHadoop2Stack') ? '/data/hosts/HDP2/hosts.json' : '/data/hosts/hosts.json';
-    var hostsUrl = this.getUrl(testUrl, '/hosts?fields=Hosts/host_name,Hosts/host_status,Hosts/last_heartbeat_time,Hosts/disk_info,Hosts/maintenance_state,' +
-      'metrics/disk,metrics/load/load_one,metrics/cpu/cpu_system,metrics/cpu/cpu_user,metrics/memory/mem_total,metrics/memory/mem_free' +
-      '&minimal_response=true');
+    var realUrl = '/hosts?<parameters>fields=Hosts/host_name,Hosts/maintenance_state,Hosts/public_host_name,Hosts/cpu_count,Hosts/ph_cpu_count,Hosts/total_mem,' +
+      'Hosts/host_status,Hosts/last_heartbeat_time,Hosts/os_arch,Hosts/os_type,Hosts/ip,host_components/HostRoles/state,host_components/HostRoles/maintenance_state,' +
+      'Hosts/disk_info,metrics/disk,metrics/load/load_one,metrics/cpu/cpu_system,metrics/cpu/cpu_user,' +
+      'metrics/memory/mem_total,metrics/memory/mem_free,alerts/summary&minimal_response=true';
+    var hostsUrl = this.getComplexUrl(testUrl, realUrl, this.get('queryParams.Hosts'));
     App.HttpClient.get(hostsUrl, App.hostsMapper, {
       complete: callback
     });

ambari-web/app/mappers/hosts_mapper.js

@@ -136,8 +136,13 @@ App.hostsMapper = App.QuickDataMapper.create({
           });
           App.store.loadMany(this.get('model'), modifiedHosts);
         }
+
+        clientHosts.forEach(function (host) {
+          host.set('isRequested', !!hostIds[host.get('hostName')]);
+        }, this);
+
         // hosts were deleted
-        if (clientHosts.get('length') > hostsWithFullInfo.length) {
+       /* if (clientHosts.get('length') > hostsWithFullInfo.length) {
           clientHosts.forEach(function (host) {
             if (host && !hostIds[host.get('hostName')]) {
               // Delete old ones as new ones will be
@@ -146,7 +151,7 @@ App.hostsMapper = App.QuickDataMapper.create({
               delete cacheData[host.get('id')];
             }
           }, this);
-        }
+        }*/
       }
       if (!isModelLoaded) {
         App.Host.find().forEach(function (_host) {

ambari-web/app/mixins.js

@@ -21,4 +21,5 @@
 
 require('mixins/common/localStorage');
 require('mixins/common/userPref');
+require('mixins/common/tableServerProvider');
 require('mixins/main/host/details/host_components/decommissionable');

ambari-web/app/mixins/common/tableServerProvider.js

@@ -0,0 +1,76 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var App = require('app');
+
+
+App.TableServerProvider = Em.Mixin.create({
+  tableName: '',
+  updaterBinding: 'App.router.updateController',
+  /**
+   * contains association between property of table and parameter in query
+   */
+  paramAssociations: {},
+  /**
+   * properties which trigger <code>refresh()</code> when they are changed
+   */
+  refreshTriggers: [],
+  refreshCompleted: true,
+
+  /**
+   * add observers to trigger properties
+   */
+  initTriggers: function () {
+    this.get('refreshTriggers').forEach(function (trigger) {
+      this.addObserver(trigger, this, 'refresh');
+    }, this);
+  },
+
+  /**
+   * set filter properties of table to query parameters
+   * @param newParams
+   */
+  setParams: function (newParams) {
+    this.get('updater.queryParams').set(this.get('tableName'), newParams);
+  },
+
+  /**
+   * request latest data filtered by new parameters
+   * called when trigger property(<code>refreshTriggers</code>) is changed
+   */
+  refresh: function () {
+    var params = [];
+    var paramAssociations = this.get('paramAssociations');
+    var self = this;
+
+    for (var property in paramAssociations) {
+      if (!Em.isNone(this.get(property))) {
+        params.push({
+          key: paramAssociations[property],
+          value: this.get(property)
+        });
+      }
+    }
+    this.setParams(params);
+    this.set('refreshCompleted', false);
+    this.get('updater')[this.get('updater.tableUpdaterMap')[this.get('tableName')]](function () {
+      self.set('refreshCompleted', true);
+      self.propertyDidChange('pageContent');
+    });
+  }
+});

ambari-web/app/models/host.js

@@ -51,6 +51,10 @@ App.Host = DS.Model.extend({
    * Is host checked at the main Hosts page
    */
   selected:DS.attr('boolean'),
+  /**
+   * determine whether host is requested from server
+   */
+  isRequested: DS.attr('boolean'),
 
   /**
    * Overall CPU usage (system and user)

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

@@ -182,7 +182,7 @@ App.TableView = Em.View.extend(App.UserPref, {
    */
   paginationInfo: function () {
     return this.t('tableView.filters.paginationInfo').format(this.get('startIndex'), this.get('endIndex'), this.get('filteredContent.length'));
-  }.property('displayLength', 'filteredContent.length', 'startIndex', 'endIndex'),
+  }.property('filteredContent.length', 'endIndex'),
 
   paginationLeft: Ember.View.extend({
     tagName: 'a',

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

@@ -21,7 +21,7 @@ var filters = require('views/common/filter_view');
 var sort = require('views/common/sort_view');
 var date = require('utils/date');
 
-App.MainHostView = App.TableView.extend({
+App.MainHostView = App.TableView.extend(App.TableServerProvider, {
   templateName:require('templates/main/host'),
   /**
    * List of hosts in cluster
@@ -31,6 +31,24 @@ App.MainHostView = App.TableView.extend({
     return this.get('controller.content');
   }.property('controller.content.length'),
 
+  tableName: 'Hosts',
+  paramAssociations: {
+    'serverStartIndex': 'from',
+    'displayLength': 'page_size'
+  },
+  refreshTriggers: ['serverStartIndex', 'displayLength'],
+
+  /**
+   * startIndex as query parameter have first index - "0"
+   */
+  serverStartIndex: function() {
+    return this.get('startIndex') - 1;
+  }.property('startIndex'),
+
+  pageContent: function () {
+    return this.get('filteredContent').filterProperty('isRequested');
+  }.property('filteredContent.length'),
+
   clearFiltersObs: function() {
     var self = this;
     Em.run.next(function() {
@@ -42,6 +60,7 @@ App.MainHostView = App.TableView.extend({
   },
 
   didInsertElement: function() {
+    this.initTriggers();
     this.addObserver('controller.clearFilters', this, this.clearFiltersObs);
     this.clearFiltersObs();
     this.addObserver('selectAllHosts', this, this.toggleAllHosts);