From 410de2dc6be835d90992d75422a4c98b2b9e8d7e Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Mon, 11 Feb 2019 14:26:39 +0300 Subject: [PATCH] problems: refactor --- src/panel-triggers/ack-tooltip.directive.js | 118 ------------------ .../AlertList/AlertAcknowledges.tsx | 47 +++++++ .../components/AlertList/AlertCard.tsx | 81 +----------- .../components/AlertList/AlertIcon.tsx | 37 ++++++ src/panel-triggers/module.js | 1 - src/panel-triggers/partials/module.html | 98 +-------------- 6 files changed, 87 insertions(+), 295 deletions(-) delete mode 100644 src/panel-triggers/ack-tooltip.directive.js create mode 100644 src/panel-triggers/components/AlertList/AlertAcknowledges.tsx create mode 100644 src/panel-triggers/components/AlertList/AlertIcon.tsx diff --git a/src/panel-triggers/ack-tooltip.directive.js b/src/panel-triggers/ack-tooltip.directive.js deleted file mode 100644 index 4a21822..0000000 --- a/src/panel-triggers/ack-tooltip.directive.js +++ /dev/null @@ -1,118 +0,0 @@ -import $ from 'jquery'; -import angular from 'angular'; -import Drop from 'tether-drop'; - -angular - .module('grafana.directives') - .directive('ackTooltip', - /** @ngInject */ - function($sanitize, $compile) { - let buttonTemplate = ''; - - return { - scope: { - ack: "=", - trigger: "=", - onAck: "=", - context: "=" - }, - link: function(scope, element) { - let acknowledges = scope.ack; - let $button = $(buttonTemplate); - $button.appendTo(element); - - $button.click(function() { - let tooltip = '
'; - - if (acknowledges && acknowledges.length) { - tooltip += '' + - '' + - '' + - '' + - ''; - for (let ack of acknowledges) { - tooltip += '' + - '' + - ''; - } - tooltip += '
TimeUserComments
' + ack.time + '' + ack.user + '' + ack.message + '
'; - } else { - tooltip += 'Add acknowledge'; - } - - let addAckButtonTemplate = '
' + - '
'; - tooltip += addAckButtonTemplate; - tooltip += '
'; - - let drop = new Drop({ - target: element[0], - content: tooltip, - position: "bottom left", - classes: 'drop-popover ack-tooltip', - openOn: 'hover', - hoverCloseDelay: 500, - tetherOptions: { - constraints: [{to: 'window', pin: true, attachment: "both"}] - } - }); - - drop.open(); - drop.on('close', closeDrop); - - $('#add-acknowledge-btn').on('click', onAddAckButtonClick); - - function onAddAckButtonClick() { - let inputTemplate = '
' + - '' + - '' + - '
'; - - let $input = $(inputTemplate); - let $addAckButton = $('.ack-tooltip .ack-add-button'); - $addAckButton.replaceWith($input); - $('.ack-tooltip #cancel-ack-button').on('click', onAckCancelButtonClick); - $('.ack-tooltip #send-ack-button').on('click', onAckSendlButtonClick); - } - - function onAckCancelButtonClick() { - $('.ack-tooltip .ack-input-group').replaceWith(addAckButtonTemplate); - $('#add-acknowledge-btn').on('click', onAddAckButtonClick); - } - - function onAckSendlButtonClick() { - let message = $('.ack-tooltip #ack-message')[0].value; - let onAck = scope.onAck.bind(scope.context); - onAck(scope.trigger, message).then(() => { - closeDrop(); - }); - } - - function closeDrop() { - setTimeout(function() { - try { - drop.destroy(); - } catch (err) { - console.log('drop.destroy() error: ', err.message); - } - }); - } - - }); - - $compile(element.contents())(scope); - } - }; - }); diff --git a/src/panel-triggers/components/AlertList/AlertAcknowledges.tsx b/src/panel-triggers/components/AlertList/AlertAcknowledges.tsx new file mode 100644 index 0000000..888195d --- /dev/null +++ b/src/panel-triggers/components/AlertList/AlertAcknowledges.tsx @@ -0,0 +1,47 @@ +import React, { PureComponent } from 'react'; +import { ZBXTrigger } from 'panel-triggers/types'; + +interface AlertAcknowledgesProps { + problem: ZBXTrigger; + onClick: (event?) => void; +} + +export default class AlertAcknowledges extends PureComponent { + handleClick = (event) => { + this.props.onClick(event); + } + + render() { + const { problem } = this.props; + const ackRows = problem.acknowledges && problem.acknowledges.map(ack => { + return ( + + {ack.time} + {ack.user} + {ack.message} + + ); + }); + return ( +
+ + + + + + + + + + {ackRows} + +
TimeUserComments
+
+ +
+
+ ); + } +} diff --git a/src/panel-triggers/components/AlertList/AlertCard.tsx b/src/panel-triggers/components/AlertList/AlertCard.tsx index 5a97aed..9239f08 100644 --- a/src/panel-triggers/components/AlertList/AlertCard.tsx +++ b/src/panel-triggers/components/AlertList/AlertCard.tsx @@ -7,6 +7,8 @@ import { ProblemsPanelOptions, ZBXTrigger, ZBXTag } from '../../types'; import { AckProblemData, Modal } from '.././Modal'; import EventTag from '../EventTag'; import Tooltip from '.././Tooltip/Tooltip'; +import AlertAcknowledges from './AlertAcknowledges'; +import AlertIcon from './AlertIcon'; interface AlertCardProps { problem: ZBXTrigger; @@ -153,40 +155,6 @@ export default class AlertCard extends PureComponent= 3) { - iconClass = 'icon-gf-critical'; - } else { - iconClass = 'icon-gf-warning'; - } - } else { - iconClass = 'icon-gf-online'; - } - - const className = classNames('icon-gf', iconClass, { 'zabbix-trigger--blinked': blink }); - const style: CSSProperties = {}; - if (!highlightBackground) { - style.color = color; - } - - return ( -
- -
- ); -} - interface AlertHostProps { problem: ZBXTrigger; panelOptions: ProblemsPanelOptions; @@ -293,48 +261,3 @@ class AlertAcknowledgesButton extends PureComponent void; -} - -class AlertAcknowledges extends PureComponent { - handleClick = (event) => { - this.props.onClick(event); - } - - render() { - const { problem } = this.props; - const ackRows = problem.acknowledges && problem.acknowledges.map(ack => { - return ( - - {ack.time} - {ack.user} - {ack.message} - - ); - }); - return ( -
- - - - - - - - - - {ackRows} - -
TimeUserComments
-
- -
-
- ); - } -} diff --git a/src/panel-triggers/components/AlertList/AlertIcon.tsx b/src/panel-triggers/components/AlertList/AlertIcon.tsx new file mode 100644 index 0000000..85699db --- /dev/null +++ b/src/panel-triggers/components/AlertList/AlertIcon.tsx @@ -0,0 +1,37 @@ +import React, { CSSProperties } from 'react'; +import classNames from 'classnames'; +import { ZBXTrigger } from 'panel-triggers/types'; + +interface AlertIconProps { + problem: ZBXTrigger; + 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') { + if (priority >= 3) { + iconClass = 'icon-gf-critical'; + } else { + iconClass = 'icon-gf-warning'; + } + } else { + iconClass = 'icon-gf-online'; + } + + const className = classNames('icon-gf', iconClass, { 'zabbix-trigger--blinked': blink }); + const style: CSSProperties = {}; + if (!highlightBackground) { + style.color = color; + } + + return ( +
+ +
+ ); +} diff --git a/src/panel-triggers/module.js b/src/panel-triggers/module.js index d3121b1..2ea2c17 100644 --- a/src/panel-triggers/module.js +++ b/src/panel-triggers/module.js @@ -14,7 +14,6 @@ import {TriggerPanelCtrl} from './triggers_panel_ctrl'; import {loadPluginCss} from 'grafana/app/plugins/sdk'; import './datasource-selector.directive'; -import './ack-tooltip.directive'; loadPluginCss({ dark: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.dark.css', diff --git a/src/panel-triggers/partials/module.html b/src/panel-triggers/partials/module.html index ae77925..0a4718e 100644 --- a/src/panel-triggers/partials/module.html +++ b/src/panel-triggers/partials/module.html @@ -1,97 +1 @@ -
-
-
-
    - -
  1. - - -
    - -
    - -
    -
    - -

    - {{trigger.description}} - - - {{ ctrl.formatHostName(trigger) }} - - - {{ ctrl.formatHostGroups(trigger) }} - - - - - {{tag.tag}}: {{tag.value}} - - -

    - -
    - - {{ctrl.triggerStatusMap[trigger.value]}} - - - {{trigger.severity}} - - - {{trigger.age && "for " + trigger.age}} - - - -
    - - -
    - - -
    - -
    -
    - - -
    - - - {{trigger.datasource}} - -
    - -
    - {{trigger.lastchange || "last change unknown"}} - -
    - - - - - - - - - - -
    -
    -
    2. -
-
-
-
- -
+