Fix Explore button, fixes #1240
Also pass dashboard time range to the explore view.
This commit is contained in:
Alexander Zobnin
@@ -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,107 +107,107 @@ 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">
|
||||
<ModalController>
|
||||
{({ showModal, hideModal }) => (
|
||||
<ExecScriptButton
|
||||
className="problem-action-button"
|
||||
onClick={() => {
|
||||
showModal(ExecScriptModal, {
|
||||
getScripts: this.getScripts,
|
||||
onSubmit: this.onExecuteScript,
|
||||
onDismiss: hideModal,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</ModalController>
|
||||
<ModalController>
|
||||
{({ showModal, hideModal }) => (
|
||||
<AckButton
|
||||
className="problem-action-button"
|
||||
onClick={() => {
|
||||
showModal(AckModal, {
|
||||
canClose: problem.manual_close === '1',
|
||||
severity: problemSeverity,
|
||||
onSubmit: this.ackProblem,
|
||||
onDismiss: hideModal,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</ModalController>
|
||||
</div>
|
||||
<div className="problem-actions">
|
||||
<ModalController>
|
||||
{({ showModal, hideModal }) => (
|
||||
<ExecScriptButton
|
||||
className="problem-action-button"
|
||||
onClick={() => {
|
||||
showModal(ExecScriptModal, {
|
||||
getScripts: this.getScripts,
|
||||
onSubmit: this.onExecuteScript,
|
||||
onDismiss: hideModal,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</ModalController>
|
||||
<ModalController>
|
||||
{({ showModal, hideModal }) => (
|
||||
<AckButton
|
||||
className="problem-action-button"
|
||||
onClick={() => {
|
||||
showModal(AckModal, {
|
||||
canClose: problem.manual_close === '1',
|
||||
severity: problemSeverity,
|
||||
onSubmit: this.ackProblem,
|
||||
onDismiss: hideModal,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</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 &&
|
||||
<div className="problem-description-row">
|
||||
<div className="problem-description">
|
||||
<Tooltip placement="right" content={problem.comments}>
|
||||
<span className="description-label">Description: </span>
|
||||
</Tooltip>
|
||||
<span>{problem.comments}</span>
|
||||
</div>
|
||||
<div className="problem-description-row">
|
||||
<div className="problem-description">
|
||||
<Tooltip placement="right" content={problem.comments}>
|
||||
<span className="description-label">Description: </span>
|
||||
</Tooltip>
|
||||
<span>{problem.comments}</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{problem.tags && problem.tags.length > 0 &&
|
||||
<div className="problem-tags">
|
||||
{problem.tags && problem.tags.map(tag =>
|
||||
<EventTag
|
||||
key={tag.tag + tag.value}
|
||||
tag={tag}
|
||||
highlight={tag.tag === problem.correlation_tag}
|
||||
onClick={this.handleTagClick}
|
||||
/>)
|
||||
}
|
||||
</div>
|
||||
<div className="problem-tags">
|
||||
{problem.tags && problem.tags.map(tag =>
|
||||
<EventTag
|
||||
key={tag.tag + tag.value}
|
||||
tag={tag}
|
||||
highlight={tag.tag === problem.correlation_tag}
|
||||
onClick={this.handleTagClick}
|
||||
/>)
|
||||
}
|
||||
</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} />
|
||||
</div>
|
||||
<div className="problem-ack-container">
|
||||
<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} />
|
||||
</div>
|
||||
<div className="problem-details-middle">
|
||||
<div className="problem-ack-container">
|
||||
<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" />
|
||||
<span>{problem.proxy}</span>
|
||||
</div>
|
||||
<div className="problem-details-right-item">
|
||||
<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>
|
||||
));
|
||||
|
||||
@@ -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',
|
||||
@@ -207,17 +209,18 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
|
||||
noDataText="No problems found"
|
||||
SubComponent={props =>
|
||||
<ProblemDetails {...props}
|
||||
rootWidth={this.rootWidth}
|
||||
timeRange={this.props.timeRange}
|
||||
showTimeline={panelOptions.problemTimeline}
|
||||
panelId={this.props.panelId}
|
||||
getProblemEvents={this.props.getProblemEvents}
|
||||
getProblemAlerts={this.props.getProblemAlerts}
|
||||
getScripts={this.props.getScripts}
|
||||
onProblemAck={this.handleProblemAck}
|
||||
onExecuteScript={this.props.onExecuteScript}
|
||||
onTagClick={this.handleTagClick}
|
||||
subRows={false}
|
||||
rootWidth={this.rootWidth}
|
||||
timeRange={this.props.timeRange}
|
||||
range={this.props.range}
|
||||
showTimeline={panelOptions.problemTimeline}
|
||||
panelId={this.props.panelId}
|
||||
getProblemEvents={this.props.getProblemEvents}
|
||||
getProblemAlerts={this.props.getProblemAlerts}
|
||||
getScripts={this.props.getScripts}
|
||||
onProblemAck={this.handleProblemAck}
|
||||
onExecuteScript={this.props.onExecuteScript}
|
||||
onTagClick={this.handleTagClick}
|
||||
subRows={false}
|
||||
/>
|
||||
}
|
||||
expanded={this.getExpandedPage(this.state.page)}
|
||||
@@ -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}/>)
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user