AMBARI-8789 Upgrade Progress popup: UI tweaks. (atkach)

ambari-web/app/assets/test/tests.js

@@ -162,6 +162,7 @@ var files = ['test/init_model_test',
   'test/views/common/sort_view_test',
   'test/views/common/custom_date_popup_test',
   'test/views/common/configs/config_history_flow_test',
+  'test/views/common/progress_bar_view_test',
   'test/views/main/dashboard_test',
   'test/views/main/menu_test',
   'test/views/main/alert_definitions_view_test',
@@ -170,6 +171,8 @@ var files = ['test/init_model_test',
   'test/views/main/admin/stack_version/stack_version_details_test',
   'test/views/main/admin/stack_upgrade/upgrade_version_box_view_test',
   'test/views/main/admin/stack_upgrade/upgrade_group_view_test',
+  'test/views/main/admin/stack_upgrade/upgrade_task_view_test',
+  'test/views/main/admin/stack_upgrade/upgrade_wizard_view_test',
   'test/views/main/dashboard/config_history_view_test',
   'test/views/main/dashboard/widget_test',
   'test/views/main/dashboard/widgets_test',
@@ -250,6 +253,7 @@ var files = ['test/init_model_test',
   'test/models/stack_service_test',
   'test/models/user_test',
   'test/models/host_stack_version_test',
+  'test/models/upgrade_entity_test',
   //contains test with fake timers that affect Date
   'test/utils/lazy_loading_test'
 

ambari-web/app/models/upgrade_entity.js

@@ -34,6 +34,12 @@ App.upgradeEntity = Em.Object.extend({
    */
   isExpanded: false,
 
+  /**
+   * status of tasks/items/groups which should be grayed out and disabled
+   * @type {Array}
+   */
+  nonActiveStates: ['PENDING', 'ABORTED'],
+
   /**
    * @type {boolean}
    */
@@ -41,14 +47,6 @@ App.upgradeEntity = Em.Object.extend({
     return ['IN_PROGRESS'].contains(this.get('status'));
   }.property('status'),
 
-  /**
-   * width style of progress bar
-   * @type {string}
-   */
-  progressWidth: function () {
-    return "width:" + Math.floor(this.get('progress')) + '%;';
-  }.property('progress'),
-
   /**
    * @type {number}
    */
@@ -61,6 +59,6 @@ App.upgradeEntity = Em.Object.extend({
    * @type {boolean}
    */
   isActive: function () {
-    return this.get('status') !== 'PENDING';
+    return !this.get('nonActiveStates').contains(this.get('status'));
   }.property('status')
 });

ambari-web/app/styles/application.less

@@ -6596,6 +6596,9 @@ i.icon-asterisks {
       }
     }
   }
+  .task-list-main-warp i {
+    font-size: 16px;
+  }
 }
 
 #config-group-select-create-dialog {

ambari-web/app/templates/main/admin/stack_upgrade/stack_upgrade_dialog.hbs → ambari-web/app/templates/main/admin/stack_upgrade/stack_upgrade_wizard.hbs

@@ -18,19 +18,20 @@
 
 <div id="stack-upgrade-dialog">
   <div {{bindAttr class="view.isLoaded::hidden :row-fluid"}}>
-    <div class="span2">{{statusIcon controller.upgradeData.Upgrade.request_status}}
+    <div class="span2 task-list-main-warp">{{statusIcon controller.upgradeData.Upgrade.request_status}}
       &nbsp;{{view.upgradeStatusLabel}}</div>
     <div class="span9">
-      <div class="progress progress-striped active">
-        <div class="bar" {{bindAttr style="view.progressWidth"}}></div>
-      </div>
+      {{view App.ProgressBarView
+        progressBinding="view.overallProgress"
+        statusBinding="controller.upgradeData.Upgrade.request_status"
+      }}
     </div>
     <div class="span1">
       {{view.overallProgress}}%
     </div>
   </div>
 
-  <div class="task-list scrollable-block">
+  <div class="task-list scrollable-block task-list-main-warp">
     {{#if view.isLoaded}}
       {{#each group in controller.upgradeData.upgradeGroups}}
         {{view App.upgradeGroupView contentBinding="group"}}

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

@@ -24,9 +24,10 @@
   </div>
   {{#if view.content.isRunning}}
     <div class="span3">
-      <div class="progress progress-striped active">
-        <div class="bar" {{bindAttr style="view.content.progressWidth"}}></div>
-      </div>
+      {{view App.ProgressBarView
+        progressBinding="view.content.progress"
+        statusBinding="view.content.status"
+      }}
     </div>
     <div class="span1">
       <div>{{view.content.progress}}%</div>
@@ -45,9 +46,10 @@
       </div>
       {{#if item.isRunning}}
         <div class="span3">
-          <div class="progress progress-striped active">
-            <div class="bar" {{bindAttr style="item.progressWidth"}}></div>
-          </div>
+          {{view App.ProgressBarView
+            progressBinding="item.progress"
+            statusBinding="item.status"
+          }}
         </div>
         <div class="span1">
           <div>{{item.progress}}%</div>

ambari-web/app/utils/helper.js

@@ -744,13 +744,15 @@ App.registerBoundHelper('statusIcon', Em.View.extend({
    * @type {object}
    */
   statusIconMap: {
-    'COMPLETED': 'icon-ok',
+    'COMPLETED': 'icon-ok completed',
     'WARNING': 'icon-warning-sign',
-    'FAILED': 'icon-warning-sign',
-    'PENDING': 'icon-cog',
-    'IN_PROGRESS': 'icon-cogs',
+    'FAILED': 'icon-exclamation-sign failed',
+    'PENDING': 'icon-cog pending',
+    'QUEUED': 'icon-cog queued',
+    'IN_PROGRESS': 'icon-cogs in_progress',
     'HOLDING': 'icon-pause',
-    'ABORTED': 'icon-minus'
+    'ABORTED': 'icon-minus aborted',
+    'TIMED_OUT': 'icon-time timedout'
   },
 
   classNameBindings: ['iconClass'],

ambari-web/app/views.js

@@ -40,6 +40,7 @@ require('views/common/configs/custom_category_views/notification_configs_view');
 require('views/common/filter_combobox');
 require('views/common/filter_combo_cleanable');
 require('views/common/table_view');
+require('views/common/progress_bar_view');
 require('views/login');
 require('views/main');
 require('views/main/menu');

ambari-web/app/views/common/progress_bar_view.js

@@ -0,0 +1,70 @@
+/**
+ * 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.ProgressBarView = Em.View.extend({
+  template: Ember.Handlebars.compile('<div class="bar" {{bindAttr style="view.progressWidth"}}></div>'),
+  classNameBindings: ['generalClass', 'barClass'],
+
+  /**
+   * @type {number}
+   * @default null
+   */
+  progress: null,
+
+  /**
+   * @type {string}
+   * @default null
+   */
+  status: null,
+
+  /**
+   * @type {string}
+   */
+  generalClass: 'progress',
+
+  /**
+   * string format: width:<number>%;
+   * @type {string}
+   */
+  progressWidth: function () {
+    return "width:" + this.get('progress') + "%;";
+  }.property('progress'),
+
+  /**
+   * @type {string}
+   */
+  barClass: function () {
+    switch (this.get('status')) {
+      case 'FAILED':
+        return 'progress-danger';
+      case 'ABORTED':
+      case 'TIMED_OUT':
+        return 'progress-warning';
+      case 'COMPLETED':
+        return 'progress-success';
+      case 'QUEUED':
+      case 'PENDING':
+      case 'IN_PROGRESS':
+        return 'progress-info active progress-striped';
+      default:
+        return 'progress-info'
+    }
+  }.property('status')
+});

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

@@ -85,7 +85,7 @@ App.upgradeGroupView = Em.View.extend({
    */
   isManualOpened: function () {
     return Boolean(this.get('manualItem'));
-  }.property('content.status'),
+  }.property('manualItem'),
 
   /**
    * indicate whether failed item can be skipped in order to continue Upgrade

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

@@ -21,7 +21,7 @@ var App = require('app');
 
 App.upgradeWizardView = Em.View.extend({
   controllerBinding: 'App.router.mainAdminStackAndUpgradeController',
-  templateName: require('templates/main/admin/stack_upgrade/stack_upgrade_dialog'),
+  templateName: require('templates/main/admin/stack_upgrade/stack_upgrade_wizard'),
 
   /**
    * update timer
@@ -35,14 +35,6 @@ App.upgradeWizardView = Em.View.extend({
    */
   isLoaded: false,
 
-  /**
-   * string format: width:<number>%;
-   * @type {string}
-   */
-  progressWidth: function () {
-    return "width:" + this.get('overallProgress') + "%;";
-  }.property('overallProgress'),
-
   /**
    * progress value is rounded to floor
    * @type {number}
@@ -63,6 +55,7 @@ App.upgradeWizardView = Em.View.extend({
         return Em.I18n.t('admin.stackUpgrade.state.inProgress');
       case 'COMPLETED':
         return Em.I18n.t('admin.stackUpgrade.state.completed');
+      case 'ABORTED':
       case 'TIMED_OUT':
       case 'FAILED':
       case 'HOLDING_FAILED':

ambari-web/test/models/upgrade_entity_test.js

@@ -0,0 +1,63 @@
+/**
+ * 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');
+require('models/upgrade_entity');
+
+describe('App.upgradeEntity', function () {
+  var model = App.upgradeEntity.create();
+
+  describe("#isRunning", function() {
+    it("status IN_PROGRESS", function() {
+      model.set('status', 'IN_PROGRESS');
+      model.propertyDidChange('isRunning');
+      expect(model.get('isRunning')).to.be.true;
+    });
+    it("status PENDING", function() {
+      model.set('status', 'PENDING');
+      model.propertyDidChange('isRunning');
+      expect(model.get('isRunning')).to.be.false;
+    });
+  });
+
+  describe("#progress", function() {
+    it("progress_percent = 1.9", function() {
+      model.set('progress_percent', 1.9);
+      model.propertyDidChange('progress');
+      expect(model.get('progress')).to.equal(1);
+    });
+    it("progress_percent = 1", function() {
+      model.set('progress_percent', 1);
+      model.propertyDidChange('progress');
+      expect(model.get('progress')).to.equal(1);
+    });
+  });
+
+  describe("#isActive", function() {
+    it("status IN_PROGRESS", function() {
+      model.set('status', 'IN_PROGRESS');
+      model.propertyDidChange('isActive');
+      expect(model.get('isActive')).to.be.true;
+    });
+    it("status PENDING", function() {
+      model.set('status', 'PENDING');
+      model.propertyDidChange('isActive');
+      expect(model.get('isActive')).to.be.false;
+    });
+  });
+});

ambari-web/test/views/common/progress_bar_view_test.js

@@ -0,0 +1,75 @@
+/**
+ * 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');
+
+describe('App.ProgressBarView', function () {
+  var view = App.ProgressBarView.create();
+
+  describe("#progressWidth", function () {
+    it("", function () {
+      view.set('progress', 1);
+      view.propertyDidChange('progressWidth');
+      expect(view.get('progressWidth')).to.equal('width:1%;');
+    });
+  });
+
+  describe("#barClass", function () {
+    var testCases = [
+      {
+        status: 'FAILED',
+        result: 'progress-danger'
+      },
+      {
+        status: 'ABORTED',
+        result: 'progress-warning'
+      },
+      {
+        status: 'TIMED_OUT',
+        result: 'progress-warning'
+      },
+      {
+        status: 'COMPLETED',
+        result: 'progress-success'
+      },
+      {
+        status: 'QUEUED',
+        result: 'progress-info active progress-striped'
+      },
+      {
+        status: 'PENDING',
+        result: 'progress-info active progress-striped'
+      },
+      {
+        status: 'IN_PROGRESS',
+        result: 'progress-info active progress-striped'
+      },
+      {
+        status: null,
+        result: 'progress-info'
+      }
+    ];
+    testCases.forEach(function (test) {
+      it("status is " + test.status, function () {
+        view.set('status', test.status);
+        view.propertyDidChange('barClass');
+        expect(view.get('barClass')).to.equal(test.result);
+      });
+    });
+  });
+});

ambari-web/test/views/main/admin/stack_upgrade/upgrade_group_view_test.js

@@ -67,6 +67,19 @@ describe('App.upgradeGroupView', function () {
     });
   });
 
+  describe("#isManualOpened", function () {
+    it("manual item null", function () {
+      view.reopen({manualItem: null});
+      view.propertyDidChange('isManualOpened');
+      expect(view.get('isManualOpened')).to.be.false;
+    });
+    it("manual item correct", function () {
+      view.reopen({manualItem: {}});
+      view.propertyDidChange('isManualOpened');
+      expect(view.get('isManualOpened')).to.be.true;
+    });
+  });
+
   describe("#showProgressInfo", function () {
     var testCases = [
       {

ambari-web/test/views/main/admin/stack_upgrade/upgrade_task_view_test.js

@@ -0,0 +1,181 @@
+/**
+ * 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');
+require('views/main/admin/stack_upgrade/upgrade_task_view');
+
+describe('App.upgradeTaskView', function () {
+  var view = App.upgradeTaskView.create({
+    content: Em.Object.create(),
+    taskDetailsProperties: ['prop1']
+  });
+  view.removeObserver('content.isExpanded', view, 'doPolling');
+
+  describe("#doPolling()", function () {
+    beforeEach(function () {
+      sinon.stub(view, 'getTaskDetails', Em.K);
+      sinon.spy(view, 'doPolling');
+      this.clock = sinon.useFakeTimers();
+    });
+    afterEach(function () {
+      view.getTaskDetails.restore();
+      view.doPolling.restore();
+      this.clock.restore();
+    });
+    it("isExpanded false", function () {
+      view.set('content.isExpanded', false);
+      view.doPolling();
+      expect(view.getTaskDetails.called).to.be.false;
+    });
+    it("isExpanded true", function () {
+      view.set('content.isExpanded', true);
+      view.doPolling();
+      expect(view.getTaskDetails.calledOnce).to.be.true;
+      this.clock.tick(App.bgOperationsUpdateInterval);
+      expect(view.doPolling.calledTwice).to.be.true;
+    });
+  });
+
+  describe("#getTaskDetails()", function () {
+    beforeEach(function () {
+      sinon.stub(App.ajax, 'send', Em.K);
+
+    });
+    afterEach(function () {
+      App.ajax.send.restore();
+    });
+    it("call App.ajax.send()", function () {
+      view.set('content.id', 1);
+      view.set('content.request_id', 1);
+      view.getTaskDetails();
+      expect(App.ajax.send.getCall(0).args[0]).to.eql({
+        name: 'admin.upgrade.task',
+        sender: view,
+        data: {
+          upgradeId: 1,
+          taskId: 1
+        },
+        success: 'getTaskDetailsSuccessCallback'
+      });
+    });
+  });
+
+  describe("#getTaskDetailsSuccessCallback()", function () {
+    it("", function () {
+      var data = {
+        items: [
+          {
+            upgrade_items: [
+              {
+                tasks: [
+                  {
+                    Tasks: {
+                      prop1: 'value'
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      };
+      view.getTaskDetailsSuccessCallback(data);
+      expect(view.get('content.prop1')).to.equal('value');
+    });
+  });
+
+  describe("#copyErrLog()", function () {
+    before(function () {
+      sinon.stub(view, 'toggleProperty', Em.K);
+    });
+    after(function () {
+      view.toggleProperty.restore();
+    });
+    it("", function () {
+      view.copyErrLog();
+      expect(view.toggleProperty.calledWith('errorLogOpened')).to.be.true;
+    });
+  });
+
+  describe("#copyOutLog()", function () {
+    before(function () {
+      sinon.stub(view, 'toggleProperty', Em.K);
+    });
+    after(function () {
+      view.toggleProperty.restore();
+    });
+    it("", function () {
+      view.copyOutLog();
+      expect(view.toggleProperty.calledWith('outputLogOpened')).to.be.true;
+    });
+  });
+
+  describe("#openErrorLog()", function () {
+    before(function () {
+      sinon.stub(view, 'openLogWindow', Em.K);
+    });
+    after(function () {
+      view.openLogWindow.restore();
+    });
+    it("", function () {
+      view.set('content.stderr', 'stderr');
+      view.openErrorLog();
+      expect(view.openLogWindow.calledWith('stderr')).to.be.true;
+    });
+  });
+
+  describe("#openOutLog()", function () {
+    before(function () {
+      sinon.stub(view, 'openLogWindow', Em.K);
+    });
+    after(function () {
+      view.openLogWindow.restore();
+    });
+    it("", function () {
+      view.set('content.stdout', 'stdout');
+      view.openOutLog();
+      expect(view.openLogWindow.calledWith('stdout')).to.be.true;
+    });
+  });
+
+  describe("#openLogWindow()", function () {
+    var mockWindow = {
+      document: {
+        write: Em.K,
+        close: Em.K
+      }
+    };
+    before(function () {
+      sinon.stub(window, 'open').returns(mockWindow);
+      sinon.spy(mockWindow.document, 'write');
+      sinon.spy(mockWindow.document, 'close');
+    });
+    after(function () {
+      window.open.restore();
+      mockWindow.document.write.restore();
+      mockWindow.document.close.restore();
+    });
+    it("", function () {
+      view.openLogWindow('log');
+      expect(window.open.calledOnce).to.be.true;
+      expect(mockWindow.document.write.calledWith('log')).to.be.true;
+      expect(mockWindow.document.close.calledOnce).to.be.true;
+    });
+  });
+});

ambari-web/test/views/main/admin/stack_upgrade/upgrade_wizard_view_test.js

@@ -0,0 +1,121 @@
+/**
+ * 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');
+require('views/main/admin/stack_upgrade/upgrade_wizard_view');
+
+describe('App.upgradeWizardView', function () {
+  var view = App.upgradeWizardView.create();
+  view.reopen({
+    controller: Em.Object.create({
+      loadUpgradeData: Em.K
+    })
+  });
+  view.removeObserver('App.clusterName', view, 'startPolling');
+
+  describe("#overallProgress", function() {
+    it("progress is 1.9", function() {
+      view.set('controller.upgradeData', {
+        Upgrade: {
+          progress_percent: 1.9
+        }
+      });
+      expect(view.get('overallProgress')).to.equal(1);
+    });
+    it("progress is 1", function() {
+      view.set('controller.upgradeData', {
+        Upgrade: {
+          progress_percent: 1
+        }
+      });
+      expect(view.get('overallProgress')).to.equal(1);
+    });
+  });
+
+  describe("#startPolling()", function() {
+    beforeEach(function () {
+      sinon.stub(view.get('controller'), 'loadUpgradeData', function () {
+        return {
+          done: function (callback) {
+            callback();
+          }
+        }
+      });
+      sinon.stub(view, 'doPolling', Em.K);
+      view.set('isLoaded', false);
+    });
+    afterEach(function () {
+      view.get('controller').loadUpgradeData.restore();
+      view.doPolling.restore();
+    });
+    it("clusterName is null", function() {
+      App.set('clusterName', null);
+      view.startPolling();
+      expect(view.doPolling.called).to.be.false;
+      expect(view.get('isLoaded')).to.be.false;
+    });
+    it("clusterName set", function() {
+      App.set('clusterName', 'c1');
+      view.startPolling();
+      expect(view.get('controller').loadUpgradeData.calledOnce).to.be.true;
+      expect(view.doPolling.calledOnce).to.be.true;
+      expect(view.get('isLoaded')).to.be.true;
+    });
+  });
+
+  describe("#willInsertElement()", function () {
+    before(function () {
+      sinon.stub(view, 'startPolling', Em.K);
+    });
+    after(function () {
+      view.startPolling.restore();
+    });
+    it("call startPolling()", function () {
+      view.willInsertElement();
+      expect(view.startPolling.calledOnce).to.be.true;
+    });
+  });
+
+  describe("#willDestroyElement()", function () {
+    it("call startPolling()", function () {
+      view.set('isLoaded', true);
+      view.willDestroyElement();
+      expect(view.get('isLoaded')).to.be.false;
+    });
+  });
+
+  describe("#doPolling()", function () {
+    beforeEach(function () {
+      sinon.stub(view.get('controller'), 'loadUpgradeData', Em.K);
+      sinon.spy(view, 'doPolling');
+      this.clock = sinon.useFakeTimers();
+    });
+    afterEach(function () {
+      view.get('controller').loadUpgradeData.restore();
+      view.doPolling.restore();
+      this.clock.restore();
+    });
+    it("", function () {
+      view.doPolling();
+      this.clock.tick(App.bgOperationsUpdateInterval);
+      expect(view.get('controller').loadUpgradeData.calledOnce).to.be.true;
+      expect(view.doPolling.calledTwice).to.be.true;
+    });
+  });
+});