You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by at...@apache.org on 2017/09/21 13:50:35 UTC

ambari git commit: AMBARI-22023 Upgrade dialog style issues. (atkach)

Repository: ambari
Updated Branches:
  refs/heads/branch-2.6 59b25468b -> 1cb4ee144


AMBARI-22023 Upgrade dialog style issues. (atkach)


Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/1cb4ee14
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/1cb4ee14
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/1cb4ee14

Branch: refs/heads/branch-2.6
Commit: 1cb4ee144779f013c5454033c77c6f1870b00130
Parents: 59b2546
Author: Andrii Tkach <at...@apache.org>
Authored: Thu Sep 21 16:39:20 2017 +0300
Committer: Andrii Tkach <at...@apache.org>
Committed: Thu Sep 21 16:47:55 2017 +0300

----------------------------------------------------------------------
 .../main/admin/stack_and_upgrade_controller.js  |   2 +-
 ambari-web/app/messages.js                      |   2 +
 ambari-web/app/routes/stack_upgrade_routes.js   |  11 +-
 ambari-web/app/styles/stack_versions.less       | 134 ++++++----------
 .../stack_upgrade/stack_upgrade_wizard.hbs      | 158 ++++++++++---------
 .../main/admin/stack_upgrade/upgrade_group.hbs  |  16 +-
 .../views/common/helpers/status_icon_view.js    |   1 +
 .../admin/stack_upgrade/upgrade_wizard_view.js  |   3 +
 .../admin/stack_and_upgrade_controller_test.js  |   2 +-
 .../stack_upgrade/upgrade_wizard_view_test.js   |   2 +-
 10 files changed, 159 insertions(+), 172 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/ambari-web/app/controllers/main/admin/stack_and_upgrade_controller.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/controllers/main/admin/stack_and_upgrade_controller.js b/ambari-web/app/controllers/main/admin/stack_and_upgrade_controller.js
index 618abdb..4e72128 100644
--- a/ambari-web/app/controllers/main/admin/stack_and_upgrade_controller.js
+++ b/ambari-web/app/controllers/main/admin/stack_and_upgrade_controller.js
@@ -372,7 +372,7 @@ App.MainAdminStackAndUpgradeController = Em.Controller.extend(App.LocalStorage,
     } else if (this.get('upgradeData.Upgrade')){
       return this.get('upgradeData.Upgrade.request_status');
     } else {
-      return '';
+      return 'INIT';
     }
   }.property('upgradeData.Upgrade.request_status', 'App.upgradeSuspended'),
 

http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/ambari-web/app/messages.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js
index 8b9bd12..a058ae9 100644
--- a/ambari-web/app/messages.js
+++ b/ambari-web/app/messages.js
@@ -1861,6 +1861,8 @@ Em.I18n.translations = {
   'admin.stackUpgrade.state.aborted': "Upgrade Aborted",
   'admin.stackUpgrade.state.completed': "Upgrade Finished",
   'admin.stackUpgrade.state.inProgress.downgrade': "Downgrade in Progress",
+  'admin.stackUpgrade.state.init': "Upgrade Initializing",
+  'admin.stackUpgrade.state.init.downgrade': "Downgrade Initializing",
   'admin.stackUpgrade.state.paused.downgrade': "Downgrade Paused",
   'admin.stackUpgrade.state.aborted.downgrade': "Downgrade Aborted",
   'admin.stackUpgrade.state.completed.downgrade': "Downgrade Finished",

http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/ambari-web/app/routes/stack_upgrade_routes.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/routes/stack_upgrade_routes.js b/ambari-web/app/routes/stack_upgrade_routes.js
index 1d4dc61..c7075c0 100644
--- a/ambari-web/app/routes/stack_upgrade_routes.js
+++ b/ambari-web/app/routes/stack_upgrade_routes.js
@@ -35,7 +35,16 @@ module.exports = App.WizardRoute.extend({
 
           return App.ModalPopup.show({
             classNames: ['full-width-modal'],
-            header: Em.computed.alias('App.router.mainAdminStackAndUpgradeController.wizardModalTitle'),
+            headerClass: Em.View.extend({
+              header: Em.computed.alias('controller.wizardModalTitle'),
+              controllerBinding: 'App.router.mainAdminStackAndUpgradeController',
+              template: Ember.Handlebars.compile(
+                '{{view.header}}' +
+                '<div {{bindAttr class=":upgrade-options-link controller.isDowngrade:disabled" disabled="controller.isDowngrade"}} {{action openUpgradeOptions target="controller"}}>' +
+                '<i class="icon-cogs"></i><a>{{t admin.stackVersions.version.upgrade.upgradeOptions.header}}</a>' +
+                '</div>'
+              )
+            }),
             bodyClass: App.upgradeWizardView,
             primary: Em.I18n.t('common.dismiss'),
             secondary: null,

http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/ambari-web/app/styles/stack_versions.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/stack_versions.less b/ambari-web/app/styles/stack_versions.less
index bea711a..ad477d8 100644
--- a/ambari-web/app/styles/stack_versions.less
+++ b/ambari-web/app/styles/stack_versions.less
@@ -457,16 +457,12 @@
   }
 }
 
-#stack-upgrade-dialog {
+#stack-upgrade-dialog,
+#stack-upgrade-record-dialog {
+  margin-top: 5px;
   .details-box {
     padding: 5px;
-    margin-left: 15px;
-    margin-right: 95px;
-    margin-top: 10px;
-    .button-row {
-      text-align: right;
-      padding: 5px;
-    }
+    margin-top: 5px;
     input[type="checkbox"] {
       margin: 0;
     }
@@ -474,6 +470,10 @@
       line-height: 30px;
     }
   }
+  .button-row {
+    text-align: right;
+    padding: 5px;
+  }
   .task-details {
     .manage-controls a {
       cursor: pointer;
@@ -497,102 +497,58 @@
   }
   .task-list-main-warp i {
     font-size: 16px;
+    vertical-align: baseline;
   }
   ul.failed-info-list {
     max-height: 500px;
     margin-top: 5px;
   }
-  .upgrade-options-link {
-    position: absolute;
-    cursor: pointer;
-    right: 10%;
-    top: 13px;
-    width: 100px;
-    a {
-      font-size: 13px;
-    }
-    .icon-cogs {
-      color: #0088cc;
-      margin-right: 3px;
-    }
-  }
-  .upgrade-options-link.disabled {
-    cursor: not-allowed;
-    a, .icon-cogs {
-      color: #808080;
-    }
-    a:hover {
-      text-decoration: none;
-    }
-  }
-}
-
-#stack-upgrade-record-dialog {
-  .details-box {
-    padding: 5px;
-    margin-left: 15px;
-    margin-right: 95px;
-    .button-row {
-      text-align: right;
-      padding: 5px;
-    }
-    input[type="checkbox"] {
-      margin: 0;
-    }
-    .message {
-      line-height: 30px;
+  .pause-button {
+    margin-top: -5px;
+    i {
+      padding-right: 4px;
+      font-size: 15px;
     }
   }
-  .task-details {
-    .manage-controls a {
-      cursor: pointer;
-      margin-right: 12px;
-    }
-    textarea {
-      width: 100%;
-      min-height: 100px;
-      box-sizing: border-box;
-    }
+  .active-task-label {
+    padding: 8px 15px;
+    display: inline-block;
   }
-  .task-list {
-    overflow-x: hidden;
+  .upgrade-groups {
+    padding-left: 0;
     .progress {
-      margin-bottom: 0;
+      width: 85%;
+      display: inline-block;
     }
-    padding-left: 20px;
-    i {
-      margin-right: 5px;
+    .percent {
+      display: inline-block;
+      vertical-align: top;
     }
   }
-  .task-list-main-warp i {
+}
+
+.upgrade-options-link {
+  cursor: pointer;
+  display: inline-block;
+  padding-left: 20px;
+  vertical-align: bottom;
+  a {
+    font-size: 14px;
+    font-weight: normal;
+  }
+  .icon-cogs {
     font-size: 16px;
+    color: #0088cc;
+    margin-right: 3px;
   }
-  ul.failed-info-list {
-    max-height: 500px;
-    margin-top: 5px;
-  }
-  .upgrade-options-link {
-    position: absolute;
-    cursor: pointer;
-    right: 10%;
-    top: 13px;
-    width: 100px;
-    a {
-      font-size: 13px;
-    }
-    .icon-cogs {
-      color: #0088cc;
-      margin-right: 3px;
-    }
+}
+.upgrade-options-link.disabled {
+  cursor: not-allowed;
+  a, .icon-cogs {
+    color: #808080;
   }
-  .upgrade-options-link.disabled {
-    cursor: not-allowed;
-    a, .icon-cogs {
-      color: #808080;
-    }
-    a:hover {
-      text-decoration: none;
-    }
+  a:hover {
+    text-decoration: none;
   }
 }
 

http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/ambari-web/app/templates/main/admin/stack_upgrade/stack_upgrade_wizard.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/stack_upgrade/stack_upgrade_wizard.hbs b/ambari-web/app/templates/main/admin/stack_upgrade/stack_upgrade_wizard.hbs
index 01109b8..5884eb5 100644
--- a/ambari-web/app/templates/main/admin/stack_upgrade/stack_upgrade_wizard.hbs
+++ b/ambari-web/app/templates/main/admin/stack_upgrade/stack_upgrade_wizard.hbs
@@ -17,14 +17,12 @@
 }}
 
 <div id="stack-upgrade-dialog">
-  <div {{bindAttr class=":upgrade-options-link controller.isDowngrade:disabled"}} {{action openUpgradeOptions target="controller"}}>
-    <i class="icon-cogs"></i><a>{{t common.options}}</a>
-  </div>
 
   <div {{bindAttr class="view.isLoaded::hidden :row-fluid"}}>
-    <div class="span3 task-list-main-warp">{{statusIcon controller.requestStatus}}
-      &nbsp;{{view.upgradeStatusLabel}}</div>
-    <div class="span8">
+    <div class="span2 task-list-main-warp">
+        {{statusIcon controller.requestStatus}}&nbsp;{{view.upgradeStatusLabel}}
+    </div>
+    <div class="span7">
       {{view App.ProgressBarView
         progressBinding="view.overallProgress"
         statusBinding="controller.requestStatus"
@@ -33,75 +31,93 @@
     <div class="span1">
       {{view.overallProgress}}%
     </div>
-  </div>
-
-  <div class="task-list scrollable-block task-list-main-warp">
-    {{#if view.isLoaded}}
-      <div>
-        <div class="row">
-          {{#if showPauseButton}}
-            <div class="span12">
-              {{#if isDowngrade}}
-                <button
-                  class="btn btn-default" {{action confirmPauseDowngrade target="view"}}>{{t admin.stackUpgrade.pauseDowngrade}}</button>
-              {{else}}
-                <button
-                  class="btn btn-default" {{action confirmPauseUpgrade target="view"}}>{{t admin.stackUpgrade.pauseUpgrade}}</button>
-              {{/if}}
-            </div>
-          {{/if}}
-        </div>
-        {{#if view.runningItem}}
-          <div class="box details-box">
-            <div class="row-fluid">
-              <div class="pull-left">{{t admin.stackUpgrade.dialog.inProgress}}&nbsp;{{view.runningItem.text}}</div>
-              {{#if view.isDetailsOpened}}
-                  <a href="#" class="pull-right" {{action toggleDetails target="view"}}>{{t admin.stackUpgrade.dialog.details.hide}}</a>
-                {{#if view.runningItem.isTasksLoaded}}
-                  <div class="clear">
-                    {{view App.upgradeTaskView contentBinding="view.taskDetails" outsideViewBinding="view.outsideView"}}
-                  </div>
+    <div class="span2 pause-button pull-right">
+        {{#if view.isLoaded}}
+            {{#if showPauseButton}}
+                {{#if isDowngrade}}
+                  <button class="btn btn-default pull-right" {{action confirmPauseDowngrade target="view"}}>
+                      <i class="icon-pause"></i>{{t admin.stackUpgrade.pauseDowngrade}}
+                  </button>
                 {{else}}
-                  {{view App.SpinnerView classNames="clear"}}
+                  <button class="btn btn-default pull-right" {{action confirmPauseUpgrade target="view"}}>
+                    <i class="icon-pause"></i>{{t admin.stackUpgrade.pauseUpgrade}}
+                  </button>
                 {{/if}}
-              {{else}}
-                <a href="#" class="pull-right" {{action toggleDetails target="view"}}>{{t admin.stackUpgrade.dialog.details.open}}</a>
-              {{/if}}
-            </div>
-          </div>
+            {{/if}}
         {{/if}}
-        {{#if view.failedItem}}
-          {{#unless view.isSlaveComponentFailuresItem}}
-            <div class="box details-box">
-              <div class="row-fluid">
-                <div class="pull-left">{{t admin.stackUpgrade.dialog.failed}}&nbsp;{{view.failedItem.text}}</div>
-                {{#if view.isDetailsOpened}}
-                  <a href="#" class="pull-right" {{action toggleDetails target="view"}}>{{t admin.stackUpgrade.dialog.details.hide}}</a>
-                  {{#if view.failedItem.isTasksLoaded}}
-                    <div class="clear">
-                      {{view App.upgradeTaskView contentBinding="view.taskDetails" outsideViewBinding="view.outsideView"}}
-                    </div>
-                  {{else}}
-                    {{view App.SpinnerView classNames="clear"}}
-                  {{/if}}
-                {{else}}
-                    <a href="#" class="pull-right" {{action toggleDetails target="view"}}>{{t admin.stackUpgrade.dialog.details.open}}</a>
-                {{/if}}
-              </div>
-              {{#if view.isHoldingState}}
-                <div class="button-row">
-                  {{#if view.isDowngradeAvailable}}
-                    <button class="btn btn-danger" {{bindAttr disabled="controller.requestInProgress"}} {{action confirmDowngrade view.failedItem target="controller"}}>{{t common.downgrade}}</button>
-                  {{/if}}
-                  {{#if view.failedItem.skippable}}
-                    <button class="btn btn-warning" {{bindAttr disabled="controller.requestInProgress"}} {{action continue view.failedItem target="view"}}>{{t admin.stackUpgrade.dialog.continue}}</button>
-                  {{/if}}
-                    <button class="btn" {{bindAttr disabled="controller.requestInProgress"}} {{action retry view.failedItem target="view"}}>{{t common.retry}}</button>
+    </div>
+  </div>
+
+  <div class="task-list upgrade-groups scrollable-block task-list-main-warp">
+      {{#if view.isLoaded}}
+        <div class="accordion">
+            {{#if view.runningItem}}
+              <div class="accordion-group">
+                <div class="accordion-heading row-fluid">
+                  <span class="active-task-label">{{t admin.stackUpgrade.dialog.inProgress}}
+                    &nbsp;{{view.runningItem.text}}</span>
+                  <a class="accordion-toggle pull-right" data-toggle="collapse"
+                     href="#collapseBox" {{action toggleDetails target="view"}}>
+                      {{#if view.isDetailsOpened}}
+                          {{t admin.stackUpgrade.dialog.details.hide}}
+                      {{else}}
+                          {{t admin.stackUpgrade.dialog.details.open}}
+                      {{/if}}
+                  </a>
                 </div>
-              {{/if}}
-            </div>
-          {{/unless}}
-        {{/if}}
+                <div class="accordion-body collapse" id="collapseBox">
+                  <div class="accordion-inner">
+                      {{#if view.runningItem.isTasksLoaded}}
+                        <div class="clear">
+                            {{view App.upgradeTaskView contentBinding="view.taskDetails" outsideViewBinding="view.outsideView"}}
+                        </div>
+                      {{else}}
+                          {{view App.SpinnerView classNames="clear"}}
+                      {{/if}}
+                  </div>
+                </div>
+              </div>
+            {{/if}}
+            {{#if view.failedItem}}
+                {{#unless view.isSlaveComponentFailuresItem}}
+                  <div class="accordion-group">
+                    <div class="accordion-heading row-fluid">
+                    <span class="active-task-label">
+                        {{t admin.stackUpgrade.dialog.failed}}&nbsp;{{view.failedItem.text}}
+                    </span>
+                      <a class="accordion-toggle pull-right" data-toggle="collapse" href="#collapseBox" {{action toggleDetails target="view"}}>
+                          {{#if view.isDetailsOpened}}
+                              {{t admin.stackUpgrade.dialog.details.hide}}
+                          {{else}}
+                              {{t admin.stackUpgrade.dialog.details.open}}
+                          {{/if}}
+                      </a>
+                    </div>
+                    <div class="accordion-body collapse" id="collapseBox">
+                      <div class="accordion-inner">
+                          {{#if view.failedItem.isTasksLoaded}}
+                            <div class="clear">
+                                {{view App.upgradeTaskView contentBinding="view.taskDetails" outsideViewBinding="view.outsideView"}}
+                            </div>
+                          {{else}}
+                              {{view App.SpinnerView classNames="clear"}}
+                          {{/if}}
+                      </div>
+                    </div>
+                      {{#if view.isHoldingState}}
+                        <div class="button-row">
+                            {{#if view.isDowngradeAvailable}}
+                              <button class="btn btn-danger" {{bindAttr disabled="controller.requestInProgress"}} {{action confirmDowngrade view.failedItem target="controller"}}>{{t common.downgrade}}</button>
+                            {{/if}}
+                            {{#if view.failedItem.skippable}}
+                              <button class="btn btn-warning" {{bindAttr disabled="controller.requestInProgress"}} {{action continue view.failedItem target="view"}}>{{t admin.stackUpgrade.dialog.continue}}</button>
+                            {{/if}}
+                          <button class="btn" {{bindAttr disabled="controller.requestInProgress"}} {{action retry view.failedItem target="view"}}>{{t common.retry}}</button>
+                        </div>
+                      {{/if}}
+                  </div>
+                {{/unless}}
+            {{/if}}
         {{#if view.plainManualItem}}
           <div class="box details-box">
             <p class="manual-steps-title"><strong>{{t admin.stackUpgrade.dialog.manual}}</strong></p>

http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_group.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_group.hbs b/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_group.hbs
index 7b62599..f8a887e 100644
--- a/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_group.hbs
+++ b/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_group.hbs
@@ -23,16 +23,16 @@
     <a href="#" {{action toggleExpanded view.content controller.upgradeData.upgradeGroups target="view"}}>{{view.content.title}}</a>
   </div>
   {{#if view.content.isRunning}}
-    <div class="span3">
+    <div class="span4 pull-right">
       {{view view.progressBarView
         progressBinding="view.content.progress"
         statusBinding="view.content.status"
         totalTasksBinding="view.content.total_task_count"
         completedTasksBinding="view.content.completed_task_count"
       }}
-    </div>
-    <div class="span1">
-      <div>{{view.content.progress}}%</div>
+      <div class="percent pull-right">
+        <span>{{view.content.progress}}%</span>
+      </div>
     </div>
   {{/if}}
 </div>
@@ -48,14 +48,14 @@
           <a href="#" {{action toggleExpanded item view.content.upgradeItems target="view"}}>{{item.context}}</a>
         </div>
         {{#if item.isRunning}}
-          <div class="span3">
+          <div class="span4 pull-right">
             {{view App.ProgressBarView
               progressBinding="item.progress"
               statusBinding="item.status"
             }}
-          </div>
-          <div class="span1">
-            <div>{{item.progress}}%</div>
+            <div class="percent pull-right">
+              <div>{{item.progress}}%</div>
+            </div>
           </div>
         {{/if}}
       </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/ambari-web/app/views/common/helpers/status_icon_view.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/common/helpers/status_icon_view.js b/ambari-web/app/views/common/helpers/status_icon_view.js
index 70f56a9..75950df 100644
--- a/ambari-web/app/views/common/helpers/status_icon_view.js
+++ b/ambari-web/app/views/common/helpers/status_icon_view.js
@@ -26,6 +26,7 @@ App.StatusIconView = Em.View.extend({
    * @type {object}
    */
   statusIconMap: {
+    'INIT': 'icon-cogs in_progress',
     'COMPLETED': 'icon-ok completed',
     'WARNING': 'icon-warning-sign',
     'FAILED': 'icon-exclamation-sign failed',

http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/ambari-web/app/views/main/admin/stack_upgrade/upgrade_wizard_view.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/admin/stack_upgrade/upgrade_wizard_view.js b/ambari-web/app/views/main/admin/stack_upgrade/upgrade_wizard_view.js
index a5e7730..415d87d 100644
--- a/ambari-web/app/views/main/admin/stack_upgrade/upgrade_wizard_view.js
+++ b/ambari-web/app/views/main/admin/stack_upgrade/upgrade_wizard_view.js
@@ -250,6 +250,9 @@ App.upgradeWizardView = Em.View.extend({
       case 'HOLDING':
         labelKey = 'admin.stackUpgrade.state.paused';
         break;
+      default:
+        labelKey = 'admin.stackUpgrade.state.init';
+        break;
     }
     if (labelKey) {
       labelKey += (this.get('controller.isDowngrade')) ? '.downgrade' : "";

http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/ambari-web/test/controllers/main/admin/stack_and_upgrade_controller_test.js
----------------------------------------------------------------------
diff --git a/ambari-web/test/controllers/main/admin/stack_and_upgrade_controller_test.js b/ambari-web/test/controllers/main/admin/stack_and_upgrade_controller_test.js
index 44e738b..2920ae0 100644
--- a/ambari-web/test/controllers/main/admin/stack_and_upgrade_controller_test.js
+++ b/ambari-web/test/controllers/main/admin/stack_and_upgrade_controller_test.js
@@ -107,7 +107,7 @@ describe('App.MainAdminStackAndUpgradeController', function() {
       this.mock.returns(false);
       controller.set('upgradeData', null);
       controller.propertyDidChange('requestStatus');
-      expect(controller.get('requestStatus')).to.be.empty;
+      expect(controller.get('requestStatus')).to.equal('INIT');
     });
   });
 

http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/ambari-web/test/views/main/admin/stack_upgrade/upgrade_wizard_view_test.js
----------------------------------------------------------------------
diff --git a/ambari-web/test/views/main/admin/stack_upgrade/upgrade_wizard_view_test.js b/ambari-web/test/views/main/admin/stack_upgrade/upgrade_wizard_view_test.js
index 8ad711e..a303e60 100644
--- a/ambari-web/test/views/main/admin/stack_upgrade/upgrade_wizard_view_test.js
+++ b/ambari-web/test/views/main/admin/stack_upgrade/upgrade_wizard_view_test.js
@@ -544,7 +544,7 @@ describe('App.upgradeWizardView', function () {
           status: '',
           isDowngrade: false
         },
-        result: ''
+        result: Em.I18n.t('admin.stackUpgrade.state.init')
       },
       {
         data: {