AMBARI-17042. Refine Role page UI display (alexantonenko)

ambari-admin/src/main/resources/ui/admin-web/app/scripts/i18n.config.js

@@ -352,7 +352,8 @@ angular.module('ambariAdminConsole')
         'ambariAdmin': 'Ambari Administrator',
         'viewUser': 'View User',
         'none': 'None',
-        'oneRolePerUser': 'Only 1 role allowed per user'
+        'oneRolePerUser': 'Only 1 role allowed per user',
+        'permissionLevel': '{{level}}-level Permissions'
       },
 
       'alerts': {

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

@@ -78,6 +78,8 @@ angular.module('ambariAdminConsole')
       "AMBARI.SET_SERVICE_USERS_GROUPS"
     ],
 
+    orderedLevels: ['SERVICE', 'HOST', 'CLUSTER', 'AMBARI'],
+
     ineditableRoles : ['VIEW.USER', 'AMBARI.ADMINISTRATOR'],
 
     getAllClusters: function() {

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

@@ -36,20 +36,34 @@ angular.module('ambariAdminConsole')
           $scope.title = '';
           $scope.orderedRoles = ['AMBARI.ADMINISTRATOR'].concat(Cluster.orderedRoles).reverse();
           $scope.orderedAuthorizations = Cluster.orderedAuthorizations;
+          $scope.orderedLevels = Cluster.orderedLevels;
           $scope.authHash = {};
-          roles.map(function(r) {
-            r.authorizations.map(function(auth) {
-              $scope.authHash[auth.authorization_id] = auth.authorization_name;
+          $scope.getLevelName = function (key) {
+            return key.charAt(0) + key.slice(1).toLowerCase();
+          };
+          angular.forEach(roles, function (r) {
+            angular.forEach(r.authorizations, function (auth) {
+              var match = auth.authorization_id.match(/(\w+)\./),
+                levelKey = match && match[1],
+                isLevelDisplayed = $scope.orderedAuthorizations.some(function (item) {
+                  return !item.indexOf(levelKey);
+                });
+              if (isLevelDisplayed) {
+                if (!$scope.authHash[levelKey]) {
+                  $scope.authHash[levelKey] = {};
+                }
+                if (!$scope.authHash[levelKey][auth.authorization_id]) {
+                  $scope.authHash[levelKey][auth.authorization_id] = auth.authorization_name;
+                }
+                if (!r.authHash) {
+                  r.authHash = {};
+                }
+                r.authHash[auth.authorization_id] = true;
+              }
             });
           });
           $scope.roles = roles.sort(function(a, b) {
             return $scope.orderedRoles.indexOf(a.permission_name) - $scope.orderedRoles.indexOf(b.permission_name);
-          }).map(function(r) {
-            r.authHash = {};
-            r.authorizations.map(function(a) {
-              r.authHash[a.authorization_id] = true;
-            });
-            return r;
           });
           $scope.ok = function() {
             $modalInstance.dismiss();

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

@@ -1841,6 +1841,15 @@ thead.view-permission-header > tr > th {
   visibility: hidden;
 }
 
+.role-details-modal .table-section-title {
+  font-weight: bold;
+}
+
+.role-details-modal .table-section-title .table-cell {
+  width: 100%;
+}
+
+
 .proxied-field-wrap {
   display:block;
   position:absolute;

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

@@ -33,11 +33,18 @@
     <div class="table-cell">{{roles[roles.length - 1].permission_label}}</div>
   </div>
   <div class="table-body">
-    <div class="table-row-wrapper">
-      <div class="table-row" ng-repeat="auth in orderedAuthorizations">
-        <div class="table-cell">{{authHash[auth]}}</div>
-        <div class="table-cell text-center" ng-repeat="role in roles">
-          <i class="glyphicon glyphicon-ok green-icon" ng-show="role.authHash[auth]"></i>
+    <div ng-repeat="level in orderedLevels">
+      <div class="table-row-wrapper table-section-title">
+        <div class="table-row">
+          <div class="table-cell" colspan="{{roles.length + 1}}">{{'users.roles.permissionLevel' | translate: '{level: getLevelName(level)}'}}</div>
+        </div>
+      </div>
+      <div class="table-row-wrapper">
+        <div class="table-row" ng-repeat="auth in orderedAuthorizations" ng-if="authHash[level][auth]">
+          <div class="table-cell">{{authHash[level][auth]}}</div>
+          <div class="table-cell text-center" ng-repeat="role in roles">
+            <i class="glyphicon glyphicon-ok green-icon" ng-show="role.authHash[auth]"></i>
+          </div>
         </div>
       </div>
     </div>