Skip to content

N
nexpie-grafana-theme
Commit 73eaba07 by Torkel Ödegaard
Options

wip: dashboard acl ux2, #10747

parent ec6f0f94
Showing with 33 additions and 21 deletions
pkg/api/dashboard_acl.go
...@@ -30,6 +30,8 @@ func GetDashboardAclList(c *middleware.Context) Response { ...@@ -30,6 +30,8 @@ func GetDashboardAclList(c *middleware.Context) Response {
} }
for _, perm := range acl { for _, perm := range acl {
perm.UserAvatarUrl = dtos.GetGravatarUrl(perm.UserEmail)
perm.TeamAvatarUrl = dtos.GetGravatarUrl(perm.TeamEmail)
if perm.Slug != "" { if perm.Slug != "" {
perm.Url = m.GetDashboardFolderUrl(perm.IsFolder, perm.Uid, perm.Slug) perm.Url = m.GetDashboardFolderUrl(perm.IsFolder, perm.Uid, perm.Slug)
} }
......
pkg/models/dashboard_acl.go
...@@ -53,7 +53,10 @@ type DashboardAclInfoDTO struct { ...@@ -53,7 +53,10 @@ type DashboardAclInfoDTO struct {
UserId int64 `json:"userId"` UserId int64 `json:"userId"`
UserLogin string `json:"userLogin"` UserLogin string `json:"userLogin"`
UserEmail string `json:"userEmail"` UserEmail string `json:"userEmail"`
UserAvatarUrl string `json:"userAvatarUrl"`
TeamId int64 `json:"teamId"` TeamId int64 `json:"teamId"`
TeamEmail string `json:"teamEmail"`
TeamAvatarUrl string `json:"teamAvatarUrl"`
Team string `json:"team"` Team string `json:"team"`
Role *RoleType `json:"role,omitempty"` Role *RoleType `json:"role,omitempty"`
Permission PermissionType `json:"permission"` Permission PermissionType `json:"permission"`
......
pkg/services/sqlstore/dashboard_acl.go
...@@ -92,6 +92,7 @@ func GetDashboardAclInfoList(query *m.GetDashboardAclInfoListQuery) error { ...@@ -92,6 +92,7 @@ func GetDashboardAclInfoList(query *m.GetDashboardAclInfoListQuery) error {
u.login AS user_login, u.login AS user_login,
u.email AS user_email, u.email AS user_email,
ug.name AS team, ug.name AS team,
ug.email AS team_email,
d.title, d.title,
d.slug, d.slug,
d.uid, d.uid,
......
public/app/core/components/Permissions/DisabledPermissionsListItem.tsx
import React, { Component } from 'react'; import React, { Component } from 'react';
import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker'; import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
import { permissionOptions } from 'app/stores/PermissionsStore/PermissionsStore'; import { permissionOptions } from 'app/stores/PermissionsStore/PermissionsStore';
...@@ -12,10 +12,10 @@ export default class DisabledPermissionListItem extends Component<IProps, any> { ...@@ -12,10 +12,10 @@ export default class DisabledPermissionListItem extends Component<IProps, any> {
return ( return (
<tr className="gf-form-disabled"> <tr className="gf-form-disabled">
<td style={{ width: '100%' }}> <td style={{ width: '1%' }}>
<i className={`fa--permissions-list ${item.icon}`} /> <i className={`fa--permissions-list ${item.icon}`} />
<span dangerouslySetInnerHTML={{ __html: item.nameHtml }} />
</td> </td>
<td style={{ width: '90%' }}>{item.name}</td>
<td /> <td />
<td className="query-keyword">Can</td> <td className="query-keyword">Can</td>
<td> <td>
......
public/app/core/components/Permissions/Permissions.tsx
...@@ -15,9 +15,8 @@ export interface DashboardAcl { ...@@ -15,9 +15,8 @@ export interface DashboardAcl {
permissionName?: string; permissionName?: string;
role?: string; role?: string;
icon?: string; icon?: string;
nameHtml?: string; name?: string;
inherited?: boolean; inherited?: boolean;
sortName?: string;
sortRank?: number; sortRank?: number;
} }
......
public/app/core/components/Permissions/PermissionsList.tsx
import React, { Component } from 'react'; import React, { Component } from 'react';
import PermissionsListItem from './PermissionsListItem'; import PermissionsListItem from './PermissionsListItem';
import DisabledPermissionsListItem from './DisabledPermissionsListItem'; import DisabledPermissionsListItem from './DisabledPermissionsListItem';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
...@@ -23,7 +23,7 @@ class PermissionsList extends Component<IProps, any> { ...@@ -23,7 +23,7 @@ class PermissionsList extends Component<IProps, any> {
<DisabledPermissionsListItem <DisabledPermissionsListItem
key={0} key={0}
item={{ item={{
nameHtml: 'Everyone with <span class="query-keyword">Admin</span> Role', name: 'Admin',
permission: 4, permission: 4,
icon: 'fa fa-fw fa-street-view', icon: 'fa fa-fw fa-street-view',
}} }}
......
public/app/core/components/Permissions/PermissionsListItem.tsx
import React from 'react'; import React from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker'; import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
import { permissionOptions } from 'app/stores/PermissionsStore/PermissionsStore'; import { permissionOptions } from 'app/stores/PermissionsStore/PermissionsStore';
...@@ -7,6 +7,16 @@ const setClassNameHelper = inherited => { ...@@ -7,6 +7,16 @@ const setClassNameHelper = inherited => {
return inherited ? 'gf-form-disabled' : ''; return inherited ? 'gf-form-disabled' : '';
}; };
function ItemAvatar({ item }) {
if (item.userAvatarUrl) {
return <img className="filter-table__avatar" src={item.userAvatarUrl} />;
}
if (item.teamAvatarUrl) {
return <img className="filter-table__avatar" src={item.teamAvatarUrl} />;
}
return <span className={item.icon} />;
}
export default observer(({ item, removeItem, permissionChanged, itemIndex, folderInfo }) => { export default observer(({ item, removeItem, permissionChanged, itemIndex, folderInfo }) => {
const handleRemoveItem = evt => { const handleRemoveItem = evt => {
evt.preventDefault(); evt.preventDefault();
...@@ -18,13 +28,14 @@ export default observer(({ item, removeItem, permissionChanged, itemIndex, folde ...@@ -18,13 +28,14 @@ export default observer(({ item, removeItem, permissionChanged, itemIndex, folde
}; };
const inheritedFromRoot = item.dashboardId === -1 && folderInfo && folderInfo.id === 0; const inheritedFromRoot = item.dashboardId === -1 && folderInfo && folderInfo.id === 0;
console.log(item.name);
return ( return (
<tr className={setClassNameHelper(item.inherited)}> <tr className={setClassNameHelper(item.inherited)}>
<td style={{ width: '100%' }}> <td style={{ width: '1%' }}>
<i className={`fa--permissions-list ${item.icon}`} /> <ItemAvatar item={item} />
<span dangerouslySetInnerHTML={{ __html: item.nameHtml }} />
</td> </td>
<td style={{ width: '90%' }}>{item.name}</td>
<td> <td>
{item.inherited && {item.inherited &&
folderInfo && ( folderInfo && (
......
public/app/stores/PermissionsStore/PermissionsStore.ts
...@@ -231,19 +231,14 @@ const prepareItem = (item, dashboardId: number, isFolder: boolean, isInRoot: boo ...@@ -231,19 +231,14 @@ const prepareItem = (item, dashboardId: number, isFolder: boolean, isInRoot: boo
item.sortRank = 0; item.sortRank = 0;
if (item.userId > 0) { if (item.userId > 0) {
item.icon = 'fa fa-fw fa-user'; item.name = item.userLogin;
item.nameHtml = item.userLogin;
item.sortName = item.userLogin;
item.sortRank = 10; item.sortRank = 10;
} else if (item.teamId > 0) { } else if (item.teamId > 0) {
item.icon = 'fa fa-fw fa-users'; item.name = item.team;
item.nameHtml = item.team;
item.sortName = item.team;
item.sortRank = 20; item.sortRank = 20;
} else if (item.role) { } else if (item.role) {
item.icon = 'fa fa-fw fa-street-view'; item.icon = 'fa fa-fw fa-street-view';
item.nameHtml = `Everyone with <span class="query-keyword">${item.role}</span> Role`; item.name = item.role;
item.sortName = item.role;
item.sortRank = 30; item.sortRank = 30;
if (item.role === 'Viewer') { if (item.role === 'Viewer') {
item.sortRank += 1; item.sortRank += 1;
......
public/app/stores/PermissionsStore/PermissionsStoreItem.ts
...@@ -14,8 +14,9 @@ export const PermissionsStoreItem = types ...@@ -14,8 +14,9 @@ export const PermissionsStoreItem = types
inherited: types.maybe(types.boolean), inherited: types.maybe(types.boolean),
sortRank: types.maybe(types.number), sortRank: types.maybe(types.number),
icon: types.maybe(types.string), icon: types.maybe(types.string),
nameHtml: types.maybe(types.string), name: types.maybe(types.string),
sortName: types.maybe(types.string), teamAvatarUrl: types.maybe(types.string),
userAvatarUrl: types.maybe(types.string),
}) })
.actions(self => ({ .actions(self => ({
updateRole: role => { updateRole: role => {
......
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