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

DashboardLinks: values in links are updated when variables change (#27926)

Browse Source 
* DashboardLinks: values in links are updated when variable changes

* Tests: adds e2e test that verifies links
This commit is contained in:
Hugo Häggmark
2020-10-01 08:44:56 +02:00
committed by GitHub
parent 4e4242d475
commit fa2781391a
5 changed files with 234 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx
View File

@@ -9,6 +9,7 @@ import { DashboardLink } from '../../state/DashboardModel';
import { iconMap } from '../DashLinks/DashLinksEditorCtrl';
import { useEffectOnce } from 'react-use';
import { CoreEvents } from 'app/types';
import { selectors } from '@grafana/e2e-selectors';
export interface Props {
dashboard: DashboardModel;
@@ -42,14 +43,19 @@ export const DashboardLinks: FC<Props> = ({ dashboard, links }) => {
}
const linkElement = (
<a className="gf-form-label" href={sanitizeUrl(linkInfo.href)} target={link.targetBlank ? '_blank' : '_self'}>
<a
className="gf-form-label"
href={sanitizeUrl(linkInfo.href)}
target={link.targetBlank ? '_blank' : '_self'}
aria-label={selectors.components.DashboardLinks.link}
>
<Icon name={iconMap[link.icon] as IconName} style={{ marginRight: '4px' }} />
<span>{sanitize(linkInfo.title)}</span>
</a>
);
return (
<div key={key} className="gf-form">
<div key={key} className="gf-form" aria-label={selectors.components.DashboardLinks.container}>
{link.tooltip ? <Tooltip content={link.tooltip}>{linkElement}</Tooltip> : linkElement}
</div>
);

28
public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
View File

@@ -5,6 +5,7 @@ import { getBackendSrv } from 'app/core/services/backend_srv';
import { getLinkSrv } from '../../../panel/panellinks/link_srv';
import { DashboardLink } from '../../state/DashboardModel';
import { DashboardSearchHit } from 'app/features/search/types';
import { selectors } from '@grafana/e2e-selectors';
interface Props {
link: DashboardLink;
@@ -24,7 +25,7 @@ export class DashboardLinksDashboard extends PureComponent<Props, State> {
}
componentDidUpdate(prevProps: Readonly<Props>) {
if (this.props.link !== prevProps.link) {
if (this.props.link !== prevProps.link || this.props.linkInfo !== prevProps.linkInfo) {
this.searchForDashboards();
}
}
@@ -38,11 +39,11 @@ export class DashboardLinksDashboard extends PureComponent<Props, State> {
this.setState({ resolvedLinks });
};
renderElement = (linkElement: JSX.Element, key: string) => {
renderElement = (linkElement: JSX.Element, key: string, selector: string) => {
const { link } = this.props;
return (
<div className="gf-form" key={key}>
<div className="gf-form" key={key} aria-label={selector}>
{link.tooltip && <Tooltip content={link.tooltip}>{linkElement}</Tooltip>}
{!link.tooltip && <>{linkElement}</>}
</div>
@@ -58,12 +59,21 @@ export class DashboardLinksDashboard extends PureComponent<Props, State> {
{resolvedLinks.length > 0 &&
resolvedLinks.map((resolvedLink, index) => {
const linkElement = (
<a className="gf-form-label" href={resolvedLink.url} target={link.targetBlank ? '_blank' : '_self'}>
<a
className="gf-form-label"
href={resolvedLink.url}
target={link.targetBlank ? '_blank' : '_self'}
aria-label={selectors.components.DashboardLinks.link}
>
<Icon name="apps" style={{ marginRight: '4px' }} />
<span>{resolvedLink.title}</span>
</a>
);
return this.renderElement(linkElement, `dashlinks-list-item-${resolvedLink.id}-${index}`);
return this.renderElement(
linkElement,
`dashlinks-list-item-${resolvedLink.id}-${index}`,
selectors.components.DashboardLinks.container
);
})}
</>
);
@@ -89,7 +99,11 @@ export class DashboardLinksDashboard extends PureComponent<Props, State> {
resolvedLinks.map((resolvedLink, index) => {
return (
<li key={`dashlinks-dropdown-item-${resolvedLink.id}-${index}`}>
<a href={resolvedLink.url} target={link.targetBlank ? '_blank' : '_self'}>
<a
href={resolvedLink.url}
target={link.targetBlank ? '_blank' : '_self'}
aria-label={selectors.components.DashboardLinks.link}
>
{resolvedLink.title}
</a>
</li>
@@ -99,7 +113,7 @@ export class DashboardLinksDashboard extends PureComponent<Props, State> {
</>
);
return this.renderElement(linkElement, 'dashlinks-dropdown');
return this.renderElement(linkElement, 'dashlinks-dropdown', selectors.components.DashboardLinks.dropDown);
};
render() {