Chore: move shared components to components/

src/components/FAIcon/FAIcon.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import { cx } from 'emotion';
+
+interface Props {
+  icon: string;
+  customClass?: string;
+}
+
+export const FAIcon: FC<Props> = ({ icon, customClass }) => {
+  const wrapperClass = cx('fa-icon-container', customClass);
+
+  return (
+    <span className={wrapperClass}>
+      <i className={`fa fa-${icon}`}></i>
+    </span>
+  );
+};
+
+export default FAIcon;

src/components/GFHeartIcon/GFHeartIcon.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+import { cx } from 'emotion';
+
+interface Props {
+  status: 'critical' | 'warning' | 'online' | 'ok' | 'problem';
+  className?: string;
+}
+
+export const GFHeartIcon: FC<Props> = ({ status, className }) => {
+  const iconClass = cx(
+    className,
+    'icon-gf',
+    { "icon-gf-critical": status === 'critical' || status === 'problem' || status === 'warning'},
+    { "icon-gf-online": status === 'online' || status === 'ok' },
+  );
+
+  return (
+    <i className={iconClass}></i>
+  );
+};
+
+export default GFHeartIcon;

src/components/Tooltip/Tooltip.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import Popper from './Popper';
 import withPopper, { UsingPopperProps } from './withPopper';
 
-const Tooltip: FC<UsingPopperProps> = ({ hidePopper, showPopper, className, children, ...restProps }) => {
+const TooltipWrapper: FC<UsingPopperProps> = ({ hidePopper, showPopper, className, children, ...restProps }) => {
   return (
     <div className={`popper__manager ${className}`} onMouseEnter={showPopper} onMouseLeave={hidePopper}>
       <Popper {...restProps}>{children}</Popper>
@@ -10,4 +10,6 @@ const Tooltip: FC<UsingPopperProps> = ({ hidePopper, showPopper, className, chil
   );
 };
 
-export default withPopper(Tooltip);
+export const Tooltip = withPopper(TooltipWrapper);
+
+export default Tooltip;

src/components/index.ts

@@ -0,0 +1,3 @@
+export { GFHeartIcon } from './GFHeartIcon/GFHeartIcon';
+export { FAIcon } from './FAIcon/FAIcon';
+export { Tooltip } from './Tooltip/Tooltip';

src/panel-triggers/components/AckModal.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import { ZBX_ACK_ACTION_ADD_MESSAGE, ZBX_ACK_ACTION_ACK, ZBX_ACK_ACTION_CHANGE_SEVERITY, ZBX_ACK_ACTION_CLOSE } from '../../datasource-zabbix/constants';
 import { Button, Input, VerticalGroup, Spinner } from '@grafana/ui';
-import { FAIcon } from './FAIcon';
+import { FAIcon } from '../../components';
 
 import * as grafanaUi from '@grafana/ui';
 const Checkbox: any = grafanaUi.Forms?.Checkbox || (grafanaUi as any).Checkbox;

src/panel-triggers/components/AlertList/AlertIcon.tsx

@@ -1,33 +1,34 @@
-import React, { CSSProperties } from 'react';
+import React, { FC } from 'react';
-import classNames from 'classnames';
+import { cx, css } from 'emotion';
-import { ZBXTrigger } from '../../types';
+import { GFHeartIcon } from '../../../components';
+import { ProblemDTO } from '../../../datasource-zabbix/types';
 
-interface AlertIconProps {
+interface Props {
-  problem: ZBXTrigger;
+  problem: ProblemDTO;
   color: string;
   blink?: boolean;
   highlightBackground?: boolean;
 }
 
-export default function AlertIcon(props: AlertIconProps) {
+export const AlertIcon: FC<Props> = ({ problem, color, blink, highlightBackground }) => {
-  const { problem, color, blink, highlightBackground } = props;
+  const severity = Number(problem.severity);
-  const priority = Number(problem.priority);
+  const status = problem.value === '1' && severity >= 2 ? 'critical' : 'online';
-  let iconClass = '';
-  if (problem.value === '1' && priority >= 2) {
-    iconClass = 'icon-gf-critical';
-  } else {
-    iconClass = 'icon-gf-online';
-  }
 
-  const className = classNames('icon-gf', iconClass, { 'zabbix-trigger--blinked': blink });
+  const iconClass = cx(
-  const style: CSSProperties = {};
+    'icon-gf',
-  if (!highlightBackground) {
+    blink && 'zabbix-trigger--blinked',
-    style.color = color;
+  );
-  }
+
+  const wrapperClass = cx(
+    'alert-rule-item__icon',
+    !highlightBackground && css`color: ${color}`
+  );
 
   return (
-    <div className="alert-rule-item__icon" style={style}>
+    <div className={wrapperClass}>
-      <i className={className}></i>
+      <GFHeartIcon status={status} className={iconClass} />
     </div>
   );
-}
+};
+
+export default AlertIcon;

src/panel-triggers/components/FAIcon.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-interface FAIconProps {
-  icon: string;
-  customClass?: string;
-}
-
-export const FAIcon: React.FC<FAIconProps> = (props: FAIconProps) => {
-  return (
-    <span className={`fa-icon-container ${props.customClass || ''}`}>
-      <i className={`fa fa-${props.icon}`}></i>
-    </span>
-  );
-};
-
-export default FAIcon;

src/panel-triggers/components/GFHeartIcon.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-interface GFHeartIconProps {
-  status: 'critical' | 'warning' | 'online' | 'ok' | 'problem';
-  className?: string;
-}
-
-export default function GFHeartIcon(props: GFHeartIconProps) {
-  const status = props.status;
-  const className = classNames("icon-gf", props.className,
-    { "icon-gf-critical": status === 'critical' || status === 'problem' || status === 'warning'},
-    { "icon-gf-online": status === 'online' || status === 'ok' },
-  );
-  return (
-    <i className={className}></i>
-  );
-}

src/panel-triggers/components/Problems/AckCell.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { css } from 'emotion';
 import { RTCell } from '../../types';
 import { ProblemDTO } from '../../../datasource-zabbix/types';
-import { FAIcon } from '../FAIcon';
+import { FAIcon } from '../../../components';
 import { useTheme, stylesFactory } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 

src/panel-triggers/components/Problems/ProblemDetails.tsx

@@ -3,14 +3,13 @@ import moment from 'moment';
 import * as utils from '../../../datasource-zabbix/utils';
 import { MODE_ITEMID, MODE_METRICS } from '../../../datasource-zabbix/constants';
 import { ProblemDTO, ZBXHost, ZBXGroup, ZBXEvent, ZBXTag, ZBXAlert } from '../../../datasource-zabbix/types';
-import { ZBXItem, ZBXAcknowledge, GFTimeRange, RTRow } from '../../types';
+import { ZBXItem, GFTimeRange, RTRow } from '../../types';
 import { AckModal, AckProblemData } from '../AckModal';
 import EventTag from '../EventTag';
-import Tooltip from '../../../components/Tooltip/Tooltip';
 import ProblemStatusBar from './ProblemStatusBar';
 import AcknowledgesList from './AcknowledgesList';
 import ProblemTimeline from './ProblemTimeline';
-import FAIcon from '../FAIcon';
+import { FAIcon, Tooltip } from '../../../components';
 import { renderUrl } from '../../utils';
 import { getLocationSrv } from '@grafana/runtime';
 

src/panel-triggers/components/Problems/ProblemStatusBar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import FAIcon from '../FAIcon';
+import FAIcon from '../../../components/FAIcon/FAIcon';
 import Tooltip from '../../../components/Tooltip/Tooltip';
 import { ZBXTrigger, ZBXAlert } from '../../types';
 

src/panel-triggers/components/Problems/Problems.tsx

@@ -3,15 +3,13 @@ import ReactTable from 'react-table-6';
 import classNames from 'classnames';
 import _ from 'lodash';
 import moment from 'moment';
-import * as utils from '../../../datasource-zabbix/utils';
 import { isNewProblem } from '../../utils';
 import EventTag from '../EventTag';
 import ProblemDetails from './ProblemDetails';
 import { AckProblemData } from '../AckModal';
-import GFHeartIcon from '../GFHeartIcon';
+import { GFHeartIcon, FAIcon } from '../../../components';
 import { ProblemsPanelOptions, GFTimeRange, RTCell, TriggerSeverity, RTResized } from '../../types';
 import { ProblemDTO, ZBXEvent, ZBXTag, ZBXAlert } from '../../../datasource-zabbix/types';
-import { FAIcon } from '../FAIcon';
 import { AckCell } from './AckCell';
 
 export interface ProblemListProps {
@@ -121,12 +119,12 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
         Cell: props => <TagCell {...props} onTagClick={this.handleTagClick} />
       },
       {
-        Header: 'Age', className: 'problem-age', width: 100, show: options.ageField, accessor: 'lastchangeUnix',
+        Header: 'Age', className: 'problem-age', width: 100, show: options.ageField, accessor: 'timestamp',
         id: 'age',
         Cell: AgeCell,
       },
       {
-        Header: 'Time', className: 'last-change', width: 150, accessor: 'lastchangeUnix',
+        Header: 'Time', className: 'last-change', width: 150, accessor: 'timestamp',
         id: 'lastchange',
         Cell: props => LastChangeCell(props, options.customLastChangeFormat && options.lastChangeFormat),
       },

src/panel-triggers/utils.ts

@@ -2,12 +2,12 @@ import _ from 'lodash';
 import moment from 'moment';
 import { DataQuery } from '@grafana/data';
 import * as utils from '../datasource-zabbix/utils';
-import { ZBXTrigger } from './types';
+import { ProblemDTO } from 'datasource-zabbix/types';
 
-export function isNewProblem(problem: ZBXTrigger, highlightNewerThan: string): boolean {
+export function isNewProblem(problem: ProblemDTO, highlightNewerThan: string): boolean {
   try {
     const highlightIntervalMs = utils.parseInterval(highlightNewerThan);
-    const durationSec = (Date.now() - problem.lastchangeUnix * 1000);
+    const durationSec = (Date.now() - problem.timestamp * 1000);
     return durationSec < highlightIntervalMs;
   } catch (e) {
     return false;