Przeglądaj źródła

[security] KOified the groups list

Enrico Berti 11 lat temu
rodzic
commit
7a2321b

+ 25 - 33
apps/security/src/security/templates/hive.mako

@@ -50,7 +50,8 @@ ${ layout.menubar(section='hive') }
 
     <span data-bind="visible: showAdvanced">
       <input type="text" data-bind="value: $data.server" placeholder="serverName">
-      <select data-bind="options: $root.availablePrivileges, value: privilegeScope"></select>
+##      <select data-bind="options: $root.availablePrivileges, value: privilegeScope"></select>
+      <select data-bind="options: $root.availablePrivileges, select2: { update: $data.privilegeScope, type: 'scope'}" style="width: 100px"></select>
     </span>
     
     <a href="javascript:void(0)"><i class="fa fa-minus" data-bind="click: remove"></i></a>
@@ -160,23 +161,19 @@ ${ layout.menubar(section='hive') }
 
         <div class="card-body">
           <%actionbar:render>
-		    <%def name="search()">
-		      <input id="filterInput" type="text" class="input-xlarge search-query" placeholder="${_('Search for name, groups, etc...')}">
-		    </%def>
+            <%def name="search()">
+              <input id="filterInput" type="text" class="input-xlarge search-query" placeholder="${_('Search for name, groups, etc...')}">
+            </%def>
 
-		    <%def name="actions()">
-              <div class="btn-toolbar" style="display: inline; vertical-align: middle">
-                <button class="btn toolbarBtn"><i class="fa fa-expand"></i> ${ _('Expand') }</button>
-              </div>
-		      <div class="btn-toolbar" style="display: inline; vertical-align: middle">
-		        <button class="btn toolbarBtn"><i class="fa fa-times"></i> ${ _('Delete') }</button>
-		      </div>
-		    </%def>
+            <%def name="actions()">
+              <button class="btn toolbarBtn" data-bind="click: $root.expandSelectedRoles"><i class="fa fa-expand"></i> ${ _('Expand') }</button>
+              <button class="btn toolbarBtn" data-bind="click: $root.deleteSelectedRoles"><i class="fa fa-times"></i> ${ _('Delete') }</button>
+            </%def>
 
-		    <%def name="creation()">
-		      <a href="javascript: void(0)" data-bind="click: function(){ $root.showCreateRole(true); }" class="btn"><i class="fa fa-plus-circle"></i> ${ _('Add') }</a>
-		    </%def>
-		  </%actionbar:render>
+            <%def name="creation()">
+              <a href="javascript: void(0)" data-bind="click: function(){ $root.showCreateRole(true); }" class="btn"><i class="fa fa-plus-circle"></i> ${ _('Add') }</a>
+            </%def>
+          </%actionbar:render>
 
           <div data-bind="with: $root.role, visible: showCreateRole">
             <div class="span1">
@@ -200,26 +197,22 @@ ${ layout.menubar(section='hive') }
               <i class="fa fa-save"></i>
             </button>
           </div>
-          <br/>
-          <br/>
-          <br/>
-      <div>
-        <table>
-          <theader>
-            <th style="width:1%"><div class="hueCheckbox selectAll fa"></div></th>
-            <th style="width:3%"></th>
-            <th style="width:20%">${ _('Name') }</th>
-            <th style="width:67%">${ _('Groups') }</th>
-            <th style="width:10%">${ _('Grantor Principal') }</th>
-          </theader>
+        <table class="card-marginbottom">
+          <thead>
+            <th width="1%"><div data-bind="click: $root.selectAllRoles, css: {hueCheckbox: true, 'fa': true, 'fa-check': allRolesSelected}"></div></th>
+            <th width="2%"></th>
+            <th width="20%">${ _('Name') }</th>
+            <th width="57%">${ _('Groups') }</th>
+            <th width="20%">${ _('Grantor Principal') }</th>
+          </thead>
           <tbody data-bind="foreach: $root.roles">
             <tr>
-              <td>
-                <input type="checkbox" data-bind="click: $root.role.remove"></input>
+              <td class="center" data-bind="click: handleSelect" style="cursor: default">
+                <div data-bind="visible: name != '.' && name != '..', css: {hueCheckbox: true, 'fa': true, 'fa-check': selected}"></div>
               </td>
-              <td>
+              <td class="center">
                 <a href="javascript:void(0);">
-                  <i class="fa fa-2x" data-bind="click: function() { if (showPrivileges()) { showPrivileges(false); } else { $root.list_sentry_privileges_by_role($data);} }, css: {'fa-caret-right' : ! showPrivileges(), 'fa-caret-down': showPrivileges() }""></i>
+                  <i class="fa" data-bind="click: function() { if (showPrivileges()) { showPrivileges(false); } else { $root.list_sentry_privileges_by_role($data);} }, css: {'fa-caret-right' : ! showPrivileges(), 'fa-caret-down': showPrivileges() }"></i>
                 </a>
               </td>
               <td data-bind="text: name"></td>
@@ -257,7 +250,6 @@ ${ layout.menubar(section='hive') }
             </tr>
         </tbody>
         </table>
-      </div>        
         </div>
       </div>
 

+ 6 - 0
apps/security/static/js/common.ko.js

@@ -32,6 +32,9 @@ ko.bindingHandlers.select2 = {
       if (options.type == "action" && viewModel.availableActions().indexOf(options.update) == -1) {
         viewModel.availableActions.push(options.update);
       }
+      if (options.type == "scope" && viewModel.availablePrivileges().indexOf(options.update) == -1) {
+        viewModel.availablePrivileges.push(options.update);
+      }
     }
     $(element)
         .select2(options)
@@ -58,6 +61,9 @@ ko.bindingHandlers.select2 = {
               if (_type == "action") {
                 viewModel.availableActions.push(_newVal);
               }
+              if (_type == "scope") {
+                viewModel.availablePrivileges.push(_newVal);
+              }
               $(element).select2("val", _newVal, true);
               $(element).select2("close");
             }

+ 40 - 0
apps/security/static/js/hive.ko.js

@@ -93,6 +93,10 @@ var Role = function (vm, role) {
   var self = this;
 
   self.name = ko.observable(typeof role.name != "undefined" && role.name != null ? role.name : "");
+  self.selected = ko.observable(false);
+  self.handleSelect = function (row, e) {
+    self.selected(!self.selected());
+  }
   self.grantorPrincipal = ko.observable(typeof role.grantorPrincipal != "undefined" && role.grantorPrincipal != null ? role.grantorPrincipal : "");
   self.groups = ko.observableArray();
   $.each(typeof role.groups != "undefined" && role.groups != null ? role.groups : [], function (index, group) {
@@ -549,6 +553,42 @@ var HiveViewModel = function (initial) {
     return _users.sort();
   }, self);
 
+
+  self.selectAllRoles = function () {
+    self.allRolesSelected(!self.allRolesSelected());
+    ko.utils.arrayForEach(self.roles(), function (role) {
+      role.selected(self.allRolesSelected());
+    });
+    return true;
+  };
+
+  self.allRolesSelected = ko.observable(false);
+
+  self.selectedRoles = ko.computed(function () {
+    return ko.utils.arrayFilter(self.roles(), function (role) {
+      return role.selected();
+    });
+  }, self);
+
+  self.selectedRole = ko.computed(function () {
+    return self.selectedRoles()[0];
+  }, self);
+
+  self.deleteSelectedRoles = function () {
+    ko.utils.arrayForEach(self.selectedRoles(), function (role) {
+      role.remove(role);
+    });
+  };
+
+  self.expandSelectedRoles = function () {
+    if (self.selectedRoles().length == 0){
+      self.selectAllRoles();
+    }
+    ko.utils.arrayForEach(self.selectedRoles(), function (role) {
+      self.list_sentry_privileges_by_role(role)
+    });
+  };
+
   self.init = function (path) {
     self.fetchUsers();
     self.assist.path(path);