AMBARI-10667. View: create view layout is incorrect (alexantonenko)

ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/CreateViewInstanceCtrl.js

@@ -34,7 +34,7 @@ angular.module('ambariAdminConsole')
         item.value = item['defaultValue'];
         item.clusterConfig = !!item.clusterConfig;
         item.displayName = item.name.replace(/\./g, '\.\u200B');
-        $scope.numberOfClusterConfigs = item.clusterConfig ? $scope.numberOfClusterConfigs+1 : $scope.numberOfClusterConfigs;
+        item.clusterConfig ? $scope.numberOfClusterConfigs++ : $scope.numberOfSettingConfigs++;
       });
 
       $scope.clusterConfigurable = viewVersion.ViewVersionInfo.cluster_configurable;
@@ -74,6 +74,7 @@ angular.module('ambariAdminConsole')
   $scope.noClusterAvailible = true;
   $scope.cluster = null;
   $scope.numberOfClusterConfigs = 0;
+  $scope.numberOfSettingConfigs = 0;
 
   Cluster.getAllClusters().then(function (clusters) {
     if(clusters.length >0){

ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/create.html

@@ -23,14 +23,14 @@
 <form class="form-horizontal create-view-form" role="form" name="form.instanceCreateForm" novalidate>
   <div class="view-header">
     <div class="form-group">
-      <div class="col-sm-3">
+      <div class="col-sm-2">
         <label for="" class="control-label">View</label>
       </div>
       <div class="col-sm-10"><label for="" class="control-label">{{view.ViewVersionInfo.view_name}}</label></div>
     </div>
     <div class="form-group">
-      <div class="col-sm-3"><label for="" class="control-label">Version</label></div>
-      <div class="col-sm-3">
+      <div class="col-sm-2"><label for="" class="control-label">Version</label></div>
+      <div class="col-sm-2">
         <select ng-model="version" class="instanceversion-input form-control" ng-change="versionChanged()" ng-options="o as o for o in versions"></select>
       </div>
     </div>
@@ -38,7 +38,7 @@
 
   <div class="panel panel-default">
     <div class="panel-heading">
-      <h3 class="panel-title">Settings</h3>
+      <h3 class="panel-title">Details</h3>
     </div>
     <div class="panel-body">
       <div class="form-group"
@@ -82,6 +82,23 @@
           </div>
         </div>
       </div>
+      <div class="form-group">
+        <div class="col-sm-10 col-sm-offset-3">
+          <div class="checkbox">
+            <label>
+              <input type="checkbox" ng-model='instance.visible' class="visibilityCheckbox"> Visible
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="panel panel-default" ng-hide="!numberOfSettingConfigs">
+    <div class="panel-heading">
+      <h3 class="panel-title">Settings</h3>
+    </div>
+    <div class="panel-body">
       <div class="form-group" ng-repeat="parameter in instance.properties | filter:{clusterConfig:false}"
            ng-class="{'has-error' : ((form.instanceCreateForm[parameter.name].$error.required && form.instanceCreateForm.submitted) || form.instanceCreateForm[parameter.name].validationError)}" >
         <label for="" class="col-sm-3 control-label" ng-class="{'not-required': !parameter.required}">{{parameter.label || parameter.displayName}}{{parameter.required ? '*' : ''}}</label>
@@ -100,17 +117,9 @@
           </div>
         </div>
       </div>
-      <div class="form-group">
-        <div class="col-sm-10 col-sm-offset-3">
-          <div class="checkbox">
-            <label>
-              <input type="checkbox" ng-model='instance.visible' class="visibilityCheckbox"> Visible
-            </label>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
+
   <div class="panel panel-default" ng-hide="!numberOfClusterConfigs">
     <div class="panel-heading">
       <h3 class="panel-title">Cluster Configuration</h3>