AMBARI-10763 Subsection borders not shown correctly in enhanced configs. (ababiichuk)

ambari-web/app/models/configs/sub_section.js

@@ -80,6 +80,27 @@ App.SubSection = DS.Model.extend({
     return this.get('configs').filterProperty('isValid', false).length;
   }.property('configs.@each.isValid'),
 
+  /**
+   * @type {boolean}
+   */
+  addLeftVerticalSplitter: function() {
+    return !this.get('isFirstColumn');
+  }.property('isFirstColumn'),
+
+  /**
+   * @type {boolean}
+   */
+  addRightVerticalSplitter: function() {
+    return !this.get('isLastColumn');
+  }.property('isLastColumn'),
+
+  /**
+   * @type {boolean}
+   */
+  showTopSplitter: function() {
+    return !this.get('isFirstRow') && !this.get('border');
+  }.property('isFirstRow', 'border'),
+
   /**
    * @type {boolean}
    */

ambari-web/app/styles/application.less

@@ -5638,16 +5638,27 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
           font-size: 22px;
           font-weight: 400;
         }
-
         h5 {
           font-size: 18px;
           font-weight: 400;
         }
-        .vertical-splitter {
+        .vertical-splitter-r {
+          border-right: 2px solid #ccc; // vertical splitter
+          padding-right: 20px;
+          padding-left: 0px;
+        }
+
+        .vertical-splitter-l {
           border-left: 2px solid #ccc; // vertical splitter
+          margin-left: -2px;
           padding-left: 20px;
+          padding-right: 0px;
+        }
+        div.with-border {
+          border: 1px solid #aaa;
+          padding: 10px;
+          margin-bottom: 20px;
         }
-
         .config-subsection-table {
           width: 100%;
           height: 90%; // fallback option
@@ -5655,12 +5666,16 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
           border-collapse: separate;
           table-layout: fixed;
           .config-subsection {
+            padding: 0px;
             vertical-align: top;
             &.no-horizontal-splitter {
               border-bottom: none; // no horizontal splitter for subsection on the last row
             }
-            border-bottom: 2px solid #ccc; // horizontal splitter
-
+            &.top-horizontal-splitter {
+              border-top: 2px solid #ccc; // horizontal splitter
+              padding-top: 15px;
+              padding-bottom: 15px;
+            }
             .directories {
               min-width: 0px !important;
             }

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

@@ -27,15 +27,19 @@
               {{#each subRow in section.subsectionRows}}
                 <tr>
                   {{#each subsection in subRow}}
-                    <td {{bindAttr class="subsection.isHiddenByFilter:invisible subsection.isFirstColumn::vertical-splitter :config-subsection subsection.isLastRow:no-horizontal-splitter" colspan="subsection.columnSpan" rowspan="subsection.rowSpan"}}>
-                      <h5>{{subsection.displayName}}&nbsp;</h5>
-                      {{#each config in subsection.configs}}
-                        {{#if config.widget}}
-                          {{#unless config.isHiddenByFilter}}
-                            {{view config.widget configBinding="config" canEditBinding="view.canEdit" sectionBinding="section" subSectionBinding="subsection" tabBinding="tab"}}
-                          {{/unless}}
-                        {{/if}}
-                      {{/each}}
+                    <td {{bindAttr class="subsection.isHiddenByFilter:invisible subsection.showTopSplitter:top-horizontal-splitter:no-horizontal-splitter :config-subsection" colspan="subsection.columnSpan" rowspan="subsection.rowSpan"}}>
+                      <div {{bindAttr class="subsection.addLeftVerticalSplitter:vertical-splitter-l subsection.addRightVerticalSplitter:vertical-splitter-r"}}>
+                        <div {{bindAttr class="subsection.border:with-border"}}>
+                          <h5>{{subsection.displayName}}&nbsp;</h5>
+                          {{#each config in subsection.configs}}
+                            {{#if config.widget}}
+                              {{#unless config.isHiddenByFilter}}
+                                {{view config.widget configBinding="config" canEditBinding="view.canEdit" sectionBinding="section" subSectionBinding="subsection" tabBinding="tab"}}
+                              {{/unless}}
+                            {{/if}}
+                          {{/each}}
+                        </div>
+                      </div>
                     </td>
                   {{/each}}
                 </tr>