AMBARI-8312 Create popup with hosts for stack versions detail page and other functionality for managing hosts. (ababiichuk)

ambari-web/app/controllers/main/admin/stack_versions/stack_versions_controller.js

@@ -58,6 +58,34 @@ App.MainStackVersionsController = Em.ArrayController.extend({
 
   getUrl: function () {
     return App.get('testMode') ? this.get('mockUrl') : this.get('realUrl');
+  },
+
+  filterHostsByStack: function (version, state) {
+    if (!version || !state)
+      return;
+    App.router.get('mainHostController').filterByStack(version, state);
+    App.router.get('mainHostController').set('showFilterConditionsFirstLoad', true);
+    App.router.transitionTo('hosts.index');
+  },
+
+  showHosts: function(event) {
+    var self = this;
+    var status = event.currentTarget.title.toCapital();
+    var version = event.contexts[0];
+    var hosts = event.contexts[1];
+    return App.ModalPopup.show({
+      bodyClass: Ember.View.extend({
+        title: Em.I18n.t('admin.stackVersions.hosts.popup.title').format(version, status, hosts.length),
+        template: Em.Handlebars.compile('<h4>{{view.title}}</h4><span class="limited-height-2">'+ hosts.join('<br/>') + '</span>')
+      }),
+      header: Em.I18n.t('admin.stackVersions.hosts.popup.header').format(status),
+      primary: Em.I18n.t('admin.stackVersions.hosts.popup.primary'),
+      secondary: Em.I18n.t('common.close'),
+      onPrimary: function() {
+        this.hide();
+        self.filterHostsByStack(version, status);
+      }
+    });
   }
 
 });

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

@@ -516,6 +516,27 @@ App.MainHostController = Em.ArrayController.extend({
     App.db.setFilterConditions(this.get('name'), [filterForComponent]);
   },
 
+  /**
+   * Filter hosts by stack version and state
+   * @param {String} version
+   * @param {String} state
+   */
+  filterByStack: function (version, state) {
+    if (!version || !state)
+      return;
+    var column = 11;
+
+    var filterForStack = {
+      iColumn: column,
+      value: {
+        version: version,
+        status: state.toUpperCase()
+      },
+      type: 'sub-resource'
+    };
+    App.db.setFilterConditions(this.get('name'), [filterForStack]);
+  },
+
   showAlertsPopup: function (event) {
     var host = event.context;
     App.router.get('mainAlertsController').loadAlerts(host.get('hostName'), "HOST");

ambari-web/app/messages.js

@@ -1194,6 +1194,9 @@ Em.I18n.translations = {
   'admin.stackVersions.datails.hosts.btn.installing': "Installing...",
   'admin.stackVersions.datails.hosts.btn.nothing': "Nothing to Install",
   'admin.stackVersions.datails.hosts.btn.na': "Status not available",
+  'admin.stackVersions.hosts.popup.header': "Version Status: {0}",
+  'admin.stackVersions.hosts.popup.title': "{0} Version is {1} on {2} hosts:",
+  'admin.stackVersions.hosts.popup.primary': "Go to Hosts",
 
   'admin.stackUpgrade.title': "Stack and upgrade",
 

ambari-web/app/templates/main/admin/stack_versions/stack_version_details.hbs

@@ -44,11 +44,19 @@
         <div class="span8">
           <div class="row-fluid">
             <div class="span3">{{t admin.stackVersions.datails.installed.on}}</div>
-            <div class="span6">{{content.installedHosts.length}}/{{totalHostCount}}</div>
+            <div class="span6">
+              <a href="#" title='installed' {{action showHosts controller.content.version controller.content.currentHosts target="App.router.mainStackVersionsController"}}>
+                <span>{{content.installedHosts.length}}/{{totalHostCount}}</span>
+              </a>
+            </div>
           </div>
           <div class="row-fluid">
             <div class="span3">{{t admin.stackVersions.datails.current.on}}</div>
-            <div class="span6">{{content.currentHosts.length}}/{{totalHostCount}}</div>
+            <div class="span6">
+              <a href="#" title='current' {{action showHosts controller.content.version controller.content.currentHosts target="App.router.mainStackVersionsController"}}>
+                <span>{{content.currentHosts.length}}/{{totalHostCount}}</span>
+              </a>
+            </div>
           </div>
         </div>
         <div class="span4">
@@ -90,7 +98,7 @@
                 {{repo.type}}
               </td>
               <td>
-                {{view Ember.TextField valueBinding="repo.baseurl" className="disabled"}}
+                {{view Ember.TextField valueBinding="repo.baseurl" disabled="disabled"}}
               </td>
             </tr>
           {{/each}}

ambari-web/app/templates/main/admin/stack_versions/stack_versions.hbs

@@ -56,10 +56,14 @@
               </div>
             </td>
             <td>
-              <span>{{view.content.installedHosts.length}}</span>
+              <a href="#" title='installed' {{action showHosts view.content.version view.content.installedHosts target="controller"}}>
+                <span>{{view.content.installedHosts.length}}</span>
+              </a>
             </td>
             <td>
-              <span>{{view.content.currentHosts.length}}</span>
+              <a href="#" title='current' {{action showHosts view.content.version view.content.currentHosts target="controller"}}>
+                <span>{{view.content.currentHosts.length}}</span>
+              </a>
             </td>
           {{/view}}
         {{/each}}