Build: add @grafana/data package (#17436)

first step in moving non-ui components to their own package

packages/grafana-build/README.md

@@ -1,4 +0,0 @@
-# Shared build scripts
-
-Shared build scripts for plugins & internal packages.
-

packages/grafana-build/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "@grafana/build",
-  "private": true,
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "tslint": "echo \"Nothing to do\"",
-    "typecheck": "echo \"Nothing to do\""
-  },
-  "author": "Grafana Labs",
-  "license": "Apache-2.0"
-}

packages/grafana-data/README.md

@@ -0,0 +1,3 @@
+# Grafana Data Library
+
+The core data components

packages/grafana-data/index.js

@@ -0,0 +1,7 @@
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./index.production.js');
+} else {
+  module.exports = require('./index.development.js');
+}

packages/grafana-data/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@grafana/data",
+  "version": "6.3.0-alpha.0",
+  "description": "Grafana Data Library",
+  "keywords": [
+    "typescript"
+  ],
+  "main": "src/index.ts",
+  "scripts": {
+    "tslint": "tslint -c tslint.json --project tsconfig.json",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf ./dist ./compiled",
+    "build": "rollup -c rollup.config.ts"
+  },
+  "author": "Grafana Labs",
+  "license": "Apache-2.0",
+  "dependencies": {},
+  "devDependencies": {
+    "@types/jest": "23.3.14",
+    "@types/jquery": "1.10.35",
+    "@types/lodash": "4.14.123",
+    "@types/node": "10.14.1",
+    "@types/papaparse": "4.5.9",
+    "@types/pretty-format": "20.0.1",
+    "@types/react": "16.8.16",
+    "awesome-typescript-loader": "^5.2.1",
+    "lodash": "^4.17.10",
+    "pretty-format": "^24.5.0",
+    "rollup": "1.6.0",
+    "rollup-plugin-commonjs": "9.2.1",
+    "rollup-plugin-node-resolve": "4.0.1",
+    "rollup-plugin-sourcemaps": "0.4.2",
+    "rollup-plugin-terser": "4.0.4",
+    "rollup-plugin-typescript2": "0.19.3",
+    "rollup-plugin-visualizer": "0.9.2",
+    "typescript": "3.4.1"
+  },
+  "resolutions": {
+    "@types/lodash": "4.14.119"
+  }
+}

packages/grafana-data/rollup.config.ts

@@ -0,0 +1,50 @@
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import sourceMaps from 'rollup-plugin-sourcemaps';
+import { terser } from 'rollup-plugin-terser';
+
+const pkg = require('./package.json');
+
+const libraryName = pkg.name;
+
+const buildCjsPackage = ({ env }) => {
+  return {
+    input: `compiled/index.js`,
+    output: [
+      {
+        file: `dist/index.${env}.js`,
+        name: libraryName,
+        format: 'cjs',
+        sourcemap: true,
+        exports: 'named',
+        globals: {},
+      },
+    ],
+    external: ['lodash'], // Use Lodash from grafana
+    plugins: [
+      commonjs({
+        include: /node_modules/,
+        namedExports: {
+          '../../node_modules/lodash/lodash.js': [
+            'flatten',
+            'find',
+            'upperFirst',
+            'debounce',
+            'isNil',
+            'isNumber',
+            'flattenDeep',
+            'map',
+            'chunk',
+            'sortBy',
+            'uniqueId',
+            'zip',
+          ],
+        },
+      }),
+      resolve(),
+      sourceMaps(),
+      env === 'production' && terser(),
+    ],
+  };
+};
+export default [buildCjsPackage({ env: 'development' }), buildCjsPackage({ env: 'production' })];

packages/grafana-data/src/index.ts

@@ -0,0 +1,2 @@
+export * from './utils/index';
+export * from './types/index';

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

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

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

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

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

@@ -1,5 +1,3 @@
-import { SelectOptionItem } from './../components/Select/Select';
-
 export function stringToJsRegex(str: string): RegExp {
   if (str[0] !== '/') {
     return new RegExp('^' + str + '$');
@@ -43,13 +41,6 @@ export function stringToMs(str: string): number {
   }
 }
 
-export function getIntervalFromString(strInterval: string): SelectOptionItem<number> {
-  return {
-    label: strInterval,
-    value: stringToMs(strInterval),
-  };
-}
-
 export function toNumberString(value: number | undefined | null): string {
   if (value !== null && value !== undefined && Number.isFinite(value as number)) {
     return value.toString();

packages/grafana-data/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["dist", "node_modules", "**/*.test.ts", "**/*.test.tsx"]
+}

packages/grafana-data/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx", "../../public/app/types/jquery/*.ts"],
+  "exclude": ["dist", "node_modules"],
+  "compilerOptions": {
+    "rootDirs": ["."],
+    "module": "esnext",
+    "outDir": "compiled",
+    "declaration": true,
+    "declarationDir": "dist",
+    "strict": true,
+    "alwaysStrict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "typeRoots": ["./node_modules/@types", "types"],
+    "skipLibCheck": true, // Temp workaround for Duplicate identifier tsc errors,
+    "removeComments": false
+  }
+}

packages/grafana-data/tslint.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "import-blacklist": [true, ["^@grafana/data.*"], ["^@grafana/ui.*"], ["^@grafana/runtime.*"]]
+  }
+}

packages/grafana-runtime/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/runtime",
-  "version": "6.0.1-alpha.0",
+  "version": "6.3.0-alpha.0",
   "description": "Grafana Runtime Library",
   "keywords": [
     "typescript",

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

@@ -3,8 +3,16 @@ import { interval, Subscription, Subject, of, NEVER } from 'rxjs';
 import { tap, switchMap } from 'rxjs/operators';
 import _ from 'lodash';
 
-import { stringToMs } from '../../utils/string';
+import { stringToMs } from '@grafana/data';
 import { isLive } from '../RefreshPicker/RefreshPicker';
+import { SelectOptionItem } from '../Select/Select';
+
+export function getIntervalFromString(strInterval: string): SelectOptionItem<number> {
+  return {
+    label: strInterval,
+    value: stringToMs(strInterval),
+  };
+}
 
 interface Props {
   func: () => any; // TODO

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

@@ -10,7 +10,7 @@ import { StatsPicker } from '../StatsPicker/StatsPicker';
 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 '../../utils';
+import { toNumberString, toIntegerOrUndefined } from '@grafana/data';
 import { ReducerID } from '../../utils/fieldReducer';
 
 const showOptions: Array<SelectOptionItem<boolean>> = [

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

@@ -8,7 +8,7 @@ import { UnitPicker } from '../UnitPicker/UnitPicker';
 
 // Types
 import { Field } from '../../types/data';
-import { toIntegerOrUndefined } from '../../utils';
+import { toIntegerOrUndefined } 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/Table/Table.tsx

@@ -21,7 +21,7 @@ import {
   TableCellBuilderOptions,
   simpleCellBuilder,
 } from './TableCellBuilder';
-import { stringToJsRegex } from '../../utils/index';
+import { stringToJsRegex } from '@grafana/data';
 import { SeriesData } from '../../types/data';
 import { InterpolateFunction } from '../../types/panel';
 

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

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

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

@@ -7,7 +7,6 @@ export * from './datasource';
 export * from './theme';
 export * from './graph';
 export * from './threshold';
-export * from './navModel';
 export * from './input';
 export * from './logs';
 export * from './displayValue';

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

@@ -3,7 +3,6 @@ export * from './valueFormats/valueFormats';
 export * from './colors';
 export * from './namedColorsPalette';
 export * from './thresholds';
-export * from './string';
 export * from './csv';
 export * from './fieldReducer';
 export * from './displayValue';

public/app/core/actions/navModel.ts

@@ -1,4 +1,4 @@
-import { NavModelItem } from '@grafana/ui';
+import { NavModelItem } from '@grafana/data';
 
 export enum ActionTypes {
   UpdateNavIndex = 'UPDATE_NAV_INDEX',

public/app/core/components/Page/Page.tsx

@@ -7,7 +7,8 @@ import { getTitleFromNavModel } from 'app/core/selectors/navModel';
 import PageHeader from '../PageHeader/PageHeader';
 import Footer from '../Footer/Footer';
 import PageContents from './PageContents';
-import { CustomScrollbar, NavModel } from '@grafana/ui';
+import { CustomScrollbar } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 import { isEqual } from 'lodash';
 
 interface Props {

public/app/core/components/PageHeader/PageHeader.tsx

@@ -1,7 +1,7 @@
 import React, { FormEvent } from 'react';
 import classNames from 'classnames';
 import appEvents from 'app/core/app_events';
-import { NavModel, NavModelItem, NavModelBreadcrumb } from '@grafana/ui';
+import { NavModel, NavModelItem, NavModelBreadcrumb } from '@grafana/data';
 
 export interface Props {
   model: NavModel;

public/app/core/components/sidemenu/BottomNavLinks.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import appEvents from '../../app_events';
 import { User } from '../../services/context_srv';
-import { NavModelItem } from '@grafana/ui';
+import { NavModelItem } from '@grafana/data';
 
 export interface Props {
   link: NavModelItem;

public/app/core/components/sidemenu/BottomSection.tsx

@@ -4,7 +4,7 @@ import SignIn from './SignIn';
 import BottomNavLinks from './BottomNavLinks';
 import { contextSrv } from 'app/core/services/context_srv';
 import config from '../../config';
-import { NavModelItem } from '@grafana/ui';
+import { NavModelItem } from '@grafana/data';
 
 export default function BottomSection() {
   const navTree: NavModelItem[] = _.cloneDeep(config.bootData.navTree);

public/app/core/components/sidemenu/SideMenuDropDown.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import DropDownChild from './DropDownChild';
-import { NavModelItem } from '@grafana/ui';
+import { NavModelItem } from '@grafana/data';
 
 interface Props {
   link: NavModelItem;

public/app/core/core.ts

@@ -48,7 +48,7 @@ import { updateLegendValues } from './time_series2';
 import TimeSeries from './time_series2';
 import { searchResultsDirective } from './components/search/search_results';
 import { manageDashboardsDirective } from './components/manage_dashboards/manage_dashboards';
-import { NavModel } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 
 export {
   profiler,

public/app/core/nav_model_srv.ts

@@ -1,7 +1,7 @@
 import coreModule from 'app/core/core_module';
 import config from 'app/core/config';
 import _ from 'lodash';
-import { NavModel } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 
 export class NavModelSrv {
   navItems: any;

public/app/core/reducers/navModel.ts

@@ -1,5 +1,5 @@
 import { Action, ActionTypes } from 'app/core/actions/navModel';
-import { NavIndex, NavModelItem } from '@grafana/ui';
+import { NavIndex, NavModelItem } from '@grafana/data';
 import config from 'app/core/config';
 
 export function buildInitialState(): NavIndex {

public/app/core/selectors/navModel.ts

@@ -1,4 +1,4 @@
-import { NavModel, NavModelItem, NavIndex } from '@grafana/ui';
+import { NavModel, NavModelItem, NavIndex } from '@grafana/data';
 
 function getNotFoundModel(): NavModel {
   const node: NavModelItem = {

public/app/core/time_series2.ts

@@ -1,6 +1,7 @@
 import { getFlotTickDecimals } from 'app/core/utils/ticks';
 import _ from 'lodash';
-import { getValueFormat, stringToJsRegex, ValueFormatter, DecimalCount } from '@grafana/ui';
+import { getValueFormat, ValueFormatter, DecimalCount } from '@grafana/ui';
+import { stringToJsRegex } from '@grafana/data';
 
 function matchSeriesOverride(aliasOrRegex: string, seriesAlias: string) {
   if (!aliasOrRegex) {

public/app/core/utils/kbn.ts

@@ -1,5 +1,6 @@
 import { has } from 'lodash';
-import { getValueFormat, getValueFormatterIndex, getValueFormats, stringToJsRegex } from '@grafana/ui';
+import { getValueFormat, getValueFormatterIndex, getValueFormats } from '@grafana/ui';
+import { stringToJsRegex } from '@grafana/data';
 import deprecationWarning from '@grafana/ui/src/utils/deprecationWarning';
 
 const kbn: any = {};
@@ -231,7 +232,7 @@ kbn.slugifyForUrl = str => {
 
 /** deprecated since 6.1, use grafana/ui */
 kbn.stringToJsRegex = str => {
-  deprecationWarning('kbn.ts', 'kbn.stringToJsRegex()', '@grafana/ui');
+  deprecationWarning('kbn.ts', 'kbn.stringToJsRegex()', '@grafana/data');
   return stringToJsRegex(str);
 };
 

public/app/features/admin/ServerStats.tsx

@@ -5,7 +5,7 @@ import { StoreState } from 'app/types';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getServerStats, ServerStat } from './state/apis';
 import Page from 'app/core/components/Page/Page';
-import { NavModel } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 
 interface Props {
   navModel: NavModel;

public/app/features/alerting/AlertRuleList.test.tsx

@@ -5,7 +5,7 @@ import { AlertRule } from '../../types';
 import appEvents from '../../core/app_events';
 import { mockActionCreator } from 'app/core/redux';
 import { updateLocation } from 'app/core/actions';
-import { NavModel } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 
 jest.mock('../../core/app_events', () => ({
   emit: jest.fn(),

public/app/features/alerting/AlertRuleList.tsx

@@ -10,7 +10,7 @@ import { StoreState, AlertRule } from 'app/types';
 import { getAlertRulesAsync, setSearchQuery, togglePauseAlertRule } from './state/actions';
 import { getAlertRuleItems, getSearchQuery } from './state/selectors';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
-import { NavModel } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 
 export interface Props {
   navModel: NavModel;

public/app/features/api-keys/ApiKeysPage.test.tsx

@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import { Props, ApiKeysPage } from './ApiKeysPage';
 import { ApiKey } from 'app/types';
 import { getMultipleMockKeys, getMockKey } from './__mocks__/apiKeysMock';
-import { NavModel } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {

public/app/features/api-keys/ApiKeysPage.tsx

@@ -12,7 +12,8 @@ import ApiKeysAddedModal from './ApiKeysAddedModal';
 import config from 'app/core/config';
 import appEvents from 'app/core/app_events';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
-import { DeleteButton, Input, NavModel } from '@grafana/ui';
+import { DeleteButton, Input } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 
 export interface Props {

public/app/features/datasources/DataSourceDashboards.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { DataSourceDashboards, Props } from './DataSourceDashboards';
-import { NavModel, DataSourceSettings } from '@grafana/ui';
+import { DataSourceSettings } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 import { PluginDashboard } from 'app/types';
 
 const setup = (propOverrides?: object) => {

public/app/features/datasources/DataSourceDashboards.tsx

@@ -17,7 +17,8 @@ import { getDataSource } from './state/selectors';
 
 // Types
 import { PluginDashboard, StoreState } from 'app/types';
-import { NavModel, DataSourceSettings } from '@grafana/ui';
+import { DataSourceSettings } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 
 export interface Props {
   navModel: NavModel;

public/app/features/datasources/DataSourcesListPage.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { DataSourcesListPage, Props } from './DataSourcesListPage';
-import { NavModel, DataSourceSettings } from '@grafana/ui';
+import { DataSourceSettings } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
 import { getMockDataSources } from './__mocks__/dataSourcesMocks';
 import { setDataSourcesSearchQuery, setDataSourcesLayoutMode } from './state/actions';

public/app/features/datasources/DataSourcesListPage.tsx

@@ -10,7 +10,8 @@ import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import DataSourcesList from './DataSourcesList';
 
 // Types
-import { NavModel, DataSourceSettings } from '@grafana/ui';
+import { DataSourceSettings } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 import { StoreState } from 'app/types';
 import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector';
 

public/app/features/datasources/NewDataSourcePage.tsx

@@ -6,7 +6,8 @@ import { StoreState } from 'app/types';
 import { addDataSource, loadDataSourceTypes, setDataSourceTypeSearchQuery } from './state/actions';
 import { getDataSourceTypes } from './state/selectors';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
-import { NavModel, DataSourcePluginMeta, List, PluginType } from '@grafana/ui';
+import { DataSourcePluginMeta, List, PluginType } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 
 export interface Props {
   navModel: NavModel;

public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { DataSourceSettingsPage, Props } from './DataSourceSettingsPage';
-import { NavModel, DataSourceSettings, DataSourcePlugin, DataSourceConstructor } from '@grafana/ui';
+import { DataSourceSettings, DataSourcePlugin, DataSourceConstructor } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 import { getMockDataSource } from '../__mocks__/dataSourcesMocks';
 import { getMockPlugin } from '../../plugins/__mocks__/pluginMocks';
 import { setDataSourceName, setIsDefault } from '../state/actions';

public/app/features/datasources/settings/DataSourceSettingsPage.tsx

@@ -24,7 +24,8 @@ import { getRouteParamsId } from 'app/core/selectors/location';
 // Types
 import { StoreState } from 'app/types/';
 import { UrlQueryMap } from '@grafana/runtime';
-import { NavModel, DataSourceSettings, DataSourcePluginMeta } from '@grafana/ui';
+import { DataSourceSettings, DataSourcePluginMeta } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 import { getDataSourceLoadingNav } from '../state/navModel';
 import PluginStateinfo from 'app/features/plugins/PluginStateInfo';
 import { importDataSourcePlugin } from 'app/features/plugins/plugin_loader';

public/app/features/datasources/state/navModel.ts

@@ -1,4 +1,5 @@
-import { DataSourceSettings, PluginType, NavModel, NavModelItem, PluginInclude } from '@grafana/ui';
+import { DataSourceSettings, PluginType, PluginInclude } from '@grafana/ui';
+import { NavModel, NavModelItem } from '@grafana/data';
 import config from 'app/core/config';
 import { GenericDataSourcePlugin } from '../settings/PluginSettings';
 

public/app/features/folders/FolderPermissions.tsx

@@ -2,7 +2,8 @@ import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import Page from 'app/core/components/Page/Page';
-import { Tooltip, NavModel } from '@grafana/ui';
+import { Tooltip } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 import { SlideDown } from 'app/core/components/Animations/SlideDown';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { StoreState, FolderState } from 'app/types';

public/app/features/folders/FolderSettingsPage.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FolderSettingsPage, Props } from './FolderSettingsPage';
 import { shallow } from 'enzyme';
-import { NavModel } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {

public/app/features/folders/FolderSettingsPage.tsx

@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
-import { Input, NavModel } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
+import { Input } from '@grafana/ui';
 import Page from 'app/core/components/Page/Page';
 import appEvents from 'app/core/app_events';
 import { getNavModel } from 'app/core/selectors/navModel';

public/app/features/folders/state/navModel.ts

@@ -1,5 +1,5 @@
 import { FolderDTO } from 'app/types';
-import { NavModelItem, NavModel } from '@grafana/ui';
+import { NavModelItem, NavModel } from '@grafana/data';
 
 export function buildNavModel(folder: FolderDTO): NavModelItem {
   return {

public/app/features/org/OrgDetailsPage.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { OrgDetailsPage, Props } from './OrgDetailsPage';
 import { Organization } from '../../types';
-import { NavModel } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {

public/app/features/org/OrgDetailsPage.tsx

@@ -7,7 +7,7 @@ import SharedPreferences from 'app/core/components/SharedPreferences/SharedPrefe
 import { loadOrganization, setOrganizationName, updateOrganization } from './state/actions';
 import { Organization, StoreState } from 'app/types';
 import { getNavModel } from 'app/core/selectors/navModel';
-import { NavModel } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 
 export interface Props {
   navModel: NavModel;

public/app/features/plugins/AppRootPage.tsx

@@ -10,7 +10,8 @@ import { UrlQueryMap } from '@grafana/runtime';
 import Page from 'app/core/components/Page/Page';
 import { getPluginSettings } from './PluginSettingsCache';
 import { importAppPlugin } from './plugin_loader';
-import { AppPlugin, NavModel, AppPluginMeta, PluginType } from '@grafana/ui';
+import { AppPlugin, AppPluginMeta, PluginType } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 import { getLoadingNav } from './PluginPage';
 import { getNotFoundNav, getWarningNav } from 'app/core/nav_model_srv';
 import { appEvents } from 'app/core/core';

public/app/features/plugins/PluginListPage.test.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { PluginListPage, Props } from './PluginListPage';
 import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
-import { PluginMeta, NavModel } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
+import { PluginMeta } from '@grafana/ui';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {

public/app/features/plugins/PluginListPage.tsx

@@ -8,7 +8,8 @@ import { loadPlugins, setPluginsLayoutMode, setPluginsSearchQuery } from './stat
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getLayoutMode, getPlugins, getPluginsSearchQuery } from './state/selectors';
 import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector';
-import { PluginMeta, NavModel } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
+import { PluginMeta } from '@grafana/ui';
 
 export interface Props {
   navModel: NavModel;

public/app/features/plugins/PluginPage.tsx

@@ -8,8 +8,6 @@ import find from 'lodash/find';
 import { UrlQueryMap } from '@grafana/runtime';
 import { StoreState } from 'app/types';
 import {
-  NavModel,
-  NavModelItem,
   PluginType,
   GrafanaPlugin,
   PluginInclude,
@@ -20,6 +18,7 @@ import {
   AppPlugin,
   PluginIncludeType,
 } from '@grafana/ui';
+import { NavModel, NavModelItem } from '@grafana/data';
 
 import Page from 'app/core/components/Page/Page';
 import { getPluginSettings } from './PluginSettingsCache';

public/app/features/plugins/plugin_loader.ts

@@ -28,8 +28,9 @@ import { BackendSrv, getBackendSrv } from 'app/core/services/backend_srv';
 import impressionSrv from 'app/core/services/impression_srv';
 import builtInPlugins from './built_in_plugins';
 import * as d3 from 'd3';
+import * as grafanaData from '@grafana/data';
 import * as grafanaUI from '@grafana/ui';
-import * as grafanaRT from '@grafana/runtime';
+import * as grafanaRuntime from '@grafana/runtime';
 
 // rxjs
 import { Observable, Subject } from 'rxjs';
@@ -68,8 +69,9 @@ function exposeToPlugin(name: string, component: any) {
   });
 }
 
+exposeToPlugin('@grafana/data', grafanaData);
 exposeToPlugin('@grafana/ui', grafanaUI);
-exposeToPlugin('@grafana/runtime', grafanaRT);
+exposeToPlugin('@grafana/runtime', grafanaRuntime);
 exposeToPlugin('lodash', _);
 exposeToPlugin('moment', moment);
 exposeToPlugin('jquery', jquery);

public/app/features/teams/TeamList.test.tsx

@@ -4,7 +4,7 @@ import { Props, TeamList } from './TeamList';
 import { Team, OrgRole } from '../../types';
 import { getMockTeam, getMultipleMockTeams } from './__mocks__/teamMocks';
 import { User } from 'app/core/services/context_srv';
-import { NavModel } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {

public/app/features/teams/TeamList.tsx

@@ -2,7 +2,8 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import Page from 'app/core/components/Page/Page';
-import { DeleteButton, NavModel } from '@grafana/ui';
+import { DeleteButton } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import { Team, OrgRole } from 'app/types';
 import { loadTeams, deleteTeam, setSearchQuery } from './state/actions';

public/app/features/teams/TeamPages.test.tsx

@@ -4,7 +4,7 @@ import { TeamPages, Props } from './TeamPages';
 import { Team, TeamMember, OrgRole } from '../../types';
 import { getMockTeam } from './__mocks__/teamMocks';
 import { User } from 'app/core/services/context_srv';
-import { NavModel } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 
 jest.mock('app/core/config', () => ({
   buildInfo: { isEnterprise: true },

public/app/features/teams/TeamPages.tsx

@@ -14,7 +14,7 @@ import { getTeamLoadingNav } from './state/navModel';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getRouteParamsId, getRouteParamsPage } from '../../core/selectors/location';
 import { contextSrv, User } from 'app/core/services/context_srv';
-import { NavModel } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 
 export interface Props {
   team: Team;

public/app/features/teams/state/navModel.ts

@@ -1,6 +1,6 @@
 import { Team, TeamPermissionLevel } from 'app/types';
 import config from 'app/core/config';
-import { NavModelItem, NavModel } from '@grafana/ui';
+import { NavModelItem, NavModel } from '@grafana/data';
 
 export function buildNavModel(team: Team): NavModelItem {
   const navModel = {

public/app/features/templating/datasource_variable.ts

@@ -1,5 +1,5 @@
 import { Variable, containsVariable, assignModelProperties, variableTypes } from './variable';
-import { stringToJsRegex } from '@grafana/ui';
+import { stringToJsRegex } from '@grafana/data';
 
 export class DatasourceVariable implements Variable {
   regex: any;

public/app/features/templating/query_variable.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { Variable, containsVariable, assignModelProperties, variableTypes } from './variable';
-import { stringToJsRegex } from '@grafana/ui';
+import { stringToJsRegex } from '@grafana/data';
 
 function getNoneOption() {
   return { text: 'None', value: '', isNone: true };

public/app/features/users/UsersListPage.test.tsx

@@ -4,7 +4,7 @@ import { UsersListPage, Props } from './UsersListPage';
 import { Invitee, OrgUser } from 'app/types';
 import { getMockUser } from './__mocks__/userMocks';
 import appEvents from '../../core/app_events';
-import { NavModel } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 
 jest.mock('../../core/app_events', () => ({
   emit: jest.fn(),

public/app/features/users/UsersListPage.tsx

@@ -11,7 +11,7 @@ import appEvents from 'app/core/app_events';
 import { loadUsers, loadInvitees, setUsersSearchQuery, updateUser, removeUser } from './state/actions';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getInvitees, getUsers, getUsersSearchQuery } from './state/selectors';
-import { NavModel } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
 
 export interface Props {
   navModel: NavModel;

public/app/plugins/app/example-app/ExampleRootPage.tsx

@@ -2,7 +2,8 @@
 import React, { PureComponent } from 'react';
 
 // Types
-import { AppRootProps, NavModelItem } from '@grafana/ui';
+import { NavModelItem } from '@grafana/data';
+import { AppRootProps } from '@grafana/ui';
 
 interface Props extends AppRootProps {}
 

public/app/plugins/panel/table/renderer.ts

@@ -1,5 +1,6 @@
 import _ from 'lodash';
-import { getValueFormat, getColorFromHexRgbOrName, GrafanaThemeType, stringToJsRegex } from '@grafana/ui';
+import { getValueFormat, getColorFromHexRgbOrName, GrafanaThemeType } from '@grafana/ui';
+import { stringToJsRegex } from '@grafana/data';
 import { ColumnStyle } from '@grafana/ui/src/components/Table/TableCellBuilder';
 import { dateTime } from '@grafana/ui/src/utils/moment_wrapper';
 

public/app/types/store.ts

@@ -12,7 +12,7 @@ import { UsersState, UserState } from './user';
 import { OrganizationState } from './organization';
 import { AppNotificationsState } from './appNotifications';
 import { PluginsState } from './plugins';
-import { NavIndex } from '@grafana/ui';
+import { NavIndex } from '@grafana/data';
 import { ApplicationState } from './application';
 
 export interface StoreState {

public/test/mocks/common.ts

@@ -1,4 +1,4 @@
-import { NavModel, NavModelItem } from '@grafana/ui';
+import { NavModel, NavModelItem } from '@grafana/data';
 
 export const backendSrv = {
   get: jest.fn(),

scripts/grunt/default_task.js

@@ -34,8 +34,8 @@ module.exports = function(grunt) {
   grunt.registerTask('no-only-tests', function() {
     var files = grunt.file.expand(
       'public/**/*@(_specs|.test).@(ts|js|tsx|jsx)',
-      'packages/grafana-ui/**/*@(_specs|.test).@(ts|js|tsx|jsx)',
+      'packages/grafana-data/**/*@(_specs|.test).@(ts|js|tsx|jsx)',
-      'packages/grafana-runtime/**/*@(_specs|.test).@(ts|js|tsx|jsx)'
+      'packages/**/*@(_specs|.test).@(ts|js|tsx|jsx)'
     );
     grepFiles(files, '.only(', 'found only statement in test: ');
   });