Skip to content

Commit

Permalink
Fix Explore button, fixes #1240
Browse files Browse the repository at this point in the history 
Also pass dashboard time range to the explore view.
  • Loading branch information
@alexanderzobnin
alexanderzobnin committed Aug 9, 2021
1 parent 0772170 commit 8499d72
Show file tree
Hide file tree
Showing 5 changed files with 155 additions and 217 deletions.
23 changes: 13 additions & 10 deletions src/components/ExploreButton/ExploreButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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);
};

173 changes: 88 additions & 85 deletions src/panel-triggers/components/Problems/ProblemDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
}
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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:&nbsp;</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:&nbsp;</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>
Expand All @@ -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>
Expand All @@ -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>
);
Expand All @@ -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>
));
Expand All @@ -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>
));
Expand Down
Loading

0 comments on commit 8499d72

Please sign in to comment.