You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by nc...@apache.org on 2017/11/13 16:57:42 UTC

[25/51] [abbrv] ambari git commit: AMBARI-22377 Ambari 3.0: Implement new design for Admin View: Views page. (atkach)

AMBARI-22377 Ambari 3.0: Implement new design for Admin View: Views page. (atkach)


Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/dd0421a2
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/dd0421a2
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/dd0421a2

Branch: refs/heads/branch-feature-AMBARI-21674
Commit: dd0421a214f2f9b6c2546bad6d2bc5d743094a40
Parents: 654404d
Author: Andrii Tkach <at...@apache.org>
Authored: Tue Nov 7 18:17:20 2017 +0200
Committer: Andrii Tkach <at...@apache.org>
Committed: Tue Nov 7 19:52:10 2017 +0200

----------------------------------------------------------------------
 .../main/resources/ui/admin-web/app/index.html  |   1 +
 .../ambariViews/CloneViewInstanceCtrl.js        | 274 ++++++++++++++
 .../ambariViews/CreateViewInstanceCtrl.js       | 353 +++++++-----------
 .../controllers/ambariViews/ViewsListCtrl.js    | 360 +++++++------------
 .../ui/admin-web/app/scripts/i18n.config.js     |  14 +-
 .../ui/admin-web/app/scripts/routes.js          |  34 +-
 .../ui/admin-web/app/scripts/services/View.js   |  32 +-
 .../resources/ui/admin-web/app/styles/main.css  |  45 ++-
 .../resources/ui/admin-web/app/styles/views.css |  49 +++
 .../app/views/ambariViews/listTable.html        | 110 ------
 .../app/views/ambariViews/listUrls.html         | 117 ------
 .../app/views/ambariViews/modals/create.html    | 238 +++++++-----
 .../app/views/ambariViews/modals/edit.html      | 138 -------
 .../app/views/ambariViews/viewsList.html        | 134 +++++++
 .../ui/admin-web/app/views/urls/create.html     |   4 +-
 .../ui/admin-web/app/views/urls/edit.html       |   4 +-
 .../unit/controllers/CloneViewInstanceCtrl.js   | 135 +++++++
 .../unit/controllers/CreateViewInstanceCtrl.js  | 135 -------
 18 files changed, 1050 insertions(+), 1127 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/dd0421a2/ambari-admin/src/main/resources/ui/admin-web/app/index.html
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/index.html b/ambari-admin/src/main/resources/ui/admin-web/app/index.html
index e9983aa..41cc60f 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/index.html
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/index.html
@@ -139,6 +139,7 @@
 <script src="scripts/controllers/ambariViews/ViewUrlCtrl.js"></script>
 <script src="scripts/controllers/ambariViews/ViewUrlEditCtrl.js"></script>
 <script src="scripts/controllers/ambariViews/CreateViewInstanceCtrl.js"></script>
+<script src="scripts/controllers/ambariViews/CloneViewInstanceCtrl.js"></script>
 <script src="scripts/controllers/clusters/ClustersManageAccessCtrl.js"></script>
 <script src="scripts/controllers/clusters/UserAccessListCtrl.js"></script>
 <script src="scripts/controllers/clusters/ExportBlueprintCtrl.js"></script>

http://git-wip-us.apache.org/repos/asf/ambari/blob/dd0421a2/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/CloneViewInstanceCtrl.js
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/CloneViewInstanceCtrl.js b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/CloneViewInstanceCtrl.js
new file mode 100644
index 0000000..cb37e63
--- /dev/null
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/CloneViewInstanceCtrl.js
@@ -0,0 +1,274 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+
+angular.module('ambariAdminConsole')
+.controller('CloneViewInstanceCtrl',['$scope', 'View','RemoteCluster' , 'Alert', 'Cluster', '$routeParams', '$location', 'UnsavedDialog', '$translate', function($scope, View, RemoteCluster, Alert, Cluster, $routeParams, $location, UnsavedDialog, $translate) {
+  var $t = $translate.instant;
+  $scope.form = {};
+  $scope.constants = {
+    props: $t('views.properties')
+  };
+  $scope.isClone = $routeParams.instanceId ? true : false;
+  var targetUrl = '';
+
+  function loadMeta(){
+    View.getMeta($routeParams.viewId, $scope.version).then(function(data) {
+      var viewVersion = data.data,
+        parameters;
+
+      $scope.view = viewVersion;
+      parameters = viewVersion.ViewVersionInfo.parameters;
+
+      angular.forEach(parameters, function (item) {
+        item.value = item['defaultValue'];
+        item.clusterConfig = !!item.clusterConfig;
+        item.displayName = item.name.replace(/\./g, '\.\u200B');
+        item.clusterConfig ? $scope.numberOfClusterConfigs++ : $scope.numberOfSettingConfigs++;
+      });
+
+      $scope.clusterConfigurable = viewVersion.ViewVersionInfo.cluster_configurable;
+      $scope.clusterConfigurableErrorMsg = $scope.clusterConfigurable ? "" : $t('views.alerts.cannotUseOption');
+
+      $scope.instance = {
+        view_name: viewVersion.ViewVersionInfo.view_name,
+        version: viewVersion.ViewVersionInfo.version,
+        instance_name: '',
+        label: '',
+        visible: true,
+        icon_path: '',
+        icon64_path: '',
+        properties: parameters,
+        description: '',
+        clusterType: 'NONE'
+      };
+
+      //if cloning view instance, then get the instance data and populate settings and properties
+      if($scope.isClone) {
+        View.getInstance($routeParams.viewId, $routeParams.version, $routeParams.instanceId)
+          .then(function(instance) {
+            $scope.instanceClone = instance;
+            $scope.instance.version = instance.ViewInstanceInfo.version;
+            $scope.version =  instance.ViewInstanceInfo.version;
+            $scope.instance.instance_name = instance.ViewInstanceInfo.instance_name + $t('common.copy');
+            $scope.instance.label = instance.ViewInstanceInfo.label + $t('common.copy');
+            $scope.instance.visible = instance.ViewInstanceInfo.visible;
+            $scope.instance.description = instance.ViewInstanceInfo.description;
+            $scope.instance.clusterType=instance.ViewInstanceInfo.cluster_type;
+
+            initConfigurations(parameters);
+          })
+          .catch(function(data) {
+            Alert.error($t('views.alerts.cannotLoadInstanceInfo'), data.data.message);
+          });
+      }
+
+      loadClusters();
+      loadRemoteClusters();
+
+    });
+  }
+
+  function initConfigurations(parameters) {
+    var configuration = angular.copy($scope.instanceClone.ViewInstanceInfo.properties);
+
+    //iterate through the view parameters and get the values from the instance being cloned
+    for (var i = 0; i < parameters.length; i++) {
+      parameters[i].value = configuration[parameters[i].name];
+      parameters[i].clusterConfig = !!parameters[i].clusterConfig;
+    }
+  }
+
+  $scope.$watch(function(scope) {
+    return scope.version;
+  }, function(version) {
+    if( version ){
+      loadMeta();
+    }
+  });
+
+  $scope.enableLocalCluster = function () {
+    if($scope.errorKeys.length > 0) {
+      $scope.errorKeys.forEach( function (key) {
+        try {
+          $scope.form.instanceCreateForm[key].validationError = false;
+          $scope.form.instanceCreateForm[key].validationMessage = '';
+        } catch (e) {
+          console.log($t('views.alerts.unableToResetErrorMessage', {key: key}));
+        }
+      });
+      $scope.errorKeys = [];
+    }
+  };
+
+  // $scope.view = viewVersion;
+  $scope.isAdvancedClosed = true;
+  $scope.instanceExists = false;
+  $scope.errorKeys = [];
+
+  $scope.clusterConfigurable = false;
+  $scope.clusterConfigurableErrorMsg = "";
+  $scope.clusters = [];
+  $scope.remoteClusters = [];
+  $scope.noLocalClusterAvailible = true;
+  $scope.noRemoteClusterAvailible = true;
+  $scope.cluster = null;
+  $scope.data = {};
+  $scope.data.remoteCluster = null;
+  $scope.numberOfClusterConfigs = 0;
+  $scope.numberOfSettingConfigs = 0;
+
+  function loadClusters() {
+    Cluster.getAllClusters().then(function (clusters) {
+      if(clusters.length >0){
+        clusters.forEach(function(cluster) {
+          $scope.clusters.push({
+            "name" : cluster.Clusters.cluster_name,
+            "id" : cluster.Clusters.cluster_id
+          })
+        });
+        $scope.noLocalClusterAvailible = false;
+        //do not set to default Local Cluster configuration when cloning instance
+        if($scope.clusterConfigurable && !$scope.isClone){
+          $scope.instance.clusterType = "LOCAL_AMBARI";
+        }
+      }else{
+        $scope.clusters.push($t('common.noClusters'));
+      }
+      $scope.cluster = $scope.clusters[0];
+    });
+  }
+
+  function loadRemoteClusters() {
+    RemoteCluster.listAll().then(function (clusters) {
+      if(clusters.length >0){
+        clusters.forEach(function(cluster) {
+          $scope.remoteClusters.push({
+            "name" : cluster.ClusterInfo.name,
+            "id" : cluster.ClusterInfo.cluster_id
+          })
+        });
+        $scope.noRemoteClusterAvailible = false;
+      }else{
+        $scope.remoteClusters.push($t('common.noClusters'));
+      }
+      $scope.data.remoteCluster = $scope.remoteClusters[0];
+    });
+  }
+
+
+  $scope.versions = [];
+  $scope.version = null;
+
+  View.getVersions($routeParams.viewId).then(function(versions) {
+    $scope.versions = versions;
+    $scope.version = $scope.versions[$scope.versions.length-1];
+  });
+
+
+  $scope.nameValidationPattern = /^\s*\w*\s*$/;
+
+  $scope.save = function() {
+    if (!$scope.form.instanceCreateForm.isSaving) {
+      $scope.form.instanceCreateForm.submitted = true;
+      if($scope.form.instanceCreateForm.$valid){
+        $scope.form.instanceCreateForm.isSaving = true;
+
+        switch($scope.instance.clusterType) {
+          case 'LOCAL_AMBARI':
+            console.log($scope.cluster);
+            $scope.instance.clusterId = $scope.cluster.id;
+            break;
+          case 'REMOTE_AMBARI':
+            console.log($scope.data.remoteCluster);
+            $scope.instance.clusterId = $scope.data.remoteCluster.id;
+
+            break;
+          default:
+            $scope.instance.clusterId = null;
+        }
+        console.log($scope.instance.clusterId);
+        View.createInstance($scope.instance)
+          .then(function(data) {
+            Alert.success($t('views.alerts.instanceCreated', {instanceName: $scope.instance.instance_name}));
+            $scope.form.instanceCreateForm.$setPristine();
+            if( targetUrl ){
+              $location.path(targetUrl);
+            } else {
+              $location.path('/views/' + $scope.instance.view_name + '/versions/' + $scope.instance.version + '/instances/' + $scope.instance.instance_name + '/edit');
+            }
+            $scope.form.instanceCreateForm.isSaving = false;
+            $scope.$root.$emit('instancesUpdate');
+          })
+          .catch(function (data) {
+            var errorMessage = data.message;
+            var showGeneralError = true;
+
+            if (data.status >= 400 && $scope.instance.clusterType == 'NONE') {
+              try {
+                var errorObject = JSON.parse(errorMessage);
+                errorMessage = errorObject.detail;
+                angular.forEach(errorObject.propertyResults, function (item, key) {
+                  $scope.form.instanceCreateForm[key].validationError = !item.valid;
+                  if (!item.valid) {
+                    showGeneralError = false;
+                    $scope.form.instanceCreateForm[key].validationMessage = item.detail;
+                    $scope.errorKeys.push(key);
+                  }
+                });
+
+                if (showGeneralError) {
+                  $scope.form.instanceCreateForm.generalValidationError = errorMessage;
+                }
+              } catch (e) {
+                console.error($t('views.alerts.unableToParseError', {message: data.message}));
+              }
+            }
+            Alert.error($t('views.alerts.cannotCreateInstance'), errorMessage);
+            $scope.form.instanceCreateForm.isSaving = false;
+          });
+      }
+    }
+  };
+
+  $scope.cancel = function() {
+    $scope.form.instanceCreateForm.$setPristine();
+    $location.path('/views');
+  };
+
+  $scope.$on('$locationChangeStart', function(event, __targetUrl) {
+    if( $scope.form.instanceCreateForm.$dirty ){
+      UnsavedDialog().then(function(action) {
+        targetUrl = __targetUrl.split('#').pop();
+        switch(action){
+          case 'save':
+            $scope.save();
+            break;
+          case 'discard':
+            $scope.form.instanceCreateForm.$setPristine();
+            $location.path(targetUrl);
+            break;
+          case 'cancel':
+            targetUrl = '';
+            break;
+        }
+      });
+      event.preventDefault();
+    }
+  });
+}]);

http://git-wip-us.apache.org/repos/asf/ambari/blob/dd0421a2/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/CreateViewInstanceCtrl.js
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/CreateViewInstanceCtrl.js b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/CreateViewInstanceCtrl.js
index 94b8cc1..d5e3758 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/CreateViewInstanceCtrl.js
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/CreateViewInstanceCtrl.js
@@ -18,263 +18,170 @@
 'use strict';
 
 angular.module('ambariAdminConsole')
-.controller('CreateViewInstanceCtrl',['$scope', 'View','RemoteCluster' , 'Alert', 'Cluster', '$routeParams', '$location', 'UnsavedDialog', '$translate', function($scope, View, RemoteCluster, Alert, Cluster, $routeParams, $location, UnsavedDialog, $translate) {
+.controller('CreateViewInstanceCtrl',
+['$scope', 'View','RemoteCluster' , 'Alert', 'Cluster', '$routeParams', '$location', 'UnsavedDialog', '$translate', '$modalInstance', 'views', '$q',
+function($scope, View, RemoteCluster, Alert, Cluster, $routeParams, $location, UnsavedDialog, $translate, $modalInstance, views, $q) {
+
   var $t = $translate.instant;
+  var viewToVersionMap = {};
+  var instances = {};
   $scope.form = {};
-  $scope.constants = {
-    props: $t('views.properties')
+  $scope.nameValidationPattern = /^\s*\w*\s*$/;
+  $scope.isLoading = false;
+  $scope.isLocalTypeChosen = true;
+  $scope.views = views;
+  $scope.viewOptions = [];
+  $scope.versionOptions = [];
+  $scope.localClusters = [];
+  $scope.remoteClusters = [];
+  $scope.clusterOptions = [];
+  $scope.isInstanceExists = false;
+  $scope.formData = {
+    view: null,
+    version: null,
+    instanceName: '',
+    displayName: '',
+    description: '',
+    clusterName: null,
+    visible: true
   };
-  $scope.isClone = $routeParams.instanceId ? true : false;
-  var targetUrl = '';
-
-  function loadMeta(){
-    View.getMeta($routeParams.viewId, $scope.version).then(function(data) {
-      var viewVersion = data.data,
-        parameters;
-
-      $scope.view = viewVersion;
-      parameters = viewVersion.ViewVersionInfo.parameters;
-
-      angular.forEach(parameters, function (item) {
-        item.value = item['defaultValue'];
-        item.clusterConfig = !!item.clusterConfig;
-        item.displayName = item.name.replace(/\./g, '\.\u200B');
-        item.clusterConfig ? $scope.numberOfClusterConfigs++ : $scope.numberOfSettingConfigs++;
-      });
-
-      $scope.clusterConfigurable = viewVersion.ViewVersionInfo.cluster_configurable;
-      $scope.clusterConfigurableErrorMsg = $scope.clusterConfigurable ? "" : $t('views.alerts.cannotUseOption');
-
-      $scope.instance = {
-        view_name: viewVersion.ViewVersionInfo.view_name,
-        version: viewVersion.ViewVersionInfo.version,
-        instance_name: '',
-        label: '',
-        visible: true,
-        icon_path: '',
-        icon64_path: '',
-        properties: parameters,
-        description: '',
-        clusterType: 'NONE'
-      };
-
-      //if cloning view instance, then get the instance data and populate settings and properties
-      if($scope.isClone) {
-        View.getInstance($routeParams.viewId, $routeParams.version, $routeParams.instanceId)
-        .then(function(instance) {
-          $scope.instanceClone = instance;
-          $scope.instance.version = instance.ViewInstanceInfo.version;
-          $scope.version =  instance.ViewInstanceInfo.version;
-          $scope.instance.instance_name = instance.ViewInstanceInfo.instance_name + $t('common.copy');
-          $scope.instance.label = instance.ViewInstanceInfo.label + $t('common.copy');
-          $scope.instance.visible = instance.ViewInstanceInfo.visible;
-          $scope.instance.description = instance.ViewInstanceInfo.description;
-          $scope.instance.clusterType=instance.ViewInstanceInfo.cluster_type;
-          
-          initConfigurations(parameters);
-        })
-        .catch(function(data) {
-          Alert.error($t('views.alerts.cannotLoadInstanceInfo'), data.data.message);
-        });
-      }
-
-      loadClusters();
-      loadRemoteClusters();
-
-    });
-  }
 
-   function initConfigurations(parameters) {
-      var configuration = angular.copy($scope.instanceClone.ViewInstanceInfo.properties);
-
-      //iterate through the view parameters and get the values from the instance being cloned
-      for (var i = 0; i < parameters.length; i++) {
-        parameters[i].value = configuration[parameters[i].name];
-        parameters[i].clusterConfig = !!parameters[i].clusterConfig;
-      }
+  $scope.updateVersionOptions = function () {
+    if (viewToVersionMap[$scope.formData.view.value]) {
+      $scope.versionOptions = viewToVersionMap[$scope.formData.view.value];
+      $scope.formData.version = $scope.versionOptions[0];
     }
+  };
 
-  $scope.$watch(function(scope) {
-    return scope.version;
-  }, function(version) {
-    if( version ){
-      loadMeta();
-    }
-  });
-
-  $scope.enableLocalCluster = function () {
-    if($scope.errorKeys.length > 0) {
-      $scope.errorKeys.forEach( function (key) {
-        try {
-          $scope.form.instanceCreateForm[key].validationError = false;
-          $scope.form.instanceCreateForm[key].validationMessage = '';
-        } catch (e) {
-          console.log($t('views.alerts.unableToResetErrorMessage', {key: key}));
-        }
-      });
-      $scope.errorKeys = [];
+  $scope.switchClusterType = function(bool) {
+    $scope.isLocalTypeChosen = bool;
+    if ($scope.isLocalTypeChosen) {
+      $scope.clusterOptions = $scope.localClusters;
+    } else {
+      $scope.clusterOptions = $scope.remoteClusters;
     }
+    $scope.formData.clusterName = $scope.clusterOptions[0];
   };
 
-  // $scope.view = viewVersion;
-  $scope.isAdvancedClosed = true;
-  $scope.instanceExists = false;
-  $scope.errorKeys = [];
-
-  $scope.clusterConfigurable = false;
-  $scope.clusterConfigurableErrorMsg = "";
-  $scope.clusters = [];
-  $scope.remoteClusters = [];
-  $scope.noLocalClusterAvailible = true;
-  $scope.noRemoteClusterAvailible = true;
-  $scope.cluster = null;
-  $scope.data = {};
-  $scope.data.remoteCluster = null;
-  $scope.numberOfClusterConfigs = 0;
-  $scope.numberOfSettingConfigs = 0;
-
-  function loadClusters() {
-       Cluster.getAllClusters().then(function (clusters) {
-         if(clusters.length >0){
-           clusters.forEach(function(cluster) {
-             $scope.clusters.push({
-              "name" : cluster.Clusters.cluster_name,
-              "id" : cluster.Clusters.cluster_id
-             })
-           });
-           $scope.noLocalClusterAvailible = false;
-           //do not set to default Local Cluster configuration when cloning instance
-           if($scope.clusterConfigurable && !$scope.isClone){
-             $scope.instance.clusterType = "LOCAL_AMBARI";
-           }
-         }else{
-           $scope.clusters.push($t('common.noClusters'));
-         }
-         $scope.cluster = $scope.clusters[0];
-       });
-  }
-
-   function loadRemoteClusters() {
-         RemoteCluster.listAll().then(function (clusters) {
-           if(clusters.length >0){
-             clusters.forEach(function(cluster) {
-               $scope.remoteClusters.push({
-                "name" : cluster.ClusterInfo.name,
-                "id" : cluster.ClusterInfo.cluster_id
-               })
-             });
-             $scope.noRemoteClusterAvailible = false;
-           }else{
-             $scope.remoteClusters.push($t('common.noClusters'));
-           }
-           $scope.data.remoteCluster = $scope.remoteClusters[0];
-         });
-   }
-
-
-  $scope.versions = [];
-  $scope.version = null;
-
-  View.getVersions($routeParams.viewId).then(function(versions) {
-    $scope.versions = versions;
-    $scope.version = $scope.versions[$scope.versions.length-1];
-  });
-
-
-  $scope.nameValidationPattern = /^\s*\w*\s*$/;
-
-  $scope.save = function() {
-  if (!$scope.form.instanceCreateForm.isSaving) {
+  $scope.save = function () {
+    var instanceName = $scope.form.instanceCreateForm.instanceName.$viewValue;
     $scope.form.instanceCreateForm.submitted = true;
-    if($scope.form.instanceCreateForm.$valid){
-      $scope.form.instanceCreateForm.isSaving = true;
-
-      switch($scope.instance.clusterType) {
-        case 'LOCAL_AMBARI':
-          console.log($scope.cluster);
-          $scope.instance.clusterId = $scope.cluster.id;
-          break;
-        case 'REMOTE_AMBARI':
-          console.log($scope.data.remoteCluster);
-          $scope.instance.clusterId = $scope.data.remoteCluster.id;
-
-          break;
-        default:
-          $scope.instance.clusterId = null;
-      }
-      console.log($scope.instance.clusterId);
-      View.createInstance($scope.instance)
-        .then(function(data) {
-          Alert.success($t('views.alerts.instanceCreated', {instanceName: $scope.instance.instance_name}));
-          $scope.form.instanceCreateForm.$setPristine();
-          if( targetUrl ){
-            $location.path(targetUrl);
-          } else {
-            $location.path('/views/' + $scope.instance.view_name + '/versions/' + $scope.instance.version + '/instances/' + $scope.instance.instance_name + '/edit');
-          }
-            $scope.form.instanceCreateForm.isSaving = false;
-            $scope.$root.$emit('instancesUpdate');
+    if ($scope.form.instanceCreateForm.$valid) {
+      View.createInstance({
+        instance_name: instanceName,
+        label: $scope.form.instanceCreateForm.displayName.$viewValue,
+        visible: $scope.form.instanceCreateForm.visible.$viewValue,
+        icon_path: '',
+        icon64_path: '',
+        description: $scope.form.instanceCreateForm.description.$viewValue,
+        view_name: $scope.form.instanceCreateForm.view.$viewValue.value,
+        version: $scope.form.instanceCreateForm.version.$viewValue.value,
+        properties: [],
+        clusterId: $scope.form.instanceCreateForm.clusterName.$viewValue.id,
+        clusterType: $scope.isLocalTypeChosen ? 'LOCAL_AMBARI': 'REMOTE_AMBARI'
+      })
+        .then(function () {
+          $modalInstance.dismiss('created');
+          Alert.success($t('views.alerts.instanceCreated', {instanceName: instanceName}));
+          $location.path('/views/' + $scope.form.instanceCreateForm.view.$viewValue.value +
+            '/versions/' + $scope.form.instanceCreateForm.version.$viewValue.value +
+            '/instances/' + instanceName + '/edit');
         })
         .catch(function (data) {
           var errorMessage = data.message;
-          var showGeneralError = true;
 
-          if (data.status >= 400 && $scope.instance.clusterType == 'NONE') {
+          if (data.status >= 400) {
             try {
-              var errorObject = JSON.parse(errorMessage);
-              errorMessage = errorObject.detail;
-              angular.forEach(errorObject.propertyResults, function (item, key) {
-                $scope.form.instanceCreateForm[key].validationError = !item.valid;
-                if (!item.valid) {
-                  showGeneralError = false;
-                  $scope.form.instanceCreateForm[key].validationMessage = item.detail;
-                  $scope.errorKeys.push(key);
-                }
-              });
-
-              if (showGeneralError) {
-                $scope.form.instanceCreateForm.generalValidationError = errorMessage;
-              }
+              errorMessage = JSON.parse(errorMessage).detail;
             } catch (e) {
-              console.error($t('views.alerts.unableToParseError', {message: data.message}));
+              console.warn(data.message, e);
             }
           }
           Alert.error($t('views.alerts.cannotCreateInstance'), errorMessage);
-          $scope.form.instanceCreateForm.isSaving = false;
         });
-      }
     }
   };
 
-  $scope.cancel = function() {
-    $scope.form.instanceCreateForm.$setPristine();
-    $location.path('/views');
+  $scope.cancel = function () {
+    unsavedChangesCheck();
+  };
+
+  $scope.checkIfInstanceExist = function() {
+    $scope.isInstanceExists = Boolean(instances[$scope.formData.instanceName]);
   };
 
-  $scope.$on('$locationChangeStart', function(event, __targetUrl) {
-    if( $scope.form.instanceCreateForm.$dirty ){
-      UnsavedDialog().then(function(action) {
-        targetUrl = __targetUrl.split('#').pop();
-        switch(action){
+  function initViewAndVersionSelect () {
+    $scope.viewOptions = [];
+    angular.forEach($scope.views, function(view) {
+      $scope.viewOptions.push({
+        label: view.view_name,
+        value: view.view_name
+      });
+      viewToVersionMap[view.view_name] = view.versionsList.map(function(version) {
+        angular.forEach(version.instances, function(instance) {
+          instances[instance.ViewInstanceInfo.instance_name] = true;
+        });
+        return {
+          label: version.ViewVersionInfo.version,
+          value: version.ViewVersionInfo.version
+        }
+      });
+    });
+    $scope.formData.view = $scope.viewOptions[0];
+    $scope.updateVersionOptions();
+  }
+
+  function loadClusters() {
+    return Cluster.getAllClusters().then(function (clusters) {
+      clusters.forEach(function (cluster) {
+        $scope.localClusters.push({
+          label: cluster.Clusters.cluster_name,
+          value: cluster.Clusters.cluster_name,
+          id: cluster.Clusters.cluster_id
+        });
+      });
+    });
+  }
+
+  function loadRemoteClusters() {
+    return RemoteCluster.listAll().then(function (clusters) {
+      clusters.forEach(function (cluster) {
+        $scope.remoteClusters.push({
+          label: cluster.ClusterInfo.name,
+          value: cluster.ClusterInfo.name,
+          id: cluster.ClusterInfo.cluster_id
+        });
+      });
+    });
+  }
+
+  function loadFormData () {
+    $scope.isLoading = true;
+    initViewAndVersionSelect();
+    $q.all(loadClusters(), loadRemoteClusters()).then(function() {
+      $scope.isLoading = false;
+      $scope.switchClusterType(true);
+    });
+  }
+
+  function unsavedChangesCheck() {
+    if ($scope.form.instanceCreateForm.$dirty) {
+      UnsavedDialog().then(function (action) {
+        switch (action) {
           case 'save':
             $scope.save();
             break;
           case 'discard':
-            $scope.form.instanceCreateForm.$setPristine();
-            $location.path(targetUrl);
+            $modalInstance.close('discard');
             break;
           case 'cancel':
-            targetUrl = '';
             break;
         }
       });
-      event.preventDefault();
+    } else {
+      $modalInstance.close('discard');
     }
-  });
-
-
-
-
-
+  }
 
+  loadFormData();
 }]);

http://git-wip-us.apache.org/repos/asf/ambari/blob/dd0421a2/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/ViewsListCtrl.js
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/ViewsListCtrl.js b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/ViewsListCtrl.js
index 4e7bae3..aba5702 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/ViewsListCtrl.js
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/ViewsListCtrl.js
@@ -18,272 +18,186 @@
 'use strict';
 
 angular.module('ambariAdminConsole')
-.controller('ViewsListCtrl',['$scope', 'View','$modal', 'Alert', 'ConfirmationModal', '$location', '$translate', function($scope, View, $modal, Alert, ConfirmationModal, $location, $translate) {
-  var deferredList = [],
-    $t = $translate.instant;
-  $scope.isLoadingViews = false;
-  $scope.isLoadingUrls = false;
-  $scope.constants = {
-    unable: $t('views.alerts.unableToCreate'),
-    views: $t('common.views').toLowerCase()
-  };
-  $scope.$on('$locationChangeStart', function() {
-    deferredList.forEach(function(def) {
-      def.reject();
-    })
-  });
-
-  $scope.createUrlDisabled = false;
+.controller('ViewsListCtrl',['$scope', 'View','$modal', 'Alert', 'ConfirmationModal', '$translate', function($scope, View, $modal, Alert, ConfirmationModal, $translate) {
+  var $t = $translate.instant;
+  var VIEWS_VERSION_STATUS_TIMEOUT = 5000;
+  $scope.isLoading = false;
+  $scope.minInstanceForPagination = 10;
 
-  function checkViewVersionStatus(view, versionObj, versionNumber){
+  function checkViewVersionStatus(view, versionObj, versionNumber) {
     var deferred = View.checkViewVersionStatus(view.view_name, versionNumber);
-    deferredList.push(deferred);
 
-    deferred.promise.then(function(status) {
-      deferredList.splice(deferredList.indexOf(deferred), 1);
-      if (status !== 'DEPLOYED' && status !== 'ERROR') {
-        checkViewVersionStatus(view, versionObj, versionNumber);
+    deferred.promise.then(function (status) {
+      if (versionNeedStatusUpdate(status)) {
+        setTimeout(function() {
+          checkViewVersionStatus(view, versionObj, versionNumber);
+        }, VIEWS_VERSION_STATUS_TIMEOUT);
       } else {
-        $scope.$evalAsync(function() {
-          versionObj.status = status;
-          angular.forEach(view.versions, function(version) {
-            if(version.status === 'DEPLOYED'){
-              view.canCreateInstance = true;
-            }
-          })
-        });
+        versionObj.status = status;
+        angular.forEach(view.versions, function (version) {
+          if (version.status === 'DEPLOYED') {
+            view.canCreateInstance = true;
+          }
+        })
       }
     });
   }
 
-  function loadViews(){
-    $scope.isLoadingViews = true;
-    View.all().then(function(views) {
-      $scope.isLoadingViews = false;
+  function versionNeedStatusUpdate(status) {
+    return status !== 'DEPLOYED' && status !== 'ERROR';
+  }
+
+  function loadViews() {
+    $scope.isLoading = true;
+    View.all().then(function (views) {
+      $scope.isLoading = false;
       $scope.views = views;
-      $scope.getFilteredViews();
-      angular.forEach(views, function(view) {
-        angular.forEach(view.versions, function(versionObj, versionNumber) {
-          if (versionObj.status !== 'DEPLOYED' || versionObj.status !== 'ERROR'){
-            checkViewVersionStatus(view, versionObj, versionNumber);
-          }
+      $scope.instances = [];
+      angular.forEach(views, function (view) {
+        // TODO uncomment if view need status update
+        // angular.forEach(view.versions, function (versionObj, versionNumber) {
+        //   if (versionNeedStatusUpdate(versionObj.status)) {
+        //     checkViewVersionStatus(view, versionObj, versionNumber);
+        //   }
+        // });
+        angular.forEach(view.instances, function (instance) {
+          instance.ViewInstanceInfo.short_url_name = instance.ViewInstanceInfo.short_url_name || '';
+          instance.ViewInstanceInfo.short_url = instance.ViewInstanceInfo.short_url || '';
+          $scope.instances.push(instance.ViewInstanceInfo);
         });
-      })
-    }).catch(function(data) {
+      });
+      initTypeFilter();
+      $scope.filterInstances();
+    }).catch(function (data) {
       Alert.error($t('views.alerts.cannotLoadViews'), data.data.message);
     });
   }
 
-  loadViews();
+  function initTypeFilter() {
+    var uniqTypes = $.unique($scope.instances.map(function(instance) {
+      return instance.view_name;
+    }));
+    $scope.typeFilterOptions = [ { label: $t('common.all'), value: '*'} ]
+      .concat(uniqTypes.map(function(type) {
+        return {
+          label: type,
+          value: type
+        };
+      }));
+    $scope.instanceTypeFilter = $scope.typeFilterOptions[0];
+  }
 
-  $scope.createInstance = function(view) {
-    var modalInstance = $modal.open({
-      templateUrl: 'views/ambariViews/modals/create.html',
-      size: 'lg',
-      controller: 'CreateViewInstanceCtrl',
-      resolve: {
-        viewVersion: function(){
-          return view.versionsList[ view.versionsList.length-1];
+  function showInstancesOnPage() {
+    var startIndex = ($scope.currentPage - 1) * $scope.instancesPerPage + 1;
+    var endIndex = $scope.currentPage * $scope.instancesPerPage;
+    var showedCount = 0;
+    var filteredCount = 0;
+
+    angular.forEach($scope.instances, function(instance) {
+      instance.isShowed = false;
+      if (instance.isFiltered) {
+        filteredCount++;
+        if (filteredCount >= startIndex && filteredCount <= endIndex) {
+          instance.isShowed = true;
+          showedCount++;
         }
       }
     });
+    $scope.tableInfo.showed = showedCount;
+  }
 
-    modalInstance.result.then(loadViews);
-  };
-
-  $scope.viewsFilter = '';
-  $scope.filteredViews = [];
-  $scope.getFilteredViews = function(views) {
-    var result = [];
-    var filter = $scope.viewsFilter.toLowerCase();
-    if(!filter){  // if no filter return all views
-      result = $scope.views.map(function(view) {
-        view.isOpened = false;
-        return view;
-      });
-    } else {
-      result = $scope.views.map(function(view) {
-        view.isOpened = true;
-        if(view.view_name.toLowerCase().indexOf(filter) >= 0){
-          return view; // if filter matched with view name -- return whole view
-        } else {
-          var instances = [];
-          angular.forEach(view.instances, function(instance) {
-            if(instance.ViewInstanceInfo.label.toLowerCase().indexOf(filter) >= 0){
-              instances.push(instance);
-            }
-          });
-          if( instances.length ){ // If inside view exists instances with matched filter - show only this instances
-            var v = angular.copy(view);
-            v.instances = instances;
-            return v;
-          }
-        }
-      }).filter(function(view) {
-        return !!view; // Remove 'undefined'
-      });
-    }
-    $scope.filteredViews = result;
-  };
-
-  $scope.gotoCreate = function(viewName, isAllowed) {
-    if(isAllowed){
-      $location.path('/views/'+viewName+'/new');
-    }
-  };
-
-  $scope.deleteInstance = function(instance) {
-      ConfirmationModal.show(
-        $t('common.delete', {
-          term: $t('views.viewInstance')
-        }),
-        $t('common.deleteConfirmation', {
-          instanceType: $t('views.viewInstance'),
-          instanceName: instance.ViewInstanceInfo.label
-        })
-      ).then(function() {
-        View.deleteInstance(instance.ViewInstanceInfo.view_name, instance.ViewInstanceInfo.version, instance.ViewInstanceInfo.instance_name)
-          .then(function() {
-            loadViews();
-          })
-          .catch(function(data) {
-            Alert.error($t('views.alerts.cannotDeleteInstance'), data.data.message);
-          });
-      });
-    };
-
-  $scope.reloadViews = function () {
-    loadViews();
-  };
-
-  /**
-   * Url listing
-   */
-
-  $scope.loadedUrls = [];
-  $scope.urlsPerPage = 10;
+  $scope.views = [];
+  $scope.instances = [];
+  $scope.instancesPerPage = 10;
   $scope.currentPage = 1;
-  $scope.totalUrls = 1;
-  $scope.urlNameFilter = '';
-  $scope.urlSuffixfilter = '';
-  $scope.maxVisiblePages=20;
+  $scope.instanceNameFilter = '';
+  $scope.instanceUrlFilter = '';
+  $scope.maxVisiblePages = 10;
+  $scope.isNotEmptyFilter = true;
+  $scope.instanceTypeFilter = '';
   $scope.tableInfo = {
-    total: 0,
+    filtered: 0,
     showed: 0
   };
 
-  $scope.isNotEmptyFilter = true;
-
-
-  $scope.pageChanged = function() {
-    $scope.listViewUrls();
-  };
+  loadViews();
 
-  $scope.urlsPerPageChanged = function() {
+  $scope.filterInstances = function() {
+    var filteredCount = 0;
+    angular.forEach($scope.instances, function(instance) {
+      if ($scope.instanceNameFilter && instance.short_url_name.indexOf($scope.instanceNameFilter) === -1) {
+        return instance.isFiltered = false;
+      }
+      if ($scope.instanceUrlFilter && ('/main/view/'+ instance.view_name + '/' + instance.short_url).indexOf($scope.instanceUrlFilter) === -1) {
+        return instance.isFiltered = false;
+      }
+      if ($scope.instanceTypeFilter.value !== '*' && instance.view_name.indexOf($scope.instanceTypeFilter.value) === -1) {
+        return instance.isFiltered = false;
+      }
+      filteredCount++;
+      instance.isFiltered = true;
+    });
+    $scope.tableInfo.filtered = filteredCount;
     $scope.resetPagination();
   };
 
+  $scope.pageChanged = function() {
+    showInstancesOnPage();
+  };
 
   $scope.resetPagination = function() {
     $scope.currentPage = 1;
-    $scope.listViewUrls();
+    showInstancesOnPage();
   };
 
-
-  $scope.getVersions = function(instances) {
-    var names = [];
-
-    instances.map(function(view){
-      var name = view.view_name;
-      names.push(name);
-    });
-
-    var output = [],
-        keys = [];
-
-    angular.forEach(names, function(item) {
-      var key = item;
-      if(keys.indexOf(key) === -1) {
-        keys.push(key);
-        output.push(item);
-      }
-    });
-    return output;
-    };
-
-
-
   $scope.clearFilters = function () {
-    $scope.urlNameFilter = '';
-    $scope.urlSuffixfilter = '';
+    $scope.instanceNameFilter = '';
+    $scope.instanceUrlFilter = '';
     $scope.instanceTypeFilter = $scope.typeFilterOptions[0];
     $scope.resetPagination();
   };
 
-
-
   $scope.$watch(
-      function (scope) {
-        return Boolean(scope.urlNameFilter || scope.urlSuffixfilter || (scope.instanceTypeFilter && scope.instanceTypeFilter.value !== '*'));
-      },
-      function (newValue, oldValue, scope) {
-        scope.isNotEmptyFilter = newValue;
-      }
+    function (scope) {
+      return Boolean(scope.instanceNameFilter || scope.instanceUrlFilter || (scope.instanceTypeFilter && scope.instanceTypeFilter.value !== '*'));
+    },
+    function (newValue, oldValue, scope) {
+      scope.isNotEmptyFilter = newValue;
+    }
   );
 
-
-
-
-  $scope.listViewUrls = function(){
-    $scope.isLoadingUrls = true;
-    View.allUrls({
-      currentPage: $scope.currentPage,
-      urlsPerPage: $scope.urlsPerPage,
-      searchString: $scope.urlNameFilter,
-      suffixSearch: $scope.urlSuffixfilter,
-      instanceType: $scope.instanceTypeFilter?$scope.instanceTypeFilter.value:'*'
-    }).then(function(urls) {
-      $scope.isLoadingUrls = false;
-      $scope.urls = urls;
-      $scope.ViewNameFilterOptions = urls.items.map(function(url){
-        return url.ViewUrlInfo.view_instance_common_name;
-      });
-
-      $scope.totalUrls = urls.itemTotal;
-      $scope.tableInfo.showed = urls.items.length;
-      $scope.tableInfo.total = urls.itemTotal;
-
-      // get all view instances to enable/disable creation if empty
-
-    }).catch(function(data) {
-      Alert.error($t('views.alerts.cannotLoadViewUrls'), data.message);
+  $scope.createInstance = function () {
+    var modalInstance = $modal.open({
+      templateUrl: 'views/ambariViews/modals/create.html',
+      controller: 'CreateViewInstanceCtrl',
+      resolve: {
+        views: function() {
+          return $scope.views;
+        }
+      },
+      backdrop: 'static'
     });
-  };
 
+    modalInstance.result.then(loadViews);
+  };
 
-  $scope.initViewUrls = function(){
-    $scope.listViewUrls();
-    View.getAllVisibleInstance().then(function(instances){
-      // if no instances then disable the create button
-      if(!instances.length){
-        $scope.createUrlDisabled = true;
-      } else {
-        $scope.typeFilterOptions = [{ label: $t('common.all'), value: '*'}]
-            .concat($scope.getVersions(instances).map(function(key) {
-              return {
-                label: key,
-                value: key
-              };
-            }));
-
-        $scope.instanceTypeFilter = $scope.typeFilterOptions[0];
-      }
-
-    }).catch(function(data) {
-      // Make the create button enabled, and swallow the error
-      $scope.createUrlDisabled = false;
+  $scope.deleteInstance = function (instance) {
+    ConfirmationModal.show(
+      $t('common.delete', {
+        term: $t('views.viewInstance')
+      }),
+      $t('common.deleteConfirmation', {
+        instanceType: $t('views.viewInstance'),
+        instanceName: instance.label
+      })
+    ).then(function () {
+      View.deleteInstance(instance.view_name, instance.version, instance.instance_name)
+        .then(function () {
+          loadViews();
+        })
+        .catch(function (data) {
+          Alert.error($t('views.alerts.cannotDeleteInstance'), data.data.message);
+        });
     });
-
   };
-
-}]);
\ No newline at end of file
+}]);

http://git-wip-us.apache.org/repos/asf/ambari/blob/dd0421a2/ambari-admin/src/main/resources/ui/admin-web/app/scripts/i18n.config.js
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/i18n.config.js b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/i18n.config.js
index cb52df1..73ab064 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/i18n.config.js
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/i18n.config.js
@@ -32,7 +32,6 @@ angular.module('ambariAdminConsole')
     'common.register': 'Register',
     'common.clusters': 'Clusters',
     'common.views': 'Views',
-    'common.viewUrls': 'View URLs',
     'common.roles': 'Roles',
     'common.users': 'Users',
     'common.groups': 'Groups',
@@ -80,6 +79,7 @@ angular.module('ambariAdminConsole')
     'common.remoteClusterDelConfirmation': 'Are you sure you want to delete {{instanceType}} {{instanceName}}? This operation cannot be undone.',
     'common.messageInstanceAffected': 'The following View Instances are using this Remote Cluster for configuration, and will need to be reconfigured:',
     'common.local': 'Local',
+    'common.remote': 'Remote',
     'common.pam': 'PAM',
     'common.ldap': 'LDAP',
     'common.jwt': 'JWT',
@@ -100,6 +100,7 @@ angular.module('ambariAdminConsole')
     'common.clusterManagement': 'Cluster Management',
     'common.userManagement': 'User Management',
     'common.admin': 'Admin',
+    'common.actions': 'Actions',
 
     'common.clusterNameChangeConfirmation.title': 'Confirm Cluster Name Change',
     'common.clusterNameChangeConfirmation.message': 'Are you sure you want to change the cluster name to {{clusterName}}?',
@@ -191,7 +192,7 @@ angular.module('ambariAdminConsole')
     'views.viewInstance': 'View Instance',
     'views.create': 'Create Instance',
     'views.clone': 'Clone Instance',
-    'views.createViewInstance': 'Create View Instance',
+    'views.createViewInstance': 'Create Instance',
     'views.edit': 'Edit',
     'views.viewName': 'View Name',
     'views.instances': 'Instances',
@@ -239,7 +240,6 @@ angular.module('ambariAdminConsole')
     'views.alerts.cannotEditInstance': 'Cannot Edit Static Instances',
     'views.alerts.cannotDeleteStaticInstance': 'Cannot Delete Static Instances',
     'views.alerts.deployError': 'Error deploying. Check Ambari Server log.',
-    'views.alerts.unableToCreate': 'Unable to create view instances',
     'views.alerts.cannotUseOption': 'This view cannot use this option',
     'views.alerts.unableToResetErrorMessage': 'Unable to reset error message for prop: {{key}}',
     'views.alerts.instanceCreated': 'Created View Instance {{instanceName}}',
@@ -256,7 +256,12 @@ angular.module('ambariAdminConsole')
     'views.alerts.savedRemoteClusterInformation': 'Remote cluster information is saved.',
     'views.alerts.credentialsUpdated': 'Credentials Updated.',
 
-    'urls.name': 'Name',
+    'views.table.viewType': 'View Type',
+    'views.emptyTable': 'No Views to display',
+    'views.createInstance.selectView': 'Select View',
+    'views.createInstance.selectVersion': 'Select Version',
+    'views.createInstance.clusterType': 'Cluster Type',
+
     'urls.url': 'URL',
     'urls.viewUrls': 'View URLs',
     'urls.createNewUrl': 'Create New URL',
@@ -267,7 +272,6 @@ angular.module('ambariAdminConsole')
     'urls.step1': 'Create URL',
     'urls.step2': 'Select instance',
     'urls.step3': 'Assign URL',
-    'urls.noUrlsToDisplay': 'No URLs to display.',
     'urls.noViewInstances': 'No view instances',
     'urls.none': 'None',
     'urls.change': 'Change',

http://git-wip-us.apache.org/repos/asf/ambari/blob/dd0421a2/ambari-admin/src/main/resources/ui/admin-web/app/scripts/routes.js
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/routes.js b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/routes.js
index d2d8253..2cb077a 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/routes.js
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/routes.js
@@ -93,14 +93,20 @@ angular.module('ambariAdminConsole')
   views: {
     list: {
       url: '/views',
-      templateUrl: 'views/ambariViews/listTable.html',
+      templateUrl: 'views/ambariViews/viewsList.html',
       controller: 'ViewsListCtrl',
       label: 'Views'
     },
-    listViewUrls: {
-      url: '/viewUrls',
-      templateUrl: 'views/ambariViews/listUrls.html',
-      controller: 'ViewsListCtrl',
+    clone: {
+      url: '/views/:viewId/versions/:version/instances/:instanceId/clone',
+      templateUrl: 'views/ambariViews/create.html',
+      controller: 'CloneViewInstanceCtrl',
+      label: 'Views'
+    },
+    edit: {
+      url: '/views/:viewId/versions/:version/instances/:instanceId/edit',
+      templateUrl: 'views/ambariViews/edit.html',
+      controller: 'ViewsEditCtrl',
       label: 'Views'
     },
     createViewUrl:{
@@ -120,24 +126,6 @@ angular.module('ambariAdminConsole')
       templateUrl: 'views/urls/edit.html',
       controller: 'ViewUrlEditCtrl',
       label: 'Views'
-    },
-    clone: {
-      url: '/views/:viewId/versions/:version/instances/:instanceId/clone',
-      templateUrl: 'views/ambariViews/create.html',
-      controller: 'CreateViewInstanceCtrl',
-      label: 'Views'
-    },
-    edit: {
-      url: '/views/:viewId/versions/:version/instances/:instanceId/edit',
-      templateUrl: 'views/ambariViews/edit.html',
-      controller: 'ViewsEditCtrl',
-      label: 'Views'
-    },
-    create: {
-      url: '/views/:viewId/new',
-      templateUrl: 'views/ambariViews/create.html',
-      controller: 'CreateViewInstanceCtrl',
-      label: 'Views'
     }
   },
   stackVersions: {

http://git-wip-us.apache.org/repos/asf/ambari/blob/dd0421a2/ambari-admin/src/main/resources/ui/admin-web/app/scripts/services/View.js
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/services/View.js b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/services/View.js
index f549b29..b38b0c2 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/services/View.js
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/services/View.js
@@ -61,32 +61,6 @@ angular.module('ambariAdminConsole')
     angular.element(this,item);
   }
 
-  ViewUrl.all = function(params) {
-    var deferred = $q.defer();
-
-    $http({
-      method: 'GET',
-      dataType: "json",
-      url: Settings.baseUrl + '/view/urls?'
-      + 'ViewUrlInfo/url_name.matches(.*'+params.searchString+'.*)'
-      + '&ViewUrlInfo/url_suffix.matches(.*'+params.suffixSearch+'.*)'
-      + '&fields=*'
-      + '&from=' + (params.currentPage-1)*params.urlsPerPage
-      + '&page_size=' + params.urlsPerPage
-      + (params.instanceType === '*' ? '' : '&ViewUrlInfo/view_instance_common_name=' + params.instanceType)
-
-    })
-        .success(function(data) {
-          deferred.resolve(new ViewUrl(data));
-        })
-        .error(function(data) {
-          deferred.reject(data);
-        });
-
-    return deferred.promise;
-  };
-
-
   ViewUrl.updateShortUrl = function(payload){
     var deferred = $q.defer();
 
@@ -176,7 +150,7 @@ angular.module('ambariAdminConsole')
     var versions = {};
     angular.forEach(item.versions, function(version) {
       versions[version.ViewVersionInfo.version] = {count: version.instances.length, status: version.ViewVersionInfo.status};
-      if(version.ViewVersionInfo.status === 'DEPLOYED'){ // if atelast one version is deployed
+      if (version.ViewVersionInfo.status === 'DEPLOYED'){ // if at least one version is deployed
         self.canCreateInstance = true;
       }
 
@@ -203,10 +177,6 @@ angular.module('ambariAdminConsole')
     return ViewInstance.find(viewName, version, instanceName);
   };
 
-  View.allUrls =  function(req){
-    return ViewUrl.all(req)
-  };
-
   View.getUrlInfo = function(urlName){
     return ViewUrl.urlInfo(urlName);
   };

http://git-wip-us.apache.org/repos/asf/ambari/blob/dd0421a2/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css b/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css
index 66f23af..bd06bc0 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css
@@ -367,10 +367,6 @@ a.gotoinstance{
   width: 14px;
 }
 
-.namefilter {
-  font-weight: normal;
-}
-
 .settings-edit-toggle.disabled, .properties-toggle.disabled{
   color: #999;
   cursor: not-allowed;
@@ -480,25 +476,18 @@ a.gotoinstance{
 .search-container{
   position: relative;
 }
-.search-container .close{
+.search-container .close {
   position: absolute;
   right: 10px;
-  top: 32px;
+  top: 8px;
+}
+.search-container input {
+  font-weight: normal;
 }
 .groups-pane .search-container .close{
   top: 32px;
 }
-.views-urls-table .search-container .close{
-  top: 7px;
-  right: 10px;
-  z-index: 10;
-}
 
-.views-list-table .search-container .close{
-  right: 50px;
-  top: 7px;
-  z-index: 10;
-}
 .groups-pane table thead th{
   border-top: 0;
 }
@@ -563,9 +552,7 @@ table.no-border tr td{
 .no-border{
   border: none !important;
 }
-.top-margin-4{
-  margin-top: 4px;
-}
+
 .table > thead > tr > th.vertical-top{
   vertical-align: top;
 }
@@ -647,10 +634,14 @@ button.btn.btn-xs{
   border-radius: 3px;
 }
 
-a.btn-primary {
+a.btn-primary, a.btn-primary:focus {
   color: #fff;
 }
 
+a.btn-default, a.btn-default:focus {
+  color: #666;
+}
+
 .clusterDisplayName {
   display:inline-block;
   width:90%;
@@ -686,6 +677,12 @@ a.alert-link, a.alert-link:hover, a.alert-link:visited{
   color: #666;
 }
 
+.empty-table-alert {
+  background-color: #f0f0f0;
+  text-align: center;
+  text-transform: uppercase;
+}
+
 .alert-container {
   position: fixed;
   top: 50px;
@@ -1475,10 +1472,6 @@ legend {
   text-overflow: ellipsis;
 }
 
-.pull-right {
-  float: right;
-}
-
 body {
   height: 100%;
   background-color: #f0f0f0;
@@ -1498,3 +1491,7 @@ body {
   background-color: #fff;
   padding: 15px;
 }
+
+.navigation-bar-fit-height {
+  z-index: 1001;
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/dd0421a2/ambari-admin/src/main/resources/ui/admin-web/app/styles/views.css
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/styles/views.css b/ambari-admin/src/main/resources/ui/admin-web/app/styles/views.css
new file mode 100644
index 0000000..9ab66f5
--- /dev/null
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/styles/views.css
@@ -0,0 +1,49 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.view-instance-actions>a {
+  color: inherit;
+  font-size: 16px;
+  cursor: pointer;
+  padding: 0 5px;
+}
+
+td.view-instance-actions,
+th.view-instance-actions {
+  width: 10%;
+}
+
+.view-instance-actions>a:hover,
+.view-instance-actions>a:visited:hover,
+.view-instance-actions>a:focus:hover {
+  text-decoration: none;
+}
+
+#create-instance-form i {
+  cursor: pointer;
+}
+
+#create-instance-form button.active {
+  color: #333;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
+
+input[type="checkbox"] + label {
+  line-height: 18px;
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/dd0421a2/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/listTable.html
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/listTable.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/listTable.html
deleted file mode 100644
index 91b9a93..0000000
--- a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/listTable.html
+++ /dev/null
@@ -1,110 +0,0 @@
-<!--
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
--->
-
-<div class="views-list-table">
-    <div class="clearfix">
-        <ol class="breadcrumb pull-left">
-            <li class="active">{{'common.views' | translate}}</li>
-            <button ng-click="reloadViews()"
-                    class="btn btn-xs">
-                <i class="glyphicon glyphicon-refresh"></i>
-            </button>
-        </ol>
-        <div class="pull-right col-sm-4">
-            <div class="input-group search-container">
-                <input type="text" class="form-control search-input" placeholder="{{'common.search' | translate}}" ng-model="viewsFilter" ng-change="getFilteredViews()">
-                <button type="button" class="close clear-search" ng-show="viewsFilter" ng-click="viewsFilter=''; getFilteredViews()"><span aria-hidden="true">&times;</span><span class="sr-only">{{"common.controls.close" | translate}}</span></button>
-        <span class="input-group-addon">
-          <span class="glyphicon glyphicon-search"></span>
-        </span>
-            </div>
-        </div>
-    </div>
-    <hr>
-    <div class="row">
-        <div class="col-sm-3 padding-left-30"><h4>{{'views.viewName' | translate}}</h4></div>
-        <div class="col-sm-3"><h4>{{'views.instances' | translate}}</h4></div>
-        <div class="col-sm-6"><h4></h4></div>
-    </div>
-    <accordion close-others="false">
-        <accordion-group ng-repeat="view in filteredViews" is-open="view.isOpened">
-            <accordion-heading>
-                <div class="row">
-                    <div class="col-sm-4">
-                        <i class="glyphicon glyphicon-chevron-right" ng-class="{'opened': view.isOpened}"></i>
-                        {{view.view_name}}
-                    </div>
-                    <div class="col-sm-3">
-            <span ng-repeat="(version, vData) in view.versions">
-              {{version}}
-                <span ng-switch="vData.status">
-                  <span ng-switch-when="PENDING" class="viewstatus pending" ng-switch-when="true" tooltip="{{'views.pending' | translate}}"></span>
-                  <div class="viewstatus deploying" ng-switch-when="DEPLOYING" tooltip="{{'views.deploying' | translate}}">
-                      <div class="rect1"></div>
-                      <div class="rect2"></div>
-                      <div class="rect3"></div>
-                  </div>
-                  <span ng-switch-when="DEPLOYED">({{vData.count}})</span>
-                  <span ng-switch-when="ERROR" tooltip="{{'views.alerts.deployError' | translate}}"><i class="fa fa-exclamation-triangle"></i></span>
-                </span>
-              {{$last ? '' : ', '}}
-            </span>
-                    </div>
-                    <div class="col-sm-6">{{view.description}}</div>
-                </div>
-            </accordion-heading>
-            <table class="table instances-table">
-                <tbody>
-                <tr ng-repeat="instance in view.instances">
-                    <td class="col-sm-1"></td>
-                    <td class="col-sm-5">
-                        <a href="#/views/{{view.view_name}}/versions/{{instance.ViewInstanceInfo.version}}/instances/{{instance.ViewInstanceInfo.instance_name}}/edit" class="instance-link">{{instance.label}}</a>
-                    </td>
-                    <td class="col-sm-5">{{instance.ViewInstanceInfo.version}}</td>
-                    <td class="col-sm-5 " ><div class="description-column" tooltip="{{instance.ViewInstanceInfo.description}}">{{instance.ViewInstanceInfo.description || 'No description'}}</div>
-                    </td>
-                    <td class="col-sm-1">
-                        <a class="instance-link ng-scope ng-binding" href="#/views/{{view.view_name}}/versions/{{instance.ViewInstanceInfo.version}}/instances/{{instance.ViewInstanceInfo.instance_name}}/clone"><i class="fa fa-copy"></i></a>
-                    </td>
-                    <td class="col-sm-1">
-                        <a class="instance-link ng-scope ng-binding" href ng-click="deleteInstance(instance)"><i class="fa fa-trash-o"></i></a>
-                    </td>
-                </tr>
-                </tbody>
-                <tfoot>
-                <tr>
-                    <td class="col-sm-4"></td>
-                    <td class="col-sm-3 padding-left-30">
-                        <a tooltip="{{view.canCreateInstance ? '' : constants.unable}}" class="btn btn-default createisntance-btn {{view.canCreateInstance ? '' : 'disabled'}}" href ng-click="gotoCreate(view.view_name, view.canCreateInstance);"><span class="glyphicon glyphicon-plus"></span> {{'views.create' | translate}}</a>
-                    </td>
-                    <td class="col-sm-3"></td>
-                    <td class="col-sm-3">
-                    </td>
-                </tr>
-                </tfoot>
-            </table>
-        </accordion-group>
-        <div ng-if="isLoadingViews" class="spinner-container">
-          <i class="fa fa-2x fa-spinner fa-spin" aria-hidden="true"></i>
-        </div>
-        <div class="alert alert-info" ng-show="views && !filteredViews.length && !isLoadingViews">
-            {{'common.alerts.nothingToDisplay' | translate: '{term: constants.views}'}}
-        </div>
-
-    </accordion>
-</div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/dd0421a2/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/listUrls.html
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/listUrls.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/listUrls.html
deleted file mode 100644
index 13ff311..0000000
--- a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/listUrls.html
+++ /dev/null
@@ -1,117 +0,0 @@
-<!--
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
--->
-
-<div class="views-urls-table" data-ng-init="initViewUrls()">
-
-
-    <div class="clearfix">
-        <ol class="breadcrumb pull-left">
-            <li class="active">{{'common.viewUrls' | translate}}</li>
-        </ol>
-        <div class="pull-right top-margin-4">
-            <div class="tooltip-wrapper"  tooltip="{{(createUrlDisabled)? ('urls.noViewInstances' | translate) : ''}}">
-            <link-to ng-disabled="createUrlDisabled" route="views.createViewUrl" class="btn btn-primary createuser-btn"><span class="glyphicon glyphicon-plus"></span> {{'urls.createNewUrl' | translate}}</link-to>
-        </div>
-        </div>
-    </div>
-    <hr>
-    <table class="table table-striped table-hover">
-        <thead>
-        <tr class="fix-bottom">
-
-            <th class="fix-bottom col-md-2">
-                <span>{{'urls.name' | translate}}</span>
-            </th>
-            <th class="fix-bottom col-md-3">
-                <span>{{'urls.url' | translate}}</span>
-            </th>
-            <th class="fix-bottom col-md-2">
-                <span >{{'urls.view' | translate}}</span>
-            </th>
-            <th class="fix-bottom col-md-2">
-                <span>{{'urls.viewInstance' | translate}}</span>
-            </th>
-        </tr>
-
-        <tr>
-
-            <th class="fix-top">
-                <div class="search-container">
-                    <input type="text" class="form-control namefilter" placeholder="{{'common.any' | translate}}" ng-model="urlNameFilter" ng-change="resetPagination()">
-                    <button type="button" class="close clearfilter" ng-show="urlNameFilter" ng-click="urlNameFilter=''; resetPagination()"><span class="pull-right" aria-hidden="true">&times;</span><span class="sr-only">{{'common.controls.close' | translate}}</span></button>
-                    </div>
-            </th>
-            <th class="fix-top">
-                <div class="search-container">
-                    <input type="text" class="form-control namefilter" placeholder="{{'common.any' | translate}}" ng-model="urlSuffixfilter" ng-change="resetPagination()">
-                    <button type="button" class="close clearfilter" ng-show="urlSuffixfilter" ng-click="urlSuffixfilter=''; resetPagination()"><span class="pull-right" aria-hidden="true">&times;</span><span class="sr-only">{{'common.controls.close' | translate}}</span></button>
-                </div>
-            </th>
-            <th class="fix-top">
-                <select class="form-control typefilter v-small-input"
-                        ng-model="instanceTypeFilter"
-                        ng-options="item.label for item in typeFilterOptions"
-                        ng-change="resetPagination()">
-                </select>
-            </th>
-            <th class="fix-top">
-            </th>
-        </tr>
-
-        </thead>
-        <tbody>
-        <tr ng-repeat="url in urls.items">
-
-            <td>
-                <a href="#/urls/edit/{{url.ViewUrlInfo.url_name}}">{{url.ViewUrlInfo.url_name}}</a>
-            </td>
-            <td>
-                <a target="_blank" href="{{fromSiteRoot('/#/main/view/' + url.ViewUrlInfo.view_instance_common_name + '/' + url.ViewUrlInfo.url_suffix)}}">/main/view/{{url.ViewUrlInfo.view_instance_common_name}}/{{url.ViewUrlInfo.url_suffix}}
-                    &nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a>
-
-            </td>
-            <td>
-                <span>{{url.ViewUrlInfo.view_instance_common_name}} {{"{"+url.ViewUrlInfo.view_instance_version+"}"}} </span>
-            </td>
-            <td>
-                <span>{{url.ViewUrlInfo.view_instance_name}}</span>
-            </td>
-
-        </tr>
-        </tbody>
-    </table>
-    <div ng-if="isLoadingUrls" class="spinner-container">
-      <i class="fa fa-2x fa-spinner fa-spin" aria-hidden="true"></i>
-    </div>
-    <div class="alert alert-info col-sm-12" ng-show="!urls.items.length && !isLoadingUrls">
-        {{'urls.noUrlsToDisplay'| translate}}
-    </div>
-    <div class="col-sm-12 table-bar">
-        <div class="pull-left filtered-info">
-            <span>{{'common.filterInfo' | translate: '{showed: tableInfo.showed, total: tableInfo.total, term: urs.urls}'}}</span>
-            <span ng-show="isNotEmptyFilter">- <a href ng-click="clearFilters()">{{'common.controls.clearFilters' | translate}}</a></span>
-        </div>
-        <div class="pull-right left-margin">
-            <pagination class="paginator" total-items="totalUrls" max-size="maxVisiblePages" items-per-page="urlsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>
-        </div>
-        <div class="pull-right">
-            <select class="form-control" ng-model="urlsPerPage" ng-change="urlsPerPageChanged()" ng-options="currOption for currOption in [10, 25, 50, 100]"></select>
-        </div>
-    </div>
-
-</div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/dd0421a2/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/modals/create.html
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/modals/create.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/modals/create.html
index c5410c1..48757d4 100644
--- a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/modals/create.html
+++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/modals/create.html
@@ -15,110 +15,160 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->
-<form class="form-horizontal" role="form" name="form.instanceCreateForm" novalidate>
+<form role="form" id="create-instance-form" name="form.instanceCreateForm" novalidate>
 <div class="modal-header">
   <h3 class="modal-title">{{'views.createViewInstance' | translate}}</h3>
 </div>
-<div class="modal-body createViewModal">
-  <div class="view-header">
-    <img src="http://placehold.it/64x64" alt="" class="icon-big">
-    <img src="http://placehold.it/32x32" alt="" class="icon-small">
-    <div class="description">
-      <h3>{{view.ViewVersionInfo.view_name}}</h3>
-      <span>{{view.ViewVersionInfo.label}} | Version: {{view.ViewVersionInfo.version}}</span>
+<div class="modal-body" ng-hide="isLoading">
+
+  <div class="row">
+
+    <div class="form-group col-sm-6" ng-class="{ 'has-error': form.instanceCreateForm.view.$error.required && form.instanceCreateForm.submitted }">
+      <label for="view">
+        {{'views.createInstance.selectView' | translate}}<span>*</span>&nbsp;
+        <i class="fa fa-question-circle" aria-hidden="true"></i>
+      </label>
+      <select
+        class="form-control"
+        id="view"
+        name="view"
+        ng-model="formData.view"
+        ng-change="updateVersionOptions()"
+        ng-options="item.label for item in viewOptions"
+        required>
+      </select>
+      <span class="help-block validation-block" ng-show='form.instanceCreateForm.view.$error.required && form.instanceCreateForm.submitted'>
+        {{'common.alerts.fieldRequired' | translate}}
+      </span>
+    </div>
+
+    <div class="form-group col-sm-6" ng-class="{ 'has-error': form.instanceCreateForm.version.$error.required && form.instanceCreateForm.submitted }">
+      <label for="version">
+        {{'views.createInstance.selectVersion' | translate}}<span>*</span>&nbsp;
+        <i class="fa fa-question-circle" aria-hidden="true"></i>
+      </label>
+      <select
+        class="form-control"
+        id="version"
+        name="version"
+        ng-model="formData.version"
+        ng-options="item.label for item in versionOptions">
+      </select>
+      <span class="help-block validation-block" ng-show='form.instanceCreateForm.version.$error.required && form.instanceCreateForm.submitted'>
+        {{'common.alerts.fieldRequired' | translate}}
+      </span>
     </div>
   </div>
-  
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <h3 class="panel-title">{{'common.details' | translate}}</h3>
-      </div>
-      <div class="panel-body">
-        <div class="form-group" 
-        ng-class="{'has-error' : ( (form.instanceCreateForm.instanceNameInput.$error.required || form.instanceCreateForm.instanceNameInput.$error.pattern) && form.instanceCreateForm.submitted) || instanceExists }"
-        >
-          <label for="" class="control-labe col-sm-2">{{'views.instanceName' | translate}}</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" name="instanceNameInput" ng-pattern="nameValidationPattern" required ng-model="instance.instance_name">
 
-            <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.instanceNameInput.$error.required && form.instanceCreateForm.submitted'>
-              {{'common.alerts.fieldRequired' | translate}}
-            </div>
-            <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.instanceNameInput.$error.pattern && form.instanceCreateForm.submitted'>
-              {{'common.alerts.noSpecialChars' | translate}}
-            </div>
-            <div class="alert alert-danger no-margin-bottom top-margin" ng-show='instanceExists'>
-              {{'views.alerts.instanceExists' | translate}}
-            </div>
-          </div>
-        </div>
-        <div class="form-group"
-        ng-class="{'has-error' : ( (form.instanceCreateForm.displayLabel.$error.required || form.instanceCreateForm.displayLabel.$error.pattern) && form.instanceCreateForm.submitted)}">
-          <label for="" class="control-labe col-sm-2">{{'common.displayLabel' | translate}}</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" name="displayLabel" ng-model="instance.label" required ng-pattern="nameValidationPattern">
+  <div class="h4">{{'common.details' | translate}}</div>
+  <div class="form-group"
+       ng-class="{ 'has-error': (form.instanceCreateForm.instanceName.$error.required || form.instanceCreateForm.instanceName.$error.pattern || isInstanceExists) && form.instanceCreateForm.submitted }">
+    <label for="instanceName">
+      {{'views.instanceName' | translate}}<span>*</span>&nbsp;
+      <i class="fa fa-question-circle" aria-hidden="true"></i>
+    </label>
+    <input type="text" class="form-control"
+           ng-model="formData.instanceName"
+           name="instanceName"
+           id="instanceName"
+           ng-change="checkIfInstanceExist()"
+           ng-pattern="nameValidationPattern" required>
+    <span class="help-block validation-block"
+         ng-show='form.instanceCreateForm.instanceName.$error.required && form.instanceCreateForm.submitted'>
+      {{'common.alerts.fieldRequired' | translate}}
+    </span>
+    <span class="help-block validation-block"
+         ng-show='form.instanceCreateForm.instanceName.$error.pattern && form.instanceCreateForm.submitted'>
+      {{'common.alerts.noSpecialChars' | translate}}
+    </span>
+    <span class="help-block validation-block"
+         ng-show='isInstanceExists && form.instanceCreateForm.submitted'>
+      {{'views.alerts.instanceExists' | translate}}
+    </span>
+  </div>
 
-            <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.displayLabel.$error.required && form.instanceCreateForm.submitted'>
-              {{'common.alerts.fieldRequired' | translate}}
-            </div>
-            <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.displayLabel.$error.pattern && form.instanceCreateForm.submitted'>
-              {{'common.alerts.noSpecialChars' | translate}}
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="form-group">
-          <div class="col-sm-10 col-sm-offset-2">
-            <button class="btn btn-default" ng-click="isAdvancedClosed = !isAdvancedClosed">{{'views.advanced' | translate}}</button>
-          </div>
-      </div>
-      <div collapse="isAdvancedClosed">
-        <div class="form-group">
-          <div class="col-sm-10 col-sm-offset-2">
-            <div class="checkbox">
-              <label>
-                <input type="checkbox" ng-model='instance.visible'> {{'views.visible' | translate}}
-              </label>
-            </div>
-          </div>
-        </div>
-        <div class="form-group">
-          <div class="col-sm-10 col-sm-offset-2">
-            <label for="" class="control-label col-sm-2">{{'views.icon' | translate}}</label>
-            <div class="col-sm-10">
-              <input type="text" class="form-control" name="iconUrl" ng-model="instance.icon_path">
-            </div>
-          </div>
-        </div>
-        <div class="form-group">
-          <div class="col-sm-10 col-sm-offset-2">
-            <label for="" class="control-label col-sm-2">{{'views.icon64' | translate}}</label>
-            <div class="col-sm-10">
-              <input type="text" class="form-control" name="icon64Url" ng-model="instance.icon64_path">
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div class="form-group" ng-class="{ 'has-error': form.instanceCreateForm.displayName.$error.required && form.instanceCreateForm.submitted }">
+    <label for="displayName">
+      {{'views.displayName' | translate}}<span>*</span>&nbsp;
+      <i class="fa fa-question-circle" aria-hidden="true"></i>
+    </label>
+    <input type="text" class="form-control" required
+           name="displayName"
+           ng-model="formData.displayName"
+           id="displayName">
+    <span class="help-block validation-block" ng-show='form.instanceCreateForm.displayName.$error.required && form.instanceCreateForm.submitted'>
+      {{'common.alerts.fieldRequired' | translate}}
+    </span>
+  </div>
 
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <h3 class="panel-title">{{'views.configuration' | translate}}</h3>
-      </div>
-      <div class="panel-body">
-      <div class="form-group" ng-repeat="parameter in instance.properties"
-        ng-class="{'has-error' : (form.instanceCreateForm[parameter.name].$error.required && form.instanceCreateForm.submitted)}" >
-        <label for="" class="col-sm-3 control-label">{{parameter.description}}</label>
-        <div class="col-sm-9">
-          <input type="text" class="form-control"  name="{{parameter.name}}" ng-required="parameter.required" ng-model="parameter.value">
-          <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm[parameter.name].$error.required && form.instanceCreateForm.submitted'>
-            {{'common.alerts.fieldRequired' | translate}}
-          </div>
-        </div>
-      </div>
+  <div class="form-group" ng-class="{ 'has-error': form.instanceCreateForm.description.$error.required && form.instanceCreateForm.submitted }">
+    <label for="description">
+      {{'views.description' | translate}}<span>*</span>&nbsp;
+      <i class="fa fa-question-circle" aria-hidden="true"></i>
+    </label>
+    <input type="text" class="form-control" required
+           name="description"
+           ng-model="formData.description"
+           id="description">
+    <span class="help-block validation-block" ng-show='form.instanceCreateForm.description.$error.required && form.instanceCreateForm.submitted'>
+      {{'common.alerts.fieldRequired' | translate}}
+    </span>
+  </div>
+
+  <div class="form-group checkbox">
+    <input type="checkbox" class="form-control"
+           name="visible"
+           ng-model="formData.visible"
+           id="visible">
+    <label for="visible">
+      {{'views.visible' | translate}}
+      <i class="fa fa-question-circle" aria-hidden="true"></i>
+    </label>
+  </div>
+
+  <div class="h4">{{'views.clusterConfiguration' | translate}}</div>
+  <div class="form-group">
+    <label for="clusterType">
+      {{'views.createInstance.clusterType' | translate}}?&nbsp;
+      <i class="fa fa-question-circle" aria-hidden="true"></i>
+    </label>
+    <div>
+      <div class="btn-group" role="group" id="clusterType">
+        <button type="button" class="btn btn-default"
+                ng-class="isLocalTypeChosen && 'active'"
+                ng-click="switchClusterType(true)">
+          {{'common.local' | translate}}
+        </button>
+        <button type="button" class="btn btn-default"
+                ng-class="!isLocalTypeChosen && 'active'"
+                ng-click="switchClusterType(false)">
+          {{'common.remote' | translate}}
+        </button>
       </div>
     </div>
-  
+  </div>
+  <div class="row">
+    <div class="form-group col-sm-6" ng-class="{ 'has-error': form.instanceCreateForm.clusterName.$error.required && form.instanceCreateForm.submitted }">
+      <label for="clusterName">
+        {{'views.clusterName' | translate}}<span>*</span>&nbsp;
+        <i class="fa fa-question-circle" aria-hidden="true"></i>
+      </label>
+      <select
+        required
+        name="clusterName"
+        ng-options="item.label for item in clusterOptions"
+        class="form-control"
+        ng-model="formData.clusterName"
+        id="clusterName">
+      </select>
+      <span class="help-block validation-block" ng-show='form.instanceCreateForm.clusterName.$error.required && form.instanceCreateForm.submitted'>
+        {{'common.alerts.fieldRequired' | translate}}
+      </span>
+    </div>
+  </div>
+</div>
+<div ng-if="isLoading" class="spinner-container">
+  <i class="fa fa-2x fa-spinner fa-spin" aria-hidden="true"></i>
 </div>
 <div class="modal-footer">
   <button class="btn btn-default" ng-click="cancel()">{{'common.controls.cancel' | translate}}</button>

http://git-wip-us.apache.org/repos/asf/ambari/blob/dd0421a2/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/modals/edit.html
----------------------------------------------------------------------
diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/modals/edit.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/modals/edit.html
deleted file mode 100644
index aab526e..0000000
--- a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/modals/edit.html
+++ /dev/null
@@ -1,138 +0,0 @@
-<!--
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
--->
-
-<div class="modal-header">
-  <h3 class="modal-title">{{'views.edit' | translate}} {{instance.ViewInstanceInfo.view_name}}: {{instance.ViewInstanceInfo.label}}</h3>
-</div>
-<div class="modal-body">
-  <div class="panel panel-default">
-    <div class="panel-heading clearfix">
-      <h3 class="panel-title pull-left">{{'views.settings' | translate}}</h3>
-      <div class="pull-right">
-        <a href ng-click="edit.editSettingsDisabled = !edit.editSettingsDisabled" ng-show="edit.editSettingsDisabled"> <span class="glyphicon glyphicon-cog"></span> {{'views.edit' | translate}}</a>
-      </div>
-    </div>
-    <div class="panel-body">
-      <form class="form-horizontal">
-        <fieldset ng-disabled="edit.editSettingsDisabled">
-          <div class="form-group">
-            <label for="" class="col-sm-2 control-label">{{'views.instanceId' | translate}}</label>
-            <label for="" class="col-sm-10 control-label text-left">{{instance.ViewInstanceInfo.instance_name}}</label>
-          </div>
-          <div class="form-group">
-            <label for="" class="col-sm-2 control-label">{{'views.displayName' | translate}}</label>
-            <div class="col-sm-10"><input type="text" class="form-control" placeholder="{{'views.displayName' | translate}}" ng-model="settings.label"></div>
-          </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <div class="checkbox">
-                <label>
-                  <input type="checkbox" ng-model="settings.visible"> {{'views.visible' | translate}}
-                </label>
-              </div>
-            </div>
-          </div>
-          <div class="form-group" ng-hide="edit.editSettingsDisabled">
-            <div class="col-sm-offset-2 col-sm-10">
-              <button class="btn btn-default pull-right left-margin" ng-click="cancelSettings()">{{'common.controls.cancel' | translate}}</button>
-              <button class="btn btn-primary pull-right" ng-click="saveSettings()">{{'common.controls.save' | translate}}</button>
-            </div>
-          </div>
-        </fieldset>
-      </form>
-    </div>
-  </div>
-
-  <div class="panel panel-default views-permissions-panel" style="">
-    <div class="panel-heading clearfix">
-      <h3 class="panel-title pull-left">{{'views.permissions' | translate}}</h3>
-      <div class="pull-right">
-        <a href ng-click="edit.editPermissionDisabled = !edit.editPermissionDisabled" ng-show="edit.editPermissionDisabled"> <span class="glyphicon glyphicon-cog"></span> {{'views.edit' | translate}}</a>
-      </div>
-    </div>
-    <div class="panel-body">
-      <form class="form-horizontal">
-        <div class="form-group">
-          <div class="col-sm-2"></div>
-          <label class="col-sm-5 control-label text-left">{{'common.users' | translate}}</label>
-          <label class="col-sm-5 control-label text-left">{{'common.groups' | translate}}</label>
-        </div>
-        <div class="form-group" ng-repeat="permission in permissions">
-          <label class="col-sm-2 control-label">{{permission.PermissionInfo.permission_name}}</label>
-          <div class="col-sm-5" ng-switch="edit.editPermissionDisabled">
-            <textarea name="" id="" cols="30" rows="4" class="form-control" ng-model="permissionsEdit[permission.PermissionInfo.permission_name].USER" ng-switch-when="false"></textarea>
-            <div class="well" ng-switch-when="true">
-              <span ng-repeat="user in permission.USER">
-                <link-to route="users.show" id="{{user}}">{{user}}</link-to>
-                <button type="button" class="close remove-button" 
-                  ng-click="removePermission(permission.name, 'USER', user)"><span aria-hidden="true">&times;</span><span class="sr-only">{{'common.controls.close' | translate}}</span></button>
-                {{$last ? '' :', '}}
-              </span>
-            </div>
-          </div>
-          <div class="col-sm-5" ng-switch="edit.editPermissionDisabled">
-            <textarea name="" id="" cols="30" rows="4" class="form-control" ng-model="permissionsEdit[permission.PermissionInfo.permission_name].GROUP" ng-switch-when="false"></textarea>
-            <div class="well" ng-switch-when="true">
-              <span ng-repeat="group in permission.GROUP">
-                <link-to route="groups.edit" id="{{group}}" >{{group}}</link-to>
-                <button type="button" class="close remove-button" 
-                  ng-click="removePermission(permission.name, 'GROUP', group)"><span aria-hidden="true">&times;</span><span class="sr-only">{{'common.controls.close' | translate}}</span></button>
-                {{$last ? '' :', '}}
-              </span>
-            </div>
-          </div>
-        </div>
-        <div class="form-group" ng-hide="edit.editPermissionDisabled">
-          <div class="col-sm-offset-2 col-sm-10">
-            <button class="btn btn-default pull-right left-margin" ng-click="cancelPermissions()">{{'common.controls.cancel' | translate}}</button>
-            <button class="btn btn-primary pull-right" ng-click="savePermissions()">{{'common.controls.save' | translate}}</button>
-          </div>
-        </div>
-      </form>
-        
-    </div>
-  </div>
-
-  <div class="panel panel-default">
-    <div class="panel-heading clearfix">
-      <h3 class="panel-title pull-left">{{'views.configuration' | translate}}</h3>
-      <div class="pull-right">
-        <a href ng-click="edit.editConfigurationDisabled = !edit.editConfigurationDisabled" ng-show="edit.editConfigurationDisabled"> <span class="glyphicon glyphicon-cog"></span> {{'views.edit' | translate}}</a>
-      </div>
-    </div>
-    <div class="panel-body">
-      <form action="" class="form-horizontal">
-        <fieldset ng-disabled="edit.editConfigurationDisabled">
-          <div class="form-group" ng-repeat="(propertyName, propertyValue) in configuration">
-            <label for="" class="control-label col-sm-3">{{propertyName}}</label>
-            <div class="col-sm-9"><input type="text" class="form-control" ng-model="configuration[propertyName]"></div>
-          </div>
-          <div class="form-group" ng-hide="edit.editConfigurationDisabled">
-            <div class="col-sm-offset-2 col-sm-10">
-              <button class="btn btn-default pull-right left-margin" ng-click="cancelConfiguration()">{{'common.controls.cancel' | translate}}</button>
-              <button class="btn btn-primary pull-right" ng-click="saveConfiguration()">{{'common.controls.save' | translate}}</button>
-            </div>
-          </div>
-        </fieldset>
-      </form>
-    </div>
-  </div>
-</div>
-<div class="modal-footer">
-  <button class="btn btn-default" ng-click="close()">{{'common.controls.save' | translate}}</button>
-</div>