diff --git a/src/panel-triggers/components/EventTag.tsx b/src/panel-triggers/components/EventTag.tsx index 250c29c..8aba2eb 100644 --- a/src/panel-triggers/components/EventTag.tsx +++ b/src/panel-triggers/components/EventTag.tsx @@ -90,7 +90,7 @@ interface EventTagProps { onClick?: (tag: ZBXTag) => void; } -class EventTag extends PureComponent { +export default class EventTag extends PureComponent { handleClick = () => { if (this.props.onClick) { this.props.onClick(this.props.tag); @@ -113,5 +113,3 @@ class EventTag extends PureComponent { ); } } - -export default EventTag; diff --git a/src/panel-triggers/components/Problems/AcknowledgesList.tsx b/src/panel-triggers/components/Problems/AcknowledgesList.tsx new file mode 100644 index 0000000..c510844 --- /dev/null +++ b/src/panel-triggers/components/Problems/AcknowledgesList.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { ZBXAcknowledge } from 'panel-triggers/types'; + +interface AcknowledgesListProps { + acknowledges: ZBXAcknowledge[]; +} + +export default function AcknowledgesList(props: AcknowledgesListProps) { + const { acknowledges } = props; + return ( +
+
+ {acknowledges.map(ack => {ack.time})} +
+
+ {acknowledges.map(ack => {ack.user})} +
+
+ {acknowledges.map(ack => {ack.message})} +
+
+ ); +} diff --git a/src/panel-triggers/components/ProblemDetails.tsx b/src/panel-triggers/components/Problems/ProblemDetails.tsx similarity index 70% rename from src/panel-triggers/components/ProblemDetails.tsx rename to src/panel-triggers/components/Problems/ProblemDetails.tsx index e32357b..7cbfc78 100644 --- a/src/panel-triggers/components/ProblemDetails.tsx +++ b/src/panel-triggers/components/Problems/ProblemDetails.tsx @@ -1,12 +1,14 @@ import React, { PureComponent } from 'react'; import moment from 'moment'; -import * as utils from '../../datasource-zabbix/utils'; -import { ZBXTrigger, ZBXItem, ZBXAcknowledge, ZBXHost, ZBXGroup, ZBXEvent, GFTimeRange, RTRow, ZBXTag } from '../types'; -import { Modal, AckProblemData } from './Modal'; -import EventTag from './EventTag'; -import Tooltip from './Tooltip/Tooltip'; +import * as utils from '../../../datasource-zabbix/utils'; +import { ZBXTrigger, ZBXItem, ZBXAcknowledge, ZBXHost, ZBXGroup, ZBXEvent, GFTimeRange, RTRow, ZBXTag } from '../../types'; +import { Modal, AckProblemData } from '../Modal'; +import EventTag from '../EventTag'; +import Tooltip from '../Tooltip/Tooltip'; +import ProblemStatusBar from './ProblemStatusBar'; +import AcknowledgesList from './AcknowledgesList'; import ProblemTimeline from './ProblemTimeline'; -import FAIcon from './FAIcon'; +import FAIcon from '../FAIcon'; interface ProblemDetailsProps extends RTRow { rootWidth: number; @@ -192,27 +194,6 @@ class ProblemItems extends PureComponent { } } -interface AcknowledgesListProps { - acknowledges: ZBXAcknowledge[]; -} - -function AcknowledgesList(props: AcknowledgesListProps) { - const { acknowledges } = props; - return ( -
-
- {acknowledges.map(ack => {ack.time})} -
-
- {acknowledges.map(ack => {ack.user})} -
-
- {acknowledges.map(ack => {ack.message})} -
-
- ); -} - interface ProblemGroupsProps { groups: ZBXGroup[]; className?: string; @@ -245,61 +226,6 @@ class ProblemHosts extends PureComponent { } } -interface ProblemStatusBarProps { - problem: ZBXTrigger; - className?: string; -} - -function ProblemStatusBar(props: ProblemStatusBarProps) { - const { problem, className } = props; - const multiEvent = problem.type === '1'; - const link = problem.url && problem.url !== ''; - const maintenance = problem.maintenance; - const manualClose = problem.manual_close === '1'; - const error = problem.error && problem.error !== ''; - const stateUnknown = problem.state === '1'; - const closeByTag = problem.correlation_mode === '1'; - const actions = problem.alerts && problem.alerts.length !== 0; - const actionMessage = problem.alerts ? problem.alerts[0].message : ''; - - return ( -
- - - - - - - - -
- ); -} - -interface ProblemStatusBarItemProps { - icon: string; - fired?: boolean; - link?: string; - tooltip?: string; -} - -function ProblemStatusBarItem(props: ProblemStatusBarItemProps) { - const { fired, icon, link, tooltip } = props; - let item = ( -
- -
- ); - if (tooltip && fired) { - item = ( - - {item} - - ); - } - return link ? {item} : item; -} - interface ProblemActionButtonProps { icon: string; tooltip?: string; diff --git a/src/panel-triggers/components/Problems/ProblemStatusBar.tsx b/src/panel-triggers/components/Problems/ProblemStatusBar.tsx new file mode 100644 index 0000000..194ee43 --- /dev/null +++ b/src/panel-triggers/components/Problems/ProblemStatusBar.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import FAIcon from '../FAIcon'; +import Tooltip from '../Tooltip/Tooltip'; +import { ZBXTrigger } from 'panel-triggers/types'; + +export interface ProblemStatusBarProps { + problem: ZBXTrigger; + className?: string; +} + +export default function ProblemStatusBar(props: ProblemStatusBarProps) { + const { problem, className } = props; + const multiEvent = problem.type === '1'; + const link = problem.url && problem.url !== ''; + const maintenance = problem.maintenance; + const manualClose = problem.manual_close === '1'; + const error = problem.error && problem.error !== ''; + const stateUnknown = problem.state === '1'; + const closeByTag = problem.correlation_mode === '1'; + const actions = problem.alerts && problem.alerts.length !== 0; + const actionMessage = problem.alerts ? problem.alerts[0].message : ''; + + return ( +
+ + + + + + + + +
+ ); +} + +interface ProblemStatusBarItemProps { + icon: string; + fired?: boolean; + link?: string; + tooltip?: string; +} + +function ProblemStatusBarItem(props: ProblemStatusBarItemProps) { + const { fired, icon, link, tooltip } = props; + let item = ( +
+ +
+ ); + if (tooltip && fired) { + item = ( + + {item} + + ); + } + return link ? {item} : item; +} diff --git a/src/panel-triggers/components/ProblemTimeline.tsx b/src/panel-triggers/components/Problems/ProblemTimeline.tsx similarity index 100% rename from src/panel-triggers/components/ProblemTimeline.tsx rename to src/panel-triggers/components/Problems/ProblemTimeline.tsx diff --git a/src/panel-triggers/components/Problems.tsx b/src/panel-triggers/components/Problems/Problems.tsx similarity index 96% rename from src/panel-triggers/components/Problems.tsx rename to src/panel-triggers/components/Problems/Problems.tsx index c89fc6e..606617a 100644 --- a/src/panel-triggers/components/Problems.tsx +++ b/src/panel-triggers/components/Problems/Problems.tsx @@ -3,13 +3,13 @@ import ReactTable from 'react-table'; import classNames from 'classnames'; import _ from 'lodash'; import moment from 'moment'; -import * as utils from '../../datasource-zabbix/utils'; -import { isNewProblem } from '../utils'; -import { ProblemsPanelOptions, ZBXTrigger, ZBXEvent, GFTimeRange, RTCell, ZBXTag, TriggerSeverity, RTResized } from '../types'; -import EventTag from './EventTag'; +import * as utils from '../../../datasource-zabbix/utils'; +import { isNewProblem } from '../../utils'; +import { ProblemsPanelOptions, ZBXTrigger, ZBXEvent, GFTimeRange, RTCell, ZBXTag, TriggerSeverity, RTResized } from '../../types'; +import EventTag from '../EventTag'; import ProblemDetails from './ProblemDetails'; -import { AckProblemData } from './Modal'; -import GFHeartIcon from './GFHeartIcon'; +import { AckProblemData } from '../Modal'; +import GFHeartIcon from '../GFHeartIcon'; export interface ProblemListProps { problems: ZBXTrigger[]; diff --git a/src/panel-triggers/migrations.js b/src/panel-triggers/migrations.js index c91db2c..ce7c67d 100644 --- a/src/panel-triggers/migrations.js +++ b/src/panel-triggers/migrations.js @@ -1,5 +1,5 @@ import _ from 'lodash'; -import {DEFAULT_TARGET} from './triggers_panel_ctrl'; +import { getDefaultTarget } from './triggers_panel_ctrl'; // Actual schema version export const CURRENT_SCHEMA_VERSION = 6; @@ -34,7 +34,7 @@ export function migratePanelSchema(panel) { if (schemaVersion < 5) { if (panel.targets && !_.isEmpty(panel.targets)) { _.each(panel.targets, (target) => { - _.defaultsDeep(target, DEFAULT_TARGET); + _.defaultsDeep(target, getDefaultTarget()); }); } } diff --git a/src/panel-triggers/triggers_panel_ctrl.js b/src/panel-triggers/triggers_panel_ctrl.js index 0fd82cc..1fac128 100644 --- a/src/panel-triggers/triggers_panel_ctrl.js +++ b/src/panel-triggers/triggers_panel_ctrl.js @@ -8,7 +8,7 @@ import { PanelCtrl } from 'grafana/app/plugins/sdk'; import { triggerPanelOptionsTab } from './options_tab'; import { triggerPanelTriggersTab } from './triggers_tab'; import { migratePanelSchema, CURRENT_SCHEMA_VERSION } from './migrations'; -import ProblemList from './components/Problems'; +import ProblemList from './components/Problems/Problems'; import AlertList from './components/AlertList/AlertList'; const ZABBIX_DS_ID = 'alexanderzobnin-zabbix-datasource'; @@ -23,6 +23,8 @@ export const DEFAULT_TARGET = { proxy: {filter: ""}, }; +export const getDefaultTarget = () => DEFAULT_TARGET; + export const DEFAULT_SEVERITY = [ { priority: 0, severity: 'Not classified', color: 'rgb(108, 108, 108)', show: true}, { priority: 1, severity: 'Information', color: 'rgb(120, 158, 183)', show: true}, @@ -32,6 +34,8 @@ export const DEFAULT_SEVERITY = [ { priority: 5, severity: 'Disaster', color: 'rgb(215, 0, 0)', show: true}, ]; +export const getDefaultSeverity = () => DEFAULT_SEVERITY; + const DEFAULT_TIME_FORMAT = "DD MMM YYYY HH:mm:ss"; export const PANEL_DEFAULTS = { @@ -67,7 +71,7 @@ export const PANEL_DEFAULTS = { lastChangeFormat: "", resizedColumns: [], // Triggers severity and colors - triggerSeverity: DEFAULT_SEVERITY, + triggerSeverity: getDefaultSeverity(), okEventColor: 'rgb(56, 189, 113)', ackEventColor: 'rgb(56, 219, 156)', markAckEvents: false, @@ -107,7 +111,7 @@ export class TriggerPanelCtrl extends PanelCtrl { this.panel.datasources.push(this.available_datasources[0]); } if (this.isEmptyTargets()) { - this.panel.targets[this.panel.datasources[0]] = DEFAULT_TARGET; + this.panel.targets[this.panel.datasources[0]] = getDefaultTarget(); } this.initDatasources(); diff --git a/src/panel-triggers/triggers_tab.js b/src/panel-triggers/triggers_tab.js index c3ba5ba..668f2d1 100644 --- a/src/panel-triggers/triggers_tab.js +++ b/src/panel-triggers/triggers_tab.js @@ -1,6 +1,6 @@ import _ from 'lodash'; import * as utils from '../datasource-zabbix/utils'; -import {DEFAULT_TARGET} from './triggers_panel_ctrl'; +import { getDefaultTarget } from './triggers_panel_ctrl'; class TriggersTabCtrl { @@ -80,7 +80,7 @@ class TriggersTabCtrl { datasourcesChanged() { _.each(this.panel.datasources, (ds) => { if (!this.panel.targets[ds]) { - this.panel.targets[ds] = _.cloneDeep(DEFAULT_TARGET); + this.panel.targets[ds] = getDefaultTarget(); } }); this.parseTarget();