diff --git a/src/components/FAIcon/FAIcon.tsx b/src/components/FAIcon/FAIcon.tsx new file mode 100644 index 0000000..6dadcaa --- /dev/null +++ b/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 = ({ icon, customClass }) => { + const wrapperClass = cx('fa-icon-container', customClass); + + return ( + + + + ); +}; + +export default FAIcon; diff --git a/src/components/GFHeartIcon/GFHeartIcon.tsx b/src/components/GFHeartIcon/GFHeartIcon.tsx new file mode 100644 index 0000000..4a67f2c --- /dev/null +++ b/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 = ({ 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 ( + + ); +}; + +export default GFHeartIcon; diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 3b7fc04..45cd911 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/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 = ({ hidePopper, showPopper, className, children, ...restProps }) => { +const TooltipWrapper: FC = ({ hidePopper, showPopper, className, children, ...restProps }) => { return (
{children} @@ -10,4 +10,6 @@ const Tooltip: FC = ({ hidePopper, showPopper, className, chil ); }; -export default withPopper(Tooltip); +export const Tooltip = withPopper(TooltipWrapper); + +export default Tooltip; diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 0000000..b2fa48e --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1,3 @@ +export { GFHeartIcon } from './GFHeartIcon/GFHeartIcon'; +export { FAIcon } from './FAIcon/FAIcon'; +export { Tooltip } from './Tooltip/Tooltip'; diff --git a/src/panel-triggers/components/AckModal.tsx b/src/panel-triggers/components/AckModal.tsx index 9bb48c8..1d54fec 100644 --- a/src/panel-triggers/components/AckModal.tsx +++ b/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; diff --git a/src/panel-triggers/components/AlertList/AlertIcon.tsx b/src/panel-triggers/components/AlertList/AlertIcon.tsx index 2b69d31..936208e 100644 --- a/src/panel-triggers/components/AlertList/AlertIcon.tsx +++ b/src/panel-triggers/components/AlertList/AlertIcon.tsx @@ -1,33 +1,34 @@ -import React, { CSSProperties } from 'react'; -import classNames from 'classnames'; -import { ZBXTrigger } from '../../types'; +import React, { FC } from 'react'; +import { cx, css } from 'emotion'; +import { GFHeartIcon } from '../../../components'; +import { ProblemDTO } from '../../../datasource-zabbix/types'; -interface AlertIconProps { - problem: ZBXTrigger; +interface Props { + problem: ProblemDTO; color: string; blink?: boolean; highlightBackground?: boolean; } -export default function AlertIcon(props: AlertIconProps) { - const { problem, color, blink, highlightBackground } = props; - const priority = Number(problem.priority); - let iconClass = ''; - if (problem.value === '1' && priority >= 2) { - iconClass = 'icon-gf-critical'; - } else { - iconClass = 'icon-gf-online'; - } +export const AlertIcon: FC = ({ problem, color, blink, highlightBackground }) => { + const severity = Number(problem.severity); + const status = problem.value === '1' && severity >= 2 ? 'critical' : 'online'; - const className = classNames('icon-gf', iconClass, { 'zabbix-trigger--blinked': blink }); - const style: CSSProperties = {}; - if (!highlightBackground) { - style.color = color; - } + const iconClass = cx( + 'icon-gf', + blink && 'zabbix-trigger--blinked', + ); + + const wrapperClass = cx( + 'alert-rule-item__icon', + !highlightBackground && css`color: ${color}` + ); return ( -
- +
+
); -} +}; + +export default AlertIcon; diff --git a/src/panel-triggers/components/FAIcon.tsx b/src/panel-triggers/components/FAIcon.tsx deleted file mode 100644 index 960947e..0000000 --- a/src/panel-triggers/components/FAIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -interface FAIconProps { - icon: string; - customClass?: string; -} - -export const FAIcon: React.FC = (props: FAIconProps) => { - return ( - - - - ); -}; - -export default FAIcon; diff --git a/src/panel-triggers/components/GFHeartIcon.tsx b/src/panel-triggers/components/GFHeartIcon.tsx deleted file mode 100644 index 23c1826..0000000 --- a/src/panel-triggers/components/GFHeartIcon.tsx +++ /dev/null @@ -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 ( - - ); -} diff --git a/src/panel-triggers/components/Problems/AckCell.tsx b/src/panel-triggers/components/Problems/AckCell.tsx index 757907f..8b5d529 100644 --- a/src/panel-triggers/components/Problems/AckCell.tsx +++ b/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'; diff --git a/src/panel-triggers/components/Problems/ProblemDetails.tsx b/src/panel-triggers/components/Problems/ProblemDetails.tsx index 3adaf91..19b28f7 100644 --- a/src/panel-triggers/components/Problems/ProblemDetails.tsx +++ b/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'; diff --git a/src/panel-triggers/components/Problems/ProblemStatusBar.tsx b/src/panel-triggers/components/Problems/ProblemStatusBar.tsx index b29aa69..e6a18de 100644 --- a/src/panel-triggers/components/Problems/ProblemStatusBar.tsx +++ b/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'; diff --git a/src/panel-triggers/components/Problems/Problems.tsx b/src/panel-triggers/components/Problems/Problems.tsx index 862a5f0..71910af 100644 --- a/src/panel-triggers/components/Problems/Problems.tsx +++ b/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 }, { - 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), }, diff --git a/src/panel-triggers/utils.ts b/src/panel-triggers/utils.ts index e808b6c..a40fe65 100644 --- a/src/panel-triggers/utils.ts +++ b/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;