Procházet zdrojové kódy

AMBARI-5300 Implement pagination on "Install, Start and Test" step. (atkach)

atkach před 11 roky
rodič
revize
278a189933

+ 9 - 21
ambari-web/app/controllers/wizard/step3_controller.js

@@ -183,7 +183,6 @@ App.WizardStep3Controller = Em.Controller.extend({
   },
 
   retryHosts: function (hosts) {
-    this.selectAllCategory();
     var bootStrapData = JSON.stringify({'verbose': true, 'sshKey': this.get('content.installOptions.sshKey'), 'hosts': hosts.mapProperty('name'), 'user': this.get('content.installOptions.sshUser')});
     this.numPolls = 0;
     if (this.get('content.installOptions.manualInstall') !== true) {
@@ -199,8 +198,6 @@ App.WizardStep3Controller = Em.Controller.extend({
   },
 
   retrySelectedHosts: function () {
-    //to display all hosts
-    this.set('category', 'All');
     if (!this.get('isRetryDisabled')) {
       this.set('isRetryDisabled', true);
       var selectedHosts = this.get('bootHosts').filterProperty('bootStatus', 'FAILED');
@@ -494,16 +491,16 @@ App.WizardStep3Controller = Em.Controller.extend({
     hosts.forEach(function (_host) {
       var host = (App.testMode) ? jsonData.items[0] : jsonData.items.findProperty('Hosts.host_name', _host.name);
       if (App.skipBootstrap) {
-        _host.cpu = 2;
-        _host.memory = ((parseInt(2000000))).toFixed(2);
-        _host.disk_info = [{"mountpoint": "/", "type":"ext4"},{"mountpoint": "/grid/0", "type":"ext4"}, {"mountpoint": "/grid/1", "type":"ext4"}, {"mountpoint": "/grid/2", "type":"ext4"}];
+        _host.set('cpu', 2);
+        _host.set('memory', ((parseInt(2000000))).toFixed(2));
+        _host.set('disk_info', [{"mountpoint": "/", "type":"ext4"},{"mountpoint": "/grid/0", "type":"ext4"}, {"mountpoint": "/grid/1", "type":"ext4"}, {"mountpoint": "/grid/2", "type":"ext4"}]);
       } else if (host) {
-        _host.cpu = host.Hosts.cpu_count;
-        _host.memory = ((parseInt(host.Hosts.total_mem))).toFixed(2);
-        _host.disk_info = host.Hosts.disk_info;
-        _host.os_type = host.Hosts.os_type;
-        _host.os_arch = host.Hosts.os_arch;
-        _host.ip = host.Hosts.ip;
+        _host.set('cpu', host.Hosts.cpu_count);
+        _host.set('memory', ((parseInt(host.Hosts.total_mem))).toFixed(2));
+        _host.set('disk_info', host.Hosts.disk_info);
+        _host.set('os_type', host.Hosts.os_type);
+        _host.set('os_arch', host.Hosts.os_arch);
+        _host.set('ip', host.Hosts.ip);
 
         var context = self.checkHostOSType(host.Hosts.os_type, host.Hosts.host_name);
         if(context) {
@@ -541,7 +538,6 @@ App.WizardStep3Controller = Em.Controller.extend({
 
     this.set('repoCategoryWarnings', repoWarnings);
     this.set('diskCategoryWarnings', diskWarnings);
-    this.set('bootHosts', hosts);
     this.stopRegistration();
   },
 
@@ -614,14 +610,6 @@ App.WizardStep3Controller = Em.Controller.extend({
     }
   },
 
-  selectCategory: function(event, context){
-    this.set('category', event.context);
-  },
-
-  selectAllCategory: function(){
-    this.set('category', this.get('categories').get('firstObject'));
-  },
-
   submit: function () {
     if (this.get('isHostHaveWarnings')) {
       var self = this;

+ 2 - 117
ambari-web/app/controllers/wizard/step9_controller.js

@@ -38,11 +38,6 @@ App.WizardStep9Controller = Em.Controller.extend({
 
   hosts: [],
 
-  /*
-   * Indicate whether to show the message(that there are no hosts to display) instead of list of hosts
-   */
-  isAnyHostDisplayed: true,
-
   /**
    * overall progress of <Install,Start and Test> page shown as progress bar on the top of the page
    */
@@ -107,9 +102,7 @@ App.WizardStep9Controller = Em.Controller.extend({
    * This function is called when a click event happens on Next button of <Install, Start and Test> page
    */
   submit: function () {
-    if (!this.get('isSubmitDisabled')) {
-      App.router.send('next');
-    }
+    App.router.send('next');
   },
 
   /**
@@ -141,122 +134,14 @@ App.WizardStep9Controller = Em.Controller.extend({
     return this.get('content.cluster.status') == 'INSTALL FAILED';
   }.property('content.cluster.status'),
 
-  /**
-   * Ember Object with the controllerbinding as this controller. This object also contains
-   * <code>
-   *   hostStatus: {String} A valid status of a host.
-   *               Used to filter hosts in that status.
-   *   hostsCount: {Int} Dynamic count of hosts displayed in the category label
-   *   label : {String} status and hosts in that status displayed which consists as a category on the page
-   *   isActive: {boolean} Gets set when the category is selected/clicked by the user
-   *   itemClass: {computed property} Binds the category link to active class when user clicks on the link
-   * </code>
-   */
-  categoryObject: Em.Object.extend({
-    hostsCount: function () {
-      var category = this;
-      var hosts = this.get('controller.hosts').filter(function (_host) {
-        if (category.get('hostStatus') == 'inProgress') {
-          return (_host.get('status') == 'info' || _host.get('status') == 'pending' || _host.get('status') == 'in_progress');
-        } else if (category.get('hostStatus') == 'failed') {
-          return (_host.get('status') == 'failed' || _host.get('status') == 'heartbeat_lost');
-        } else {
-          return (_host.get('status') == category.get('hostStatus'));
-        }
-      }, this);
-      return hosts.get('length');
-    }.property('controller.hosts.@each.status'),
-    label: function () {
-      return "%@ (%@)".fmt(this.get('value'), this.get('hostsCount'));
-    }.property('value', 'hostsCount')
-  }),
-
-  /**
-   * computed property creates the category objects on the load of the page and sets 'All' as the active category
-   * @Returns: All created categories which are binded and iterated in the template
-   */
-  categories: function () {
-    var self = this;
-    self.categoryObject.reopen({
-      controller: self,
-      isActive: function () {
-        return this.get('controller.category') == this;
-      }.property('controller.category'),
-      itemClass: function () {
-        return this.get('isActive') ? 'active' : '';
-      }.property('isActive')
-    });
-
-    var categories = [
-      self.categoryObject.create({value: Em.I18n.t('common.all'), hostStatus: 'all', hostsCount: function () {
-        return this.get('controller.hosts.length');
-      }.property('controller.hosts.length') }),
-      self.categoryObject.create({value: Em.I18n.t('installer.step9.hosts.status.label.inProgress'), hostStatus: 'inProgress'}),
-      self.categoryObject.create({value: Em.I18n.t('installer.step9.hosts.status.label.warning'), hostStatus: 'warning'}),
-      self.categoryObject.create({value: Em.I18n.t('common.success'), hostStatus: 'success'}),
-      self.categoryObject.create({value: Em.I18n.t('common.fail'), hostStatus: 'failed', last: true })
-    ];
-
-    this.set('category', categories.get('firstObject'));
-    return categories;
-  }.property(),
-
-  /**
-   * Registered as an handlebar action in step-9 template. Invoked whenever click event occurs on a category label
-   * @param event: {categoryObject}
-   */
-  selectCategory: function (event) {
-    this.set('category', event.context);
-  },
-
-  /**
-   * Present clicked/selected {categoryObject} on the page
-   */
-  category: false,
-
   /**
    * Observer function: Calls {hostStatusUpdates} function once with change in a host status from any registered hosts.
    */
   hostStatusObserver: function () {
-    Ember.run.once(this, 'hostStatusUpdates');
+    Ember.run.once(this, 'updateStatus');
   }.observes('hosts.@each.status'),
 
 
-  /**
-   * Updates the hosts mapping to the category selected and updates entire page status
-   */
-  hostStatusUpdates: function () {
-    this.updateVisibleHosts();
-    this.updateStatus();
-  },
-
-  /**
-   * Observer function: Updates {visibleHosts Array} of this controller whenever category is changed
-   */
-  updateVisibleHosts: function () {
-    var targetStatus = this.get('category.hostStatus');
-    var isAnyHostDisplayed = false;
-    if (targetStatus === 'all') {
-      isAnyHostDisplayed = true;
-      this.get('hosts').setEach('isVisible', true);
-    } else {
-      this.get('hosts').forEach(function (_host) {
-        var isVisible = false;
-        var status = _host.get('status');
-        if (targetStatus == 'inProgress') {
-          isVisible = (status == 'info' || status == 'pending' || status == 'in_progress');
-        } else if (targetStatus === 'failed') {
-          isVisible = (status === 'failed' || status === 'heartbeat_lost');
-        } else {
-          isVisible = (status == targetStatus);
-        }
-        isAnyHostDisplayed = (isAnyHostDisplayed || isVisible);
-        _host.set('isVisible', isVisible);
-      }, this)
-    }
-    this.set('isAnyHostDisplayed', isAnyHostDisplayed);
-  }.observes('category'),
-
   /**
    * A flag that gets set with installation failure.
    */

+ 5 - 9
ambari-web/app/styles/application.less

@@ -456,14 +456,6 @@ h1 {
       margin-bottom: 0;
     }
   }
-  #confirm-hosts, #step6 {
-    .page-bar {
-      padding: 5px;
-      .selected-hosts-info {
-        margin: 0;
-      }
-    }
-  }
   #step4, #step5, #step6 {
     a.selected {
       color: #333;
@@ -498,6 +490,9 @@ h1 {
     }
   }
   #deploy {
+    .pre-scrollable {
+      max-height: 750px;
+    }
     #overallProgress {
     }
     #host-filter {
@@ -524,6 +519,7 @@ h1 {
       }
     }
     #deploy-status-by-host {
+      margin-bottom: 0;
       th.host {
         width: 30%;
       }
@@ -540,7 +536,7 @@ h1 {
         }
       }
       .progress-percentage {
-        margin-left: 10px;
+        margin-left: 5px;
         width: 20% - 10px;
       }
     }

+ 5 - 2
ambari-web/app/templates/wizard/step3.hbs

@@ -30,7 +30,7 @@
         </button>
         {{#unless isRetryDisabled}}
         <a class="btn btn-primary decommission"
-           href="#" {{action retrySelectedHosts target="controller"}}><i
+           href="#" {{action retrySelectedHosts target="view"}}><i
           class="icon-repeat icon-white"></i>
           {{t installer.step3.retryFailed}}
         </a>
@@ -124,7 +124,7 @@
       </div>
       <div id="hosts">
           <div class="page-bar">
-              <div class="selected-hosts-info span6">
+              <div class="selected-hosts-info pull-left">
                 {{#if view.selectedHostsCount}}
                   <a {{action selectedHostsPopup target="controller"}} href="#">
                     {{view.selectedHostsCount}}
@@ -134,6 +134,9 @@
                   <a {{action unSelectAll 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.paginationFirst}}

+ 3 - 0
ambari-web/app/templates/wizard/step6.hbs

@@ -68,6 +68,9 @@
   </div>
     <div id="hosts">
         <div class="page-bar">
+            <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.paginationFirst}}

+ 21 - 7
ambari-web/app/templates/wizard/step9.hbs

@@ -47,9 +47,9 @@
       <div id="host-filter" class="pull-right">
         <ul class="clearfix">
           <li class="first">{{t common.show}}:</li>
-          {{#each category in controller.categories}}
+          {{#each category in view.categories}}
             <li {{bindAttr class="category.itemClass"}}>
-              <a {{action selectCategory category target="controller"}} href="#">
+              <a {{action selectCategory category target="view"}} href="#">
                 {{category.label}}
               </a>
             </li>
@@ -60,7 +60,7 @@
         </ul>
       </div>
     </div>
-    <div class="pre-scrollable" style="max-height: 750px;">
+    <div class="pre-scrollable">
       <table id="deploy-status-by-host" class="table table-bordered table-striped">
         <thead>
         <tr>
@@ -75,9 +75,9 @@
         </thead>
 
         <tbody>
-        {{#if isAnyHostDisplayed}}
-          {{#each host in hosts}}
-            {{#view App.HostStatusView objBinding="host" controllerBinding="controller" classBinding="host.isVisible::hidden"}}
+        {{#if view.pageContent}}
+          {{#each host in view.pageContent}}
+            {{#view App.HostStatusView objBinding="host" controllerBinding="controller"}}
               <td>
                 {{host.name}}
               </td>
@@ -105,6 +105,20 @@
         </tbody>
       </table>
     </div>
+      <div id="hosts">
+          <div class="page-bar">
+              <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.paginationFirst}}
+                {{view view.paginationLeft}}
+                {{view view.paginationRight}}
+                {{view view.paginationLast}}
+              </div>
+          </div>
+      </div>
     <div class="box-footer">
       <hr/>
       <div class="footer-pagination">
@@ -121,7 +135,7 @@
       </p>
     {{/if}}
     <div class="btn-area">
-      <a class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action submit target="controller"}}>{{t common.next}} &rarr;</a>
+      <button class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action submit target="controller"}}>{{t common.next}} &rarr;</button>
     </div>
   </div>
 

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

@@ -255,7 +255,7 @@ App.TableView = Em.View.extend(App.UserPref, {
    * @type {Ember.View}
    */
   rowsPerPageSelectView: Em.Select.extend({
-    content: ['10', '25', '50'],
+    content: ['10', '25', '50', '100'],
     change: function () {
       this.get('parentView').saveDisplayLength();
     }

+ 12 - 2
ambari-web/app/views/wizard/step3_view.js

@@ -37,7 +37,7 @@ App.WizardStep3View = App.TableView.extend({
 
   registeredHostsMessage: '',
 
-  displayLength: "20",
+  displayLength: "25",
 
   didInsertElement: function () {
     this.get('controller').loadStep();
@@ -167,6 +167,16 @@ App.WizardStep3View = App.TableView.extend({
     this.watchSelection();
   },
 
+  /**
+   * Select "All" hosts category
+   * run registration of failed hosts again
+   */
+  retrySelectedHosts: function () {
+    var eventObject = {context: Em.Object.create({hostsBootStatus: 'ALL'})};
+    this.selectCategory(eventObject);
+    this.get('controller').retrySelectedHosts();
+  },
+
   monitorStatuses: function() {
     var hosts = this.get('controller.bootHosts');
     var failedHosts = hosts.filterProperty('bootStatus', 'FAILED').length;
@@ -206,7 +216,7 @@ App.WizardStep3View = App.TableView.extend({
 App.WizardHostView = Em.View.extend({
 
   tagName: 'tr',
-  classNameBindings: ['hostInfo.bootStatus', 'hostInfo.isVisible::hidden'],
+  classNameBindings: ['hostInfo.bootStatus'],
   hostInfo: null,
 
   remove: function () {

+ 1 - 1
ambari-web/app/views/wizard/step6_view.js

@@ -25,7 +25,7 @@ App.WizardStep6View = App.TableView.extend({
 
   title: '',
 
-  displayLength: "20",
+  displayLength: "25",
 
   content: function () {
     return this.get('controller.hosts');

+ 112 - 2
ambari-web/app/views/wizard/step9_view.js

@@ -19,7 +19,7 @@
 var App = require('app');
 var date = require('utils/date');
 
-App.WizardStep9View = Em.View.extend({
+App.WizardStep9View = App.TableView.extend({
 
   templateName: require('templates/wizard/step9'),
   barColor: '',
@@ -29,9 +29,119 @@ App.WizardStep9View = Em.View.extend({
    return (this.get('controller.progress') === '100');
   }.property('controller.progress'),
 
+  displayLength: "25",
+
+  content: function () {
+    return this.get('controller.hosts');
+  }.property('controller.hosts'),
+
+  filteredContent: [],
+
+  selectedCategory: function() {
+    return this.get('categories').findProperty('isActive');
+  }.property('categories.@each.isActive'),
+
+  /**
+   * Ember Object category. This object also contains
+   * <code>
+   *   hostStatus: {String} A valid status of a host.
+   *               Used to filter hosts in that status.
+   *   hostsCount: {Int} Dynamic count of hosts displayed in the category label
+   *   label : {String} status and hosts in that status displayed which consists as a category on the page
+   *   isActive: {boolean} Gets set when the category is selected/clicked by the user
+   *   itemClass: {computed property} Binds the category link to active class when user clicks on the link
+   * </code>
+   */
+  categoryObject: Em.Object.extend({
+    hostsCount: 0,
+    label: function () {
+      return "%@ (%@)".fmt(this.get('value'), this.get('hostsCount'));
+    }.property('value', 'hostsCount'),
+    isActive: false,
+    itemClass: function () {
+      return this.get('isActive') ? 'active' : '';
+    }.property('isActive')
+  }),
+  /**
+   * computed property creates the category objects on the load of the page and sets 'All' as the active category
+   * @Returns: All created categories which are binded and iterated in the template
+   */
+  categories: function () {
+    return [
+      this.categoryObject.create({value: Em.I18n.t('common.all'), hostStatus: 'all', isActive: true}),
+      this.categoryObject.create({value: Em.I18n.t('installer.step9.hosts.status.label.inProgress'), hostStatus: 'inProgress'}),
+      this.categoryObject.create({value: Em.I18n.t('installer.step9.hosts.status.label.warning'), hostStatus: 'warning'}),
+      this.categoryObject.create({value: Em.I18n.t('common.success'), hostStatus: 'success'}),
+      this.categoryObject.create({value: Em.I18n.t('common.fail'), hostStatus: 'failed', last: true })
+    ];
+  }.property(),
+
+  hostStatusObserver: function(){
+    Ember.run.once(this, 'countCategoryHosts');
+    Ember.run.once(this, 'filter');
+  }.observes('content.@each.status'),
+
+  /**
+   * count each category hosts to update label
+   */
+  countCategoryHosts: function () {
+    var counters = {
+      "info": 0,
+      "pending": 0,
+      "in_progress": 0,
+      "heartbeat_lost": 0,
+      "warning": 0,
+      "success": 0,
+      "failed": 0
+    };
+
+    this.get('content').forEach(function (host) {
+      if (counters[host.get('status')] !== undefined) {
+        counters[host.get('status')]++;
+      }
+    }, this);
+    counters["all"] = this.get('content.length');
+    counters["inProgress"] = counters["info"] + counters["pending"] + counters["in_progress"];
+    counters["failed"] += counters["heartbeat_lost"];
+    this.get('categories').forEach(function(category) {
+      category.set('hostsCount', counters[category.get('hostStatus')]);
+    }, this);
+  },
+
+  /**
+   * filter hosts by category
+   */
+  filter: function () {
+    var result = [];
+    var selectedCategory = this.get('selectedCategory');
+    if (!selectedCategory || selectedCategory.get('hostStatus') === 'all') {
+      result = this.get('content');
+    } else if (selectedCategory.get('hostStatus') == 'inProgress') {
+      result = this.get('content').filter(function (_host) {
+        return (_host.get('status') == 'info' || _host.get('status') == 'pending' || _host.get('status') == 'in_progress');
+      });
+    } else if (selectedCategory.get('hostStatus') == 'failed') {
+      result = this.get('content').filter(function (_host) {
+        return (_host.get('status') == 'failed' || _host.get('status') == 'heartbeat_lost');
+      });
+    } else {
+      result = this.get('content').filterProperty('status', selectedCategory.get('hostStatus'));
+    }
+    this.set('filteredContent', result);
+  }.observes('selectedCategory'),
+  /**
+   * Trigger on Category click
+   * @param {Object} event
+   */
+  selectCategory: function (event) {
+    var categoryStatus = event.context.get('hostStatus');
+    this.get('categories').forEach(function (category) {
+      category.set('isActive', (category.get('hostStatus') === categoryStatus));
+    });
+  },
+
   didInsertElement: function () {
     var controller = this.get('controller');
-    this.get('controller.hosts').setEach('status', 'info');
     this.onStatus();
     controller.navigateStep();
   },