Skip to content

N
nexpie-grafana-theme
Commit 18269a58 by Daniel Lee
Options

WIP: user + user-group pickers for permissions

parent 9eccb4e7
Showing with 178 additions and 21 deletions
public/app/core/components/user_group_picker.ts 0 → 100644
import coreModule from 'app/core/core_module';
import appEvents from 'app/core/app_events';
import _ from 'lodash';
const template = `
<div class="dropdown">
<metric-segment segment="ctrl.userGroupSegment"
get-options="ctrl.debouncedSearchUserGroups($query)"
on-change="ctrl.onChange()"></metric-segment>
</div>
`;
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);
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: '=',
}
......
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,
};
public/app/features/dashboard/acl/acl.html
<div class="editor-row">
<h3 class="page-heading">Add New Permission</h3>
<form name="addPermission" class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label">Type</span>
<select class="gf-form-input gf-size-auto" ng-model="ctrl.type" ng-options="r for r in ['User', 'User Group']"></select>
</div>
<div class="gf-form" ng-show="ctrl.type === 'User'">
<span class="gf-form-label">User</span>
<user-picker user-login="ctrl.userLogin" user-id="ctrl.userId" user-segment="ctrl.userSegment"></user-picker>
</div>
<div class="gf-form" ng-show="ctrl.type === 'User Group'">
<span class="gf-form-label">User Group</span>
<user-group-picker user-group-id="ctrl.userGroupId" user-group-segment="ctrl.userGroupSegment"></user-group-picker>
</div>
<div class="gf-form">
<span class="gf-form-label">Role</span>
<select class="gf-form-input gf-size-auto" ng-model="ctrl.permission" ng-options="p.value as p.text for p in ctrl.permissionTypeOptions"></select>
</div>
<div class="gf-form">
<button class="btn gf-form-btn btn-success" ng-click="ctrl.addPermission()">Add</button>
</div>
</div>
</form>
<div class="permissionlist">
<div class="permissionlist__section">
<div class="permissionlist__section-header">
<h6>Users</h6>
<a href="#" class="btn btn-success btn-small permissionlist__section-header__add-button">Add User</a>
</div>
<div class="permissionlist__item" ng-repeat="permission in ctrl.userPermissions">
<span class="permissionlist__item-text">{{permission.userLogin}}</span>
<div>{{permission.permissions}}</div>
<div class="permissionlist__item-buttons">
<table class="filter-table form-inline">
<thead>
<tr>
<th>User</th>
<th style="width: 220px;">Permission</th>
<th style="width: 120px"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="permission in ctrl.userPermissions" class="permissionlist__item">
<td>{{permission.userLogin}}</td>
<td>{{permission.permissions}}</td>
<td>
<a href="#" class="btn btn-inverse btn-small">
<i class="fa fa-edit"></i>
Edit
......@@ -17,18 +50,28 @@
<a ng-click="ctrl.removeUserPermission(permission)" class="btn btn-danger btn-small">
<i class="fa fa-remove"></i>
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="permissionlist__section">
<div class="permissionlist__section-header">
<h6>Groups</h6>
<a href="#" class="btn btn-success btn-small permissionlist__section-header__add-button">Add Group</a>
</div>
<div class="permissionlist__item" ng-repeat="permission in ctrl.userGroupPermissions">
<span class="permissionlist__item-text">{{permission.userGroup}}</span>
<div>{{permission.permissions}}</div>
<div class="permissionlist__item-buttons">
<table class="filter-table form-inline">
<thead>
<tr>
<th>User Group</th>
<th style="width: 220px;">Permission</th>
<th style="width: 120px;"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="permission in ctrl.userGroupPermissions" class="permissionlist__item">
<td>{{permission.userGroup}}</td>
<td>{{permission.permissions}}</td>
<td>
<a href="#" class="btn btn-inverse btn-small">
<i class="fa fa-edit"></i>
Edit
......@@ -37,8 +80,10 @@
<a ng-click="ctrl.removeUserGroupPermission(permission)" class="btn btn-danger btn-small">
<i class="fa fa-remove"></i>
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
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);
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 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment