Variable query editor (#856)

* refactor: convert module to typescript * refactor: covert utils to typescript * variable query editor WIP * variable editor: fix type error after grafana/ui update * variable editor: use FormLabel from grafana/ui * variable editor: refactor * variable editor: input validation and highlights * variable editor: fix tests * variable query: fix backward compatibility with empty queries * fix linter errors * variable editor: fix variable replacement in queries
2020-01-13 11:31:40 +03:00
parent 4f24b2bf23
commit 82cfda6524
11 changed files with 519 additions and 78 deletions
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
    "@babel/core": "^7.7.7",
    "@babel/preset-env": "^7.7.7",
    "@babel/preset-react": "^7.6.3",
+    "@emotion/core": "^10.0.27",
    "@grafana/data": "^6.4.2",
    "@grafana/ui": "^6.4.2",
    "@types/classnames": "^2.2.6",
--- a/src/datasource-zabbix/components/VariableQueryEditor.tsx
+++ b/src/datasource-zabbix/components/VariableQueryEditor.tsx
@@ -0,0 +1,157 @@
+import React, { PureComponent } from 'react';
+import { parseLegacyVariableQuery } from '../utils';
+import { Select, Input, AsyncSelect, FormLabel } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
+import { VariableQuery, VariableQueryTypes, VariableQueryProps, VariableQueryData } from '../types';
+import { ZabbixInput } from './ZabbixInput';
+
+export class ZabbixVariableQueryEditor extends PureComponent<VariableQueryProps, VariableQueryData> {
+  queryTypes: Array<SelectableValue<VariableQueryTypes>> = [
+    { value: VariableQueryTypes.Group, label: 'Group'},
+    { value: VariableQueryTypes.Host, label: 'Host' },
+    { value: VariableQueryTypes.Application, label: 'Application' },
+    { value: VariableQueryTypes.Item, label: 'Item' },
+  ];
+
+  defaults: VariableQueryData = {
+    selectedQueryType: { value: VariableQueryTypes.Group, label: 'Group' },
+    queryType: VariableQueryTypes.Group,
+    group: '/.*/',
+    host: '',
+    application: '',
+    item: '',
+  };
+
+  constructor(props: VariableQueryProps) {
+    super(props);
+
+    if (this.props.query && typeof this.props.query === 'string') {
+      // Backward compatibility
+      const query = parseLegacyVariableQuery(this.props.query);
+      const selectedQueryType = this.getSelectedQueryType(query.queryType);
+      this.state = {
+        selectedQueryType,
+        legacyQuery: this.props.query,
+        ...query
+      };
+    } else if (this.props.query) {
+      const query = (this.props.query as VariableQuery);
+      const selectedQueryType = this.getSelectedQueryType(query.queryType);
+      this.state = {
+        ...this.defaults,
+        ...query,
+        selectedQueryType,
+      };
+    } else {
+      this.state = this.defaults;
+    }
+  }
+
+  getSelectedQueryType(queryType: VariableQueryTypes) {
+    return this.queryTypes.find(q => q.value === queryType);
+  }
+
+  handleQueryUpdate = (evt: React.ChangeEvent<HTMLInputElement>, prop: string) => {
+    const value = evt.currentTarget.value;
+    this.setState((prevState: VariableQueryData) => {
+      const newQuery = {
+        ...prevState,
+      };
+      newQuery[prop] = value;
+
+      return {
+        ...newQuery,
+      };
+    });
+  }
+
+  handleQueryChange = () => {
+    const { queryType, group, host, application, item } = this.state;
+    const queryModel = { queryType, group, host, application, item };
+    this.props.onChange(queryModel, `Zabbix - ${queryType}`);
+  }
+
+  handleQueryTypeChange = (selectedItem: SelectableValue<VariableQueryTypes>) => {
+    this.setState({
+      ...this.state,
+      selectedQueryType: selectedItem,
+      queryType: selectedItem.value,
+    });
+
+    const { group, host, application, item } = this.state;
+    const queryType = selectedItem.value;
+    const queryModel = { queryType, group, host, application, item };
+    this.props.onChange(queryModel, `Zabbix - ${queryType}`);
+  }
+
+  render() {
+    const { selectedQueryType, legacyQuery, group, host, application, item } = this.state;
+
+    return (
+      <>
+        <div className="gf-form max-width-21">
+          <FormLabel width={10}>Query Type</FormLabel>
+          <Select
+            width={11}
+            value={selectedQueryType}
+            options={this.queryTypes}
+            onChange={this.handleQueryTypeChange}
+          />
+        </div>
+        <div className="gf-form-inline">
+          <div className="gf-form max-width-30">
+            <FormLabel width={10}>Group</FormLabel>
+            <ZabbixInput
+              value={group}
+              onChange={evt => this.handleQueryUpdate(evt, 'group')}
+              onBlur={this.handleQueryChange}
+            />
+          </div>
+          {selectedQueryType.value !== VariableQueryTypes.Group &&
+            <div className="gf-form max-width-30">
+              <FormLabel width={10}>Host</FormLabel>
+              <ZabbixInput
+                value={host}
+                onChange={evt => this.handleQueryUpdate(evt, 'host')}
+                onBlur={this.handleQueryChange}
+              />
+            </div>
+          }
+        </div>
+        {(selectedQueryType.value === VariableQueryTypes.Application ||
+          selectedQueryType.value === VariableQueryTypes.Item) &&
+          <div className="gf-form-inline">
+            <div className="gf-form max-width-30">
+              <FormLabel width={10}>Application</FormLabel>
+              <ZabbixInput
+                value={application}
+                onChange={evt => this.handleQueryUpdate(evt, 'application')}
+                onBlur={this.handleQueryChange}
+              />
+            </div>
+            {selectedQueryType.value === VariableQueryTypes.Item &&
+              <div className="gf-form max-width-30">
+                <FormLabel width={10}>Item</FormLabel>
+                <ZabbixInput
+                  value={item}
+                  onChange={evt => this.handleQueryUpdate(evt, 'item')}
+                  onBlur={this.handleQueryChange}
+                />
+              </div>
+            }
+          </div>
+        }
+
+        {legacyQuery &&
+          <div className="gf-form">
+            <FormLabel width={10} tooltip="Original query string, read-only">Legacy Query</FormLabel>
+            <Input
+              value={legacyQuery}
+              readOnly={true}
+            />
+          </div>
+        }
+      </>
+    );
+  }
+}
--- a/src/datasource-zabbix/components/ZabbixInput.tsx
+++ b/src/datasource-zabbix/components/ZabbixInput.tsx
@@ -0,0 +1,69 @@
+import React, { FC } from 'react';
+import { css, cx } from 'emotion';
+import { Themeable, withTheme, Input, GrafanaTheme, EventsWithValidation, ValidationEvents } from '@grafana/ui';
+import { isRegex, variableRegex } from '../utils';
+
+const variablePattern = RegExp(`^${variableRegex.source}`);
+
+const getStyles = (theme: GrafanaTheme) => ({
+  inputRegex: css`
+    color: ${theme.colors.orange}
+  `,
+  inputVariable: css`
+    color: ${theme.colors.variable}
+  `,
+});
+
+const zabbixInputValidationEvents: ValidationEvents = {
+  [EventsWithValidation.onBlur]: [
+    {
+      rule: value => {
+        if (!value) {
+          return true;
+        }
+        if (value.length > 1 && value[0] === '/') {
+          if (value[value.length - 1] !== '/') {
+            return false;
+          }
+        }
+        return true;
+      },
+      errorMessage: 'Not a valid regex',
+    },
+    {
+      rule: value => {
+        if (value === '*') {
+          return false;
+        }
+        return true;
+      },
+      errorMessage: 'Wildcards not supported. Use /.*/ instead',
+    },
+  ],
+};
+
+interface Props extends React.ComponentProps<typeof Input>, Themeable {
+}
+
+const UnthemedZabbixInput: FC<Props> = ({ theme, value, ref, validationEvents, ...restProps }) => {
+  const styles = getStyles(theme);
+
+  let inputClass;
+  if (variablePattern.test(value as string)) {
+    inputClass = styles.inputVariable;
+  }
+  if (isRegex(value)) {
+    inputClass = styles.inputRegex;
+  }
+
+  return (
+    <Input
+      className={inputClass}
+      value={value}
+      validationEvents={zabbixInputValidationEvents}
+      {...restProps}
+    />
+  );
+};
+
+export const ZabbixInput = withTheme(UnthemedZabbixInput);
--- a/src/datasource-zabbix/datasource.js
+++ b/src/datasource-zabbix/datasource.js
@@ -9,6 +9,7 @@ import dataProcessor from './dataProcessor';
 import responseHandler from './responseHandler';
 import { Zabbix } from './zabbix/zabbix';
 import { ZabbixAPIError } from './zabbix/connectors/zabbix_api/zabbixAPICore';
+import { VariableQueryTypes } from './types';

 const DEFAULT_ZABBIX_VERSION = 3;

@@ -432,42 +433,41 @@ export class ZabbixDatasource {
   *                        of metrics in "{metric1,metcic2,...,metricN}" format.
   */
  metricFindQuery(query) {
-    let result;
-    let parts = [];
+    let resultPromise;
+    let queryModel = _.cloneDeep(query);

-    // Split query. Query structure: group.host.app.item
-    _.each(utils.splitTemplateQuery(query), part => {
-      part = this.replaceTemplateVars(part, {});
-
-      // Replace wildcard to regex
-      if (part === '*') {
-        part = '/.*/';
-      }
-      parts.push(part);
-    });
-    let template = _.zipObject(['group', 'host', 'app', 'item'], parts);
-
-    // Get items
-    if (parts.length === 4) {
-      // Search for all items, even it's not belong to any application
-      if (template.app === '/.*/') {
-        template.app = '';
-      }
-      result = this.zabbix.getItems(template.group, template.host, template.app, template.item);
-    } else if (parts.length === 3) {
-      // Get applications
-      result = this.zabbix.getApps(template.group, template.host, template.app);
-    } else if (parts.length === 2) {
-      // Get hosts
-      result = this.zabbix.getHosts(template.group, template.host);
-    } else if (parts.length === 1) {
-      // Get groups
-      result = this.zabbix.getGroups(template.group);
-    } else {
-      result = Promise.resolve([]);
+    if (!query) {
+      return Promise.resolve([]);
    }

-    return result.then(metrics => {
+    if (typeof query === 'string') {
+      // Backward compatibility
+      queryModel = utils.parseLegacyVariableQuery(query);
+    }
+
+    for (const prop of ['group', 'host', 'application', 'item']) {
+      queryModel[prop] = this.replaceTemplateVars(queryModel[prop], {});
+    }
+
+    switch (queryModel.queryType) {
+      case VariableQueryTypes.Group:
+        resultPromise = this.zabbix.getGroups(queryModel.group);
+        break;
+      case VariableQueryTypes.Host:
+        resultPromise = this.zabbix.getHosts(queryModel.group, queryModel.host);
+        break;
+      case VariableQueryTypes.Application:
+        resultPromise = this.zabbix.getApps(queryModel.group, queryModel.host, queryModel.application);
+        break;
+      case VariableQueryTypes.Item:
+        resultPromise = this.zabbix.getItems(queryModel.group, queryModel.host, queryModel.application, queryModel.item);
+        break;
+      default:
+        resultPromise = Promise.resolve([]);
+        break;
+    }
+
+    return resultPromise.then(metrics => {
      return _.map(metrics, formatMetric);
    });
  }
--- a/src/datasource-zabbix/module.ts
+++ b/src/datasource-zabbix/module.ts
@@ -2,15 +2,18 @@ import { loadPluginCss } from 'grafana/app/plugins/sdk';
 import { ZabbixDatasource } from './datasource';
 import { ZabbixQueryController } from './query.controller';
 import { ZabbixDSConfigController } from './config.controller';
+import { ZabbixVariableQueryEditor } from './components/VariableQueryEditor';
 import './zabbixAlerting.service.js';
 import './add-metric-function.directive';
 import './metric-function-editor.directive';

-class ZabbixQueryOptionsController {}
-ZabbixQueryOptionsController.templateUrl = 'datasource-zabbix/partials/query.options.html';
+class ZabbixQueryOptionsController {
+  static templateUrl = 'datasource-zabbix/partials/query.options.html';
+}

-class ZabbixAnnotationsQueryController {}
-ZabbixAnnotationsQueryController.templateUrl = 'datasource-zabbix/partials/annotations.editor.html';
+class ZabbixAnnotationsQueryController {
+  static templateUrl = 'datasource-zabbix/partials/annotations.editor.html';
+}

 ZabbixQueryController.templateUrl = 'datasource-zabbix/partials/query.editor.html';
 ZabbixDSConfigController.templateUrl = 'datasource-zabbix/partials/config.html';
@@ -25,5 +28,6 @@ export {
  ZabbixDSConfigController as ConfigCtrl,
  ZabbixQueryController as QueryCtrl,
  ZabbixQueryOptionsController as QueryOptionsCtrl,
-  ZabbixAnnotationsQueryController as AnnotationsQueryCtrl
+  ZabbixAnnotationsQueryController as AnnotationsQueryCtrl,
+  ZabbixVariableQueryEditor as VariableQueryEditor,
 };
--- a/src/datasource-zabbix/specs/datasource.spec.js
+++ b/src/datasource-zabbix/specs/datasource.spec.js
@@ -231,7 +231,7 @@ describe('ZabbixDatasource', () => {
    });
  });

-  describe('When invoking metricFindQuery()', () => {
+  describe('When invoking metricFindQuery() with legacy query', () => {
    beforeEach(() => {
      ctx.ds.replaceTemplateVars = (str) => str;
      ctx.ds.zabbix = {
@@ -245,7 +245,6 @@ describe('ZabbixDatasource', () => {
    it('should return groups', (done) => {
      const tests = [
        {query: '*',        expect: '/.*/'},
-        {query: '',         expect: ''},
        {query: 'Backend',  expect: 'Backend'},
        {query: 'Back*',    expect: 'Back*'},
      ];
@@ -258,6 +257,16 @@ describe('ZabbixDatasource', () => {
      done();
    });

+    it('should return empty list for empty query', (done) => {
+      ctx.ds.metricFindQuery('').then(result => {
+        expect(ctx.ds.zabbix.getGroups).toBeCalledTimes(0);
+        ctx.ds.zabbix.getGroups.mockClear();
+
+        expect(result).toEqual([]);
+        done();
+      });
+    });
+
    it('should return hosts', (done) => {
      const tests = [
        {query: '*.*',       expect: ['/.*/', '/.*/']},
--- a/src/datasource-zabbix/types.ts
+++ b/src/datasource-zabbix/types.ts
@@ -0,0 +1,30 @@
+import { SelectableValue } from "@grafana/data";
+
+export interface VariableQueryProps {
+  query: LegacyVariableQuery;
+  onChange: (query: VariableQuery, definition: string) => void;
+  datasource: any;
+  templateSrv: any;
+}
+
+export interface VariableQueryData extends VariableQuery {
+  selectedQueryType: SelectableValue<VariableQueryTypes>;
+  legacyQuery?: string;
+}
+
+export interface VariableQuery {
+  queryType: VariableQueryTypes;
+  group?: string;
+  host?: string;
+  application?: string;
+  item?: string;
+}
+
+export type LegacyVariableQuery = VariableQuery | string;
+
+export enum VariableQueryTypes {
+  Group = 'group',
+  Host = 'host',
+  Application = 'application',
+  Item = 'item',
+}
--- a/src/datasource-zabbix/utils.ts
+++ b/src/datasource-zabbix/utils.ts
@@ -2,6 +2,15 @@ import _ from 'lodash';
 import moment from 'moment';
 import kbn from 'grafana/app/core/utils/kbn';
 import * as c from './constants';
+import { VariableQuery, VariableQueryTypes } from './types';
+
+/*
+ * This regex matches 3 types of variable reference with an optional format specifier
+ * \$(\w+)                          $var1
+ * \[\[([\s\S]+?)(?::(\w+))?\]\]    [[var2]] or [[var2:fmt2]]
+ * \${(\w+)(?::(\w+))?}             ${var3} or ${var3:fmt3}
+ */
+export const variableRegex = /\$(\w+)|\[\[([\s\S]+?)(?::(\w+))?\]\]|\${(\w+)(?:\.([^:^\}]+))?(?::(\w+))?}/g;

 /**
 * Expand Zabbix item name
@@ -14,8 +23,8 @@ export function expandItemName(name, key) {

  // extract params from key:
  // "system.cpu.util[,system,avg1]" --> ["", "system", "avg1"]
-  let key_params_str = key.substring(key.indexOf('[') + 1, key.lastIndexOf(']'));
-  let key_params = splitKeyParams(key_params_str);
+  const key_params_str = key.substring(key.indexOf('[') + 1, key.lastIndexOf(']'));
+  const key_params = splitKeyParams(key_params_str);

  // replace item parameters
  for (let i = key_params.length; i >= 1; i--) {
@@ -34,10 +43,10 @@ export function expandItems(items) {
 }

 function splitKeyParams(paramStr) {
-  let params = [];
+  const params = [];
  let quoted = false;
  let in_array = false;
-  let split_symbol = ',';
+  const split_symbol = ',';
  let param = '';

  _.forEach(paramStr, symbol => {
@@ -71,9 +80,9 @@ export function containsMacro(itemName) {

 export function replaceMacro(item, macros) {
  let itemName = item.name;
-  let item_macros = itemName.match(MACRO_PATTERN);
+  const item_macros = itemName.match(MACRO_PATTERN);
  _.forEach(item_macros, macro => {
-    let host_macros = _.filter(macros, m => {
+    const host_macros = _.filter(macros, m => {
      if (m.hostid) {
        return m.hostid === item.hostid;
      } else {
@@ -82,10 +91,10 @@ export function replaceMacro(item, macros) {
      }
    });

-    let macro_def = _.find(host_macros, { macro: macro });
+    const macro_def = _.find(host_macros, { macro: macro });
    if (macro_def && macro_def.value) {
-      let macro_value = macro_def.value;
-      let macro_regex = new RegExp(escapeMacro(macro));
+      const macro_value = macro_def.value;
+      const macro_regex = new RegExp(escapeMacro(macro));
      itemName = itemName.replace(macro_regex, macro_value);
    }
  });
@@ -98,17 +107,62 @@ function escapeMacro(macro) {
  return macro;
 }

+export function parseLegacyVariableQuery(query: string): VariableQuery {
+  let queryType: VariableQueryTypes;
+  const parts = [];
+
+  // Split query. Query structure: group.host.app.item
+  _.each(splitTemplateQuery(query), part => {
+    // Replace wildcard to regex
+    if (part === '*') {
+      part = '/.*/';
+    }
+    parts.push(part);
+  });
+  const template = _.zipObject(['group', 'host', 'app', 'item'], parts);
+
+  if (parts.length === 4 && template.app === '/.*/') {
+    // Search for all items, even it's not belong to any application
+    template.app = '';
+  }
+
+  switch (parts.length) {
+    case 1:
+      queryType = VariableQueryTypes.Group;
+      break;
+    case 2:
+      queryType = VariableQueryTypes.Host;
+      break;
+    case 3:
+      queryType = VariableQueryTypes.Application;
+      break;
+    case 4:
+      queryType = VariableQueryTypes.Item;
+      break;
+  }
+
+  const variableQuery: VariableQuery = {
+    queryType,
+    group: template.group || '',
+    host: template.host || '',
+    application: template.app || '',
+    item: template.item || '',
+  };
+
+  return variableQuery;
+}
+
 /**
 * Split template query to parts of zabbix entities
 * group.host.app.item -> [group, host, app, item]
 * {group}{host.com} -> [group, host.com]
 */
 export function splitTemplateQuery(query) {
-  let splitPattern = /\{[^\{\}]*\}|\{\/.*\/\}/g;
+  const splitPattern = /\{[^\{\}]*\}|\{\/.*\/\}/g;
  let split;

  if (isContainsBraces(query)) {
-    let result = query.match(splitPattern);
+    const result = query.match(splitPattern);
    split = _.map(result, part => {
      return _.trim(part, '{}');
    });
@@ -120,7 +174,7 @@ export function splitTemplateQuery(query) {
 }

 function isContainsBraces(query) {
-  let bracesPattern = /^\{.+\}$/;
+  const bracesPattern = /^\{.+\}$/;
  return bracesPattern.test(query);
 }

@@ -132,9 +186,9 @@ export function isRegex(str) {
 }

 export function isTemplateVariable(str, templateVariables) {
-  var variablePattern = /^\$\w+/;
+  const variablePattern = /^\$\w+/;
  if (variablePattern.test(str)) {
-    var variables = _.map(templateVariables, variable => {
+    const variables = _.map(templateVariables, variable => {
      return '$' + variable.name;
    });
    return _.includes(variables, str);
@@ -156,9 +210,9 @@ export function getRangeScopedVars(range) {
 }

 export function buildRegex(str) {
-  var matches = str.match(regexPattern);
-  var pattern = matches[1];
-  var flags = matches[2] !== "" ? matches[2] : undefined;
+  const matches = str.match(regexPattern);
+  const pattern = matches[1];
+  const flags = matches[2] !== "" ? matches[2] : undefined;
  return new RegExp(pattern, flags);
 }

@@ -169,18 +223,18 @@ export function escapeRegex(value) {
 }

 export function parseInterval(interval) {
-  var intervalPattern = /(^[\d]+)(y|M|w|d|h|m|s)/g;
-  var momentInterval = intervalPattern.exec(interval);
+  const intervalPattern = /(^[\d]+)(y|M|w|d|h|m|s)/g;
+  const momentInterval: any[] = intervalPattern.exec(interval);
  return moment.duration(Number(momentInterval[1]), momentInterval[2]).valueOf();
 }

 export function parseTimeShiftInterval(interval) {
-  let intervalPattern = /^([\+\-]*)([\d]+)(y|M|w|d|h|m|s)/g;
-  let momentInterval = intervalPattern.exec(interval);
-  let duration = 0;
+  const intervalPattern = /^([\+\-]*)([\d]+)(y|M|w|d|h|m|s)/g;
+  const momentInterval: any[] = intervalPattern.exec(interval);
+  let duration: any = 0;

  if (momentInterval[1] === '+') {
-    duration = 0 - moment.duration(Number(momentInterval[2]), momentInterval[3]).valueOf();
+    duration = 0 - (moment.duration(Number(momentInterval[2]), momentInterval[3]).valueOf() as any);
  } else {
    duration = moment.duration(Number(momentInterval[2]), momentInterval[3]).valueOf();
  }
@@ -196,13 +250,13 @@ export function parseTimeShiftInterval(interval) {
 */
 export function formatAcknowledges(acknowledges) {
  if (acknowledges.length) {
-    var formatted_acknowledges = '<br><br>Acknowledges:<br><table><tr><td><b>Time</b></td>'
+    let formatted_acknowledges = '<br><br>Acknowledges:<br><table><tr><td><b>Time</b></td>'
      + '<td><b>User</b></td><td><b>Comments</b></td></tr>';
-    _.each(_.map(acknowledges, function (ack) {
-      var timestamp = moment.unix(ack.clock);
+    _.each(_.map(acknowledges, ack => {
+      const timestamp = moment.unix(ack.clock);
      return '<tr><td><i>' + timestamp.format("DD MMM YYYY HH:mm:ss") + '</i></td><td>' + ack.alias
        + ' (' + ack.name + ' ' + ack.surname + ')' + '</td><td>' + ack.message + '</td></tr>';
-    }), function (ack) {
+    }), ack => {
      formatted_acknowledges = formatted_acknowledges.concat(ack);
    });
    formatted_acknowledges = formatted_acknowledges.concat('</table>');
@@ -213,8 +267,8 @@ export function formatAcknowledges(acknowledges) {
 }

 export function convertToZabbixAPIUrl(url) {
-  var zabbixAPIUrlPattern = /.*api_jsonrpc.php$/;
-  var trimSlashPattern = /(.*?)[\/]*$/;
+  const zabbixAPIUrlPattern = /.*api_jsonrpc.php$/;
+  const trimSlashPattern = /(.*?)[\/]*$/;
  if (url.match(zabbixAPIUrlPattern)) {
    return url;
  } else {
@@ -247,7 +301,7 @@ export function callOnce(func, promiseKeeper) {
 */
 export function sequence(funcsArray) {
  return function(result) {
-    for (var i = 0; i < funcsArray.length; i++) {
+    for (let i = 0; i < funcsArray.length; i++) {
      result = funcsArray[i].call(this, result);
    }
    return result;
@@ -292,5 +346,5 @@ export function getArrayDepth(a, level = 0) {

 // Fix for backward compatibility with lodash 2.4
 if (!_.includes) {
-  _.includes = _.contains;
+  _.includes = (_ as any).contains;
 }
--- a/src/test-setup/jest-setup.js
+++ b/src/test-setup/jest-setup.js
@@ -75,9 +75,9 @@ jest.mock('grafana/app/core/config', () => {

 jest.mock('jquery', () => 'module not found', {virtual: true});

-jest.mock('@grafana/ui', () => {
-  return {};
-}, {virtual: true});
+// jest.mock('@grafana/ui', () => {
+//   return {};
+// }, {virtual: true});

 // Required for loading angularjs
 let dom = new JSDOM('<html><head><script></script></head><body></body></html>');
--- a/webpack/webpack.base.conf.js
+++ b/webpack/webpack.base.conf.js
@@ -17,7 +17,7 @@ module.exports = {
  entry: {
    './module': './module.js',
    'components/config': './components/config.js',
-    'datasource-zabbix/module': './datasource-zabbix/module.js',
+    'datasource-zabbix/module': './datasource-zabbix/module.ts',
    'panel-triggers/module': './panel-triggers/module.js',
  },
  output: {
@@ -27,7 +27,7 @@ module.exports = {
  },
  externals: [
    // remove the line below if you don't want to use builtin versions
-    'jquery', 'lodash', 'moment', 'angular',
+    'jquery', 'lodash', 'moment', 'angular', 'emotion',
    'react', 'react-dom', '@grafana/ui', '@grafana/data',
    function (context, request, callback) {
      var prefix = 'grafana/';
--- a/yarn.lock
+++ b/yarn.lock
@@ -696,6 +696,13 @@
  dependencies:
    regenerator-runtime "^0.13.2"

+"@babel/runtime@^7.5.5":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.7.tgz#194769ca8d6d7790ec23605af9ee3e42a0aa79cf"
+  integrity sha512-uCnC2JEVAu8AKB5do1WRIsvrdJ0flYx/A/9f/6chdacnEZ7LmavjdsDXr5ksYBegxtuTPR5Va9/+13QF/kFkCA==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@^7.4.0", "@babel/template@^7.7.4":
  version "7.7.4"
  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b"
@@ -758,16 +765,68 @@
    find-root "^1.1.0"
    source-map "^0.7.2"

+"@emotion/cache@^10.0.27":
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.27.tgz#7895db204e2c1a991ae33d51262a3a44f6737303"
+  integrity sha512-Zp8BEpbMunFsTcqAK4D7YTm3MvCp1SekflSLJH8lze2fCcSZ/yMkXHo8kb3t1/1Tdd3hAqf3Fb7z9VZ+FMiC9w==
+  dependencies:
+    "@emotion/sheet" "0.9.4"
+    "@emotion/stylis" "0.8.5"
+    "@emotion/utils" "0.11.3"
+    "@emotion/weak-memoize" "0.2.5"
+
+"@emotion/core@^10.0.27":
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.27.tgz#7c3f78be681ab2273f3bf11ca3e2edc4a9dd1fdc"
+  integrity sha512-XbD5R36pVbohQMnKfajHv43g8EbN4NHdF6Zh9zg/C0nr0jqwOw3gYnC07Xj3yG43OYSRyrGsoQ5qPwc8ycvLZw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/cache" "^10.0.27"
+    "@emotion/css" "^10.0.27"
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/sheet" "0.9.4"
+    "@emotion/utils" "0.11.3"
+
+"@emotion/css@^10.0.27":
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
+  integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==
+  dependencies:
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/utils" "0.11.3"
+    babel-plugin-emotion "^10.0.27"
+
+"@emotion/hash@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831"
+  integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==
+
 "@emotion/hash@^0.6.2", "@emotion/hash@^0.6.6":
  version "0.6.6"
  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.6.6.tgz#62266c5f0eac6941fece302abad69f2ee7e25e44"
  integrity sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ==

+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@emotion/memoize@^0.6.1", "@emotion/memoize@^0.6.6":
  version "0.6.6"
  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.6.tgz#004b98298d04c7ca3b4f50ca2035d4f60d2eed1b"
  integrity sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ==

+"@emotion/serialize@^0.11.15":
+  version "0.11.15"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.15.tgz#9a0f5873fb458d87d4f23e034413c12ed60a705a"
+  integrity sha512-YE+qnrmGwyR+XB5j7Bi+0GT1JWsdcjM/d4POu+TXkcnrRs4RFCCsi3d/Ebf+wSStHqAlTT2+dfd+b9N9EO2KBg==
+  dependencies:
+    "@emotion/hash" "0.7.4"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/unitless" "0.7.5"
+    "@emotion/utils" "0.11.3"
+    csstype "^2.5.7"
+
 "@emotion/serialize@^0.9.1":
  version "0.9.1"
  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.9.1.tgz#a494982a6920730dba6303eb018220a2b629c145"
@@ -778,21 +837,46 @@
    "@emotion/unitless" "^0.6.7"
    "@emotion/utils" "^0.8.2"

+"@emotion/sheet@0.9.4":
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
+  integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
+
+"@emotion/stylis@0.8.5":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
 "@emotion/stylis@^0.7.0":
  version "0.7.1"
  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.7.1.tgz#50f63225e712d99e2b2b39c19c70fff023793ca5"
  integrity sha512-/SLmSIkN13M//53TtNxgxo57mcJk/UJIDFRKwOiLIBEyBHEcipgR6hNMQ/59Sl4VjCJ0Z/3zeAZyvnSLPG/1HQ==

+"@emotion/unitless@0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
 "@emotion/unitless@^0.6.2", "@emotion/unitless@^0.6.7":
  version "0.6.7"
  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.6.7.tgz#53e9f1892f725b194d5e6a1684a7b394df592397"
  integrity sha512-Arj1hncvEVqQ2p7Ega08uHLr1JuRYBuO5cIvcA+WWEQ5+VmkOE3ZXzl04NbQxeQpWX78G7u6MqxKuNX3wvYZxg==

+"@emotion/utils@0.11.3":
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
+  integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
+
 "@emotion/utils@^0.8.2":
  version "0.8.2"
  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.8.2.tgz#576ff7fb1230185b619a75d258cbc98f0867a8dc"
  integrity sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw==

+"@emotion/weak-memoize@0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
 "@grafana/data@6.4.2", "@grafana/data@^6.4.2":
  version "6.4.2"
  resolved "https://registry.yarnpkg.com/@grafana/data/-/data-6.4.2.tgz#1ce4687757c609a6b12b39b04cd37e20e08fee8f"
@@ -1745,6 +1829,22 @@ babel-plugin-dynamic-import-node@^2.3.0:
  dependencies:
    object.assign "^4.1.0"

+babel-plugin-emotion@^10.0.27:
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.27.tgz#59001cf5de847c1d61f2079cd906a90a00d3184f"
+  integrity sha512-SUNYcT4FqhOqvwv0z1oeYhqgheU8qrceLojuHyX17ngo7WtWqN5I9l3IGHzf21Xraj465CVzF4IvOlAF+3ed0A==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/hash" "0.7.4"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/serialize" "^0.11.15"
+    babel-plugin-macros "^2.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^1.0.5"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+
 babel-plugin-emotion@^9.2.11:
  version "9.2.11"
  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-9.2.11.tgz#319c005a9ee1d15bb447f59fe504c35fd5807728"
@@ -2810,6 +2910,11 @@ csstype@^2.5.2:
  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5"
  integrity sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==

+csstype@^2.5.7:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.8.tgz#0fb6fc2417ffd2816a418c9336da74d7f07db431"
+  integrity sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA==
+
 cst@^0.4.3:
  version "0.4.10"
  resolved "https://registry.yarnpkg.com/cst/-/cst-0.4.10.tgz#9c05c825290a762f0a85c0aabb8c0fe035ae8516"
@@ -7333,11 +7438,16 @@ react-input-autosize@^2.2.1:
  dependencies:
    prop-types "^15.5.8"

-react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
+react-is@^16.7.0, react-is@^16.8.4:
  version "16.12.0"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
  integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==

+react-is@^16.8.1:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
+  integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
+
 react-lifecycles-compat@^3.0.4:
  version "3.0.4"
  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -7765,13 +7875,20 @@ resolve@1.x:
  dependencies:
    path-parse "^1.0.6"

-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.3.2:
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.3.2:
  version "1.14.1"
  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.14.1.tgz#9e018c540fcf0c427d678b9931cbf45e984bcaff"
  integrity sha512-fn5Wobh4cxbLzuHaE+nphztHy43/b++4M6SsGFC2gB8uYwf0C8LcarfCz1un7UTW8OFQg9iNjZ4xpcFVGebDPg==
  dependencies:
    path-parse "^1.0.6"

+resolve@^1.10.0:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.11.1.tgz#ea10d8110376982fef578df8fc30b9ac30a07a3e"
+  integrity sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==
+  dependencies:
+    path-parse "^1.0.6"
+
 restructured@0.0.11:
  version "0.0.11"
  resolved "https://registry.yarnpkg.com/restructured/-/restructured-0.0.11.tgz#f914f6b6f358b8e45d6d8ee268926cf1a783f710"