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

problems: add tag filter on tag click

Browse Source
This commit is contained in:
Alexander Zobnin
2018-12-27 14:27:34 +03:00
parent 9e40959ef6
commit f5dc4fd1c1
3 changed files with 28 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/panel-triggers/components/ProblemDetails.tsx
View File

@@ -1,6 +1,6 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import * as utils from '../../datasource-zabbix/utils'; import * as utils from '../../datasource-zabbix/utils';
import { Trigger, ZBXItem, ZBXAcknowledge, ZBXHost, ZBXGroup, ZBXEvent, GFTimeRange, RTRow } from '../types'; import { Trigger, ZBXItem, ZBXAcknowledge, ZBXHost, ZBXGroup, ZBXEvent, GFTimeRange, RTRow, ZBXTag } from '../types';
import { Modal, AckProblemData } from './Modal'; import { Modal, AckProblemData } from './Modal';
import EventTag from './EventTag'; import EventTag from './EventTag';
import Tooltip from './Tooltip/Tooltip'; import Tooltip from './Tooltip/Tooltip';
@@ -11,7 +11,8 @@ interface ProblemDetailsProps extends RTRow<Trigger> {
rootWidth: number; rootWidth: number;
timeRange: GFTimeRange; timeRange: GFTimeRange;
getProblemEvents: (problem: Trigger) => Promise<ZBXEvent[]>; getProblemEvents: (problem: Trigger) => Promise<ZBXEvent[]>;
onProblemAck: (problem: Trigger, data: AckProblemData) => Promise<any> | any; onProblemAck?: (problem: Trigger, data: AckProblemData) => Promise<any> | any;
onTagClick?: (tag: ZBXTag, datasource: string) => void;
} }
interface ProblemDetailsState { interface ProblemDetailsState {
@@ -37,6 +38,12 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
}); });
} }
handleTagClick = (tag: ZBXTag) => {
if (this.props.onTagClick) {
this.props.onTagClick(tag, this.props.original.datasource);
}
}
fetchProblemEvents() { fetchProblemEvents() {
const problem = this.props.original; const problem = this.props.original;
this.props.getProblemEvents(problem) this.props.getProblemEvents(problem)
@@ -100,7 +107,12 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
{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 key={tag.tag + tag.value} tag={tag} highlight={tag.tag === problem.correlation_tag} />) <EventTag
key={tag.tag + tag.value}
tag={tag}
highlight={tag.tag === problem.correlation_tag}
onClick={this.handleTagClick}
/>)
} }
</div> </div>
} }

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

@@ -1,7 +1,7 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import ReactTable from 'react-table'; import ReactTable from 'react-table';
import * as utils from '../../datasource-zabbix/utils'; import * as utils from '../../datasource-zabbix/utils';
import { ProblemsPanelOptions, Trigger, ZBXEvent, GFTimeRange, RTCell } from '../types'; import { ProblemsPanelOptions, Trigger, ZBXEvent, GFTimeRange, RTCell, ZBXTag } from '../types';
import EventTag from './EventTag'; import EventTag from './EventTag';
import ProblemDetails from './ProblemDetails'; import ProblemDetails from './ProblemDetails';
import { AckProblemData } from './Modal'; import { AckProblemData } from './Modal';
@@ -12,7 +12,8 @@ export interface ProblemListProps {
loading?: boolean; loading?: boolean;
timeRange?: GFTimeRange; timeRange?: GFTimeRange;
getProblemEvents: (ids: string[]) => ZBXEvent[]; getProblemEvents: (ids: string[]) => ZBXEvent[];
onProblemAck: (problem: Trigger, data: AckProblemData) => void; onProblemAck?: (problem: Trigger, data: AckProblemData) => void;
onTagClick?: (tag: ZBXTag, datasource: string) => void;
} }
interface ProblemListState { interface ProblemListState {
@@ -88,6 +89,12 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
}); });
} }
handleTagClick = (tag: ZBXTag, datasource: string) => {
if (this.props.onTagClick) {
this.props.onTagClick(tag, datasource);
}
}
render() { render() {
// console.log(this.props.problems); // console.log(this.props.problems);
const columns = this.buildColumns(); const columns = this.buildColumns();
@@ -106,6 +113,7 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
timeRange={this.props.timeRange} timeRange={this.props.timeRange}
getProblemEvents={this.props.getProblemEvents} getProblemEvents={this.props.getProblemEvents}
onProblemAck={this.handleProblemAck} onProblemAck={this.handleProblemAck}
onTagClick={this.handleTagClick}
/> />
} }
expanded={this.getExpandedPage(this.state.page)} expanded={this.getExpandedPage(this.state.page)}

3
src/panel-triggers/triggers_panel_ctrl.js
View File

@@ -735,6 +735,9 @@ export class TriggerPanelCtrl extends PanelCtrl {
onProblemAck: (trigger, data) => { onProblemAck: (trigger, data) => {
const message = data.message; const message = data.message;
return ctrl.acknowledgeTrigger(trigger, message); return ctrl.acknowledgeTrigger(trigger, message);
},
onTagClick: (tag, datasource) => {
ctrl.addTagFilter(tag, datasource);
} }
}; };
const problemsReactElem = React.createElement(ProblemList, problemsListProps); const problemsReactElem = React.createElement(ProblemList, problemsListProps);