Merge branch 'master' into cli/watch-sass-var

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

@@ -69,8 +69,8 @@ export class AxisSelector extends React.PureComponent<AxisSelectorProps, AxisSel
   }
 
   render() {
-    const leftButtonClass = this.state.yaxis === 1 ? 'btn-success' : 'btn-inverse';
-    const rightButtonClass = this.state.yaxis === 2 ? 'btn-success' : 'btn-inverse';
+    const leftButtonClass = this.state.yaxis === 1 ? 'btn-primary' : 'btn-inverse';
+    const rightButtonClass = this.state.yaxis === 2 ? 'btn-primary' : 'btn-inverse';
 
     return (
       <div className="p-b-1">

packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss

@@ -29,14 +29,14 @@
 
   &:hover {
     .panel-options-group__add-circle {
-      background-color: $btn-success-bg;
+      background-color: $btn-primary-bg;
       color: $white;
     }
   }
 }
 
 .panel-options-group__add-circle {
-  @include gradientBar($btn-success-bg, $btn-success-bg-hl);
+  @include gradientBar($btn-success-bg, $btn-success-bg-hl, #fff);
 
   border-radius: 50px;
   width: 20px;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ChangeEvent } from 'react';
 import { shallow } from 'enzyme';
 
 import { ThresholdsEditor, Props } from './ThresholdsEditor';
@@ -118,7 +118,7 @@ describe('change threshold value', () => {
     ];
     const instance = setup({ thresholds });
 
-    const mockEvent = { target: { value: 12 } };
+    const mockEvent = ({ target: { value: '12' } } as any) as ChangeEvent<HTMLInputElement>;
 
     instance.onChangeThresholdValue(mockEvent, thresholds[0]);
 
@@ -137,7 +137,7 @@ describe('change threshold value', () => {
       thresholds,
     };
 
-    const mockEvent = { target: { value: 78 } };
+    const mockEvent = ({ target: { value: '78' } } as any) as ChangeEvent<HTMLInputElement>;
 
     instance.onChangeThresholdValue(mockEvent, thresholds[1]);
 

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

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, ChangeEvent } from 'react';
 import { Threshold } from '../../types';
 import { ColorPicker } from '../ColorPicker/ColorPicker';
 import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
@@ -94,14 +94,15 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
     );
   };
 
-  onChangeThresholdValue = (event: any, threshold: Threshold) => {
+  onChangeThresholdValue = (event: ChangeEvent<HTMLInputElement>, threshold: Threshold) => {
     if (threshold.index === 0) {
       return;
     }
 
     const { thresholds } = this.state;
-    const parsedValue = parseInt(event.target.value, 10);
-    const value = isNaN(parsedValue) ? null : parsedValue;
+    const cleanValue = event.target.value.replace(/,/g, '.');
+    const parsedValue = parseFloat(cleanValue);
+    const value = isNaN(parsedValue) ? '' : parsedValue;
 
     const newThresholds = thresholds.map(t => {
       if (t === threshold && t.index !== 0) {
@@ -164,16 +165,14 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
         <div className="thresholds-row-input-inner-color">
           {threshold.color && (
             <div className="thresholds-row-input-inner-color-colorpicker">
-              <ColorPicker
-                color={threshold.color}
-                onChange={color => this.onChangeThresholdColor(threshold, color)}
-              />
+              <ColorPicker color={threshold.color} onChange={color => this.onChangeThresholdColor(threshold, color)} />
             </div>
           )}
         </div>
         <div className="thresholds-row-input-inner-value">
           <input
-            type="text"
+            type="number"
+            step="0.0001"
             onChange={event => this.onChangeThresholdValue(event, threshold)}
             value={value}
             onBlur={this.onBlur}

packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss

@@ -21,7 +21,7 @@
 }
 
 .thresholds-row-add-button {
-  @include buttonBackground($btn-success-bg, $btn-success-bg-hl);
+  @include buttonBackground($btn-success-bg, $btn-success-bg-hl, #fff);
 
   align-self: center;
   margin-right: 5px;

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

@@ -31,7 +31,7 @@ $popper-margin-from-ref: 5px;
 
   // Themes
   &.popper__background--error {
-    @include popper-theme($tooltipBackgroundError, $tooltipBackgroundError);
+    @include popper-theme($tooltipBackgroundError, $white);
   }
 
   &.popper__background--info {

packages/grafana-ui/src/utils/namedColorsPalette.test.ts

@@ -44,8 +44,8 @@ describe('colors', () => {
   });
 
   describe('getColorFromHexRgbOrName', () => {
-    it('returns undefined for unknown color', () => {
-      expect(() => getColorFromHexRgbOrName('aruba-sunshine')).toThrow();
+    it('returns black for unknown color', () => {
+      expect(getColorFromHexRgbOrName('aruba-sunshine')).toBe('#000000');
     });
 
     it('returns dark hex variant for known color if theme not specified', () => {
@@ -64,5 +64,9 @@ describe('colors', () => {
       expect(getColorFromHexRgbOrName('rgb(0,0,0)')).toBe('rgb(0,0,0)');
       expect(getColorFromHexRgbOrName('rgba(0,0,0,1)')).toBe('rgba(0,0,0,1)');
     });
+
+    it('returns hex for named color that is not a part of named colors palette', () => {
+      expect(getColorFromHexRgbOrName('lime')).toBe('#00ff00');
+    });
   });
 });

packages/grafana-ui/src/utils/namedColorsPalette.ts

@@ -1,5 +1,6 @@
 import { flatten } from 'lodash';
 import { GrafanaThemeType } from '../types';
+import tinycolor from 'tinycolor2';
 
 type Hue = 'green' | 'yellow' | 'red' | 'blue' | 'orange' | 'purple';
 
@@ -69,7 +70,9 @@ export const getColorDefinitionByName = (name: Color): ColorDefinition => {
 };
 
 export const getColorDefinition = (hex: string, theme: GrafanaThemeType): ColorDefinition | undefined => {
-  return flatten(Array.from(getNamedColorPalette().values())).filter(definition => definition.variants[theme] === hex)[0];
+  return flatten(Array.from(getNamedColorPalette().values())).filter(
+    definition => definition.variants[theme] === hex
+  )[0];
 };
 
 const isHex = (color: string) => {
@@ -94,7 +97,9 @@ export const getColorName = (color?: string, theme?: GrafanaThemeType): Color |
 };
 
 export const getColorByName = (colorName: string) => {
-  const definition = flatten(Array.from(getNamedColorPalette().values())).filter(definition => definition.name === colorName);
+  const definition = flatten(Array.from(getNamedColorPalette().values())).filter(
+    definition => definition.name === colorName
+  );
   return definition.length > 0 ? definition[0] : undefined;
 };
 
@@ -106,7 +111,7 @@ export const getColorFromHexRgbOrName = (color: string, theme?: GrafanaThemeType
   const colorDefinition = getColorByName(color);
 
   if (!colorDefinition) {
-    throw new Error('Unknown color');
+    return new tinycolor(color).toHexString();
   }
 
   return theme ? colorDefinition.variants[theme] : colorDefinition.variants.dark;