IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

teams: basic ui for permission in team members view

Browse Source
This commit is contained in:
Hugo Häggmark
2019-03-06 12:27:18 +01:00
committed by Leonard Gram
parent af4994ba16
commit 7888457aae
7 changed files with 478 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
pkg/models/team_member.go
View File

@@ -63,4 +63,5 @@ type TeamMemberDTO struct {
Login string `json:"login"` Login string `json:"login"`
AvatarUrl string `json:"avatarUrl"` AvatarUrl string `json:"avatarUrl"`
Labels []string `json:"labels"` Labels []string `json:"labels"`
Permission int64 `json:"permission"`
} }

2
pkg/services/sqlstore/team.go
View File

@@ -294,7 +294,7 @@ func GetTeamMembers(query *m.GetTeamMembersQuery) error {
if query.External { if query.External {
sess.Where("team_member.external=?", dialect.BooleanStr(true)) sess.Where("team_member.external=?", dialect.BooleanStr(true))
} }
sess.Cols("team_member.org_id", "team_member.team_id", "team_member.user_id", "user.email", "user.login", "team_member.external") sess.Cols("team_member.org_id", "team_member.team_id", "team_member.user_id", "user.email", "user.login", "team_member.external", "team_member.permission")
sess.Asc("user.login", "user.email") sess.Asc("user.login", "user.email")
err := sess.Find(&query.Result) err := sess.Find(&query.Result)

18
public/app/features/teams/TeamMembers.tsx
View File

@@ -2,9 +2,9 @@ import React, { PureComponent } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import SlideDown from 'app/core/components/Animations/SlideDown'; import SlideDown from 'app/core/components/Animations/SlideDown';
import { UserPicker } from 'app/core/components/Select/UserPicker'; import { UserPicker } from 'app/core/components/Select/UserPicker';
import { DeleteButton } from '@grafana/ui'; import { DeleteButton, Select } from '@grafana/ui';
import { TagBadge } from 'app/core/components/TagFilter/TagBadge'; import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
import { TeamMember, User } from 'app/types'; import { TeamMember, User, teamsPermissionLevels } from 'app/types';
import { loadTeamMembers, addTeamMember, removeTeamMember, setSearchMemberQuery } from './state/actions'; import { loadTeamMembers, addTeamMember, removeTeamMember, setSearchMemberQuery } from './state/actions';
import { getSearchMemberQuery, getTeamMembers } from './state/selectors'; import { getSearchMemberQuery, getTeamMembers } from './state/selectors';
import { FilterInput } from 'app/core/components/FilterInput/FilterInput'; import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
@@ -70,6 +70,7 @@ export class TeamMembers extends PureComponent<Props, State> {
} }
renderMember(member: TeamMember, syncEnabled: boolean) { renderMember(member: TeamMember, syncEnabled: boolean) {
const currentPermissionLevel = teamsPermissionLevels.find(dp => dp.value === member.permission);
return ( return (
<tr key={member.userId}> <tr key={member.userId}>
<td className="width-4 text-center"> <td className="width-4 text-center">
@@ -77,6 +78,18 @@ export class TeamMembers extends PureComponent<Props, State> {
</td> </td>
<td>{member.login}</td> <td>{member.login}</td>
<td>{member.email}</td> <td>{member.email}</td>
<td>
<div className="gf-form">
<Select
isSearchable={false}
options={teamsPermissionLevels}
onChange={() => {}}
className="gf-form-select-box__control--menu-right"
value={currentPermissionLevel}
isDisabled={true}
/>
</div>
</td>{' '}
{syncEnabled && this.renderLabels(member.labels)} {syncEnabled && this.renderLabels(member.labels)}
<td className="text-right"> <td className="text-right">
<DeleteButton onConfirm={() => this.onRemoveMember(member)} /> <DeleteButton onConfirm={() => this.onRemoveMember(member)} />
@@ -132,6 +145,7 @@ export class TeamMembers extends PureComponent<Props, State> {
<th /> <th />
<th>Name</th> <th>Name</th>
<th>Email</th> <th>Email</th>
<th>Permission</th>
{syncEnabled && <th />} {syncEnabled && <th />}
<th style={{ width: '1%' }} /> <th style={{ width: '1%' }} />
</tr> </tr>

2
public/app/features/teams/__mocks__/teamMocks.ts
View File

@@ -36,6 +36,7 @@ export const getMockTeamMembers = (amount: number): TeamMember[] => {
email: 'test@test.com', email: 'test@test.com',
login: `testUser-${i}`, login: `testUser-${i}`,
labels: ['label 1', 'label 2'], labels: ['label 1', 'label 2'],
permission: 0,
}); });
} }
@@ -50,6 +51,7 @@ export const getMockTeamMember = (): TeamMember => {
email: 'test@test.com', email: 'test@test.com',
login: 'testUser', login: 'testUser',
labels: [], labels: [],
permission: 0,
}; };
}; };

429
public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
View File

@@ -69,6 +69,9 @@ exports[`Render should render component 1`] = `
<th> <th>
Email Email
</th> </th>
<th>
Permission
</th>
<th <th
style={ style={
Object { Object {
@@ -153,6 +156,9 @@ exports[`Render should render team members 1`] = `
<th> <th>
Email Email
</th> </th>
<th>
Permission
</th>
<th <th
style={ style={
Object { Object {
@@ -180,6 +186,48 @@ exports[`Render should render team members 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
width={null}
/>
</div>
</td>
<td <td
className="text-right" className="text-right"
> >
@@ -205,6 +253,48 @@ exports[`Render should render team members 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
width={null}
/>
</div>
</td>
<td <td
className="text-right" className="text-right"
> >
@@ -230,6 +320,48 @@ exports[`Render should render team members 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
width={null}
/>
</div>
</td>
<td <td
className="text-right" className="text-right"
> >
@@ -255,6 +387,48 @@ exports[`Render should render team members 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
width={null}
/>
</div>
</td>
<td <td
className="text-right" className="text-right"
> >
@@ -280,6 +454,48 @@ exports[`Render should render team members 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
width={null}
/>
</div>
</td>
<td <td
className="text-right" className="text-right"
> >
@@ -363,6 +579,9 @@ exports[`Render should render team members when sync enabled 1`] = `
<th> <th>
Email Email
</th> </th>
<th>
Permission
</th>
<th /> <th />
<th <th
style={ style={
@@ -391,6 +610,48 @@ exports[`Render should render team members when sync enabled 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
width={null}
/>
</div>
</td>
<td> <td>
<TagBadge <TagBadge
count={0} count={0}
@@ -432,6 +693,48 @@ exports[`Render should render team members when sync enabled 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
width={null}
/>
</div>
</td>
<td> <td>
<TagBadge <TagBadge
count={0} count={0}
@@ -473,6 +776,48 @@ exports[`Render should render team members when sync enabled 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
width={null}
/>
</div>
</td>
<td> <td>
<TagBadge <TagBadge
count={0} count={0}
@@ -514,6 +859,48 @@ exports[`Render should render team members when sync enabled 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
width={null}
/>
</div>
</td>
<td> <td>
<TagBadge <TagBadge
count={0} count={0}
@@ -555,6 +942,48 @@ exports[`Render should render team members when sync enabled 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
width={null}
/>
</div>
</td>
<td> <td>
<TagBadge <TagBadge
count={0} count={0}

20
public/app/types/acl.ts
View File

@@ -98,3 +98,23 @@ export const dashboardPermissionLevels: DashboardPermissionInfo[] = [
description: 'Can add/remove permissions and can add, edit and delete dashboards.', description: 'Can add/remove permissions and can add, edit and delete dashboards.',
}, },
]; ];
export enum TeamPermissionLevel {
Member = 0,
Admin = 4,
}
export interface TeamPermissionInfo {
value: TeamPermissionLevel;
label: string;
description: string;
}
export const teamsPermissionLevels: TeamPermissionInfo[] = [
{ value: TeamPermissionLevel.Member, label: 'Member', description: 'Is team member' },
{
value: TeamPermissionLevel.Admin,
label: 'Admin',
description: 'Can add/remove permissions and delete team.',
},
];

1
public/app/types/teams.ts
View File

@@ -13,6 +13,7 @@ export interface TeamMember {
email: string; email: string;
login: string; login: string;
labels: string[]; labels: string[];
permission: number;
} }
export interface TeamGroup { export interface TeamGroup {