diff --git a/public/app/core/components/user_group_picker.ts b/public/app/core/components/user_group_picker.ts new file mode 100644 index 00000000000..07b2ebcef38 --- /dev/null +++ b/public/app/core/components/user_group_picker.ts @@ -0,0 +1,59 @@ +import coreModule from 'app/core/core_module'; +import appEvents from 'app/core/app_events'; +import _ from 'lodash'; + +const template = ` +
+ +
+`; +export class UserGroupPickerCtrl { + userGroupSegment: any; + userGroupId: number; + debouncedSearchUserGroups: any; + + /** @ngInject */ + constructor(private backendSrv, private $scope, $sce, private uiSegmentSrv) { + this.userGroupSegment = this.uiSegmentSrv.newSegment({value: 'Choose User Group', selectMode: true}); + this.debouncedSearchUserGroups = _.debounce(this.searchUserGroups, 500, {'leading': true, 'trailing': false}); + } + + searchUserGroups(query: string) { + return Promise.resolve(this.backendSrv.get('/api/user-groups/search?perpage=10&page=1&query=' + query).then(result => { + return _.map(result.userGroups, ug => { return this.uiSegmentSrv.newSegment(ug.name); }); + })); + } + + onChange() { + this.backendSrv.get('/api/user-groups/search?perpage=10&page=1&query=' + this.userGroupSegment.value) + .then(result => { + if (!result) { + return; + } + + result.userGroups.forEach(ug => { + if (ug.name === this.userGroupSegment.value) { + this.userGroupId = ug.id; + } + }); + }); + } +} + +export function userGroupPicker() { + return { + restrict: 'E', + template: template, + controller: UserGroupPickerCtrl, + bindToController: true, + controllerAs: 'ctrl', + scope: { + userGroupSegment: '=', + userGroupId: '=', + } + }; +} + +coreModule.directive('userGroupPicker', userGroupPicker); diff --git a/public/app/core/components/user_picker.ts b/public/app/core/components/user_picker.ts index 2dad2ebcdba..f12fa9a241d 100644 --- a/public/app/core/components/user_picker.ts +++ b/public/app/core/components/user_picker.ts @@ -29,7 +29,6 @@ export class UserPickerCtrl { onChange() { this.userLogin = this.userSegment.value.split(' - ')[0]; - console.log(this.userLogin); this.backendSrv.get('/api/users/search?perpage=10&page=1&query=' + this.userLogin) .then(result => { @@ -67,6 +66,7 @@ export function userPicker() { bindToController: true, controllerAs: 'ctrl', scope: { + userSegment: '=', userLogin: '=', userId: '=', } diff --git a/public/app/core/core.ts b/public/app/core/core.ts index d159f6b7ecc..eef62b510be 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -47,6 +47,7 @@ import {KeybindingSrv} from './services/keybindingSrv'; import {helpModal} from './components/help/help'; import {NavModelSrv, NavModel} from './nav_model_srv'; import {userPicker} from './components/user_picker'; +import {userGroupPicker} from './components/user_group_picker'; export { arrayJoin, @@ -73,4 +74,5 @@ export { NavModelSrv, NavModel, userPicker, + userGroupPicker, }; diff --git a/public/app/features/dashboard/acl/acl.html b/public/app/features/dashboard/acl/acl.html index 024c4322ab5..1d4110b1dca 100644 --- a/public/app/features/dashboard/acl/acl.html +++ b/public/app/features/dashboard/acl/acl.html @@ -1,44 +1,89 @@
+

Add New Permission

+
+
+
+ Type + +
+
+ User + +
+
+ User Group + +
+
+ Role + +
+
+ +
+
+
+
Users
- Add User -
-
- {{permission.userLogin}} -
{{permission.permissions}}
-
- - - Edit - -    - - - -
+ + + + + + + + + + + + + + + +
UserPermission
{{permission.userLogin}}{{permission.permissions}} + + + Edit + +    + + + +
Groups
- Add Group -
-
- {{permission.userGroup}} -
{{permission.permissions}}
-
- - - Edit - -    - - - -
+ + + + + + + + + + + + + + + +
User GroupPermission
{{permission.userGroup}}{{permission.permissions}} + + + Edit + +    + + + +
diff --git a/public/app/features/dashboard/acl/acl.ts b/public/app/features/dashboard/acl/acl.ts index 496d48d010a..9ed38f44a95 100644 --- a/public/app/features/dashboard/acl/acl.ts +++ b/public/app/features/dashboard/acl/acl.ts @@ -9,9 +9,21 @@ export class AclCtrl { dashboard: any; userPermissions: Permission[]; userGroupPermissions: Permission[]; + permissionTypeOptions = [ + {value: 1, text: 'View'}, + {value: 2, text: 'Read-only Edit'}, + {value: 4, text: 'Edit'} + ]; + userLogin: string; + userId: number; + userSegment: any; + type = 'User'; + userGroupId: number; + userGroupSegment: any; + permission = 1; /** @ngInject */ - constructor(private backendSrv, private $scope, $sce) { + constructor(private backendSrv, private $scope, $sce, private uiSegmentSrv) { this.tabIndex = 0; this.userPermissions = []; this.userGroupPermissions = []; @@ -26,6 +38,41 @@ export class AclCtrl { }); } + addPermission() { + if (this.type === 'User') { + if (this.userSegment.value === 'Choose User') { + return; + } + + this.backendSrv.post(`/api/dashboards/${this.dashboard.id}/acl`, { + userId: this.userId, + permissionType: this.permission + }).then(() => { + this.userId = 0; + this.userLogin = ''; + this.userSegment.value = 'Choose User'; + this.userSegment.text = 'Choose User'; + this.userSegment.html = 'Choose User'; + this.get(this.dashboard.id); + }); + } else { + if (this.userGroupSegment.value === 'Choose User Group') { + return; + } + + this.backendSrv.post(`/api/dashboards/${this.dashboard.id}/acl`, { + userGroupId: this.userGroupId, + permissionType: this.permission + }).then(() => { + this.userGroupId = 0; + this.userGroupSegment.value = 'Choose User Group'; + this.userGroupSegment.text = 'Choose User Group'; + this.userGroupSegment.html = 'Choose User Group'; + this.get(this.dashboard.id); + }); + } + } + removeUserPermission(permission: Permission) { this.backendSrv.delete(`/api/dashboards/${permission.dashboardId}/acl/user/${permission.userId}`).then(() => { this.get(permission.dashboardId); @@ -50,6 +97,13 @@ export function aclSettings() { }; } +export interface FormModel { + dashboardId: number; + userId?: number; + userGroupId?: number; + PermissionType: number; +} + export interface Permission { id: number; orgId: number; @@ -61,7 +115,8 @@ export interface Permission { userEmail: string; userGroupId: number; userGroup: string; - permissions: number[]; + permissions: string[]; + permissionType: number[]; } coreModule.directive('aclSettings', aclSettings); diff --git a/public/sass/components/_settings_permissions.scss b/public/sass/components/_settings_permissions.scss index 683676f3da8..54c94bb2f5e 100644 --- a/public/sass/components/_settings_permissions.scss +++ b/public/sass/components/_settings_permissions.scss @@ -19,10 +19,6 @@ } .permissionlist__item { - display: flex; - flex-flow: row; - margin: 5px; - padding: 7px; background-color: $tight-form-bg; &:hover {