Merge branch 'cli/watch-sass-var' of github.com:grafana/grafana into cli/watch-sass-var

docs/sources/auth/generic-oauth.md

@@ -113,7 +113,7 @@ allowed_organizations =
     allowed_organizations =
     ```
 
-### Set up OAuth2 with Auth0
+## Set up OAuth2 with Auth0
 
 1.  Create a new Client in Auth0
     - Name: Grafana
@@ -139,7 +139,7 @@ allowed_organizations =
     api_url = https://<domain>/userinfo
     ```
 
-### Set up OAuth2 with Azure Active Directory
+## Set up OAuth2 with Azure Active Directory
 
 1.  Log in to portal.azure.com and click "Azure Active Directory" in the side menu, then click the "Properties" sub-menu item.
 

packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx

@@ -1,6 +1,6 @@
 import React, { Component, createRef } from 'react';
-import PopperController from '../Tooltip/PopperController';
-import Popper from '../Tooltip/Popper';
+import { PopperController } from '../Tooltip/PopperController';
+import { Popper } from '../Tooltip/Popper';
 import { ColorPickerPopover } from './ColorPickerPopover';
 import { Themeable } from '../../types';
 import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';

packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx

@@ -4,7 +4,7 @@ import { getColorName, getColorFromHexRgbOrName } from '../../utils/namedColorsP
 import { ColorPickerProps, warnAboutColorPickerPropsDeprecation } from './ColorPicker';
 import { PopperContentProps } from '../Tooltip/PopperController';
 import SpectrumPalette from './SpectrumPalette';
-import { GrafanaThemeType } from '@grafana/ui';
+import { GrafanaThemeType } from '../../types/theme';
 
 export interface Props<T> extends ColorPickerProps, PopperContentProps {
   customPickers?: T;

packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx

@@ -1,9 +1,10 @@
 import React, { PureComponent } from 'react';
 import _ from 'lodash';
+import classNames from 'classnames';
 import Scrollbars from 'react-custom-scrollbars';
 
 interface Props {
-  customClassName?: string;
+  className?: string;
   autoHide?: boolean;
   autoHideTimeout?: number;
   autoHideDuration?: number;
@@ -21,7 +22,6 @@ interface Props {
  */
 export class CustomScrollbar extends PureComponent<Props> {
   static defaultProps: Partial<Props> = {
-    customClassName: 'custom-scrollbars',
     autoHide: false,
     autoHideTimeout: 200,
     autoHideDuration: 200,
@@ -60,7 +60,7 @@ export class CustomScrollbar extends PureComponent<Props> {
 
   render() {
     const {
-      customClassName,
+      className,
       children,
       autoHeightMax,
       autoHeightMin,
@@ -75,7 +75,7 @@ export class CustomScrollbar extends PureComponent<Props> {
     return (
       <Scrollbars
         ref={this.ref}
-        className={customClassName}
+        className={classNames('custom-scrollbar', className)}
         onScroll={setScrollTop}
         autoHeight={true}
         autoHide={autoHide}

packages/grafana-ui/src/components/CustomScrollbar/_CustomScrollbar.scss

@@ -1,4 +1,4 @@
-.custom-scrollbars {
+.custom-scrollbar {
   // Fix for Firefox. For some reason sometimes .view container gets a height of its content, but in order to
   // make scroll working it should fit outer container size (scroll appears only when inner container size is
   // greater than outer one).
@@ -37,4 +37,11 @@
     @include gradient-horizontal($scrollbarBackground, $scrollbarBackground2);
     border-radius: 6px;
   }
+
+  // page scrollbar should stick to left side to aid hitting it
+  &--page {
+    .track-vertical {
+      right: 0;
+    }
+  }
 }

packages/grafana-ui/src/components/DeleteButton/DeleteButton.story.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import { storiesOf } from '@storybook/react';
-import { DeleteButton } from '@grafana/ui';
+import { DeleteButton } from './DeleteButton';
 
 const CenteredStory: FunctionComponent<{}> = ({ children }) => {
   return (

packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx

@@ -3,7 +3,8 @@ import { Threshold } from '../../types';
 import { ColorPicker } from '..';
 import { PanelOptionsGroup } from '..';
 import { colors } from '../../utils';
-import { getColorFromHexRgbOrName, ThemeContext } from '@grafana/ui';
+import { ThemeContext } from '../../themes/ThemeContext';
+import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
 
 export interface Props {
   thresholds: Threshold[];

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

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import * as PopperJS from 'popper.js';
 import { Manager, Popper as ReactPopper, PopperArrowProps } from 'react-popper';
-import { Portal } from '@grafana/ui';
+import { Portal } from '../Portal/Portal';
 import Transition from 'react-transition-group/Transition';
 import { PopperContent } from './PopperController';
 
@@ -53,7 +53,7 @@ class Popper extends PureComponent<Props> {
                   // TODO: move modifiers config to popper controller
                   modifiers={{ preventOverflow: { enabled: true, boundariesElement: 'window' } }}
                 >
-                  {({ ref, style, placement, arrowProps }) => {
+                  {({ ref, style, placement, arrowProps, scheduleUpdate }) => {
                     return (
                       <div
                         onMouseEnter={onMouseEnter}
@@ -68,7 +68,12 @@ class Popper extends PureComponent<Props> {
                         className={`${wrapperClassName}`}
                       >
                         <div className={className}>
-                          {typeof content === 'string' ? content : React.cloneElement(content)}
+                          {typeof content === 'string' && content}
+                          {React.isValidElement(content) && React.cloneElement(content)}
+                          {typeof content === 'function' &&
+                            content({
+                              updatePopperPosition: scheduleUpdate,
+                            })}
                           {renderArrow &&
                             renderArrow({
                               arrowProps,
@@ -88,4 +93,4 @@ class Popper extends PureComponent<Props> {
   }
 }
 
-export default Popper;
+export { Popper };

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

@@ -7,7 +7,7 @@ export interface PopperContentProps {
   updatePopperPosition?: () => void;
 }
 
-export type PopperContent<T extends PopperContentProps> = string | React.ReactElement<T>;
+export type PopperContent<T extends PopperContentProps> = string | React.ReactElement<T> | ((props: T) => JSX.Element);
 
 export interface UsingPopperProps {
   show?: boolean;
@@ -101,4 +101,4 @@ class PopperController extends React.Component<Props, State> {
   }
 }
 
-export default PopperController;
+export { PopperController };

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

@@ -1,7 +1,7 @@
 import React, { createRef } from 'react';
 import * as PopperJS from 'popper.js';
-import Popper from './Popper';
-import PopperController, { UsingPopperProps } from './PopperController';
+import { Popper } from './Popper';
+import { PopperController, UsingPopperProps } from './PopperController';
 
 interface TooltipProps extends UsingPopperProps {
   theme?: 'info' | 'error';

packages/grafana-ui/src/components/index.ts

@@ -1,5 +1,7 @@
 export { DeleteButton } from './DeleteButton/DeleteButton';
 export { Tooltip } from './Tooltip/Tooltip';
+export { PopperController } from './Tooltip/PopperController';
+export { Popper } from './Tooltip/Popper';
 export { Portal } from './Portal/Portal';
 export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar';
 

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -150,9 +150,9 @@ $list-item-shadow: $card-shadow;
 $empty-list-cta-bg: $gray-blue;
 
 // Scrollbars
-$scrollbarBackground: $dark-9;
-$scrollbarBackground2: $dark-9;
-$scrollbarBorder: $dark-10;
+$scrollbarBackground: #404357;
+$scrollbarBackground2: $dark-10;
+$scrollbarBorder: black;
 
 // Tables
 // -------------------------

packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts

@@ -138,7 +138,7 @@ $empty-list-cta-bg: $gray-6;
 // Scrollbars
 $scrollbarBackground: $gray-4;
 $scrollbarBackground2: $gray-4;
-$scrollbarBorder: $gray-3;
+$scrollbarBorder: $gray-7;
 
 // Tables
 // -------------------------

public/app/core/angular_wrappers.ts

@@ -10,10 +10,12 @@ import { SideMenu } from './components/sidemenu/SideMenu';
 import { MetricSelect } from './components/Select/MetricSelect';
 import AppNotificationList from './components/AppNotifications/AppNotificationList';
 import { ColorPicker, SeriesColorPickerPopoverWithTheme } from '@grafana/ui';
+import { FunctionEditor } from 'app/plugins/datasource/graphite/FunctionEditor';
 
 export function registerAngularDirectives() {
   react2AngularDirective('passwordStrength', PasswordStrength, ['password']);
   react2AngularDirective('sidemenu', SideMenu, []);
+  react2AngularDirective('functionEditor', FunctionEditor, ['func', 'onRemove', 'onMoveLeft', 'onMoveRight']);
   react2AngularDirective('appNotificationsList', AppNotificationList, []);
   react2AngularDirective('pageHeader', PageHeader, ['model', 'noTabs']);
   react2AngularDirective('emptyListCta', EmptyListCTA, ['model']);

public/app/core/components/Page/Page.tsx

@@ -48,7 +48,7 @@ class Page extends Component<Props> {
     const { buildInfo } = config;
     return (
       <div className="page-scrollbar-wrapper">
-        <CustomScrollbar autoHeightMin={'100%'}>
+        <CustomScrollbar autoHeightMin={'100%'} className="custom-scrollbar--page">
           <div className="page-scrollbar-content">
             <PageHeader model={navModel} />
             {this.props.children}

public/app/features/explore/Wrapper.tsx

@@ -53,7 +53,7 @@ export class Wrapper extends Component<WrapperProps> {
 
     return (
       <div className="page-scrollbar-wrapper">
-        <CustomScrollbar autoHeightMin={'100%'}>
+        <CustomScrollbar autoHeightMin={'100%'} className="custom-scrollbar--page">
           <div className="explore-wrapper">
             <ErrorBoundary>
               <Explore exploreId={ExploreId.left} urlState={leftState} />

public/app/plugins/datasource/graphite/FunctionEditor.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { PopperController, Popper } from '@grafana/ui';
+import rst2html from 'rst2html';
+import { FunctionDescriptor, FunctionEditorControlsProps, FunctionEditorControls } from './FunctionEditorControls';
+
+interface FunctionEditorProps extends FunctionEditorControlsProps {
+  func: FunctionDescriptor;
+}
+
+interface FunctionEditorState {
+  showingDescription: boolean;
+}
+
+class FunctionEditor extends React.PureComponent<FunctionEditorProps, FunctionEditorState> {
+  private triggerRef = React.createRef<HTMLSpanElement>();
+
+  constructor(props: FunctionEditorProps) {
+    super(props);
+
+    this.state = {
+      showingDescription: false,
+    };
+  }
+
+  renderContent = ({ updatePopperPosition }) => {
+    const {
+      onMoveLeft,
+      onMoveRight,
+      func: {
+        def: { name, description },
+      },
+    } = this.props;
+    const { showingDescription } = this.state;
+
+    if (showingDescription) {
+      return (
+        <div style={{ overflow: 'auto', maxHeight: '30rem', textAlign: 'left', fontWeight: 'normal' }}>
+          <h4 style={{ color: 'white' }}> {name} </h4>
+          <div
+            dangerouslySetInnerHTML={{
+              __html: rst2html(description),
+            }}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <FunctionEditorControls
+        {...this.props}
+        onMoveLeft={() => {
+          onMoveLeft(this.props.func);
+          updatePopperPosition();
+        }}
+        onMoveRight={() => {
+          onMoveRight(this.props.func);
+          updatePopperPosition();
+        }}
+        onDescriptionShow={() => {
+          this.setState({ showingDescription: true }, () => {
+            updatePopperPosition();
+          });
+        }}
+      />
+    );
+  };
+
+  render() {
+    return (
+      <PopperController content={this.renderContent} placement="top" hideAfter={300}>
+        {(showPopper, hidePopper, popperProps) => {
+          return (
+            <>
+              {this.triggerRef && (
+                <Popper
+                  {...popperProps}
+                  referenceElement={this.triggerRef.current}
+                  wrapperClassName="popper"
+                  className="popper__background"
+                  onMouseLeave={() => {
+                    this.setState({ showingDescription: false });
+                    hidePopper();
+                  }}
+                  onMouseEnter={showPopper}
+                  renderArrow={({ arrowProps, placement }) => (
+                    <div className="popper__arrow" data-placement={placement} {...arrowProps} />
+                  )}
+                />
+              )}
+
+              <span
+                ref={this.triggerRef}
+                onClick={popperProps.show ? hidePopper : showPopper}
+                onMouseLeave={() => {
+                  hidePopper();
+                  this.setState({ showingDescription: false });
+                }}
+                style={{ cursor: 'pointer' }}
+              >
+                {this.props.func.def.name}
+              </span>
+            </>
+          );
+        }}
+      </PopperController>
+    );
+  }
+}
+
+export { FunctionEditor };

public/app/plugins/datasource/graphite/FunctionEditorControls.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+export interface FunctionDescriptor {
+  text: string;
+  params: string[];
+  def: {
+    category: string;
+    defaultParams: string[];
+    description?: string;
+    fake: boolean;
+    name: string;
+    params: string[];
+  };
+}
+
+export interface FunctionEditorControlsProps {
+  onMoveLeft: (func: FunctionDescriptor) => void;
+  onMoveRight: (func: FunctionDescriptor) => void;
+  onRemove: (func: FunctionDescriptor) => void;
+}
+
+const FunctionHelpButton = (props: { description: string; name: string; onDescriptionShow: () => void }) => {
+  if (props.description) {
+    return <span className="pointer fa fa-question-circle" onClick={props.onDescriptionShow} />;
+  }
+
+  return (
+    <span
+      className="pointer fa fa-question-circle"
+      onClick={() => {
+        window.open(
+          'http://graphite.readthedocs.org/en/latest/functions.html#graphite.render.functions.' + props.name,
+          '_blank'
+        );
+      }}
+    />
+  );
+};
+
+export const FunctionEditorControls = (
+  props: FunctionEditorControlsProps & {
+    func: FunctionDescriptor;
+    onDescriptionShow: () => void;
+  }
+) => {
+  const { func, onMoveLeft, onMoveRight, onRemove, onDescriptionShow } = props;
+  return (
+    <div
+      style={{
+        display: 'flex',
+        width: '60px',
+        justifyContent: 'space-between',
+      }}
+    >
+      <span className="pointer fa fa-arrow-left" onClick={() => onMoveLeft(func)} />
+      <FunctionHelpButton
+        name={func.def.name}
+        description={func.def.description}
+        onDescriptionShow={onDescriptionShow}
+      />
+      <span className="pointer fa fa-remove" onClick={() => onRemove(func)} />
+      <span className="pointer fa fa-arrow-right" onClick={() => onMoveRight(func)} />
+    </div>
+  );
+};

public/app/plugins/datasource/graphite/func_editor.ts

@@ -1,33 +1,42 @@
 import _ from 'lodash';
 import $ from 'jquery';
-import rst2html from 'rst2html';
 import coreModule from 'app/core/core_module';
 
 /** @ngInject */
 export function graphiteFuncEditor($compile, templateSrv, popoverSrv) {
-  const funcSpanTemplate = '<a ng-click="">{{func.def.name}}</a><span>(</span>';
+  const funcSpanTemplate = `
+    <function-editor
+      func="func"
+      onRemove="ctrl.handleRemoveFunction"
+      onMoveLeft="ctrl.handleMoveLeft"
+      onMoveRight="ctrl.handleMoveRight"
+    /><span>(</span>
+  `;
   const paramTemplate =
     '<input type="text" style="display:none"' + ' class="input-small tight-form-func-param"></input>';
 
-  const funcControlsTemplate = `
-    <div class="tight-form-func-controls">
-      <span class="pointer fa fa-arrow-left"></span>
-      <span class="pointer fa fa-question-circle"></span>
-      <span class="pointer fa fa-remove" ></span>
-      <span class="pointer fa fa-arrow-right"></span>
-    </div>`;
-
   return {
     restrict: 'A',
     link: function postLink($scope, elem) {
       const $funcLink = $(funcSpanTemplate);
-      const $funcControls = $(funcControlsTemplate);
       const ctrl = $scope.ctrl;
       const func = $scope.func;
       let scheduledRelink = false;
       let paramCountAtLink = 0;
       let cancelBlur = null;
 
+      ctrl.handleRemoveFunction = func => {
+        ctrl.removeFunction(func);
+      };
+
+      ctrl.handleMoveLeft = func => {
+        ctrl.moveFunction(func, -1);
+      };
+
+      ctrl.handleMoveRight = func => {
+        ctrl.moveFunction(func, 1);
+      };
+
       function clickFuncParam(this: any, paramIndex) {
         /*jshint validthis:true */
 
@@ -158,24 +167,7 @@ export function graphiteFuncEditor($compile, templateSrv, popoverSrv) {
         };
       }
 
-      function toggleFuncControls() {
-        const targetDiv = elem.closest('.tight-form');
-
-        if (elem.hasClass('show-function-controls')) {
-          elem.removeClass('show-function-controls');
-          targetDiv.removeClass('has-open-function');
-          $funcControls.hide();
-          return;
-        }
-
-        elem.addClass('show-function-controls');
-        targetDiv.addClass('has-open-function');
-
-        $funcControls.show();
-      }
-
       function addElementsAndCompile() {
-        $funcControls.appendTo(elem);
         $funcLink.appendTo(elem);
 
         const defParams = _.clone(func.def.params);
@@ -245,69 +237,10 @@ export function graphiteFuncEditor($compile, templateSrv, popoverSrv) {
         }
       }
 
-      function registerFuncControlsToggle() {
-        $funcLink.click(toggleFuncControls);
-      }
-
-      function registerFuncControlsActions() {
-        $funcControls.click(e => {
-          const $target = $(e.target);
-          if ($target.hasClass('fa-remove')) {
-            toggleFuncControls();
-            $scope.$apply(() => {
-              ctrl.removeFunction($scope.func);
-            });
-            return;
-          }
-
-          if ($target.hasClass('fa-arrow-left')) {
-            $scope.$apply(() => {
-              _.move(ctrl.queryModel.functions, $scope.$index, $scope.$index - 1);
-              ctrl.targetChanged();
-            });
-            return;
-          }
-
-          if ($target.hasClass('fa-arrow-right')) {
-            $scope.$apply(() => {
-              _.move(ctrl.queryModel.functions, $scope.$index, $scope.$index + 1);
-              ctrl.targetChanged();
-            });
-            return;
-          }
-
-          if ($target.hasClass('fa-question-circle')) {
-            const funcDef = ctrl.datasource.getFuncDef(func.def.name);
-            if (funcDef && funcDef.description) {
-              popoverSrv.show({
-                element: e.target,
-                position: 'bottom left',
-                classNames: 'drop-popover drop-function-def',
-                template: `
-                  <div style="overflow:auto;max-height:30rem;">
-                    <h4> ${funcDef.name} </h4>
-                    ${rst2html(funcDef.description)}
-                  </div>`,
-                openOn: 'click',
-              });
-            } else {
-              window.open(
-                'http://graphite.readthedocs.org/en/latest/functions.html#graphite.render.functions.' + func.def.name,
-                '_blank'
-              );
-            }
-            return;
-          }
-        });
-      }
-
       function relink() {
         elem.children().remove();
-
         addElementsAndCompile();
         ifJustAddedFocusFirstParam();
-        registerFuncControlsToggle();
-        registerFuncControlsActions();
       }
 
       relink();

public/app/plugins/datasource/graphite/graphite_query.ts

@@ -154,6 +154,11 @@ export default class GraphiteQuery {
     this.functions = _.without(this.functions, func);
   }
 
+  moveFunction(func, offset) {
+    const index = this.functions.indexOf(func);
+    _.move(this.functions, index, index + offset);
+  }
+
   updateModelTarget(targets) {
     // render query
     if (!this.target.textEditor) {

public/app/plugins/datasource/graphite/query_ctrl.ts

@@ -272,6 +272,11 @@ export class GraphiteQueryCtrl extends QueryCtrl {
     this.targetChanged();
   }
 
+  moveFunction(func, offset) {
+    this.queryModel.moveFunction(func, offset);
+    this.targetChanged();
+  }
+
   addSeriesByTagFunc(tag) {
     const newFunc = this.datasource.createFuncInstance('seriesByTag', {
       withDefaultParams: false,

public/app/plugins/datasource/mysql/mysql_query.ts

@@ -52,7 +52,7 @@ export default class MysqlQuery {
   }
 
   escapeLiteral(value) {
-    return value.replace(/'/g, "''");
+    return String(value).replace(/'/g, "''");
   }
 
   hasTimeGroup() {

public/sass/_variables.dark.generated.scss

@@ -153,9 +153,9 @@ $list-item-shadow: $card-shadow;
 $empty-list-cta-bg: $gray-blue;
 
 // Scrollbars
-$scrollbarBackground: $dark-9;
-$scrollbarBackground2: $dark-9;
-$scrollbarBorder: $dark-10;
+$scrollbarBackground: #404357;
+$scrollbarBackground2: $dark-10;
+$scrollbarBorder: black;
 
 // Tables
 // -------------------------

public/sass/_variables.light.generated.scss

@@ -141,7 +141,7 @@ $empty-list-cta-bg: $gray-6;
 // Scrollbars
 $scrollbarBackground: $gray-4;
 $scrollbarBackground2: $gray-4;
-$scrollbarBorder: $gray-3;
+$scrollbarBorder: $gray-7;
 
 // Tables
 // -------------------------

public/sass/components/_footer.scss

@@ -42,7 +42,7 @@
   display: none;
 }
 
-.is-react .custom-scrollbars .footer {
+.is-react .custom-scrollbar .footer {
   display: block;
 }
 

public/sass/components/_query_editor.scss

@@ -50,7 +50,6 @@ input[type='text'].tight-form-func-param {
 }
 
 .tight-form-func-controls {
-  display: none;
   text-align: center;
 
   .fa-arrow-left {