Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Move graph into RuleGraph component

pull/509/head
Andrew Watkins 2016-11-11 15:09:29 -08:00
parent 8a61c1ffd6
commit f5fe2f89b9
2 changed files with 99 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
ui/src/kapacitor/components/RuleGraph.js Normal file
View File

@ -0,0 +1,96 @@
import React, {PropTypes} from 'react';
import selectStatement from 'src/chronograf/utils/influxql/select';
import AutoRefresh from 'shared/components/AutoRefresh';
import LineGraph from 'shared/components/LineGraph';
const RefreshingLineGraph = AutoRefresh(LineGraph);
export const RuleGraph = React.createClass({
propTypes: {
source: PropTypes.shape({
links: PropTypes.shape({
proxy: PropTypes.string.isRequired,
}).isRequired,
}).isRequired,
query: PropTypes.shape({}).isRequired,
rule: PropTypes.shape({}).isRequired,
},
render() {
return (
<div className="rule-builder--graph">
{this.renderGraph()}
</div>
);
},
renderGraph() {
const {query, source} = this.props;
const autoRefreshMs = 30000;
const queryText = selectStatement({lower: 'now() - 15m'}, query);
const queries = [{host: source.links.proxy, text: queryText}];
const kapacitorLineColors = ["#4ED8A0"];
if (!queryText) {
return (
<div className="rule-preview--graph-empty">
<p>Select a <strong>Metric</strong> to preview on a graph</p>
</div>
);
}
return (
<RefreshingLineGraph
queries={queries}
autoRefresh={autoRefreshMs}
underlayCallback={this.createUnderlayCallback}
isGraphFilled={false}
overrideLineColors={kapacitorLineColors}
/>
);
},
createUnderlayCallback() {
const {rule} = this.props;
return (canvas, area, dygraph) => {
if (rule.trigger !== 'threshold' || rule.values.value === '') {
return;
}
const theOnePercent = 0.01;
let highlightStart = 0;
let highlightEnd = 0;
switch (rule.values.operator) {
case 'equal to or greater':
case 'greater than': {
highlightStart = rule.values.value;
highlightEnd = dygraph.yAxisRange()[1];
break;
}
case 'equal to or less than':
case 'less than': {
highlightStart = dygraph.yAxisRange()[0];
highlightEnd = rule.values.value;
break;
}
case 'not equal to':
case 'equal to': {
const width = (theOnePercent) * (dygraph.yAxisRange()[1] - dygraph.yAxisRange()[0]);
highlightStart = +rule.values.value - width;
highlightEnd = +rule.values.value + width;
break;
}
}
const bottom = dygraph.toDomYCoord(highlightStart);
const top = dygraph.toDomYCoord(highlightEnd);
canvas.fillStyle = 'rgba(78,216,160,0.3)';
canvas.fillRect(area.x, top, area.w, bottom - top);
};
},
});
export default RuleGraph;

76
ui/src/kapacitor/containers/KapacitorRulePage.js
View File

@ -8,11 +8,8 @@ import ValuesSection from '../components/ValuesSection';
import * as kapacitorActionCreators from '../actions/view';
import * as queryActionCreators from '../../chronograf/actions/view';
import {bindActionCreators} from 'redux';
import selectStatement from 'src/chronograf/utils/influxql/select';
import AutoRefresh from 'shared/components/AutoRefresh';
import LineGraph from 'shared/components/LineGraph';
const RefreshingLineGraph = AutoRefresh(LineGraph);
import RuleHeader from 'src/kapacitor/components/RuleHeader';
import RuleGraph from 'src/kapacitor/components/RuleGraph';
import {getKapacitor, getKapacitorConfig} from 'shared/apis/index';
import Dropdown from 'shared/components/Dropdown';
import {ALERTS, DEFAULT_RULE_ID} from 'src/kapacitor/constants';
@ -139,7 +136,7 @@ export const KapacitorRulePage = React.createClass({
},
render() {
const {rules, queryConfigs, params, kapacitorActions} = this.props;
const {rules, queryConfigs, params, kapacitorActions, source} = this.props;
const rule = this.isEditing() ? rules[params.ruleID] : rules[DEFAULT_RULE_ID];
const query = rule && queryConfigs[rule.queryID];
@ -157,9 +154,7 @@ export const KapacitorRulePage = React.createClass({
<div className="rule-builder">
{this.renderDataSection(query)}
{this.renderValuesSection(rule)}
<div className="rule-builder--graph">
{this.renderGraph(query, this.createUnderlayCallback(rule))}
</div>
<RuleGraph source={source} query={query} rule={rule} />
{this.renderMessageSection(rule)}
</div>
</div>
@ -170,30 +165,6 @@ export const KapacitorRulePage = React.createClass({
);
},
renderGraph(query, underlayCallback) {
const autoRefreshMs = 30000;
const queryText = selectStatement({lower: 'now() - 15m'}, query);
const queries = [{host: this.props.source.links.proxy, text: queryText}];
const kapacitorLineColors = ["#4ED8A0"];
if (!queryText) {
return (
<div className="rule-preview--graph-empty">
<p>Select a <strong>Metric</strong> to preview on a graph</p>
</div>
);
}
return (
<RefreshingLineGraph
queries={queries}
autoRefresh={autoRefreshMs}
underlayCallback={underlayCallback}
isGraphFilled={false}
overrideLineColors={kapacitorLineColors}
/>
);
},
renderDataSection(query) {
return (
<div className="kapacitor-rule-section">
@ -252,47 +223,6 @@ export const KapacitorRulePage = React.createClass({
this.props.kapacitorActions.updateMessage(rule.id, this.message.value);
},
createUnderlayCallback(rule) {
return (canvas, area, dygraph) => {
if (rule.trigger !== 'threshold' || rule.values.value === '') {
return;
}
const theOnePercent = 0.01;
let highlightStart = 0;
let highlightEnd = 0;
switch (rule.values.operator) {
case 'equal to or greater':
case 'greater than': {
highlightStart = rule.values.value;
highlightEnd = dygraph.yAxisRange()[1];
break;
}
case 'equal to or less than':
case 'less than': {
highlightStart = dygraph.yAxisRange()[0];
highlightEnd = rule.values.value;
break;
}
case 'not equal to':
case 'equal to': {
const width = (theOnePercent) * (dygraph.yAxisRange()[1] - dygraph.yAxisRange()[0]);
highlightStart = +rule.values.value - width;
highlightEnd = +rule.values.value + width;
break;
}
}
const bottom = dygraph.toDomYCoord(highlightStart);
const top = dygraph.toDomYCoord(highlightEnd);
canvas.fillStyle = 'rgba(78,216,160,0.3)';
canvas.fillRect(area.x, top, area.w, bottom - top);
};
},
});