AMBARI-7166 Support changing the cluster name of an existing cluster (Frontend part). (atkach)

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

@@ -20,12 +20,51 @@
 angular.module('ambariAdminConsole')
 .controller('NavbarCtrl',['$scope', 'Cluster', '$location', 'uiAlert', 'ROUTES', 'LDAP', 'ConfirmationModal', '$rootScope', function($scope, Cluster, $location, uiAlert, ROUTES, LDAP, ConfirmationModal, $rootScope) {
   $scope.cluster = null;
+  $scope.editCluster = {
+    name        : '',
+    editingName : false
+  };
+
   Cluster.getStatus().then(function(cluster) {
     $scope.cluster = cluster;
   }).catch(function(data) {
   	uiAlert.danger(data.status, data.message);
   });
 
+  $scope.toggleEditName = function($event) {
+    if ($event && $event.keyCode !== 27) {
+      // 27 = Escape key
+      return false;
+    }
+
+    $scope.editCluster.name         = $scope.cluster.Clusters.cluster_name;
+    $scope.editCluster.editingName  = !$scope.editCluster.editingName;
+  };
+
+  $scope.confirmClusterNameChange = function() {
+    ConfirmationModal.show('Confirm Cluster Name Change', 'Are you sure you want to change the cluster name to ' + $scope.editCluster.name + '?')
+      .then(function() {
+        $scope.saveClusterName();
+      }).catch(function() {
+        // user clicked cancel
+        $scope.toggleEditName();
+      });
+  };
+
+  $scope.saveClusterName = function() {
+    var oldClusterName = $scope.cluster.Clusters.cluster_name,
+        newClusterName = $scope.editCluster.name;
+
+    Cluster.editName(oldClusterName, newClusterName).then(function(data) {
+      $scope.cluster.Clusters.cluster_name = newClusterName;
+      uiAlert.success('Success', 'The cluster has been renamed to ' + newClusterName + '.');
+    }).catch(function(data) {
+      uiAlert.danger(data.data.status, data.data.message);
+    });
+
+    $scope.toggleEditName();
+  };
+
   $scope.isActive = function(path) {
   	var route = ROUTES;
   	angular.forEach(path.split('.'), function(routeObj) {
@@ -54,4 +93,4 @@ angular.module('ambariAdminConsole')
       });
     });
   };
-}]);
+}]);

ambari-admin/src/main/resources/ui/admin-web/app/scripts/services/Cluster.js

@@ -48,8 +48,7 @@ angular.module('ambariAdminConsole')
         deferred.resolve(data.items);
       })
       .catch(function(data) {
-        deferred.reject(data);
-      });
+        deferred.reject(data); });
 
       return deferred.promise;
     },
@@ -103,6 +102,17 @@ angular.module('ambariAdminConsole')
           'PrivilegeInfo/permission_name': permissionName
         }
       });
+    },
+    editName: function(oldName, newName) {
+      return $http({
+        method: 'PUT',
+        url: Settings.baseUrl + '/clusters/' + oldName,
+        data: {
+          Clusters: {
+            "cluster_name": newName
+          }
+        }
+      });
     }
   };
 }]);

ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css

@@ -736,3 +736,21 @@ input[type="submit"].btn.btn-mini {
 .breadcrumb > .active {
   color: #666;
 }
+
+.edit-cluster-name {
+  cursor: pointer;
+}
+
+.edit-cluster-name:hover {
+  color: #428bca;
+}
+
+.editClusterNameForm button.btn {
+  padding: 4px 8px;
+}
+
+.editClusterNameForm input {
+  width: 161px;
+  float: left;
+  margin-right: 5px;
+}

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

@@ -15,12 +15,45 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->
-<div class="left-navbar">
+<div class="left-navbar" xmlns="http://www.w3.org/1999/html">
   <div class="panel panel-default">
     <div class="panel-heading"><span class="glyphicon glyphicon-cloud"></span> Clusters</div>
     <div class="panel-body">
       <div ng-show="cluster">
-        <h5>{{cluster.Clusters.cluster_name}}</h5>
+        <div ng-switch on="editCluster.editingName">
+          <h5 ng-switch-when="false">{{cluster.Clusters.cluster_name}}
+            <i ng-click="toggleEditName()" class="glyphicon glyphicon-edit pull-right edit-cluster-name" tooltip="Rename Cluster"></i>
+          </h5>
+
+          <form ng-keyup="toggleEditName($event)" tabindex="1" name="editClusterNameForm" class="editClusterNameForm" ng-switch-when="true"
+                ng-submit="editCluster.name !== cluster.Clusters.cluster_name && editClusterNameForm.newClusterName.$valid && confirmClusterNameChange()">
+            <div class="form-group" ng-class="{'has-error': editClusterNameForm.newClusterName.$invalid && !editClusterNameForm.newClusterName.$pristine }">
+              <input
+                  autofocus
+                  type="text"
+                  name="newClusterName"
+                  ng-required="true"
+                  ng-pattern="/^[a-zA-Z0-9]*$/"
+                  ng-model="editCluster.name"
+                  class="form-control input-sm"
+                  tooltip="Only alpha-numeric characters."
+                  tooltip-trigger="focus">
+
+              <button
+                  type="submit"
+                  class="btn btn-success btn-xs"
+                  ng-class="{'disabled': editClusterNameForm.newClusterName.$invalid || editCluster.name == cluster.Clusters.cluster_name}">
+                <i class="glyphicon glyphicon-ok"></i>
+              </button>
+              <button ng-click="toggleEditName()"
+                      class="btn btn-danger btn-xs">
+                <i class="glyphicon glyphicon-remove"></i>
+              </button>
+            </div>
+          </form>
+
+        </div>
+
         <ul class="nav nav-pills nav-stacked">
           <li ng-class="{active: isActive('clusters.manageAccess')}">
             <a href="#/clusters/{{cluster.Clusters.cluster_name}}/manageAccess" class="permissions">Permissions</a>
@@ -69,4 +102,4 @@
   </div>
 
 </div>
-  
+  

ambari-web/app/messages.js

@@ -376,7 +376,7 @@ Em.I18n.translations = {
   'installer.step0.body':'This wizard will walk you through the cluster installation process.  Let\'s start by naming your new cluster.',
   'installer.step0.clusterName':'Name your cluster',
   'installer.step0.clusterName.tooltip.title':'Cluster Name',
-  'installer.step0.clusterName.tooltip.content':'Enter a unique cluster name. Cluster name cannot be changed later.',
+  'installer.step0.clusterName.tooltip.content':'Enter a unique cluster name.',
   'installer.step0.clusterName.error.required':'Cluster Name is required',
   'installer.step0.clusterName.error.whitespaces':'Cluster Name cannot contain white spaces',
   'installer.step0.clusterName.error.specialChar':'Cluster Name cannot contain special characters',