瀏覽代碼

[security] Mini UX improvements on Hive loading

Enrico Berti 11 年之前
父節點
當前提交
02a781274e

+ 7 - 6
apps/security/src/security/templates/hive.mako

@@ -204,14 +204,14 @@ ${ layout.menubar(section='hive') }
                   <input class="input-medium no-margin" type="text" placeholder="${ _('Search privileges...') }" data-bind="value: privilegeFilter, valueUpdate: 'afterkeydown', visible: $root.assist.privileges().length > 1"> &nbsp;
                   <a data-bind="visible: $root.assist.privileges().length > 0, click: function(){ $root.showCreateRole(true); $('#createRoleModal').modal('show'); }" class="btn pointer"><i class="fa fa-plus-circle"></i> ${ _('Add role') }</a>
                 </div>
-                <h4 style="margin-top: 4px">${ _('Privileges') } &nbsp;<i class="fa fa-spinner fa-spin" data-bind="visible: $root.isLoadingPrivileges()"></i></h4>
+                <div data-bind="visible: $root.assist.privileges().length == 0 && $root.isLoadingPrivileges()"><i class="fa fa-spinner fa-spin" data-bind="visible: $root.isLoadingPrivileges()"></i> <em class="muted">${ _('Loading privileges...')}</em></div>
+                <h4 style="margin-top: 4px" data-bind="visible: $root.assist.privileges().length > 0 && ! $root.isLoadingPrivileges()">${ _('Privileges') } &nbsp;</h4>
                 <div data-bind="visible: $root.assist.privileges().length == 0 && ! $root.isLoadingPrivileges()">
                   <div class="span10 offset1 center" style="cursor: pointer" data-bind="click: function(){ $root.showCreateRole(true); $('#createRoleModal').modal('show'); }">
                     <i class="fa fa-plus-circle waiting"></i>
                     <h1 class="emptyMessage">${ _('No privileges found for the selected item') }<br/><a class="pointer">${ _('Click here to add a new role') }</a></h1>
                   </div>
                 </div>
-                <div data-bind="visible: $root.assist.privileges().length == 0 && $root.isLoadingPrivileges()"><em class="muted">${ _('Loading privileges...')}</em></div>
                 <div data-bind="template: { name: 'role', foreach: $root.assist.roles }"></div>
               </div>
             </div>
@@ -226,12 +226,13 @@ ${ layout.menubar(section='hive') }
         </h1>
 
         <div class="card-body">
-          <div class="span10 offset1 center" style="cursor: pointer" data-bind="visible: $root.roles().length == 0, click: function(){ $root.showCreateRole(true); $('#createRoleModal').modal('show'); }">
+          <h1 class="muted" data-bind="visible: $root.isLoadingRoles()"><i class="fa fa-spinner fa-spin"></i></h1>
+          <div class="span10 offset1 center" style="cursor: pointer" data-bind="visible: $root.roles().length == 0 && ! $root.isLoadingRoles(), click: function(){ $root.showCreateRole(true); $('#createRoleModal').modal('show'); }">
             <i class="fa fa-plus-circle waiting"></i>
             <h1 class="emptyMessage">${ _('There are currently no roles defined') }<br/><a class="pointer">${ _('Click here to add') }</a> ${ _('one') }</h1>
           </div>
-          <div class="clearfix" data-bind="visible: $root.roles().length == 0"></div>
-          <div data-bind="visible: $root.roles().length > 0">
+          <div class="clearfix" data-bind="visible: $root.roles().length == 0 && ! $root.isLoadingRoles()"></div>
+          <div data-bind="visible: $root.roles().length > 0 && ! $root.isLoadingRoles()">
             <%actionbar:render>
               <%def name="search()">
                 <input id="filterInput" type="text" class="input-xlarge search-query" placeholder="${_('Search for name, groups, etc...')}" data-bind="value: $root.roleFilter, valueUpdate: 'afterkeydown'">
@@ -248,7 +249,7 @@ ${ layout.menubar(section='hive') }
             </%actionbar:render>
           </div>
 
-          <table class="card-marginbottom" data-bind="visible: $root.roles().length > 0">
+          <table class="card-marginbottom" data-bind="visible: $root.roles().length > 0 && ! $root.isLoadingRoles()">
             <thead>
               <th width="1%"><div data-bind="click: $root.selectAllRoles, css: { hueCheckbox: true, 'fa': true, 'fa-check': allRolesSelected }"></div></th>
               <th width="2%"></th>

+ 14 - 0
apps/security/static/css/security.css

@@ -232,6 +232,15 @@ h1.emptyMessage {
   line-height: 60px;
 }
 
+.acl-panel .waiting {
+  font-size: 130px;
+}
+
+.acl-panel h1.emptyMessage {
+  margin-top: 0;
+  line-height: 54px;
+}
+
 .fa-caret {
   padding-top: 2px;
 }
@@ -303,3 +312,8 @@ h1.emptyMessage {
 .fa-database-open {
   color: #666!important;
 }
+
+.actionbar-main {
+  padding: 0!important;
+  padding-bottom: 10px!important;
+}

+ 19 - 9
apps/security/static/js/hive.ko.js

@@ -729,6 +729,7 @@ var Assist = function (vm, initial) {
 var HiveViewModel = function (initial) {
   var self = this;
 
+  self.isLoadingRoles = ko.observable(false);
   self.isLoadingPrivileges = ko.observable(false);
   self.isApplyingBulk = ko.observable(false);
 
@@ -846,14 +847,17 @@ var HiveViewModel = function (initial) {
 
   self.init = function (path) {
     self.assist.isLoadingTree(true);
-    self.fetchUsers();
+    self.isLoadingRoles(true);
     self.assist.path(path);
-    self.list_sentry_roles_by_group();
-    if (path != "") {
-      self.assist.loadParents();
-    } else {
-      self.assist.fetchHivePath();
-    }
+    window.setTimeout(function(){
+      self.fetchUsers();
+      self.list_sentry_roles_by_group();
+      if (path != "") {
+        self.assist.loadParents();
+      } else {
+        self.assist.fetchHivePath();
+      }
+    }, 100);
   };
 
   self.removeRole = function (roleName) {
@@ -872,6 +876,7 @@ var HiveViewModel = function (initial) {
   };
 
   self.list_sentry_roles_by_group = function () {
+    self.isLoadingRoles(true);
     $.ajax({
       type: "POST",
       url: "/security/api/hive/list_sentry_roles_by_group",
@@ -884,10 +889,15 @@ var HiveViewModel = function (initial) {
         }
         else {
           self.roles.removeAll();
+          var _roles = [];
+          var _originalRoles = [];
           $.each(data.roles, function (index, item) {
-            self.roles.push(new Role(self, item));
-            self.originalRoles.push(new Role(self, item));
+            _roles.push(new Role(self, item));
+            _originalRoles.push(new Role(self, item));
           });
+          self.roles(_roles);
+          self.originalRoles(_originalRoles);
+          self.isLoadingRoles(false);
         }
       }
     }).fail(function (xhr, textStatus, errorThrown) {

+ 1 - 1
desktop/core/src/desktop/templates/actionbar.mako

@@ -18,7 +18,7 @@
 %>
 
 <%def name="render()">
-    <div style="padding: 10px;">
+    <div class="actionbar-main" style="padding: 10px;">
         <div class="pull-right actionbar-creation">
             %if hasattr(caller, "creation"):
                 ${caller.creation()}