Refactor: move datemath to grafana/ui (#16890)

* move datemath to grafana/ui

* don't reference @grafana/ui from its own component

packages/grafana-ui/package.json

@@ -59,6 +59,7 @@
     "@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",
@@ -77,6 +78,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-ui/src/components/TimePicker/TimePicker.tsx

@@ -1,12 +1,12 @@
 import React, { PureComponent } from 'react';
 import moment from 'moment';
 import { TimeRange, TimeOptions, TimeOption, SelectOptionItem } from '@grafana/ui';
-import { ButtonSelect } from '@grafana/ui/src/components/Select/ButtonSelect';
+import { ButtonSelect } from '../Select/ButtonSelect';
 import { mapTimeOptionToTimeRange, mapTimeRangeToRangeString } from './time';
 import { Props as TimePickerPopoverProps } from './TimePickerPopover';
 import { TimePickerOptionGroup } from './TimePickerOptionGroup';
-import { PopperContent } from '@grafana/ui/src/components/Tooltip/PopperController';
-import { Timezone } from '../../../../../public/app/core/utils/datemath';
+import { PopperContent } from '../Tooltip/PopperController';
+import { Timezone } from '../../utils/datemath';
 
 export interface Props {
   value: TimeRange;

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

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
 import Calendar from 'react-calendar/dist/entry.nostyle';
 import moment, { Moment } from 'moment';
-import { TimeFragment } from '@grafana/ui';
-import { Timezone } from '../../../../../public/app/core/utils/datemath';
+import { TimeFragment } from '../../types/time';
+import { Timezone } from '../../utils/datemath';
 
 import { stringToMoment } from './time';
 

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

@@ -1,8 +1,9 @@
 import React, { PureComponent, ChangeEvent } from 'react';
 import moment from 'moment';
-import { TimeFragment, TIME_FORMAT, Input } from '@grafana/ui';
+import { TimeFragment, TIME_FORMAT } from '../../types/time';
 
 import { stringToMoment, isValidTimeString } from './time';
+import { Input } from '../Input/Input';
 
 export interface Props {
   value: TimeFragment;

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

@@ -1,11 +1,11 @@
 import React, { Component, SyntheticEvent } from 'react';
-import { TimeRange, TimeOptions, TimeOption } from '@grafana/ui';
+import { TimeRange, TimeOptions, TimeOption } from '../../types/time';
 import { Moment } from 'moment';
 
 import { TimePickerCalendar } from './TimePickerCalendar';
 import { TimePickerInput } from './TimePickerInput';
 import { mapTimeOptionToTimeRange } from './time';
-import { Timezone } from '../../../../../public/app/core/utils/datemath';
+import { Timezone } from '../../utils/datemath';
 
 export interface Props {
   value: TimeRange;

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

@@ -1,8 +1,8 @@
 import moment, { Moment } from 'moment';
 import { TimeOption, TimeRange, TIME_FORMAT } from '@grafana/ui';
 
-import * as dateMath from '../../../../../public/app/core/utils/datemath';
-import { describeTimeRange } from '../../../../../public/app/core/utils/rangeutil';
+import * as dateMath from '@grafana/ui/src/utils/datemath';
+import { describeTimeRange } from '@grafana/ui/src/utils/rangeutil';
 
 export const mapTimeOptionToTimeRange = (
   timeOption: TimeOption,

public/app/core/specs/datemath.test.ts → packages/grafana-ui/src/utils/datemath.test.ts

@@ -1,15 +1,15 @@
-import sinon from 'sinon';
+import sinon, { SinonFakeTimers } from 'sinon';
 
-import * as dateMath from 'app/core/utils/datemath';
-import moment from 'moment';
-import _ from 'lodash';
+import * as dateMath from './datemath';
+import moment, { Moment, unitOfTime } from 'moment';
+import each from 'lodash/each';
 
 describe('DateMath', () => {
-  const spans = ['s', 'm', 'h', 'd', 'w', 'M', 'y'];
+  const spans: unitOfTime.Base[] = ['s', 'm', 'h', 'd', 'w', 'M', 'y'];
   const anchor = '2014-01-01T06:06:06.666Z';
   const unix = moment(anchor).valueOf();
   const format = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
-  let clock;
+  let clock: SinonFakeTimers;
 
   describe('errors', () => {
     it('should return undefined if passed empty string', () => {
@@ -42,7 +42,7 @@ describe('DateMath', () => {
     expected.setSeconds(0);
     expected.setMilliseconds(0);
 
-    const startOfDay = dateMath.parse('now/d', false).valueOf();
+    const startOfDay = dateMath.parse('now/d', false)!.valueOf();
     expect(startOfDay).toBe(expected.getTime());
   });
 
@@ -50,13 +50,13 @@ describe('DateMath', () => {
     const today = new Date();
     const expected = new Date(Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate(), 0, 0, 0, 0));
 
-    const startOfDay = dateMath.parse('now/d', false, 'utc').valueOf();
+    const startOfDay = dateMath.parse('now/d', false, 'utc')!.valueOf();
     expect(startOfDay).toBe(expected.getTime());
   });
 
   describe('subtraction', () => {
-    let now;
-    let anchored;
+    let now: Moment;
+    let anchored: Moment;
 
     beforeEach(() => {
       clock = sinon.useFakeTimers(unix);
@@ -64,16 +64,16 @@ describe('DateMath', () => {
       anchored = moment(anchor);
     });
 
-    _.each(spans, span => {
+    each(spans, span => {
       const nowEx = 'now-5' + span;
       const thenEx = anchor + '||-5' + span;
 
       it('should return 5' + span + ' ago', () => {
-        expect(dateMath.parse(nowEx).format(format)).toEqual(now.subtract(5, span).format(format));
+        expect(dateMath.parse(nowEx)!.format(format)).toEqual(now.subtract(5, span).format(format));
       });
 
       it('should return 5' + span + ' before ' + anchor, () => {
-        expect(dateMath.parse(thenEx).format(format)).toEqual(anchored.subtract(5, span).format(format));
+        expect(dateMath.parse(thenEx)!.format(format)).toEqual(anchored.subtract(5, span).format(format));
       });
     });
 
@@ -83,20 +83,20 @@ describe('DateMath', () => {
   });
 
   describe('rounding', () => {
-    let now;
+    let now: Moment;
 
     beforeEach(() => {
       clock = sinon.useFakeTimers(unix);
       now = moment();
     });
 
-    _.each(spans, span => {
+    each(spans, span => {
       it('should round now to the beginning of the ' + span, () => {
-        expect(dateMath.parse('now/' + span).format(format)).toEqual(now.startOf(span).format(format));
+        expect(dateMath.parse('now/' + span)!.format(format)).toEqual(now.startOf(span).format(format));
       });
 
       it('should round now to the end of the ' + span, () => {
-        expect(dateMath.parse('now/' + span, true).format(format)).toEqual(now.endOf(span).format(format));
+        expect(dateMath.parse('now/' + span, true)!.format(format)).toEqual(now.endOf(span).format(format));
       });
     });
 
@@ -117,12 +117,12 @@ describe('DateMath', () => {
   describe('relative time to date parsing', () => {
     it('should handle negative time', () => {
       const date = dateMath.parseDateMath('-2d', moment([2014, 1, 5]));
-      expect(date.valueOf()).toEqual(moment([2014, 1, 3]).valueOf());
+      expect(date!.valueOf()).toEqual(moment([2014, 1, 3]).valueOf());
     });
 
     it('should handle multiple math expressions', () => {
       const date = dateMath.parseDateMath('-2d-6h', moment([2014, 1, 5]));
-      expect(date.valueOf()).toEqual(moment([2014, 1, 2, 18]).valueOf());
+      expect(date!.valueOf()).toEqual(moment([2014, 1, 2, 18]).valueOf());
     });
 
     it('should return false when invalid expression', () => {

public/app/core/utils/datemath.ts → packages/grafana-ui/src/utils/datemath.ts

@@ -1,8 +1,8 @@
-// @ts-ignore
-import _ from 'lodash';
-import moment from 'moment';
+import includes from 'lodash/includes';
+import isDate from 'lodash/isDate';
+import moment, { unitOfTime } from 'moment';
 
-const units = ['y', 'M', 'w', 'd', 'h', 'm', 's'];
+const units: unitOfTime.Base[] = ['y', 'M', 'w', 'd', 'h', 'm', 's'];
 
 export type Timezone = 'utc';
 
@@ -26,7 +26,7 @@ export function parse(
     if (moment.isMoment(text)) {
       return text;
     }
-    if (_.isDate(text)) {
+    if (isDate(text)) {
       return moment(text);
     }
     // We got some non string which is not a moment nor Date. TS should be able to check for that but not always.
@@ -134,7 +134,7 @@ export function parseDateMath(mathString: string, time: any, roundUp?: boolean):
     }
     unit = mathString.charAt(i++);
 
-    if (!_.includes(units, unit)) {
+    if (!includes(units, unit)) {
       return undefined;
     } else {
       if (type === 0) {

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

@@ -16,3 +16,6 @@ export * from './validate';
 export { getFlotPairs } from './flotPairs';
 export * from './object';
 export * from './fieldCache';
+
+// Names are too general to export
+// rangeutils, datemath

public/app/core/directives/ng_model_on_blur.ts

@@ -1,5 +1,5 @@
 import coreModule from '../core_module';
-import * as rangeUtil from 'app/core/utils/rangeutil';
+import * as rangeUtil from '@grafana/ui/src/utils/rangeutil';
 
 function ngModelOnBlur() {
   return {

public/app/core/specs/rangeutil.test.ts

@@ -1,4 +1,4 @@
-import * as rangeUtil from 'app/core/utils/rangeutil';
+import * as rangeUtil from '@grafana/ui/src/utils/rangeutil';
 import _ from 'lodash';
 import moment from 'moment';
 

public/app/core/utils/explore.ts

@@ -3,7 +3,7 @@ import _ from 'lodash';
 import moment, { Moment } from 'moment';
 
 // Services & Utils
-import * as dateMath from 'app/core/utils/datemath';
+import * as dateMath from '@grafana/ui/src/utils/datemath';
 import { renderUrl } from 'app/core/utils/url';
 import kbn from 'app/core/utils/kbn';
 import store from 'app/core/store';

public/app/features/dashboard/components/TimePicker/TimePickerCtrl.ts

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import angular from 'angular';
 import moment from 'moment';
 
-import * as rangeUtil from 'app/core/utils/rangeutil';
+import * as rangeUtil from '@grafana/ui/src/utils/rangeutil';
 
 export class TimePickerCtrl {
   static tooltipFormat = 'MMM D, YYYY HH:mm:ss';

public/app/features/dashboard/components/TimePicker/validation.ts

@@ -1,5 +1,5 @@
 import moment from 'moment';
-import * as dateMath from 'app/core/utils/datemath';
+import * as dateMath from '@grafana/ui/src/utils/datemath';
 
 export function inputDateDirective() {
   return {

public/app/features/dashboard/panel_editor/QueryOptions.tsx

@@ -2,7 +2,7 @@
 import React, { PureComponent, ChangeEvent, FocusEvent } from 'react';
 
 // Utils
-import { isValidTimeSpan } from 'app/core/utils/rangeutil';
+import { isValidTimeSpan } from '@grafana/ui/src/utils/rangeutil';
 
 // Components
 import { DataSourceSelectItem, EventsWithValidation, Input, InputStatus, Switch, ValidationEvents } from '@grafana/ui';

public/app/features/dashboard/services/DashboardLoaderSrv.ts

@@ -3,7 +3,7 @@ import moment from 'moment';
 import _ from 'lodash';
 import $ from 'jquery';
 import kbn from 'app/core/utils/kbn';
-import * as dateMath from 'app/core/utils/datemath';
+import * as dateMath from '@grafana/ui/src/utils/datemath';
 import impressionSrv from 'app/core/services/impression_srv';
 
 export class DashboardLoaderSrv {

public/app/features/dashboard/services/TimeSrv.ts

@@ -5,7 +5,7 @@ import _ from 'lodash';
 // Utils
 import kbn from 'app/core/utils/kbn';
 import coreModule from 'app/core/core_module';
-import * as dateMath from 'app/core/utils/datemath';
+import * as dateMath from '@grafana/ui/src/utils/datemath';
 
 // Types
 import { TimeRange, RawTimeRange } from '@grafana/ui';

public/app/features/dashboard/state/PanelQueryState.ts

@@ -4,7 +4,7 @@ import isEqual from 'lodash/isEqual';
 
 // Utils & Services
 import { getBackendSrv } from 'app/core/services/backend_srv';
-import * as dateMath from 'app/core/utils/datemath';
+import * as dateMath from '@grafana/ui/src/utils/datemath';
 import { guessFieldTypes, toSeriesData, isSeriesData } from '@grafana/ui/src/utils';
 
 // Types

public/app/features/dashboard/utils/panel.ts

@@ -8,8 +8,8 @@ import { TimeRange } from '@grafana/ui';
 
 // Utils
 import { isString as _isString } from 'lodash';
-import * as rangeUtil from 'app/core/utils/rangeutil';
-import * as dateMath from 'app/core/utils/datemath';
+import * as rangeUtil from '@grafana/ui/src/utils/rangeutil';
+import * as dateMath from '@grafana/ui/src/utils/datemath';
 import appEvents from 'app/core/app_events';
 
 // Services

public/app/features/explore/Logs.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
 
-import * as rangeUtil from 'app/core/utils/rangeutil';
+import * as rangeUtil from '@grafana/ui/src/utils/rangeutil';
 import { RawTimeRange, Switch, LogLevel, TimeZone, TimeRange, AbsoluteTimeRange } from '@grafana/ui';
 import TimeSeries from 'app/core/time_series2';
 

public/app/features/explore/TimePicker.test.tsx

@@ -3,8 +3,8 @@ import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import moment from 'moment';
 
-import * as dateMath from 'app/core/utils/datemath';
-import * as rangeUtil from 'app/core/utils/rangeutil';
+import * as dateMath from '@grafana/ui/src/utils/datemath';
+import * as rangeUtil from '@grafana/ui/src/utils/rangeutil';
 import TimePicker from './TimePicker';
 import { RawTimeRange, TimeRange, TIME_FORMAT } from '@grafana/ui';
 

public/app/features/explore/TimePicker.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import moment from 'moment';
-import * as rangeUtil from 'app/core/utils/rangeutil';
+import * as rangeUtil from '@grafana/ui/src/utils/rangeutil';
 import { Input, RawTimeRange, TimeRange, TIME_FORMAT } from '@grafana/ui';
 
 interface TimePickerProps {

public/app/features/plugins/plugin_loader.ts

@@ -19,7 +19,7 @@ import TimeSeries from 'app/core/time_series2';
 import TableModel from 'app/core/table_model';
 import { coreModule, appEvents, contextSrv } from 'app/core/core';
 import { DataSourcePlugin, AppPlugin, PanelPlugin, PluginMeta, DataSourcePluginMeta } from '@grafana/ui/src/types';
-import * as datemath from 'app/core/utils/datemath';
+import * as datemath from '@grafana/ui/src/utils/datemath';
 import * as fileExport from 'app/core/utils/file_export';
 import * as flatten from 'app/core/utils/flatten';
 import * as ticks from 'app/core/utils/ticks';
@@ -105,7 +105,7 @@ exposeToPlugin('app/core/services/backend_srv', {
 });
 
 exposeToPlugin('app/plugins/sdk', sdk);
-exposeToPlugin('app/core/utils/datemath', datemath);
+exposeToPlugin('@grafana/ui/src/utils/datemath', datemath);
 exposeToPlugin('app/core/utils/file_export', fileExport);
 exposeToPlugin('app/core/utils/flatten', flatten);
 exposeToPlugin('app/core/utils/kbn', kbn);

public/app/plugins/datasource/cloudwatch/datasource.ts

@@ -1,6 +1,6 @@
 import angular from 'angular';
 import _ from 'lodash';
-import * as dateMath from 'app/core/utils/datemath';
+import * as dateMath from '@grafana/ui/src/utils/datemath';
 import kbn from 'app/core/utils/kbn';
 import { CloudWatchQuery } from './types';
 import { DataSourceApi, DataQueryRequest } from '@grafana/ui/src/types';

public/app/plugins/datasource/cloudwatch/specs/datasource.test.ts

@@ -1,6 +1,6 @@
 import '../datasource';
 import CloudWatchDatasource from '../datasource';
-import * as dateMath from 'app/core/utils/datemath';
+import * as dateMath from '@grafana/ui/src/utils/datemath';
 import { TemplateSrv } from 'app/features/templating/template_srv';
 import { CustomVariable } from 'app/features/templating/all';
 import _ from 'lodash';

public/app/plugins/datasource/elasticsearch/specs/datasource.test.ts

@@ -1,5 +1,5 @@
 import angular from 'angular';
-import * as dateMath from 'app/core/utils/datemath';
+import * as dateMath from '@grafana/ui/src/utils/datemath';
 import _ from 'lodash';
 import moment from 'moment';
 import { ElasticDatasource } from '../datasource';

public/app/plugins/datasource/graphite/datasource.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import * as dateMath from 'app/core/utils/datemath';
+import * as dateMath from '@grafana/ui/src/utils/datemath';
 import { isVersionGtOrEq, SemVersion } from 'app/core/utils/version';
 import gfunc from './gfunc';
 

public/app/plugins/datasource/influxdb/datasource.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 
-import * as dateMath from 'app/core/utils/datemath';
+import * as dateMath from '@grafana/ui/src/utils/datemath';
 import InfluxSeries from './influx_series';
 import InfluxQuery from './influx_query';
 import ResponseParser from './response_parser';

public/app/plugins/datasource/loki/datasource.ts

@@ -2,7 +2,7 @@
 import _ from 'lodash';
 
 // Services & Utils
-import * as dateMath from 'app/core/utils/datemath';
+import * as dateMath from '@grafana/ui/src/utils/datemath';
 import { addLabelToSelector } from 'app/plugins/datasource/prometheus/add_label_to_query';
 import LanguageProvider from './language_provider';
 import { logStreamToSeriesData } from './result_transformer';

public/app/plugins/datasource/opentsdb/datasource.ts

@@ -1,6 +1,6 @@
 import angular from 'angular';
 import _ from 'lodash';
-import * as dateMath from 'app/core/utils/datemath';
+import * as dateMath from '@grafana/ui/src/utils/datemath';
 
 export default class OpenTsDatasource {
   type: any;

public/app/plugins/datasource/prometheus/datasource.ts

@@ -4,7 +4,7 @@ import $ from 'jquery';
 
 // Services & Utils
 import kbn from 'app/core/utils/kbn';
-import * as dateMath from 'app/core/utils/datemath';
+import * as dateMath from '@grafana/ui/src/utils/datemath';
 import PrometheusMetricFindQuery from './metric_find_query';
 import { ResultTransformer } from './result_transformer';
 import PrometheusLanguageProvider from './language_provider';

public/app/plugins/panel/alertlist/module.ts

@@ -3,7 +3,7 @@ import moment from 'moment';
 import alertDef from '../../../features/alerting/state/alertDef';
 import { PanelCtrl } from 'app/plugins/sdk';
 
-import * as dateMath from 'app/core/utils/datemath';
+import * as dateMath from '@grafana/ui/src/utils/datemath';
 
 class AlertListPanel extends PanelCtrl {
   static templateUrl = 'module.html';

public/test/specs/helpers.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import config from 'app/core/config';
-import * as dateMath from 'app/core/utils/datemath';
+import * as dateMath from '@grafana/ui/src/utils/datemath';
 import { angularMocks, sinon } from '../lib/common';
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
 import { PanelPluginMeta, RawTimeRange } from '@grafana/ui';