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 { getLocationSrv } from '@grafana/runtime';
import { MODE_METRICS, MODE_ITEMID } from '../../datasource-zabbix/constants';
import { renderUrl } from '../../panel-triggers/utils';
import { locationService } from '@grafana/runtime';
import { ExploreUrlState, TimeRange, urlUtil } from "@grafana/data";
import { MODE_ITEMID, MODE_METRICS } from '../../datasource-zabbix/constants';
import { ActionButton } from '../ActionButton/ActionButton';
import { expandItemName } from '../../datasource-zabbix/utils';
import { ProblemDTO } from '../../datasource-zabbix/types';
import { ActionButton } from '../ActionButton/ActionButton';
interface Props {
problem: ProblemDTO;
range: TimeRange;
panelId: number;
}
export const ExploreButton: FC<Props> = ({ problem, panelId }) => {
export const ExploreButton: FC<Props> = ({ problem, panelId, range }) => {
return (
<ActionButton icon="compass" width={6} onClick={() => openInExplore(problem, panelId)}>
<ActionButton icon="compass" width={6} onClick={() => openInExplore(problem, panelId, range)}>
Explore
</ActionButton>
);
};
const openInExplore = (problem: ProblemDTO, panelId: number) => {
const openInExplore = (problem: ProblemDTO, panelId: number, range: TimeRange) => {
let query: any = {};
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,
context: 'explore',
originPanelId: panelId,
range: range.raw,
queries: [query],
};
const exploreState = JSON.stringify(state);
const url = renderUrl('/explore', { left: exploreState });
getLocationSrv().update({ path: url, query: {} });
const url = urlUtil.renderUrl('/explore', { left: exploreState });
locationService.push(url);
};

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

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

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

@@ -7,17 +7,19 @@ import { isNewProblem } from '../../utils';
import EventTag from '../EventTag';
import { ProblemDetails } from './ProblemDetails';
import { AckProblemData } from '../AckModal';
import { GFHeartIcon, FAIcon } from '../../../components';
import { ProblemsPanelOptions, GFTimeRange, RTCell, TriggerSeverity, RTResized } from '../../types';
import { ProblemDTO, ZBXEvent, ZBXTag, ZBXAlert } from '../../../datasource-zabbix/types';
import { ZBXScript, APIExecuteScriptResponse } from '../../../datasource-zabbix/zabbix/connectors/zabbix_api/types';
import { FAIcon, GFHeartIcon } from '../../../components';
import { GFTimeRange, ProblemsPanelOptions, RTCell, RTResized, TriggerSeverity } from '../../types';
import { ProblemDTO, ZBXAlert, ZBXEvent, ZBXTag } from '../../../datasource-zabbix/types';
import { APIExecuteScriptResponse, ZBXScript } from '../../../datasource-zabbix/zabbix/connectors/zabbix_api/types';
import { AckCell } from './AckCell';
import { TimeRange } from "@grafana/data";
export interface ProblemListProps {
problems: ProblemDTO[];
panelOptions: ProblemsPanelOptions;
loading?: boolean;
timeRange?: GFTimeRange;
range?: TimeRange;
pageSize?: number;
fontSize?: number;
panelId?: number;
@@ -52,26 +54,26 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
setRootRef = ref => {
this.rootRef = ref;
}
};
handleProblemAck = (problem: ProblemDTO, data: AckProblemData) => {
return this.props.onProblemAck(problem, data);
}
};
onExecuteScript = (problem: ProblemDTO, data: AckProblemData) => {
}
};
handlePageSizeChange = (pageSize, pageIndex) => {
if (this.props.onPageSizeChange) {
this.props.onPageSizeChange(pageSize, pageIndex);
}
}
};
handleResizedChange = (newResized, event) => {
if (this.props.onColumnResize) {
this.props.onColumnResize(newResized);
}
}
};
handleExpandedChange = (expanded: any, event: any) => {
const { problems, pageSize } = this.props;
@@ -99,13 +101,13 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
expanded: nextExpanded,
expandedProblems: nextExpandedProblems,
});
}
};
handleTagClick = (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => {
if (this.props.onTagClick) {
this.props.onTagClick(tag, datasource, ctrlKey, shiftKey);
}
}
};
getExpandedPage = (page: number) => {
const { problems, pageSize } = this.props;
@@ -124,7 +126,7 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
}
return expandedPage;
}
};
buildColumns() {
const result = [];
@@ -132,8 +134,8 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
const highlightNewerThan = options.highlightNewEvents && options.highlightNewerThan;
const statusCell = props => StatusCell(props, highlightNewerThan);
const statusIconCell = props => StatusIconCell(props, highlightNewerThan);
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 hostNameCell = props => <HostCell name={props.original.host} maintenance={props.original.maintenance}/>;
const hostTechNameCell = props => <HostCell name={props.original.hostTechName} maintenance={props.original.maintenance}/>;
const columns = [
{ Header: 'Host', id: 'host', show: options.hostField, Cell: hostNameCell },
@@ -152,14 +154,14 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
Cell: statusIconCell,
},
{ 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,
Cell: props => <AckCell {...props} />
},
{
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',
@@ -209,6 +211,7 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
<ProblemDetails {...props}
rootWidth={this.rootWidth}
timeRange={this.props.timeRange}
range={this.props.range}
showTimeline={panelOptions.problemTimeline}
panelId={this.props.panelId}
getProblemEvents={this.props.getProblemEvents}
@@ -240,7 +243,7 @@ const HostCell: React.FC<HostCellProps> = ({ name, maintenance }) => {
return (
<div>
<span style={{ paddingRight: '0.4rem' }}>{name}</span>
{maintenance && <FAIcon customClass="fired" icon="wrench" />}
{maintenance && <FAIcon customClass="fired" icon="wrench"/>}
</div>
);
};
@@ -251,7 +254,7 @@ function SeverityCell(
markAckEvents?: boolean,
ackEventColor?: string,
okColor = DEFAULT_OK_COLOR
) {
) {
const problem = props.original;
let color: string;
@@ -270,7 +273,7 @@ function SeverityCell(
}
return (
<div className='severity-cell' style={{ background: color }}>
<div className="severity-cell" style={{ background: color }}>
{severityDesc.severity}
</div>
);
@@ -302,7 +305,7 @@ function StatusIconCell(props: RTCell<ProblemDTO>, highlightNewerThan?: string)
{ 'zbx-problem': props.value === '1' },
{ 'zbx-ok': props.value === '0' },
);
return <GFHeartIcon status={status} className={className} />;
return <GFHeartIcon status={status} className={className}/>;
}
function GroupCell(props: RTCell<ProblemDTO>) {
@@ -350,12 +353,12 @@ class TagCell extends PureComponent<TagCellProps> {
if (this.props.onTagClick) {
this.props.onTagClick(tag, this.props.original.datasource, ctrlKey, shiftKey);
}
}
};
render() {
const tags = this.props.value || [];
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 { PanelEvents } from '@grafana/data';
import * as dateMath from 'grafana/app/core/utils/datemath';
import * as utils from '../datasource-zabbix/utils';
import { MetricsPanelCtrl } from 'grafana/app/plugins/sdk';
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 AlertList from './components/AlertList/AlertList';
import { ProblemDTO } from 'datasource-zabbix/types';
@@ -15,22 +14,22 @@ import { ProblemDTO } from 'datasource-zabbix/types';
const PROBLEM_EVENTS_LIMIT = 100;
export const DEFAULT_TARGET = {
group: {filter: ""},
host: {filter: ""},
application: {filter: ""},
trigger: {filter: ""},
tags: {filter: ""},
proxy: {filter: ""},
group: { filter: "" },
host: { filter: "" },
application: { filter: "" },
trigger: { filter: "" },
tags: { filter: "" },
proxy: { filter: "" },
showProblems: 'problems',
};
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},
{ priority: 2, severity: 'Warning', color: 'rgb(175, 180, 36)', 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: 5, severity: 'Disaster', color: 'rgb(215, 0, 0)', 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: 2, severity: 'Warning', color: 'rgb(175, 180, 36)', 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: 5, severity: 'Disaster', color: 'rgb(215, 0, 0)', show: true },
];
export const getDefaultSeverity = () => DEFAULT_SEVERITY;
@@ -257,7 +256,7 @@ export class TriggerPanelCtrl extends MetricsPanelCtrl {
let tags = _.map(tagStr.split(','), (tag) => tag.trim());
tags = _.map(tags, (tag) => {
const tagParts = tag.split(':');
return {tag: tagParts[0].trim(), value: tagParts[1].trim()};
return { tag: tagParts[0].trim(), value: tagParts[1].trim() };
});
return tags;
}
@@ -271,7 +270,7 @@ export class TriggerPanelCtrl extends MetricsPanelCtrl {
if (target.datasource === datasource || this.panel.datasource === datasource) {
const tagFilter = target.tags.filter;
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 = _.uniqWith(targetTags, _.isEqual);
const newFilter = this.tagsToString(targetTags);
@@ -347,12 +346,12 @@ export class TriggerPanelCtrl extends MetricsPanelCtrl {
.then((datasource: any) => {
const userIsEditor = this.contextSrv.isEditor || this.contextSrv.isGrafanaAdmin;
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) {
return datasource.zabbix.acknowledgeEvent(eventid, ack_message, action, severity);
} 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))
@@ -413,6 +412,7 @@ export class TriggerPanelCtrl extends MetricsPanelCtrl {
problems,
panelOptions,
timeRange: { timeFrom, timeTo },
range: ctrl.range,
loading,
pageSize,
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('&');
}