diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx index b07bc672265..5e19f5c814a 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx @@ -1,8 +1,8 @@ import React, { PureComponent } from 'react'; import classNames from 'classnames'; +import PanelHeaderCorner from './PanelHeaderCorner'; import { PanelHeaderMenu } from './PanelHeaderMenu'; -import Tooltip from 'app/core/components/Tooltip/Tooltip'; import { DashboardModel } from 'app/features/dashboard/dashboard_model'; import { PanelModel } from 'app/features/dashboard/panel_model'; @@ -44,23 +44,13 @@ export class PanelHeader extends PureComponent { const { panel, dashboard, timeInfo } = this.props; return ( <> - {panel.description && ( - - - - - )} - {isLoading && ( - - - - )} - +
+ {isLoading && ( + + + + )}
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx new file mode 100644 index 00000000000..18d874713a5 --- /dev/null +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx @@ -0,0 +1,94 @@ +import React, { PureComponent } from 'react'; +import { PanelModel } from 'app/features/dashboard/panel_model'; +import Tooltip from 'app/core/components/Tooltip/Tooltip'; +import templateSrv from 'app/features/templating/template_srv'; +import { LinkSrv } from 'app/features/dashboard/panellinks/link_srv'; +import { getTimeSrv, TimeSrv } from 'app/features/dashboard/time_srv'; +import Remarkable from 'remarkable'; + +enum InfoModes { + Error = 'Error', + Info = 'Info', + Links = 'Links', +} + +interface Props { + panel: PanelModel; +} + +export class PanelHeaderCorner extends PureComponent { + timeSrv: TimeSrv = getTimeSrv(); + + getInfoMode = () => { + const { panel } = this.props; + // TODO + // if (error) { + // return InfoModes.Error; + // } + if (!!panel.description) { + return InfoModes.Info; + } + if (panel.links && panel.links.length) { + return InfoModes.Links; + } + + return undefined; + }; + + getInfoContent = () => { + const { panel } = this.props; + const markdown = panel.description; + const linkSrv = new LinkSrv(templateSrv, this.timeSrv); + const sanitize = str => str; // TODO + const interpolatedMarkdown = templateSrv.replace(markdown, panel.scopedVars); + const remarkableInterpolatedMarkdown = new Remarkable().render(interpolatedMarkdown); + + const html = ( +
+
+ {panel.links && + panel.links.length > 0 && ( +
    + {panel.links.map((link, idx) => { + const info = linkSrv.getPanelLinkAnchorInfo(link, panel.scopedVars); + return ( +
  • + + {info.title} + +
  • + ); + })} +
+ )} +
+ ); + return sanitize(html); + }; + + render() { + const infoMode: InfoModes | undefined = this.getInfoMode(); + + if (!infoMode) { + return null; + } + const infoContent = this.getInfoContent(); + + return ( + <> + {infoMode === InfoModes.Info || infoMode === InfoModes.Links ? ( + + + + + ) : null} + + ); + } +} + +export default PanelHeaderCorner; diff --git a/public/app/features/dashboard/panel_model.ts b/public/app/features/dashboard/panel_model.ts index e9d7f17812e..20388a0450c 100644 --- a/public/app/features/dashboard/panel_model.ts +++ b/public/app/features/dashboard/panel_model.ts @@ -50,6 +50,7 @@ export class PanelModel { maxDataPoints?: number; interval?: string; description?: string; + links?: []; // non persisted fullscreen: boolean;