Moved Thresholds and styles to grafana/ui/components

packages/grafana-ui/package.json

@@ -23,7 +23,8 @@
     "react-highlight-words": "0.11.0",
     "react-popper": "^1.3.0",
     "react-transition-group": "^2.2.1",
-    "react-virtualized": "^9.21.0"
+    "react-virtualized": "^9.21.0",
+    "tinycolor2": "^1.4.1"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.6",

public/app/plugins/panel/gauge/Threshold.test.tsx → packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx

 import React from 'react';
 import { shallow } from 'enzyme';
-import Thresholds from './Thresholds';
-import { defaultProps } from './GaugePanelOptions';
-import { BasicGaugeColor } from 'app/types';
 import { PanelOptionsProps } from '@grafana/ui';
-import { Options } from './types';
+import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions';
+import { Options } from 'app/plugins/panel/gauge/types';
+import { BasicGaugeColor } from 'app/types';
+import { Thresholds } from './Thresholds';
 
 const setup = (propOverrides?: object) => {
   const props: PanelOptionsProps<Options> = {

public/app/plugins/panel/gauge/Thresholds.tsx → packages/grafana-ui/src/components/Thresholds/Thresholds.tsx

 import React, { PureComponent } from 'react';
 import tinycolor from 'tinycolor2';
 import { ColorPicker } from 'app/core/components/colorpicker/ColorPicker';
-import { BasicGaugeColor, Threshold } from 'app/types';
-import { PanelOptionsProps } from '@grafana/ui';
-import { Options } from './types';
+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 default class Thresholds extends PureComponent<PanelOptionsProps<Options>, State> {
+export class Thresholds extends PureComponent<PanelOptionsProps<Options>, State> {
   constructor(props) {
     super(props);
 

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

 @import 'CustomScrollbar/CustomScrollbar';
 @import 'DeleteButton/DeleteButton';
+@import 'Thresholds/Thresholds';
 @import 'Tooltip/Tooltip';

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

@@ -2,3 +2,4 @@ export { DeleteButton } from './DeleteButton/DeleteButton';
 export { Tooltip } from './Tooltip/Tooltip';
 export { Portal } from './Portal/Portal';
 export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar';
+export { Thresholds } from './Thresholds/Thresholds';

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

@@ -29,3 +29,9 @@ export interface PanelMenuItem {
   shortcut?: string;
   subMenu?: PanelMenuItem[];
 }
+
+export interface Threshold {
+  index: number;
+  value: number;
+  color?: string;
+}

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

 import React, { PureComponent } from 'react';
 import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
-import Thresholds from 'app/plugins/panel/gauge/Thresholds';
 import { BasicGaugeColor } from 'app/types';
-import { PanelOptionsProps } from '@grafana/ui';
+import { PanelOptionsProps, Thresholds } from '@grafana/ui';
 import ValueMappings from 'app/plugins/panel/gauge/ValueMappings';
 import { Options } from './types';
 import GaugeOptions from './GaugeOptions';

public/app/types/index.ts

@@ -9,7 +9,7 @@ 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, Threshold, ValueMap } from './panel';
+import { BasicGaugeColor, MappingType, RangeMap, ValueMap } from './panel';
 import { PluginDashboard, PluginMeta, Plugin, PanelPlugin, PluginsState } from './plugins';
 import { Organization, OrganizationState } from './organization';
 import {
@@ -20,6 +20,7 @@ import {
 } from './appNotifications';
 import { DashboardSearchHit } from './search';
 import { ValidationEvents, ValidationRule } from './form';
+import { Threshold } from '@grafana/ui';
 export {
   Team,
   TeamsState,

public/app/types/panel.ts

-export interface Threshold {
-  index: number;
-  value: number;
-  color?: string;
-}
-
 export enum MappingType {
   ValueToText = 1,
   RangeToText = 2,

public/sass/_grafana.scss

@@ -102,7 +102,6 @@
 @import 'components/toolbar';
 @import 'components/add_data_source.scss';
 @import 'components/page_loader';
-@import 'components/thresholds';
 @import 'components/toggle_button_group';
 @import 'components/value-mappings';
 @import 'components/popover-box';