Chore: Let kbn util infer types (#26907)

* Chore: Let kbn util infer types

Type fixes where needed

* Address review comments + test fix

* Modify kbn method and property names to pascalCase

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

@@ -43,7 +43,7 @@ export interface QueryResultMeta {
    * Legacy data source specific, should be moved to custom
    * */
   gmdMeta?: any[]; // used by cloudwatch
-  alignmentPeriod?: string; // used by cloud monitoring
+  alignmentPeriod?: number; // used by cloud monitoring
   searchWords?: string[]; // used by log models and loki
   limit?: number; // used by log models and loki
   json?: boolean; // used to keep track of old json doc values

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

@@ -32,7 +32,7 @@ export interface ValueFormatCategory {
   formats: ValueFormat[];
 }
 
-interface ValueFormatterIndex {
+export interface ValueFormatterIndex {
   [id: string]: ValueFormatter;
 }
 

public/app/core/directives/misc.ts

@@ -14,7 +14,7 @@ function tip($compile: any) {
         '<i class="grafana-tip fa fa-' +
         (attrs.icon || 'question-circle') +
         '" bs-tooltip="\'' +
-        kbn.addslashes(elem.text()) +
+        kbn.addSlashes(elem.text()) +
         '\'"></i>';
       _t = _t.replace(/{/g, '\\{').replace(/}/g, '\\}');
       elem.replaceWith($compile(angular.element(_t))(scope));

public/app/core/services/context_srv.ts

@@ -61,7 +61,7 @@ export class ContextSrv {
     if (!config.minRefreshInterval) {
       return true;
     }
-    return kbn.interval_to_ms(interval) >= kbn.interval_to_ms(config.minRefreshInterval);
+    return kbn.intervalToMs(interval) >= kbn.intervalToMs(config.minRefreshInterval);
   }
 
   getValidInterval(interval: string) {

public/app/core/utils/kbn.test.ts

@@ -53,7 +53,7 @@ describe('Chcek KBN value formats', () => {
 
 describe('describe_interval', () => {
   it('falls back to seconds if input is a number', () => {
-    expect(kbn.describe_interval('123')).toEqual({
+    expect(kbn.describeInterval('123')).toEqual({
       sec: 1,
       type: 's',
       count: 123,
@@ -61,7 +61,7 @@ describe('describe_interval', () => {
   });
 
   it('parses a valid time unt string correctly', () => {
-    expect(kbn.describe_interval('123h')).toEqual({
+    expect(kbn.describeInterval('123h')).toEqual({
       sec: 3600,
       type: 'h',
       count: 123,
@@ -69,7 +69,7 @@ describe('describe_interval', () => {
   });
 
   it('fails if input is invalid', () => {
-    expect(() => kbn.describe_interval('123xyz')).toThrow();
+    expect(() => kbn.describeInterval('123xyz')).toThrow();
-    expect(() => kbn.describe_interval('xyz')).toThrow();
+    expect(() => kbn.describeInterval('xyz')).toThrow();
   });
 });

public/app/core/utils/kbn.ts

@@ -1,319 +1,291 @@
-import { has } from 'lodash';
 import {
+  DecimalCount,
+  deprecationWarning,
+  formattedValueToString,
   getValueFormat,
-  getValueFormatterIndex,
   getValueFormats,
+  getValueFormatterIndex,
   stringToJsRegex,
   TimeRange,
-  deprecationWarning,
+  ValueFormatterIndex,
-  DecimalCount,
-  formattedValueToString,
 } from '@grafana/data';
+import { has } from 'lodash';
 
-const kbn: any = {};
+const kbn = {
-
+  valueFormats: {} as ValueFormatterIndex,
-kbn.valueFormats = {};
+  intervalRegex: /(\d+(?:\.\d+)?)(ms|[Mwdhmsy])/,
-
+  intervalsInSeconds: {
-kbn.regexEscape = (value: string) => {
+    y: 31536000,
-  return value.replace(/[\\^$*+?.()|[\]{}\/]/g, '\\$&');
+    M: 2592000,
-};
+    w: 604800,
-
+    d: 86400,
-///// HELPER FUNCTIONS /////
+    h: 3600,
-
+    m: 60,
-kbn.round_interval = (interval: number) => {
+    s: 1,
-  switch (true) {
+    ms: 0.001,
-    // 0.015s
+  } as { [index: string]: number },
-    case interval < 15:
+  regexEscape: (value: string) => value.replace(/[\\^$*+?.()|[\]{}\/]/g, '\\$&'),
-      return 10; // 0.01s
+  roundInterval: (interval: number) => {
-    // 0.035s
+    switch (true) {
-    case interval < 35:
+      // 0.015s
-      return 20; // 0.02s
+      case interval < 15:
-    // 0.075s
+        return 10; // 0.01s
-    case interval < 75:
+      // 0.035s
-      return 50; // 0.05s
+      case interval < 35:
-    // 0.15s
+        return 20; // 0.02s
-    case interval < 150:
+      // 0.075s
-      return 100; // 0.1s
+      case interval < 75:
-    // 0.35s
+        return 50; // 0.05s
-    case interval < 350:
+      // 0.15s
-      return 200; // 0.2s
+      case interval < 150:
-    // 0.75s
+        return 100; // 0.1s
-    case interval < 750:
+      // 0.35s
-      return 500; // 0.5s
+      case interval < 350:
-    // 1.5s
+        return 200; // 0.2s
-    case interval < 1500:
+      // 0.75s
-      return 1000; // 1s
+      case interval < 750:
-    // 3.5s
+        return 500; // 0.5s
-    case interval < 3500:
+      // 1.5s
-      return 2000; // 2s
+      case interval < 1500:
-    // 7.5s
+        return 1000; // 1s
-    case interval < 7500:
+      // 3.5s
-      return 5000; // 5s
+      case interval < 3500:
-    // 12.5s
+        return 2000; // 2s
-    case interval < 12500:
+      // 7.5s
-      return 10000; // 10s
+      case interval < 7500:
-    // 17.5s
+        return 5000; // 5s
-    case interval < 17500:
+      // 12.5s
-      return 15000; // 15s
+      case interval < 12500:
-    // 25s
+        return 10000; // 10s
-    case interval < 25000:
+      // 17.5s
-      return 20000; // 20s
+      case interval < 17500:
-    // 45s
+        return 15000; // 15s
-    case interval < 45000:
+      // 25s
-      return 30000; // 30s
+      case interval < 25000:
-    // 1.5m
+        return 20000; // 20s
-    case interval < 90000:
+      // 45s
-      return 60000; // 1m
+      case interval < 45000:
-    // 3.5m
+        return 30000; // 30s
-    case interval < 210000:
+      // 1.5m
-      return 120000; // 2m
+      case interval < 90000:
-    // 7.5m
+        return 60000; // 1m
-    case interval < 450000:
+      // 3.5m
-      return 300000; // 5m
+      case interval < 210000:
-    // 12.5m
+        return 120000; // 2m
-    case interval < 750000:
+      // 7.5m
-      return 600000; // 10m
+      case interval < 450000:
-    // 12.5m
+        return 300000; // 5m
-    case interval < 1050000:
+      // 12.5m
-      return 900000; // 15m
+      case interval < 750000:
-    // 25m
+        return 600000; // 10m
-    case interval < 1500000:
+      // 12.5m
-      return 1200000; // 20m
+      case interval < 1050000:
-    // 45m
+        return 900000; // 15m
-    case interval < 2700000:
+      // 25m
-      return 1800000; // 30m
+      case interval < 1500000:
-    // 1.5h
+        return 1200000; // 20m
-    case interval < 5400000:
+      // 45m
-      return 3600000; // 1h
+      case interval < 2700000:
-    // 2.5h
+        return 1800000; // 30m
-    case interval < 9000000:
+      // 1.5h
-      return 7200000; // 2h
+      case interval < 5400000:
-    // 4.5h
+        return 3600000; // 1h
-    case interval < 16200000:
+      // 2.5h
-      return 10800000; // 3h
+      case interval < 9000000:
-    // 9h
+        return 7200000; // 2h
-    case interval < 32400000:
+      // 4.5h
-      return 21600000; // 6h
+      case interval < 16200000:
-    // 1d
+        return 10800000; // 3h
-    case interval < 86400000:
+      // 9h
-      return 43200000; // 12h
+      case interval < 32400000:
-    // 1w
+        return 21600000; // 6h
-    case interval < 604800000:
+      // 1d
-      return 86400000; // 1d
+      case interval < 86400000:
-    // 3w
+        return 43200000; // 12h
-    case interval < 1814400000:
+      // 1w
-      return 604800000; // 1w
+      case interval < 604800000:
-    // 6w
+        return 86400000; // 1d
-    case interval < 3628800000:
+      // 3w
-      return 2592000000; // 30d
+      case interval < 1814400000:
-    default:
+        return 604800000; // 1w
-      return 31536000000; // 1y
+      // 6w
-  }
+      case interval < 3628800000:
-};
+        return 2592000000; // 30d
-
+      default:
-kbn.secondsToHms = (seconds: number) => {
+        return 31536000000; // 1y
-  const numyears = Math.floor(seconds / 31536000);
+    }
-  if (numyears) {
+  },
-    return numyears + 'y';
+  secondsToHms: (seconds: number) => {
-  }
+    const numYears = Math.floor(seconds / 31536000);
-  const numdays = Math.floor((seconds % 31536000) / 86400);
+    if (numYears) {
-  if (numdays) {
+      return numYears + 'y';
-    return numdays + 'd';
+    }
-  }
+    const numDays = Math.floor((seconds % 31536000) / 86400);
-  const numhours = Math.floor(((seconds % 31536000) % 86400) / 3600);
+    if (numDays) {
-  if (numhours) {
+      return numDays + 'd';
-    return numhours + 'h';
+    }
-  }
+    const numHours = Math.floor(((seconds % 31536000) % 86400) / 3600);
-  const numminutes = Math.floor((((seconds % 31536000) % 86400) % 3600) / 60);
+    if (numHours) {
-  if (numminutes) {
+      return numHours + 'h';
-    return numminutes + 'm';
+    }
-  }
+    const numMinutes = Math.floor((((seconds % 31536000) % 86400) % 3600) / 60);
-  const numseconds = Math.floor((((seconds % 31536000) % 86400) % 3600) % 60);
+    if (numMinutes) {
-  if (numseconds) {
+      return numMinutes + 'm';
-    return numseconds + 's';
+    }
-  }
+    const numSeconds = Math.floor((((seconds % 31536000) % 86400) % 3600) % 60);
-  const nummilliseconds = Math.floor(seconds * 1000.0);
+    if (numSeconds) {
-  if (nummilliseconds) {
+      return numSeconds + 's';
-    return nummilliseconds + 'ms';
+    }
-  }
+    const numMilliseconds = Math.floor(seconds * 1000.0);
-
+    if (numMilliseconds) {
-  return 'less than a millisecond'; //'just now' //or other string you like;
+      return numMilliseconds + 'ms';
-};
-
-kbn.secondsToHhmmss = (seconds: number) => {
-  const strings: string[] = [];
-  const numhours = Math.floor(seconds / 3600);
-  const numminutes = Math.floor((seconds % 3600) / 60);
-  const numseconds = Math.floor((seconds % 3600) % 60);
-  numhours > 9 ? strings.push('' + numhours) : strings.push('0' + numhours);
-  numminutes > 9 ? strings.push('' + numminutes) : strings.push('0' + numminutes);
-  numseconds > 9 ? strings.push('' + numseconds) : strings.push('0' + numseconds);
-  return strings.join(':');
-};
-
-kbn.to_percent = (nr: number, outof: number) => {
-  return Math.floor((nr / outof) * 10000) / 100 + '%';
-};
-
-kbn.addslashes = (str: string) => {
-  str = str.replace(/\\/g, '\\\\');
-  str = str.replace(/\'/g, "\\'");
-  str = str.replace(/\"/g, '\\"');
-  str = str.replace(/\0/g, '\\0');
-  return str;
-};
-
-kbn.interval_regex = /(\d+(?:\.\d+)?)(ms|[Mwdhmsy])/;
-
-// histogram & trends
-kbn.intervals_in_seconds = {
-  y: 31536000,
-  M: 2592000,
-  w: 604800,
-  d: 86400,
-  h: 3600,
-  m: 60,
-  s: 1,
-  ms: 0.001,
-};
-
-kbn.calculateInterval = (range: TimeRange, resolution: number, lowLimitInterval: string[]) => {
-  let lowLimitMs = 1; // 1 millisecond default low limit
-  let intervalMs;
-
-  if (lowLimitInterval) {
-    if (lowLimitInterval[0] === '>') {
-      lowLimitInterval = lowLimitInterval.slice(1);
     }
-    lowLimitMs = kbn.interval_to_ms(lowLimitInterval);
-  }
 
-  intervalMs = kbn.round_interval((range.to.valueOf() - range.from.valueOf()) / resolution);
+    return 'less than a millisecond'; //'just now' //or other string you like;
-  if (lowLimitMs > intervalMs) {
+  },
-    intervalMs = lowLimitMs;
+  secondsToHhmmss: (seconds: number) => {
-  }
+    const strings: string[] = [];
+    const numHours = Math.floor(seconds / 3600);
+    const numMinutes = Math.floor((seconds % 3600) / 60);
+    const numSeconds = Math.floor((seconds % 3600) % 60);
+    numHours > 9 ? strings.push('' + numHours) : strings.push('0' + numHours);
+    numMinutes > 9 ? strings.push('' + numMinutes) : strings.push('0' + numMinutes);
+    numSeconds > 9 ? strings.push('' + numSeconds) : strings.push('0' + numSeconds);
+    return strings.join(':');
+  },
+  toPercent: (nr: number, outOf: number) => Math.floor((nr / outOf) * 10000) / 100 + '%',
+  addSlashes: (str: string) => {
+    str = str.replace(/\\/g, '\\\\');
+    str = str.replace(/\'/g, "\\'");
+    str = str.replace(/\"/g, '\\"');
+    str = str.replace(/\0/g, '\\0');
+    return str;
+  },
+  describeInterval: (str: string) => {
+    // Default to seconds if no unit is provided
+    if (Number(str)) {
+      return {
+        sec: kbn.intervalsInSeconds.s,
+        type: 's',
+        count: parseInt(str, 10),
+      };
+    }
 
-  return {
+    const matches = str.match(kbn.intervalRegex);
-    intervalMs: intervalMs,
+    if (!matches || !has(kbn.intervalsInSeconds, matches[2])) {
-    interval: kbn.secondsToHms(intervalMs / 1000),
+      throw new Error(
-  };
+        `Invalid interval string, has to be either unit-less or end with one of the following units: "${Object.keys(
-};
+          kbn.intervalsInSeconds
+        ).join(', ')}"`
+      );
+    } else {
+      return {
+        sec: kbn.intervalsInSeconds[matches[2]],
+        type: matches[2],
+        count: parseInt(matches[1], 10),
+      };
+    }
+  },
+  intervalToSeconds: (str: string): number => {
+    const info = kbn.describeInterval(str);
+    return info.sec * info.count;
+  },
+  intervalToMs: (str: string) => {
+    const info = kbn.describeInterval(str);
+    return info.sec * 1000 * info.count;
+  },
+  calculateInterval: (range: TimeRange, resolution: number, lowLimitInterval?: string) => {
+    let lowLimitMs = 1; // 1 millisecond default low limit
+    let intervalMs;
+
+    if (lowLimitInterval) {
+      if (lowLimitInterval[0] === '>') {
+        lowLimitInterval = lowLimitInterval.slice(1);
+      }
+      lowLimitMs = kbn.intervalToMs(lowLimitInterval);
+    }
+
+    intervalMs = kbn.roundInterval((range.to.valueOf() - range.from.valueOf()) / resolution);
+    if (lowLimitMs > intervalMs) {
+      intervalMs = lowLimitMs;
+    }
 
-kbn.describe_interval = (str: string) => {
-  // Default to seconds if no unit is provided
-  if (Number(str)) {
     return {
-      sec: kbn.intervals_in_seconds.s,
+      intervalMs: intervalMs,
-      type: 's',
+      interval: kbn.secondsToHms(intervalMs / 1000),
-      count: parseInt(str, 10),
     };
-  }
+  },
-
+  queryColorDot: (color: string, diameter: string) => {
-  const matches = str.match(kbn.interval_regex);
+    return (
-  if (!matches || !has(kbn.intervals_in_seconds, matches[2])) {
+      '<div class="icon-circle" style="' +
-    throw new Error(
+      ['display:inline-block', 'color:' + color, 'font-size:' + diameter + 'px'].join(';') +
-      `Invalid interval string, has to be either unit-less or end with one of the following units: "${Object.keys(
+      '"></div>'
-        kbn.intervals_in_seconds
-      ).join(', ')}"`
     );
-  } else {
+  },
-    return {
+  slugifyForUrl: (str: string) => {
-      sec: kbn.intervals_in_seconds[matches[2]],
+    return str
-      type: matches[2],
+      .toLowerCase()
-      count: parseInt(matches[1], 10),
+      .replace(/[^\w ]+/g, '')
-    };
+      .replace(/ +/g, '-');
-  }
+  },
-};
+  /** deprecated since 6.1, use grafana/data */
-
+  stringToJsRegex: (str: string) => {
-kbn.interval_to_ms = (str: string) => {
+    deprecationWarning('kbn.ts', 'kbn.stringToJsRegex()', '@grafana/data');
-  const info = kbn.describe_interval(str);
+    return stringToJsRegex(str);
-  return info.sec * 1000 * info.count;
+  },
-};
+  toFixed: (value: number | null, decimals: number) => {
-
+    if (value === null) {
-kbn.interval_to_seconds = (str: string): number => {
+      return '';
-  const info = kbn.describe_interval(str);
-  return info.sec * info.count;
-};
-
-kbn.query_color_dot = (color: string, diameter: string) => {
-  return (
-    '<div class="icon-circle" style="' +
-    ['display:inline-block', 'color:' + color, 'font-size:' + diameter + 'px'].join(';') +
-    '"></div>'
-  );
-};
-
-kbn.slugifyForUrl = (str: string) => {
-  return str
-    .toLowerCase()
-    .replace(/[^\w ]+/g, '')
-    .replace(/ +/g, '-');
-};
-
-/** deprecated since 6.1, use grafana/data */
-kbn.stringToJsRegex = (str: string) => {
-  deprecationWarning('kbn.ts', 'kbn.stringToJsRegex()', '@grafana/data');
-  return stringToJsRegex(str);
-};
-
-kbn.toFixed = (value: number | null, decimals: number) => {
-  if (value === null) {
-    return '';
-  }
-
-  const factor = decimals ? Math.pow(10, Math.max(0, decimals)) : 1;
-  const formatted = String(Math.round(value * factor) / factor);
-
-  // if exponent return directly
-  if (formatted.indexOf('e') !== -1 || value === 0) {
-    return formatted;
-  }
-
-  // If tickDecimals was specified, ensure that we have exactly that
-  // much precision; otherwise default to the value's own precision.
-  if (decimals != null) {
-    const decimalPos = formatted.indexOf('.');
-    const precision = decimalPos === -1 ? 0 : formatted.length - decimalPos - 1;
-    if (precision < decimals) {
-      return (precision ? formatted : formatted + '.') + String(factor).substr(1, decimals - precision);
     }
-  }
 
-  return formatted;
+    const factor = decimals ? Math.pow(10, Math.max(0, decimals)) : 1;
+    const formatted = String(Math.round(value * factor) / factor);
+
+    // if exponent return directly
+    if (formatted.indexOf('e') !== -1 || value === 0) {
+      return formatted;
+    }
+
+    // If tickDecimals was specified, ensure that we have exactly that
+    // much precision; otherwise default to the value's own precision.
+    if (decimals != null) {
+      const decimalPos = formatted.indexOf('.');
+      const precision = decimalPos === -1 ? 0 : formatted.length - decimalPos - 1;
+      if (precision < decimals) {
+        return (precision ? formatted : formatted + '.') + String(factor).substr(1, decimals - precision);
+      }
+    }
+
+    return formatted;
+  },
+  toFixedScaled: (
+    value: number,
+    decimals: number,
+    scaledDecimals: number | null,
+    additionalDecimals: number,
+    ext: number
+  ) => {
+    if (scaledDecimals === null) {
+      return kbn.toFixed(value, decimals) + ext;
+    } else {
+      return kbn.toFixed(value, scaledDecimals + additionalDecimals) + ext;
+    }
+  },
+  roundValue: (num: number, decimals: number) => {
+    if (num === null) {
+      return null;
+    }
+    const n = Math.pow(10, decimals);
+    const formatted = (n * num).toFixed(decimals);
+    return Math.round(parseFloat(formatted)) / n;
+  },
+  // FORMAT MENU
+  getUnitFormats: getValueFormats,
 };
 
-kbn.toFixedScaled = (
+/**
-  value: number,
+ * Backward compatible layer for value formats to support old plugins
-  decimals: number,
+ */
-  scaledDecimals: number | null,
-  additionalDecimals: number,
-  ext: number
-) => {
-  if (scaledDecimals === null) {
-    return kbn.toFixed(value, decimals) + ext;
-  } else {
-    return kbn.toFixed(value, scaledDecimals + additionalDecimals) + ext;
-  }
-};
-
-kbn.roundValue = (num: number, decimals: number) => {
-  if (num === null) {
-    return null;
-  }
-  const n = Math.pow(10, decimals);
-  const formatted = (n * num).toFixed(decimals);
-  return Math.round(parseFloat(formatted)) / n;
-};
-
-///// FORMAT MENU /////
-
-kbn.getUnitFormats = () => {
-  return getValueFormats();
-};
-
-//
-// Backward compatible layer for value formats to support old plugins
-//
 if (typeof Proxy !== 'undefined') {
   kbn.valueFormats = new Proxy(kbn.valueFormats, {
     get(target, name, receiver) {

public/app/features/alerting/AlertTabCtrl.ts

@@ -253,7 +253,7 @@ export class AlertTabCtrl {
     this.frequencyWarning = '';
 
     try {
-      const frequencySecs = kbn.interval_to_seconds(this.alert.frequency);
+      const frequencySecs = kbn.intervalToSeconds(this.alert.frequency);
       if (frequencySecs < this.alertingMinIntervalSecs) {
         this.frequencyWarning =
           'A minimum evaluation interval of ' +

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

@@ -37,7 +37,7 @@ const timeRangeValidationEvents: ValidationEvents = {
           return true;
         }
         try {
-          kbn.interval_to_seconds(value);
+          kbn.intervalToSeconds(value);
           return true;
         } catch {
           return false;
@@ -125,7 +125,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
 
     // make sure that secondsToLive is number or null
     const secondsToLive = this.state.newApiKey['secondsToLive'];
-    this.state.newApiKey['secondsToLive'] = secondsToLive ? kbn.interval_to_seconds(secondsToLive) : null;
+    this.state.newApiKey['secondsToLive'] = secondsToLive ? kbn.intervalToSeconds(secondsToLive) : null;
     this.props.addApiKey(this.state.newApiKey, openModal, this.props.includeExpired);
     this.setState((prevState: State) => {
       return {

public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx

@@ -39,7 +39,7 @@ export class TimePickerSettings extends PureComponent<Props, State> {
 
     if (config.minRefreshInterval) {
       intervals = intervals.filter(rate => {
-        return kbn.interval_to_ms(rate) >= kbn.interval_to_ms(config.minRefreshInterval);
+        return kbn.intervalToMs(rate) >= kbn.intervalToMs(config.minRefreshInterval);
       });
     }
 

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

@@ -115,7 +115,7 @@ export class TimeSrv {
       // when time window specified in ms
       timeWindowMs = parseInt(timeWindow, 10);
     } else {
-      timeWindowMs = kbn.interval_to_ms(timeWindow);
+      timeWindowMs = kbn.intervalToMs(timeWindow);
     }
 
     return {
@@ -181,7 +181,7 @@ export class TimeSrv {
 
     if (interval) {
       const validInterval = this.contextSrv.getValidInterval(interval);
-      const intervalMs = kbn.interval_to_ms(validInterval);
+      const intervalMs = kbn.intervalToMs(validInterval);
 
       this.refreshTimer = this.timer.register(
         this.$timeout(() => {

public/app/features/playlist/playlist_srv.ts

@@ -97,7 +97,7 @@ export class PlaylistSrv {
           .get(`/api/playlists/${playlistId}/dashboards`)
           .then((dashboards: any) => {
             this.dashboards = dashboards;
-            this.interval = kbn.interval_to_ms(playlist.interval);
+            this.interval = kbn.intervalToMs(playlist.interval);
             this.next();
           });
       });

public/app/features/variables/interval/actions.test.ts

@@ -81,7 +81,7 @@ describe('interval actions', () => {
       expect(appEventMock.emit).toHaveBeenCalledWith(AppEvents.alertError, [
         'Templating',
         `Invalid interval string, has to be either unit-less or end with one of the following units: "${Object.keys(
-          kbn.intervals_in_seconds
+          kbn.intervalsInSeconds
         ).join(', ')}"`,
       ]);
       setTimeSrv(originalTimeSrv);
@@ -99,7 +99,7 @@ describe('interval actions', () => {
         const dependencies: UpdateAutoValueDependencies = {
           kbn: {
             calculateInterval: jest.fn(),
-          },
+          } as any,
           getTimeSrv: () => {
             return ({
               timeRange: jest.fn().mockReturnValue({
@@ -152,7 +152,7 @@ describe('interval actions', () => {
         const dependencies: UpdateAutoValueDependencies = {
           kbn: {
             calculateInterval: jest.fn().mockReturnValue({ interval: '10s' }),
-          },
+          } as any,
           getTimeSrv: () => {
             return ({
               timeRange: timeRangeMock,

public/app/plugins/datasource/cloud-monitoring/components/AlignmentPeriods.tsx

@@ -13,7 +13,7 @@ export interface Props {
   templateVariableOptions: Array<SelectableValue<string>>;
   alignmentPeriod: string;
   perSeriesAligner: string;
-  usedAlignmentPeriod: string;
+  usedAlignmentPeriod?: number;
 }
 
 export const AlignmentPeriods: FC<Props> = ({
@@ -25,7 +25,9 @@ export const AlignmentPeriods: FC<Props> = ({
   usedAlignmentPeriod,
 }) => {
   const alignment = alignOptions.find(ap => ap.value === templateSrv.replace(perSeriesAligner));
-  const formatAlignmentText = `${kbn.secondsToHms(usedAlignmentPeriod)} interval (${alignment ? alignment.text : ''})`;
+  const formatAlignmentText = usedAlignmentPeriod
+    ? `${kbn.secondsToHms(usedAlignmentPeriod)} interval (${alignment ? alignment.text : ''})`
+    : '';
   const options = alignmentPeriods.map(ap => ({
     ...ap,
     label: ap.text,

public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx

@@ -7,7 +7,7 @@ import { SelectableValue } from '@grafana/data';
 
 export interface Props {
   refId: string;
-  usedAlignmentPeriod: string;
+  usedAlignmentPeriod?: number;
   variableOptionGroup: SelectableValue<string>;
   onChange: (query: MetricQuery) => void;
   onRunQuery: () => void;

public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx

@@ -67,7 +67,7 @@ export class QueryEditor extends PureComponent<Props, State> {
     const sloQuery = { ...defaultSLOQuery, ...query.sloQuery, projectName: datasource.getDefaultProject() };
     const queryType = query.queryType || QueryType.METRICS;
     const meta = this.props.data?.series.length ? this.props.data?.series[0].meta : {};
-    const usedAlignmentPeriod = meta?.alignmentPeriod as string;
+    const usedAlignmentPeriod = meta?.alignmentPeriod;
     const variableOptionGroup = {
       label: 'Template Variables',
       expanded: false,

public/app/plugins/datasource/cloud-monitoring/components/SLOQueryEditor.tsx

@@ -7,7 +7,7 @@ import { SLOQuery } from '../types';
 import CloudMonitoringDatasource from '../datasource';
 
 export interface Props {
-  usedAlignmentPeriod: string;
+  usedAlignmentPeriod?: number;
   variableOptionGroup: SelectableValue<string>;
   onChange: (query: SLOQuery) => void;
   onRunQuery: () => void;

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

@@ -419,7 +419,7 @@ export class CloudWatchDatasource extends DataSourceApi<CloudWatchQuery, CloudWa
       if (/^\d+$/.test(period)) {
         period = parseInt(period, 10);
       } else {
-        period = kbn.interval_to_seconds(period);
+        period = kbn.intervalToSeconds(period);
       }
 
       if (period < 1) {

public/app/plugins/datasource/grafana-azure-monitor-datasource/query_ctrl.ts

@@ -490,7 +490,7 @@ export class AzureMonitorQueryCtrl extends QueryCtrl {
     const allowedTimeGrainsMs: number[] = [];
     timeGrains.forEach((tg: any) => {
       if (tg.value !== 'auto') {
-        allowedTimeGrainsMs.push(kbn.interval_to_ms(TimegrainConverter.createKbnUnitFromISO8601Duration(tg.value)));
+        allowedTimeGrainsMs.push(kbn.intervalToMs(TimegrainConverter.createKbnUnitFromISO8601Duration(tg.value)));
       }
     });
     return allowedTimeGrainsMs;

public/app/plugins/datasource/grafana-azure-monitor-datasource/time_grain_converter.ts

@@ -36,11 +36,11 @@ export default class TimeGrainConverter {
     const timeGrains = _.filter(allowedTimeGrains, o => o !== 'auto');
 
     let closest = timeGrains[0];
-    const intervalMs = kbn.interval_to_ms(interval);
+    const intervalMs = kbn.intervalToMs(interval);
 
     for (let i = 0; i < timeGrains.length; i++) {
       // abs (num - val) < abs (num - curr):
-      if (intervalMs > kbn.interval_to_ms(timeGrains[i])) {
+      if (intervalMs > kbn.intervalToMs(timeGrains[i])) {
         if (i + 1 < timeGrains.length) {
           closest = timeGrains[i + 1];
         } else {

public/app/plugins/datasource/graphite/MetricTankMetaInspector.tsx

@@ -22,11 +22,10 @@ export class MetricTankMetaInspector extends PureComponent<Props, State> {
     const runtimeNotice = getRuntimeConsolidationNotice([meta]);
     const normFunc = (meta['consolidator-normfetch'] ?? '').replace('Consolidator', '');
 
-    let totalSeconds = 0;
+    const totalSeconds = buckets.reduce(
-
+      (acc, bucket) => acc + (bucket.retention ? kbn.intervalToSeconds(bucket.retention) : 0),
-    for (const bucket of buckets) {
+      0
-      totalSeconds += kbn.interval_to_seconds(bucket.retention);
+    );
-    }
 
     return (
       <div className={styles.metaItem} key={key}>
@@ -46,7 +45,7 @@ export class MetricTankMetaInspector extends PureComponent<Props, State> {
 
             <div>
               {buckets.map((bucket, index) => {
-                const bucketLength = kbn.interval_to_seconds(bucket.retention);
+                const bucketLength = bucket.retention ? kbn.intervalToSeconds(bucket.retention) : 0;
                 const lengthPercent = (bucketLength / totalSeconds) * 100;
                 const isActive = index === meta['archive-read'];
 

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

@@ -205,7 +205,7 @@ export class OpenTsQueryCtrl extends QueryCtrl {
     if (this.target.shouldDownsample) {
       try {
         if (this.target.downsampleInterval) {
-          kbn.describe_interval(this.target.downsampleInterval);
+          kbn.describeInterval(this.target.downsampleInterval);
         } else {
           errs.downsampleInterval = "You must supply a downsample interval (e.g. '1m' or '1h').";
         }

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

@@ -327,9 +327,9 @@ export class PrometheusDatasource extends DataSourceApi<PromQuery, PromOptions>
     const range = Math.ceil(end - start);
 
     // options.interval is the dynamically calculated interval
-    let interval: number = kbn.interval_to_seconds(options.interval);
+    let interval: number = kbn.intervalToSeconds(options.interval);
     // Minimum interval ("Min step"), if specified for the query or datasource. or same as interval otherwise
-    const minInterval = kbn.interval_to_seconds(
+    const minInterval = kbn.intervalToSeconds(
       templateSrv.replace(target.interval || options.interval, options.scopedVars)
     );
     const intervalFactor = target.intervalFactor || 1;
@@ -495,7 +495,7 @@ export class PrometheusDatasource extends DataSourceApi<PromQuery, PromOptions>
 
     const scopedVars = {
       __interval: { text: this.interval, value: this.interval },
-      __interval_ms: { text: kbn.interval_to_ms(this.interval), value: kbn.interval_to_ms(this.interval) },
+      __interval_ms: { text: kbn.intervalToMs(this.interval), value: kbn.intervalToMs(this.interval) },
       ...this.getRangeScopedVars(getTimeSrv().timeRange()),
     };
     const interpolated = templateSrv.replace(query, scopedVars, this.interpolateQueryExpr);

public/app/plugins/panel/heatmap/heatmap_ctrl.ts

@@ -180,9 +180,9 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
     const xBucketSizeByNumber = Math.floor((this.range.to.valueOf() - this.range.from.valueOf()) / xBucketNumber);
 
     // Parse X bucket size (number or interval)
-    const isIntervalString = kbn.interval_regex.test(this.panel.xBucketSize);
+    const isIntervalString = kbn.intervalRegex.test(this.panel.xBucketSize);
     if (isIntervalString) {
-      xBucketSize = kbn.interval_to_ms(this.panel.xBucketSize);
+      xBucketSize = kbn.intervalToMs(this.panel.xBucketSize);
     } else if (
       isNaN(Number(this.panel.xBucketSize)) ||
       this.panel.xBucketSize === '' ||