AMBARI-14930. Admin Versions: display all existed stack versions in new format. (xiwang)

ambari-web/app/mappers/repository_version_mapper.js

@@ -21,6 +21,7 @@ App.repoVersionMapper = App.QuickDataMapper.create({
   modelRepoVersions: App.RepositoryVersion,
   modelOperatingSystems: App.OS,
   modelRepositories: App.Repository,
+  modelServices: App.ServiceSimple,
 
   modelRepoVersion: function (isCurrentStackOnly) {
     var repoVersionsKey = isCurrentStackOnly ? 'RepositoryVersions' : 'CompatibleRepositoryVersions';
@@ -28,10 +29,16 @@ App.repoVersionMapper = App.QuickDataMapper.create({
       id: repoVersionsKey + '.id',
       stack_version_id: repoVersionsKey + '.stackVersionId',
       display_name: repoVersionsKey + '.display_name',
+      type: repoVersionsKey + '.type',
       repository_version: repoVersionsKey + '.repository_version',
       upgrade_pack: repoVersionsKey + '.upgrade_pack',
       stack_version_type: repoVersionsKey + '.stack_name',
       stack_version_number: repoVersionsKey + '.stack_version',
+      services_key: 'services',
+      services_type: 'array',
+      services: {
+        item: 'id'
+      },
       operating_systems_key: 'operating_systems',
       operating_systems_type: 'array',
       operating_systems: {
@@ -53,6 +60,13 @@ App.repoVersionMapper = App.QuickDataMapper.create({
     }
   },
 
+  modelService: {
+    id: 'id',
+    name: 'name',
+    display_name: 'display_name',
+    latest_version: 'latest_version'
+  },
+
   modelRepository: {
     id: 'id',
     operating_system_id: 'Repositories.operating_system_id',
@@ -71,18 +85,81 @@ App.repoVersionMapper = App.QuickDataMapper.create({
     var modelRepoVersions = this.get('modelRepoVersions');
     var modelOperatingSystems = this.get('modelOperatingSystems');
     var modelRepositories = this.get('modelRepositories');
+    var modelServices = this.get('modelServices');
 
     var resultRepoVersion = [];
     var resultOS = [];
     var resultRepo = [];
+    var resultService = [];
 
     var repoVersionsKey = isCurrentStackOnly ? 'RepositoryVersions' : 'CompatibleRepositoryVersions';
 
     if (json && json.items) {
       json.items.forEach(function (item) {
+        ////////////// to test//////////////
+        item[repoVersionsKey].type = "PATCH";
+        item[repoVersionsKey].release = {
+          "stack_id": "HDP-2.2",
+          "version": "2.2.4.1",
+          "build": "885",
+          "compatible_with": "", /* regex */
+          "release_notes": "http://someurl"
+        };
+        item[repoVersionsKey].services = [
+          {
+            "name": "HDFS",
+            "display_name": "HDFS",
+            "versions": [
+              {
+                "version": "2.1.1",
+                "version_id": "10",
+                "components": [ "NAMENODE"]
+              }
+            ]
+          },
+          {
+            "name": "YARN",
+            "display_name": "YARN",
+            "versions": [
+              {
+                "version": "2.7.1.2.3"
+              }
+            ]
+          },
+          {
+            "name": "ZOOKEEPER",
+            "display_name": "ZooKeeper",
+            "versions": [
+              {
+                "version": "3.4.6.2.3"
+              }
+            ]
+          },
+          {
+            "name": "wrong",
+            "display_name": "MapReduce2",
+            "versions": [
+              {
+                "version": "2.7.1.2.3"
+              }
+            ]
+          },
+          {
+            "name": "AMBARI_METRICS",
+            "display_name": "Ambari Metrics",
+            "versions": [
+              {
+                "version": "0.1.0"
+              }
+            ]
+          }
+        ];
+        //////////////////////////////
+
         if (loadAll || (item[repoVersionsKey] && !App.StackVersion.find().someProperty('repositoryVersion.id', item[repoVersionsKey].id))) {
           var repo = item;
           var osArray = [];
+          var serviceArray = [];
           if (item.operating_systems) {
             item.operating_systems.forEach(function (os) {
               os.id = item[repoVersionsKey].repository_version + os.OperatingSystems.os_type;
@@ -101,7 +178,20 @@ App.repoVersionMapper = App.QuickDataMapper.create({
               resultOS.push(this.parseIt(os, this.get('modelOS')));
             }, this);
           }
+          if (item[repoVersionsKey].services) {
+            item[repoVersionsKey].services.forEach(function (service) {
+              var serviceObj = {
+                id: service.name,
+                name: service.name,
+                display_name: service.display_name,
+                latest_version: service.versions[0] ? service.versions[0].version : ''
+              };
+              serviceArray.pushObject(serviceObj);
+              resultService.push(this.parseIt(serviceObj, this.get('modelService')));
+            }, this);
+          }
           repo.operating_systems = osArray;
+          repo.services = serviceArray;
           resultRepoVersion.push(this.parseIt(repo, this.modelRepoVersion(isCurrentStackOnly)));
         }
       }, this);
@@ -109,6 +199,7 @@ App.repoVersionMapper = App.QuickDataMapper.create({
     App.store.commit();
     App.store.loadMany(modelRepositories, resultRepo);
     App.store.loadMany(modelOperatingSystems, resultOS);
+    App.store.loadMany(modelServices, resultService);
     App.store.loadMany(modelRepoVersions, resultRepoVersion);
   }
 });

ambari-web/app/messages.js

@@ -207,7 +207,9 @@ Em.I18n.translations = {
   'common.stacks': 'Stacks',
   'common.stack': 'Stack',
   'common.reset': 'Reset',
+  'common.resume': 'Resume',
   'common.path': 'Path',
+  'common.patch': 'Patch',
   'common.package': 'Package',
   'common.proceed': 'Proceed',
   'common.proceedAnyway': 'Proceed Anyway',
@@ -1522,6 +1524,9 @@ Em.I18n.translations = {
   'admin.stackVersions.version.upgrade.upgradeOptions.EU.confirm.msg': 'You are about to perform an <b>Express Upgrade</b> from <b>{0}</b> to <b>{1}</b>. This will incur cluster downtime. Are you sure you want to proceed?',
   'admin.stackVersions.version.upgrade.upgradeOptions.RU.confirm.msg': 'You are about to perform a <b>Rolling Upgrade</b> from <b>{0}</b> to <b>{1}</b>. Are you sure you want to proceed?',
 
+  'admin.stackVersions.version.column.showDetails': "Show Details",
+  'admin.stackVersions.version.column.showDetails.title': "Version Details",
+
   'admin.stackVersions.hosts.popup.header.current': "Current",
   'admin.stackVersions.hosts.popup.header.installed': "Installed",
   'admin.stackVersions.hosts.popup.header.not_installed': "Not installed",

ambari-web/app/models.js

@@ -28,6 +28,7 @@ require('models/stack');
 require('models/stack_version/version');
 require('models/stack_version/repository_version');
 require('models/stack_version/os');
+require('models/stack_version/service_simple');
 require('models/stack_version/repository');
 require('models/operating_system');
 require('models/repository');

ambari-web/app/models/stack_version/repository_version.js

@@ -20,13 +20,18 @@ var App = require('app');
 
 App.RepositoryVersion = DS.Model.extend({
   displayName: DS.attr('string'),
+  type: DS.attr('string'), // "PATCH" /* STANDARD, (future: SERVICE) */
   repositoryVersion: DS.attr('string'),
   upgradePack: DS.attr('string'),
   stackVersionType: DS.attr('string'),
   stackVersionNumber: DS.attr('string'),
   operatingSystems: DS.hasMany('App.OS'),
+  services: DS.hasMany('App.ServiceSimple'),
   stackVersion: DS.belongsTo('App.StackVersion'),
   stack: Em.computed.concat(' ', 'stackVersionType', 'stackVersionNumber'),
+  displayNameSimple: function() {
+    return this.get('stackVersionType') + '-' + this.get('repositoryVersion').split('-')[0];
+  }.property('stackVersionType', 'repositoryVersion'),
 
   /**
    * status used until corresponding stack version get created
@@ -105,4 +110,3 @@ App.RepositoryVersion = DS.Model.extend({
 });
 
 App.RepositoryVersion.FIXTURES = [];
-

ambari-web/app/models/stack_version/service_simple.js

@@ -0,0 +1,28 @@
+/**
+ * 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.ServiceSimple = DS.Model.extend({
+  id: DS.attr('string'),
+  name: DS.attr('string'),
+  displayName: DS.attr('string'),
+  latestVersion: DS.attr('string')
+});
+
+App.ServiceSimple.FIXTURES = [];

ambari-web/app/styles/stack_versions.less

@@ -127,8 +127,43 @@
     }
   }
 }
+.version-box-popup {
+  .modal{
+    max-height: 563px;
+    max-width: 340px;
+    margin: -250px 0 0 -180px;
+  }
+  .version-box-in-popup.version-box {
+    max-width: 300px;
+    .hosts-section {
+      padding-bottom: 16px;
+    }
+  }
+}
 
-#stack-upgrade-page {
+#stack-upgrade-page,
+.version-box-popup {
+  .versions-slides {
+    overflow-x: scroll;
+    padding-bottom: 25px;
+    margin-left: 0px;
+    margin-top: 5px;
+    background-color: #f5f5f5;
+    border: 2px solid #f5f5f5;
+    border-left: none;
+    .versions-slides-bar {
+      min-width: 1000px;
+      max-width: 20000px;
+    }
+  }
+  .left-menu-table {
+    padding: 10px 1px;
+    margin-top: 87px;
+    td.service-display-name {
+      border: 2px solid #e4e4e4;
+      border-left: none;
+    }
+  }
   div.current-version-box {
     background: none repeat scroll 0 0 #e6f1f6;
     box-shadow: 0 8px 6px -6px black;
@@ -226,6 +261,81 @@
       font-size: 12px;
     }
   }
+  .version-column {
+    min-height: 500px;
+    width: 115px;
+    margin: 15px 7px 0px 7px;
+    .version-column-display-name {
+      color: #000;
+      text-align: center;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 18px;
+      padding: 5px 5px;
+      margin-bottom: 0px;
+    }
+    .version-column-show-details {
+      text-align: center;
+      font-size: 13px;
+      padding: 5px 5px;
+      border-bottom: 1px solid #e4e4e4;
+      margin-bottom: 0px;
+      a {
+        cursor: pointer;
+      }
+    }
+    .state {
+      margin: 5px 0px 15px 0px;
+      line-height: 20px;
+      .label-success {
+        line-height: 30px;
+      }
+      .btn.btn-primary:not(.dropdown-toggle) {
+        padding: 4px 5px;
+        min-width: 70px;
+      }
+      .open .dropdown-menu {
+        min-width: 90px;
+      }
+    }
+    .state.installing {
+      padding-bottom: 5px;
+      margin: 10px 0px;
+    }
+    .services-section {
+      width: 100%;
+      text-align: center;
+      padding-bottom: 4px;
+      .service-version-info {
+        margin-bottom: 16px;
+        span.label {
+          padding: 5px 15px;
+          background-color: #a3a3a3;
+          z-index: 100;
+          position: relative;
+        }
+      }
+      .line-separator{
+        height: 2px;
+        background: #e4e4e4;
+        position: relative;
+        top: -25px;
+        margin: 0px -15px 0px -15px;
+      }
+
+    }
+  }
+  div.current-version-box.version-column {
+    .services-section{
+      .service-version-info {
+        span.label {
+          background-color: #468847;
+        }
+      }
+    }
+
+
+  }
 }
 
 #stack-upgrade-dialog {

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

@@ -27,6 +27,10 @@
   </a>
 </p>
 <p class="repository-name">({{view.content.repositoryVersion}})</p>
+{{#if view.isPatch}}
+  <p class="patch-icon"></p>
+{{/if}}
+
 <div {{bindAttr class="view.stateElement.isInstalling:installing :align-center :state"}}>
   {{#if view.stateElement.isButton}}
     <button class="btn btn-primary"

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

@@ -0,0 +1,86 @@
+{{!
+* 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.
+}}
+
+{{#if view.isOutOfSync}}
+  <i class="icon-exclamation-sign out-of-sync-badge"></i>
+{{/if}}
+
+<p class="version-column-display-name">
+  <span>{{view.content.displayNameSimple}}</span>
+</p>
+
+<p class="version-column-show-details">
+  <a {{action openVersionBoxPopup target="view"}}>{{t admin.stackVersions.version.column.showDetails}}</a>
+</p>
+<div {{bindAttr class="view.stateElement.isInstalling:installing :align-center :state"}}>
+  {{#if view.stateElement.isButton}}
+    <button class="btn btn-primary"
+      {{action runAction target="view"}}
+      {{bindAttr disabled="view.stateElement.isDisabled"}}>
+      {{view.stateElement.text}}
+    </button>
+ {{/if}}
+  {{#if view.stateElement.isButtonGroup}}
+    <div class="btn-group">
+      <button class="btn btn-primary"
+        {{action runAction target="view"}}
+        {{bindAttr disabled="view.stateElement.isDisabled"}}>
+        {{view.stateElement.text}}
+      </button>
+      <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" {{bindAttr disabled="view.stateElement.isDisabled"}}>
+        <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu">
+        {{#each button in view.stateElement.buttons}}
+          <li {{bindAttr class="button.isDisabled:disabled"}}>
+            <a {{action runAction button.action target="view"}}>
+              {{button.text}}
+            </a>
+          </li>
+        {{/each}}
+      </ul>
+    </div>
+  {{/if}}
+  {{#if view.stateElement.isLabel}}
+      <span {{bindAttr class="view.stateElement.class"}}>{{view.stateElement.text}}</span>
+  {{/if}}
+  {{#if view.stateElement.isLink}}
+    {{#if view.stateElement.iconClass}}
+        <i {{bindAttr class="view.stateElement.iconClass"}}></i>
+    {{/if}}
+      <a href="#" {{action runAction target="view"}}>{{view.stateElement.text}}</a>
+    {{#if view.stateElement.isInstalling}}
+      {{view App.ProgressBarView
+          progressBinding="view.installProgress"
+          statusBinding="view.PROGRESS_STATUS"
+          }}
+    {{/if}}
+  {{/if}}
+  {{#if view.stateElement.isSpinner}}
+    {{view App.SpinnerView}}
+  {{/if}}
+</div>
+
+<div class="services-section">
+  {{#each service in view.services}}
+    <p class="service-version-info">
+       <span {{bindAttr class="service.isVersionInvisible:invisible :label"}}>{{service.latestVersion}}</span>
+    </p>
+    <div class="line-separator"></div>
+  {{/each}}
+</div>

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

@@ -16,23 +16,22 @@
 * limitations under the License.
 }}
 
-
-<div>
+<div id="versions-filter-section">
   <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>
+        <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>
+        <li>
+          <a {{action selectCategory category target="view"}} href="#">
+            {{category.label}}
+          </a>
+        </li>
       {{/each}}
     </ul>
   </div>
@@ -42,14 +41,32 @@
     </button>
   {{/isAuthorized}}
 </div>
-<div class="row-fluid">
-  {{#if isLoaded}}
-    {{#each version in view.repoVersions}}
-      {{#if version.isVisible}}
-        {{view App.UpgradeVersionBoxView contentBinding="version"}}
-      {{/if}}
-    {{/each}}
-  {{else}}
-    {{view App.SpinnerView}}
-  {{/if}}
-</div>
+<div id="versions-section" class="row-fluid">
+  <div class="span2 left-menu-table">
+    <table class="table">
+      <thead>
+        <tr><th>{{t common.default}}</th></tr>
+      </thead>
+      <tbody>
+        {{#each service in view.services}}
+          <tr>
+            <td class="service-display-name">{{service.displayName}}</td>
+          </tr>
+        {{/each}}
+      </tbody>
+    </table>
+  </div>
+  <div class="span10 versions-slides">
+    {{#if isLoaded}}
+      <div class="versions-slides-bar">
+        {{#each version in view.repoVersions}}
+          {{#if version.isVisible}}
+            {{view App.UpgradeVersionColumnView contentBinding="version"}}
+          {{/if}}
+        {{/each}}
+      </div>
+    {{else}}
+      {{view App.SpinnerView}}
+    {{/if}}
+  </div>
+</div>

ambari-web/app/utils/host_progress_popup.js

@@ -482,8 +482,8 @@ App.HostPopup = Em.Object.create({
       barColor: status[2],
       isInProgress: status[3],
       barWidth: "width:" + service.progress + "%;",
-      sourceRequestScheduleId: service.get('sourceRequestScheduleId'),
-      contextCommand: service.get('contextCommand')
+      sourceRequestScheduleId: service.sourceRequestScheduleId,
+      contextCommand: service.contextCommand
     });
   },
 

ambari-web/app/views.js

@@ -181,6 +181,7 @@ require('views/main/admin/highAvailability/rangerAdmin/step4_view');
 require('views/main/admin/serviceAccounts_view');
 require('views/main/admin/stack_upgrade/upgrade_wizard_view');
 require('views/main/admin/stack_upgrade/upgrade_version_box_view');
+require('views/main/admin/stack_upgrade/upgrade_version_column_view');
 require('views/main/admin/stack_upgrade/upgrade_group_view');
 require('views/main/admin/stack_upgrade/upgrade_task_view');
 require('views/main/admin/stack_upgrade/services_view');

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

@@ -171,18 +171,18 @@ App.UpgradeVersionBoxView = Em.View.extend({
         var isDisabled = !App.isAuthorized('CLUSTER.UPGRADE_DOWNGRADE_STACK') || this.get('controller.requestInProgress') || isInstalling;
         element.set('isButtonGroup', true);
         if (status === 'OUT_OF_SYNC') {
-          element.set('text', Em.I18n.t('admin.stackVersions.version.reinstall'));
+          element.set('text', this.get('isVersionColumnView') ? Em.I18n.t('common.reinstall') : Em.I18n.t('admin.stackVersions.version.reinstall'));
           element.set('action', 'installRepoVersionConfirmation');
           element.get('buttons').pushObject({
-            text: Em.I18n.t('admin.stackVersions.version.performUpgrade'),
+            text: this.get('isVersionColumnView') ? Em.I18n.t('common.upgrade') : Em.I18n.t('admin.stackVersions.version.performUpgrade'),
             action: 'confirmUpgrade',
             isDisabled: isDisabled
           });
         } else {
-          element.set('text', Em.I18n.t('admin.stackVersions.version.performUpgrade'));
+          element.set('text', this.get('isVersionColumnView') ? Em.I18n.t('common.upgrade') : Em.I18n.t('admin.stackVersions.version.performUpgrade'));
           element.set('action', 'confirmUpgrade');
           element.get('buttons').pushObject({
-            text: Em.I18n.t('admin.stackVersions.version.reinstall'),
+            text: this.get('isVersionColumnView') ? Em.I18n.t('common.reinstall') : Em.I18n.t('admin.stackVersions.version.reinstall'),
             action: 'installRepoVersionConfirmation',
             isDisabled: isDisabled
           });
@@ -217,7 +217,8 @@ App.UpgradeVersionBoxView = Em.View.extend({
     }
     else if (isAborted) {
       element.setProperties(statePropertiesMap['SUSPENDED']);
-      element.set('text', this.get('controller.isDowngrade') ? Em.I18n.t('admin.stackUpgrade.dialog.resume.downgrade') : Em.I18n.t('admin.stackUpgrade.dialog.resume'));
+      var text = this.get('controller.isDowngrade') ? Em.I18n.t('admin.stackUpgrade.dialog.resume.downgrade') : Em.I18n.t('admin.stackUpgrade.dialog.resume');
+      element.set('text', this.get('isVersionColumnView') ? Em.I18n.t('common.resume'): text);
       element.set('isDisabled', this.get('controller.requestInProgress'));
     }
     return element;
@@ -243,6 +244,10 @@ App.UpgradeVersionBoxView = Em.View.extend({
     }, 1000);
   },
 
+  isPatch: function() {
+    return this.get('content.type') == "PATCH";
+  }.property('content.type'),
+
   /**
    * run custom action of controller
    */
@@ -274,7 +279,7 @@ App.UpgradeVersionBoxView = Em.View.extend({
 
     return stackVersion; 
   },
-  
+
   /**
    * show popup with repositories to edit
    * @return {App.ModalPopup}

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

@@ -0,0 +1,106 @@
+/**
+ * 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');
+var stringUtils = require('utils/string_utils');
+
+App.UpgradeVersionColumnView = App.UpgradeVersionBoxView.extend({
+  templateName: require('templates/main/admin/stack_upgrade/upgrade_version_column'),
+  isVersionColumnView: true,
+  classNames: ['version-column'],
+
+  didInsertElement: function () {
+    App.tooltip($('.link-tooltip'), {title: Em.I18n.t('admin.stackVersions.version.linkTooltip')});
+    App.tooltip($('.out-of-sync-badge'), {title: Em.I18n.t('hosts.host.stackVersions.status.out_of_sync')});
+  },
+
+  services: function() {
+    var repoRecord = App.RepositoryVersion.find(this.get('content.id'));
+    var originalServices = repoRecord.get('services');
+    // sort the services in the order the same as service menu
+    var sorted = App.Service.find().map(function (service) {
+      var latestVersion = '';
+      if (originalServices.someProperty('name', service.get('serviceName'))){
+        latestVersion = originalServices.filterProperty('name', service.get('serviceName'))[0].get('latestVersion');
+      }
+      return Em.Object.create({
+        displayName: service.get('displayName'),
+        name: service.get('serviceName'),
+        latestVersion: latestVersion,
+        isVersionInvisible: latestVersion == false
+      });
+    });
+    return sorted;
+  }.property(),
+
+  /**
+   * map of properties which correspond to particular state of Upgrade version
+   * @type {object}
+   */
+  statePropertiesMap: {
+    'CURRENT': {
+      isLabel: true,
+      text: Em.I18n.t('common.current'),
+      class: 'label label-success'
+    },
+    'INIT': {
+      isButton: true,
+      text: Em.I18n.t('common.install'),
+      action: 'installRepoVersionConfirmation'
+    },
+    'LOADING': {
+      isSpinner: true,
+      class: 'spinner'
+    },
+    'INSTALLING': {
+      iconClass: 'icon-cog',
+      isLink: true,
+      text: Em.I18n.t('hosts.host.stackVersions.status.installing'),
+      action: 'showProgressPopup'
+    },
+    'INSTALLED': {
+      iconClass: 'icon-ok',
+      isLink: true,
+      text: Em.I18n.t('common.installed'),
+      action: null
+    },
+    'SUSPENDED': {
+      isButton: true,
+      text: Em.I18n.t('admin.stackUpgrade.dialog.resume'),
+      action: 'resumeUpgrade'
+    }
+  },
+
+  openVersionBoxPopup: function (event) {
+    var content = this.get('content');
+    var parentView = this.get('parentView');
+
+    return App.ModalPopup.show({
+      classNames: ['version-box-popup'],
+      bodyClass: App.UpgradeVersionBoxView.extend({
+        classNames: ['version-box-in-popup'],
+        content: content,
+        parentView: parentView
+      }),
+      header: Em.I18n.t('admin.stackVersions.version.column.showDetails.title'),
+      primary: Em.I18n.t('common.dismiss'),
+      secondary: null
+    });
+  }
+});
+

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

@@ -30,6 +30,11 @@ App.MainAdminStackVersionsView = Em.View.extend({
    */
   updateTimer: null,
 
+  /**
+   * @type {Array}
+   */
+  services: App.Service.find(),
+
   /**
    * Not Installed = the version is not installed or out of sync
    * Upgrade Ready = the version is installed and ready for upgrade