Moved the rest of Threshold dependencies to ui/components

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

@@ -1,13 +1,12 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { PanelOptionsProps } from '@grafana/ui';
+import { BasicGaugeColor, GaugeOptions, PanelOptionsProps } from '@grafana/ui';
+
 import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions';
-import { Options } from 'app/plugins/panel/gauge/types';
-import { BasicGaugeColor } from 'app/types';
 import { ThresholdsEditor } from './ThresholdsEditor';
 
 const setup = (propOverrides?: object) => {
-  const props: PanelOptionsProps<Options> = {
+  const props: PanelOptionsProps<GaugeOptions> = {
     onChange: jest.fn(),
     options: {
       ...defaultProps.options,

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

@@ -1,26 +1,20 @@
 import React, { PureComponent } from 'react';
-import tinycolor from 'tinycolor2';
+import tinycolor, { ColorInput } from 'tinycolor2';
-import { ColorPicker } from '@grafana/ui';
+import { BasicGaugeColor, ColorPicker, GaugeOptions, PanelOptionsProps, Threshold } from '@grafana/ui';
-import { BasicGaugeColor } from 'app/types';
-import { PanelOptionsProps, Threshold } from '@grafana/ui';
-import { Options } from 'app/plugins/panel/gauge/types';
 
 interface State {
   thresholds: Threshold[];
   baseColor: string;
 }
 
-export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>, State> {
+export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>, State> {
-  constructor(props) {
+  constructor(props: PanelOptionsProps<GaugeOptions>) {
     super(props);
 
-    this.state = {
+    this.state = { thresholds: props.options.thresholds, baseColor: props.options.baseColor };
-      thresholds: props.options.thresholds,
-      baseColor: props.options.baseColor,
-    };
   }
 
-  onAddThreshold = index => {
+  onAddThreshold = (index: number) => {
     const { maxValue, minValue } = this.props.options;
     const { thresholds } = this.state;
 
@@ -48,27 +42,25 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
     if (index === 0 && thresholds.length === 0) {
       color = tinycolor.mix(BasicGaugeColor.Green, BasicGaugeColor.Red, 50).toRgbString();
     } else {
-      color = tinycolor.mix(thresholds[index - 1].color, BasicGaugeColor.Red, 50).toRgbString();
+      color = tinycolor.mix(thresholds[index - 1].color as ColorInput, BasicGaugeColor.Red, 50).toRgbString();
     }
 
     this.setState(
       {
-        thresholds: this.sortThresholds([...newThresholds, { index: index, value: value, color: color }]),
+        thresholds: this.sortThresholds([...newThresholds, { index, value: value as number, color }]),
       },
       () => this.updateGauge()
     );
   };
 
-  onRemoveThreshold = threshold => {
+  onRemoveThreshold = (threshold: Threshold) => {
     this.setState(
-      prevState => ({
+      prevState => ({ thresholds: prevState.thresholds.filter(t => t !== threshold) }),
-        thresholds: prevState.thresholds.filter(t => t !== threshold),
-      }),
       () => this.updateGauge()
     );
   };
 
-  onChangeThresholdValue = (event, threshold) => {
+  onChangeThresholdValue = (event: any, threshold: Threshold) => {
     const { thresholds } = this.state;
 
     const newThresholds = thresholds.map(t => {
@@ -79,12 +71,10 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
       return t;
     });
 
-    this.setState({
+    this.setState({ thresholds: newThresholds });
-      thresholds: newThresholds,
-    });
   };
 
-  onChangeThresholdColor = (threshold, color) => {
+  onChangeThresholdColor = (threshold: Threshold, color: string) => {
     const { thresholds } = this.state;
 
     const newThresholds = thresholds.map(t => {
@@ -103,11 +93,9 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
     );
   };
 
-  onChangeBaseColor = color => this.props.onChange({ ...this.props.options, baseColor: color });
+  onChangeBaseColor = (color: string) => this.props.onChange({ ...this.props.options, baseColor: color });
   onBlur = () => {
-    this.setState(prevState => ({
+    this.setState(prevState => ({ thresholds: this.sortThresholds(prevState.thresholds) }));
-      thresholds: this.sortThresholds(prevState.thresholds),
-    }));
 
     this.updateGauge();
   };
@@ -116,7 +104,7 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
     this.props.onChange({ ...this.props.options, thresholds: this.state.thresholds });
   };
 
-  sortThresholds = thresholds => {
+  sortThresholds = (thresholds: Threshold[]) => {
     return thresholds.sort((t1, t2) => {
       return t2.value - t1.value;
     });
@@ -161,20 +149,8 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
     return thresholds.map((t, i) => {
       return (
         <div key={`${t.value}-${i}`} className="indicator-section">
-          <div
+          <div onClick={() => this.onAddThreshold(t.index + 1)} style={{ height: '50%', backgroundColor: t.color }} />
-            onClick={() => this.onAddThreshold(t.index + 1)}
+          <div onClick={() => this.onAddThreshold(t.index)} style={{ height: '50%', backgroundColor: t.color }} />
-            style={{
-              height: '50%',
-              backgroundColor: t.color,
-            }}
-          />
-          <div
-            onClick={() => this.onAddThreshold(t.index)}
-            style={{
-              height: '50%',
-              backgroundColor: t.color,
-            }}
-          />
         </div>
       );
     });

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

@@ -1,6 +1,6 @@
-import { RangeMap, ValueMap, Threshold } from 'app/types';
+import { RangeMap, Threshold, ValueMap } from '@grafana/ui';
 
-export interface Options {
+export interface GaugeOptions {
   baseColor: string;
   decimals: number;
   mappings: Array<RangeMap | ValueMap>;

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

@@ -1,3 +1,4 @@
 export * from './series';
 export * from './time';
 export * from './panel';
+export * from './gauge';

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

@@ -35,3 +35,29 @@ export interface Threshold {
   value: number;
   color?: string;
 }
+
+export enum BasicGaugeColor {
+  Green = '#299c46',
+  Red = '#d44a3a',
+}
+
+export enum MappingType {
+  ValueToText = 1,
+  RangeToText = 2,
+}
+
+interface BaseMap {
+  id: number;
+  operator: string;
+  text: string;
+  type: MappingType;
+}
+
+export interface ValueMap extends BaseMap {
+  value: string;
+}
+
+export interface RangeMap extends BaseMap {
+  from: string;
+  to: string;
+}

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

@@ -1,10 +1,10 @@
 import React, { PureComponent } from 'react';
+import { GaugeOptions, PanelOptionsProps } from '@grafana/ui';
+
 import { Switch } from 'app/core/components/Switch/Switch';
 import { Label } from '../../../core/components/Label/Label';
-import { PanelOptionsProps } from '@grafana/ui';
-import { Options } from './types';
 
-export default class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> {
+export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>> {
   onToggleThresholdLabels = () =>
     this.props.onChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
 

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

@@ -1,10 +1,10 @@
 import React, { PureComponent } from 'react';
-import { PanelProps, NullValueMode } from '@grafana/ui';
+import { GaugeOptions, PanelProps, NullValueMode } from '@grafana/ui';
+
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
 import Gauge from 'app/viz/Gauge';
-import { Options } from './types';
 
-interface Props extends PanelProps<Options> {}
+interface Props extends PanelProps<GaugeOptions> {}
 
 export class GaugePanel extends PureComponent<Props> {
   render() {

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

@@ -1,10 +1,9 @@
 import React, { PureComponent } from 'react';
+import { BasicGaugeColor, GaugeOptions, PanelOptionsProps, ThresholdsEditor } from '@grafana/ui';
+
 import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
-import { BasicGaugeColor } from 'app/types';
-import { PanelOptionsProps, ThresholdsEditor } from '@grafana/ui';
 import ValueMappings from 'app/plugins/panel/gauge/ValueMappings';
-import { Options } from './types';
+import GaugeOptionsEditor from './GaugeOptionsEditor';
-import GaugeOptions from './GaugeOptions';
 
 export const defaultProps = {
   options: {
@@ -23,7 +22,7 @@ export const defaultProps = {
   },
 };
 
-export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<Options>> {
+export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<GaugeOptions>> {
   static defaultProps = defaultProps;
 
   render() {
@@ -32,7 +31,7 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<O
       <>
         <div className="form-section">
           <ValueOptions onChange={onChange} options={options} />
-          <GaugeOptions onChange={onChange} options={options} />
+          <GaugeOptionsEditor onChange={onChange} options={options} />
           <ThresholdsEditor onChange={onChange} options={options} />
         </div>
 

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

@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react';
+import { MappingType, RangeMap, ValueMap } from '@grafana/ui';
+
 import { Label } from 'app/core/components/Label/Label';
 import { Select } from 'app/core/components/Select/Select';
-import { MappingType, RangeMap, ValueMap } from 'app/types';
 
 interface Props {
   mapping: ValueMap | RangeMap;

public/app/plugins/panel/gauge/ValueMappings.test.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { GaugeOptions, MappingType, PanelOptionsProps } from '@grafana/ui';
+
 import ValueMappings from './ValueMappings';
-import { MappingType } from 'app/types';
-import { PanelOptionsProps } from '@grafana/ui';
-import { Options } from './types';
 import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions';
 
 const setup = (propOverrides?: object) => {
-  const props: PanelOptionsProps<Options> = {
+  const props: PanelOptionsProps<GaugeOptions> = {
     onChange: jest.fn(),
     options: {
       ...defaultProps.options,

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

@@ -1,15 +1,14 @@
 import React, { PureComponent } from 'react';
+import { GaugeOptions, PanelOptionsProps, MappingType, RangeMap, ValueMap } from '@grafana/ui';
+
 import MappingRow from './MappingRow';
-import { MappingType, RangeMap, ValueMap } from 'app/types';
-import { PanelOptionsProps } from '@grafana/ui';
-import { Options } from './types';
 
 interface State {
   mappings: Array<ValueMap | RangeMap>;
   nextIdToAdd: number;
 }
 
-export default class ValueMappings extends PureComponent<PanelOptionsProps<Options>, State> {
+export default class ValueMappings extends PureComponent<PanelOptionsProps<GaugeOptions>, State> {
   constructor(props) {
     super(props);
 

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

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react';
+import { GaugeOptions, PanelOptionsProps } from '@grafana/ui';
+
 import { Label } from 'app/core/components/Label/Label';
 import Select from 'app/core/components/Select/Select';
 import UnitPicker from 'app/core/components/Select/UnitPicker';
-import { PanelOptionsProps } from '@grafana/ui';
-import { Options } from './types';
 
 const statOptions = [
   { value: 'min', label: 'Min' },
@@ -21,7 +21,7 @@ const statOptions = [
 
 const labelWidth = 6;
 
-export default class ValueOptions extends PureComponent<PanelOptionsProps<Options>> {
+export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeOptions>> {
   onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value });
 
   onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value });

public/app/types/index.ts

@@ -9,7 +9,6 @@ import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
 import { Invitee, OrgUser, User, UsersState, UserState } from './user';
 import { DataSource, DataSourceSelectItem, DataSourcesState } from './datasources';
 import { DataQuery, DataQueryResponse, DataQueryOptions } from './series';
-import { BasicGaugeColor, MappingType, RangeMap, ValueMap } from './panel';
 import { PluginDashboard, PluginMeta, Plugin, PanelPlugin, PluginsState } from './plugins';
 import { Organization, OrganizationState } from './organization';
 import {
@@ -20,7 +19,6 @@ import {
 } from './appNotifications';
 import { DashboardSearchHit } from './search';
 import { ValidationEvents, ValidationRule } from './form';
-import { Threshold } from '@grafana/ui';
 export {
   Team,
   TeamsState,
@@ -70,13 +68,8 @@ export {
   AppNotificationTimeout,
   DashboardSearchHit,
   UserState,
-  Threshold,
   ValidationEvents,
   ValidationRule,
-  ValueMap,
-  RangeMap,
-  MappingType,
-  BasicGaugeColor,
 };
 
 export interface StoreState {

public/app/types/panel.ts

@@ -1,25 +0,0 @@
-export enum MappingType {
-  ValueToText = 1,
-  RangeToText = 2,
-}
-
-export enum BasicGaugeColor {
-  Green = '#299c46',
-  Red = '#d44a3a',
-}
-
-interface BaseMap {
-  id: number;
-  operator: string;
-  text: string;
-  type: MappingType;
-}
-
-export interface ValueMap extends BaseMap {
-  value: string;
-}
-
-export interface RangeMap extends BaseMap {
-  from: string;
-  to: string;
-}

public/app/viz/Gauge.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { BasicGaugeColor, TimeSeriesVMs } from '@grafana/ui';
+
 import { Gauge, Props } from './Gauge';
-import { BasicGaugeColor } from '../types';
-import { TimeSeriesVMs } from '@grafana/ui';
 
 jest.mock('jquery', () => ({
   plot: jest.fn(),

public/app/viz/Gauge.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import $ from 'jquery';
-import { BasicGaugeColor, MappingType, RangeMap, Threshold, ValueMap } from 'app/types';
+import { BasicGaugeColor, Threshold, TimeSeriesVMs, RangeMap, ValueMap, MappingType } from '@grafana/ui';
-import { TimeSeriesVMs } from '@grafana/ui';
+
 import config from '../core/config';
 import kbn from '../core/utils/kbn';