Enable new color picker in Gauge and Thresholds editor, use ThemeProvider instead of ContextSrv

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

@@ -4,15 +4,15 @@ import $ from 'jquery';
 import {
   ValueMapping,
   Threshold,
-  ThemeName,
   MappingType,
   BasicGaugeColor,
-  ThemeNames,
   ValueMap,
   RangeMap,
 } from '../../types/panel';
 import { TimeSeriesVMs } from '../../types/series';
 import { getValueFormat } from '../../utils/valueFormats/valueFormats';
+import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
+import { GrafanaTheme } from '@grafana/ui/src/types';
 
 type TimeSeriesValue = string | number | null;
 
@@ -31,7 +31,7 @@ export interface Props {
   suffix: string;
   unit: string;
   width: number;
-  theme?: ThemeName;
+  theme?: GrafanaTheme;
 }
 
 export class Gauge extends PureComponent<Props> {
@@ -48,7 +48,7 @@ export class Gauge extends PureComponent<Props> {
     thresholds: [],
     unit: 'none',
     stat: 'avg',
-    theme: ThemeNames.Dark,
+    theme: GrafanaTheme.Dark,
   };
 
   componentDidMount() {
@@ -144,29 +144,29 @@ export class Gauge extends PureComponent<Props> {
   }
 
   getFontColor(value: TimeSeriesValue) {
-    const { thresholds } = this.props;
+    const { thresholds, theme } = this.props;
 
     if (thresholds.length === 1) {
-      return thresholds[0].color;
+      return getColorFromHexRgbOrName(thresholds[0].color, theme);
     }
 
     const atThreshold = thresholds.filter(threshold => (value as number) === threshold.value)[0];
     if (atThreshold) {
-      return atThreshold.color;
+      return getColorFromHexRgbOrName(atThreshold.color, theme);
     }
 
     const belowThreshold = thresholds.filter(threshold => (value as number) > threshold.value);
 
     if (belowThreshold.length > 0) {
       const nearestThreshold = belowThreshold.sort((t1, t2) => t2.value - t1.value)[0];
-      return nearestThreshold.color;
+      return getColorFromHexRgbOrName(nearestThreshold.color, theme);
     }
 
     return BasicGaugeColor.Red;
   }
 
   getFormattedThresholds() {
-    const { maxValue, minValue, thresholds } = this.props;
+    const { maxValue, minValue, thresholds, theme } = this.props;
 
     const thresholdsSortedByIndex = [...thresholds].sort((t1, t2) => t1.index - t2.index);
     const lastThreshold = thresholdsSortedByIndex[thresholdsSortedByIndex.length - 1];
@@ -174,13 +174,13 @@ export class Gauge extends PureComponent<Props> {
     const formattedThresholds = [
       ...thresholdsSortedByIndex.map(threshold => {
         if (threshold.index === 0) {
-          return { value: minValue, color: threshold.color };
+          return { value: minValue, color: getColorFromHexRgbOrName(threshold.color, theme) };
         }
 
         const previousThreshold = thresholdsSortedByIndex[threshold.index - 1];
-        return { value: threshold.value, color: previousThreshold.color };
+        return { value: threshold.value, color: getColorFromHexRgbOrName(previousThreshold.color, theme) };
       }),
-      { value: maxValue, color: lastThreshold.color },
+      { value: maxValue, color: getColorFromHexRgbOrName(lastThreshold.color, theme) },
     ];
 
     return formattedThresholds;
@@ -208,7 +208,7 @@ export class Gauge extends PureComponent<Props> {
     }
 
     const dimension = Math.min(width, height * 1.3);
-    const backgroundColor = theme === ThemeNames.Light ? 'rgb(230,230,230)' : 'rgb(38,38,38)';
+    const backgroundColor = theme === GrafanaTheme.Light ? 'rgb(230,230,230)' : 'rgb(38,38,38)';
     const fontScale = parseInt('80', 10) / 100;
     const fontSize = Math.min(dimension / 5, 100) * fontScale;
     const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;

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

@@ -1,10 +1,11 @@
 import React, { PureComponent } from 'react';
-import { Threshold } from '../../types';
+import { Threshold, Themeable } from '../../types';
 import { ColorPicker } from '../ColorPicker/ColorPicker';
 import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
 import { colors } from '../../utils';
+import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
 
-export interface Props {
+export interface Props extends Themeable {
   thresholds: Threshold[];
   onChange: (thresholds: Threshold[]) => void;
 }
@@ -187,6 +188,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
 
   render() {
     const { thresholds } = this.state;
+    const { theme } = this.props;
 
     return (
       <PanelOptionsGroup title="Thresholds">
@@ -197,7 +199,10 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
                 <div className="thresholds-row-add-button" onClick={() => this.onAddThreshold(threshold.index + 1)}>
                   <i className="fa fa-plus" />
                 </div>
-                <div className="thresholds-row-color-indicator" style={{ backgroundColor: threshold.color }} />
+                <div
+                  className="thresholds-row-color-indicator"
+                  style={{ backgroundColor: getColorFromHexRgbOrName(threshold.color, theme) }}
+                />
                 <div className="thresholds-row-input">{this.renderInput(threshold)}</div>
               </div>
             );

packages/grafana-ui/src/types/panel.ts

@@ -36,7 +36,7 @@ export interface PanelMenuItem {
 export interface Threshold {
   index: number;
   value: number;
-  color?: string;
+  color: string;
 }
 
 export enum BasicGaugeColor {
@@ -66,10 +66,3 @@ export interface RangeMap extends BaseMap {
   from: string;
   to: string;
 }
-
-export type ThemeName = 'dark' | 'light';
-
-export enum ThemeNames {
-  Dark = 'dark',
-  Light = 'light',
-}

public/app/core/services/context_srv.ts

@@ -2,7 +2,6 @@ import config from 'app/core/config';
 import _ from 'lodash';
 import coreModule from 'app/core/core_module';
 import store from 'app/core/store';
-import { ThemeNames, ThemeName } from '@grafana/ui';
 
 export class User {
   isGrafanaAdmin: any;
@@ -64,10 +63,6 @@ export class ContextSrv {
   hasAccessToExplore() {
     return (this.isEditor || config.viewersCanEdit) && config.exploreEnabled;
   }
-
-  getTheme(): ThemeName {
-    return this.user.lightTheme ? ThemeNames.Light : ThemeNames.Dark;
-  }
 }
 
 const contextSrv = new ContextSrv();

public/app/plugins/panel/gauge/GaugePanel.tsx

@@ -2,7 +2,6 @@
 import React, { PureComponent } from 'react';
 
 // Services & Utils
-import { contextSrv } from 'app/core/core';
 import { processTimeSeries } from '@grafana/ui';
 
 // Components
@@ -11,11 +10,11 @@ import { Gauge } from '@grafana/ui';
 // Types
 import { GaugeOptions } from './types';
 import { PanelProps, NullValueMode } from '@grafana/ui/src/types';
+import { ThemeProvider } from 'app/core/utils/ConfigProvider';
 
 interface Props extends PanelProps<GaugeOptions> {}
 
 export class GaugePanel extends PureComponent<Props> {
-
   render() {
     const { timeSeries, width, height, onInterpolate, options } = this.props;
 
@@ -28,15 +27,19 @@ export class GaugePanel extends PureComponent<Props> {
     });
 
     return (
-      <Gauge
-        timeSeries={vmSeries}
-        {...this.props.options}
-        width={width}
-        height={height}
-        prefix={prefix}
-        suffix={suffix}
-        theme={contextSrv.getTheme()}
-      />
+      <ThemeProvider>
+        {(theme) => (
+          <Gauge
+            timeSeries={vmSeries}
+            {...this.props.options}
+            width={width}
+            height={height}
+            prefix={prefix}
+            suffix={suffix}
+            theme={theme}
+          />
+        )}
+      </ThemeProvider>
     );
   }
 }

public/app/plugins/panel/gauge/GaugePanelOptions.tsx

@@ -11,6 +11,7 @@ import {
 import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
 import GaugeOptionsEditor from './GaugeOptionsEditor';
 import { GaugeOptions } from './types';
+import { ThemeProvider } from 'app/core/utils/ConfigProvider';
 
 export const defaultProps = {
   options: {
@@ -46,15 +47,23 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G
   render() {
     const { onChange, options } = this.props;
     return (
-      <>
-        <PanelOptionsGrid>
-          <ValueOptions onChange={onChange} options={options} />
-          <GaugeOptionsEditor onChange={onChange} options={options} />
-          <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
-        </PanelOptionsGrid>
+      <ThemeProvider>
+        {(theme) => (
+          <>
+            <PanelOptionsGrid>
+              <ValueOptions onChange={onChange} options={options} />
+              <GaugeOptionsEditor onChange={onChange} options={options} />
+              <ThresholdsEditor
+                onChange={this.onThresholdsChanged}
+                thresholds={options.thresholds}
+                theme={theme}
+              />
+            </PanelOptionsGrid>
 
-        <ValueMappingsEditor onChange={this.onValueMappingsChanged} valueMappings={options.valueMappings} />
-      </>
+            <ValueMappingsEditor onChange={this.onValueMappingsChanged} valueMappings={options.valueMappings} />
+          </>
+        )}
+      </ThemeProvider>
     );
   }
 }