Merge pull request #15891 from ryantxu/string-utils

move stringToJsRegex to grafana/ui

packages/grafana-ui/src/components/ColorPicker/warnAboutColorPickerPropsDeprecation.ts

@@ -1,9 +1,9 @@
-import propDeprecationWarning from '../../utils/propDeprecationWarning';
+import deprecationWarning from '../../utils/deprecationWarning';
 import { ColorPickerProps } from './ColorPickerPopover';
 
 export const warnAboutColorPickerPropsDeprecation = (componentName: string, props: ColorPickerProps) => {
   const { onColorChange } = props;
   if (onColorChange) {
-    propDeprecationWarning(componentName, 'onColorChange', 'onChange');
+    deprecationWarning(componentName, 'onColorChange', 'onChange');
   }
 };

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

@@ -0,0 +1,6 @@
+const deprecationWarning = (file: string, oldName: string, newName: string) => {
+  const message = `[Deprecation warning] ${file}: ${oldName} is deprecated. Use ${newName} instead`;
+  console.warn(message);
+};
+
+export default deprecationWarning;

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

@@ -2,4 +2,6 @@ export * from './processTimeSeries';
 export * from './valueFormats/valueFormats';
 export * from './colors';
 export * from './namedColorsPalette';
+export * from './string';
+export * from './deprecationWarning';
 export { getMappedValue } from './valueMappings';

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

@@ -1,6 +0,0 @@
-const propDeprecationWarning = (componentName: string, propName: string, newPropName: string) => {
-  const message = `[Deprecation warning] ${componentName}: ${propName} is deprecated. Use ${newPropName} instead`;
-  console.warn(message);
-};
-
-export default propDeprecationWarning;

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

@@ -0,0 +1,15 @@
+import { stringToJsRegex } from '@grafana/ui';
+
+describe('stringToJsRegex', () => {
+  it('should parse the valid regex value', () => {
+    const output = stringToJsRegex('/validRegexp/');
+    expect(output).toBeInstanceOf(RegExp);
+  });
+
+  it('should throw error on invalid regex value', () => {
+    const input = '/etc/hostname';
+    expect(() => {
+      stringToJsRegex(input);
+    }).toThrow();
+  });
+});

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

@@ -0,0 +1,13 @@
+export function stringToJsRegex(str: string): RegExp {
+  if (str[0] !== '/') {
+    return new RegExp('^' + str + '$');
+  }
+
+  const match = str.match(new RegExp('^/(.*?)/(g?i?m?y?)$'));
+
+  if (!match) {
+    throw new Error(`'${str}' is not a valid regular expression.`);
+  }
+
+  return new RegExp(match[1], match[2]);
+}

public/app/core/time_series2.ts

@@ -1,7 +1,6 @@
-import kbn from 'app/core/utils/kbn';
 import { getFlotTickDecimals } from 'app/core/utils/ticks';
 import _ from 'lodash';
-import { getValueFormat } from '@grafana/ui';
+import { getValueFormat, stringToJsRegex } from '@grafana/ui';
 
 function matchSeriesOverride(aliasOrRegex, seriesAlias) {
   if (!aliasOrRegex) {
@@ -9,7 +8,7 @@ function matchSeriesOverride(aliasOrRegex, seriesAlias) {
   }
 
   if (aliasOrRegex[0] === '/') {
-    const regex = kbn.stringToJsRegex(aliasOrRegex);
+    const regex = stringToJsRegex(aliasOrRegex);
     return seriesAlias.match(regex) != null;
   }
 

public/app/core/utils/kbn.ts

@@ -1,5 +1,6 @@
 import _ from 'lodash';
-import { getValueFormat, getValueFormatterIndex, getValueFormats } from '@grafana/ui';
+import { getValueFormat, getValueFormatterIndex, getValueFormats, stringToJsRegex } from '@grafana/ui';
+import deprecationWarning from '@grafana/ui/src/utils/deprecationWarning';
 
 const kbn: any = {};
 
@@ -228,18 +229,10 @@ kbn.slugifyForUrl = str => {
     .replace(/ +/g, '-');
 };
 
+/** deprecated since 6.1, use grafana/ui */
 kbn.stringToJsRegex = str => {
-  if (str[0] !== '/') {
-    return new RegExp('^' + str + '$');
-  }
-
-  const match = str.match(new RegExp('^/(.*?)/(g?i?m?y?)$'));
-
-  if (!match) {
-    throw new Error(`'${str}' is not a valid regular expression.`);
-  }
-
-  return new RegExp(match[1], match[2]);
+  deprecationWarning('kbn.ts', 'kbn.stringToJsRegex()', '@grafana/ui');
+  return stringToJsRegex(str);
 };
 
 kbn.toFixed = (value, decimals) => {

public/app/features/templating/datasource_variable.ts

@@ -1,5 +1,5 @@
-import kbn from 'app/core/utils/kbn';
 import { Variable, containsVariable, assignModelProperties, variableTypes } from './variable';
+import { stringToJsRegex } from '@grafana/ui';
 
 export class DatasourceVariable implements Variable {
   regex: any;
@@ -47,7 +47,7 @@ export class DatasourceVariable implements Variable {
 
     if (this.regex) {
       regex = this.templateSrv.replace(this.regex, null, 'regex');
-      regex = kbn.stringToJsRegex(regex);
+      regex = stringToJsRegex(regex);
     }
 
     for (let i = 0; i < sources.length; i++) {

public/app/features/templating/query_variable.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
-import kbn from 'app/core/utils/kbn';
 import { Variable, containsVariable, assignModelProperties, variableTypes } from './variable';
+import { stringToJsRegex } from '@grafana/ui';
 
 function getNoneOption() {
   return { text: 'None', value: '', isNone: true };
@@ -148,7 +148,7 @@ export class QueryVariable implements Variable {
     options = [];
 
     if (this.regex) {
-      regex = kbn.stringToJsRegex(this.templateSrv.replace(this.regex, {}, 'regex'));
+      regex = stringToJsRegex(this.templateSrv.replace(this.regex, {}, 'regex'));
     }
     for (i = 0; i < metricNames.length; i++) {
       const item = metricNames[i];

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

@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import moment from 'moment';
-import kbn from 'app/core/utils/kbn';
-import { getValueFormat, getColorFromHexRgbOrName, GrafanaThemeType } from '@grafana/ui';
+import { getValueFormat, getColorFromHexRgbOrName, GrafanaThemeType, stringToJsRegex } from '@grafana/ui';
 
 export class TableRenderer {
   formatters: any[];
@@ -35,7 +34,7 @@ export class TableRenderer {
       for (let i = 0; i < this.panel.styles.length; i++) {
         const style = this.panel.styles[i];
 
-        const regex = kbn.stringToJsRegex(style.pattern);
+        const regex = stringToJsRegex(style.pattern);
         if (column.text.match(regex)) {
           column.style = style;