This is an automated email from the ASF dual-hosted git repository.

atkach pushed a commit to branch trunk
in repository https://gitbox.apache.org/repos/asf/ambari.git


The following commit(s) were added to refs/heads/trunk by this push:
     new 69150f7  AMBARI-23880 Install Wizard: fix markup issues
69150f7 is described below

commit 69150f7ff7ae90cfb220624b7a72777fdac2fc32
Author: Andrii Tkach <atk...@apache.org>
AuthorDate: Thu May 17 17:24:03 2018 +0300

    AMBARI-23880 Install Wizard: fix markup issues
---
 .../app/controllers/wizard/step7_controller.js     |  2 +-
 .../app/controllers/wizard/step8_controller.js     |  2 +-
 ambari-web/app/messages.js                         |  1 +
 ambari-web/app/styles/application.less             |  2 +-
 ambari-web/app/styles/wizard.less                  | 49 +++++++++++++++-----
 .../templates/common/configs/services_config.hbs   | 54 +++++++++++-----------
 ambari-web/app/templates/wizard/step3.hbs          |  4 ++
 ambari-web/app/templates/wizard/step6.hbs          | 12 ++---
 .../app/templates/wizard/step7/directories_tab.hbs |  2 +-
 ambari-web/app/templates/wizard/step9.hbs          | 10 ++--
 .../app/views/common/configs/services_config.js    | 30 ++++++++++++
 ambari-web/app/views/wizard/step6_view.js          | 10 ++++
 12 files changed, 123 insertions(+), 55 deletions(-)

diff --git a/ambari-web/app/controllers/wizard/step7_controller.js 
b/ambari-web/app/controllers/wizard/step7_controller.js
index 8c52163..c408e7c 100644
--- a/ambari-web/app/controllers/wizard/step7_controller.js
+++ b/ambari-web/app/controllers/wizard/step7_controller.js
@@ -2071,7 +2071,7 @@ App.WizardStep7Controller = 
Em.Controller.extend(App.ServerValidatorMixin, App.E
     var validations = 
this.get('stepConfigs').mapProperty('configsWithErrors.length').reduce(Em.sum, 
0);
     var configErrorList = this.get('configErrorList');
     this.set('issuesCounter', recommendations + validations + 
configErrorList.get('issues.length') + 
configErrorList.get('criticalIssues.length'));
-    if (validations > this.get('validationsCounter')) {
+    if (validations !== this.get('validationsCounter')) {
       this.ringBell();
     }
     this.set('hasErrors', !!validations);
diff --git a/ambari-web/app/controllers/wizard/step8_controller.js 
b/ambari-web/app/controllers/wizard/step8_controller.js
index afba6bd..578c337 100644
--- a/ambari-web/app/controllers/wizard/step8_controller.js
+++ b/ambari-web/app/controllers/wizard/step8_controller.js
@@ -1709,7 +1709,7 @@ App.WizardStep8Controller = 
Em.Controller.extend(App.AddSecurityConfigs, App.wiz
   showLoadingIndicator: function () {
     return App.ModalPopup.show({
 
-      header: '',
+      header: Em.I18n.t('installer.step8.deployPopup.header'),
 
       showFooter: false,
 
diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js
index 532766c..e38c522 100644
--- a/ambari-web/app/messages.js
+++ b/ambari-web/app/messages.js
@@ -1021,6 +1021,7 @@ Em.I18n.translations = {
   'installer.step8.kerberors.warning': '<strong>Because Kerberos has been 
manually installed on the cluster, you will have to create/distribute 
principals and keytabs when this operation is finished.</strong>',
   'installer.step8.generateBlueprint.popup.msg': 'You will be 
<b>downloading</b> blueprint.json and clustertemplate.json to your local 
machine. <br/><br/> You can use them to deploy a cluster via AMBARI REST API. 
<br/> Update clustertemplate.json with a custom cluster name if you do not want 
to use name <b>{0}</b>. <br/><br/>If you want to use custom repo URLs, make 
sure to update them via Ambari REST API before deploying the cluster.',
   'installer.step8.deployPopup.message':'Preparing to Deploy: {0} of {1} tasks 
completed.',
+  'installer.step8.deployPopup.header':'Initializing Tasks',
   'installer.step8.hosts':' hosts',
   'installer.step8.host':' host',
   'installer.step8.other':'and {0} other hosts',
diff --git a/ambari-web/app/styles/application.less 
b/ambari-web/app/styles/application.less
index 0c6d524..c54f5e1 100644
--- a/ambari-web/app/styles/application.less
+++ b/ambari-web/app/styles/application.less
@@ -378,7 +378,7 @@ footer {
 }
 
 .badge-warning {
-  background-color: #e98a41!important;
+  background-color: #666 !important;
 }
 
 table.diff {
diff --git a/ambari-web/app/styles/wizard.less 
b/ambari-web/app/styles/wizard.less
index d0308e9..3be7652 100644
--- a/ambari-web/app/styles/wizard.less
+++ b/ambari-web/app/styles/wizard.less
@@ -123,6 +123,9 @@
 
     .compact-panel-heading {
       padding: 10px;
+      .button-section {
+        min-height: 34px;
+      }
     }
     .hosts-panel {
       padding-left: 0;
@@ -189,7 +192,10 @@
     }
     #confirm-hosts-table {
       th:first-of-type {
-        width: 25px;
+        width: 20px;
+        label {
+          top: 2px;
+        }
       }
       th:nth-of-type(2) {
         width: 42%;
@@ -215,10 +221,8 @@
       #display-action {
         visibility:visible;
       }
-      .step3-table-checkbox {
-        label {
-          top: 1px;
-        }
+      .step3-table-checkbox label {
+        top: 1px;
       }
     }
     #warningsSection {
@@ -250,10 +254,10 @@
       max-height: 440px;
       position: relative;
       display: flex;
-      overflow-y: scroll;
+      overflow-y: auto;
       #component_assign_table {
         display: inline-block;
-        overflow-x: scroll;
+        overflow-x: auto;
         margin-left: 190px;
         margin-bottom: 10px;
         height: 100%;
@@ -275,11 +279,11 @@
         .host-component-checkbox {
           line-height: 17px;
           font-size: 12px;
-          top: 0px;
+          top: 0;
         }
         .freeze {
           position: absolute;
-          left: 0px;
+          left: 0;
           width: 210px;
           border-top-color: #eee;
           border-bottom: 1px solid #eee;
@@ -294,7 +298,7 @@
         }
         .static-pagination {
           position: absolute;
-          right: 0px;
+          right: 10px;
         }
       }
     }
@@ -321,6 +325,23 @@
     table {
       margin-bottom: 0;
     }
+    .overall-progress {
+      margin-top: 10px;
+      .progress {
+        margin-bottom: 0;
+        width: calc(~"100% - 100px");
+        display: inline-block;
+      }
+      .progress-message {
+        display: inline-block;
+        vertical-align: top;
+        float: right;
+        line-height: 20px;
+      }
+    }
+    .panel.panel-default {
+      margin-top: 0;
+    }
     #host-filter {
       margin-top: 1px;
       ul {
@@ -939,7 +960,8 @@
   }
 }
 
-#directories {
+.one-row-tabs-container {
+  padding: 5px 10px;
   .left-arrow, .right-arrow {
     float: left;
     text-align: center;
@@ -959,6 +981,9 @@
     }
     overflow: hidden;
   }
+}
+
+#directories {
   .config-actions {
     margin-right: 10px;
   }
@@ -1138,7 +1163,7 @@
       color: #B94A48;
     }
     &.warning {
-      color: #e98a41;
+      color: #666;
     }
     &.animated {
       -webkit-animation: ring 2s ease;
diff --git a/ambari-web/app/templates/common/configs/services_config.hbs 
b/ambari-web/app/templates/common/configs/services_config.hbs
index 044cbca..b578191 100644
--- a/ambari-web/app/templates/common/configs/services_config.hbs
+++ b/ambari-web/app/templates/common/configs/services_config.hbs
@@ -16,30 +16,32 @@
 * limitations under the License.
 }}
 {{#if controller.isInstallWizard}}
-  <span class="service-name">{{t common.service}}&nbsp;</span>
-  <span class="btn-group">
-    <button class="btn btn-default dropdown-toggle first 
select-service-dropdown" data-toggle="dropdown">
-      {{controller.selectedService.displayName}}
-      {{#if selectedService.configsWithErrors.length}}
-        <span class="badge 
badge-important">{{selectedService.configsWithErrors.length}}</span>
-      {{/if}}
-    </button>
-    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-      <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu">
-      {{#each service in controller.stepConfigs}}
-        <li>
-          <a href="#" {{action selectService service target="controller"}}>
-            {{service.displayName}}
-            {{#if service.configsWithErrors.length}}
-              <span class="badge 
badge-important">{{service.configsWithErrors.length}}</span>
-            {{/if}}
-          </a>
-        </li>
-      {{/each}}
-    </ul>
-  </span>
+  <div class="row one-row-tabs-container">
+    <div class="left-arrow">
+      <a href="#"{{bindAttr class="view.isLeftArrowDisabled:disabled"}} 
{{action "scrollTabsLeft" target="view"}}> <i class="icon-angle-left"></i>
+      </a>
+    </div>
+    <div class="tabs-container">
+      <ul class="nav nav-tabs mbm">
+        {{#each tab in controller.stepConfigs}}
+          <li rel='tooltip' {{bindAttr class="tab.isActive:active" 
data-original-title="tab.tooltipMsg"}}>
+            <a href="#" {{action selectService tab target="controller"}} 
{{bindAttr data-target="tab.headingClass"}}
+               data-toggle="tab">
+              {{formatRole tab.serviceName}}
+              {{#if tab.errorsCount}}
+                <span class="badge badge-important">{{tab.errorsCount}}</span>
+              {{/if}}
+            </a>
+          </li>
+        {{/each}}
+      </ul>
+    </div>
+    <div class="right-arrow">
+      <a href="#" {{bindAttr class="view.isRightArrowDisabled:disabled"}} 
{{action "scrollTabsRight" target="view"}}>
+        <i class="icon-angle-right"></i>
+      </a>
+    </div>
+  </div>
 {{else}}
   {{#if controller.isRecommendedLoaded}}
     <ul class="nav nav-tabs" {{QAAttr "config-tabs"}}>
@@ -60,7 +62,7 @@
 {{/if}}
 {{#if controller.isInstallWizard}}
   {{#if issuesCounter}}
-    <span class="notifications-group pull-right">
+    <div class="notifications-group align-right">
       <span class="alerts-label dropdown-toggle" data-toggle="dropdown" 
aria-haspopup="true" aria-expanded="false">
         <span id="issues-bell" {{bindAttr class=":glyphicon :glyphicon-bell 
controller.hasErrors:important:warning"}}></span>
         <span id="issues-counter" {{bindAttr class=":badge 
controller.hasErrors:badge-important:badge-warning"}}>
@@ -73,7 +75,7 @@
           {{view App.DependentConfigsListView 
recommendationsBinding="controller.recommendations" 
requiredChangesBinding="controller.requiredChanges"}}
         </div>
       </div>
-    </span>
+    </div>
   {{/if}}
 {{/if}}
 {{#if hasChangedDependencies}}
diff --git a/ambari-web/app/templates/wizard/step3.hbs 
b/ambari-web/app/templates/wizard/step3.hbs
index 6b32c6f..5290845 100644
--- a/ambari-web/app/templates/wizard/step3.hbs
+++ b/ambari-web/app/templates/wizard/step3.hbs
@@ -71,6 +71,8 @@
                 <th {{QAAttr "confirm-hosts-table-heading-cell"}}>{{t 
common.status}}</th>
                 <!-- given by the parsing function that parses data from 
bootstrap call, dynamically assign the color -->
                 <th {{QAAttr "confirm-hosts-table-heading-cell"}}>{{t 
common.action}}</th>
+                <!-- empty th to contain extra space of table -->
+                <th></th>
                 <!-- trash icon -->
                 <!-- retry icon -->
               </tr>
@@ -103,6 +105,8 @@
                         <i class="glyphicon glyphicon-trash" {{translateAttr 
title="common.remove"}}></i>
                       </a>
                     </td>
+                    <!-- empty td to contain extra space of table -->
+                    <td></td>
                   {{/view}}
                 {{/each}}
               {{else}}
diff --git a/ambari-web/app/templates/wizard/step6.hbs 
b/ambari-web/app/templates/wizard/step6.hbs
index 8071e10..9673abd 100644
--- a/ambari-web/app/templates/wizard/step6.hbs
+++ b/ambari-web/app/templates/wizard/step6.hbs
@@ -68,13 +68,11 @@
           <tbody>
             {{#each host in view.pageContent}}
               <tr {{QAAttr "host-row"}} {{bindAttr 
class="host.isLast:last-row"}}>
-                  {{#view App.WizardStep6HostView hostBinding="host" }}
-                  <div class="checkbox">
-                    <span class="trim_hostname">{{host.hostName}}</span>
-                    {{#if host.hasMaster}}
-                      <i {{QAAttr "has-masters"}} class="glyphicon 
glyphicon-asterisks">&#10037;</i>
-                    {{/if}}
-                  </div>
+                {{#view App.WizardStep6HostView hostBinding="host" }}
+                  <span class="trim_hostname">{{host.hostName}}</span>
+                  {{#if host.hasMaster}}
+                    <i {{QAAttr "has-masters"}} class="glyphicon 
glyphicon-asterisks">&#10037;</i>
+                  {{/if}}
                 {{/view}}
                 {{#each checkbox in host.checkboxes}}
                   <td {{QAAttr "toggle-component"}} {{bindAttr 
class="checkbox.hasErrorMessage:error checkbox.hasWarnMessage:warning 
checkbox.component"}}>
diff --git a/ambari-web/app/templates/wizard/step7/directories_tab.hbs 
b/ambari-web/app/templates/wizard/step7/directories_tab.hbs
index 70fb8d3..a58c741 100644
--- a/ambari-web/app/templates/wizard/step7/directories_tab.hbs
+++ b/ambari-web/app/templates/wizard/step7/directories_tab.hbs
@@ -15,7 +15,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div class="row" style="padding: 5px 10px;">
+<div class="row one-row-tabs-container">
   <div class="left-arrow">
     <a href="#"{{bindAttr class="view.isLeftArrowDisabled:disabled"}} {{action 
"scrollTabsLeft" target="view"}}> <i class="icon-angle-left"></i>
     </a>
diff --git a/ambari-web/app/templates/wizard/step9.hbs 
b/ambari-web/app/templates/wizard/step9.hbs
index ba13c2c..2eb005a 100644
--- a/ambari-web/app/templates/wizard/step9.hbs
+++ b/ambari-web/app/templates/wizard/step9.hbs
@@ -22,14 +22,12 @@
 
   <div class="panel panel-default">
     <div class="panel-body">
-      <div class="row" {{QAAttr "overall-progress"}}>
-        <div class="col-md-10">
-          <div class="progress" {{QAAttr "progress-{status}"}}>
-            <div {{bindAttr class="view.isStepCompleted::progress-bar-striped 
view.isStepCompleted::active view.barColor :progress-bar"}} {{bindAttr 
style="view.barWidth"}} {{QAAttr "progress-bar-{progress}"}}>
-            </div>
+      <div class="overall-progress" {{QAAttr "overall-progress"}}>
+        <div class="progress" {{QAAttr "progress-{status}"}}>
+          <div {{bindAttr class="view.isStepCompleted::progress-bar-striped 
view.isStepCompleted::active view.barColor :progress-bar"}} {{bindAttr 
style="view.barWidth"}} {{QAAttr "progress-bar-{progress}"}}>
           </div>
         </div>
-        <div class="col-md-2" {{QAAttr 
"progress-message"}}>{{view.progressMessage}}</div>
+        <div {{QAAttr "progress-message"}} 
class="progress-message">{{view.progressMessage}}</div>
       </div>
 
       <div class="panel panel-default panel-internal install-retry-panel">
diff --git a/ambari-web/app/views/common/configs/services_config.js 
b/ambari-web/app/views/common/configs/services_config.js
index 7d1ea5a..5d88a77 100644
--- a/ambari-web/app/views/common/configs/services_config.js
+++ b/ambari-web/app/views/common/configs/services_config.js
@@ -29,8 +29,38 @@ App.ServicesConfigView = Em.View.extend({
       this.get('controller').loadStep();
     } else {
       this.get('controller').selectProperService();
+      this.set('controller.selectedService.isActive', true);
       this.get('controller').selectedServiceObserver();
     }
+  },
+
+  getScrollInterval: function () {
+    var INTERVAL = 300;
+    var container = $(this.get('element')).find('.tabs-container');
+    var content = container.find('ul');
+    var gap = content.width() - container.width();
+    var gapLeft = gap%INTERVAL;
+    var totalScrollsNamber = Math.floor(gap/INTERVAL) || 1;
+    return INTERVAL + Math.round(gapLeft/totalScrollsNamber) + 1;
+  },
+
+  scrollTabsLeft: function () {
+    if (!this.get('isLeftArrowDisabled')) this.scrollTabs('left');
+  },
+
+  scrollTabsRight: function () {
+    if (!this.get('isRightArrowDisabled')) this.scrollTabs('right');
+  },
+
+  scrollTabs: function (dir) {
+    var container = $(this.get('element')).find('.tabs-container');
+    var content = container.find('ul');
+    var interval = this.getScrollInterval();
+    this.set('isLeftArrowDisabled', dir === 'left' && interval >= 
container.scrollLeft());
+    this.set('isRightArrowDisabled', dir === 'right' && content.width() - 
container.width() <= container.scrollLeft() + interval);
+    container.animate({
+      scrollLeft: (dir === 'left' ?  '-' : '+') + '=' + interval + 'px'
+    });
   }
 
 });
diff --git a/ambari-web/app/views/wizard/step6_view.js 
b/ambari-web/app/views/wizard/step6_view.js
index fdd0777..8810c49 100644
--- a/ambari-web/app/views/wizard/step6_view.js
+++ b/ambari-web/app/views/wizard/step6_view.js
@@ -50,6 +50,16 @@ App.WizardStep6View = App.TableView.extend({
   didInsertElement: function () {
     this.setLabel();
     this.get('controller').loadStep();
+    Em.run.next(this, this.adjustColumnWidth);
+  },
+
+  adjustColumnWidth: function() {
+    const table = $('#component_assign_table');
+    const columnsCount = this.get('controller.headers.length');
+    if (table.width() > table.find('tbody').width()) {
+      const columnWidth = Math.floor(table.width() / columnsCount);
+      table.find("th:not('.freeze'), td:not('.freeze')").width(columnWidth);
+    }
   },
 
   /**

-- 
To stop receiving notification emails like this one, please contact
atk...@apache.org.

Reply via email to