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

Panels: Show Drilldown links in top-left corner of custom React panels (#17142)

Browse Source
This commit is contained in:
Filip Barl 2019-05-22 14:21:43 +02:00 committed by Torkel Ödegaard
parent e9130210cc
commit 87688930a2
2 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
View File

@ -48,7 +48,7 @@ export class PanelHeaderCorner extends Component<Props> {
const remarkableInterpolatedMarkdown = new Remarkable().render(interpolatedMarkdown); const remarkableInterpolatedMarkdown = new Remarkable().render(interpolatedMarkdown);
return ( return (
<div className="markdown-html"> <div className="panel-info-content markdown-html">
<div dangerouslySetInnerHTML={{ __html: remarkableInterpolatedMarkdown }} /> <div dangerouslySetInnerHTML={{ __html: remarkableInterpolatedMarkdown }} />
{panel.links && panel.links.length > 0 && ( {panel.links && panel.links.length > 0 && (
<ul className="text-left"> <ul className="text-left">
@ -71,7 +71,7 @@ export class PanelHeaderCorner extends Component<Props> {
renderCornerType(infoMode: InfoMode, content: string | JSX.Element) { renderCornerType(infoMode: InfoMode, content: string | JSX.Element) {
const theme = infoMode === InfoMode.Error ? 'error' : 'info'; const theme = infoMode === InfoMode.Error ? 'error' : 'info';
return ( return (
<Tooltip content={content} placement="bottom-start" theme={theme}> <Tooltip content={content} placement="top-start" theme={theme}>
<div className={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}> <div className={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}>
<i className="fa" /> <i className="fa" />
<span className="panel-info-corner-inner" /> <span className="panel-info-corner-inner" />
@ -91,7 +91,7 @@ export class PanelHeaderCorner extends Component<Props> {
return this.renderCornerType(infoMode, this.props.error); return this.renderCornerType(infoMode, this.props.error);
} }
if (infoMode === InfoMode.Info) { if (infoMode === InfoMode.Info || infoMode === InfoMode.Links) {
return this.renderCornerType(infoMode, this.getInfoContent()); return this.renderCornerType(infoMode, this.getInfoContent());
} }

9
public/sass/components/_panel_header.scss
View File

@ -167,6 +167,15 @@ $panel-header-no-title-zindex: 1;
} }
} }
.panel-info-content {
a {
color: $white;
&:hover {
color: darken($white, 10%);
}
}
}
.panel-time-info { .panel-time-info {
font-weight: $font-weight-semi-bold; font-weight: $font-weight-semi-bold;
float: right; float: right;