Chore: Reorg packages (#20111)

Primarily- moving majority of the types and utils from @grafana/ui to @grafana/data

* Move types from grafana-ui to grafana-data

* Move valueFormats to grafana-data

* Move utils from grafana-ui to grafana-data

* Update imports in grafana-ui

* revert data's tsconfig change

* Update imports in grafana-runtime

* Fix import paths in grafana-ui

* Move rxjs to devDeps

* Core import updates batch 1

* Import updates batch 2

* Imports fix batch 3

* Imports fixes batch i don't know

* Fix imorts in grafana-toolkit

* Fix imports after master merge

packages/grafana-data/package.json

@@ -12,6 +12,7 @@
     "url": "http://github.com/grafana/grafana.git"
   },
   "main": "src/index.ts",
+  "types": "src/index.ts",
   "scripts": {
     "tslint": "tslint -c tslint.json --project tsconfig.json",
     "typecheck": "tsc --noEmit",
@@ -37,8 +38,8 @@
     "rollup-plugin-terser": "4.0.4",
     "rollup-plugin-typescript2": "0.19.3",
     "rollup-plugin-visualizer": "0.9.2",
+    "rxjs": "6.4.0",
     "sinon": "1.17.6",
     "typescript": "3.6.3"
-  },
+  }
-  "types": "src/index.ts"
 }

packages/grafana-data/src/field/displayProcessor.test.ts

@@ -1,5 +1,6 @@
-import { MappingType, ValueMapping, DisplayProcessor, DisplayValue } from '@grafana/data';
 import { getDisplayProcessor, getColorFromThreshold } from './displayProcessor';
+import { DisplayProcessor, DisplayValue } from '../types/displayValue';
+import { ValueMapping, MappingType } from '../types/valueMapping';
 
 function assertSame(input: any, processors: DisplayProcessor[], match: DisplayValue) {
   processors.forEach(processor => {

packages/grafana-data/src/field/displayProcessor.ts

@@ -1,21 +1,17 @@
 // Libraries
 import _ from 'lodash';
-import {
-  Threshold,
-  getMappedValue,
-  FieldConfig,
-  DisplayProcessor,
-  DecimalInfo,
-  DisplayValue,
-  DecimalCount,
-} from '@grafana/data';
 
 // Utils
-import { getValueFormat } from './valueFormats/valueFormats';
+import { getColorFromHexRgbOrName } from '../utils/namedColorsPalette';
-import { getColorFromHexRgbOrName } from './namedColorsPalette';
 
 // Types
-import { GrafanaTheme, GrafanaThemeType } from '../types/index';
+import { FieldConfig } from '../types/dataFrame';
+import { GrafanaTheme, GrafanaThemeType } from '../types/theme';
+import { DisplayProcessor, DisplayValue, DecimalCount, DecimalInfo } from '../types/displayValue';
+import { getValueFormat } from '../valueFormats/valueFormats';
+import { getMappedValue } from '../utils/valueMappings';
+import { Threshold } from '../types/threshold';
+// import { GrafanaTheme, GrafanaThemeType, FieldConfig } from '../types/index';
 
 interface DisplayProcessorOptions {
   config?: FieldConfig;

packages/grafana-data/src/field/fieldDisplay.test.ts

@@ -1,7 +1,8 @@
 import { getFieldProperties, getFieldDisplayValues, GetFieldDisplayValuesOptions } from './fieldDisplay';
-import { ReducerID, Threshold, toDataFrame } from '@grafana/data';
+import { toDataFrame } from '../dataframe/processDataFrame';
-import { GrafanaThemeType } from '../types/theme';
+import { ReducerID } from '../transformations/fieldReducer';
-import { getTheme } from '../themes/index';
+import { Threshold } from '../types/threshold';
+import { GrafanaTheme } from '../types/theme';
 
 describe('FieldDisplay', () => {
   it('Construct simple field properties', () => {
@@ -32,6 +33,7 @@ describe('FieldDisplay', () => {
   });
 
   // Simple test dataset
+
   const options: GetFieldDisplayValuesOptions = {
     data: [
       toDataFrame({
@@ -51,7 +53,7 @@ describe('FieldDisplay', () => {
       override: {},
       defaults: {},
     },
-    theme: getTheme(GrafanaThemeType.Dark),
+    theme: {} as GrafanaTheme,
   };
 
   it('show first numeric values', () => {
@@ -148,7 +150,7 @@ describe('FieldDisplay', () => {
           thresholds: [{ color: '#F2495C', value: 50 }],
         },
       },
-      theme: getTheme(GrafanaThemeType.Dark),
+      theme: {} as GrafanaTheme,
     };
 
     const display = getFieldDisplayValues(options);

packages/grafana-data/src/field/fieldDisplay.ts

@@ -1,22 +1,17 @@
-import {
-  ReducerID,
-  reduceField,
-  FieldType,
-  DataFrame,
-  FieldConfig,
-  DisplayValue,
-  GraphSeriesValue,
-  DataFrameView,
-  getTimeField,
-  ScopedVars,
-} from '@grafana/data';
-
 import toNumber from 'lodash/toNumber';
 import toString from 'lodash/toString';
 
-import { GrafanaTheme, InterpolateFunction } from '../types/index';
 import { getDisplayProcessor } from './displayProcessor';
-import { getFlotPairs } from './flotPairs';
+import { getFlotPairs } from '../utils/flotPairs';
+import { FieldConfig, DataFrame, FieldType } from '../types/dataFrame';
+import { InterpolateFunction } from '../types/panel';
+import { DataFrameView } from '../dataframe/DataFrameView';
+import { GraphSeriesValue } from '../types/graph';
+import { DisplayValue } from '../types/displayValue';
+import { GrafanaTheme } from '../types/theme';
+import { ReducerID, reduceField } from '../transformations/fieldReducer';
+import { ScopedVars } from '../types/ScopedVars';
+import { getTimeField } from '../dataframe/processDataFrame';
 
 export interface FieldDisplayOptions {
   values?: boolean; // If true show each row value

packages/grafana-data/src/field/index.ts

@@ -0,0 +1,2 @@
+export * from './fieldDisplay';
+export * from './displayProcessor';

packages/grafana-data/src/index.ts

@@ -5,3 +5,5 @@ export * from './dataframe';
 export * from './transformations';
 export * from './datetime';
 export * from './text';
+export * from './valueFormats';
+export * from './field';

packages/grafana-data/src/types/app.ts

@@ -1,6 +1,7 @@
 import { ComponentClass } from 'react';
-import { NavModel, KeyValue } from '@grafana/data';
+import { KeyValue } from './data';
-import { PluginMeta, PluginIncludeType, GrafanaPlugin } from './plugin';
+import { NavModel } from './navModel';
+import { PluginMeta, GrafanaPlugin, PluginIncludeType } from './plugin';
 
 export interface AppRootProps<T = KeyValue> {
   meta: AppPluginMeta<T>;

packages/grafana-data/src/types/appEvent.ts

@@ -1,4 +0,0 @@
-export interface AppEvent<T> {
-  readonly name: string;
-  payload?: T;
-}

packages/grafana-data/src/types/appEvents.ts

@@ -1,5 +1,10 @@
 import { eventFactory } from './utils';
 
+export interface AppEvent<T> {
+  readonly name: string;
+  payload?: T;
+}
+
 export type AlertPayload = [string, string?];
 
 export const alertSuccess = eventFactory<AlertPayload>('alert-success');

packages/grafana-data/src/types/datasource.ts

@@ -1,20 +1,12 @@
+import { Observable } from 'rxjs';
 import { ComponentType } from 'react';
-import {
-  TimeRange,
-  RawTimeRange,
-  TableData,
-  TimeSeries,
-  DataFrame,
-  LogRowModel,
-  LoadingState,
-  DataFrameDTO,
-  AnnotationEvent,
-  ScopedVars,
-  KeyValue,
-} from '@grafana/data';
 import { PluginMeta, GrafanaPlugin } from './plugin';
 import { PanelData } from './panel';
-import { Observable } from 'rxjs';
+import { LogRowModel } from './logs';
+import { AnnotationEvent, TimeSeries, TableData, LoadingState, KeyValue } from './data';
+import { DataFrame, DataFrameDTO } from './dataFrame';
+import { TimeRange, RawTimeRange } from './time';
+import { ScopedVars } from './ScopedVars';
 
 export interface DataSourcePluginOptionsEditorProps<JSONData = DataSourceJsonData, SecureJSONData = {}> {
   options: DataSourceSettings<JSONData, SecureJSONData>;

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

@@ -13,7 +13,15 @@ export * from './graph';
 export * from './ScopedVars';
 export * from './transformations';
 export * from './vector';
-export * from './appEvent';
+export * from './app';
+export * from './datasource';
+export * from './panel';
+export * from './plugin';
+export * from './theme';
 
-import * as AppEvents from './events';
+import * as AppEvents from './appEvents';
-export { AppEvents };
+import { AppEvent } from './appEvents';
+export { AppEvent, AppEvents };
+
+import * as PanelEvents from './panelEvents';
+export { PanelEvents };

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

@@ -1,7 +1,10 @@
 import { ComponentClass, ComponentType } from 'react';
-import { LoadingState, DataFrame, TimeRange, TimeZone, ScopedVars, AbsoluteTimeRange } from '@grafana/data';
 import { DataQueryRequest, DataQueryError } from './datasource';
 import { PluginMeta, GrafanaPlugin } from './plugin';
+import { ScopedVars } from './ScopedVars';
+import { LoadingState } from './data';
+import { DataFrame } from './dataFrame';
+import { TimeRange, TimeZone, AbsoluteTimeRange } from './time';
 
 export type InterpolateFunction = (value: string, scopedVars?: ScopedVars, format?: string | Function) => string;
 

packages/grafana-data/src/types/panelEvents.ts

@@ -1,8 +1,7 @@
-import { eventFactory } from '@grafana/data';
+import { eventFactory } from './utils';
-import { DataQueryResponseData, DataQueryError } from '.';
+import { DataQueryError, DataQueryResponseData } from './datasource';
 
 /** Payloads */
-
 export interface PanelChangeViewPayload {
   fullscreen?: boolean;
   edit?: boolean;

packages/grafana-data/src/types/plugin.ts

@@ -1,5 +1,5 @@
 import { ComponentClass } from 'react';
-import { KeyValue } from '@grafana/data';
+import { KeyValue } from './data';
 
 export enum PluginState {
   alpha = 'alpha', // Only included it `enable_alpha` is true

packages/grafana-data/src/types/theme.ts

@@ -0,0 +1,236 @@
+export enum GrafanaThemeType {
+  Light = 'light',
+  Dark = 'dark',
+}
+
+export interface GrafanaThemeCommons {
+  name: string;
+  // TODO: not sure if should be a part of theme
+  breakpoints: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+  typography: {
+    fontFamily: {
+      sansSerif: string;
+      monospace: string;
+    };
+    size: {
+      root: string;
+      base: string;
+      xs: string;
+      sm: string;
+      md: string;
+      lg: string;
+    };
+    weight: {
+      light: number;
+      regular: number;
+      semibold: number;
+      bold: number;
+    };
+    lineHeight: {
+      xs: number; //1
+      sm: number; //1.1
+      md: number; // 4/3
+      lg: number; // 1.5
+    };
+    // TODO: Refactor to use size instead of custom defs
+    heading: {
+      h1: string;
+      h2: string;
+      h3: string;
+      h4: string;
+      h5: string;
+      h6: string;
+    };
+    link: {
+      decoration: string;
+      hoverDecoration: string;
+    };
+  };
+  spacing: {
+    insetSquishMd: string;
+    d: string;
+    xxs: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    gutter: string;
+
+    // Next-gen forms spacing variables
+    // TODO: Move variables definition to respective components when implementing
+    formSpacingBase: number;
+    formMargin: string;
+    formFieldsetMargin: string;
+    formLegendMargin: string;
+    formInputHeight: string;
+    formButtonHeight: number;
+    formInputPaddingHorizontal: string;
+    // Used for icons do define spacing between icon and input field
+    // Applied on the right(prefix) or left(suffix)
+    formInputAffixPaddingHorizontal: string;
+    formInputMargin: string;
+    formLabelPadding: string;
+    formLabelMargin: string;
+    formValidationMessagePadding: string;
+  };
+  border: {
+    radius: {
+      sm: string;
+      md: string;
+      lg: string;
+    };
+    width: {
+      sm: string;
+    };
+  };
+  height: {
+    sm: string;
+    md: string;
+    lg: string;
+  };
+  panelPadding: number;
+  panelHeaderHeight: number;
+  zIndex: {
+    dropdown: string;
+    navbarFixed: string;
+    sidemenu: string;
+    tooltip: string;
+    modalBackdrop: string;
+    modal: string;
+    typeahead: string;
+  };
+}
+
+export interface GrafanaTheme extends GrafanaThemeCommons {
+  type: GrafanaThemeType;
+  isDark: boolean;
+  isLight: boolean;
+  background: {
+    dropdown: string;
+    scrollbar: string;
+    scrollbar2: string;
+    pageHeader: string;
+  };
+  colors: {
+    black: string;
+    white: string;
+    dark1: string;
+    dark2: string;
+    dark3: string;
+    dark4: string;
+    dark5: string;
+    dark6: string;
+    dark7: string;
+    dark8: string;
+    dark9: string;
+    dark10: string;
+    gray1: string;
+    gray2: string;
+    gray3: string;
+    gray4: string;
+    gray5: string;
+    gray6: string;
+    gray7: string;
+
+    // New greys palette used by next-gen form elements
+    gray98: string;
+    gray95: string;
+    gray85: string;
+    gray70: string;
+    gray33: string;
+    gray25: string;
+    gray15: string;
+    gray10: string;
+    gray05: string;
+
+    // New blues palette used by next-gen form elements
+    blue95: string;
+    blue85: string;
+    blue77: string;
+
+    // New reds palette used by next-gen form elements
+    red88: string;
+
+    grayBlue: string;
+    inputBlack: string;
+
+    // Accent colors
+    blue: string;
+    blueBase: string;
+    blueShade: string;
+    blueLight: string;
+    blueFaint: string;
+    redBase: string;
+    redShade: string;
+    greenBase: string;
+    greenShade: string;
+    red: string;
+    yellow: string;
+    purple: string;
+    variable: string;
+    orange: string;
+    orangeDark: string;
+    queryRed: string;
+    queryGreen: string;
+    queryPurple: string;
+    queryKeyword: string;
+    queryOrange: string;
+    brandPrimary: string;
+    brandSuccess: string;
+    brandWarning: string;
+    brandDanger: string;
+
+    // Status colors
+    online: string;
+    warn: string;
+    critical: string;
+
+    // Link colors
+    link: string;
+    linkDisabled: string;
+    linkHover: string;
+    linkExternal: string;
+
+    // Text colors
+    body: string;
+    text: string;
+    textStrong: string;
+    textWeak: string;
+    textFaint: string;
+    textEmphasis: string;
+
+    // TODO: move to background section
+    bodyBg: string;
+    pageBg: string;
+    headingColor: string;
+
+    pageHeaderBorder: string;
+
+    // Next-gen forms functional colors
+    formLabel: string;
+    formDescription: string;
+    formLegend: string;
+    formInputBg: string;
+    formInputBgDisabled: string;
+    formInputBorder: string;
+    formInputBorderHover: string;
+    formInputBorderActive: string;
+    formInputBorderInvalid: string;
+    formInputFocusOutline: string;
+    formInputText: string;
+    formInputTextStrong: string;
+    formInputTextWhite: string;
+    formValidationMessageText: string;
+    formValidationMessageBg: string;
+  };
+  shadow: {
+    pageHeader: string;
+  };
+}

packages/grafana-data/src/types/utils.ts

@@ -1,4 +1,4 @@
-import { AppEvent } from './appEvent';
+import { AppEvent } from './appEvents';
 
 export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 export type Subtract<T, K> = Omit<T, keyof K>;

packages/grafana-data/src/utils/flotPairs.test.ts

@@ -1,5 +1,7 @@
+import { MutableDataFrame } from '../dataframe/MutableDataFrame';
 import { getFlotPairs, getFlotPairsConstant } from './flotPairs';
-import { MutableDataFrame, TimeRange, dateTime } from '@grafana/data';
+import { TimeRange } from '../types/time';
+import { dateTime } from '../datetime/moment_wrapper';
 
 describe('getFlotPairs', () => {
   const series = new MutableDataFrame({

packages/grafana-data/src/utils/flotPairs.ts

@@ -1,5 +1,10 @@
+import { Field } from '../types/dataFrame';
+import { NullValueMode } from '../types/data';
+import { GraphSeriesValue } from '../types/graph';
+import { TimeRange } from '../types/time';
+
 // Types
-import { NullValueMode, GraphSeriesValue, Field, TimeRange } from '@grafana/data';
+// import { NullValueMode, GraphSeriesValue, Field, TimeRange } from '@grafana/data';
 
 export interface FlotPairsOptions {
   xField: Field;

packages/grafana-data/src/utils/index.ts

@@ -6,5 +6,7 @@ export * from './labels';
 export * from './labels';
 export * from './object';
 export * from './thresholds';
+export * from './namedColorsPalette';
 
 export { getMappedValue } from './valueMappings';
+export { getFlotPairs, getFlotPairsConstant } from './flotPairs';

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

@@ -5,7 +5,7 @@ import {
   getColorFromHexRgbOrName,
   getColorDefinitionByName,
 } from './namedColorsPalette';
-import { GrafanaThemeType } from '../types/index';
+import { GrafanaThemeType } from '../types/theme';
 
 describe('colors', () => {
   const SemiDarkBlue = getColorDefinitionByName('semi-dark-blue');

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

@@ -1,6 +1,6 @@
 import flatten from 'lodash/flatten';
-import { GrafanaThemeType } from '../types/theme';
 import tinycolor from 'tinycolor2';
+import { GrafanaThemeType } from '../types/theme';
 
 type Hue = 'green' | 'yellow' | 'red' | 'blue' | 'orange' | 'purple';
 

packages/grafana-data/src/valueFormats/arithmeticFormatters.ts

@@ -1,6 +1,5 @@
-import { DecimalCount } from '@grafana/data';
-
 import { toFixed } from './valueFormats';
+import { DecimalCount } from '../types/displayValue';
 
 export function toPercent(size: number, decimals: DecimalCount) {
   if (size === null) {

packages/grafana-data/src/valueFormats/dateTimeFormatters.test.ts

@@ -9,7 +9,7 @@ import {
   toDurationInSeconds,
   toDurationInHoursMinutesSeconds,
 } from './dateTimeFormatters';
-import { toUtc, dateTime } from '@grafana/data';
+import { toUtc, dateTime } from '../datetime/moment_wrapper';
 
 describe('date time formats', () => {
   const epoch = 1505634997920;

packages/grafana-data/src/valueFormats/dateTimeFormatters.ts

@@ -1,6 +1,7 @@
-import { toUtc, toDuration as duration, dateTime, DecimalCount } from '@grafana/data';
+import { toDuration as duration, toUtc, dateTime } from '../datetime/moment_wrapper';
 
 import { toFixed, toFixedScaled } from './valueFormats';
+import { DecimalCount } from '../types/displayValue';
 
 interface IntervalsInSeconds {
   [interval: string]: number;

packages/grafana-data/src/valueFormats/index.ts

@@ -0,0 +1 @@
+export * from './valueFormats';

packages/grafana-data/src/valueFormats/symbolFormatters.ts

@@ -1,6 +1,5 @@
-import { DecimalCount } from '@grafana/data';
-
 import { scaledUnits } from './valueFormats';
+import { DecimalCount } from '../types/displayValue';
 
 export function currency(symbol: string) {
   const units = ['', 'K', 'M', 'B', 'T'];

packages/grafana-data/src/valueFormats/valueFormats.ts

@@ -1,6 +1,5 @@
-import { DecimalCount } from '@grafana/data';
-
 import { getCategories } from './categories';
+import { DecimalCount } from '../types/displayValue';
 
 export type ValueFormatter = (
   value: number,

packages/grafana-runtime/src/config.ts

@@ -1,5 +1,6 @@
 import extend from 'lodash/extend';
-import { GrafanaTheme, getTheme, GrafanaThemeType, PanelPluginMeta, DataSourceInstanceSettings } from '@grafana/ui';
+import { getTheme } from '@grafana/ui';
+import { GrafanaTheme, GrafanaThemeType, PanelPluginMeta, DataSourceInstanceSettings } from '@grafana/data';
 
 export interface BuildInfo {
   version: string;

packages/grafana-runtime/src/services/dataSourceSrv.ts

@@ -1,5 +1,4 @@
-import { ScopedVars } from '@grafana/data';
+import { ScopedVars, DataSourceApi } from '@grafana/data';
-import { DataSourceApi } from '@grafana/ui';
 
 export interface DataSourceSrv {
   get(name?: string, scopedVars?: ScopedVars): Promise<DataSourceApi>;

packages/grafana-toolkit/src/cli/tasks/plugin.ci.ts

@@ -3,7 +3,7 @@ import { pluginBuildRunner } from './plugin.build';
 import { restoreCwd } from '../utils/cwd';
 import { S3Client } from '../../plugins/aws';
 import { getPluginJson } from '../../config/utils/pluginValidation';
-import { PluginMeta } from '@grafana/ui';
+import { PluginMeta } from '@grafana/data';
 
 // @ts-ignore
 import execa = require('execa');

packages/grafana-toolkit/src/config/utils/pluginValidation.ts

@@ -1,4 +1,4 @@
-import { PluginMeta } from '@grafana/ui';
+import { PluginMeta } from '@grafana/data';
 
 export const validatePluginJson = (pluginJson: any) => {
   if (!pluginJson.id) {

packages/grafana-toolkit/src/plugins/aws.ts

@@ -5,7 +5,7 @@ import fs from 'fs';
 import { PluginPackageDetails, ZipFileInfo, TestResultsInfo } from './types';
 import defaults from 'lodash/defaults';
 import clone from 'lodash/clone';
-import { PluginMetaInfo } from '@grafana/ui';
+import { PluginMetaInfo } from '@grafana/data';
 
 interface UploadArgs {
   local: string;

packages/grafana-toolkit/src/plugins/e2e/settings.ts

@@ -1,4 +1,4 @@
-import { PluginMeta } from '@grafana/ui';
+import { PluginMeta } from '@grafana/data';
 
 import path from 'path';
 import fs from 'fs';

packages/grafana-toolkit/src/plugins/env.ts

@@ -1,7 +1,7 @@
 import execa from 'execa';
 import path from 'path';
 import fs from 'fs';
-import { PluginBuildInfo } from '@grafana/ui';
+import { PluginBuildInfo } from '@grafana/data';
 import { JobInfo } from './types';
 
 const getJobFromProcessArgv = () => {

packages/grafana-toolkit/src/plugins/types.ts

@@ -1,5 +1,4 @@
-import { PluginMeta, PluginBuildInfo } from '@grafana/ui';
+import { PluginMeta, PluginBuildInfo, DataFrame, KeyValue } from '@grafana/data';
-import { DataFrame, KeyValue } from '@grafana/data';
 
 export interface PluginPackageDetails {
   plugin: ZipFileInfo;

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

@@ -1,6 +1,7 @@
 import React, { FC, useContext } from 'react';
 import { css, cx } from 'emotion';
-import { PluginState, ThemeContext } from '../../index';
+import { ThemeContext } from '../../index';
+import { PluginState } from '@grafana/data';
 
 interface Props {
   state?: PluginState;

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

@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/react';
 import { number, text } from '@storybook/addon-knobs';
 import { BarGauge, Props } from './BarGauge';
-import { VizOrientation } from '../../types';
+import { VizOrientation } from '@grafana/data';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
 

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

@@ -10,7 +10,7 @@ import {
   getTitleStyles,
   getValuePercent,
 } from './BarGauge';
-import { VizOrientation } from '../../types';
+import { VizOrientation } from '@grafana/data';
 import { getTheme } from '../../themes';
 
 // jest.mock('jquery', () => ({

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

@@ -4,10 +4,11 @@ import tinycolor from 'tinycolor2';
 import { Threshold, TimeSeriesValue, getActiveThreshold, DisplayValue } from '@grafana/data';
 
 // Utils
-import { getColorFromHexRgbOrName } from '../../utils';
+import { getColorFromHexRgbOrName } from '@grafana/data';
 
 // Types
-import { Themeable, VizOrientation } from '../../types';
+import { VizOrientation } from '@grafana/data';
+import { Themeable } from '../../types';
 
 const MIN_VALUE_HEIGHT = 18;
 const MAX_VALUE_HEIGHT = 50;

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

@@ -5,10 +5,10 @@ import { Chart, Geom } from 'bizcharts';
 import { DisplayValue } from '@grafana/data';
 
 // Utils
-import { getColorFromHexRgbOrName } from '../../utils';
+import { getColorFromHexRgbOrName, GrafanaTheme } from '@grafana/data';
 
 // Types
-import { Themeable, GrafanaTheme } from '../../types';
+import { Themeable } from '../../types';
 
 export interface BigValueSparkline {
   data: any[][];

packages/grafana-ui/src/components/Button/types.ts

@@ -1,4 +1,4 @@
-import { GrafanaTheme } from '../../types';
+import { GrafanaTheme } from '@grafana/data';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'inverse' | 'transparent' | 'destructive';
 

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Themeable, GrafanaTheme } from '../../types/theme';
+import { Themeable } from '../../types/theme';
+import { GrafanaTheme } from '@grafana/data';
 import { selectThemeVariant } from '../../themes/selectThemeVariant';
 import { css, cx } from 'emotion';
 import { stylesFactory } from '../../themes';

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

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useContext } from 'react';
 import { css, cx } from 'emotion';
 
-import { GrafanaTheme } from '../../types/theme';
+import { GrafanaTheme } from '@grafana/data';
 import { selectThemeVariant } from '../../themes/selectThemeVariant';
 import { ThemeContext } from '../../themes/ThemeContext';
 import { stylesFactory } from '../../themes/stylesFactory';

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

@@ -3,7 +3,7 @@ import omit from 'lodash/omit';
 import { PopoverController } from '../Tooltip/PopoverController';
 import { Popover } from '../Tooltip/Popover';
 import { ColorPickerPopover, ColorPickerProps, ColorPickerChangeHandler } from './ColorPickerPopover';
-import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
+import { getColorFromHexRgbOrName } from '@grafana/data';
 import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
 
 import { withTheme } from '../../themes/ThemeContext';

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

@@ -1,11 +1,10 @@
 import React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 import { ColorPickerPopover } from './ColorPickerPopover';
-import { getColorDefinitionByName, getNamedColorPalette } from '../../utils/namedColorsPalette';
 import { ColorSwatch } from './NamedColorsGroup';
 import flatten from 'lodash/flatten';
-import { GrafanaThemeType } from '../../types';
 import { getTheme } from '../../themes';
+import { GrafanaThemeType, getColorDefinitionByName, getNamedColorPalette } from '@grafana/data';
 
 const allColors = flatten(Array.from(getNamedColorPalette().values()));
 

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { NamedColorsPalette } from './NamedColorsPalette';
-import { getColorName, getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
 import { PopoverContentProps } from '../Tooltip/Tooltip';
 import SpectrumPalette from './SpectrumPalette';
-import { GrafanaThemeType, Themeable } from '../../types/theme';
+import { Themeable } from '../../types/theme';
 import { warnAboutColorPickerPropsDeprecation } from './warnAboutColorPickerPropsDeprecation';
+import { GrafanaThemeType, getColorName, getColorFromHexRgbOrName } from '@grafana/data';
 
 export type ColorPickerChangeHandler = (color: string) => void;
 

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

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import { Themeable } from '../../types';
-import { ColorDefinition, getColorForTheme } from '../../utils/namedColorsPalette';
+import { ColorDefinition, getColorForTheme } from '@grafana/data';
 import { Color } from 'csstype';
 import upperFirst from 'lodash/upperFirst';
 import find from 'lodash/find';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { NamedColorsPalette } from './NamedColorsPalette';
-import { getColorName, getColorDefinitionByName } from '../../utils/namedColorsPalette';
+import { getColorName, getColorDefinitionByName } from '@grafana/data';
 import { select } from '@storybook/addon-knobs';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';

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

@@ -2,9 +2,8 @@ import React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 import { NamedColorsPalette } from './NamedColorsPalette';
 import { ColorSwatch } from './NamedColorsGroup';
-import { getColorDefinitionByName } from '../../utils';
+import { getColorDefinitionByName, GrafanaThemeType } from '@grafana/data';
 import { getTheme } from '../../themes';
-import { GrafanaThemeType } from '../../types';
 
 describe('NamedColorsPalette', () => {
   const BasicGreen = getColorDefinitionByName('green');

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Color, getNamedColorPalette } from '../../utils/namedColorsPalette';
+import { Color, getNamedColorPalette } from '@grafana/data';
 import { Themeable } from '../../types/index';
 import NamedColorsGroup from './NamedColorsGroup';
 

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

@@ -2,11 +2,11 @@ import React from 'react';
 import { CustomPicker, ColorResult } from 'react-color';
 
 import { Saturation, Hue, Alpha } from 'react-color/lib/components/common';
-import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
 import tinycolor from 'tinycolor2';
 import ColorInput from './ColorInput';
-import { Themeable, GrafanaTheme } from '../../types';
+import { Themeable } from '../../types';
 import SpectrumPalettePointer, { SpectrumPalettePointerProps } from './SpectrumPalettePointer';
+import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/data';
 
 export interface SpectrumPaletteProps extends Themeable {
   color: string;

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

@@ -1,7 +1,8 @@
 import React, { useContext, useRef, useState, useLayoutEffect } from 'react';
 import { css, cx } from 'emotion';
 import useClickAway from 'react-use/lib/useClickAway';
-import { GrafanaTheme, selectThemeVariant, ThemeContext } from '../../index';
+import { selectThemeVariant, ThemeContext } from '../../index';
+import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory } from '../../themes/stylesFactory';
 import { Portal, List } from '../index';
 import { LinkTarget } from '@grafana/data';

packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx

@@ -5,7 +5,7 @@ import { VariableSuggestion } from './DataLinkSuggestions';
 import { css } from 'emotion';
 import { ThemeContext, stylesFactory } from '../../themes/index';
 import { DataLinkInput } from './DataLinkInput';
-import { GrafanaTheme } from '../../types';
+import { GrafanaTheme } from '@grafana/data';
 
 interface DataLinkEditorProps {
   index: number;

packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx

@@ -14,7 +14,7 @@ import { css, cx } from 'emotion';
 import { SlatePrism } from '../../slate-plugins';
 import { SCHEMA } from '../../utils/slate';
 import { stylesFactory } from '../../themes';
-import { GrafanaTheme } from '../../types';
+import { GrafanaTheme } from '@grafana/data';
 
 const modulo = (a: number, n: number) => a - n * Math.floor(a / n);
 

packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx

@@ -1,4 +1,5 @@
-import { GrafanaTheme, selectThemeVariant, ThemeContext } from '../../index';
+import { selectThemeVariant, ThemeContext } from '../../index';
+import { GrafanaTheme } from '@grafana/data';
 import { css, cx } from 'emotion';
 import _ from 'lodash';
 import React, { useRef, useContext, useMemo } from 'react';

packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { DataSourceHttpSettings } from './DataSourceHttpSettings';
-import { DataSourceSettings } from '../../types';
+import { DataSourceSettings } from '@grafana/data';
 import { UseState } from '../../utils/storybook/UseState';
 
 const settingsMock: DataSourceSettings<any, any> = {

packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx

@@ -5,7 +5,7 @@ import { useTheme } from '../../themes';
 import { BasicAuthSettings } from './BasicAuthSettings';
 import { HttpProxySettings } from './HttpProxySettings';
 import { TLSAuthSettings } from './TLSAuthSettings';
-import { DataSourceSettings } from '../../types';
+import { DataSourceSettings } from '@grafana/data';
 import { HttpSettingsProps } from './types';
 import { Select } from '../Select/Select';
 import { Input } from '../Input/Input';

packages/grafana-ui/src/components/DataSourceSettings/types.ts

@@ -1,4 +1,4 @@
-import { DataSourceSettings } from '../../types';
+import { DataSourceSettings } from '@grafana/data';
 
 export interface HttpSettingsBaseProps {
   dataSourceConfig: DataSourceSettings<any, any>;

packages/grafana-ui/src/components/Forms/Button.tsx

@@ -5,7 +5,7 @@ import { selectThemeVariant, stylesFactory, ThemeContext } from '../../themes';
 import { Button as DefaultButton, LinkButton as DefaultLinkButton } from '../Button/Button';
 import { getFocusStyle } from './commonStyles';
 import { ButtonSize, StyleDeps } from '../Button/types';
-import { GrafanaTheme } from '../../types';
+import { GrafanaTheme } from '@grafana/data';
 
 const buttonVariantStyles = (from: string, to: string, textColor: string) => css`
   background: linear-gradient(180deg, ${from} 0%, ${to} 100%);

packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTheme, stylesFactory } from '../../themes';
-import { GrafanaTheme } from '../../types';
+import { GrafanaTheme } from '@grafana/data';
 import { css, cx } from 'emotion';
 
 export interface FieldValidationMessageProps {

packages/grafana-ui/src/components/Forms/Label.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTheme, stylesFactory } from '../../themes';
-import { GrafanaTheme } from '../../types';
+import { GrafanaTheme } from '@grafana/data';
 import { css, cx } from 'emotion';
 
 export interface LabelProps extends React.HTMLAttributes<HTMLLabelElement> {

packages/grafana-ui/src/components/Forms/Legend.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTheme, stylesFactory } from '../../themes';
-import { GrafanaTheme } from '../../types';
+import { GrafanaTheme } from '@grafana/data';
 import { css, cx } from 'emotion';
 
 export interface LabelProps extends React.HTMLAttributes<HTMLLegendElement> {

packages/grafana-ui/src/components/Forms/commonStyles.ts

@@ -1,5 +1,5 @@
 import { css } from 'emotion';
-import { GrafanaTheme } from '../../types';
+import { GrafanaTheme } from '@grafana/data';
 
 export const getFocusStyle = (theme: GrafanaTheme) => css`
   &[focus],

packages/grafana-ui/src/components/Forms/getFormStyles.ts

@@ -1,5 +1,5 @@
 import { stylesFactory } from '../../themes';
-import { GrafanaTheme } from '../../types';
+import { GrafanaTheme } from '@grafana/data';
 import { getLabelStyles } from './Label';
 import { getLegendStyles } from './Legend';
 import { getFieldValidationMessageStyles } from './FieldValidationMessage';

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

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import $ from 'jquery';
 import { Threshold, DisplayValue } from '@grafana/data';
 
-import { getColorFromHexRgbOrName } from '../../utils';
+import { getColorFromHexRgbOrName } from '@grafana/data';
 import { Themeable } from '../../types';
 import { selectThemeVariant } from '../../themes';
 

packages/grafana-ui/src/components/Graph/GraphLegendItem.tsx

@@ -6,7 +6,7 @@ import { SeriesColorChangeHandler } from './GraphWithLegend';
 import { LegendStatsList } from '../Legend/LegendStatsList';
 import { ThemeContext } from '../../themes/ThemeContext';
 import { stylesFactory } from '../../themes';
-import { GrafanaTheme } from '../../types';
+import { GrafanaTheme } from '@grafana/data';
 
 export interface GraphLegendItemProps {
   key?: React.Key;

packages/grafana-ui/src/components/Legend/LegendList.tsx

@@ -5,7 +5,7 @@ import { List } from '../List/List';
 import { css, cx } from 'emotion';
 import { ThemeContext } from '../../themes/ThemeContext';
 import { stylesFactory } from '../../themes';
-import { GrafanaTheme } from '../../types';
+import { GrafanaTheme } from '@grafana/data';
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => ({
   item: css`

packages/grafana-ui/src/components/Logs/LogLabel.tsx

@@ -3,7 +3,8 @@ import { css, cx } from 'emotion';
 import { LogRowModel, LogLabelStatsModel, calculateLogsLabelStats } from '@grafana/data';
 
 import { LogLabelStats } from './LogLabelStats';
-import { GrafanaTheme, Themeable } from '../../types/theme';
+import { Themeable } from '../../types/theme';
+import { GrafanaTheme } from '@grafana/data';
 import { selectThemeVariant } from '../../themes/selectThemeVariant';
 import { withTheme } from '../../themes/ThemeContext';
 import { stylesFactory } from '../../themes';

packages/grafana-ui/src/components/Logs/LogLabelStats.tsx

@@ -3,7 +3,8 @@ import { css, cx } from 'emotion';
 import { LogLabelStatsModel } from '@grafana/data';
 
 import { LogLabelStatsRow } from './LogLabelStatsRow';
-import { Themeable, GrafanaTheme } from '../../types/theme';
+import { Themeable } from '../../types/theme';
+import { GrafanaTheme } from '@grafana/data';
 import { selectThemeVariant } from '../../themes/selectThemeVariant';
 import { withTheme } from '../../themes/index';
 

packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx

@@ -2,7 +2,7 @@ import React, { FunctionComponent, useContext } from 'react';
 import { css, cx } from 'emotion';
 
 import { ThemeContext } from '../../themes/ThemeContext';
-import { GrafanaTheme } from '../../types/theme';
+import { GrafanaTheme } from '@grafana/data';
 
 const getStyles = (theme: GrafanaTheme) => ({
   logsStatsRow: css`

packages/grafana-ui/src/components/Logs/LogRow.tsx

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
-import { LogRowModel, TimeZone } from '@grafana/data';
+import { LogRowModel, TimeZone, DataQueryResponse } from '@grafana/data';
 import { cx } from 'emotion';
-import { DataQueryResponse } from '../../index';
 import {
   LogRowContextRows,
   LogRowContextQueryErrors,

packages/grafana-ui/src/components/Logs/LogRowContext.tsx

@@ -4,9 +4,9 @@ import { css, cx } from 'emotion';
 
 import { Alert } from '../Alert/Alert';
 import { LogRowContextRows, LogRowContextQueryErrors, HasMoreContextRows } from './LogRowContextProvider';
-import { GrafanaTheme } from '../../types/theme';
+import { GrafanaTheme } from '@grafana/data';
 import { selectThemeVariant } from '../../themes/selectThemeVariant';
-import { DataQueryError } from '../../types/datasource';
+import { DataQueryError } from '@grafana/data';
 import { ThemeContext } from '../../themes/ThemeContext';
 import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
 import { List } from '../List/List';

packages/grafana-ui/src/components/Logs/LogRowContextProvider.test.ts

@@ -1,7 +1,5 @@
-import { FieldType, LogRowModel, MutableDataFrame } from '@grafana/data';
+import { FieldType, LogRowModel, MutableDataFrame, Labels, LogLevel, DataQueryResponse } from '@grafana/data';
 import { getRowContexts } from './LogRowContextProvider';
-import { Labels, LogLevel } from '@grafana/data/src';
-import { DataQueryResponse } from '../../types';
 
 describe('getRowContexts', () => {
   describe('when called with a DataFrame and results are returned', () => {

packages/grafana-ui/src/components/Logs/LogRowContextProvider.tsx

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 import flatten from 'lodash/flatten';
 import useAsync from 'react-use/lib/useAsync';
 
-import { DataQueryResponse, DataQueryError } from '../../types/datasource';
+import { DataQueryResponse, DataQueryError } from '@grafana/data';
 
 export interface LogRowContextRows {
   before?: string[];

packages/grafana-ui/src/components/Logs/LogRowMessage.tsx

@@ -12,7 +12,8 @@ import {
 } from '@grafana/data';
 import tinycolor from 'tinycolor2';
 import { css, cx } from 'emotion';
-import { GrafanaTheme, selectThemeVariant, ThemeContext } from '../../index';
+import { selectThemeVariant, ThemeContext } from '../../index';
+import { GrafanaTheme } from '@grafana/data';
 import { LogRowContextQueryErrors, HasMoreContextRows, LogRowContextRows } from './LogRowContextProvider';
 import { LogRowContext } from './LogRowContext';
 import { LogMessageAnsi } from './LogMessageAnsi';

packages/grafana-ui/src/components/Logs/getLogRowStyles.ts

@@ -1,7 +1,7 @@
 import { css } from 'emotion';
 import { LogLevel } from '@grafana/data';
 
-import { GrafanaTheme } from '../../types/theme';
+import { GrafanaTheme } from '@grafana/data';
 import { selectThemeVariant } from '../../themes/selectThemeVariant';
 import { stylesFactory } from '../../themes';
 

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Portal } from '../Portal/Portal';
 import { css, cx } from 'emotion';
 import { stylesFactory, withTheme } from '../../themes';
-import { GrafanaTheme } from '../../types';
+import { GrafanaTheme } from '@grafana/data';
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => ({
   modal: css`

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

@@ -1,9 +1,7 @@
 import React, { PureComponent } from 'react';
 import { select, pie, arc, event } from 'd3';
 import sum from 'lodash/sum';
-import { DisplayValue } from '@grafana/data';
+import { DisplayValue, GrafanaThemeType } from '@grafana/data';
-
-import { GrafanaThemeType } from '../../types';
 import { Themeable } from '../../index';
 import { colors as grafana_colors } from '../../utils/index';
 

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

@@ -5,7 +5,7 @@ import { css } from 'emotion';
 import { Tooltip } from '../Tooltip/Tooltip';
 import { ButtonSelect } from '../Select/ButtonSelect';
 import memoizeOne from 'memoize-one';
-import { GrafanaTheme } from '../../types';
+import { GrafanaTheme } from '@grafana/data';
 import { withTheme } from '../../themes';
 
 const defaultIntervals = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'];

packages/grafana-ui/src/components/SingleStatShared/FieldDisplayEditor.tsx

@@ -7,9 +7,16 @@ import { FormField } from '../FormField/FormField';
 import { StatsPicker } from '../StatsPicker/StatsPicker';
 
 // Types
-import { FieldDisplayOptions, DEFAULT_FIELD_DISPLAY_VALUES_LIMIT } from '../../utils/fieldDisplay';
 import Select from '../Select/Select';
-import { ReducerID, toNumberString, toIntegerOrUndefined, SelectableValue, FieldConfig } from '@grafana/data';
+import {
+  FieldDisplayOptions,
+  DEFAULT_FIELD_DISPLAY_VALUES_LIMIT,
+  ReducerID,
+  toNumberString,
+  toIntegerOrUndefined,
+  SelectableValue,
+  FieldConfig,
+} from '@grafana/data';
 
 const showOptions: Array<SelectableValue<boolean>> = [
   {

packages/grafana-ui/src/components/SingleStatShared/FieldPropertiesEditor.tsx

@@ -7,9 +7,17 @@ import { FormLabel } from '../FormLabel/FormLabel';
 import { UnitPicker } from '../UnitPicker/UnitPicker';
 
 // Types
-import { toIntegerOrUndefined, SelectableValue, FieldConfig, toFloatOrUndefined, toNumberString } from '@grafana/data';
+import {
-
+  VAR_SERIES_NAME,
-import { VAR_SERIES_NAME, VAR_FIELD_NAME, VAR_CALC, VAR_CELL_PREFIX } from '../../utils/fieldDisplay';
+  VAR_FIELD_NAME,
+  VAR_CALC,
+  VAR_CELL_PREFIX,
+  toIntegerOrUndefined,
+  SelectableValue,
+  FieldConfig,
+  toFloatOrUndefined,
+  toNumberString,
+} from '@grafana/data';
 
 const labelWidth = 6;
 

packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts

@@ -1,8 +1,6 @@
 import cloneDeep from 'lodash/cloneDeep';
 import omit from 'lodash/omit';
 
-import { VizOrientation, PanelModel } from '../../types/panel';
-import { FieldDisplayOptions } from '../../utils/fieldDisplay';
 import {
   fieldReducers,
   Threshold,
@@ -11,6 +9,9 @@ import {
   ReducerID,
   ValueMapping,
   MappingType,
+  VizOrientation,
+  PanelModel,
+  FieldDisplayOptions,
 } from '@grafana/data';
 
 export interface SingleStatBaseOptions {

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

@@ -4,7 +4,7 @@ import { Table } from './Table';
 import { getTheme } from '../../themes';
 
 import { migratedTestTable, migratedTestStyles, simpleTable } from './examples';
-import { GrafanaThemeType } from '../../types/theme';
+import { GrafanaThemeType } from '@grafana/data';
 import { DataFrame, FieldType, ArrayVector, ScopedVars } from '@grafana/data';
 import { withFullSizeStory } from '../../utils/storybook/withFullSizeStory';
 import { number, boolean } from '@storybook/addon-knobs';

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { readCSV } from '@grafana/data';
 import { Table, Props } from './Table';
 import { getTheme } from '../../themes/index';
-import { GrafanaThemeType } from '../../types/theme';
+import { GrafanaThemeType } from '@grafana/data';
 import renderer from 'react-test-renderer';
 
 const series = readCSV('a,b,c\n1,2,3\n4,5,6')[0];

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

@@ -12,7 +12,15 @@ import {
 } from 'react-virtualized';
 import { Themeable } from '../../types/theme';
 
-import { stringToJsRegex, DataFrame, sortDataFrame, getDataFrameRow, ArrayVector, FieldType } from '@grafana/data';
+import {
+  stringToJsRegex,
+  DataFrame,
+  sortDataFrame,
+  getDataFrameRow,
+  ArrayVector,
+  FieldType,
+  InterpolateFunction,
+} from '@grafana/data';
 
 import {
   TableCellBuilder,
@@ -21,7 +29,6 @@ import {
   TableCellBuilderOptions,
   simpleCellBuilder,
 } from './TableCellBuilder';
-import { InterpolateFunction } from '../../types/panel';
 
 export interface Props extends Themeable {
   data: DataFrame;

packages/grafana-ui/src/components/Table/TableCellBuilder.tsx

@@ -3,10 +3,16 @@ import _ from 'lodash';
 import React, { ReactElement } from 'react';
 import { GridCellProps } from 'react-virtualized';
 import { Table, Props } from './Table';
-import { ValueFormatter, getValueFormat, getColorFromHexRgbOrName } from '../../utils/index';
+import {
-import { GrafanaTheme } from '../../types/theme';
+  Field,
-import { InterpolateFunction } from '../../types/panel';
+  dateTime,
-import { Field, dateTime, FieldConfig } from '@grafana/data';
+  FieldConfig,
+  getValueFormat,
+  GrafanaTheme,
+  ValueFormatter,
+  getColorFromHexRgbOrName,
+  InterpolateFunction,
+} from '@grafana/data';
 
 export interface TableCellBuilderOptions {
   value: any;

packages/grafana-ui/src/components/Table/examples.ts

@@ -1,6 +1,5 @@
-import { toDataFrame } from '@grafana/data';
+import { toDataFrame, getColorDefinitionByName } from '@grafana/data';
 import { ColumnStyle } from './TableCellBuilder';
-import { getColorDefinitionByName } from '../../utils/namedColorsPalette';
 
 const SemiDarkOrange = getColorDefinitionByName('semi-dark-orange');
 

packages/grafana-ui/src/components/TagsInput/TagItem.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { css, cx } from 'emotion';
 import { getTagColorsFromName } from '../../utils';
 import { stylesFactory, useTheme } from '../../themes';
-import { GrafanaTheme } from '../../types';
+import { GrafanaTheme } from '@grafana/data';
 
 interface Props {
   name: string;

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

@@ -2,7 +2,7 @@ import React, { PureComponent, ChangeEvent } from 'react';
 import { Threshold, sortThresholds } from '@grafana/data';
 import { colors } from '../../utils';
 import { ThemeContext } from '../../themes';
-import { getColorFromHexRgbOrName } from '../../utils';
+import { getColorFromHexRgbOrName } from '@grafana/data';
 import { Input } from '../Input/Input';
 import { ColorPicker } from '../ColorPicker/ColorPicker';
 import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';

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

@@ -18,7 +18,7 @@ import { withTheme } from '../../themes/ThemeContext';
 
 // Types
 import { TimeRange, TimeOption, TimeZone, TIME_FORMAT, SelectableValue, dateMath } from '@grafana/data';
-import { GrafanaTheme } from '../../types/theme';
+import { GrafanaTheme } from '@grafana/data';
 import { Themeable } from '../../types';
 
 const getStyles = memoizeOne((theme: GrafanaTheme) => {

packages/grafana-ui/src/components/TransformersUI/TransformationRow.tsx

@@ -3,7 +3,7 @@ import { ThemeContext } from '../../themes/ThemeContext';
 import { css } from 'emotion';
 import { DataFrame } from '@grafana/data';
 import { JSONFormatter } from '../JSONFormatter/JSONFormatter';
-import { GrafanaTheme } from '../../types/theme';
+import { GrafanaTheme } from '@grafana/data';
 
 interface TransformationRowProps {
   name: string;

packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx

@@ -1,7 +1,8 @@
 import React, { useContext } from 'react';
 import { css, cx } from 'emotion';
 
-import { CompletionItem, selectThemeVariant, ThemeContext, GrafanaTheme } from '../..';
+import { CompletionItem, selectThemeVariant, ThemeContext } from '../..';
+import { GrafanaTheme } from '@grafana/data';
 
 const getStyles = (theme: GrafanaTheme, height: number, visible: boolean) => {
   return {

packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx

@@ -3,8 +3,10 @@ import React, { useContext } from 'react';
 // @ts-ignore
 import Highlighter from 'react-highlight-words';
 import { css, cx } from 'emotion';
-
+import { GrafanaTheme } from '@grafana/data';
-import { CompletionItem, CompletionItemKind, GrafanaTheme, ThemeContext, selectThemeVariant } from '../..';
+import { selectThemeVariant } from '../../themes/selectThemeVariant';
+import { CompletionItem, CompletionItemKind } from '../../types/completion';
+import { ThemeContext } from '../../themes/ThemeContext';
 
 interface Props {
   isSelected: boolean;

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

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 
 import { Select } from '../Select/Select';
 
-import { getValueFormats } from '../../utils';
+import { getValueFormats } from '@grafana/data';
 
 interface Props {
   onChange: (item: any) => void;

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

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { VizOrientation } from '../../types';
+import { VizOrientation } from '@grafana/data';
 
 interface Props<T> {
   renderValue: (value: T, width: number, height: number) => JSX.Element;