Build plugin with grafana toolkit (#1539)

* Use grafana toolkit template for building plugin * Fix linter and type errors * Update styles building * Fix sass deprecation warning * Remove empty js files produced by webpack building sass * Fix signing script * Replace classnames with cx * Fix data source config page * Use custom webpack config instead of overriding original one * Use gpx_ prefix for plugin executable * Remove unused configs * Roll back react hooks dependencies usage * Move plugin-specific ts config to root config file * Temporary do not use rst2html for function description tooltip * Remove unused code * remove unused dependencies * update react table dependency * Migrate tests to typescript * remove unused dependencies * Remove old webpack configs * Add sign target to makefile * Add magefile * Update CI test job * Update go packages * Update build instructions * Downgrade go version to 1.18 * Fix go version in ci * Fix metric picker * Add comment to webpack config * remove angular mocks * update bra config * Rename datasource-zabbix to datasource (fix mage build) * Add instructions for building backend with mage * Fix webpack targets * Fix ci backend tests * Add initial e2e tests * Fix e2e ci tests * Update docker compose for cypress tests * build grafana docker image * Fix docker stop task * CI: add Grafana compatibility check
2022-12-09 14:14:34 +03:00
parent 26ed740945
commit e3e896742b
136 changed files with 5765 additions and 4636 deletions
--- a/src/panel-triggers/ProblemsPanel.tsx
+++ b/src/panel-triggers/ProblemsPanel.tsx
@@ -1,12 +1,11 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React from 'react';
 import _ from 'lodash';
-import { BusEventBase, BusEventWithPayload, dateMath, PanelProps } from '@grafana/data';
+import { DataSourceRef, dateMath, PanelProps } from '@grafana/data';
 import { getDataSourceSrv } from '@grafana/runtime';
-import { useTheme2 } from '@grafana/ui';
 import { contextSrv } from 'grafana/app/core/core';
-import { ProblemsPanelOptions } from './types';
-import { ProblemDTO, ZabbixMetricsQuery, ZBXQueryUpdatedEvent, ZBXTag } from '../datasource-zabbix/types';
-import { APIExecuteScriptResponse } from '../datasource-zabbix/zabbix/connectors/zabbix_api/types';
+import { ProblemsPanelOptions, RTResized } from './types';
+import { ProblemDTO, ZabbixMetricsQuery, ZBXQueryUpdatedEvent, ZBXTag } from '../datasource/types';
+import { APIExecuteScriptResponse } from '../datasource/zabbix/connectors/zabbix_api/types';
 import ProblemList from './components/Problems/Problems';
 import { AckProblemData } from './components/AckModal';
 import AlertList from './components/AlertList/AlertList';
@@ -18,7 +17,6 @@ interface ProblemsPanelProps extends PanelProps<ProblemsPanelOptions> {}
 export const ProblemsPanel = (props: ProblemsPanelProps): JSX.Element => {
  const { data, options, timeRange, onOptionsChange } = props;
  const { layout, showTriggers, triggerSeverity, sortProblems } = options;
-  const theme = useTheme2();

  const prepareProblems = () => {
    const problems: ProblemDTO[] = [];
@@ -63,11 +61,8 @@ export const ProblemsPanel = (props: ProblemsPanelProps): JSX.Element => {

    // Filter triggers by severity
    problemsList = problemsList.filter((problem) => {
-      if (problem.severity) {
-        return triggerSeverity[problem.severity].show;
-      } else {
-        return triggerSeverity[problem.priority].show;
-      }
+      const severity = problem.severity !== undefined ? Number(problem.severity) : Number(problem.priority);
+      return triggerSeverity[severity].show;
    });

    return problemsList;
@@ -97,7 +92,7 @@ export const ProblemsPanel = (props: ProblemsPanelProps): JSX.Element => {

    // Set tags if present
    if (trigger.tags && trigger.tags.length === 0) {
-      trigger.tags = null;
+      trigger.tags = undefined;
    }

    // Handle multi-line description
@@ -109,7 +104,7 @@ export const ProblemsPanel = (props: ProblemsPanelProps): JSX.Element => {
    return trigger;
  };

-  const parseTags = (tagStr: string) => {
+  const parseTags = (tagStr: string): ZBXTag[] => {
    if (!tagStr) {
      return [];
    }
@@ -126,18 +121,18 @@ export const ProblemsPanel = (props: ProblemsPanelProps): JSX.Element => {
    return _.map(tags, (tag) => `${tag.tag}:${tag.value}`).join(', ');
  };

-  const addTagFilter = (tag, datasource) => {
-    const targets = data.request.targets;
+  const addTagFilter = (tag: ZBXTag, datasource: DataSourceRef) => {
+    const targets = data.request?.targets!;
    let updated = false;
    for (const target of targets) {
      if (target.datasource?.uid === datasource?.uid || target.datasource === datasource) {
-        const tagFilter = (target as ZabbixMetricsQuery).tags.filter;
+        const tagFilter = (target as ZabbixMetricsQuery).tags?.filter!;
        let targetTags = parseTags(tagFilter);
        const newTag = { tag: tag.tag, value: tag.value };
        targetTags.push(newTag);
        targetTags = _.uniqWith(targetTags, _.isEqual);
        const newFilter = tagsToString(targetTags);
-        (target as ZabbixMetricsQuery).tags.filter = newFilter;
+        (target as ZabbixMetricsQuery).tags!.filter = newFilter;
        updated = true;
      }
    }
@@ -148,18 +143,18 @@ export const ProblemsPanel = (props: ProblemsPanelProps): JSX.Element => {
    }
  };

-  const removeTagFilter = (tag, datasource) => {
-    const matchTag = (t) => t.tag === tag.tag && t.value === tag.value;
-    const targets = data.request.targets;
+  const removeTagFilter = (tag: ZBXTag, datasource: DataSourceRef) => {
+    const matchTag = (t: ZBXTag) => t.tag === tag.tag && t.value === tag.value;
+    const targets = data.request?.targets!;
    let updated = false;
    for (const target of targets) {
      if (target.datasource?.uid === datasource?.uid || target.datasource === datasource) {
-        const tagFilter = (target as ZabbixMetricsQuery).tags.filter;
+        const tagFilter = (target as ZabbixMetricsQuery).tags?.filter!;
        let targetTags = parseTags(tagFilter);
        _.remove(targetTags, matchTag);
        targetTags = _.uniqWith(targetTags, _.isEqual);
        const newFilter = tagsToString(targetTags);
-        (target as ZabbixMetricsQuery).tags.filter = newFilter;
+        (target as ZabbixMetricsQuery).tags!.filter = newFilter;
        updated = true;
      }
    }
@@ -172,8 +167,8 @@ export const ProblemsPanel = (props: ProblemsPanelProps): JSX.Element => {

  const getProblemEvents = async (problem: ProblemDTO) => {
    const triggerids = [problem.triggerid];
-    const timeFrom = Math.ceil(dateMath.parse(timeRange.from).unix());
-    const timeTo = Math.ceil(dateMath.parse(timeRange.to).unix());
+    const timeFrom = Math.ceil(dateMath.parse(timeRange.from)!.unix());
+    const timeTo = Math.ceil(dateMath.parse(timeRange.to)!.unix());
    const ds: any = await getDataSourceSrv().get(problem.datasource);
    return ds.zabbix.getEvents(triggerids, timeFrom, timeTo, [0, 1], PROBLEM_EVENTS_LIMIT);
  };
@@ -216,11 +211,11 @@ export const ProblemsPanel = (props: ProblemsPanelProps): JSX.Element => {
    }
  };

-  const onColumnResize = (newResized) => {
+  const onColumnResize = (newResized: RTResized) => {
    onOptionsChange({ ...options, resizedColumns: newResized });
  };

-  const onTagClick = (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => {
+  const onTagClick = (tag: ZBXTag, datasource: DataSourceRef, ctrlKey?: boolean, shiftKey?: boolean) => {
    if (ctrlKey || shiftKey) {
      removeTagFilter(tag, datasource);
    } else {
@@ -231,7 +226,7 @@ export const ProblemsPanel = (props: ProblemsPanelProps): JSX.Element => {
  const renderList = () => {
    const problems = prepareProblems();
    const fontSize = parseInt(options.fontSize.slice(0, options.fontSize.length - 1), 10);
-    const fontSizeProp = fontSize && fontSize !== 100 ? fontSize : null;
+    const fontSizeProp = fontSize && fontSize !== 100 ? fontSize : undefined;

    return (
      <AlertList
@@ -248,7 +243,7 @@ export const ProblemsPanel = (props: ProblemsPanelProps): JSX.Element => {
  const renderTable = () => {
    const problems = prepareProblems();
    const fontSize = parseInt(options.fontSize.slice(0, options.fontSize.length - 1), 10);
-    const fontSizeProp = fontSize && fontSize !== 100 ? fontSize : null;
+    const fontSizeProp = fontSize && fontSize !== 100 ? fontSize : undefined;

    return (
      <ProblemList
--- a/src/panel-triggers/components/AckModal.tsx
+++ b/src/panel-triggers/components/AckModal.tsx
@@ -5,7 +5,7 @@ import {
  ZBX_ACK_ACTION_ACK,
  ZBX_ACK_ACTION_CHANGE_SEVERITY,
  ZBX_ACK_ACTION_CLOSE,
-} from '../../datasource-zabbix/constants';
+} from '../../datasource/constants';
 import {
  Button,
  VerticalGroup,
--- a/src/panel-triggers/components/AlertList/AlertAcknowledges.tsx
+++ b/src/panel-triggers/components/AlertList/AlertAcknowledges.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { ProblemDTO } from '../../../datasource-zabbix/types';
+import { ProblemDTO } from '../../../datasource/types';

 interface AlertAcknowledgesProps {
  problem: ProblemDTO;
--- a/src/panel-triggers/components/AlertList/AlertCard.tsx
+++ b/src/panel-triggers/components/AlertList/AlertCard.tsx
@@ -1,6 +1,7 @@
 import React, { PureComponent, CSSProperties } from 'react';
-import classNames from 'classnames';
+import { cx } from '@emotion/css';
 import _ from 'lodash';
+// eslint-disable-next-line
 import moment from 'moment';
 import { isNewProblem, formatLastChange } from '../../utils';
 import { ProblemsPanelOptions, TriggerSeverity } from '../../types';
@@ -8,7 +9,7 @@ import { AckProblemData, AckModal } from '../AckModal';
 import EventTag from '../EventTag';
 import AlertAcknowledges from './AlertAcknowledges';
 import AlertIcon from './AlertIcon';
-import { ProblemDTO, ZBXTag } from '../../../datasource-zabbix/types';
+import { ProblemDTO, ZBXTag } from '../../../datasource/types';
 import { ModalController } from '../../../components';
 import { DataSourceRef } from '@grafana/data';
 import { Tooltip } from '@grafana/ui';
@@ -36,10 +37,10 @@ export default class AlertCard extends PureComponent<AlertCardProps> {
  render() {
    const { problem, panelOptions } = this.props;
    const showDatasourceName = panelOptions.targets && panelOptions.targets.length > 1;
-    const cardClass = classNames('alert-rule-item', 'zbx-trigger-card', {
+    const cardClass = cx('alert-rule-item', 'zbx-trigger-card', {
      'zbx-trigger-highlighted': panelOptions.highlightBackground,
    });
-    const descriptionClass = classNames('alert-rule-item__text', {
+    const descriptionClass = cx('alert-rule-item__text', {
      'zbx-description--newline': panelOptions.descriptionAtNewLine,
    });

@@ -155,7 +156,7 @@ export default class AlertCard extends PureComponent<AlertCardProps> {
          <span>{lastchange || 'last change unknown'}</span>
          <div className="trigger-info-block zbx-status-icons">
            {problem.url && (
-              <a href={problem.url} target="_blank">
+              <a href={problem.url} target="_blank" rel="noreferrer">
                <i className="fa fa-external-link"></i>
              </a>
            )}
@@ -239,19 +240,23 @@ const DEFAULT_PROBLEM_COLOR = 'rgb(215, 0, 0)';
 function AlertStatus(props) {
  const { problem, okColor, problemColor, blink } = props;
  const status = problem.value === '0' ? 'RESOLVED' : 'PROBLEM';
-  const color = problem.value === '0' ? okColor || DEFAULT_OK_COLOR : problemColor || DEFAULT_PROBLEM_COLOR;
-  const className = classNames(
+  const color: string = problem.value === '0' ? okColor || DEFAULT_OK_COLOR : problemColor || DEFAULT_PROBLEM_COLOR;
+  const className = cx(
    'zbx-trigger-state',
    { 'alert-state-critical': problem.value === '1' },
    { 'alert-state-ok': problem.value === '0' },
    { 'zabbix-trigger--blinked': blink }
  );
-  return <span className={className}>{status}</span>;
+  return (
+    <span className={className} style={{ color: color }}>
+      {status}
+    </span>
+  );
 }

 function AlertSeverity(props) {
  const { severityDesc, highlightBackground, blink } = props;
-  const className = classNames('zbx-trigger-severity', { 'zabbix-trigger--blinked': blink });
+  const className = cx('zbx-trigger-severity', { 'zabbix-trigger--blinked': blink });
  const style: CSSProperties = {};
  if (!highlightBackground) {
    style.color = severityDesc.color;
--- a/src/panel-triggers/components/AlertList/AlertIcon.tsx
+++ b/src/panel-triggers/components/AlertList/AlertIcon.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { cx, css } from '@emotion/css';
 import { GFHeartIcon } from '../../../components';
-import { ProblemDTO } from '../../../datasource-zabbix/types';
+import { ProblemDTO } from '../../../datasource/types';

 interface Props {
  problem: ProblemDTO;
--- a/src/panel-triggers/components/AlertList/AlertList.tsx
+++ b/src/panel-triggers/components/AlertList/AlertList.tsx
@@ -1,9 +1,9 @@
-import React, { PureComponent, CSSProperties } from 'react';
-import classNames from 'classnames';
+import React, { PureComponent } from 'react';
+import { cx } from '@emotion/css';
 import { ProblemsPanelOptions } from '../../types';
 import { AckProblemData } from '../AckModal';
 import AlertCard from './AlertCard';
-import { ProblemDTO, ZBXTag } from '../../../datasource-zabbix/types';
+import { ProblemDTO, ZBXTag } from '../../../datasource/types';
 import { DataSourceRef } from '@grafana/data';

 export interface AlertListProps {
@@ -13,7 +13,7 @@ export interface AlertListProps {
  pageSize?: number;
  fontSize?: number;
  onProblemAck?: (problem: ProblemDTO, data: AckProblemData) => void;
-  onTagClick?: (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => void;
+  onTagClick?: (tag: ZBXTag, datasource: DataSourceRef, ctrlKey?: boolean, shiftKey?: boolean) => void;
 }

 interface AlertListState {
@@ -45,7 +45,7 @@ export default class AlertList extends PureComponent<AlertListProps, AlertListSt
    });
  };

-  handleTagClick = (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => {
+  handleTagClick = (tag: ZBXTag, datasource: DataSourceRef, ctrlKey?: boolean, shiftKey?: boolean) => {
    if (this.props.onTagClick) {
      this.props.onTagClick(tag, datasource, ctrlKey, shiftKey);
    }
@@ -60,7 +60,7 @@ export default class AlertList extends PureComponent<AlertListProps, AlertListSt
    const currentProblems = this.getCurrentProblems(this.state.page);
    let fontSize = parseInt(panelOptions.fontSize.slice(0, panelOptions.fontSize.length - 1), 10);
    fontSize = fontSize && fontSize !== 100 ? fontSize : null;
-    const alertListClass = classNames('alert-rule-list', { [`font-size--${fontSize}`]: fontSize });
+    const alertListClass = cx('alert-rule-list', { [`font-size--${fontSize}`]: !!fontSize });

    return (
      <div className="triggers-panel-container" key="alertListContainer">
@@ -117,7 +117,7 @@ class PaginationControl extends PureComponent<PaginationControlProps> {

    const pageLinks = [];
    for (let i = startPage; i < endPage; i++) {
-      const pageLinkClass = classNames('triggers-panel-page-link', 'pointer', { active: i === pageIndex });
+      const pageLinkClass = cx('triggers-panel-page-link', 'pointer', { active: i === pageIndex });
      const value = i + 1;
      const pageLinkElem = (
        <li key={value.toString()}>
--- a/src/panel-triggers/components/EventTag.tsx
+++ b/src/panel-triggers/components/EventTag.tsx
@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import { DataSourceRef } from '@grafana/data';
-import { Tooltip } from '@grafana/ui';
-import { ZBXTag } from '../../datasource-zabbix/types';
+import { ZBXTag } from '../../datasource/types';

 const TAG_COLORS = [
  '#E24D42',
--- a/src/panel-triggers/components/ExecScriptModal.tsx
+++ b/src/panel-triggers/components/ExecScriptModal.tsx
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { cx, css } from '@emotion/css';
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
 import { Button, Spinner, Modal, Select, stylesFactory, withTheme, Themeable } from '@grafana/ui';
-import { ZBXScript, APIExecuteScriptResponse } from '../../datasource-zabbix/zabbix/connectors/zabbix_api/types';
+import { ZBXScript, APIExecuteScriptResponse } from '../../datasource/zabbix/connectors/zabbix_api/types';
 import { FAIcon } from '../../components';

 interface Props extends Themeable {
--- a/src/panel-triggers/components/ProblemColorEditor.tsx
+++ b/src/panel-triggers/components/ProblemColorEditor.tsx
@@ -1,17 +1,6 @@
 import React, { FormEvent } from 'react';
-import {
-  Button,
-  ColorPicker,
-  HorizontalGroup,
-  InlineField,
-  InlineFieldRow,
-  InlineLabel,
-  InlineSwitch,
-  Input,
-  VerticalGroup,
-} from '@grafana/ui';
 import { StandardEditorProps } from '@grafana/data';
-import { GFHeartIcon } from '../../components';
+import { ColorPicker, InlineField, InlineFieldRow, InlineLabel, InlineSwitch, Input, VerticalGroup } from '@grafana/ui';
 import { TriggerSeverity } from '../types';

 type Props = StandardEditorProps<TriggerSeverity[]>;
--- a/src/panel-triggers/components/Problems/AckCell.tsx
+++ b/src/panel-triggers/components/Problems/AckCell.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { css } from '@emotion/css';
 import { RTCell } from '../../types';
-import { ProblemDTO } from '../../../datasource-zabbix/types';
+import { ProblemDTO } from '../../../datasource/types';
 import { FAIcon } from '../../../components';
 import { useTheme, stylesFactory } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
--- a/src/panel-triggers/components/Problems/AcknowledgesList.tsx
+++ b/src/panel-triggers/components/Problems/AcknowledgesList.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ZBXAcknowledge } from '../../../datasource-zabbix/types';
+import { ZBXAcknowledge } from '../../../datasource/types';

 interface AcknowledgesListProps {
  acknowledges: ZBXAcknowledge[];
--- a/src/panel-triggers/components/Problems/ProblemDetails.tsx
+++ b/src/panel-triggers/components/Problems/ProblemDetails.tsx
@@ -1,11 +1,12 @@
 import React, { FC, PureComponent } from 'react';
+// eslint-disable-next-line
 import moment from 'moment';
 import { TimeRange, DataSourceRef } from '@grafana/data';
 import { Tooltip } from '@grafana/ui';
 import { getDataSourceSrv } from '@grafana/runtime';
-import * as utils from '../../../datasource-zabbix/utils';
-import { ProblemDTO, ZBXAlert, ZBXEvent, ZBXGroup, ZBXHost, ZBXTag } from '../../../datasource-zabbix/types';
-import { APIExecuteScriptResponse, ZBXScript } from '../../../datasource-zabbix/zabbix/connectors/zabbix_api/types';
+import * as utils from '../../../datasource/utils';
+import { ProblemDTO, ZBXAlert, ZBXEvent, ZBXGroup, ZBXHost, ZBXTag, ZBXItem } from '../../../datasource/types';
+import { APIExecuteScriptResponse, ZBXScript } from '../../../datasource/zabbix/connectors/zabbix_api/types';
 import { AckModal, AckProblemData } from '../AckModal';
 import EventTag from '../EventTag';
 import AcknowledgesList from './AcknowledgesList';
@@ -13,7 +14,6 @@ import ProblemTimeline from './ProblemTimeline';
 import { AckButton, ExecScriptButton, ExploreButton, FAIcon, ModalController } from '../../../components';
 import { ExecScriptData, ExecScriptModal } from '../ExecScriptModal';
 import ProblemStatusBar from './ProblemStatusBar';
-import { ZBXItem } from '../../../datasource-zabbix/types';
 import { RTRow } from '../../types';

 interface ProblemDetailsProps extends RTRow<ProblemDTO> {
--- a/src/panel-triggers/components/Problems/ProblemStatusBar.tsx
+++ b/src/panel-triggers/components/Problems/ProblemStatusBar.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Tooltip } from '@grafana/ui';
 import FAIcon from '../../../components/FAIcon/FAIcon';
-import { ZBXAlert, ProblemDTO } from '../../../datasource-zabbix/types';
+import { ZBXAlert, ProblemDTO } from '../../../datasource/types';

 export interface ProblemStatusBarProps {
  problem: ProblemDTO;
@@ -61,7 +61,7 @@ function ProblemStatusBarItem(props: ProblemStatusBarItemProps) {
    );
  }
  return link ? (
-    <a href={link} target="_blank">
+    <a href={link} target="_blank" rel="noreferrer">
      {item}
    </a>
  ) : (
--- a/src/panel-triggers/components/Problems/ProblemTimeline.tsx
+++ b/src/panel-triggers/components/Problems/ProblemTimeline.tsx
@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react';
 import _ from 'lodash';
+// eslint-disable-next-line
 import moment from 'moment';
-import { ZBXEvent, ZBXAcknowledge } from '../../../datasource-zabbix/types';
+import { ZBXEvent, ZBXAcknowledge } from '../../../datasource/types';
 import { TimeRange } from '@grafana/data';

 const DEFAULT_OK_COLOR = 'rgb(56, 189, 113)';
@@ -370,7 +371,12 @@ class TimelineRegions extends PureComponent<TimelineRegionsProps> {
      return <rect key={`${event.eventid}-${index}`} className={className} {...attributes} />;
    });

-    return [firstItem, eventsIntervalItems];
+    return (
+      <>
+        {firstItem}
+        {eventsIntervalItems}
+      </>
+    );
  }
 }

--- a/src/panel-triggers/components/Problems/Problems.tsx
+++ b/src/panel-triggers/components/Problems/Problems.tsx
@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react';
+import { cx } from '@emotion/css';
 import ReactTable from 'react-table-6';
-import classNames from 'classnames';
 import _ from 'lodash';
+// eslint-disable-next-line
 import moment from 'moment';
 import { isNewProblem } from '../../utils';
 import EventTag from '../EventTag';
@@ -9,8 +10,8 @@ import { ProblemDetails } from './ProblemDetails';
 import { AckProblemData } from '../AckModal';
 import { FAIcon, GFHeartIcon } from '../../../components';
 import { ProblemsPanelOptions, RTCell, RTResized, TriggerSeverity } from '../../types';
-import { ProblemDTO, ZBXAlert, ZBXEvent, ZBXTag } from '../../../datasource-zabbix/types';
-import { APIExecuteScriptResponse, ZBXScript } from '../../../datasource-zabbix/zabbix/connectors/zabbix_api/types';
+import { ProblemDTO, ZBXAlert, ZBXEvent, ZBXTag } from '../../../datasource/types';
+import { APIExecuteScriptResponse, ZBXScript } from '../../../datasource/zabbix/connectors/zabbix_api/types';
 import { AckCell } from './AckCell';
 import { DataSourceRef, TimeRange } from '@grafana/data';

@@ -28,7 +29,7 @@ export interface ProblemListProps {
  getScripts: (problem: ProblemDTO) => Promise<ZBXScript[]>;
  onExecuteScript: (problem: ProblemDTO, scriptid: string) => Promise<APIExecuteScriptResponse>;
  onProblemAck?: (problem: ProblemDTO, data: AckProblemData) => void;
-  onTagClick?: (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => void;
+  onTagClick?: (tag: ZBXTag, datasource: DataSourceRef, ctrlKey?: boolean, shiftKey?: boolean) => void;
  onPageSizeChange?: (pageSize: number, pageIndex: number) => void;
  onColumnResize?: (newResized: RTResized) => void;
 }
@@ -43,8 +44,9 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
  rootWidth: number;
  rootRef: any;

-  constructor(props) {
+  constructor(props: ProblemListProps) {
    super(props);
+    this.rootWidth = 0;
    this.state = {
      expanded: {},
      expandedProblems: {},
@@ -52,12 +54,12 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
    };
  }

-  setRootRef = (ref) => {
+  setRootRef = (ref: any) => {
    this.rootRef = ref;
  };

  handleProblemAck = (problem: ProblemDTO, data: AckProblemData) => {
-    return this.props.onProblemAck(problem, data);
+    return this.props.onProblemAck!(problem, data);
  };

  onExecuteScript = (problem: ProblemDTO, data: AckProblemData) => {};
@@ -102,7 +104,7 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
    });
  };

-  handleTagClick = (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => {
+  handleTagClick = (tag: ZBXTag, datasource: DataSourceRef, ctrlKey?: boolean, shiftKey?: boolean) => {
    if (this.props.onTagClick) {
      this.props.onTagClick(tag, datasource, ctrlKey, shiftKey);
    }
@@ -216,7 +218,7 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
    const columns = this.buildColumns();
    this.rootWidth = this.rootRef && this.rootRef.clientWidth;
    const { pageSize, fontSize, panelOptions } = this.props;
-    const panelClass = classNames('panel-problems', { [`font-size--${fontSize}`]: fontSize });
+    const panelClass = cx('panel-problems', { [`font-size--${fontSize}`]: !!fontSize });
    let pageSizeOptions = [5, 10, 20, 25, 50, 100];
    if (pageSize) {
      pageSizeOptions.push(pageSize);
@@ -330,7 +332,7 @@ function StatusIconCell(props: RTCell<ProblemDTO>, highlightNewerThan?: string)
  if (highlightNewerThan) {
    newProblem = isNewProblem(props.original, highlightNewerThan);
  }
-  const className = classNames(
+  const className = cx(
    'zbx-problem-status-icon',
    { 'problem-status--new': newProblem },
    { 'zbx-problem': props.value === '1' },
@@ -348,7 +350,7 @@ function GroupCell(props: RTCell<ProblemDTO>) {
 }

 function ProblemCell(props: RTCell<ProblemDTO>) {
-  const comments = props.original.comments;
+  // const comments = props.original.comments;
  return (
    <div>
      <span className="problem-description">{props.value}</span>
--- a/src/panel-triggers/migrations.ts
+++ b/src/panel-triggers/migrations.ts
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { getNextRefIdChar } from './utils';
-import { ShowProblemTypes } from '../datasource-zabbix/types';
+import { ShowProblemTypes } from '../datasource/types';
 import { ProblemsPanelOptions } from './types';
 import { PanelModel } from '@grafana/data';

@@ -71,7 +71,7 @@ export function migratePanelSchema(panel) {
  }

  if (schemaVersion < 7) {
-    const updatedTargets = [];
+    const updatedTargets: any[] = [];
    for (const targetKey in panel.targets) {
      const target = panel.targets[targetKey];
      if (!isEmptyTarget(target) && !isInvalidTarget(target, targetKey)) {
--- a/src/panel-triggers/module.tsx
+++ b/src/panel-triggers/module.tsx
@@ -1,9 +1,15 @@
-import { PanelPlugin, StandardEditorProps } from '@grafana/data';
+import { PanelPlugin } from '@grafana/data';
 import { problemsPanelChangedHandler, problemsPanelMigrationHandler } from './migrations';
 import { ProblemsPanel } from './ProblemsPanel';
 import { defaultPanelOptions, ProblemsPanelOptions } from './types';
 import { ResetColumnsEditor } from './components/ResetColumnsEditor';
 import { ProblemColorEditor } from './components/ProblemColorEditor';
+import { loadPluginCss } from '@grafana/runtime';
+
+loadPluginCss({
+  dark: 'plugins/alexanderzobnin-zabbix-app/styles/dark.css',
+  light: 'plugins/alexanderzobnin-zabbix-app/styles/light.css',
+});

 export const plugin = new PanelPlugin<ProblemsPanelOptions, {}>(ProblemsPanel)
  .setPanelChangeHandler(problemsPanelChangedHandler)
--- a/src/panel-triggers/types.ts
+++ b/src/panel-triggers/types.ts
@@ -1,4 +1,3 @@
-import { DataSourceRef } from '@grafana/data';
 import { CURRENT_SCHEMA_VERSION } from './migrations';

 export interface ProblemsPanelOptions {
@@ -26,7 +25,7 @@ export interface ProblemsPanelOptions {
  showEvents?: Number[];
  limit?: number;
  // View options
-  fontSize?: string;
+  fontSize: string;
  pageSize?: number;
  problemTimeline?: boolean;
  highlightBackground?: boolean;
@@ -36,9 +35,9 @@ export interface ProblemsPanelOptions {
  lastChangeFormat?: string;
  resizedColumns?: RTResized;
  // Triggers severity and colors
-  triggerSeverity?: TriggerSeverity[];
-  okEventColor?: TriggerColor;
-  ackEventColor?: TriggerColor;
+  triggerSeverity: TriggerSeverity[];
+  okEventColor: TriggerColor;
+  ackEventColor: TriggerColor;
  markAckEvents?: boolean;
 }

@@ -70,7 +69,7 @@ export const defaultPanelOptions: Partial<ProblemsPanelOptions> = {
  descriptionAtNewLine: false,
  // Options
  sortProblems: 'lastchange',
-  limit: null,
+  limit: undefined,
  // View options
  layout: 'table',
  fontSize: '100%',
--- a/src/panel-triggers/utils.ts
+++ b/src/panel-triggers/utils.ts
@@ -1,34 +1,34 @@
 import _ from 'lodash';
-import moment from 'moment';
-import { DataQuery } from '@grafana/data';
-import * as utils from '../datasource-zabbix/utils';
-import { ProblemDTO } from 'datasource-zabbix/types';
+import { DataQuery, dateMath } from '@grafana/data';
+import * as utils from '../datasource/utils';
+import { ProblemDTO } from 'datasource/types';

 export function isNewProblem(problem: ProblemDTO, highlightNewerThan: string): boolean {
  try {
    const highlightIntervalMs = utils.parseInterval(highlightNewerThan);
-    const durationSec = (Date.now() - problem.timestamp * 1000);
+    const durationSec = Date.now() - problem.timestamp * 1000;
    return durationSec < highlightIntervalMs;
  } catch (e) {
    return false;
  }
 }

-const DEFAULT_TIME_FORMAT = "DD MMM YYYY HH:mm:ss";
+const DEFAULT_TIME_FORMAT = 'DD MMM YYYY HH:mm:ss';

 export function formatLastChange(lastchangeUnix: number, customFormat?: string) {
-  const timestamp = moment.unix(lastchangeUnix);
+  const date = new Date(lastchangeUnix);
+  const timestamp = dateMath.parse(date);
  const format = customFormat || DEFAULT_TIME_FORMAT;
-  const lastchange = timestamp.format(format);
+  const lastchange = timestamp!.format(format);
  return lastchange;
 }

 export const getNextRefIdChar = (queries: DataQuery[]): string => {
  const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-
-  return _.find(letters, refId => {
-    return _.every(queries, other => {
+  const nextLetter = _.find(letters, (refId) => {
+    return _.every(queries, (other) => {
      return other.refId !== refId;
    });
  });
+  return nextLetter || 'A';
 };