Refactor: move some files to @grafana/data (#17952)

* moving to data WIP

* more refactoring

* add missing test

* mock full path

* remove sinon from grafana-ui

packages/grafana-data/package.json

@@ -23,6 +23,7 @@
     "@types/papaparse": "4.5.9",
     "@types/pretty-format": "20.0.1",
     "@types/react": "16.8.16",
+    "@types/sinon": "^7.0.11",
     "awesome-typescript-loader": "^5.2.1",
     "lodash": "^4.17.10",
     "pretty-format": "^24.5.0",
@@ -33,6 +34,7 @@
     "rollup-plugin-terser": "4.0.4",
     "rollup-plugin-typescript2": "0.19.3",
     "rollup-plugin-visualizer": "0.9.2",
+    "sinon": "1.17.6",
     "typescript": "3.4.1"
   },
   "resolutions": {

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

@@ -1 +1,5 @@
+export * from './data';
+export * from './logs';
 export * from './navModel';
+export * from './time';
+export * from './utils';

packages/grafana-ui/src/utils/csv.ts → packages/grafana-data/src/utils/csv.ts

@@ -4,7 +4,7 @@ import defaults from 'lodash/defaults';
 import isNumber from 'lodash/isNumber';
 
 // Types
-import { DataFrame, Field, FieldType } from '../types/index';
+import { DataFrame, Field, FieldType } from '../types';
 import { guessFieldTypeFromValue } from './processDataFrame';
 
 export enum CSVHeaderStyle {

packages/grafana-ui/src/utils/datemath.ts → packages/grafana-data/src/utils/datemath.ts

@@ -1,6 +1,6 @@
 import includes from 'lodash/includes';
 import isDate from 'lodash/isDate';
-import { DateTime, dateTime, toUtc, ISO_8601, isDateTime, DurationUnit } from '../utils/moment_wrapper';
+import { DateTime, dateTime, toUtc, ISO_8601, isDateTime, DurationUnit } from './moment_wrapper';
 import { TimeZone } from '../types';
 
 const units: DurationUnit[] = ['y', 'M', 'w', 'd', 'h', 'm', 's'];

packages/grafana-ui/src/utils/fieldReducer.test.ts → packages/grafana-data/src/utils/fieldReducer.test.ts

@@ -1,4 +1,4 @@
-import { getFieldReducers, ReducerID, reduceField } from './fieldReducer';
+import { getFieldReducers, ReducerID, reduceField } from './index';
 
 import _ from 'lodash';
 

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

@@ -1,2 +1,14 @@
 export * from './string';
 export * from './markdown';
+export * from './processDataFrame';
+export * from './csv';
+export * from './fieldReducer';
+export * from './logs';
+export * from './labels';
+export * from './labels';
+export * from './object';
+export * from './fieldCache';
+export * from './moment_wrapper';
+
+// Names are too general to export
+// rangeutils, datemath

packages/grafana-ui/package.json

@@ -57,7 +57,6 @@
     "@types/react-custom-scrollbars": "4.0.5",
     "@types/react-test-renderer": "16.8.1",
     "@types/react-transition-group": "2.0.16",
-    "@types/sinon": "^7.0.11",
     "@types/storybook__addon-actions": "3.4.2",
     "@types/storybook__addon-info": "4.1.1",
     "@types/storybook__addon-knobs": "4.0.4",
@@ -75,7 +74,6 @@
     "rollup-plugin-terser": "4.0.4",
     "rollup-plugin-typescript2": "0.19.3",
     "rollup-plugin-visualizer": "0.9.2",
-    "sinon": "1.17.6",
     "typescript": "3.4.1"
   },
   "resolutions": {

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

@@ -6,7 +6,8 @@ import tinycolor from 'tinycolor2';
 import { getColorFromHexRgbOrName, getThresholdForValue } from '../../utils';
 
 // Types
-import { DisplayValue, Themeable, TimeSeriesValue, Threshold, VizOrientation } from '../../types';
+import { DisplayValue, Themeable, Threshold, VizOrientation } from '../../types';
+import { TimeSeriesValue } from '@grafana/data';
 
 const MIN_VALUE_HEIGHT = 18;
 const MAX_VALUE_HEIGHT = 50;

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

@@ -4,7 +4,8 @@ import React, { PureComponent } from 'react';
 import uniqBy from 'lodash/uniqBy';
 
 // Types
-import { TimeRange, GraphSeriesXY } from '../../types';
+import { GraphSeriesXY } from '../../types';
+import { TimeRange } from '@grafana/data';
 
 export interface GraphProps {
   series: GraphSeriesXY[];

packages/grafana-ui/src/components/Graph/mockGraphWithLegendData.ts

@@ -1,6 +1,6 @@
 import { GraphWithLegendProps } from './GraphWithLegend';
 import { LegendDisplayMode } from '../Legend/Legend';
-import { dateTime } from '../../utils/moment_wrapper';
+import { dateTime } from '@grafana/data';
 // import { LegendList } from '../Legend/LegendList';
 
 export const mockGraphWithLegendData = ({

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

@@ -8,10 +8,8 @@ import { StatsPicker } from '../StatsPicker/StatsPicker';
 
 // Types
 import { FieldDisplayOptions, DEFAULT_FIELD_DISPLAY_VALUES_LIMIT } from '../../utils/fieldDisplay';
-import { Field } from '../../types/data';
 import Select, { SelectOptionItem } from '../Select/Select';
-import { toNumberString, toIntegerOrUndefined } from '@grafana/data';
-import { ReducerID } from '../../utils/fieldReducer';
+import { Field, ReducerID, toNumberString, toIntegerOrUndefined } from '@grafana/data';
 
 const showOptions: Array<SelectOptionItem<boolean>> = [
   {

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

@@ -7,8 +7,7 @@ import { FormLabel } from '../FormLabel/FormLabel';
 import { UnitPicker } from '../UnitPicker/UnitPicker';
 
 // Types
-import { Field } from '../../types/data';
-import { toIntegerOrUndefined } from '@grafana/data';
+import { toIntegerOrUndefined, Field } from '@grafana/data';
 import { SelectOptionItem } from '../Select/Select';
 
 import { VAR_SERIES_NAME, VAR_FIELD_NAME, VAR_CALC, VAR_CELL_PREFIX } from '../../utils/fieldDisplay';

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

@@ -3,8 +3,7 @@ import omit from 'lodash/omit';
 
 import { VizOrientation, PanelModel } from '../../types/panel';
 import { FieldDisplayOptions } from '../../utils/fieldDisplay';
-import { Field } from '../../types';
-import { getFieldReducers } from '../../utils/index';
+import { Field, getFieldReducers } from '@grafana/data';
 
 export interface SingleStatBaseOptions {
   fieldOptions: FieldDisplayOptions;

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

@@ -5,7 +5,7 @@ import difference from 'lodash/difference';
 
 import { Select } from '../index';
 
-import { getFieldReducers } from '../../utils/fieldReducer';
+import { getFieldReducers } from '@grafana/data';
 import { SelectOptionItem } from '../Select/Select';
 
 interface Props {

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

@@ -4,7 +4,8 @@ import { Table } from './Table';
 import { getTheme } from '../../themes';
 
 import { migratedTestTable, migratedTestStyles, simpleTable } from './examples';
-import { ScopedVars, DataFrame, GrafanaThemeType } from '../../types/index';
+import { ScopedVars, GrafanaThemeType } from '../../types/index';
+import { DataFrame } 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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { readCSV } from '../../utils/csv';
+import { readCSV } from '@grafana/data';
 import { Table, Props } from './Table';
 import { getTheme } from '../../themes/index';
 import { GrafanaThemeType } from '../../types/theme';

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

@@ -12,7 +12,7 @@ import {
 } from 'react-virtualized';
 import { Themeable } from '../../types/theme';
 
-import { sortDataFrame } from '../../utils/processDataFrame';
+import { stringToJsRegex, DataFrame, sortDataFrame } from '@grafana/data';
 
 import {
   TableCellBuilder,
@@ -21,8 +21,6 @@ import {
   TableCellBuilderOptions,
   simpleCellBuilder,
 } from './TableCellBuilder';
-import { stringToJsRegex } from '@grafana/data';
-import { DataFrame } from '../../types/data';
 import { InterpolateFunction } from '../../types/panel';
 
 export interface Props extends Themeable {

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

@@ -6,8 +6,7 @@ import { Table, Props } from './Table';
 import { ValueFormatter, getValueFormat, getColorFromHexRgbOrName } from '../../utils/index';
 import { GrafanaTheme } from '../../types/theme';
 import { InterpolateFunction } from '../../types/panel';
-import { Field } from '../../types/data';
-import { dateTime } from '../../utils/moment_wrapper';
+import { Field, dateTime } from '@grafana/data';
 
 export interface TableCellBuilderOptions {
   value: any;

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import TableInputCSV from './TableInputCSV';
 import { action } from '@storybook/addon-actions';
-import { DataFrame } from '../../types/data';
+import { DataFrame } from '@grafana/data';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 const TableInputStories = storiesOf('UI/Table/Input', module);

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import renderer from 'react-test-renderer';
 import TableInputCSV from './TableInputCSV';
-import { DataFrame } from '../../types/data';
+import { DataFrame } from '@grafana/data';
 
 describe('TableInputCSV', () => {
   it('renders correctly', () => {

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import debounce from 'lodash/debounce';
-import { DataFrame } from '../../types/data';
-import { CSVConfig, readCSV } from '../../utils/csv';
+import { DataFrame, CSVConfig, readCSV } from '@grafana/data';
 
 interface Props {
   config?: CSVConfig;

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

@@ -1,4 +1,4 @@
-import { DataFrame } from '../../types/data';
+import { DataFrame } from '@grafana/data';
 import { ColumnStyle } from './TableCellBuilder';
 import { getColorDefinitionByName } from '../../utils/namedColorsPalette';
 

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

@@ -5,8 +5,7 @@ import { action } from '@storybook/addon-actions';
 import { TimePicker } from './TimePicker';
 import { UseState } from '../../utils/storybook/UseState';
 import { withRighAlignedStory } from '../../utils/storybook/withRightAlignedStory';
-import { TimeFragment } from '../../types/time';
-import { dateTime } from '../../utils/moment_wrapper';
+import { TimeFragment, dateTime } from '@grafana/data';
 
 const TimePickerStories = storiesOf('UI/TimePicker', module);
 

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

@@ -8,12 +8,12 @@ import { TimePickerPopover } from './TimePickerPopover';
 import { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper';
 
 // Utils & Services
-import { isDateTime } from '../../utils/moment_wrapper';
-import * as rangeUtil from '../../utils/rangeutil';
+import { isDateTime } from '@grafana/data';
+import * as rangeUtil from '@grafana/data/src/utils/rangeutil';
 import { rawToTimeRange } from './time';
 
 // Types
-import { TimeRange, TimeOption, TimeZone, TIME_FORMAT } from '../../types/time';
+import { TimeRange, TimeOption, TimeZone, TIME_FORMAT } from '@grafana/data';
 import { SelectOptionItem } from '../Select/Select';
 
 export interface Props {

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

@@ -5,7 +5,7 @@ import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { TimePickerCalendar } from './TimePickerCalendar';
 import { UseState } from '../../utils/storybook/UseState';
-import { TimeFragment } from '../../types/time';
+import { TimeFragment } from '@grafana/data';
 
 const TimePickerCalendarStories = storiesOf('UI/TimePicker/TimePickerCalendar', module);
 

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

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import Calendar from 'react-calendar/dist/entry.nostyle';
-import { TimeFragment, TimeZone, TIME_FORMAT } from '../../types/time';
-import { DateTime, dateTime, toUtc } from '../../utils/moment_wrapper';
+import { TimeFragment, TimeZone, TIME_FORMAT } from '@grafana/data';
+import { DateTime, dateTime, toUtc } from '@grafana/data';
 import { stringToDateTimeType } from './time';
 
 export interface Props {

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

@@ -1,8 +1,7 @@
 import React, { PureComponent, ChangeEvent } from 'react';
-import { TimeFragment, TIME_FORMAT, TimeZone } from '../../types/time';
+import { TimeFragment, TIME_FORMAT, TimeZone, isDateTime } from '@grafana/data';
 import { Input } from '../Input/Input';
 import { stringToDateTimeType, isValidTimeString } from './time';
-import { isDateTime } from '../../utils/moment_wrapper';
 
 export interface Props {
   value: TimeFragment;

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

@@ -5,7 +5,7 @@ import { storiesOf } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { TimePickerPopover } from './TimePickerPopover';
 import { UseState } from '../../utils/storybook/UseState';
-import { dateTime, DateTime } from '../../utils/moment_wrapper';
+import { dateTime, DateTime } from '@grafana/data';
 
 const TimePickerPopoverStories = storiesOf('UI/TimePicker/TimePickerPopover', module);
 

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

@@ -7,8 +7,7 @@ import { TimePickerInput } from './TimePickerInput';
 import { rawToTimeRange } from './time';
 
 // Types
-import { DateTime } from '../../utils/moment_wrapper';
-import { TimeRange, TimeZone } from '../../types/time';
+import { DateTime, TimeRange, TimeZone } from '@grafana/data';
 
 export interface Props {
   value: TimeRange;

packages/grafana-ui/src/components/TimePicker/time.ts

@@ -1,7 +1,7 @@
-import { TimeRange, TIME_FORMAT, RawTimeRange, TimeZone } from '../../types/time';
-import { describeTimeRange } from '../../utils/rangeutil';
-import * as dateMath from '../../utils/datemath';
-import { isDateTime, dateTime, DateTime, toUtc } from '../../utils/moment_wrapper';
+import { TimeRange, TIME_FORMAT, RawTimeRange, TimeZone } from '@grafana/data';
+import { describeTimeRange } from '@grafana/data/src/utils/rangeutil';
+import * as dateMath from '@grafana/data/src/utils/datemath';
+import { isDateTime, dateTime, DateTime, toUtc } from '@grafana/data';
 
 export const rawToTimeRange = (raw: RawTimeRange, timeZone?: TimeZone): TimeRange => {
   const from = stringToDateTimeType(raw.from, false, timeZone);

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

@@ -1,9 +1,7 @@
 import { ComponentType, ComponentClass } from 'react';
-import { TimeRange, RawTimeRange } from './time';
+import { TimeRange, RawTimeRange, TableData, TimeSeries, DataFrame, LogRowModel, LoadingState } from '@grafana/data';
 import { PluginMeta, GrafanaPlugin } from './plugin';
-import { TableData, TimeSeries, DataFrame, LoadingState } from './data';
 import { PanelData } from './panel';
-import { LogRowModel } from './logs';
 
 // NOTE: this seems more general than just DataSource
 export interface DataSourcePluginOptionsEditorProps<TOptions> {

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

@@ -1,5 +1,3 @@
-export * from './data';
-export * from './time';
 export * from './panel';
 export * from './plugin';
 export * from './app';
@@ -8,6 +6,4 @@ export * from './theme';
 export * from './graph';
 export * from './threshold';
 export * from './input';
-export * from './logs';
 export * from './displayValue';
-export * from './utils';

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

@@ -1,6 +1,5 @@
 import { ComponentClass, ComponentType } from 'react';
-import { LoadingState, DataFrame } from './data';
-import { TimeRange } from './time';
+import { LoadingState, DataFrame, TimeRange } from '@grafana/data';
 import { ScopedVars, DataQueryRequest, DataQueryError, LegacyResponseData } from './datasource';
 import { PluginMeta, GrafanaPlugin } from './plugin';
 

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

@@ -15,9 +15,8 @@ import {
   GrafanaTheme,
   GrafanaThemeType,
   DecimalCount,
-  Field,
 } from '../types';
-import { DateTime, dateTime } from './moment_wrapper';
+import { DateTime, dateTime, Field } from '@grafana/data';
 
 export type DisplayProcessor = (value: any) => DisplayValue;
 

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

@@ -1,6 +1,5 @@
 import { getFieldProperties, getFieldDisplayValues, GetFieldDisplayValuesOptions } from './fieldDisplay';
-import { FieldType } from '../types/data';
-import { ReducerID } from './fieldReducer';
+import { FieldType, ReducerID } from '@grafana/data';
 import { GrafanaThemeType } from '../types/theme';
 import { getTheme } from '../themes/index';
 

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

@@ -5,18 +5,14 @@ import {
   ValueMapping,
   Threshold,
   DisplayValue,
-  FieldType,
-  NullValueMode,
   GrafanaTheme,
-  DataFrame,
   InterpolateFunction,
-  Field,
   ScopedVars,
   GraphSeriesValue,
 } from '../types/index';
 import { getDisplayProcessor } from './displayValue';
 import { getFlotPairs } from './flotPairs';
-import { ReducerID, reduceField } from './fieldReducer';
+import { ReducerID, reduceField, FieldType, NullValueMode, DataFrame, Field } from '@grafana/data';
 
 export interface FieldDisplayOptions {
   values?: boolean; // If true show each row value

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

@@ -1,5 +1,6 @@
 // Types
-import { NullValueMode, GraphSeriesValue, DataFrame } from '../types/index';
+import { GraphSeriesValue } from '../types/index';
+import { NullValueMode, DataFrame } from '@grafana/data';
 
 export interface FlotPairsOptions {
   series: DataFrame;