Merge branch 'master' into grafana-ui/tooltip

packages/grafana-ui/src/components/Tooltip/Popper.tsx

@@ -4,6 +4,11 @@ import { Manager, Popper as ReactPopper } from 'react-popper';
 import Portal from 'app/core/components/Portal/Portal';
 import Transition from 'react-transition-group/Transition';
 
+export enum Themes {
+  Default = 'popper__background--default',
+  Error = 'popper__background--error',
+}
+
 const defaultTransitionStyles = {
   transition: 'opacity 200ms linear',
   opacity: 0,
@@ -23,13 +28,16 @@ interface Props extends React.DOMAttributes<HTMLDivElement> {
   content: string | ((props: any) => JSX.Element);
   refClassName?: string;
   referenceElement: PopperJS.ReferenceObject;
+  theme?: Themes;
 }
 
 class Popper extends PureComponent<Props> {
   render() {
-    const { renderContent, show, placement, onMouseEnter, onMouseLeave } = this.props;
+    const { renderContent, show, placement, onMouseEnter, onMouseLeave, theme } = this.props;
     const { content } = this.props;
 
+    const popperBackgroundClassName = 'popper__background' + (theme ? ' ' + theme : '');
+
     return (
       <Manager>
         <Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}>
@@ -50,7 +58,7 @@ class Popper extends PureComponent<Props> {
                       data-placement={placement}
                       className="popper"
                     >
-                      <div className="popper__background">
+                      <div className={popperBackgroundClassName}>
                         {renderContent(content)}
                         <div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
                       </div>

packages/grafana-ui/src/components/Tooltip/PopperController.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import * as PopperJS from 'popper.js';
+import { Themes } from './Popper';
 
 type PopperContent = string | (() => JSX.Element);
 
@@ -9,6 +10,7 @@ export interface UsingPopperProps {
   content: PopperContent;
   children: JSX.Element;
   renderContent?: (content: PopperContent) => JSX.Element;
+  theme?: Themes;
 }
 
 type PopperControllerRenderProp = (
@@ -19,6 +21,7 @@ type PopperControllerRenderProp = (
     placement: PopperJS.Placement;
     content: string | ((props: any) => JSX.Element);
     renderContent: (content: any) => any;
+    theme?: Themes;
   }
 ) => JSX.Element;
 
@@ -27,6 +30,7 @@ interface Props {
   content: PopperContent;
   className?: string;
   children: PopperControllerRenderProp;
+  theme?: Themes;
 }
 
 interface State {
@@ -79,7 +83,7 @@ class PopperController extends React.Component<Props, State> {
   }
 
   render() {
-    const { children, content } = this.props;
+    const { children, content, theme } = this.props;
     const { show, placement } = this.state;
 
     return children(this.showPopper, this.hidePopper, {
@@ -87,6 +91,7 @@ class PopperController extends React.Component<Props, State> {
       placement,
       content,
       renderContent: this.renderContent,
+      theme,
     });
   }
 }

packages/grafana-ui/src/components/Tooltip/_Tooltip.scss

@@ -8,7 +8,22 @@ $popper-margin-from-ref: 5px;
   text-align: center;
 }
 
-.popper .popper__arrow {
+.popper__background {
+  background: $tooltipBackground;
+  border-radius: $border-radius;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  padding: 10px;
+
+  // Themes
+  &.popper__background--error {
+    background: $tooltipBackgroundError;
+    .popper__arrow {
+      border-color: $tooltipBackgroundError;
+    }
+  }
+}
+
+.popper__arrow {
   width: 0;
   height: 0;
   border-style: solid;
@@ -16,17 +31,10 @@ $popper-margin-from-ref: 5px;
   margin: 0px;
 }
 
-.popper .popper__arrow {
+.popper__arrow {
   border-color: $tooltipBackground;
 }
 
-.popper__background {
-  background: $tooltipBackground;
-  border-radius: $border-radius;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-  padding: 10px;
-}
-
 // Top
 .popper[data-placement^='top'] {
   padding-bottom: $popper-margin-from-ref;

packages/grafana-ui/src/visualizations/Graph/Graph.tsx

@@ -98,6 +98,7 @@ export class Graph extends PureComponent<GraphProps> {
       $.plot(this.element, timeSeries, flotOptions);
     } catch (err) {
       console.log('Graph rendering error', err, flotOptions, timeSeries);
+      throw new Error('Error rendering panel');
     }
   }