mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
dashfolders: Use grafana's question mark instead of FA's and use the react tooltip instead of angular's #10275
This commit is contained in:
parent
d9460d0b2b
commit
787b493c00
@ -4,7 +4,8 @@ import { toJS } from 'mobx';
|
||||
import IContainerProps from 'app/containers/IContainerProps';
|
||||
import PageHeader from 'app/core/components/PageHeader/PageHeader';
|
||||
import Permissions from 'app/core/components/Permissions/Permissions';
|
||||
|
||||
import Tooltip from 'app/core/components/Tooltip/Tooltip';
|
||||
import PermissionsInfo from 'app/core/components/Permissions/PermissionsInfo';
|
||||
@inject('nav', 'folder', 'view', 'permissions')
|
||||
@observer
|
||||
export class FolderPermissions extends Component<IContainerProps, any> {
|
||||
@ -33,7 +34,13 @@ export class FolderPermissions extends Component<IContainerProps, any> {
|
||||
<div>
|
||||
<PageHeader model={nav as any} />
|
||||
<div className="page-container page-body">
|
||||
<h2 className="page-sub-heading">Folder Permissions</h2>
|
||||
<div className="page-sub-heading">
|
||||
<h2 className="d-inline-block">Folder Permissions</h2>
|
||||
<Tooltip className="page-sub-heading-icon" placement="auto" content={PermissionsInfo}>
|
||||
<i className="gicon gicon-question gicon--has-hover" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<Permissions permissions={permissions} isFolder={true} dashboardId={dashboardId} backendSrv={backendSrv} />
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,6 +1,8 @@
|
||||
import React, { Component } from 'react';
|
||||
import { store } from 'app/stores/store';
|
||||
import Permissions from 'app/core/components/Permissions/Permissions';
|
||||
import Tooltip from 'app/core/components/Tooltip/Tooltip';
|
||||
import PermissionsInfo from 'app/core/components/Permissions/PermissionsInfo';
|
||||
|
||||
export interface IProps {
|
||||
dashboardId: number;
|
||||
@ -20,13 +22,21 @@ class DashboardPermissions extends Component<IProps, any> {
|
||||
const { dashboardId, folderTitle, backendSrv } = this.props;
|
||||
|
||||
return (
|
||||
<Permissions
|
||||
permissions={this.permissions}
|
||||
isFolder={false}
|
||||
dashboardId={dashboardId}
|
||||
folderTitle={folderTitle}
|
||||
backendSrv={backendSrv}
|
||||
/>
|
||||
<div>
|
||||
<div className="dashboard-settings__header">
|
||||
<h3 className="d-inline-block">Permissions</h3>
|
||||
<Tooltip className="page-sub-heading-icon" placement="auto" content={PermissionsInfo}>
|
||||
<i className="gicon gicon-question gicon--has-hover" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Permissions
|
||||
permissions={this.permissions}
|
||||
isFolder={false}
|
||||
dashboardId={dashboardId}
|
||||
folderTitle={folderTitle}
|
||||
backendSrv={backendSrv}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
|
||||
import UserPicker, { User } from 'app/core/components/Picker/UserPicker';
|
||||
import TeamPicker, { Team } from 'app/core/components/Picker/TeamPicker';
|
||||
import { aclTypes } from 'app/stores/PermissionsStore/PermissionsStore';
|
||||
|
||||
import PermissionsInfo from './PermissionsInfo';
|
||||
export interface DashboardAcl {
|
||||
id?: number;
|
||||
dashboardId?: number;
|
||||
@ -142,22 +142,6 @@ class Permissions extends Component<IProps, any> {
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{/* <div className="empty-list-cta m-t-3">
|
||||
<div className="grafana-info-box">
|
||||
<h5>What are Permissions?</h5>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>The permissions that can be assigned for a folder/dashboard are:</p>
|
||||
<p>View, Edit and Admin.</p>
|
||||
Checkout the{' '}
|
||||
<a className="external-link" target="_blank" href="http://docs.grafana.org/reference/dashboard_folders/">
|
||||
Dashboard Folders documentation
|
||||
</a>{' '}
|
||||
for more information.
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
13
public/app/core/components/Permissions/PermissionsInfo.tsx
Normal file
13
public/app/core/components/Permissions/PermissionsInfo.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<div className="">
|
||||
<h5>What are Permissions?</h5>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
@ -96,14 +96,6 @@
|
||||
</div>
|
||||
|
||||
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'permissions'" >
|
||||
<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"
|
||||
dashboardId="ctrl.dashboard.id"
|
||||
backendSrv="ctrl.backendSrv"
|
||||
|
@ -11,6 +11,14 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.gicon--has-hover {
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.mini {
|
||||
width: 0.8em;
|
||||
height: 0.8em;
|
||||
|
@ -1,8 +1,9 @@
|
||||
.popper {
|
||||
position: absolute;
|
||||
z-index: $zindex-tooltip;
|
||||
background: $tooltipBackground;
|
||||
color: $tooltipColor;
|
||||
width: 150px;
|
||||
max-width: 400px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||
padding: 10px;
|
||||
|
@ -66,9 +66,7 @@
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
width: calc(
|
||||
100% - #{$page-sidebar-width + $page-sidebar-margin}
|
||||
); // sidebar width + margin
|
||||
width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
@ -90,6 +88,12 @@
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
.page-sub-heading-icon {
|
||||
margin-left: $spacer;
|
||||
vertical-align: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.page-sidebar {
|
||||
color: $text-color-weak;
|
||||
h4 {
|
||||
|
@ -74,3 +74,7 @@ button.close {
|
||||
.affix {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.d-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user