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

Merge pull request #766 from influxdata/rule-template 

Rule template
pull/10616/head
Andrew Watkins 2017-01-13 14:23:45 -08:00 committed by GitHub
parent 1f0deddf49 a65592ffa5
commit 1144047477
5 changed files with 59 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -11,6 +11,7 @@
3. [#564](https://github.com/influxdata/chronograf/issues/564): Add RabbitMQ pre-canned layout.
4. [#706](https://github.com/influxdata/chronograf/issues/706): Alerts on threshold where value is inside of range
5. [#707](https://github.com/influxdata/chronograf/issues/707): Alerts on threshold where value is outside of range
6. [#766](https://github.com/influxdata/chronograf/pull/766): Add click-to-insert functionality to rule message templates
## v1.1.0-beta5 [2017-01-05]

58
ui/src/kapacitor/components/RuleMessage.js
View File

@ -1,14 +1,22 @@
import React, {PropTypes} from 'react';
import Dropdown from 'shared/components/Dropdown';
import ReactTooltip from 'react-tooltip';
import {RULE_MESSAGE_TEMPLATES as templates} from '../constants/index.js';
const {
arrayOf,
func,
shape,
string,
} = PropTypes;
export const RuleMessage = React.createClass({
propTypes: {
rule: PropTypes.shape({}).isRequired,
actions: PropTypes.shape({
updateMessage: PropTypes.func.isRequired,
rule: shape({}).isRequired,
actions: shape({
updateMessage: func.isRequired,
}).isRequired,
enabledAlerts: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
enabledAlerts: arrayOf(string.isRequired).isRequired,
},
handleChangeMessage() {
@ -35,19 +43,23 @@ export const RuleMessage = React.createClass({
className="alert-message"
ref={(r) => this.message = r}
onChange={() => actions.updateMessage(rule.id, this.message.value)}
placeholder="Compose your alert message here"
placeholder='Example: {{ .ID }} is {{ .Level }} value: {{ index .Fields "value" }}'
value={rule.message}
/>
<div className="alert-message--formatting">
<p>Templates:</p>
<code data-tip="The ID of the alert">&#123;&#123;.ID&#125;&#125;</code>
<code data-tip="Measurement name">&#123;&#123;.Name&#125;&#125;</code>
<code data-tip="The name of the task">&#123;&#123;.TaskName&#125;&#125;</code>
<code data-tip="Concatenation of all group-by tags of the form <code>&#91;key=value,&#93;+</code>. If no groupBy is performed equal to literal &quot;nil&quot;">&#123;&#123;.Group&#125;&#125;</code>
<code data-tip="Map of tags. Use <code>&#123;&#123; index .Tags &quot;key&quot; &#125;&#125;</code> to get a specific tag value">&#123;&#123;.Tags&#125;&#125;</code>
<code data-tip="Alert Level, one of: <code>INFO</code><code>WARNING</code><code>CRITICAL</code>">&#123;&#123;.Level&#125;&#125;</code>
<code data-tip="Map of fields. Use <code>&#123;&#123; index .Fields &quot;key&quot; &#125;&#125;</code> to get a specific field value">&#123;&#123;.Fields&#125;&#125;</code>
<code data-tip="The time of the point that triggered the event">&#123;&#123;.Time&#125;&#125;</code>
{
Object.keys(templates).map(t => {
return (
<CodeData
key={t}
template={templates[t]}
onClickTemplate={() => actions.updateMessage(rule.id, `${this.message.value} ${templates[t].label}`)}
/>
);
})
}
<ReactTooltip effect="solid" html={true} offset={{top: -4}} class="influx-tooltip kapacitor-tooltip" />
</div>
<div className="rule-section--item bottom alert-message--endpoint">
@ -59,4 +71,24 @@ export const RuleMessage = React.createClass({
);
},
});
const CodeData = React.createClass({
propTypes: {
onClickTemplate: func,
template: shape({
label: string,
text: string,
}),
},
render() {
const {onClickTemplate, template} = this.props;
const {label, text} = template;
return (
<code data-tip={text} onClick={onClickTemplate}>{label}</code>
);
},
});
export default RuleMessage;

11
ui/src/kapacitor/constants/index.js
View File

@ -25,3 +25,14 @@ export const SHIFTS = ['1m', '5m', '10m', '30m', '1h', '2h', '24h'];
export const ALERTS = ['hipchat', 'opsgenie', 'pagerduty', 'sensu', 'slack', 'smtp', 'talk', 'telegram', 'victorops'];
export const DEFAULT_RULE_ID = 'DEFAULT_RULE_ID';
export const RULE_MESSAGE_TEMPLATES = {
id: {label: "{{.ID}}", text: "The ID of the alert"},
name: {label: "{{.Name}}", text: "Measurement name"},
taskName: {label: "{{.TaskName}}", text: "The name of the task"},
group: {label: "{{.Group}}", text: "Concatenation of all group-by tags of the form <code>&#91;key=value,&#93;+</code>. If no groupBy is performed equal to literal &quot;nil&quot;"},
tags: {label: "{{.Tags}}", text: "Map of tags. Use <code>&#123;&#123; index .Tags &quot;key&quot; &#125;&#125;</code> to get a specific tag value"},
level: {label: "{{.Level}}", text: "Alert Level, one of: <code>INFO</code><code>WARNING</code><code>CRITICAL</code>"},
fields: {label: "{{.Fields}}", text: "Map of fields. Use <code>&#123;&#123; index .Fields &quot;key&quot; &#125;&#125;</code> to get a specific field value"},
time: {label: "{{.Time}}", text: "The time of the point that triggered the event"},
};

2
ui/src/shared/constants/index.js
View File

@ -466,4 +466,4 @@ export const DEFAULT_LINE_COLORS = [
export const STROKE_WIDTH = {
heavy: 3.5,
light: 1.5,
};
};

2
ui/src/style/pages/kapacitor.scss
View File

@ -389,7 +389,7 @@ div.qeditor.kapacitor-metric-selector {
> p {
margin-right: $kap-padding-sm !important;
}
}
}
.alert-message--formatting {
padding: ($kap-padding-sm - 2px) $kap-padding-lg;