AMBARI-6137 Bulk operations confirmation popup. (ababiichuk)

ambari-web/app/controllers/wizard/step8_controller.js

@@ -720,7 +720,7 @@ App.WizardStep8Controller = Em.Controller.extend({
     if (hbaseHostName.length == 1) {
       hbaseMaster.set('component_value', hbaseHostName[0].hostName);
     } else {
-      hbaseMaster.set('component_value', hbaseHostName[0].hostName + Em.I18n.t('installer.step8.other').format(hbaseHostName.length - 1));
+      hbaseMaster.set('component_value', hbaseHostName[0].hostName + " " + Em.I18n.t('installer.step8.other').format(hbaseHostName.length - 1));
     }
   },
 

ambari-web/app/messages.js

@@ -627,7 +627,7 @@ Em.I18n.translations = {
   'installer.step8.deployPopup.message':'Preparing to Deploy: {0} of {1} tasks completed.',
   'installer.step8.hosts':' hosts',
   'installer.step8.host':' host',
-  'installer.step8.other':' and {0} other hosts',
+  'installer.step8.other':'and {0} other hosts',
   'installer.step8.repoInfo.osType.redhat6':'RHEL 6/CentOS 6/Oracle Linux 6',
   'installer.step8.repoInfo.osType.redhat5':'RHEL 5/CentOS 5/Oracle Linux 5',
   'installer.step8.repoInfo.osType.sles11':'SLES 11/SUSE 11',

ambari-web/app/styles/application.less

@@ -2049,6 +2049,11 @@ width:100%;
   }
 }
 
+.limited-height {
+  max-height: 150px;
+  overflow-y: auto;
+}
+
 .task-detail-info {
   .task-detail-log-info {
     max-height: 340px;

ambari-web/app/templates/main/host/bulk_operation_confirm_popup.hbs

@@ -17,7 +17,6 @@
 }}
 
 <p>{{{view.message}}}</p>
-
 <div class="task-top-wrap">
   <div class="task-detail-ico-wrap">
     <a href="#" title="Click to Copy" {{action "textTrigger"}} class="task-detail-copy"><i class="icon-copy"></i> {{t common.copy}}</a>
@@ -29,13 +28,16 @@
       <textarea class="task-detail-log-clipboard"></textarea>
     </div>
     <div {{bindAttr class="view.textareaVisible:hidden :task-detail-log-maintext"}}>
-      <pre>{{hostNames}}</pre>
+      <pre class="limited-height">{{visibleHosts}}</pre>
     </div>
+    {{#unless expanded}}
+      <a href="#" {{action "showAll"}}>{{t tableView.filters.showAll}}</a>
+    {{/unless}}
   </div>
+  {{#if hostNamesSkipped}}
+    <div class="alert alert-warning">
+      {{view.warningInfo}}<br />
+      <pre class="limited-height alert alert-warning"><strong>{{hostNamesSkippedVisible}}</strong></pre>
+    </div>
+  {{/if}}
 </div>
-{{#if hostNamesSkipped}}
-  <div class="alert alert-warning">
-    {{view.warningInfo}}<br />
-      <strong>{{hostNamesSkipped}}</strong>
-  </div>
-{{/if}}

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

@@ -237,6 +237,23 @@ App.MainHostView = App.TableView.extend(App.TableServerProvider, {
     this.filterSelected();
   },
 
+  /**
+   * Returs all hostNames if amount is less than {minShown} or
+   * first elements of array (number of elements - {minShown}) converted to string
+   * @param {Array} hostNames - array of all listed hostNames
+   * @param {String} divider - string to separate hostNames
+   * @param {Number} minShown - min amount of hostName to be shown
+   * @returns {String} hostNames
+   * @method showHostNames
+   */
+  showHostNames: function(hostNames, divider, minShown) {
+    if (hostNames.length > minShown) {
+      return hostNames.slice(0, minShown).join(divider) + divider + Em.I18n.t("installer.step8.other").format(hostNames.length - minShown);
+    } else {
+      return hostNames.join(divider);
+    }
+  },
+
   /**
    * Confirmation Popup for bulk Operations
    */
@@ -280,12 +297,18 @@ App.MainHostView = App.TableView.extend(App.TableServerProvider, {
     App.ModalPopup.show({
       header: Em.I18n.t('hosts.bulkOperation.confirmation.header'),
       hostNames: hostNames.join("\n"),
+      visibleHosts: self.showHostNames(hostNames, "\n", 3),
+      hostNamesSkippedVisible: self.showHostNames(hostNamesSkipped, "\n", 3),
       hostNamesSkipped: function() {
         if (hostNamesSkipped.length) {
-          return hostNamesSkipped.join("<br/>");
+          return hostNamesSkipped.join("\n");
         }
         return false;
       }.property(),
+      expanded: false,
+      didInsertElement: function() {
+        this.set('expanded', hostNames.length <= 3);
+      },
       onPrimary: function() {
         self.get('controller').bulkOperation(operationData, hosts);
         this._super();
@@ -298,6 +321,11 @@ App.MainHostView = App.TableView.extend(App.TableServerProvider, {
         textTrigger: function() {
           this.set('textareaVisible', !this.get('textareaVisible'));
         },
+        showAll: function() {
+          this.set('parentView.visibleHosts', this.get('parentView.hostNames'));
+          this.set('parentView.hostNamesSkippedVisible', this.get('parentView.hostNamesSkipped'));
+          this.set('parentView.expanded', true);
+        },
         putHostNamesToTextarea: function() {
           var hostNames = this.get('parentView.hostNames');
           if (this.get('textareaVisible')) {

ambari-web/test/controllers/wizard/step8_test.js

@@ -864,7 +864,7 @@ describe('App.WizardStep8Controller', function () {
           masterComponentHosts: [{component: 'HBASE_MASTER', hostName: 'h1'}, {component: 'HBASE_MASTER', hostName: 'h2'}, {component: 'HBASE_MASTER', hostName: 'h3'}],
           component: Em.Object.create({component_name: 'HBASE_MASTER'}),
           m: 'many hosts',
-          e: 'h1' + Em.I18n.t('installer.step8.other').format(2)
+          e: 'h1 ' + Em.I18n.t('installer.step8.other').format(2)
         }
       ]).forEach(function (test) {
         it(test.m, function() {