Misthios/grafana-zabbix
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix Explore button, fixes #1240

Browse Source 
Also pass dashboard time range to the explore view.
This commit is contained in:
Alexander Zobnin
2021-08-09 17:55:37 +03:00
parent 07721706f4
commit 8499d726b2
5 changed files with 155 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/ExploreButton/ExploreButton.tsx
View File

@@ -1,25 +1,26 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import { getLocationSrv } from '@grafana/runtime'; import { locationService } from '@grafana/runtime';
import { MODE_METRICS, MODE_ITEMID } from '../../datasource-zabbix/constants'; import { ExploreUrlState, TimeRange, urlUtil } from "@grafana/data";
import { renderUrl } from '../../panel-triggers/utils'; import { MODE_ITEMID, MODE_METRICS } from '../../datasource-zabbix/constants';
import { ActionButton } from '../ActionButton/ActionButton';
import { expandItemName } from '../../datasource-zabbix/utils'; import { expandItemName } from '../../datasource-zabbix/utils';
import { ProblemDTO } from '../../datasource-zabbix/types'; import { ProblemDTO } from '../../datasource-zabbix/types';
import { ActionButton } from '../ActionButton/ActionButton';
interface Props { interface Props {
problem: ProblemDTO; problem: ProblemDTO;
range: TimeRange;
panelId: number; panelId: number;
} }
export const ExploreButton: FC<Props> = ({ problem, panelId }) => { export const ExploreButton: FC<Props> = ({ problem, panelId, range }) => {
return ( return (
<ActionButton icon="compass" width={6} onClick={() => openInExplore(problem, panelId)}> <ActionButton icon="compass" width={6} onClick={() => openInExplore(problem, panelId, range)}>
Explore Explore
</ActionButton> </ActionButton>
); );
}; };
const openInExplore = (problem: ProblemDTO, panelId: number) => { const openInExplore = (problem: ProblemDTO, panelId: number, range: TimeRange) => {
let query: any = {}; let query: any = {};
if (problem.items?.length === 1 && problem.hosts?.length === 1) { if (problem.items?.length === 1 && problem.hosts?.length === 1) {
@@ -41,14 +42,16 @@ const openInExplore = (problem: ProblemDTO, panelId: number) => {
}; };
} }
const state: any = { const state: ExploreUrlState = {
datasource: problem.datasource, datasource: problem.datasource,
context: 'explore', context: 'explore',
originPanelId: panelId, originPanelId: panelId,
range: range.raw,
queries: [query], queries: [query],
}; };
const exploreState = JSON.stringify(state); const exploreState = JSON.stringify(state);
const url = renderUrl('/explore', { left: exploreState }); const url = urlUtil.renderUrl('/explore', { left: exploreState });
getLocationSrv().update({ path: url, query: {} }); locationService.push(url);
}; };

173
src/panel-triggers/components/Problems/ProblemDetails.tsx
View File

@@ -1,27 +1,30 @@
import React, { FC, PureComponent } from 'react'; import React, { FC, PureComponent } from 'react';
import moment from 'moment'; import moment from 'moment';
import * as utils from '../../../datasource-zabbix/utils'; import * as utils from '../../../datasource-zabbix/utils';
import { ProblemDTO, ZBXHost, ZBXGroup, ZBXEvent, ZBXTag, ZBXAlert } from '../../../datasource-zabbix/types'; import { ProblemDTO, ZBXAlert, ZBXEvent, ZBXGroup, ZBXHost, ZBXTag } from '../../../datasource-zabbix/types';
import { ZBXScript, APIExecuteScriptResponse } from '../../../datasource-zabbix/zabbix/connectors/zabbix_api/types'; import { APIExecuteScriptResponse, ZBXScript } from '../../../datasource-zabbix/zabbix/connectors/zabbix_api/types';
import { ZBXItem, GFTimeRange, RTRow } from '../../types'; import { GFTimeRange, RTRow, ZBXItem } from '../../types';
import { AckModal, AckProblemData } from '../AckModal'; import { AckModal, AckProblemData } from '../AckModal';
import EventTag from '../EventTag'; import EventTag from '../EventTag';
import ProblemStatusBar from './ProblemStatusBar'; import ProblemStatusBar from './ProblemStatusBar';
import AcknowledgesList from './AcknowledgesList'; import AcknowledgesList from './AcknowledgesList';
import ProblemTimeline from './ProblemTimeline'; import ProblemTimeline from './ProblemTimeline';
import { FAIcon, ExploreButton, AckButton, Tooltip, ModalController, ExecScriptButton } from '../../../components'; import { AckButton, ExecScriptButton, ExploreButton, FAIcon, ModalController, Tooltip } from '../../../components';
import { ExecScriptModal, ExecScriptData } from '../ExecScriptModal'; import { ExecScriptData, ExecScriptModal } from '../ExecScriptModal';
import { Icon } from '@grafana/ui'; import { TimeRange } from "@grafana/data";
interface ProblemDetailsProps extends RTRow<ProblemDTO> { interface ProblemDetailsProps extends RTRow<ProblemDTO> {
rootWidth: number; rootWidth: number;
timeRange: GFTimeRange; timeRange: GFTimeRange;
range: TimeRange;
showTimeline?: boolean; showTimeline?: boolean;
panelId?: number; panelId?: number;
getProblemEvents: (problem: ProblemDTO) => Promise<ZBXEvent[]>; getProblemEvents: (problem: ProblemDTO) => Promise<ZBXEvent[]>;
getProblemAlerts: (problem: ProblemDTO) => Promise<ZBXAlert[]>; getProblemAlerts: (problem: ProblemDTO) => Promise<ZBXAlert[]>;
getScripts: (problem: ProblemDTO) => Promise<ZBXScript[]>; getScripts: (problem: ProblemDTO) => Promise<ZBXScript[]>;
onExecuteScript(problem: ProblemDTO, scriptid: string): Promise<APIExecuteScriptResponse>; onExecuteScript(problem: ProblemDTO, scriptid: string): Promise<APIExecuteScriptResponse>;
onProblemAck?: (problem: ProblemDTO, data: AckProblemData) => Promise<any> | any; onProblemAck?: (problem: ProblemDTO, data: AckProblemData) => Promise<any> | any;
onTagClick?: (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => void; onTagClick?: (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => void;
} }
@@ -56,7 +59,7 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
if (this.props.onTagClick) { if (this.props.onTagClick) {
this.props.onTagClick(tag, this.props.original.datasource, ctrlKey, shiftKey); this.props.onTagClick(tag, this.props.original.datasource, ctrlKey, shiftKey);
} }
} };
fetchProblemEvents() { fetchProblemEvents() {
const problem = this.props.original; const problem = this.props.original;
@@ -77,22 +80,22 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
ackProblem = (data: AckProblemData) => { ackProblem = (data: AckProblemData) => {
const problem = this.props.original as ProblemDTO; const problem = this.props.original as ProblemDTO;
return this.props.onProblemAck(problem, data); return this.props.onProblemAck(problem, data);
} };
getScripts = () => { getScripts = () => {
const problem = this.props.original as ProblemDTO; const problem = this.props.original as ProblemDTO;
return this.props.getScripts(problem); return this.props.getScripts(problem);
} };
onExecuteScript = (data: ExecScriptData) => { onExecuteScript = (data: ExecScriptData) => {
const problem = this.props.original as ProblemDTO; const problem = this.props.original as ProblemDTO;
return this.props.onExecuteScript(problem, data.scriptid); return this.props.onExecuteScript(problem, data.scriptid);
} };
render() { render() {
const problem = this.props.original as ProblemDTO; const problem = this.props.original as ProblemDTO;
const alerts = this.state.alerts; const alerts = this.state.alerts;
const rootWidth = this.props.rootWidth; const { rootWidth, panelId, range } = this.props;
const displayClass = this.state.show ? 'show' : ''; const displayClass = this.state.show ? 'show' : '';
const wideLayout = rootWidth > 1200; const wideLayout = rootWidth > 1200;
const compactStatusBar = rootWidth < 800 || problem.acknowledges && wideLayout && rootWidth < 1400; const compactStatusBar = rootWidth < 800 || problem.acknowledges && wideLayout && rootWidth < 1400;
@@ -104,107 +107,107 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
<div className={`problem-details-container ${displayClass}`}> <div className={`problem-details-container ${displayClass}`}>
<div className="problem-details-head"> <div className="problem-details-head">
<div className="problem-actions-left"> <div className="problem-actions-left">
<ExploreButton problem={problem} panelId={this.props.panelId} /> <ExploreButton problem={problem} panelId={panelId} range={range}/>
</div> </div>
{problem.showAckButton && {problem.showAckButton &&
<div className="problem-actions"> <div className="problem-actions">
<ModalController> <ModalController>
{({ showModal, hideModal }) => ( {({ showModal, hideModal }) => (
<ExecScriptButton <ExecScriptButton
className="problem-action-button" className="problem-action-button"
onClick={() => { onClick={() => {
showModal(ExecScriptModal, { showModal(ExecScriptModal, {
getScripts: this.getScripts, getScripts: this.getScripts,
onSubmit: this.onExecuteScript, onSubmit: this.onExecuteScript,
onDismiss: hideModal, onDismiss: hideModal,
}); });
}} }}
/> />
)} )}
</ModalController> </ModalController>
<ModalController> <ModalController>
{({ showModal, hideModal }) => ( {({ showModal, hideModal }) => (
<AckButton <AckButton
className="problem-action-button" className="problem-action-button"
onClick={() => { onClick={() => {
showModal(AckModal, { showModal(AckModal, {
canClose: problem.manual_close === '1', canClose: problem.manual_close === '1',
severity: problemSeverity, severity: problemSeverity,
onSubmit: this.ackProblem, onSubmit: this.ackProblem,
onDismiss: hideModal, onDismiss: hideModal,
}); });
}} }}
/> />
)} )}
</ModalController> </ModalController>
</div> </div>
} }
<ProblemStatusBar problem={problem} alerts={alerts} className={compactStatusBar && 'compact'} /> <ProblemStatusBar problem={problem} alerts={alerts} className={compactStatusBar && 'compact'}/>
</div> </div>
<div className="problem-details-body"> <div className="problem-details-body">
<div className="problem-details"> <div className="problem-details">
<div className="problem-details-row"> <div className="problem-details-row">
<div className="problem-value-container"> <div className="problem-value-container">
<div className="problem-age"> <div className="problem-age">
<FAIcon icon="clock-o" /> <FAIcon icon="clock-o"/>
<span>{age}</span> <span>{age}</span>
</div> </div>
{problem.items && <ProblemItems items={problem.items} />} {problem.items && <ProblemItems items={problem.items}/>}
</div> </div>
</div> </div>
{problem.comments && {problem.comments &&
<div className="problem-description-row"> <div className="problem-description-row">
<div className="problem-description"> <div className="problem-description">
<Tooltip placement="right" content={problem.comments}> <Tooltip placement="right" content={problem.comments}>
<span className="description-label">Description:&nbsp;</span> <span className="description-label">Description:&nbsp;</span>
</Tooltip> </Tooltip>
<span>{problem.comments}</span> <span>{problem.comments}</span>
</div>
</div> </div>
</div>
} }
{problem.tags && problem.tags.length > 0 && {problem.tags && problem.tags.length > 0 &&
<div className="problem-tags"> <div className="problem-tags">
{problem.tags && problem.tags.map(tag => {problem.tags && problem.tags.map(tag =>
<EventTag <EventTag
key={tag.tag + tag.value} key={tag.tag + tag.value}
tag={tag} tag={tag}
highlight={tag.tag === problem.correlation_tag} highlight={tag.tag === problem.correlation_tag}
onClick={this.handleTagClick} onClick={this.handleTagClick}
/>) />)
} }
</div> </div>
} }
{this.props.showTimeline && this.state.events.length > 0 && {this.props.showTimeline && this.state.events.length > 0 &&
<ProblemTimeline events={this.state.events} timeRange={this.props.timeRange} /> <ProblemTimeline events={this.state.events} timeRange={this.props.timeRange}/>
} }
{showAcknowledges && !wideLayout && {showAcknowledges && !wideLayout &&
<div className="problem-ack-container"> <div className="problem-ack-container">
<h6><FAIcon icon="reply-all" /> Acknowledges</h6> <h6><FAIcon icon="reply-all"/> Acknowledges</h6>
<AcknowledgesList acknowledges={problem.acknowledges} /> <AcknowledgesList acknowledges={problem.acknowledges}/>
</div> </div>
} }
</div> </div>
{showAcknowledges && wideLayout && {showAcknowledges && wideLayout &&
<div className="problem-details-middle"> <div className="problem-details-middle">
<div className="problem-ack-container"> <div className="problem-ack-container">
<h6><FAIcon icon="reply-all" /> Acknowledges</h6> <h6><FAIcon icon="reply-all"/> Acknowledges</h6>
<AcknowledgesList acknowledges={problem.acknowledges} /> <AcknowledgesList acknowledges={problem.acknowledges}/>
</div>
</div> </div>
</div>
} }
<div className="problem-details-right"> <div className="problem-details-right">
<div className="problem-details-right-item"> <div className="problem-details-right-item">
<FAIcon icon="database" /> <FAIcon icon="database"/>
<span>{problem.datasource}</span> <span>{problem.datasource}</span>
</div> </div>
{problem.proxy && {problem.proxy &&
<div className="problem-details-right-item"> <div className="problem-details-right-item">
<FAIcon icon="cloud" /> <FAIcon icon="cloud"/>
<span>{problem.proxy}</span> <span>{problem.proxy}</span>
</div> </div>
} }
{problem.groups && <ProblemGroups groups={problem.groups} className="problem-details-right-item" />} {problem.groups && <ProblemGroups groups={problem.groups} className="problem-details-right-item"/>}
{problem.hosts && <ProblemHosts hosts={problem.hosts} className="problem-details-right-item" />} {problem.hosts && <ProblemHosts hosts={problem.hosts} className="problem-details-right-item"/>}
</div> </div>
</div> </div>
</div> </div>
@@ -224,7 +227,7 @@ function ProblemItem(props: ProblemItemProps) {
return ( return (
<div className="problem-item"> <div className="problem-item">
<FAIcon icon="thermometer-three-quarters" /> <FAIcon icon="thermometer-three-quarters"/>
{showName && <span className="problem-item-name">{item.name}: </span>} {showName && <span className="problem-item-name">{item.name}: </span>}
<Tooltip placement="top-start" content={tooltipContent}> <Tooltip placement="top-start" content={tooltipContent}>
<span className="problem-item-value">{item.lastvalue}</span> <span className="problem-item-value">{item.lastvalue}</span>
@@ -241,8 +244,8 @@ const ProblemItems: FC<ProblemItemsProps> = ({ items }) => {
return ( return (
<div className="problem-items-row"> <div className="problem-items-row">
{items.length > 1 ? {items.length > 1 ?
items.map(item => <ProblemItem item={item} key={item.itemid} showName={true} />) : items.map(item => <ProblemItem item={item} key={item.itemid} showName={true}/>) :
<ProblemItem item={items[0]} /> <ProblemItem item={items[0]}/>
} }
</div> </div>
); );
@@ -257,7 +260,7 @@ class ProblemGroups extends PureComponent<ProblemGroupsProps> {
render() { render() {
return this.props.groups.map(g => ( return this.props.groups.map(g => (
<div className={this.props.className || ''} key={g.groupid}> <div className={this.props.className || ''} key={g.groupid}>
<FAIcon icon="folder" /> <FAIcon icon="folder"/>
<span>{g.name}</span> <span>{g.name}</span>
</div> </div>
)); ));
@@ -273,7 +276,7 @@ class ProblemHosts extends PureComponent<ProblemHostsProps> {
render() { render() {
return this.props.hosts.map(h => ( return this.props.hosts.map(h => (
<div className={this.props.className || ''} key={h.hostid}> <div className={this.props.className || ''} key={h.hostid}>
<FAIcon icon="server" /> <FAIcon icon="server"/>
<span>{h.name}</span> <span>{h.name}</span>
</div> </div>
)); ));

69
src/panel-triggers/components/Problems/Problems.tsx
View File

@@ -7,17 +7,19 @@ import { isNewProblem } from '../../utils';
import EventTag from '../EventTag'; import EventTag from '../EventTag';
import { ProblemDetails } from './ProblemDetails'; import { ProblemDetails } from './ProblemDetails';
import { AckProblemData } from '../AckModal'; import { AckProblemData } from '../AckModal';
import { GFHeartIcon, FAIcon } from '../../../components'; import { FAIcon, GFHeartIcon } from '../../../components';
import { ProblemsPanelOptions, GFTimeRange, RTCell, TriggerSeverity, RTResized } from '../../types'; import { GFTimeRange, ProblemsPanelOptions, RTCell, RTResized, TriggerSeverity } from '../../types';
import { ProblemDTO, ZBXEvent, ZBXTag, ZBXAlert } from '../../../datasource-zabbix/types'; import { ProblemDTO, ZBXAlert, ZBXEvent, ZBXTag } from '../../../datasource-zabbix/types';
import { ZBXScript, APIExecuteScriptResponse } from '../../../datasource-zabbix/zabbix/connectors/zabbix_api/types'; import { APIExecuteScriptResponse, ZBXScript } from '../../../datasource-zabbix/zabbix/connectors/zabbix_api/types';
import { AckCell } from './AckCell'; import { AckCell } from './AckCell';
import { TimeRange } from "@grafana/data";
export interface ProblemListProps { export interface ProblemListProps {
problems: ProblemDTO[]; problems: ProblemDTO[];
panelOptions: ProblemsPanelOptions; panelOptions: ProblemsPanelOptions;
loading?: boolean; loading?: boolean;
timeRange?: GFTimeRange; timeRange?: GFTimeRange;
range?: TimeRange;
pageSize?: number; pageSize?: number;
fontSize?: number; fontSize?: number;
panelId?: number; panelId?: number;
@@ -52,26 +54,26 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
setRootRef = ref => { setRootRef = ref => {
this.rootRef = ref; this.rootRef = ref;
} };
handleProblemAck = (problem: ProblemDTO, data: AckProblemData) => { handleProblemAck = (problem: ProblemDTO, data: AckProblemData) => {
return this.props.onProblemAck(problem, data); return this.props.onProblemAck(problem, data);
} };
onExecuteScript = (problem: ProblemDTO, data: AckProblemData) => { onExecuteScript = (problem: ProblemDTO, data: AckProblemData) => {
} };
handlePageSizeChange = (pageSize, pageIndex) => { handlePageSizeChange = (pageSize, pageIndex) => {
if (this.props.onPageSizeChange) { if (this.props.onPageSizeChange) {
this.props.onPageSizeChange(pageSize, pageIndex); this.props.onPageSizeChange(pageSize, pageIndex);
} }
} };
handleResizedChange = (newResized, event) => { handleResizedChange = (newResized, event) => {
if (this.props.onColumnResize) { if (this.props.onColumnResize) {
this.props.onColumnResize(newResized); this.props.onColumnResize(newResized);
} }
} };
handleExpandedChange = (expanded: any, event: any) => { handleExpandedChange = (expanded: any, event: any) => {
const { problems, pageSize } = this.props; const { problems, pageSize } = this.props;
@@ -99,13 +101,13 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
expanded: nextExpanded, expanded: nextExpanded,
expandedProblems: nextExpandedProblems, expandedProblems: nextExpandedProblems,
}); });
} };
handleTagClick = (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => { handleTagClick = (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => {
if (this.props.onTagClick) { if (this.props.onTagClick) {
this.props.onTagClick(tag, datasource, ctrlKey, shiftKey); this.props.onTagClick(tag, datasource, ctrlKey, shiftKey);
} }
} };
getExpandedPage = (page: number) => { getExpandedPage = (page: number) => {
const { problems, pageSize } = this.props; const { problems, pageSize } = this.props;
@@ -124,7 +126,7 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
} }
return expandedPage; return expandedPage;
} };
buildColumns() { buildColumns() {
const result = []; const result = [];
@@ -132,8 +134,8 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
const highlightNewerThan = options.highlightNewEvents && options.highlightNewerThan; const highlightNewerThan = options.highlightNewEvents && options.highlightNewerThan;
const statusCell = props => StatusCell(props, highlightNewerThan); const statusCell = props => StatusCell(props, highlightNewerThan);
const statusIconCell = props => StatusIconCell(props, highlightNewerThan); const statusIconCell = props => StatusIconCell(props, highlightNewerThan);
const hostNameCell = props => <HostCell name={props.original.host} maintenance={props.original.maintenance} />; const hostNameCell = props => <HostCell name={props.original.host} maintenance={props.original.maintenance}/>;
const hostTechNameCell = props => <HostCell name={props.original.hostTechName} maintenance={props.original.maintenance} />; const hostTechNameCell = props => <HostCell name={props.original.hostTechName} maintenance={props.original.maintenance}/>;
const columns = [ const columns = [
{ Header: 'Host', id: 'host', show: options.hostField, Cell: hostNameCell }, { Header: 'Host', id: 'host', show: options.hostField, Cell: hostNameCell },
@@ -152,14 +154,14 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
Cell: statusIconCell, Cell: statusIconCell,
}, },
{ Header: 'Status', accessor: 'value', show: options.statusField, width: 100, Cell: statusCell }, { Header: 'Status', accessor: 'value', show: options.statusField, width: 100, Cell: statusCell },
{ Header: 'Problem', accessor: 'description', minWidth: 200, Cell: ProblemCell}, { Header: 'Problem', accessor: 'description', minWidth: 200, Cell: ProblemCell },
{ {
Header: 'Ack', id: 'ack', show: options.ackField, width: 70, Header: 'Ack', id: 'ack', show: options.ackField, width: 70,
Cell: props => <AckCell {...props} /> Cell: props => <AckCell {...props} />
}, },
{ {
Header: 'Tags', accessor: 'tags', show: options.showTags, className: 'problem-tags', Header: 'Tags', accessor: 'tags', show: options.showTags, className: 'problem-tags',
Cell: props => <TagCell {...props} onTagClick={this.handleTagClick} /> Cell: props => <TagCell {...props} onTagClick={this.handleTagClick}/>
}, },
{ {
Header: 'Age', className: 'problem-age', width: 100, show: options.ageField, accessor: 'timestamp', Header: 'Age', className: 'problem-age', width: 100, show: options.ageField, accessor: 'timestamp',
@@ -207,17 +209,18 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
noDataText="No problems found" noDataText="No problems found"
SubComponent={props => SubComponent={props =>
<ProblemDetails {...props} <ProblemDetails {...props}
rootWidth={this.rootWidth} rootWidth={this.rootWidth}
timeRange={this.props.timeRange} timeRange={this.props.timeRange}
showTimeline={panelOptions.problemTimeline} range={this.props.range}
panelId={this.props.panelId} showTimeline={panelOptions.problemTimeline}
getProblemEvents={this.props.getProblemEvents} panelId={this.props.panelId}
getProblemAlerts={this.props.getProblemAlerts} getProblemEvents={this.props.getProblemEvents}
getScripts={this.props.getScripts} getProblemAlerts={this.props.getProblemAlerts}
onProblemAck={this.handleProblemAck} getScripts={this.props.getScripts}
onExecuteScript={this.props.onExecuteScript} onProblemAck={this.handleProblemAck}
onTagClick={this.handleTagClick} onExecuteScript={this.props.onExecuteScript}
subRows={false} onTagClick={this.handleTagClick}
subRows={false}
/> />
} }
expanded={this.getExpandedPage(this.state.page)} expanded={this.getExpandedPage(this.state.page)}
@@ -240,7 +243,7 @@ const HostCell: React.FC<HostCellProps> = ({ name, maintenance }) => {
return ( return (
<div> <div>
<span style={{ paddingRight: '0.4rem' }}>{name}</span> <span style={{ paddingRight: '0.4rem' }}>{name}</span>
{maintenance && <FAIcon customClass="fired" icon="wrench" />} {maintenance && <FAIcon customClass="fired" icon="wrench"/>}
</div> </div>
); );
}; };
@@ -251,7 +254,7 @@ function SeverityCell(
markAckEvents?: boolean, markAckEvents?: boolean,
ackEventColor?: string, ackEventColor?: string,
okColor = DEFAULT_OK_COLOR okColor = DEFAULT_OK_COLOR
) { ) {
const problem = props.original; const problem = props.original;
let color: string; let color: string;
@@ -270,7 +273,7 @@ function SeverityCell(
} }
return ( return (
<div className='severity-cell' style={{ background: color }}> <div className="severity-cell" style={{ background: color }}>
{severityDesc.severity} {severityDesc.severity}
</div> </div>
); );
@@ -302,7 +305,7 @@ function StatusIconCell(props: RTCell<ProblemDTO>, highlightNewerThan?: string)
{ 'zbx-problem': props.value === '1' }, { 'zbx-problem': props.value === '1' },
{ 'zbx-ok': props.value === '0' }, { 'zbx-ok': props.value === '0' },
); );
return <GFHeartIcon status={status} className={className} />; return <GFHeartIcon status={status} className={className}/>;
} }
function GroupCell(props: RTCell<ProblemDTO>) { function GroupCell(props: RTCell<ProblemDTO>) {
@@ -350,12 +353,12 @@ class TagCell extends PureComponent<TagCellProps> {
if (this.props.onTagClick) { if (this.props.onTagClick) {
this.props.onTagClick(tag, this.props.original.datasource, ctrlKey, shiftKey); this.props.onTagClick(tag, this.props.original.datasource, ctrlKey, shiftKey);
} }
} };
render() { render() {
const tags = this.props.value || []; const tags = this.props.value || [];
return [ return [
tags.map(tag => <EventTag key={tag.tag + tag.value} tag={tag} onClick={this.handleTagClick} /> ) tags.map(tag => <EventTag key={tag.tag + tag.value} tag={tag} onClick={this.handleTagClick}/>)
]; ];
} }
} }

36
src/panel-triggers/triggers_panel_ctrl.ts
View File

@@ -4,10 +4,9 @@ import _ from 'lodash';
import { getDataSourceSrv } from '@grafana/runtime'; import { getDataSourceSrv } from '@grafana/runtime';
import { PanelEvents } from '@grafana/data'; import { PanelEvents } from '@grafana/data';
import * as dateMath from 'grafana/app/core/utils/datemath'; import * as dateMath from 'grafana/app/core/utils/datemath';
import * as utils from '../datasource-zabbix/utils';
import { MetricsPanelCtrl } from 'grafana/app/plugins/sdk'; import { MetricsPanelCtrl } from 'grafana/app/plugins/sdk';
import { triggerPanelOptionsTab } from './options_tab'; import { triggerPanelOptionsTab } from './options_tab';
import { migratePanelSchema, CURRENT_SCHEMA_VERSION } from './migrations'; import { CURRENT_SCHEMA_VERSION, migratePanelSchema } from './migrations';
import ProblemList from './components/Problems/Problems'; import ProblemList from './components/Problems/Problems';
import AlertList from './components/AlertList/AlertList'; import AlertList from './components/AlertList/AlertList';
import { ProblemDTO } from 'datasource-zabbix/types'; import { ProblemDTO } from 'datasource-zabbix/types';
@@ -15,22 +14,22 @@ import { ProblemDTO } from 'datasource-zabbix/types';
const PROBLEM_EVENTS_LIMIT = 100; const PROBLEM_EVENTS_LIMIT = 100;
export const DEFAULT_TARGET = { export const DEFAULT_TARGET = {
group: {filter: ""}, group: { filter: "" },
host: {filter: ""}, host: { filter: "" },
application: {filter: ""}, application: { filter: "" },
trigger: {filter: ""}, trigger: { filter: "" },
tags: {filter: ""}, tags: { filter: "" },
proxy: {filter: ""}, proxy: { filter: "" },
showProblems: 'problems', showProblems: 'problems',
}; };
export const DEFAULT_SEVERITY = [ export const DEFAULT_SEVERITY = [
{ priority: 0, severity: 'Not classified', color: 'rgb(108, 108, 108)', show: true}, { priority: 0, severity: 'Not classified', color: 'rgb(108, 108, 108)', show: true },
{ priority: 1, severity: 'Information', color: 'rgb(120, 158, 183)', show: true}, { priority: 1, severity: 'Information', color: 'rgb(120, 158, 183)', show: true },
{ priority: 2, severity: 'Warning', color: 'rgb(175, 180, 36)', show: true}, { priority: 2, severity: 'Warning', color: 'rgb(175, 180, 36)', show: true },
{ priority: 3, severity: 'Average', color: 'rgb(255, 137, 30)', show: true}, { priority: 3, severity: 'Average', color: 'rgb(255, 137, 30)', show: true },
{ priority: 4, severity: 'High', color: 'rgb(255, 101, 72)', show: true}, { priority: 4, severity: 'High', color: 'rgb(255, 101, 72)', show: true },
{ priority: 5, severity: 'Disaster', color: 'rgb(215, 0, 0)', show: true}, { priority: 5, severity: 'Disaster', color: 'rgb(215, 0, 0)', show: true },
]; ];
export const getDefaultSeverity = () => DEFAULT_SEVERITY; export const getDefaultSeverity = () => DEFAULT_SEVERITY;
@@ -257,7 +256,7 @@ export class TriggerPanelCtrl extends MetricsPanelCtrl {
let tags = _.map(tagStr.split(','), (tag) => tag.trim()); let tags = _.map(tagStr.split(','), (tag) => tag.trim());
tags = _.map(tags, (tag) => { tags = _.map(tags, (tag) => {
const tagParts = tag.split(':'); const tagParts = tag.split(':');
return {tag: tagParts[0].trim(), value: tagParts[1].trim()}; return { tag: tagParts[0].trim(), value: tagParts[1].trim() };
}); });
return tags; return tags;
} }
@@ -271,7 +270,7 @@ export class TriggerPanelCtrl extends MetricsPanelCtrl {
if (target.datasource === datasource || this.panel.datasource === datasource) { if (target.datasource === datasource || this.panel.datasource === datasource) {
const tagFilter = target.tags.filter; const tagFilter = target.tags.filter;
let targetTags = this.parseTags(tagFilter); let targetTags = this.parseTags(tagFilter);
const newTag = {tag: tag.tag, value: tag.value}; const newTag = { tag: tag.tag, value: tag.value };
targetTags.push(newTag); targetTags.push(newTag);
targetTags = _.uniqWith(targetTags, _.isEqual); targetTags = _.uniqWith(targetTags, _.isEqual);
const newFilter = this.tagsToString(targetTags); const newFilter = this.tagsToString(targetTags);
@@ -347,12 +346,12 @@ export class TriggerPanelCtrl extends MetricsPanelCtrl {
.then((datasource: any) => { .then((datasource: any) => {
const userIsEditor = this.contextSrv.isEditor || this.contextSrv.isGrafanaAdmin; const userIsEditor = this.contextSrv.isEditor || this.contextSrv.isGrafanaAdmin;
if (datasource.disableReadOnlyUsersAck && !userIsEditor) { if (datasource.disableReadOnlyUsersAck && !userIsEditor) {
return Promise.reject({message: 'You have no permissions to acknowledge events.'}); return Promise.reject({ message: 'You have no permissions to acknowledge events.' });
} }
if (eventid) { if (eventid) {
return datasource.zabbix.acknowledgeEvent(eventid, ack_message, action, severity); return datasource.zabbix.acknowledgeEvent(eventid, ack_message, action, severity);
} else { } else {
return Promise.reject({message: 'Trigger has no events. Nothing to acknowledge.'}); return Promise.reject({ message: 'Trigger has no events. Nothing to acknowledge.' });
} }
}) })
.then(this.refresh.bind(this)) .then(this.refresh.bind(this))
@@ -413,6 +412,7 @@ export class TriggerPanelCtrl extends MetricsPanelCtrl {
problems, problems,
panelOptions, panelOptions,
timeRange: { timeFrom, timeTo }, timeRange: { timeFrom, timeTo },
range: ctrl.range,
loading, loading,
pageSize, pageSize,
fontSize: fontSizeProp, fontSize: fontSizeProp,

71
src/panel-triggers/utils.ts
View File

@@ -32,74 +32,3 @@ export const getNextRefIdChar = (queries: DataQuery[]): string => {
}); });
}); });
}; };
export type UrlQueryMap = Record<string, any>;
export function renderUrl(path: string, query: UrlQueryMap | undefined): string {
if (query && Object.keys(query).length > 0) {
path += '?' + toUrlParams(query);
}
return path;
}
function encodeURIComponentAsAngularJS(val: string, pctEncodeSpaces?: boolean) {
return encodeURIComponent(val)
.replace(/%25/gi, '%2525') // Double-encode % symbol to make it properly decoded in Explore
.replace(/%40/gi, '@')
.replace(/%3A/gi, ':')
.replace(/%24/g, '$')
.replace(/%2C/gi, ',')
.replace(/%3B/gi, ';')
.replace(/%20/g, pctEncodeSpaces ? '%20' : '+');
}
function toUrlParams(a: any) {
const s: any[] = [];
const rbracket = /\[\]$/;
const isArray = (obj: any) => {
return Object.prototype.toString.call(obj) === '[object Array]';
};
const add = (k: string, v: any) => {
v = typeof v === 'function' ? v() : v === null ? '' : v === undefined ? '' : v;
if (typeof v !== 'boolean') {
s[s.length] = encodeURIComponentAsAngularJS(k, true) + '=' + encodeURIComponentAsAngularJS(v, true);
} else {
s[s.length] = encodeURIComponentAsAngularJS(k, true);
}
};
const buildParams = (prefix: string, obj: any) => {
let i, len, key;
if (prefix) {
if (isArray(obj)) {
for (i = 0, len = obj.length; i < len; i++) {
if (rbracket.test(prefix)) {
add(prefix, obj[i]);
} else {
buildParams(prefix, obj[i]);
}
}
} else if (obj && String(obj) === '[object Object]') {
for (key in obj) {
buildParams(prefix + '[' + key + ']', obj[key]);
}
} else {
add(prefix, obj);
}
} else if (isArray(obj)) {
for (i = 0, len = obj.length; i < len; i++) {
add(obj[i].name, obj[i].value);
}
} else {
for (key in obj) {
buildParams(key, obj[key]);
}
}
return s;
};
return buildParams('', a).join('&');
}