Skip to content

N
nexpie-grafana-theme
Commit a37c4411 by Torkel Ödegaard
Options

dashboard acl

parent 945302ba
Showing with 80 additions and 88 deletions
public/app/core/components/user_group_picker.ts
...@@ -4,66 +4,38 @@ import _ from 'lodash'; ...@@ -4,66 +4,38 @@ import _ from 'lodash';
const template = ` const template = `
<div class="dropdown"> <div class="dropdown">
<metric-segment segment="ctrl.userGroupSegment" <gf-form-dropdown model="ctrl.group"
get-options="ctrl.debouncedSearchUserGroups($query)" get-options="ctrl.debouncedSearchGroups($query)"
on-change="ctrl.onChange()"></metric-segment> css-class="gf-size-auto"
</div> on-change="ctrl.onChange($option)"
</gf-form-dropdown>
</div>
`; `;
export class UserGroupPickerCtrl { export class UserGroupPickerCtrl {
userGroupSegment: any; group: any;
userGroupId: number; userGroupPicked: any;
debouncedSearchUserGroups: any; debouncedSearchGroups: any;
/** @ngInject */ /** @ngInject */
constructor(private backendSrv, private $scope, $sce, private uiSegmentSrv) { constructor(private backendSrv, private $scope, $sce, private uiSegmentSrv) {
this.debouncedSearchUserGroups = _.debounce(this.searchUserGroups, 500, {'leading': true, 'trailing': false}); this.debouncedSearchGroups = _.debounce(this.searchGroups, 500, {'leading': true, 'trailing': false});
this.resetUserGroupSegment(); this.reset();
} }
resetUserGroupSegment() { reset() {
this.userGroupId = null; this.group = {text: 'Choose', value: null};
const userGroupSegment = this.uiSegmentSrv.newSegment({
value: 'Choose',
selectMode: true,
fake: true,
cssClass: 'gf-size-auto'
});
if (!this.userGroupSegment) {
this.userGroupSegment = userGroupSegment;
} else {
this.userGroupSegment.value = userGroupSegment.value;
this.userGroupSegment.html = userGroupSegment.html;
this.userGroupSegment.value = userGroupSegment.value;
}
}
userGroupIdChanged(newVal) {
if (!newVal) {
this.resetUserGroupSegment();
}
} }
searchUserGroups(query: string) { searchGroups(query: string) {
return Promise.resolve(this.backendSrv.get('/api/user-groups/search?perpage=10&page=1&query=' + query).then(result => { 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); }); return _.map(result.userGroups, ug => {
return {text: ug.name, value: ug};
});
})); }));
} }
onChange() { onChange(option) {
this.backendSrv.get('/api/user-groups/search?perpage=10&page=1&query=' + this.userGroupSegment.value) this.userGroupPicked({$group: option.value});
.then(result => {
if (!result) {
return;
}
result.userGroups.forEach(ug => {
if (ug.name === this.userGroupSegment.value) {
this.userGroupId = ug.id;
}
});
});
} }
} }
...@@ -75,11 +47,11 @@ export function userGroupPicker() { ...@@ -75,11 +47,11 @@ export function userGroupPicker() {
bindToController: true, bindToController: true,
controllerAs: 'ctrl', controllerAs: 'ctrl',
scope: { scope: {
userGroupId: '=', userGroupPicked: '&',
}, },
link: function(scope, elem, attrs, ctrl) { link: function(scope, elem, attrs, ctrl) {
scope.$watch("ctrl.userGroupId", (newVal, oldVal) => { scope.$on("user-group-picker-reset", () => {
ctrl.userGroupIdChanged(newVal); ctrl.reset();
}); });
} }
}; };
......
public/app/features/dashboard/acl/acl.html
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
</tr> </tr>
<tr ng-show="ctrl.aclItems.length === 0"> <tr ng-show="ctrl.aclItems.length === 0">
<td colspan="4"> <td colspan="4">
<em>No permission, will only accessable by admins.</em> <em>No permissions. Will only be accessible by admins.</em>
</td> </td>
</tr> </tr>
</table> </table>
...@@ -41,25 +41,14 @@ ...@@ -41,25 +41,14 @@
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<div class="gf-form-select-wrapper"> <div class="gf-form-select-wrapper">
<select class="gf-form-input gf-size-auto" ng-model="ctrl.newType" ng-options="r for r in ['User Group', 'User']"></select> <select class="gf-form-input gf-size-auto" ng-model="ctrl.newType" ng-options="p.value as p.text for p in ctrl.aclTypes" ng-change="ctrl.typeChanged()"></select>
</div> </div>
</div> </div>
<div class="gf-form" ng-show="ctrl.newType === 'User'"> <div class="gf-form" ng-show="ctrl.newType === 'User'">
<span class="gf-form-label">User</span>
<user-picker user-picked="ctrl.userPicked($user)"></user-picker> <user-picker user-picked="ctrl.userPicked($user)"></user-picker>
</div> </div>
<div class="gf-form" ng-show="ctrl.newType === 'User Group'"> <div class="gf-form" ng-show="ctrl.newType === 'Group'">
<span class="gf-form-label">User Group</span> <user-group-picker user-group-picked="ctrl.groupPicked($group)"></user-group-picker>
<user-group-picker user-group-id="ctrl.newAcl.userGroupId"></user-group-picker>
</div>
<div class="gf-form">
<span class="gf-form-label query-keyword">Can</span>
<div class="gf-form-select-wrapper">
<select class="gf-form-input gf-size-auto" ng-model="ctrl.newAcl.permission" ng-options="p.value as p.text for p in ctrl.permissionOptions"></select>
</div>
</div>
<div class="gf-form">
<button class="btn gf-form-btn btn-secondary" ng-click="ctrl.addPermission()">Add</button>
</div> </div>
</div> </div>
</form> </form>
......
public/app/features/dashboard/acl/acl.ts
...@@ -12,21 +12,28 @@ export class AclCtrl { ...@@ -12,21 +12,28 @@ export class AclCtrl {
{value: 2, text: 'Edit'}, {value: 2, text: 'Edit'},
{value: 4, text: 'Admin'} {value: 4, text: 'Admin'}
]; ];
aclTypes = [
{value: 'Group', text: 'User Group'},
{value: 'User', text: 'User'},
{value: 'Viewer', text: 'Everyone With Viewer Role'},
{value: 'Editor', text: 'Everyone With Editor Role'}
];
newType: string; newType: string;
newAcl: DashboardAcl;
canUpdate: boolean; canUpdate: boolean;
/** @ngInject */ /** @ngInject */
constructor(private backendSrv, private dashboardSrv, private $sce, private $scope) { constructor(private backendSrv, private dashboardSrv, private $sce, private $scope) {
this.aclItems = []; this.aclItems = [];
this.newType = 'User Group'; this.resetNewType();
this.resetNew();
this.dashboard = dashboardSrv.getCurrent(); this.dashboard = dashboardSrv.getCurrent();
this.get(this.dashboard.id); this.get(this.dashboard.id);
} }
resetNewType() {
this.newType = 'Group';
}
get(dashboardId: number) { get(dashboardId: number) {
return this.backendSrv.get(`/api/dashboards/id/${dashboardId}/acl`) return this.backendSrv.get(`/api/dashboards/id/${dashboardId}/acl`)
.then(result => { .then(result => {
...@@ -49,33 +56,57 @@ export class AclCtrl { ...@@ -49,33 +56,57 @@ export class AclCtrl {
return item; return item;
} }
addPermission() {
this.aclItems.push(this.prepareViewModel(this.newAcl));
this.$scope.$broadcast('user-picker-reset');
this.$scope.$broadcast('user-group-picker-reset');
}
resetNew() {
this.newAcl = {
userId: 0,
userGroupId: 0,
permission: 1
};
}
update() { update() {
return this.backendSrv.post(`/api/dashboards/id/${this.dashboard.id}/acl`, { return this.backendSrv.post(`/api/dashboards/id/${this.dashboard.id}/acl`, {
acl: this.aclItems acl: this.aclItems.map(item => {
return {
id: item.id,
userId: item.userId,
userGroupId: item.userGroupId,
role: item.role,
permission: item.permission,
};
})
}); });
} }
typeChanged() {
if (this.newType === 'Viewer' || this.newType === 'Editor') {
this.aclItems.push(this.prepareViewModel({
permission: 1,
role: this.newType
}));
this.canUpdate = true;
this.resetNewType();
}
}
permissionChanged() { permissionChanged() {
this.canUpdate = true; this.canUpdate = true;
} }
userPicked(user) { userPicked(user) {
this.newAcl.userLogin = user.login; this.aclItems.push(this.prepareViewModel({
this.newAcl.userId = user.id; userId: user.id,
userLogin: user.login,
permission: 1,
}));
this.canUpdate = true;
this.$scope.$broadcast('user-picker-reset');
}
groupPicked(group) {
console.log(group);
this.aclItems.push(this.prepareViewModel({
userGroupId: group.id,
userGroup: group.name,
permission: 1,
}));
this.canUpdate = true;
this.$scope.$broadcast('user-group-picker-reset');
} }
removeItem(index) { removeItem(index) {
...@@ -107,10 +138,10 @@ export interface FormModel { ...@@ -107,10 +138,10 @@ export interface FormModel {
export interface DashboardAcl { export interface DashboardAcl {
id?: number; id?: number;
dashboardId?: number; dashboardId?: number;
userId: number; userId?: number;
userLogin?: number; userLogin?: number;
userEmail?: string; userEmail?: string;
userGroupId: number; userGroupId?: number;
userGroup?: string; userGroup?: string;
permission?: number; permission?: number;
permissionName?: string; permissionName?: string;
......
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