AMBARI-9172 Versions: UI cleanup #1. (atkach)

ambari-web/app/controllers/main/admin/stack_and_upgrade_controller.js

@@ -358,6 +358,18 @@ App.MainAdminStackAndUpgradeController = Em.Controller.extend(App.LocalStorage,
     }
   },
 
+  /**
+   * confirmation popup before install repository version
+   */
+  installRepoVersionConfirmation: function (repo) {
+    var self = this;
+    return App.showConfirmationPopup(function () {
+        self.installRepoVersion(repo);
+      },
+      Em.I18n.t('admin.stackVersions.version.install.confirm').format(repo.get('displayName'))
+    );
+  },
+
   /**
    * sends request to install repoVersion to the cluster
    * and create clusterStackVersion resourse

ambari-web/app/messages.js

@@ -1296,9 +1296,21 @@ Em.I18n.translations = {
   'admin.misc.header': 'Service Users and Groups',
   'admin.misc.nothingToShow': 'No user accounts to display',
 
-  'admin.stackVersions.filter.notInstalled': "Not Installed",
-  'admin.stackVersions.filter.upgradeReady': "Upgrade Ready",
+  'admin.stackVersions.filter.notInstalled': "Not Installed ({0})",
+  'admin.stackVersions.filter.all': "All ({0})",
+  'admin.stackVersions.filter.upgradeReady': "Upgrade Ready ({0})",
+  'admin.stackVersions.filter.installed': "Installed ({0})",
+  'admin.stackVersions.filter.current': "Current ({0})",
+
+  'admin.stackVersions.editRepositories.info': 'Provide Base URLs for the Operating Systems you are configuring. Uncheck all other Operating Systems.',
+  'admin.stackVersions.version.install.confirm': 'You are about to install version {0} on all hosts.',
+  'admin.stackVersions.version.linkTooltip': 'Click to Edit Repositories',
+  'admin.stackVersions.version.hostsTooltip': 'Click to List Hosts',
+  'admin.stackVersions.version.notInstalled': "Not Installed",
   'admin.stackVersions.manageVersions': "Manage Versions",
+  'admin.stackVersions.manageVersions.popup.body': 'You are about to leave the <b>Cluster Management</b> interface' +
+    ' and go to the <b>Ambari Administration</b> interface. You can return to cluster management by using the' +
+    ' “Go to Dashboard” link in the Ambari Administration > Clusters section.',
   'admin.stackVersions.version.installNow': "Install Now",
   'admin.stackVersions.version.performUpgrade': "Perform Upgrade",
   'admin.stackVersions.version.upgrade.pause': "Upgrade: Action Required",

ambari-web/app/styles/application.less

@@ -6306,7 +6306,10 @@ i.icon-asterisks {
 
 #stack-upgrade-page {
   .version-box {
-    border: 1px black solid;
+    background: none repeat scroll 0 0 #e6f1f6;
+    border: 1px solid #d2d9dd;
+    box-shadow: 0 8px 6px -6px black;
+    height: 165px;
     margin: 15px 15px 0 0;
     padding: 5px;
     a.not-active:hover {
@@ -6315,6 +6318,7 @@ i.icon-asterisks {
     .state {
       margin: 15px 0;
       line-height: 30px;
+      padding-top: 5px;
       i {
         color: #0088cc;
         font-size: 16px;
@@ -6325,7 +6329,38 @@ i.icon-asterisks {
       }
     }
     .host-link a {
-      color: black;
+      color: #0088cc;
+      font-size: 14px;
+      font-weight: normal;
+    }
+    .version {
+      color: #000;
+      text-align: center;
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 20px;
+      padding-top: 5px;
+      .pull-right .not-active {
+        font-size: 15px;
+        color: #0088cc;
+        line-height: 20px;
+      }
+    }
+    .hosts-section {
+      margin-top: 20px;
+      width: 305px;
+      text-align: center;
+      background: #f8f8f8;
+      border-top: 1px solid #e4e4e4;
+      margin-left: -5px;
+      padding-bottom: 3px
+    }
+    .hosts-section .hosts-bar {
+      font-size: 14px;
+      font-weight: 500;
+    }
+    .hosts-section .host-link {
+      font-size: 12px;
     }
   }
 }
@@ -6371,6 +6406,20 @@ i.icon-asterisks {
   }
 }
 
+.repository-list {
+  .os-block {
+    border-top: 1px solid #dddddd;
+    padding-top: 10px
+  }
+  input[type="text"] {
+    width: 100%;
+  }
+}
+
+input[type="checkbox"].align-checkbox {
+  margin: -2px 5px 0 0;
+}
+
 #config-group-select-create-dialog {
   .select-create-config-group-div {
     margin-left: 20px;

ambari-web/app/templates/main/admin/stack_upgrade/edit_repositories.hbs

@@ -16,6 +16,9 @@
 * limitations under the License.
 }}
 
+<div class="alert alert-info">
+  {{t admin.stackVersions.editRepositories.info}}
+</div>
 
 <div class="row-fluid">
   <div class="span2"><strong>{{t common.os}}</strong></div>
@@ -25,15 +28,15 @@
   </div>
 </div>
 {{#each os in view.content.operatingSystems}}
-  <div class="row-fluid">
+  <div class="row-fluid os-block">
     <div class="span2">
-      {{os.osType}}
+      {{view Ember.Checkbox class="align-checkbox" checkedBinding="os.isSelected"}}&nbsp;{{os.osType}}
     </div>
     <div class="span10">
       {{#each repository in os.repositories}}
         <div class="row-fluid">
           <div class="span3">{{repository.repoName}}</div>
-          <div class="span9">{{view Ember.TextField}}</div>
+          <div class="span9">{{view Ember.TextField valueBinding="repository.baseUrl"}}</div>
         </div>
       {{/each}}
     </div>
@@ -41,6 +44,7 @@
 {{/each}}
 
 <div>
-  {{view Ember.Checkbox checkedBinding="view.skipValidation"}}&nbsp;
-  {{t installer.step1.advancedRepo.skipValidation.message}}
+  <label>{{view Ember.Checkbox checkedBinding="view.skipValidation" class="align-checkbox"}}{{t installer.step1.advancedRepo.skipValidation.message}}
+    <i class="icon-question-sign" rel="skip-validation-tooltip"
+       data-toggle="tooltip" {{translateAttr title="installer.step1.advancedRepo.skipValidation.tooltip"}}></i></label>
 </div>

ambari-web/app/templates/main/admin/stack_upgrade/services.hbs

@@ -17,7 +17,7 @@
 }}
 
 
-<table class="table table-bordered table-striped">
+<table class="table table-striped">
   <thead>
   <tr>
     <th>{{t common.service}}</th>

ambari-web/app/templates/main/admin/stack_upgrade/upgrade_version_box.hbs

@@ -16,9 +16,9 @@
 * limitations under the License.
 }}
 
-<p class="align-center">
-  <strong>{{view.content.displayName}}</strong>
-  <a class="pull-right not-active" {{action editRepositories target="view"}}>
+<p class="version">
+  {{view.content.displayName}}
+  <a class="pull-right not-active link-tooltip" {{action editRepositories target="view"}}>
     <i class="icon-edit"></i>
   </a>
 </p>
@@ -36,23 +36,27 @@
     <a href="#" {{action runAction view.stateElement target="view"}}>{{view.stateElement.text}}</a>
   {{/if}}
 </p>
-<div class="row-fluid host-link">
-  <div class="span4 align-center">
-    <div><a href="#" class="not-active"
-      {{action showHosts view.versionStateMap.not_installed view.content.repositoryVersion view.content.notInstalledHosts target="view"}}>
-      {{view.content.notInstalledHosts.length}}</a></div>
-    <div>{{t admin.stackVersions.filter.notInstalled}}</div>
-  </div>
-  <div class="span4 align-center">
-    <div><a href="#" class="not-active"
-      {{action showHosts view.versionStateMap.installed view.content.repositoryVersion view.content.installedHosts target="view"}}>
-      {{view.content.installedHosts.length}}</a></div>
-    <div>{{t common.installed}}</div>
-  </div>
-  <div class="span4 align-center">
-    <div><a href="#" class="not-active"
-      {{action showHosts view.versionStateMap.current view.content.repositoryVersion view.content.currentHosts target="view"}}>
-      {{view.content.currentHosts.length}}</a></div>
-    <div>{{t common.current}}</div>
+
+<div class="hosts-section">
+  <div class="hosts-bar">{{t common.hosts}}</div>
+  <div class="row-fluid host-link">
+    <div class="span4 align-center">
+      <div><a href="#" class="not-active hosts-tooltip"
+        {{action showHosts view.versionStateMap.not_installed view.content.repositoryVersion view.content.notInstalledHosts target="view"}}>
+        {{view.content.notInstalledHosts.length}}</a></div>
+      <div>{{t admin.stackVersions.version.notInstalled}}</div>
+    </div>
+    <div class="span4 align-center">
+      <div><a href="#" class="not-active hosts-tooltip"
+        {{action showHosts view.versionStateMap.installed view.content.repositoryVersion view.content.installedHosts target="view"}}>
+        {{view.content.installedHosts.length}}</a></div>
+      <div>{{t common.installed}}</div>
+    </div>
+    <div class="span4 align-center">
+      <div><a href="#" class="not-active hosts-tooltip"
+        {{action showHosts view.versionStateMap.current view.content.repositoryVersion view.content.currentHosts target="view"}}>
+        {{view.content.currentHosts.length}}</a></div>
+      <div>{{t common.current}}</div>
+    </div>
   </div>
 </div>

ambari-web/app/templates/main/admin/stack_upgrade/versions.hbs

@@ -18,9 +18,26 @@
 
 
 <div>
-  {{view view.filterView}}
+  <div class="btn-group display-inline-block">
+    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+      <span class="filters-label">{{t common.filter}}: </span>
+            <span>
+              {{view.selectedCategory.label}}
+              <span class="caret"></span>
+            </span>
+    </a>
+    <ul class="dropdown-menu">
+      {{#each category in view.categories}}
+          <li>
+            <a {{action selectCategory category target="view"}} href="#">
+              {{category.label}}
+            </a>
+          </li>
+      {{/each}}
+    </ul>
+  </div>
   {{#isAccessible upgrade_ONLY_ADMIN}}
-    <button class="btn pull-right" {{action goToVersions target="view"}}>{{t admin.stackVersions.manageVersions}}</button>
+    <button class="btn btn-primary pull-right" {{action goToVersions target="view"}}><i class="icon-external-link"></i>&nbsp;{{t admin.stackVersions.manageVersions}}</button>
   {{/isAccessible}}
 </div>
 <div class="row-fluid">

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

@@ -1,28 +0,0 @@
-{{!
-* 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.
-}}
-<span {{bindAttr class="view.hasMoreOs::not-active-link"}} >
-  <a href="#" {{bindAttr class="view.hasMoreOs:os-expander :black"}} {{action toggleOs target="view"}}>
-    <span {{bindAttr class="view.isOsCollapsed:icon-caret-right:icon-caret-down view.hasMoreOs::hide"}}></span>
-    {{view.osText}}
-  </a>
-  {{#if view.hasMoreOs}}
-    <div id="stack-{{view.content.repositoryVersion}}" class="operating-systems">
-      {{{view.labels}}}
-    </div>
-  {{/if}}
-</span>

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

@@ -1,74 +0,0 @@
-{{!
-* 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.
-}}
-{{view App.StackVersionMenuView}}
-<div id="repository_versions">
-  <table class="table advanced-header-table table-bordered table-striped">
-    <thead>
-    {{#view view.sortView classNames="label-row" contentBinding="view.filteredContent"}}
-      {{view view.parentView.repoVersionSort}}
-      {{view view.parentView.osSort}}
-      <th class="action-col">Actions</th>
-    {{/view}}
-
-    <tr class="filter-row">
-      <th class="first repo-version-filter">{{view view.repoVersionFilterView}}</th>
-      <th class="os-type-filter">{{view view.osFilterView}}</th>
-      <th></th>
-    </tr>
-    </thead>
-    <tbody class="services-menu">
-      {{#if view.pageContent}}
-        {{#each item in view.pageContent}}
-          {{#view view.RepositoryVersionView contentBinding="item"}}
-            <td class="first repo-display-name">
-              <a href="#/main/admin/versions/{{unbound view.content.id}}">{{view.content.displayName}}</a>
-            </td>
-            <td class="os-types">
-              {{view App.OperatingSystemsView contentBinding="view.content"}}
-            </td>
-            <td class="repo-version-install">
-              <a href="#" class="btn btn-success" {{action installRepoVersion view.content target="controller"}}>{{t common.install}}</a>
-            </td>
-          {{/view}}
-        {{/each}}
-      {{else}}
-        <tr>
-          <td class="first empty-table" colspan="3">
-            {{t admin.repoVersions.table.empty}}
-          </td>
-        </tr>
-
-      {{/if}}
-    </tbody>
-  </table>
-
-  <div class="page-bar">
-    <div class="filtered-info span4">
-      <label>{{view.filteredContentInfo}} - <a {{action clearFilters target="view"}}
-        href="#">{{t tableView.filters.clearAllFilters}}</a></label>
-    </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.paginationLeft}}
-      {{view view.paginationRight}}
-    </div>
-  </div>
-</div>

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

@@ -1,134 +0,0 @@
-{{!
-* 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.
-}}
-
-<div id="stack-version-details">
-  <a class="breadcrumbs" href="#/main/admin/versions">{{t common.versions}}</a><span>&nbsp; > &nbsp;{{content.displayName}}</span>
-
-  <div class="box">
-    <div class="box-header">
-      <h4>{{t common.status}}</h4>
-    </div>
-    <div class="version-content">
-      <div class="row-fluid">
-        <div class="span7">
-          {{#unless installComplete}}
-            <div class="row-fluid">
-              <div class="span3">{{t admin.stackVersions.details.not.installed.on}}</div>
-              <div {{bindAttr class="view.noInitHosts:not-active-link :span6"}}>
-                <a href="#" class="not-installed-hosts-count"
-                  {{action showNotInstalledHosts target="view"}}>
-                  {{view.notInstalledHosts.length}}&nbsp;
-                  {{pluralize view.notInstalledHosts.length singular="t:admin.stackVersions.details.host" plural="t:admin.stackVersions.details.hosts"}}
-                </a>
-              </div>
-            </div>
-          {{/unless}}
-          <div class="row-fluid">
-            <div class="span3">{{t admin.stackVersions.details.installed.on}}</div>
-            <div {{bindAttr class="view.noInstalledHosts:not-active-link :span6"}}>
-              <a href="#" class="installed-hosts-count"
-                {{action showInstalledHosts target="view"}}>
-                {{view.installedHosts.length}}&nbsp;
-                {{pluralize view.installedHosts.length singular="t:admin.stackVersions.details.host" plural="t:admin.stackVersions.details.hosts"}}
-              </a>
-            </div>
-          </div>
-          <div class="row-fluid">
-            <div class="span3">{{t admin.stackVersions.details.current.on}}</div>
-            <div {{bindAttr class="view.noCurrentHosts:not-active-link :span6"}}>
-              <a href="#" class="current-hosts-count"
-                {{action showCurrentHosts target="view"}}>
-                {{view.currentHosts.length}}&nbsp;
-                {{pluralize view.currentHosts.length singular="t:admin.stackVersions.details.host" plural="t:admin.stackVersions.details.hosts"}}
-              </a>
-            </div>
-          </div>
-        </div>
-        <div class="span5 align-center">
-          {{!show progress when install repo is in progress}}
-          {{#if installInProgress}}
-            <div class="repo-installing-info">
-            <i class="icon-cogs">&nbsp;</i>
-            <a href="javascript:void(null);" id="repo-installing-link" {{action showProgressPopup target="controller"}}>
-              {{t admin.stackVersions.details.hosts.btn.installing}}
-            </a>
-            </div>
-            <div class="progress-striped active progress-info progress repo-installing-progress"><div class="bar" {{bindAttr style="view.progress"}}></div></div>
-          {{/if}}
-          {{!show install/reinstall button}}
-          {{#if notInstalled}}
-            <a {{bindAttr class="view.installButtonClass :btn :stack-status-button"}}
-              {{action installRepoVersion content target="controller"}}>
-              {{view.installButtonMsg}}
-            </a>
-          {{/if}}
-          {{!show success mesasge when install complete}}
-          {{#if installComplete}}
-            <i class="icon-ok">&nbsp;</i>
-            <span>{{t admin.stackVersions.details.hosts.btn.nothing}}</span>&nbsp;&nbsp;
-            {{#if controller.current}}
-              <span class="label label-success">{{t common.current}}</span>
-            {{else}}
-              <a href="#/main/admin/stack">{{t admin.stackVersions.details.hosts.btn.goto.upgrade}}</a>
-            {{/if}}
-          {{/if}}
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="box">
-    <div class="box-header">
-      <h4>{{t common.repositories}}</h4>
-    </div>
-    <div class="version-content">
-      <table class="stack-version-repos">
-        <thead>
-        <tr>
-          <th>
-            {{t common.os}}
-          </th>
-          <th>
-            {{t common.name}}
-          </th>
-          <th>
-            {{t admin.stackVersions.details.base.url}}
-          </th>
-        </tr>
-        </thead>
-        <tbody>
-        {{#each os in content.operatingSystems}}
-          {{#each repo in os.repositories}}
-            <tr>
-              <td>
-                {{os.osType}}
-              </td>
-              <td>
-                {{repo.repoId}}
-              </td>
-              <td>
-                {{view Ember.TextField valueBinding="repo.baseUrl" disabled="disabled"}}
-              </td>
-            </tr>
-          {{/each}}
-        {{/each}}
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>

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

@@ -1,88 +0,0 @@
-{{!
-* 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.
-}}
-{{view App.StackVersionMenuView}}
-<div id="stack_versions">
-  <table class="table advanced-header-table table-bordered table-striped">
-    <thead>
-    {{#view view.sortView classNames="label-row" contentBinding="view.filteredContent"}}
-      {{view view.parentView.stackVersionSort}}
-      {{view view.parentView.osSort}}
-      {{view view.parentView.installedSort}}
-      {{view view.parentView.currentSort}}
-    {{/view}}
-
-    <tr class="filter-row">
-      <th class="first repo-version-filter">{{view view.stackVersionFilterView}}</th>
-      <th class="os-type-filter">{{view view.osFilterView}}</th>
-      <th class="installed-hosts-filter">{{view view.installedFilterView}}</th>
-      <th class="current-hosts-filter">{{view view.currentFilterView}}</th>
-    </tr>
-    </thead>
-    <tbody class="services-menu">
-      {{#if view.pageContent}}
-        {{#each item in view.pageContent}}
-          {{#view view.StackVersionView contentBinding="item"}}
-            <td class="first repo-version">
-              <a href="#/main/admin/versions/{{unbound view.content.repositoryVersion.id}}">{{view.content.repositoryVersion.displayName}}</a>
-            </td>
-            <td class="os-types">
-              {{view App.OperatingSystemsView contentBinding="view.content.repositoryVersion"}}
-            </td>
-            <td class="installed-hosts-count">
-              <span  {{bindAttr class="view.content.noInstalledHosts:not-active-link"}}>
-                <a href="#"
-                  {{action showHosts view.versionStateMap.installed view.content.repositoryVersion.repositoryVersion view.content.installedHosts target="controller"}}>
-                  <span>{{view.content.installedHosts.length}}</span>
-                </a>
-              </span>
-            </td>
-            <td class="current-hosts-count">
-              <span {{bindAttr class="view.content.noCurrentHosts:not-active-link"}}>
-                <a href="#"
-                  {{action showHosts view.versionStateMap.current view.content.repositoryVersion.repositoryVersion view.content.currentHosts target="controller"}}>
-                  <span>{{view.content.currentHosts.length}}</span>
-                </a>
-              </span>
-            </td>
-          {{/view}}
-        {{/each}}
-      {{else}}
-        <tr>
-          <td class="first empty-table" colspan="4">
-            {{t admin.stackVersions.table.empty}}
-          </td>
-        </tr>
-      {{/if}}
-    </tbody>
-  </table>
-
-  <div class="page-bar">
-    <div class="filtered-info span4">
-      <label>{{view.filteredContentInfo}} - <a {{action clearFilters target="view"}}
-        href="#">{{t tableView.filters.clearAllFilters}}</a></label>
-    </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.paginationLeft}}
-      {{view view.paginationRight}}
-    </div>
-  </div>
-</div>

ambari-web/app/views/main/admin/stack_upgrade/upgrade_version_box_view.js

@@ -66,7 +66,7 @@ App.UpgradeVersionBoxView = Em.View.extend({
     } else if (['INIT', 'INSTALL_FAILED', 'OUT_OF_SYNC'].contains(this.get('content.status'))) {
       element.set('isButton', true);
       element.set('text', Em.I18n.t('admin.stackVersions.version.installNow'));
-      element.set('action', 'installRepoVersion');
+      element.set('action', 'installRepoVersionConfirmation');
     } else if (this.get('content.status') === 'INSTALLING') {
       element.set('iconClass', 'icon-cog');
       element.set('isLink', true);
@@ -96,6 +96,11 @@ App.UpgradeVersionBoxView = Em.View.extend({
     return element;
   }.property('content.status'),
 
+  didInsertElement: function(){
+    App.tooltip($('.link-tooltip'), {title: Em.I18n.t('admin.stackVersions.version.linkTooltip')});
+    App.tooltip($('.hosts-tooltip'), {title: Em.I18n.t('admin.stackVersions.version.hostsTooltip')});
+  },
+
   /**
    * run custom action of controller
    * @param {object} event
@@ -113,13 +118,35 @@ App.UpgradeVersionBoxView = Em.View.extend({
    */
   editRepositories: function () {
     var self = this;
-    var repo = App.RepositoryVersion.find(this.get('content.id'));
+    var repoRecord = App.RepositoryVersion.find(this.get('content.id'));
+    //make deep copy of repoRecord
+    var repo = Em.Object.create({
+      displayName: repoRecord.get('displayName'),
+      repositoryVersion: repoRecord.get('displayName'),
+      operatingSystems: repoRecord.get('operatingSystems').map(function(os){
+        return Em.Object.create({
+          osType: os.get('osType'),
+          isSelected: true,
+          repositories: os.get('repositories').map(function (repository) {
+            return Em.Object.create({
+              repoName: repository.get('repoName'),
+              repoId: repository.get('repoId'),
+              baseUrl: repository.get('baseUrl')
+            });
+          })
+        });
+      })
+    });
 
     return App.ModalPopup.show({
+      classNames: ['modal-690px-width', 'repository-list'],
       bodyClass: Ember.View.extend({
         content: repo,
         templateName: require('templates/main/admin/stack_upgrade/edit_repositories'),
-        skipValidation: false
+        skipValidation: false,
+        didInsertElement: function() {
+          App.tooltip($("[rel=skip-validation-tooltip]"), { placement: 'right'});
+        }
       }),
       header: Em.I18n.t('common.repositories'),
       primary: Em.I18n.t('common.save'),
@@ -146,7 +173,8 @@ App.UpgradeVersionBoxView = Em.View.extend({
       return App.ModalPopup.show({
         bodyClass: Ember.View.extend({
           title: Em.I18n.t('admin.stackVersions.hosts.popup.title').format(version, status.label, hosts.length),
-          template: Em.Handlebars.compile('<h4>{{view.title}}</h4><span class="limited-height-2">' + hosts.join('<br/>') + '</span>')
+          hosts: hosts,
+          template: Em.Handlebars.compile('<h4>{{view.title}}</h4><div class="limited-height-2">{{#each view.hosts}}<div>{{this}}</div>{{/each}}</div>')
         }),
         header: Em.I18n.t('admin.stackVersions.hosts.popup.header').format(status.label),
         primary: Em.I18n.t('admin.stackVersions.hosts.popup.primary'),

ambari-web/app/views/main/admin/stack_upgrade/versions_view.js

@@ -33,45 +33,63 @@ App.MainAdminStackVersionsView = Em.View.extend({
   /**
    * @type {Array}
    */
-  filterContent: [
-    {
-      label: Em.I18n.t('common.all'),
-      value: ''
-    },
-    {
-      label: Em.I18n.t('admin.stackVersions.filter.notInstalled'),
-      value: 'NOT_INSTALLED'
-    },
-    {
-      label: Em.I18n.t('common.installed'),
-      value: 'INSTALLED'
-    },
-    {
-      label: Em.I18n.t('admin.stackVersions.filter.upgradeReady'),
-      value: 'UPGRADE_READY'
-    },
-    {
-      label: Em.I18n.t('common.current'),
-      value: 'CURRENT'
-    }
+  categories: [
+    Em.Object.create({
+      labelKey: 'admin.stackVersions.filter.all',
+      value: '',
+      isSelected: true
+    }),
+    Em.Object.create({
+      labelKey: 'admin.stackVersions.filter.notInstalled',
+      value: 'NOT_INSTALLED',
+      isSelected: false
+    }),
+    Em.Object.create({
+      labelKey: 'admin.stackVersions.filter.installed',
+      value: 'INSTALLED',
+      isSelected: false
+    }),
+    Em.Object.create({
+      labelKey: 'admin.stackVersions.filter.upgradeReady',
+      value: 'UPGRADE_READY',
+      isSelected: false
+    }),
+    Em.Object.create({
+      labelKey: 'admin.stackVersions.filter.current',
+      value: 'CURRENT',
+      isSelected: false
+    })
   ],
 
+  didInsertElement: function () {
+    this.observesCategories();
+  },
+
   /**
-   * @type {object}
-   * @default null
+   * update categories labels
    */
-  filterSelected: null,
+  observesCategories: function() {
+    var versions = this.get('versions');
+    this.get('categories').forEach(function (category) {
+      category.set('label', Em.I18n.t(category.labelKey).format(this.filterBy(versions, category).length));
+    }, this);
+  }.observes('versions.@each.status'),
 
   /**
-   * @type {Ember.Select}
-   * @class
+   * select category
+   * @param event
    */
-  filterView: Ember.Select.extend({
-    selectionBinding: 'parentView.filterSelected',
-    contentBinding: 'parentView.filterContent',
-    optionValuePath: "content.value",
-    optionLabelPath: "content.label"
-  }),
+  selectCategory: function (event) {
+    this.get('categories').filterProperty('isSelected').setEach('isSelected', false);
+    event.context.set('isSelected', true);
+  },
+
+  /**
+   * @type {object}
+   */
+  selectedCategory: function(){
+    return this.get('categories').findProperty('isSelected');
+  }.property('categories.@each.isSelected'),
 
   /**
    * @type {Em.Array}
@@ -84,10 +102,10 @@ App.MainAdminStackVersionsView = Em.View.extend({
   stackVersions: App.StackVersion.find(),
 
   /**
+   * formatted versions
    * @type {Array}
    */
-  filteredVersions: function () {
-    var filter = this.get('filterSelected');
+  versions: function () {
     var currentVersion = this.get('controller.currentVersion');
     var versions = this.get('repoVersions').map(function (version) {
       var versionFormatted = Em.Object.create({
@@ -113,26 +131,47 @@ App.MainAdminStackVersionsView = Em.View.extend({
     versions.sort(function (a, b) {
       return stringUtils.compareVersions(a.get('repositoryVersion'), b.get('repositoryVersion'));
     });
+    return versions;
+  }.property('repoVersions.length', 'stackVersions.@each.state'),
+
+  /**
+   * @type {Array}
+   */
+  filteredVersions: function () {
+    return this.filterBy(this.get('versions'), this.get('selectedCategory'))
+  }.property('selectedCategory', 'versions.@each.status'),
 
-    if (filter && filter.value) {
+  /**
+   * filter versions by category
+   * @param versions
+   * @param filter
+   * @return {Array}
+   */
+  filterBy: function (versions, filter) {
+    if (filter && filter.get('value')) {
       return versions.filter(function (version) {
-        if (version.get('status') === 'INSTALLED' && filter.value === 'UPGRADE_READY') {
+        if (version.get('status') === 'INSTALLED' && filter.get('value') === 'UPGRADE_READY') {
           return stringUtils.compareVersions(version.get('repositoryVersion'), currentVersion.repository_version) === 1;
-        } else if (filter.value === 'NOT_INSTALLED') {
+        } else if (filter.get('value') === 'NOT_INSTALLED') {
           return ['INIT', 'INSTALL_FAILED', 'INSTALLING', 'OUT_OF_SYNC'].contains(version.get('status'));
         } else {
-          return version.get('status') === filter.value;
+          return version.get('status') === filter.get('value');
         }
       }, this);
     }
     return versions;
-  }.property('filterSelected', 'repoVersions.length', 'stackVersions.@each.state'),
+  },
 
   /**
    * route to versions in Admin View
    */
   goToVersions: function () {
-    window.location.replace('/views/ADMIN_VIEW/1.0.0/INSTANCE/#/stackVersions');
+    App.showConfirmationPopup(function () {
+      window.location.replace('/views/ADMIN_VIEW/1.0.0/INSTANCE/#/stackVersions');
+    },
+    Em.I18n.t('admin.stackVersions.manageVersions.popup.body'),
+    null,
+    Em.I18n.t('admin.stackVersions.manageVersions'));
   },
 
   /**

ambari-web/test/controllers/main/admin/stack_and_upgrade_controller_test.js

@@ -428,4 +428,38 @@ describe('App.MainAdminStackAndUpgradeController', function() {
       });
     });
   });
+
+  describe("#installRepoVersionConfirmation()", function () {
+    before(function () {
+      sinon.stub(controller, 'installRepoVersion', Em.K);
+    });
+    after(function () {
+      controller.installRepoVersion.restore();
+    });
+    it("show popup", function () {
+      var repo = Em.Object.create({'displayName': 'HDP-2.2'});
+      var popup = controller.installRepoVersionConfirmation(repo);
+      popup.onPrimary();
+      expect(controller.installRepoVersion.calledWith(repo)).to.be.true;
+    });
+  });
+
+  describe("#installRepoVersion()", function () {
+    before(function () {
+      sinon.stub(App.ajax, 'send', Em.K);
+    });
+    after(function () {
+      App.ajax.send.restore();
+    });
+    it("make ajax call", function () {
+      var repo = Em.Object.create({
+        stackVersionType: 'HDP',
+        stackVersionNumber: '2.2',
+        repositoryVersion: '2.2.1',
+        repoId: 1
+      });
+      controller.installRepoVersion(repo);
+      expect(App.ajax.send.calledOnce).to.be.true;
+    });
+  });
 });