AMBARI-7233. Admin View: misc UI improvements. (yusaku)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/d961ca00 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/d961ca00 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/d961ca00 Branch: refs/heads/branch-alerts-dev Commit: d961ca0049aaf756616a91220f5d9878f7518f2b Parents: 7d9feb6 Author: Yusaku Sako <yus...@hortonworks.com> Authored: Thu Sep 11 12:49:27 2014 -0700 Committer: Yusaku Sako <yus...@hortonworks.com> Committed: Thu Sep 11 12:57:11 2014 -0700 ---------------------------------------------------------------------- .../main/resources/ui/admin-web/app/index.html | 7 +++-- .../resources/ui/admin-web/app/scripts/app.js | 3 +- .../controllers/ambariViews/ViewsEditCtrl.js | 7 +---- .../controllers/groups/GroupsEditCtrl.js | 8 +++--- .../app/scripts/controllers/mainCtrl.js | 2 +- .../scripts/controllers/users/UsersShowCtrl.js | 18 ++++++++---- .../ui/admin-web/app/scripts/i18n.config.js | 29 ++++++++++++++++++++ .../resources/ui/admin-web/app/styles/main.css | 9 ++++++ .../admin-web/app/views/ambariViews/edit.html | 10 +++---- .../app/views/clusters/manageAccess.html | 2 +- .../ui/admin-web/app/views/groups/edit.html | 4 +-- .../ui/admin-web/app/views/users/show.html | 8 +++--- .../src/main/resources/ui/admin-web/bower.json | 4 ++- 13 files changed, 78 insertions(+), 33 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/d961ca00/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 e7a8371..7ff0638 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 @@ -29,6 +29,7 @@ <!-- bower:css --> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="bower_components/angular-bootstrap-toggle-switch/style/bootstrap3/angular-toggle-switch-bootstrap-3.css" /> + <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"/> <!-- endbower --> <!-- endbuild --> @@ -52,12 +53,12 @@ <li> <div class="btn-group" dropdown is-open="status.isopen"> <button type="button" class="btn btn-default dropdown-toggle navbar-btn" ng-disabled="disabled"> - {{currentUser}} <span class="caret"></span> + <i class="fa fa-user"></i> {{currentUser}} <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href ng-click="about()">About</a></li> <li class="divider"></li> - <li><a href ng-click="signOut()">Sign Out</a></li> + <li><a href ng-click="signOut()">Sign out</a></li> </ul> </div> </li> @@ -91,6 +92,7 @@ <script src="bower_components/lodash/dist/lodash.compat.js"></script> <script src="bower_components/restangular/dist/restangular.js"></script> <script src="bower_components/angular-bootstrap-toggle-switch/angular-toggle-switch.min.js"></script> + <script src="bower_components/angular-translate/angular-translate.min.js"></script> <!-- endbower --> <!-- endbuild --> @@ -112,6 +114,7 @@ <!-- build:js scripts/main.js --> <script src="scripts/app.js"></script> <script src="scripts/routes.js"></script> + <script src="scripts/i18n.config.js"></script> <script src="scripts/controllers/mainCtrl.js"></script> <script src="scripts/controllers/NavbarCtrl.js"></script> <script src="scripts/controllers/users/UsersCreateCtrl.js"></script> http://git-wip-us.apache.org/repos/asf/ambari/blob/d961ca00/ambari-admin/src/main/resources/ui/admin-web/app/scripts/app.js ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/app.js b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/app.js index b580da7..868dafe 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/app.js +++ b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/app.js @@ -23,7 +23,8 @@ angular.module('ambariAdminConsole', [ 'ui.bootstrap', 'restangular', 'angularAlert', - 'toggle-switch' + 'toggle-switch', + 'pascalprecht.translate' ]) .constant('Settings',{ baseUrl: '/api/v1' http://git-wip-us.apache.org/repos/asf/ambari/blob/d961ca00/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/ViewsEditCtrl.js ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/ViewsEditCtrl.js b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/ViewsEditCtrl.js index 4355f63..bfe0d14 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/ViewsEditCtrl.js +++ b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/ViewsEditCtrl.js @@ -49,11 +49,7 @@ angular.module('ambariAdminConsole') // Get META for properties View.getMeta($routeParams.viewId, $routeParams.version).then(function(data) { - var meta = {}; - angular.forEach(data.data.ViewVersionInfo.parameters, function(parameter) { - meta[parameter.name] = parameter; - }); - $scope.configurationMeta = meta; + $scope.configurationMeta = data.data.ViewVersionInfo.parameters; reloadViewInfo(); }); @@ -76,7 +72,6 @@ angular.module('ambariAdminConsole') $scope.permissions = []; - // reloadViewInfo(); reloadViewPrivilegies(); $scope.editSettingsDisabled = true; http://git-wip-us.apache.org/repos/asf/ambari/blob/d961ca00/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/groups/GroupsEditCtrl.js ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/groups/GroupsEditCtrl.js b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/groups/GroupsEditCtrl.js index a322c1d..8164240 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/groups/GroupsEditCtrl.js +++ b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/groups/GroupsEditCtrl.js @@ -86,13 +86,13 @@ angular.module('ambariAdminConsole') privilegie = privilegie.PrivilegeInfo; if(privilegie.type === 'CLUSTER'){ // This is cluster - privilegies.clusters[privilegie.cluster_name] = privilegies.clusters[privilegie.cluster_name] || ''; - privilegies.clusters[privilegie.cluster_name] += privilegies.clusters[privilegie.cluster_name] ? ', ' + privilegie.permission_name : privilegie.permission_name; + privilegies.clusters[privilegie.cluster_name] = privilegies.clusters[privilegie.cluster_name] || []; + privilegies.clusters[privilegie.cluster_name].push(privilegie.permission_name); } else if ( privilegie.type === 'VIEW'){ - privilegies.views[privilegie.instance_name] = privilegies.views[privilegie.instance_name] || { privileges:''}; + privilegies.views[privilegie.instance_name] = privilegies.views[privilegie.instance_name] || { privileges:[]}; privilegies.views[privilegie.instance_name].version = privilegie.version; privilegies.views[privilegie.instance_name].view_name = privilegie.view_name; - privilegies.views[privilegie.instance_name].privileges += privilegies.views[privilegie.instance_name].privileges ? ', ' + privilegie.permission_name : privilegie.permission_name; + privilegies.views[privilegie.instance_name].privileges.push(privilegie.permission_name); } }); http://git-wip-us.apache.org/repos/asf/ambari/blob/d961ca00/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/mainCtrl.js ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/mainCtrl.js b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/mainCtrl.js index c6a118a..6f68831 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/mainCtrl.js +++ b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/mainCtrl.js @@ -39,4 +39,4 @@ angular.module('ambariAdminConsole') }; $scope.currentUser = Auth.getCurrentUser(); -}]); \ No newline at end of file +}]); http://git-wip-us.apache.org/repos/asf/ambari/blob/d961ca00/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/users/UsersShowCtrl.js ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/users/UsersShowCtrl.js b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/users/UsersShowCtrl.js index f3e4240..0aaf871 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/users/UsersShowCtrl.js +++ b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/users/UsersShowCtrl.js @@ -122,7 +122,7 @@ angular.module('ambariAdminConsole') $scope.toggleUserActive = function() { if(!$scope.isCurrentUser){ - ConfirmationModal.show('Change Status', 'Are you sure you want to change "'+ $scope.user.user_name +'" status?').then(function() { + ConfirmationModal.show('Change Status', 'Are you sure you want to change status for user "'+ $scope.user.user_name +'" to '+($scope.user.active ? 'inactive' : 'active')+'?').then(function() { User.setActive($scope.user.user_name, $scope.user.active); }) .catch(function() { @@ -132,7 +132,13 @@ angular.module('ambariAdminConsole') }; $scope.toggleUserAdmin = function() { if(!$scope.isCurrentUser){ - ConfirmationModal.show('Change Admin Privilege', 'Are you sure you want to change "'+$scope.user.user_name+'" Admin privilege?').then(function() { + var message = ''; + if( !$scope.user.admin ){ + message = 'Are you sure you want to grant Admin privilege to user '; + } else { + message = 'Are you sure you want to revoke Admin privilege from user '; + } + ConfirmationModal.show('Change Admin Privilege', message + '"'+$scope.user.user_name+'"?').then(function() { User.setAdmin($scope.user.user_name, $scope.user.admin) .then(function() { loadPrivilegies(); @@ -164,13 +170,13 @@ angular.module('ambariAdminConsole') privilegie = privilegie.PrivilegeInfo; if(privilegie.type === 'CLUSTER'){ // This is cluster - privilegies.clusters[privilegie.cluster_name] = privilegies.clusters[privilegie.cluster_name] || ''; - privilegies.clusters[privilegie.cluster_name] += privilegies.clusters[privilegie.cluster_name] ? ', ' + privilegie.permission_name : privilegie.permission_name; + privilegies.clusters[privilegie.cluster_name] = privilegies.clusters[privilegie.cluster_name] || []; + privilegies.clusters[privilegie.cluster_name].push(privilegie.permission_name); } else if ( privilegie.type === 'VIEW'){ - privilegies.views[privilegie.instance_name] = privilegies.views[privilegie.instance_name] || { privileges:''}; + privilegies.views[privilegie.instance_name] = privilegies.views[privilegie.instance_name] || { privileges:[]}; privilegies.views[privilegie.instance_name].version = privilegie.version; privilegies.views[privilegie.instance_name].view_name = privilegie.view_name; - privilegies.views[privilegie.instance_name].privileges += privilegies.views[privilegie.instance_name].privileges ? ', ' + privilegie.permission_name : privilegie.permission_name; + privilegies.views[privilegie.instance_name].privileges.push(privilegie.permission_name); } }); http://git-wip-us.apache.org/repos/asf/ambari/blob/d961ca00/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 new file mode 100644 index 0000000..d9f5eb5 --- /dev/null +++ b/ambari-admin/src/main/resources/ui/admin-web/app/scripts/i18n.config.js @@ -0,0 +1,29 @@ +/** + * 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') +.config(['$translateProvider', function($translateProvider) { + $translateProvider.translations('en',{ + 'CLUSTER.OPERATE': 'Operator', + 'CLUSTER.READ': 'Read-Only', + 'VIEW.USE': 'Use' + }); + + $translateProvider.preferredLanguage('en'); +}]); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/d961ca00/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 bfa0032..3d5628a 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 @@ -191,6 +191,9 @@ ------ END editable-list DIRECTIVE SECTION ------ - */ +.tooltip-inner{ + word-wrap: break-word; +} .instances-table{ table-layout: fixed; @@ -962,3 +965,9 @@ button.btn.btn-xs{ float: left; margin-right: 5px; } + +.no-animation *{ + -webkit-transition: none!important; + -o-transition: none!important; + transition: none!important; +} http://git-wip-us.apache.org/repos/asf/ambari/blob/d961ca00/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/edit.html ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/edit.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/edit.html index 02d4f77..92d319d 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/edit.html +++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/edit.html @@ -108,7 +108,7 @@ <tbody> <tr ng-repeat="permission in permissions"> <td> - <label class="">{{permission.PermissionInfo.permission_name}}</label> + <label class="" tooltip="{{permission.PermissionInfo.permission_name}}">{{permission.PermissionInfo.permission_name | translate}}</label> </td> <td> <editable-list items-source="permissionsEdit[permission.PermissionInfo.permission_name].USER" editable="true" resource-type="User"></editable-list> @@ -136,11 +136,11 @@ <div class="panel-body"> <form name="propertiesForm" class="form-horizontal" ng-hide="isConfigurationEmpty" novalidate> <fieldset ng-disabled="editConfigurationDisabled"> - <div class="form-group" ng-repeat="(propertyName, propertyValue) in configurationMeta" ng-class="{'has-error' : propertyValue.required && propertiesForm[propertyName].$error.required && !editConfigurationDisabled}"> - <label for="" class="control-label col-sm-3" ng-class="{'not-required': !propertyValue.required}" tooltip="{{propertyValue.description}}">{{propertyName}}{{propertyValue.required ? '*' : ''}}</label> + <div class="form-group" ng-repeat="property in configurationMeta" ng-class="{'has-error' : property.required && propertiesForm[property.name].$error.required && !editConfigurationDisabled}"> + <label for="" class="control-label col-sm-3" ng-class="{'not-required': !property.required}" tooltip="{{property.description}}">{{property.name}}{{property.required ? '*' : ''}}</label> <div class="col-sm-9"> - <input type="{{propertyValue.masked ? 'password' : 'text'}}" class="form-control propertie-input" ng-required="propertyValue.required" name="{{propertyName}}" ng-model="configuration[propertyName]"> - <div class="alert alert-danger no-margin-bottom top-margin" ng-show='propertyValue.required && propertiesForm[propertyName].$error.required && !editConfigurationDisabled'> + <input type="{{property.masked ? 'password' : 'text'}}" class="form-control propertie-input" ng-required="property.required" name="{{property.name}}" ng-model="configuration[property.name]"> + <div class="alert alert-danger no-margin-bottom top-margin" ng-show='property.required && propertiesForm[property.name].$error.required && !editConfigurationDisabled'> This field is required. </div> </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/d961ca00/ambari-admin/src/main/resources/ui/admin-web/app/views/clusters/manageAccess.html ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/clusters/manageAccess.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/clusters/manageAccess.html index 6de2561..d5dcfa2 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/views/clusters/manageAccess.html +++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/clusters/manageAccess.html @@ -33,7 +33,7 @@ </thead> <tbody> <tr ng-repeat="permission in permissions"> - <td><label class="">{{permission.PermissionInfo.permission_name}}</label></td> + <td><label class="" tooltip="{{permission.PermissionInfo.permission_name}}">{{permission.PermissionInfo.permission_name | translate}}</label></td> <td> <div class="" ng-switch="isEditMode"> <editable-list items-source="permissionsEdit[permission.PermissionInfo.permission_name].USER" resource-type="User" editable="true"></editable-list> http://git-wip-us.apache.org/repos/asf/ambari/blob/d961ca00/ambari-admin/src/main/resources/ui/admin-web/app/views/groups/edit.html ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/groups/edit.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/groups/edit.html index 5b90f79..f11ef9e 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/views/groups/edit.html +++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/groups/edit.html @@ -61,7 +61,7 @@ <a href="#/clusters/{{name}}/manageAccess">{{name}}</a> </td> <td> - {{privilege}} + <span tooltip="{{item}}" ng-repeat="item in privilege">{{item | translate}}{{$last ? '' : ', '}}</span> </td> </tr> <tr ng-repeat="(name, privilege) in privileges.views"> @@ -70,7 +70,7 @@ <a href="#/views/{{privilege.view_name}}/versions/{{privilege.version}}/instances/{{name}}/edit">{{name}}</a> </td> <td> - {{privilege.privileges}} + <span tooltip="{{item}}" ng-repeat="item in privilege.privileges">{{item | translate}}{{$last ? '' : ', '}}</span> </td> </tr> </tbody> http://git-wip-us.apache.org/repos/asf/ambari/blob/d961ca00/ambari-admin/src/main/resources/ui/admin-web/app/views/users/show.html ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/users/show.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/users/show.html index 0667200..bff097f 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/views/users/show.html +++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/users/show.html @@ -40,13 +40,13 @@ <div class="form-group"> <label for="" class="col-sm-2 control-label">Status</label> <div class="col-sm-10"> - <toggle-switch on-change="toggleUserActive()" disabled-tooltip="Cannot Change Status" ng-disabled="isCurrentUser" model="user.active" on-label="Active" off-label="Inactive" class="switch-primary userstatus" data-off-color="danger"></toggle-switch> + <toggle-switch on-change="toggleUserActive()" disabled-tooltip="Cannot Change Status" ng-disabled="isCurrentUser" model="user.active" on-label="Active" off-label="Inactive" class="switch-primary userstatus {{user ? '' : 'no-animation'}}" data-off-color="danger"></toggle-switch> </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label"><span class="glyphicon glyphicon-flash"></span> Ambari Admin</label> <div class="col-sm-10"> - <toggle-switch on-change="toggleUserAdmin()" disabled-tooltip="Cannot Change Admin" ng-disabled="isCurrentUser" model="user.admin" on-label="Yes" off-label="No" class="switch-primary userstatus" data-off-color="danger"></toggle-switch> + <toggle-switch on-change="toggleUserAdmin()" disabled-tooltip="Cannot Change Admin" ng-disabled="isCurrentUser" model="user.admin" on-label="Yes" off-label="No" class="switch-primary userstatus {{user ? '' : 'no-animation'}}" data-off-color="danger"></toggle-switch> </div> </div> <div class="form-group"> @@ -83,7 +83,7 @@ <a href="#/clusters/{{name}}/manageAccess">{{name}}</a> </td> <td> - {{privilege}} + <span tooltip="{{item}}" ng-repeat="item in privilege">{{item | translate}}{{$last ? '' : ', '}}</span> </td> </tr> <tr ng-repeat="(name, privilege) in privileges.views"> @@ -92,7 +92,7 @@ <a href="#/views/{{privilege.view_name}}/versions/{{privilege.version}}/instances/{{name}}/edit">{{name}}</a> </td> <td> - {{privilege.privileges}} + <span tooltip="{{item}}" ng-repeat="item in privilege.privileges">{{item | translate}}{{$last ? '' : ', '}}</span> </td> </tr> </tbody> http://git-wip-us.apache.org/repos/asf/ambari/blob/d961ca00/ambari-admin/src/main/resources/ui/admin-web/bower.json ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/bower.json b/ambari-admin/src/main/resources/ui/admin-web/bower.json index 27429c2..896e5bd 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/bower.json +++ b/ambari-admin/src/main/resources/ui/admin-web/bower.json @@ -8,7 +8,9 @@ "angular-bootstrap": "~0.11.0", "restangular": "~1.4.0", "angular-bootstrap-toggle-switch": "~0.5.1", - "angular-animate": "~1.2.23" + "angular-animate": "~1.2.23", + "angular-translate": "~2.2.0", + "font-awesome": "~4.2.0" }, "devDependencies": {} }