AMBARI-22922 Style edits of Service Configuration Group modal

ambari-web/app/styles/application.less

@@ -1851,20 +1851,15 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
 
 #config-group-select-create-dialog {
   .select-create-config-group-div {
+    margin: 0 0 20px 20px;
     .dropdown-menu {
       max-height: 160px;
       max-width: 300px;
       overflow-y: auto;
     }
   }
-  .message{
-    color: #777;
-  }
-}
-
-#config-group-confirm-save {
-  .message{
-    color: #777;
+  .radio, .checkbox {
+    margin-bottom: 5px;
   }
 }
 

ambari-web/app/styles/bootstrap_overrides.less

@@ -454,4 +454,8 @@ select.form-control {
 .btn-group.open .dropdown-menu input[type="checkbox"] + label,
 .dropdown.open .dropdown-menu input[type="checkbox"] + label {
   line-height: 1.3em;
+}
+
+input[type="checkbox"]:checked + label:after {
+  line-height: 2em;
 }

ambari-web/app/styles/modal_popups.less

@@ -248,20 +248,6 @@
         clear:both;
       }
       .override-controls{
-        #filter-dropdown-div {
-          .dropdown-menu {
-            right: 0;
-            left: auto;
-          }
-        }
-        #component-dropdown-div {
-          vertical-align: top;
-          padding-left: 5px;
-          .dropdown-menu {
-            right: 0;
-            left: auto;
-          }
-        }
         .input-group{
           input{
             -webkit-border-radius: 4px 0 0 4px;

ambari-web/app/styles/service_configurations.less

@@ -295,3 +295,37 @@
     padding-top: 5px;
   }
 }
+
+#host-selection-dialog {
+  .modal-body {
+    .table {
+      th:first-child,
+      td:first-child {
+        width: 30px;
+      }
+      th + th,
+      td + td {
+        width: 50%;
+      }
+      td, th {
+        line-height: 24px;
+      }
+      .checkbox {
+        padding-top: 0;
+        height: 24px;
+        min-height: 24px;
+      }
+    }
+    .selected-hosts-link {
+      line-height: 34px;
+    }
+    #filter-dropdown-div,
+    #component-dropdown-div {
+      padding-right: 0;
+      .dropdown-menu {
+        right: 0;
+        left: auto;
+      }
+    }
+  }
+}

ambari-web/app/styles/theme/bootstrap-ambari.css

@@ -763,7 +763,7 @@ input.radio + label:before {
   content: '';
   position: absolute;
   left: 0;
-  top: 0;
+  top: 3px;
   width: 12px;
   height: 12px;
   box-sizing: border-box;
@@ -777,7 +777,7 @@ input.radio:checked + label:after {
   content: '';
   background-color: #FFF;
   position: absolute;
-  top: 3px;
+  top: 6px;
   left: 3px;
   width: 6px;
   height: 6px;

ambari-web/app/templates/common/configs/overrideWindow.hbs

@@ -25,78 +25,76 @@
             {{view.parentView.warningMessage}}
           </div>
         {{/if}}
-        <table style="width: 100%;">
-          <tr>
-            <td>
-              <a href="#" {{action toggleShowSelectedHosts target="view" }}>{{view.hostSelectMessage}}</a>
-              {{#if view.showOnlySelectedHosts}}
-                <i class='glyphicon glyphicon-ok-sign'></i>
-              {{/if}}
-            </td>
-            <td width="45%">
-              <div class="row">
-                <div class="col-md-7" id="filter-dropdown-div">
-                  <!-- Filter text box with drop-down -->
-                  <div class="input-group">
-                    {{view Ember.TextField valueBinding="view.filterText" id="appendedDropdownButton"
-                    placeholderBinding="view.filterTextPlaceholder" classNames="form-control" disabledBinding="view.isDisabled"}}
-                    <div class="input-group-btn">
-                      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" {{bindAttr disabled="view.isDisabled"}}>
-                        <span class="caret"></span>
-                      </button>
-                      <ul class="dropdown-menu">
-                        {{#each column in view.filterColumns}}
-                          <li>
-                            <a href="#" {{action selectFilterColumn column target="view"}}>
-                              {{#if column.selected}}
-                                <i class='glyphicon glyphicon-ok-sign'></i>
-                              {{else}}
-                                <i class='glyphicon glyphicon-placeholder'></i>
-                              {{/if}}
-                              {{column.name}}
-                            </a>
-                          </li>
-                        {{/each}}
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-5" id="component-dropdown-div">
-                  <!-- Host-components drop-down -->
-                  <div>
-                    <button class="btn btn-block btn-default dropdown-toggle" data-toggle="dropdown" href="#" {{bindAttr disabled="view.isDisabled"}}>
-                      {{t common.components}}
-                      <span class="caret"></span>
-                    </button>
-                    <ul class="dropdown-menu">
-                      <!-- dropdown menu links -->
-                      {{#each component in view.filterComponents}}
-                        <li>
-                          <a href="#" {{action selectFilterComponent component target="view"}}>
-                            {{#if component.selected}}
-                              <i class='glyphicon glyphicon-ok-sign'></i>
-                            {{else}}
-                              <i class='glyphicon glyphicon-placeholder'></i>
-                            {{/if}}
-                            {{component.displayName}}
-                          </a>
-                        </li>
-                      {{/each}}
-                    </ul>
-                  </div>
+
+        <div class="row">
+          <div class="col-md-6 selected-hosts-link">
+            <a href="#" {{action toggleShowSelectedHosts target="view" }}>{{view.hostSelectMessage}}</a>
+            {{#if view.showOnlySelectedHosts}}
+              <i class='glyphicon glyphicon-ok-sign'></i>
+            {{/if}}
+          </div>
+          <div class="col-md-6">
+            <div class="col-md-7" id="filter-dropdown-div">
+              <!-- Filter text box with drop-down -->
+              <div class="input-group">
+                {{view Ember.TextField valueBinding="view.filterText" id="appendedDropdownButton"
+                       placeholderBinding="view.filterTextPlaceholder" classNames="form-control" disabledBinding="view.isDisabled"}}
+                <div class="input-group-btn">
+                  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" {{bindAttr disabled="view.isDisabled"}}>
+                    <span class="caret"></span>
+                  </button>
+                  <ul class="dropdown-menu">
+                    {{#each column in view.filterColumns}}
+                      <li>
+                        <a href="#" {{action selectFilterColumn column target="view"}}>
+                          {{#if column.selected}}
+                            <i class='glyphicon glyphicon-ok-sign'></i>
+                          {{else}}
+                            <i class='glyphicon glyphicon-placeholder'></i>
+                          {{/if}}
+                          {{column.name}}
+                        </a>
+                      </li>
+                    {{/each}}
+                  </ul>
                 </div>
               </div>
-            </td>
-          </tr>
-        </table>
+            </div>
+            <div class="col-md-5" id="component-dropdown-div">
+              <!-- Host-components drop-down -->
+              <div>
+                <button class="btn btn-block btn-default dropdown-toggle" data-toggle="dropdown" href="#" {{bindAttr disabled="view.isDisabled"}}>
+                  {{t common.components}}
+                  <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu">
+                  <!-- dropdown menu links -->
+                  {{#each component in view.filterComponents}}
+                    <li>
+                      <a href="#" {{action selectFilterComponent component target="view"}}>
+                        {{#if component.selected}}
+                          <i class='glyphicon glyphicon-ok-sign'></i>
+                        {{else}}
+                          <i class='glyphicon glyphicon-placeholder'></i>
+                        {{/if}}
+                        {{component.displayName}}
+                      </a>
+                    </li>
+                  {{/each}}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <table class="table table-hover">
           <thead>
             <tr>
-              <th width="45%">{{t common.host}}</th>
-              <th width="45%">{{view.filterColumn.name}}</th>
-              <th width="10%">
+              <th>
                 {{view App.CheckboxView checkedBinding="view.allHostsSelected" disabledBinding="view.isDisabled"}}
               </th>
+              <th>{{t common.host}}</th>
+              <th>{{view.filterColumn.name}}</th>
             </tr>
           </thead>
          </table>
@@ -105,15 +103,15 @@
             <tbody>
               {{#each entry in view.pageContent}}
                 <tr {{bindAttr class="entry.filtered::hidden entry.selected:active"}}>
-                  <td width="45%">
+                  <td>
+                    {{view App.CheckboxView checkedBinding="entry.selected"}}
+                  </td>
+                  <td>
                     {{entry.host.hostName}}
                   </td>
                   <td>
                     {{entry.filterColumnValue}}
                   </td>
-                  <td width="10%">
-                    {{view App.CheckboxView checkedBinding="entry.selected"}}
-                  </td>
                 </tr>
               {{/each}}
             </tbody>

ambari-web/app/templates/common/configs/selectCreateConfigGroup.hbs

@@ -23,12 +23,8 @@
     {{view.parentView.warningMessage}}
   </div>
   <form>
-    <div class="form-group">
-      <div class="radio">
-        <label {{bindAttr class="view.parentView.hasExistedGroups::message"}}>
-          {{view view.selectConfigGroupRadioButton}}
-        </label>
-      </div>
+    <div>
+      {{view view.selectConfigGroupRadioButton}}
     </div>
     {{#if view.parentView.availableConfigGroups.length}}
       <div class="select-create-config-group-div">
@@ -48,19 +44,15 @@
             {{/each}}
           </ul>
         </div>
-        <div class="message">{{t config.group.selection.dialog.option.select.msg}}</div>
+        <div>{{t config.group.selection.dialog.option.select.msg}}</div>
       </div>
     {{else}}
       <div class="select-create-config-group-div">
         <div class="alert alert-block">{{view.parentView.noGroups}}</div>
       </div>
     {{/if}}
-    <div class="form-group">
-      <div class="radio">
-        <label>
-          {{view view.createConfigGroupRadioButton}}
-        </label>
-      </div>
+    <div>
+      {{view view.createConfigGroupRadioButton}}
     </div>
     <div class="select-create-config-group-div">
       <div class="row">
@@ -70,7 +62,7 @@
         </div>
       </div>
       <div class="clearfix"></div>
-      <div class="message">{{view.parentView.createNewGroupDescription}}</div>
+      <div>{{view.parentView.createNewGroupDescription}}</div>
     </div>
   </form>
 </div>

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

@@ -52,6 +52,8 @@ var App = require('app');
 App.CheckboxView = Em.View.extend({
   layoutName: require('templates/common/checkbox'),
   concatenatedProperties: ['labelClassNames', 'checkboxClassNames'],
+  classNames: ['checkbox'],
+
   /**
    * Checkbox id generated by Ember. Used for <code>for</code> label attribute
    * @private
@@ -80,7 +82,7 @@ App.CheckboxView = Em.View.extend({
    * Label's text
    * @type {String}
    */
-  label: '&nbsp;',
+  label: '',
 
   /**
    * Label's i18n code

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

@@ -35,6 +35,8 @@ App.RadioButtonView = App.CheckboxView.extend({
    */
   selection: null,
 
+  classNames: ['radio'],
+
   /**
    * <code>value</code> html attribute of radio button
    * @type {[type]}