Repository: ambari Updated Branches: refs/heads/trunk cc535c841 -> af8c40178
AMBARI-22478 Ambari 3.0: Implement new design for Admin View: Edit cluster name. (atkach) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/af8c4017 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/af8c4017 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/af8c4017 Branch: refs/heads/trunk Commit: af8c40178f4caf56404d688ec56c252e25de3aef Parents: cc535c8 Author: Andrii Tkach <[email protected]> Authored: Mon Nov 20 16:18:27 2017 +0200 Committer: Andrii Tkach <[email protected]> Committed: Mon Nov 20 16:18:27 2017 +0200 ---------------------------------------------------------------------- .../controllers/ClusterInformationCtrl.js | 45 +++++++- .../app/styles/cluster-information.css | 13 ++- .../admin-web/app/views/clusterInformation.html | 29 +++++- .../controllers/ClusterInformationCtrl_test.js | 102 +++++++++++++++++++ 4 files changed, 176 insertions(+), 13 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/af8c4017/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ClusterInformationCtrl.js ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ClusterInformationCtrl.js b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ClusterInformationCtrl.js index 60a610c..059f399 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ClusterInformationCtrl.js +++ b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ClusterInformationCtrl.js @@ -18,16 +18,22 @@ 'use strict'; angular.module('ambariAdminConsole') -.controller('ClusterInformationCtrl', ['$scope', '$http', '$location', 'Cluster', '$routeParams', '$translate', '$rootScope', -function($scope, $http, $location, Cluster, $routeParams, $translate, $rootScope) { +.controller('ClusterInformationCtrl', +['$scope', '$http', '$location', 'Cluster', '$routeParams', '$translate', '$rootScope', 'ConfirmationModal', 'Alert', +function($scope, $http, $location, Cluster, $routeParams, $translate, $rootScope, ConfirmationModal, Alert) { var $t = $translate.instant; $scope.isDataLoaded = false; + $scope.edit = { + clusterName: null + }; + $scope.isClusterNameEdited = false; $scope.$watch(function() { return $rootScope.cluster; }, function() { $scope.cluster = $rootScope.cluster; if ($scope.cluster) { + $scope.edit.clusterName = $scope.cluster.Clusters.cluster_name; $scope.getBlueprint(); } }, true); @@ -62,4 +68,39 @@ function($scope, $http, $location, Cluster, $routeParams, $translate, $rootScope a.click(); } }; + + $scope.toggleSaveButton = function() { + var value = $scope.edit.clusterName; + $scope.isClusterNameEdited = (value !== null && $scope.cluster.Clusters.cluster_name !== value); + }; + + $scope.confirmClusterNameChange = function() { + ConfirmationModal.show( + $t('common.clusterNameChangeConfirmation.title'), + $t('common.clusterNameChangeConfirmation.message', { + clusterName: $scope.edit.clusterName + }) + ) + .then(function () { + $scope.saveClusterName(); + }).catch(function () { + // user clicked cancel + $scope.edit.clusterName = $scope.cluster.Clusters.cluster_name; + $scope.toggleSaveButton(); + }); + }; + + $scope.saveClusterName = function() { + var oldClusterName = $scope.cluster.Clusters.cluster_name, + newClusterName = $scope.edit.clusterName; + + Cluster.editName(oldClusterName, newClusterName).then(function(data) { + $scope.cluster.Clusters.cluster_name = newClusterName; + $scope.edit.clusterName = newClusterName; + $scope.toggleSaveButton(); + Alert.success($t('common.alerts.clusterRenamed', {clusterName: newClusterName})); + }).catch(function(data) { + Alert.error($t('common.alerts.cannotRenameCluster', {clusterName: newClusterName}), data.data.message); + }); + }; }]); http://git-wip-us.apache.org/repos/asf/ambari/blob/af8c4017/ambari-admin/src/main/resources/ui/admin-web/app/styles/cluster-information.css ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/styles/cluster-information.css b/ambari-admin/src/main/resources/ui/admin-web/app/styles/cluster-information.css index 63f4150..64e9ecb 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/styles/cluster-information.css +++ b/ambari-admin/src/main/resources/ui/admin-web/app/styles/cluster-information.css @@ -28,19 +28,18 @@ vertical-align: text-top; } -#cluster-information .cluster-name label { - font-weight: normal; +#cluster-information .cluster-name input { + width: 75%; } -#cluster-information .dev-blueprint { - line-height: 35px; +#cluster-information .cluster-name button { + margin-top: -34px; } -#cluster-information .dev-blueprint span { - vertical-align: text-top; +#cluster-information .cluster-name input.edited { + background-color: #fdfbdd; } - #cluster-information .welcome-header { margin: -15px; padding: 15px 15px 40px 15px; http://git-wip-us.apache.org/repos/asf/ambari/blob/af8c4017/ambari-admin/src/main/resources/ui/admin-web/app/views/clusterInformation.html ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/clusterInformation.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/clusterInformation.html index 6334d06..ead73c3 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/views/clusterInformation.html +++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/clusterInformation.html @@ -39,12 +39,33 @@ </div> <div ng-show="cluster.Clusters.provisioning_state === 'INSTALLED'"> - <div class="row"> - <div class="form-group col-xs-3 cluster-name"> + <form class="row" name="editClusterNameForm" ng-submit="confirmClusterNameChange()"> + <div class="form-group col-xs-4 cluster-name" + ng-class="{'has-error': editClusterNameForm.clusterName.$invalid}"> <label for="clusterName">{{'views.clusterName' | translate}}*</label> - <input type="text" class="form-control" id="clusterName" ng-model="cluster.Clusters.cluster_name"> + <input type="text" + class="form-control" + id="clusterName" + name="clusterName" + ng-change="toggleSaveButton()" + ng-model="edit.clusterName" + required + autofocus + ng-pattern="/^\w*$/" + ng-maxlength="80" + tooltip="{{'common.renameClusterTip' | translate}}" + tooltip-trigger="focus" + tooltip-placement="bottom" + ng-class="{edited: isClusterNameEdited}"> + <button + type="submit" + ng-class="{'disabled': editClusterNameForm.clusterName.$invalid}" + class="btn btn-default pull-right" + ng-show="isClusterNameEdited"> + {{'common.controls.save' | translate}} + </button> </div> - </div> + </form> <div> <div class="row dev-blueprint"> <div class="col-sm-11"><span>{{'clusters.devBlueprint' | translate}}</span></div> http://git-wip-us.apache.org/repos/asf/ambari/blob/af8c4017/ambari-admin/src/main/resources/ui/admin-web/test/unit/controllers/ClusterInformationCtrl_test.js ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/test/unit/controllers/ClusterInformationCtrl_test.js b/ambari-admin/src/main/resources/ui/admin-web/test/unit/controllers/ClusterInformationCtrl_test.js new file mode 100644 index 0000000..2972e7f --- /dev/null +++ b/ambari-admin/src/main/resources/ui/admin-web/test/unit/controllers/ClusterInformationCtrl_test.js @@ -0,0 +1,102 @@ +/** + * 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. + */ + +describe('ClusterInformationCtrl', function() { + beforeEach(module('ambariAdminConsole')); + + var ctrl, $scope, Cluster, deferred, ConfirmationModal; + + beforeEach(inject(function($controller, $rootScope, _Cluster_, _$q_, _ConfirmationModal_){ + // The injector unwraps the underscores (_) from around the parameter names when matching + Cluster = _Cluster_; + ConfirmationModal = _ConfirmationModal_; + deferred = _$q_.defer(); + $scope = $rootScope.$new(); + $scope.$apply(); + ctrl = $controller('ClusterInformationCtrl', { + $scope: $scope + }); + + spyOn(Cluster, 'getBlueprint').andReturn(deferred.promise); + spyOn(Cluster, 'editName').andReturn(deferred.promise); + spyOn(ConfirmationModal, 'show').andReturn(deferred.promise); + })); + + describe('#getBlueprint', function() { + it('Cluster.getBlueprint should be called', function() { + $scope.cluster = { + Clusters: { + cluster_name: 'c1' + } + }; + $scope.getBlueprint(); + expect(Cluster.getBlueprint).toHaveBeenCalled(); + }); + }); + + describe('#toggleSaveButton', function() { + beforeEach(function() { + $scope.cluster = { + Clusters: { + cluster_name: 'c1' + } + }; + }); + + it('isClusterNameEdited should be true', function() { + $scope.edit = { + clusterName: 'c2' + }; + $scope.toggleSaveButton(); + expect($scope.isClusterNameEdited).toBeTruthy(); + }); + + it('isClusterNameEdited should be false', function() { + $scope.edit = { + clusterName: 'c1' + }; + $scope.toggleSaveButton(); + expect($scope.isClusterNameEdited).toBeFalsy(); + }); + }); + + describe('#confirmClusterNameChange', function() { + it('ConfirmationModal.show should be called', function() { + $scope.edit = { + clusterName: 'c1' + }; + $scope.confirmClusterNameChange(); + expect(ConfirmationModal.show).toHaveBeenCalled(); + }); + }); + + describe('#saveClusterName', function() { + it('Cluster.editName should be called', function() { + $scope.edit = { + clusterName: 'c1' + }; + $scope.cluster = { + Clusters: { + cluster_name: 'c2' + } + }; + $scope.saveClusterName(); + expect(Cluster.editName).toHaveBeenCalledWith('c2', 'c1'); + }); + }); +});
