Skip to content

N
nexpie-grafana-theme
Commit 44ea8e58 by Johannes Schill Committed by Daniel Lee
Options

wip: More on the permissions. Left are team picker and user picker, tests and error messages #10275

parent 460cbe98
Showing with 172 additions and 185 deletions
public/app/core/components/Permissions/Permissions.tsx
......@@ -5,6 +5,7 @@ import DevTools from 'mobx-react-devtools';
import { inject, observer } from 'mobx-react';
import { Provider } from 'mobx-react';
import { store } from 'app/stores/store';
import UserPicker from 'app/core/components/UserPicker/UserPicker';
export interface DashboardAcl {
id?: number;
......@@ -75,140 +76,42 @@ class PermissionsInner extends Component<IProps, any> {
this.permissionChanged = this.permissionChanged.bind(this);
this.typeChanged = this.typeChanged.bind(this);
this.removeItem = this.removeItem.bind(this);
this.update = this.update.bind(this);
permissions.load(this.dashboardId);
this.state = {
newType: 'Group',
canUpdate: false,
error: '',
};
}
componentWillReceiveProps(nextProps) {
console.log('nextProps', nextProps);
}
sortItems(items) {
return _.orderBy(items, ['sortRank', 'sortName'], ['desc', 'asc']);
}
permissionChanged(evt) {
// TODO
permissionChanged(index: number, permission: number, permissionName: string) {
const { permissions } = this.props;
// permissions.items[index].updatePermission(permission, permissionName);
permissions.updatePermissionOnIndex(index, permission, permissionName);
}
removeItem(index) {
removeItem(index: number) {
const { permissions } = this.props;
permissions.removeStoreItem(index);
}
update() {
var updated = [];
for (let item of this.state.items) {
if (item.inherited) {
continue;
}
updated.push({
id: item.id,
userId: item.userId,
teamId: item.teamId,
role: item.role,
permission: item.permission,
});
}
return this.backendSrv
.post(`/api/dashboards/id/${this.dashboardId}/acl`, {
items: updated,
})
.then(() => {
this.setState(prevState => {
return {
...prevState,
canUpdate: false,
};
});
});
}
prepareViewModel(item: DashboardAcl): DashboardAcl {
// TODO: this.meta
// item.inherited = !this.meta.isFolder && this.dashboardId !== item.dashboardId;
item.inherited = this.dashboardId !== item.dashboardId;
item.sortRank = 0;
if (item.userId > 0) {
item.icon = 'fa fa-fw fa-user';
// item.nameHtml = this.$sce.trustAsHtml(item.userLogin);
item.nameHtml = item.userLogin;
item.sortName = item.userLogin;
item.sortRank = 10;
} else if (item.teamId > 0) {
item.icon = 'fa fa-fw fa-users';
// item.nameHtml = this.$sce.trustAsHtml(item.team);
item.nameHtml = item.team;
item.sortName = item.team;
item.sortRank = 20;
} else if (item.role) {
item.icon = 'fa fa-fw fa-street-view';
// item.nameHtml = this.$sce.trustAsHtml(`Everyone with <span class="query-keyword">${item.role}</span> Role`);
item.nameHtml = `Everyone with <span class="query-keyword">${item.role}</span> Role`;
item.sortName = item.role;
item.sortRank = 30;
if (item.role === 'Viewer') {
item.sortRank += 1;
}
}
if (item.inherited) {
item.sortRank += 100;
}
return item;
}
isDuplicate(origItem, newItem) {
if (origItem.inherited) {
return false;
}
return (
(origItem.role && newItem.role && origItem.role === newItem.role) ||
(origItem.userId && newItem.userId && origItem.userId === newItem.userId) ||
(origItem.teamId && newItem.teamId && origItem.teamId === newItem.teamId)
);
}
isValid(item) {
const dupe = _.find(this.items, it => {
return this.isDuplicate(it, item);
});
if (dupe) {
this.error = this.duplicateError;
return false;
}
return true;
}
addNewItem(item) {
if (!this.isValid(item)) {
return;
}
this.error = '';
item.dashboardId = this.dashboardId;
let newItems = this.state.items;
newItems.push(this.prepareViewModel(item));
this.setState(prevState => {
return {
...prevState,
items: this.sortItems(newItems),
canUpdate: true,
};
});
const { permissions, dashboardId } = this.props;
permissions.update(dashboardId);
}
resetNewType() {
this.setState(prevState => {
return {
...prevState,
newType: 'Group',
};
});
......@@ -216,6 +119,14 @@ class PermissionsInner extends Component<IProps, any> {
typeChanged(evt) {
const { value } = evt.target;
const { permissions } = this.props;
if (value === 'Viewer' || value === 'Editor') {
permissions.addStoreItem({ permission: 1, role: value, dashboardId: this.dashboardId }, this.dashboardId);
this.resetNewType();
return;
}
this.setState(prevState => {
return {
...prevState,
......@@ -224,40 +135,27 @@ class PermissionsInner extends Component<IProps, any> {
});
}
typeChanged___() {
const { newType } = this.state;
if (newType === 'Viewer' || newType === 'Editor') {
this.addNewItem({ permission: 1, role: newType });
this.resetNewType();
this.setState(prevState => {
return {
...prevState,
canUpdate: true,
};
});
}
}
render() {
const { error, aclTypes, permissions } = this.props;
console.log('PermissionsInner render');
const { error, aclTypes, permissions, backendSrv } = this.props;
const { newType } = this.state;
return (
<div className="gf-form-group">
<PermissionsList
permissions={permissions.items.toJS()}
permissions={permissions.items}
permissionsOptions={this.permissionOptions}
removeItem={this.removeItem}
permissionChanged={this.permissionChanged}
fetching={permissions.fetching}
/>
asd2
<div className="gf-form-inline">
<form name="addPermission" className="gf-form-group">
<h6 className="muted">Add Permission For</h6>
<div className="gf-form-inline">
<div className="gf-form">
<div className="gf-form-select-wrapper">
<select className="gf-form-input gf-size-auto" onChange={this.typeChanged}>
<select className="gf-form-input gf-size-auto" value={newType} onChange={this.typeChanged}>
{aclTypes.map((option, idx) => {
return (
<option key={idx} value={option.value}>
......@@ -280,6 +178,13 @@ class PermissionsInner extends Component<IProps, any> {
{' '}
User picker
<user-picker user-picked="ctrl.userPicked($user)" />
<select-user-picker
backendSrv="ctrl.backendSrv"
teamId="ctrl.$routeParams.id"
refreshList="ctrl.get"
teamMembers="ctrl.teamMembers"
/>
<UserPicker backendSrv={backendSrv} teamId={0} />
</div>
) : null}
......@@ -306,7 +211,6 @@ class PermissionsInner extends Component<IProps, any> {
Update Permissions
</button>
</div>
asd3
<DevTools />
</div>
);
......
public/app/core/components/Permissions/PermissionsList.tsx
import React, { Component } from 'react';
import PermissionsListItem from './PermissionsListItem';
import { observer } from 'mobx-react';
export interface IProps {
permissions: any[];
permissionsOptions: any[];
removeItem: any;
permissionChanged: any;
fetching: boolean;
}
@observer
class PermissionsList extends Component<IProps, any> {
render() {
const { permissions, permissionsOptions, removeItem, permissionChanged } = this.props;
const { permissions, permissionsOptions, removeItem, permissionChanged, fetching } = this.props;
return (
<table className="filter-table gf-form-group">
<tbody>
{permissions.map((item, idx) => {
return (
<PermissionsListItem
key={item.id}
key={idx}
item={item}
itemIndex={idx}
permissionsOptions={permissionsOptions}
......@@ -55,7 +59,15 @@ class PermissionsList extends Component<IProps, any> {
<em>No permissions are set. Will only be accessible by admins.</em>
</td>
</tr> */}
{permissions.length < 1 ? (
{fetching === true && permissions.length < 1 ? (
<tr>
<td colSpan={4}>
<em>Loading permissions...</em>
</td>
</tr>
) : null}
{fetching === false && permissions.length < 1 ? (
<tr>
<td colSpan={4}>
<em>No permissions are set. Will only be accessible by admins.</em>
......
public/app/core/components/Permissions/PermissionsListItem.tsx
import React from 'react';
import { observer } from 'mobx-react';
const setClassNameHelper = inherited => {
return inherited ? 'gf-form-disabled' : '';
};
export default ({ item, permissionsOptions, removeItem, permissionChanged, itemIndex }) => {
export default observer(({ item, permissionsOptions, removeItem, permissionChanged, itemIndex }) => {
const handleRemoveItem = evt => {
evt.preventDefault();
removeItem(itemIndex);
......@@ -12,7 +13,10 @@ export default ({ item, permissionsOptions, removeItem, permissionChanged, itemI
const handleChangePermission = evt => {
evt.preventDefault();
permissionChanged(itemIndex, evt.target.value);
const value = evt.target.value;
const valueAsInt = parseInt(value, 10);
const newPermission = permissionsOptions.find(opt => opt.value === valueAsInt);
permissionChanged(itemIndex, newPermission.value, newPermission.text);
};
return (
......@@ -57,4 +61,4 @@ export default ({ item, permissionsOptions, removeItem, permissionChanged, itemI
</td>
</tr>
);
};
});
public/app/stores/PermissionsStore/PermissionsStore.ts
import { types, getEnv, flow } from 'mobx-state-tree';
import { PermissionsStoreItem } from './PermissionsStoreItem';
const duplicateError = 'This permission exists already.';
export const PermissionsStore = types
.model('PermissionsStore', {
fetching: types.boolean,
......@@ -8,67 +10,128 @@ export const PermissionsStore = types
items: types.optional(types.array(PermissionsStoreItem), []),
originalItems: types.optional(types.array(PermissionsStoreItem), []),
})
// .views(self => ({
// canUpdate: () => {
// const itemsSnapshot = getSnapshot(self.items);
// const originalItemsSnapshot = getSnapshot(self.originalItems);
// console.log('itemsSnapshot', itemsSnapshot);
// console.log('editItemsSnapshot', originalItemsSnapshot);
// return true;
// }
// }))
.views(self => ({
isValid: item => {
const dupe = self.items.find(it => {
return isDuplicate(it, item);
});
if (dupe) {
this.error = duplicateError;
return false;
}
return true;
},
}))
.actions(self => ({
load: flow(function* load(dashboardId: number) {
self.fetching = true;
const backendSrv = getEnv(self).backendSrv;
self.fetching = true;
const res = yield backendSrv.get(`/api/dashboards/id/${dashboardId}/acl`);
const items = prepareServerResponse(res, dashboardId);
self.items = items;
self.originalItems = items;
self.fetching = false;
}),
addStoreItem: () => {
addStoreItem: (item, dashboardId: number) => {
if (!self.isValid(item)) {
return;
}
self.items.push(prepareItem(item, dashboardId));
self.canUpdate = true;
},
removeStoreItem: idx => {
self.items.splice(idx, 1);
self.canUpdate = true;
},
updatePermissionOnIndex(idx: number, permission: number, permissionName: string) {
// self.items[idx].permission = permission;
// self.items[idx].permissionName = permissionName;
self.items[idx].updatePermission(permission, permissionName);
self.canUpdate = true;
},
// load: flow(function* load(dashboardId: number) {
update: flow(function* update(dashboardId: number) {
const backendSrv = getEnv(self).backendSrv;
const updated = [];
for (let item of self.items) {
if (item.inherited) {
continue;
}
updated.push({
id: item.id,
userId: item.userId,
teamId: item.teamId,
role: item.role,
permission: item.permission,
});
}
let res;
try {
res = backendSrv.post(`/api/dashboards/id/${dashboardId}/acl`, {
items: updated,
});
} catch (error) {
console.error(error);
}
self.canUpdate = false;
return res;
}),
}));
const prepareServerResponse = (response, dashboardId: number) => {
return response.map(item => {
// TODO: this.meta
// item.inherited = !this.meta.isFolder && this.dashboardId !== item.dashboardId;
item.inherited = dashboardId !== item.dashboardId;
item.sortRank = 0;
if (item.userId > 0) {
item.icon = 'fa fa-fw fa-user';
// item.nameHtml = this.$sce.trustAsHtml(item.userLogin);
item.nameHtml = item.userLogin;
item.sortName = item.userLogin;
item.sortRank = 10;
} else if (item.teamId > 0) {
item.icon = 'fa fa-fw fa-users';
// item.nameHtml = this.$sce.trustAsHtml(item.team);
item.nameHtml = item.team;
item.sortName = item.team;
item.sortRank = 20;
} else if (item.role) {
item.icon = 'fa fa-fw fa-street-view';
// item.nameHtml = this.$sce.trustAsHtml(`Everyone with <span class="query-keyword">${item.role}</span> Role`);
item.nameHtml = `Everyone with <span class="query-keyword">${item.role}</span> Role`;
item.sortName = item.role;
item.sortRank = 30;
if (item.role === 'Viewer') {
item.sortRank += 1;
}
}
return prepareItem(item, dashboardId);
});
};
if (item.inherited) {
item.sortRank += 100;
const prepareItem = (item, dashboardId: number) => {
// TODO: this.meta
// item.inherited = !this.meta.isFolder && this.dashboardId !== item.dashboardId;
item.inherited = dashboardId !== item.dashboardId;
item.sortRank = 0;
if (item.userId > 0) {
item.icon = 'fa fa-fw fa-user';
// item.nameHtml = this.$sce.trustAsHtml(item.userLogin);
item.nameHtml = item.userLogin;
item.sortName = item.userLogin;
item.sortRank = 10;
} else if (item.teamId > 0) {
item.icon = 'fa fa-fw fa-users';
// item.nameHtml = this.$sce.trustAsHtml(item.team);
item.nameHtml = item.team;
item.sortName = item.team;
item.sortRank = 20;
} else if (item.role) {
item.icon = 'fa fa-fw fa-street-view';
// item.nameHtml = this.$sce.trustAsHtml(`Everyone with <span class="query-keyword">${item.role}</span> Role`);
item.nameHtml = `Everyone with <span class="query-keyword">${item.role}</span> Role`;
item.sortName = item.role;
item.sortRank = 30;
if (item.role === 'Viewer') {
item.sortRank += 1;
}
}
return item;
});
if (item.inherited) {
item.sortRank += 100;
}
return item;
};
const isDuplicate = (origItem, newItem) => {
if (origItem.inherited) {
return false;
}
return (
(origItem.role && newItem.role && origItem.role === newItem.role) ||
(origItem.userId && newItem.userId && origItem.userId === newItem.userId) ||
(origItem.teamId && newItem.teamId && origItem.teamId === newItem.teamId)
);
};
public/app/stores/PermissionsStore/PermissionsStoreItem.ts
......@@ -2,16 +2,16 @@
export const PermissionsStoreItem = types
.model('PermissionsStoreItem', {
dashboardId: types.number,
id: types.number,
dashboardId: types.optional(types.number, -1),
id: types.maybe(types.number),
permission: types.number,
permissionName: types.string,
permissionName: types.maybe(types.string),
role: types.maybe(types.string),
team: types.string,
teamId: types.number,
userEmail: types.string,
userId: types.number,
userLogin: types.string,
team: types.optional(types.string, ''),
teamId: types.optional(types.number, 0),
userEmail: types.optional(types.string, ''),
userId: types.optional(types.number, 0),
userLogin: types.optional(types.string, ''),
inherited: types.maybe(types.boolean),
sortRank: types.maybe(types.number),
icon: types.maybe(types.string),
......@@ -22,4 +22,8 @@ export const PermissionsStoreItem = types
updateRole: role => {
self.role = role;
},
updatePermission(permission: number, permissionName: string) {
self.permission = permission;
self.permissionName = permissionName;
},
}));
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