AMBARI-9299 Versions: UI cleanup. (atkach)

ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css

@@ -1299,7 +1299,7 @@ accordion .panel-group .panel{
 }
 
 .status-installed {
-  background-color: orangered;
+  background-color: #999;
 }
 
 .repo-version-select {

ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/stackVersionPage.html

@@ -24,7 +24,7 @@
   </ol>
 
   <div class="pull-right top-margin-4" ng-switch="deleteEnabled"  ng-if="editController">
-    <button ng-switch-when="false" class="btn disabled btn-default" tooltip="Cannot Delete Static Instances">Deregister
+    <button ng-switch-when="false" class="btn disabled btn-default" tooltip="Cannot delete version already installed.">Deregister
       Version
     </button>
     <button ng-switch-when="true" class="btn btn-danger" ng-click="delete()">Deregister Version
@@ -86,7 +86,7 @@
           <div class="form-group" ng-class="{'has-error': repository.hasError }" ng-repeat="repository in os.repositories">
             <div class="col-sm-3"><label class="control-label">{{repository.Repositories.repo_name}}</label></div>
             <div class="col-sm-9"><input type="text" class="form-control" ng-model="repository.Repositories.base_url"
-                                         ng-change="clearError()"></div>
+                                         ng-change="clearError()" ng-disabled="!os.selected"></div>
           </div>
         </div>
       </div>

ambari-web/app/assets/data/background_operations/list_on_start.json

@@ -12,14 +12,14 @@
         "end_time" : 1420733166162,
         "exclusive" : false,
         "failed_task_count" : 0,
-        "id" : 17,
+        "id" : 1,
         "inputs" : null,
         "operation_level" : null,
-        "progress_percent" : 100.0,
+        "progress_percent" : 50.0,
         "queued_task_count" : 0,
         "request_context" : "Distribute repositories/install packages",
         "request_schedule" : null,
-        "request_status" : "COMPLETED",
+        "request_status" : "IN_PROGRESS",
         "resource_filters" : [ ],
         "start_time" : 1420732929071,
         "task_count" : 3,
@@ -137,7 +137,7 @@
         "end_time" : 1420801992902,
         "exclusive" : false,
         "failed_task_count" : 0,
-        "id" : 22,
+        "id" : 12,
         "inputs" : null,
         "operation_level" : null,
         "progress_percent" : 100.0,
@@ -187,7 +187,7 @@
         "end_time" : 1420802467535,
         "exclusive" : false,
         "failed_task_count" : 0,
-        "id" : 24,
+        "id" : 13,
         "inputs" : null,
         "operation_level" : null,
         "progress_percent" : 100.0,

ambari-web/app/assets/data/hosts/HDP2/hosts.json

@@ -27,7 +27,8 @@
             {
               "RepositoryVersions" : {
                 "id" : 1,
-                "repository_version" : "2.2.0.1-885"
+                "repository_version" : "2.2.0.1-885",
+                "display_name" : "HDP-2.2.0.1-885"
               }
             }
           ]
@@ -45,7 +46,8 @@
             {
               "RepositoryVersions" : {
                 "id" : 2,
-                "repository_version" : "2.2.1.1-885"
+                "repository_version" : "2.2.1.1-885",
+                "display_name" : "HDP-2.2.1.1-885"
               }
             }
           ]
@@ -56,14 +58,15 @@
             "host_name" : "dev01.hortonworks.com",
             "id" : 3,
             "stack" : "HDP",
-            "state" : "INIT",
+            "state" : "OUT_OF_SYNC",
             "version" : "2.2"
           },
           "repository_versions" : [
             {
               "RepositoryVersions" : {
                 "id" : 3,
-                "repository_version" : "2.2.2.1-885"
+                "repository_version" : "2.2.2.1-885",
+                "display_name" : "HDP-2.2.2.1-885"
               }
             }
           ]
@@ -81,7 +84,8 @@
             {
               "RepositoryVersions" : {
                 "id" : 4,
-                "repository_version" : "2.2.3.1-885"
+                "repository_version" : "2.2.3.1-885",
+                "display_name" : "HDP-2.2.3.1-885"
               }
             }
           ]
@@ -99,7 +103,8 @@
             {
               "RepositoryVersions" : {
                 "id" : 6,
-                "repository_version" : "2.2.4.1-885"
+                "repository_version" : "2.2.4.1-885",
+                "display_name" : "HDP-2.2.4.1-885"
               }
             }
           ]

ambari-web/app/controllers/global/update_controller.js

@@ -159,7 +159,9 @@ App.UpdateController = Em.Controller.extend({
       'host_components/HostRoles/stale_configs,host_components/HostRoles/service_name,host_components/HostRoles/desired_admin_state,' +
         'metrics/disk,metrics/load/load_one,Hosts/total_mem<hostAuxiliaryInfo><stackVersions>&minimal_response=true';
     var hostAuxiliaryInfo = ',Hosts/os_arch,Hosts/os_type,metrics/cpu/cpu_system,metrics/cpu/cpu_user,metrics/memory/mem_total,metrics/memory/mem_free';
-    var stackVersionInfo = ',stack_versions/HostStackVersions,stack_versions/repository_versions/RepositoryVersions/repository_version,stack_versions/repository_versions/RepositoryVersions/id';
+    var stackVersionInfo = ',stack_versions/HostStackVersions,' +
+      'stack_versions/repository_versions/RepositoryVersions/repository_version,stack_versions/repository_versions/RepositoryVersions/id,' +
+      'stack_versions/repository_versions/RepositoryVersions/display_name';
     realUrl = realUrl.replace("<stackVersions>", (App.get('supports.stackUpgrade') ? stackVersionInfo : ""));
 
     if (App.router.get('currentState.name') == 'index' && App.router.get('currentState.parentState.name') == 'hosts') {

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

@@ -124,13 +124,8 @@ App.MainHostController = Em.ArrayController.extend(App.TableServerMixin, {
       type: 'MULTIPLE'
     },
     {
-      name: 'repositoryVersion',
-      key: 'stack_versions/repository_versions/RepositoryVersions/repository_version',
-      type: 'EQUAL'
-    },
-    {
-      name: 'hostStackVersionState',
-      key: 'stack_versions/HostStackVersions/state',
+      name: 'hostStackVersion',
+      key: 'stack_versions',
       type: 'EQUAL'
     }
   ],
@@ -938,8 +933,6 @@ App.MainHostController = Em.ArrayController.extend(App.TableServerMixin, {
     associations[9] = 'componentsInPassiveStateCount';
     associations[10] = 'selected';
     associations[11] = 'hostStackVersion';
-    associations[12] = 'repositoryVersion';
-    associations[13] = 'hostStackVersionState';
     return associations;
   }.property()
 

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

@@ -1832,6 +1832,20 @@ App.MainHostDetailsController = Em.Controller.extend({
     console.warn('Error during executing custom command');
   },
 
+  /**
+   * show popup confirmation of version installation
+   * @param event
+   */
+  installVersionConfirmation: function (event) {
+    var self = this;
+
+    return App.showConfirmationPopup(function () {
+        self.installVersion(event);
+      },
+      Em.I18n.t('hosts.host.stackVersions.install.confirmation').format(event.context.get('displayName'))
+    );
+  },
+
   /**
    * install HostStackVersion on host
    * @param {object} event
@@ -1857,5 +1871,10 @@ App.MainHostDetailsController = Em.Controller.extend({
    */
   installVersionSuccessCallback: function (data, opt, params) {
     App.HostStackVersion.find(params.version.get('id')).set('status', 'INSTALLING');
+    App.db.set('repoVersionInstall', 'id', [data.Requests.id]);
+    App.clusterStatus.setClusterStatus({
+      wizardControllerName: this.get('name'),
+      localdb: App.db.data
+    });
   }
 });

ambari-web/app/mappers/hosts_mapper.js

@@ -70,6 +70,7 @@ App.hostsMapper = App.QuickDataMapper.create({
     stack: 'HostStackVersions.stack',
     repo_id: 'repository_versions[0].RepositoryVersions.id',
     repo_version: 'repository_versions[0].RepositoryVersions.repository_version',
+    display_name: 'repository_versions[0].RepositoryVersions.display_name',
     version: 'HostStackVersions.version',
     status: 'HostStackVersions.state',
     host_name: 'host_name',

ambari-web/app/messages.js

@@ -1992,6 +1992,7 @@ Em.I18n.translations = {
   'hosts.host.stackVersions.status.out_of_sync': 'Out of sync',
   'hosts.host.stackVersions.status.upgrading': 'Upgrading',
   'hosts.host.stackVersions.status.upgrade_failed': 'Upgrade Failed',
+  'hosts.host.stackVersions.install.confirmation': 'You are about to install version <b>{0}</b> on this host.',
 
   'hosts.host.metrics.dataUnavailable':'Data Unavailable',
   'hosts.host.metrics.cpu':'CPU Usage',

ambari-web/app/mixins/common/table_server_view_mixin.js

@@ -65,26 +65,7 @@ App.TableServerViewMixin = Em.Mixin.create({
       return a.get('index') - b.get('index');
     });
   }.property('filteredContent'),
-  /**
-   * compute applied filters and run content update from server
-   * @param filterObjects
-   */
-  updateFilters: function(filterObjects) {
-    this.set('controller.resetStartIndex', false);
-    filterObjects.forEach(function(filterObject) {
-      this.saveFilterConditions(filterObject.iColumn, filterObject.value, filterObject.type, false);
-    }, this);
-    if (!this.get('filteringComplete')) {
-      clearTimeout(this.get('timeOut'));
-      this.set('timeOut', setTimeout(function () {
-        self.updateFilters(filterObjects);
-      }, this.get('filterWaitingTime')));
-    } else {
-      clearTimeout(this.get('timeOut'));
-      this.set('controller.resetStartIndex', true);
-      this.refresh();
-    }
-  },
+
   /**
    * compute applied filter and run content update from server
    * @param iColumn

ambari-web/app/models/host_stack_version.js

@@ -23,19 +23,40 @@ App.HostStackVersion = DS.Model.extend({
   version: DS.attr('string'),
   repo: DS.belongsTo('App.Repository'),
   repoVersion: DS.attr('string'),
+  displayName: DS.attr('string'),
 
   /**
    * possible property value defined at App.HostStackVersion.statusDefinition
+   * @type {string}
    */
   status: DS.attr('string'),
   host: DS.belongsTo('App.Host'),
   hostName: DS.attr('string'),
+
+  /**
+   * @type {boolean}
+   */
   isCurrent: function () {
     return this.get('status') === 'CURRENT'
   }.property('status'),
+
+  /**
+   * @type {boolean}
+   */
+  isInstalling: function () {
+    return this.get('status') === 'INSTALLING';
+  }.property('status'),
+
+  /**
+   * @type {string}
+   */
   displayStatus: function() {
     return App.HostStackVersion.formatStatus(this.get('status'));
   }.property('status'),
+
+  /**
+   * @type {boolean}
+   */
   installEnabled: function () {
     return ['OUT_OF_SYNC', 'INSTALL_FAILED'].contains(this.get('status'));
   }.property('status'),

ambari-web/app/styles/application.less

@@ -3016,7 +3016,7 @@ table.graphs {
     .col8,
     td:first-child + td + td + td + td + td + td + td + td,
     th:first-child + th + th + th + th + th + th + th + th{
-      width: 10%!important;
+      width: 9%!important;
     }
 
     .col9,
@@ -3028,7 +3028,7 @@ table.graphs {
     .col10,
     td:first-child + td + td + td + td + td + td + td + td + td + td,
     th:first-child + th + th + th + th + th + th + th + th + th + th{
-      width: 15%!important;
+      width: 16%!important;
     }
 
     .col11,

ambari-web/app/styles/stack_versions.less

@@ -147,6 +147,7 @@
       margin: 15px 0;
       line-height: 30px;
       padding-top: 5px;
+      height: 30px;
       i {
         color: #0088cc;
         font-size: 16px;
@@ -156,6 +157,16 @@
         font-size: 14px;
       }
     }
+    .installing {
+      margin-top: 0;
+      padding-top: 0;
+      padding-bottom: 10px;
+      .progress {
+        height: 15px;
+        width: 60%;
+        margin: 0 20%;
+      }
+    }
     .host-link a {
       color: #0088cc;
       font-size: 14px;
@@ -183,7 +194,7 @@
       text-align: center;
       background: #f8f8f8;
       border-top: 1px solid #e4e4e4;
-      padding-bottom: 3px
+      padding-bottom: 4px;
     }
     .hosts-section .hosts-bar {
       font-size: 14px;
@@ -237,14 +248,11 @@
 }
 
 .repository-list {
-  .modal {
-    padding: 10px!important;
-  }
   .os-block {
     border-top: 1px solid #dddddd;
     padding-top: 10px;
   }
   input[type="text"] {
-    width: 100%;
+    width: 97%;
   }
 }

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

@@ -32,13 +32,13 @@
 {{#each os in view.content.operatingSystems}}
   <div class="row-fluid os-block">
     <div class="span2">
-      {{view view.OSCheckBox osBinding="os"}}&nbsp;{{os.osType}}
+      {{os.osType}}
     </div>
   <div class="span10">
   {{#each repository in os.repositories}}
     <div class="row-fluid">
       <div class="span3">{{repository.repoName}}</div>
-      <div {{bindAttr class="repository.hasError:error :control-group :span9"}}>{{view App.BaseUrlTextField repositoryBinding="repository" disabledBinding="os.isDisabled"}}</div>
+      <div {{bindAttr class="repository.hasError:error :control-group :span9"}}>{{view App.BaseUrlTextField repositoryBinding="repository"}}</div>
         </div>
       {{/each}}
     </div>

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

@@ -22,7 +22,7 @@
     <i class="icon-edit"></i>
   </a>
 </p>
-<p class="align-center state">
+<div {{bindAttr class="view.stateElement.isInstalling:installing :align-center :state"}}>
   {{#if view.stateElement.isButton}}
     <button class="btn btn-primary" {{action runAction view.stateElement target="view"}}>{{view.stateElement.text}}</button>
   {{/if}}
@@ -34,8 +34,14 @@
       <i {{bindAttr class="view.stateElement.iconClass"}}></i>
     {{/if}}
     <a href="#" {{action runAction view.stateElement target="view"}}>{{view.stateElement.text}}</a>
+    {{#if view.stateElement.isInstalling}}
+      {{view App.ProgressBarView
+        progressBinding="view.installProgress"
+        statusBinding="view.PROGRESS_STATUS"
+      }}
+    {{/if}}
   {{/if}}
-</p>
+</div>
 
 <div class="hosts-section">
   <div class="hosts-bar">{{t common.hosts}}</div>

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

@@ -40,12 +40,16 @@
           {{#if this.isCurrent}}
             <span class="label label-success">{{t common.current}}</span>
           {{else}}
-            {{this.displayStatus}}
+            {{#if this.isInstalling}}
+              <a href="#" {{action showInstallProgress this target="view"}}><i class="icon-cog in_progress"></i>&nbsp;{{this.displayStatus}}</a>
+            {{else}}
+              {{this.displayStatus}}
+            {{/if}}
           {{/if}}
         </td>
         <td class="install-repo-version align-center">
           {{#isAccessible ADMIN}}
-            <button class="btn" {{action installVersion this target="controller"}} {{bindAttr disabled="this.installDisabled"}}><i class="icon-off"></i>&nbsp;{{t common.install}}</button>
+            <button class="btn" {{action installVersionConfirmation this target="controller"}} {{bindAttr disabled="this.installDisabled"}}><i class="icon-off"></i>&nbsp;{{t common.install}}</button>
           {{/isAccessible}}
         </td>
       </tr>

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

@@ -25,6 +25,22 @@ App.UpgradeVersionBoxView = Em.View.extend({
   classNames: ['span4', 'version-box'],
   classNameBindings: ['versionClass'],
 
+  /**
+   * @type {string}
+   * @constant
+   */
+  PROGRESS_STATUS: 'IN_PROGRESS',
+
+  /**
+   * progress of version installation
+   * @type {number}
+   */
+  installProgress: function() {
+    var requestId = App.get('testMode') ? 1 : App.db.get('repoVersionInstall', 'id')[0];
+    var installRequest = App.router.get('backgroundOperationsController.services').findProperty('id', requestId);
+    return (installRequest) ? installRequest.get('progress') : 0;
+  }.property('App.router.backgroundOperationsController.services.@each.progress'),
+
   versionClass: function () {
     return this.get('content.status') == 'CURRENT'
       ? 'current-version-box' : '';
@@ -63,8 +79,13 @@ App.UpgradeVersionBoxView = Em.View.extend({
   stateElement: function () {
     var currentVersion = this.get('controller.currentVersion');
     var upgradeVersion = this.get('controller.upgradeVersion');
-    var element = Em.Object.create();
     var status = this.get('content.status');
+    var element = Em.Object.create({
+      status: status,
+      isInstalling: function () {
+        return this.get('status') === 'INSTALLING';
+      }.property('status')
+    });
 
     if (status === 'CURRENT') {
       element.set('isLabel', true);
@@ -88,6 +109,7 @@ App.UpgradeVersionBoxView = Em.View.extend({
         element.set('iconClass', 'icon-ok');
         element.set('isLink', true);
         element.set('text', Em.I18n.t('common.installed'));
+        element.set('action', null);
       }
     } else if (['UPGRADING', 'UPGRADE_FAILED', 'UPGRADED'].contains(status)) {
       element.set('isLink', true);
@@ -136,7 +158,6 @@ App.UpgradeVersionBoxView = Em.View.extend({
         return Em.Object.create({
           osType: os.get('osType'),
           isSelected: true,
-          isDisabled: Ember.computed.not('isSelected'),
           repositories: os.get('repositories').map(function (repository) {
             return Em.Object.create({
               repoName: repository.get('repoName'),
@@ -152,6 +173,7 @@ App.UpgradeVersionBoxView = Em.View.extend({
     return App.ModalPopup.show({
       classNames: ['repository-list', 'sixty-percent-width-modal'],
       skipValidation: false,
+      autoHeight: false,
       hasErrors: false,
       bodyClass: Ember.View.extend({
         content: repo,
@@ -170,16 +192,7 @@ App.UpgradeVersionBoxView = Em.View.extend({
         templateName: require('templates/main/admin/stack_upgrade/edit_repositories'),
         didInsertElement: function () {
           App.tooltip($("[rel=skip-validation-tooltip]"), {placement: 'right'});
-        },
-        OSCheckBox: Ember.Checkbox.extend({
-          classNames: ["align-checkbox"],
-
-          checkedBinding: "os.isSelected",
-
-          change: function () {
-            this.get('os.repositories').setEach('hasError', false);
-          }
-        })
+        }
       }),
       header: Em.I18n.t('common.repositories'),
       primary: Em.I18n.t('common.save'),

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

@@ -1014,7 +1014,6 @@ App.MainHostView = App.TableView.extend(App.TableServerViewMixin, {
       value: [],
 
       versionSelectView: filters.createSelectView({
-        column: 12,
         classNames: ['notActive'],
         fieldType: 'filter-input-width',
         content: function () {
@@ -1035,7 +1034,6 @@ App.MainHostView = App.TableView.extend(App.TableServerViewMixin, {
         }
       }),
       statusSelectView: filters.createSelectView({
-        column: 13,
         classNames: ['notActive'],
         fieldType: 'filter-input-width',
         content: function () {
@@ -1062,10 +1060,19 @@ App.MainHostView = App.TableView.extend(App.TableServerViewMixin, {
         this._super();
         var self = this;
         var filterProperties = [];
-        var filters = [];
-        filters.pushObject({ iColumn: 12, value: this.get('selectedVersion')});
-        filters.pushObject({ iColumn: 13, value: this.get('selectedStatus')});
-        this.get('parentView.parentView').updateFilters(filters);
+        if (this.get('selectedVersion')) {
+          filterProperties.push({
+            property: 'repository_versions/RepositoryVersions/repository_version',
+            value: this.get('selectedVersion')
+          });
+        }
+        if (this.get('selectedStatus')) {
+          filterProperties.push({
+            property: 'HostStackVersions/state',
+            value: this.get('selectedStatus')
+          });
+        }
+        self.set('value', filterProperties);
       },
       /**
        * Clear filter to initial state
@@ -1077,6 +1084,9 @@ App.MainHostView = App.TableView.extend(App.TableServerViewMixin, {
         });
       }
     }),
+    onChangeValue: function () {
+      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'sub-resource');
+    },
     clearFilter: function () {
       this._super();
       this.get('childViews').forEach(function (view) {

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

@@ -158,6 +158,13 @@ App.MainHostStackVersionsView = App.TableView.extend({
     }
   }),
 
+  /**
+   * show progress of installation of version on host
+   */
+  showInstallProgress: function (event) {
+    App.router.get('mainAdminStackAndUpgradeController').showProgressPopup(event.context);
+  },
+
   /**
    * @type {Array}
    */

ambari-web/test/controllers/main/host/details_test.js

@@ -2286,6 +2286,27 @@ describe('App.MainHostDetailsController', function () {
     });
   });
 
+  describe('#installVersionConfirmation()', function () {
+
+    beforeEach(function () {
+      sinon.spy(App, "showConfirmationPopup");
+      sinon.stub(controller, 'installVersion', Em.K);
+    });
+    afterEach(function () {
+      App.showConfirmationPopup.restore();
+      controller.installVersion.restore();
+    });
+
+    it('confirm popup should be displayed', function () {
+      var event = {context: Em.Object.create({displayName: 'displayName'})};
+      var popup = controller.installVersionConfirmation(event);
+      expect(App.showConfirmationPopup.calledOnce).to.be.true;
+      popup.onPrimary();
+      expect(controller.installVersion.calledWith(event)).to.be.true;
+    });
+  });
+
+
   describe("#installVersion()", function() {
     it("call App.ajax.send", function() {
       controller.set('content.hostName', 'host1');
@@ -2305,9 +2326,13 @@ describe('App.MainHostDetailsController', function () {
   describe("#installVersionSuccessCallback()", function () {
     before(function () {
       this.mock = sinon.stub(App.HostStackVersion, 'find');
+      sinon.stub(App.db, 'set', Em.K);
+      sinon.stub(App.clusterStatus, 'setClusterStatus', Em.K);
     });
     after(function () {
       this.mock.restore();
+      App.db.set.restore();
+      App.clusterStatus.setClusterStatus.restore();
     });
     it("", function () {
       var version = Em.Object.create({
@@ -2315,8 +2340,10 @@ describe('App.MainHostDetailsController', function () {
         status: 'INIT'
       });
       this.mock.returns(version);
-      controller.installVersionSuccessCallback({}, {}, {version: version});
+      controller.installVersionSuccessCallback({Requests:{id: 1}}, {}, {version: version});
       expect(version.get('status')).to.equal('INSTALLING');
+      expect(App.db.set.calledWith('repoVersionInstall', 'id', [1])).to.be.true;
+      expect(App.clusterStatus.setClusterStatus.calledOnce).to.be.true;
     });
   });
 });

ambari-web/test/models/host_stack_version_test.js

@@ -127,4 +127,24 @@ describe('App.HostStackVersion', function () {
       expect(App.HostStackVersion.find(1).get('isCurrent')).to.be.false;
     });
   });
+
+  describe("#isInstalling", function () {
+    afterEach(function () {
+      App.HostStackVersion.find().clear();
+    });
+    it("status is INSTALLING", function () {
+      App.store.load(App.HostStackVersion, {
+        id: 1,
+        status: 'INSTALLING'
+      });
+      expect(App.HostStackVersion.find(1).get('isInstalling')).to.be.true;
+    });
+    it("status is not INSTALLING", function () {
+      App.store.load(App.HostStackVersion, {
+        id: 1,
+        status: 'INSTALLED'
+      });
+      expect(App.HostStackVersion.find(1).get('isInstalling')).to.be.false;
+    });
+  });
 });