Skip to content

N
nexpie-grafana-theme
Commit a7fba593 by Daniel Lee
Options

dashfolders: add help popover. Add folder title for inherited permissions

parent 50b20a0e
Showing with 31 additions and 47 deletions
public/app/core/angular_wrappers.ts
...@@ -20,5 +20,5 @@ export function registerAngularDirectives() { ...@@ -20,5 +20,5 @@ export function registerAngularDirectives() {
['tagOptions', { watchDepth: 'reference' }], ['tagOptions', { watchDepth: 'reference' }],
]); ]);
react2AngularDirective('selectUserPicker', UserPicker, ['backendSrv', 'handlePicked']); react2AngularDirective('selectUserPicker', UserPicker, ['backendSrv', 'handlePicked']);
react2AngularDirective('dashboardPermissions', DashboardPermissions, ['backendSrv', 'dashboardId']); react2AngularDirective('dashboardPermissions', DashboardPermissions, ['backendSrv', 'dashboardId', 'folderTitle']);
} }
public/app/core/components/Permissions/DashboardPermissions.tsx
...@@ -5,6 +5,7 @@ import Permissions from 'app/core/components/Permissions/Permissions'; ...@@ -5,6 +5,7 @@ import Permissions from 'app/core/components/Permissions/Permissions';
export interface IProps { export interface IProps {
dashboardId: number; dashboardId: number;
folderTitle: string;
backendSrv: any; backendSrv: any;
} }
...@@ -18,10 +19,16 @@ class DashboardPermissions extends Component<IProps, any> { ...@@ -18,10 +19,16 @@ class DashboardPermissions extends Component<IProps, any> {
} }
render() { render() {
const { dashboardId, backendSrv } = this.props; const { dashboardId, folderTitle, backendSrv } = this.props;
return ( return (
<Permissions permissions={this.permissions} isFolder={false} dashboardId={dashboardId} backendSrv={backendSrv} /> <Permissions
permissions={this.permissions}
isFolder={false}
dashboardId={dashboardId}
folderTitle={folderTitle}
backendSrv={backendSrv}
/>
); );
} }
} }
......
public/app/core/components/Permissions/Permissions.tsx
...@@ -25,6 +25,7 @@ export interface DashboardAcl { ...@@ -25,6 +25,7 @@ export interface DashboardAcl {
export interface IProps { export interface IProps {
dashboardId: number; dashboardId: number;
folderTitle?: string;
permissions?: any; permissions?: any;
isFolder: boolean; isFolder: boolean;
backendSrv: any; backendSrv: any;
...@@ -86,7 +87,7 @@ class Permissions extends Component<IProps, any> { ...@@ -86,7 +87,7 @@ class Permissions extends Component<IProps, any> {
} }
render() { render() {
const { permissions, backendSrv } = this.props; const { permissions, folderTitle, backendSrv } = this.props;
return ( return (
<div className="gf-form-group"> <div className="gf-form-group">
...@@ -95,6 +96,7 @@ class Permissions extends Component<IProps, any> { ...@@ -95,6 +96,7 @@ class Permissions extends Component<IProps, any> {
removeItem={this.removeItem} removeItem={this.removeItem}
permissionChanged={this.permissionChanged} permissionChanged={this.permissionChanged}
fetching={permissions.fetching} fetching={permissions.fetching}
folderTitle={folderTitle}
/> />
<div className="gf-form-inline"> <div className="gf-form-inline">
<form name="addPermission" className="gf-form-group"> <form name="addPermission" className="gf-form-group">
...@@ -144,8 +146,8 @@ class Permissions extends Component<IProps, any> { ...@@ -144,8 +146,8 @@ class Permissions extends Component<IProps, any> {
<div className="grafana-info-box"> <div className="grafana-info-box">
<h5>What are Permissions?</h5> <h5>What are Permissions?</h5>
<p> <p>
An Access Control List (ACL) model is used for to limit access to Dashboard Folders. A user or a Team can An Access Control List (ACL) model is used to limit access to Dashboard Folders. A user or a Team can be
be assigned permissions for a folder or for a single dashboard. assigned permissions for a folder or for a single dashboard.
</p> </p>
<p>The permissions that can be assigned for a folder/dashboard are:</p> <p>The permissions that can be assigned for a folder/dashboard are:</p>
<p>View, Edit and Admin.</p> <p>View, Edit and Admin.</p>
......
public/app/core/components/Permissions/PermissionsList.tsx
...@@ -8,12 +8,13 @@ export interface IProps { ...@@ -8,12 +8,13 @@ export interface IProps {
removeItem: any; removeItem: any;
permissionChanged: any; permissionChanged: any;
fetching: boolean; fetching: boolean;
folderTitle: string;
} }
@observer @observer
class PermissionsList extends Component<IProps, any> { class PermissionsList extends Component<IProps, any> {
render() { render() {
const { permissions, removeItem, permissionChanged, fetching } = this.props; const { permissions, removeItem, permissionChanged, fetching, folderTitle } = this.props;
return ( return (
<table className="filter-table gf-form-group"> <table className="filter-table gf-form-group">
...@@ -34,38 +35,10 @@ class PermissionsList extends Component<IProps, any> { ...@@ -34,38 +35,10 @@ class PermissionsList extends Component<IProps, any> {
itemIndex={idx} itemIndex={idx}
removeItem={removeItem} removeItem={removeItem}
permissionChanged={permissionChanged} permissionChanged={permissionChanged}
folderTitle={folderTitle}
/> />
); );
})} })}
{/* <tr ng-repeat="acl in ctrl.items" ng-class="{'gf-form-disabled': acl.inherited}">
<td><!-- 100% -->
<i className="{{acl.icon}}"></i>
<span ng-bind-html="acl.nameHtml"></span>
</td>
<td>
<em className="muted no-wrap" ng-show="acl.inherited">Inherited from folder</em>
</td>
<td className="query-keyword">Can</td>
<td>
<div className="gf-form-select-wrapper">
<select className="gf-form-input gf-size-auto"
ng-model="acl.permission"
ng-options="p.value as p.text for p in ctrl.permissionOptions"
ng-change="ctrl.permissionChanged(acl)"
ng-disabled="acl.inherited"></select>
</div>
</td>
<td>
<a className="btn btn-inverse btn-small" ng-click="ctrl.removeItem($index)" ng-hide="acl.inherited">
<i className="fa fa-remove"></i>
</a>
</td>
</tr>
<tr ng-show="ctrl.aclItems.length === 0">
<td colSpan={4}>
<em>No permissions are set. Will only be accessible by admins.</em>
</td>
</tr> */}
{fetching === true && permissions.length < 1 ? ( {fetching === true && permissions.length < 1 ? (
<tr> <tr>
<td colSpan={4}> <td colSpan={4}>
......
public/app/core/components/Permissions/PermissionsListItem.tsx
...@@ -6,7 +6,7 @@ const setClassNameHelper = inherited => { ...@@ -6,7 +6,7 @@ const setClassNameHelper = inherited => {
return inherited ? 'gf-form-disabled' : ''; return inherited ? 'gf-form-disabled' : '';
}; };
export default observer(({ item, removeItem, permissionChanged, itemIndex }) => { export default observer(({ item, removeItem, permissionChanged, itemIndex, folderTitle }) => {
const handleRemoveItem = evt => { const handleRemoveItem = evt => {
evt.preventDefault(); evt.preventDefault();
removeItem(itemIndex); removeItem(itemIndex);
...@@ -26,7 +26,7 @@ export default observer(({ item, removeItem, permissionChanged, itemIndex }) => ...@@ -26,7 +26,7 @@ export default observer(({ item, removeItem, permissionChanged, itemIndex }) =>
<i className={item.icon} /> <i className={item.icon} />
<span dangerouslySetInnerHTML={{ __html: item.nameHtml }} /> <span dangerouslySetInnerHTML={{ __html: item.nameHtml }} />
</td> </td>
<td>{item.inherited ? <em className="muted no-wrap">Inherited from folder</em> : null}</td> <td>{item.inherited ? <em className="muted no-wrap">Inherited from folder {folderTitle} </em> : null}</td>
<td className="query-keyword">Can</td> <td className="query-keyword">Can</td>
<td> <td>
<div className="gf-form-select-wrapper"> <div className="gf-form-select-wrapper">
...@@ -44,12 +44,6 @@ export default observer(({ item, removeItem, permissionChanged, itemIndex }) => ...@@ -44,12 +44,6 @@ export default observer(({ item, removeItem, permissionChanged, itemIndex }) =>
); );
})} })}
</select> </select>
{/* <select className="gf-form-input gf-size-auto"
ng-model="acl.permission"
ng-options="p.value as p.text for p in ctrl.permissionOptions"
ng-change="ctrl.permissionChanged(acl)"
ng-disabled="acl.inherited" /> */}
</div> </div>
</td> </td>
<td> <td>
......
public/app/features/dashboard/settings/settings.html
...@@ -96,11 +96,19 @@ ...@@ -96,11 +96,19 @@
</div> </div>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'permissions'" > <div class="dashboard-settings__content" ng-if="ctrl.viewId === 'permissions'" >
<h3 class="dashboard-settings__header">Permissions</h3> <h3 class="dashboard-settings__header">Permissions
<info-popover mode="left-normal">
What are Permissions?
<br /><br />
An Access Control List (ACL) model is used to limit access to Dashboard Folders. A user or a Team can be assigned permissions for a folder or for a single dashboard.
</info-popover>
</h3>
<dashboard-permissions ng-if="ctrl.dashboard" <dashboard-permissions ng-if="ctrl.dashboard"
dashboardId="ctrl.dashboard.id" dashboardId="ctrl.dashboard.id"
backendSrv="ctrl.backendSrv"> backendSrv="ctrl.backendSrv"
</dashboard-permissions> folderTitle="ctrl.dashboard.meta.folderTitle"
/>
</div> </div>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === '404'"> <div class="dashboard-settings__content" ng-if="ctrl.viewId === '404'">
......
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