ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From aonis...@apache.org
Subject [01/50] [abbrv] ambari git commit: AMBARI-22023 Upgrade dialog style issues.(atkach)
Date Thu, 28 Sep 2017 13:24:50 GMT
Repository: ambari
Updated Branches:
  refs/heads/branch-3.0-perf a670750c3 -> be73d167a


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/eead09be
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/eead09be
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/eead09be

Branch: refs/heads/branch-3.0-perf
Commit: eead09bebb0c1887c8dd8fe90aa8a6d50009e897
Parents: 40f705a
Author: Andrii Tkach <atkach@apache.org>
Authored: Fri Sep 22 13:11:03 2017 +0300
Committer: Andrii Tkach <atkach@apache.org>
Committed: Fri Sep 22 14:48:47 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       |  77 ++++++---
 .../stack_upgrade/stack_upgrade_wizard.hbs      | 170 +++++++++++--------
 .../main/admin/stack_upgrade/upgrade_group.hbs  |  18 +-
 .../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, 186 insertions(+), 102 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/eead09be/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 fba6ad6..6d7560b 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
@@ -391,7 +391,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/eead09be/ambari-web/app/messages.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js
index 113fb8f..db25104 100644
--- a/ambari-web/app/messages.js
+++ b/ambari-web/app/messages.js
@@ -1884,6 +1884,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/eead09be/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 24fa5e8..d36253a 100644
--- a/ambari-web/app/routes/stack_upgrade_routes.js
+++ b/ambari-web/app/routes/stack_upgrade_routes.js
@@ -40,7 +40,16 @@ module.exports = App.WizardRoute.extend({
           return App.ModalPopup.show({
             classNames: ['upgrade-wizard-modal'],
             modalDialogClasses: ['modal-xlg'],
-            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/eead09be/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 2e4faff..0221311 100644
--- a/ambari-web/app/styles/stack_versions.less
+++ b/ambari-web/app/styles/stack_versions.less
@@ -418,7 +418,6 @@
   }
   .details-box {
     padding: 5px;
-    margin-right: 95px;
     .button-row {
       text-align: right;
       padding: 5px;
@@ -439,6 +438,7 @@
     }
   }
   .task-list {
+    width: 100%;
     overflow-x: hidden;
     .progress {
       margin-bottom: 0;
@@ -448,35 +448,70 @@
       margin-right: 5px;
     }
   }
+  .active-task-label {
+    padding: 8px 15px;
+    display: inline-block;
+  }
+  .col-md-2.task-list-main-wrap {
+    padding-left: 0;
+  }
+  .upgrade-groups {
+    padding-left: 0;
+    .progress {
+      width: 85%;
+      display: inline-block;
+    }
+    .percent {
+      display: inline-block;
+      vertical-align: top;
+    }
+  }
   .task-list-main-wrap i {
     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: 22px;
-    width: 100px;
-    a {
-      font-size: 13px;
-    }
-    .glyphicon-cogs {
-      color: #0088cc;
-      margin-right: 3px;
+  .pause-button {
+    margin-top: -5px;
+    padding-right: 0;
+    i {
+      padding-right: 4px;
+      font-size: 15px;
     }
   }
-  .upgrade-options-link.disabled {
-    cursor: not-allowed;
-    a, .glyphicon-cogs {
-      color: #808080;
-    }
-    a:hover {
-      text-decoration: none;
-    }
+  .button-row {
+    text-align: right;
+    padding: 5px;
+  }
+}
+
+.upgrade-options-link {
+  padding-left: 50px;
+  display: inline-block;
+  cursor: pointer;
+  width: 150px;
+  vertical-align: bottom;
+  a {
+    font-size: 14px;
+    font-weight: normal;
+  }
+  .icon-cogs {
+    font-size: 16px;
+    color: #0088cc;
+    margin-right: 3px;
+  }
+}
+.upgrade-options-link.disabled {
+  cursor: not-allowed;
+  a, .icon-cogs {
+    color: #808080;
+  }
+  a:hover {
+    text-decoration: none;
   }
 }
 

http://git-wip-us.apache.org/repos/asf/ambari/blob/eead09be/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 cfbbb7a..7ab43b4 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,11 @@
 }}
 
 <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"}}>
-    <div class="col-md-3 task-list-main-wrap">{{statusIcon controller.requestStatus}}
+    <div class="col-md-2 task-list-main-wrap">{{statusIcon controller.requestStatus}}
       &nbsp;{{view.upgradeStatusLabel}}</div>
-    <div class="col-md-8">
+    <div class="col-md-7">
       {{view App.ProgressBarView
         progressBinding="view.overallProgress"
         statusBinding="controller.requestStatus"
@@ -33,73 +30,110 @@
     <div class="col-md-1">
       {{view.overallProgress}}%
     </div>
-  </div>
-
-  <div class="task-list scrollable-block task-list-main-wrap">
-    {{#if view.isLoaded}}
-      <div>
-        <div class="row">
-          {{#if showPauseButton}}
-            {{#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}}
-          {{/if}}
-        </div>
-        {{#if view.runningItem}}
-          <div class="panel panel-default details-box row">
-            <div class="row col-md-12">
-              <div class="pull-left col-md-6">{{t admin.stackUpgrade.dialog.inProgress}}&nbsp;{{view.runningItem.text}}</div>
-              {{#if view.isDetailsOpened}}
-                  <div class="pull-right col-md-6"><a href="#" class="pull-right"
{{action toggleDetails target="view"}}>{{t admin.stackUpgrade.dialog.details.hide}}</a></div>
-                {{#if view.runningItem.isTasksLoaded}}
-                  <div class="clear col-md-12">
-                    {{view App.upgradeTaskView contentBinding="view.taskDetails" outsideViewBinding="view.outsideView"}}
-                  </div>
+    <div class="col-md-2 pause-button pull-right">
+        {{#if view.isLoaded}}
+            {{#if showPauseButton}}
+                {{#if isDowngrade}}
+                  <button
+                    class="btn btn-default pull-right" {{action confirmPauseDowngrade target="view"}}>{{t
admin.stackUpgrade.pauseDowngrade}}</button>
                 {{else}}
-                  {{view App.SpinnerView classNames="clear"}}
+                  <button
+                    class="btn btn-default pull-right" {{action confirmPauseUpgrade target="view"}}>{{t
admin.stackUpgrade.pauseUpgrade}}</button>
                 {{/if}}
-              {{else}}
-              <div class="pull-right col-md-6"><a href="#" class="pull-right" {{action
toggleDetails target="view"}}>{{t admin.stackUpgrade.dialog.details.open}}</a></div>
-              {{/if}}
-            </div>
-          </div>
+            {{/if}}
         {{/if}}
-        {{#if view.failedItem}}
-          {{#unless view.isSlaveComponentFailuresItem}}
-            <div class="panel panel-default details-box row">
-              <div class="row col-md-12">
-                <div class="pull-left col-md-6">{{t admin.stackUpgrade.dialog.failed}}&nbsp;{{view.failedItem.text}}</div>
-                {{#if view.isDetailsOpened}}
-                <div class="pull-right col-md-6"><a href="#" class="pull-right"
{{action toggleDetails target="view"}}>{{t admin.stackUpgrade.dialog.details.hide}}</a></div>
-                  {{#if view.failedItem.isTasksLoaded}}
-                    <div class="clear col-md-12">
-                      {{view App.upgradeTaskView contentBinding="view.taskDetails" outsideViewBinding="view.outsideView"}}
-                    </div>
-                  {{else}}
-                    {{view App.SpinnerView classNames="clear"}}
-                  {{/if}}
-                {{else}}
-                    <div class="pull-right col-md-6"><a href="#" class="pull-right"
{{action toggleDetails target="view"}}>{{t admin.stackUpgrade.dialog.details.open}}</a></div>
-                {{/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 btn-default" {{bindAttr disabled="controller.requestInProgress"}}
{{action retry view.failedItem target="view"}}>{{t common.retry}}</button>
+    </div>
+  </div>
+
+  <div class="task-list scrollable-block task-list-main-wrap upgrade-groups">
+      {{#if view.isLoaded}}
+        <div class="panel-group">
+            {{#if view.runningItem}}
+              <div class="panel panel-default details-box row">
+                <div class="panel-heading row">
+                  <div class="pull-left col-md-6">
+                      {{t admin.stackUpgrade.dialog.inProgress}}&nbsp;{{view.runningItem.text}}
+                  </div>
+                    {{#if view.isDetailsOpened}}
+                      <div class="pull-right col-md-6">
+                        <a href="#collapseBox" class="pull-right" {{action toggleDetails
target="view"}}
+                           data-toggle="collapse">
+                            {{t admin.stackUpgrade.dialog.details.hide}}
+                        </a>
+                      </div>
+                    {{else}}
+                      <div class="pull-right col-md-6">
+                        <a href="#collapseBox" class="pull-right" {{action toggleDetails
target="view"}}
+                           data-toggle="collapse">
+                            {{t admin.stackUpgrade.dialog.details.open}}
+                        </a>
+                      </div>
+                    {{/if}}
                 </div>
-              {{/if}}
-            </div>
-          {{/unless}}
-        {{/if}}
+                <div id="collapseBox" class="panel-collapse collapse">
+                  <div class="panel-body">
+                      {{#if view.runningItem.isTasksLoaded}}
+                        <div class="clear col-md-12">
+                            {{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="panel panel-default details-box row">
+                    <div class="panel-heading row">
+                      <div class="pull-left col-md-6">
+                          {{t admin.stackUpgrade.dialog.failed}}&nbsp;{{view.failedItem.text}}
+                      </div>
+                        {{#if view.isDetailsOpened}}
+                          <div class="pull-right col-md-6">
+                            <a href="#collapseBox" class="pull-right" {{action toggleDetails
target="view"}}
+                               data-toggle="collapse">
+                                {{t admin.stackUpgrade.dialog.details.hide}}
+                            </a>
+                          </div>
+                        {{else}}
+                          <div class="pull-right col-md-6">
+                            <a href="#collapseBox" class="pull-right" {{action toggleDetails
target="view"}}
+                               data-toggle="collapse">
+                                {{t admin.stackUpgrade.dialog.details.open}}
+                            </a>
+                          </div>
+                        {{/if}}
+                    </div>
+                    <div id="collapseBox" class="panel-collapse collapse">
+                      <div class="panel-body">
+                          {{#if view.failedItem.isTasksLoaded}}
+                            <div class="clear col-md-12">
+                                {{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 btn-default" {{bindAttr disabled="controller.requestInProgress"}}
{{action retry view.failedItem target="view"}}>{{t common.retry}}</button>
+                        </div>
+                      {{/if}}
+                  </div>
+                {{/unless}}
+            {{/if}}
         {{#if view.plainManualItem}}
           <div class="panel panel-default 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/eead09be/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 1a829fb..00cde9f 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="col-md-3">
+    <div class="col-md-4 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="col-md-1">
-      <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="col-md-3">
+          <div class="col-md-4 pull-right">
             {{view App.ProgressBarView
               progressBinding="item.progress"
               statusBinding="item.status"
-            }}
-          </div>
-          <div class="col-md-1">
-            <div>{{item.progress}}%</div>
+              }}
+            <div class="percent pull-right">
+                <span>{{item.progress}}%</span>
+            </div
           </div>
         {{/if}}
       </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/eead09be/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 fbd8e3a..b807976 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': 'glyphicon glyphicon-ok completed',
     'WARNING': 'glyphicon glyphicon-warning-sign',
     'FAILED': 'glyphicon glyphicon-exclamation-sign failed',

http://git-wip-us.apache.org/repos/asf/ambari/blob/eead09be/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/eead09be/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 2f14e50..d0671f9 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/eead09be/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: {


Mime
View raw message