Skip to content

N
nexpie-grafana-theme
Commit c4ae05c5 by Torkel Ödegaard Committed by GitHub
Options

Merge pull request #14078 from grafana/12759-description-n-links 

12759 React-panel: description and links
parents 03040159 83073dea
Showing with 286 additions and 119 deletions
package.json
...@@ -14,9 +14,9 @@ ...@@ -14,9 +14,9 @@
"@types/enzyme": "^3.1.13", "@types/enzyme": "^3.1.13",
"@types/jest": "^23.3.2", "@types/jest": "^23.3.2",
"@types/node": "^8.0.31", "@types/node": "^8.0.31",
"@types/react": "^16.4.14", "@types/react": "^16.7.6",
"@types/react-custom-scrollbars": "^4.0.5", "@types/react-custom-scrollbars": "^4.0.5",
"@types/react-dom": "^16.0.7", "@types/react-dom": "^16.0.9",
"@types/react-select": "^2.0.4", "@types/react-select": "^2.0.4",
"angular-mocks": "1.6.6", "angular-mocks": "1.6.6",
"autoprefixer": "^6.4.0", "autoprefixer": "^6.4.0",
...@@ -152,12 +152,12 @@ ...@@ -152,12 +152,12 @@
"prismjs": "^1.6.0", "prismjs": "^1.6.0",
"prop-types": "^15.6.2", "prop-types": "^15.6.2",
"rc-cascader": "^0.14.0", "rc-cascader": "^0.14.0",
"react": "^16.5.0", "react": "^16.6.3",
"react-custom-scrollbars": "^4.2.1", "react-custom-scrollbars": "^4.2.1",
"react-dom": "^16.5.0", "react-dom": "^16.6.3",
"react-grid-layout": "0.16.6", "react-grid-layout": "0.16.6",
"react-highlight-words": "^0.10.0", "react-highlight-words": "^0.10.0",
"react-popper": "^0.7.5", "react-popper": "^1.3.0",
"react-redux": "^5.0.7", "react-redux": "^5.0.7",
"react-select": "2.1.0", "react-select": "2.1.0",
"react-sizeme": "^2.3.6", "react-sizeme": "^2.3.6",
...@@ -180,6 +180,7 @@ ...@@ -180,6 +180,7 @@
"tslint-react": "^3.6.0" "tslint-react": "^3.6.0"
}, },
"resolutions": { "resolutions": {
"caniuse-db": "1.0.30000772" "caniuse-db": "1.0.30000772",
"**/@types/react": "16.7.6"
} }
} }
public/app/core/components/Tooltip/Popover.tsx
import React from 'react'; import React, { PureComponent } from 'react';
import withTooltip from './withTooltip'; import Popper from './Popper';
import { Target } from 'react-popper'; import withPopper, { UsingPopperProps } from './withPopper';
interface PopoverProps { class Popover extends PureComponent<UsingPopperProps> {
tooltipSetState: (prevState: object) => void; render() {
} const { children, hidePopper, showPopper, className, ...restProps } = this.props;
class Popover extends React.Component<PopoverProps, any> {
constructor(props) {
super(props);
this.toggleTooltip = this.toggleTooltip.bind(this);
}
toggleTooltip() { const togglePopper = restProps.show ? hidePopper : showPopper;
const { tooltipSetState } = this.props;
tooltipSetState(prevState => {
return {
...prevState,
show: !prevState.show,
};
});
}
render() {
return ( return (
<Target className="popper__target" onClick={this.toggleTooltip}> <div className={`popper__manager ${className}`} onClick={togglePopper}>
{this.props.children} <Popper {...restProps}>{children}</Popper>
</Target> </div>
); );
} }
} }
export default withTooltip(Popover); export default withPopper(Popover);
public/app/core/components/Tooltip/Popper.tsx 0 → 100644
import React, { PureComponent } from 'react';
import { Manager, Popper as ReactPopper, Reference } from 'react-popper';
import Transition from 'react-transition-group/Transition';
const defaultTransitionStyles = {
transition: 'opacity 200ms linear',
opacity: 0,
};
const transitionStyles = {
exited: { opacity: 0 },
entering: { opacity: 0 },
entered: { opacity: 1 },
exiting: { opacity: 0 },
};
interface Props {
renderContent: (content: any) => any;
show: boolean;
placement?: any;
content: string | ((props: any) => JSX.Element);
refClassName?: string;
}
class Popper extends PureComponent<Props> {
render() {
const { children, renderContent, show, placement, refClassName } = this.props;
const { content } = this.props;
return (
<Manager>
<Reference>
{({ ref }) => (
<div className={`popper_ref ${refClassName || ''}`} ref={ref}>
{children}
</div>
)}
</Reference>
<Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}>
{transitionState => (
<ReactPopper placement={placement}>
{({ ref, style, placement, arrowProps }) => {
return (
<div
ref={ref}
style={{
...style,
...defaultTransitionStyles,
...transitionStyles[transitionState],
}}
data-placement={placement}
className="popper"
>
<div className="popper__background">
{renderContent(content)}
<div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
</div>
</div>
);
}}
</ReactPopper>
)}
</Transition>
</Manager>
);
}
}
export default Popper;
public/app/core/components/Tooltip/Tooltip.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import withTooltip from './withTooltip'; import Popper from './Popper';
import { Target } from 'react-popper'; import withPopper, { UsingPopperProps } from './withPopper';
interface Props {
tooltipSetState: (prevState: object) => void;
}
class Tooltip extends PureComponent<Props> {
showTooltip = () => {
const { tooltipSetState } = this.props;
tooltipSetState(prevState => ({
...prevState,
show: true,
}));
};
hideTooltip = () => {
const { tooltipSetState } = this.props;
tooltipSetState(prevState => ({
...prevState,
show: false,
}));
};
class Tooltip extends PureComponent<UsingPopperProps> {
render() { render() {
const { children, hidePopper, showPopper, className, ...restProps } = this.props;
return ( return (
<Target className="popper__target" onMouseOver={this.showTooltip} onMouseOut={this.hideTooltip}> <div className={`popper__manager ${className}`} onMouseEnter={showPopper} onMouseLeave={hidePopper}>
{this.props.children} <Popper {...restProps}>{children}</Popper>
</Target> </div>
); );
} }
} }
export default withTooltip(Tooltip); export default withPopper(Tooltip);
public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap
...@@ -3,10 +3,10 @@ ...@@ -3,10 +3,10 @@
exports[`Popover renders correctly 1`] = ` exports[`Popover renders correctly 1`] = `
<div <div
className="popper__manager test-class" className="popper__manager test-class"
onClick={[Function]}
> >
<div <div
className="popper__target" className="popper_ref "
onClick={[Function]}
> >
<button> <button>
Button with Popover Button with Popover
......
public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
exports[`Tooltip renders correctly 1`] = ` exports[`Tooltip renders correctly 1`] = `
<div <div
className="popper__manager test-class" className="popper__manager test-class"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
> >
<div <div
className="popper__target" className="popper_ref "
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<a <a
href="http://www.grafana.com" href="http://www.grafana.com"
......
public/app/core/components/Tooltip/withTooltip.tsx → public/app/core/components/Tooltip/withPopper.tsx
import React from 'react'; import React from 'react';
import { Manager, Popper, Arrow } from 'react-popper';
interface IwithTooltipProps { export interface UsingPopperProps {
showPopper: (prevState: object) => void;
hidePopper: (prevState: object) => void;
renderContent: (content: any) => any;
show: boolean;
placement?: string; placement?: string;
content: string | ((props: any) => JSX.Element); content: string | ((props: any) => JSX.Element);
className?: string; className?: string;
refClassName?: string;
} }
export default function withTooltip(WrappedComponent) { interface Props {
return class extends React.Component<IwithTooltipProps, any> { placement?: string;
className?: string;
refClassName?: string;
content: string | ((props: any) => JSX.Element);
}
interface State {
placement: string;
show: boolean;
}
export default function withPopper(WrappedComponent) {
return class extends React.Component<Props, State> {
constructor(props) { constructor(props) {
super(props); super(props);
this.setState = this.setState.bind(this); this.setState = this.setState.bind(this);
this.state = { this.state = {
placement: this.props.placement || 'auto', placement: this.props.placement || 'auto',
...@@ -30,6 +45,20 @@ export default function withTooltip(WrappedComponent) { ...@@ -30,6 +45,20 @@ export default function withTooltip(WrappedComponent) {
} }
} }
showPopper = () => {
this.setState(prevState => ({
...prevState,
show: true,
}));
};
hidePopper = () => {
this.setState(prevState => ({
...prevState,
show: false,
}));
};
renderContent(content) { renderContent(content) {
if (typeof content === 'function') { if (typeof content === 'function') {
// If it's a function we assume it's a React component // If it's a function we assume it's a React component
...@@ -40,18 +69,19 @@ export default function withTooltip(WrappedComponent) { ...@@ -40,18 +69,19 @@ export default function withTooltip(WrappedComponent) {
} }
render() { render() {
const { content, className } = this.props; const { show, placement } = this.state;
const className = this.props.className || '';
return ( return (
<Manager className={`popper__manager ${className || ''}`}> <WrappedComponent
<WrappedComponent {...this.props} tooltipSetState={this.setState} /> {...this.props}
{this.state.show ? ( showPopper={this.showPopper}
<Popper placement={this.state.placement} className="popper"> hidePopper={this.hidePopper}
{this.renderContent(content)} renderContent={this.renderContent}
<Arrow className="popper__arrow" /> show={show}
</Popper> placement={placement}
) : null} className={className}
</Manager> />
); );
} }
}; };
......
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import PanelHeaderCorner from './PanelHeaderCorner';
import { PanelHeaderMenu } from './PanelHeaderMenu'; import { PanelHeaderMenu } from './PanelHeaderMenu';
import { DashboardModel } from 'app/features/dashboard/dashboard_model'; import { DashboardModel } from 'app/features/dashboard/dashboard_model';
...@@ -41,41 +42,37 @@ export class PanelHeader extends PureComponent<Props, State> { ...@@ -41,41 +42,37 @@ export class PanelHeader extends PureComponent<Props, State> {
const isLoading = false; const isLoading = false;
const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen }); const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
const { panel, dashboard, timeInfo } = this.props; const { panel, dashboard, timeInfo } = this.props;
return ( return (
<div className={panelHeaderClass}> <>
<span className="panel-info-corner"> <PanelHeaderCorner panel={panel} />
<i className="fa" /> <div className={panelHeaderClass}>
<span className="panel-info-corner-inner" /> {isLoading && (
</span> <span className="panel-loading">
<i className="fa fa-spinner fa-spin" />
{isLoading && (
<span className="panel-loading">
<i className="fa fa-spinner fa-spin" />
</span>
)}
<div className="panel-title-container" onClick={this.onMenuToggle}>
<div className="panel-title">
<span className="icon-gf panel-alert-icon" />
<span className="panel-title-text">
{panel.title} <span className="fa fa-caret-down panel-menu-toggle" />
</span> </span>
)}
<div className="panel-title-container" onClick={this.onMenuToggle}>
<div className="panel-title">
<span className="icon-gf panel-alert-icon" />
<span className="panel-title-text">
{panel.title} <span className="fa fa-caret-down panel-menu-toggle" />
</span>
{this.state.panelMenuOpen && ( {this.state.panelMenuOpen && (
<ClickOutsideWrapper onClick={this.closeMenu}> <ClickOutsideWrapper onClick={this.closeMenu}>
<PanelHeaderMenu panel={panel} dashboard={dashboard} /> <PanelHeaderMenu panel={panel} dashboard={dashboard} />
</ClickOutsideWrapper> </ClickOutsideWrapper>
)} )}
{timeInfo && ( {timeInfo && (
<span className="panel-time-info"> <span className="panel-time-info">
<i className="fa fa-clock-o" /> {timeInfo} <i className="fa fa-clock-o" /> {timeInfo}
</span> </span>
)} )}
</div>
</div> </div>
</div> </div>
</div> </>
); );
} }
} }
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx 0 → 100644
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<Props> {
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 = (
<div className="markdown-html">
<div dangerouslySetInnerHTML={{ __html: remarkableInterpolatedMarkdown }} />
{panel.links &&
panel.links.length > 0 && (
<ul>
{panel.links.map((link, idx) => {
const info = linkSrv.getPanelLinkAnchorInfo(link, panel.scopedVars);
return (
<li key={idx}>
<a className="panel-menu-link" href={info.href} target={info.target}>
{info.title}
</a>
</li>
);
})}
</ul>
)}
</div>
);
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 ? (
<Tooltip
content={infoContent}
className="absolute"
refClassName={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
>
<i className="fa" />
<span className="panel-info-corner-inner" />
</Tooltip>
) : null}
</>
);
}
}
export default PanelHeaderCorner;
public/app/features/dashboard/panel_model.ts
...@@ -49,6 +49,8 @@ export class PanelModel { ...@@ -49,6 +49,8 @@ export class PanelModel {
maxDataPoints?: number; maxDataPoints?: number;
interval?: string; interval?: string;
description?: string;
links?: [];
// non persisted // non persisted
fullscreen: boolean; fullscreen: boolean;
......
public/sass/components/_popper.scss
.popper { .popper {
position: absolute; position: absolute;
z-index: $zindex-tooltip; z-index: $zindex-tooltip;
background: $tooltipBackground;
color: $tooltipColor; color: $tooltipColor;
max-width: 400px; max-width: 400px;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
padding: 10px;
text-align: center; text-align: center;
} }
...@@ -35,10 +31,18 @@ ...@@ -35,10 +31,18 @@
left: calc(50% - 5px); left: calc(50% - 5px);
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
padding-top: 5px;
} }
.popper[data-placement^='bottom'] { .popper[data-placement^='bottom'] {
margin-top: 5px; padding-top: 5px;
}
.popper__background {
background: $tooltipBackground;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
padding: 10px;
} }
.popper[data-placement^='bottom'] .popper__arrow { .popper[data-placement^='bottom'] .popper__arrow {
...@@ -46,21 +50,21 @@ ...@@ -46,21 +50,21 @@
border-left-color: transparent; border-left-color: transparent;
border-right-color: transparent; border-right-color: transparent;
border-top-color: transparent; border-top-color: transparent;
top: -5px; top: 0;
left: calc(50% - 5px); left: calc(50% - 8px);
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.popper[data-placement^='right'] { .popper[data-placement^='right'] {
margin-left: 5px; padding-left: 5px;
} }
.popper[data-placement^='right'] .popper__arrow { .popper[data-placement^='right'] .popper__arrow {
border-width: 5px 5px 5px 0; border-width: 5px 5px 5px 0;
border-left-color: transparent; border-left-color: transparent;
border-top-color: transparent; border-top-color: transparent;
border-bottom-color: transparent; border-bottom-color: transparent;
left: -5px; left: 0;
top: calc(50% - 5px); top: calc(50% - 8px);
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
......
public/sass/utils/_utils.scss
...@@ -78,3 +78,7 @@ button.close { ...@@ -78,3 +78,7 @@ button.close {
.d-inline-block { .d-inline-block {
display: inline-block; display: inline-block;
} }
.absolute {
position: absolute;
}
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