Display all alert-rules regardless of origin

Alert rules can be generated by Chronograf or manually
by the user outide of the Chronograf UI.
pull/10616/head
Andrew Watkins 2017-05-05 11:23:41 -07:00
parent 92bd5d10b4
commit ff65bea7a7
1 changed files with 75 additions and 67 deletions

View File

@ -1,8 +1,7 @@
import React, {PropTypes} from 'react' import React, {PropTypes} from 'react'
import {Link} from 'react-router' import {Link} from 'react-router'
const KapacitorRulesTable = ({source, rules, onDelete, onChangeRuleStatus}) => { const KapacitorRulesTable = ({rules, onDelete, onChangeRuleStatus}) => (
return (
<div className="panel-body"> <div className="panel-body">
<table className="table v-center"> <table className="table v-center">
<thead> <thead>
@ -21,7 +20,6 @@ const KapacitorRulesTable = ({source, rules, onDelete, onChangeRuleStatus}) => {
<RuleRow <RuleRow
key={rule.id} key={rule.id}
rule={rule} rule={rule}
source={source}
onDelete={onDelete} onDelete={onDelete}
onChangeRuleStatus={onChangeRuleStatus} onChangeRuleStatus={onChangeRuleStatus}
/> />
@ -30,16 +28,12 @@ const KapacitorRulesTable = ({source, rules, onDelete, onChangeRuleStatus}) => {
</tbody> </tbody>
</table> </table>
</div> </div>
) )
}
const RuleRow = ({rule, source, onDelete, onChangeRuleStatus}) => { const RuleRow = ({rule, onDelete, onChangeRuleStatus}) => (
return (
<tr key={rule.id}> <tr key={rule.id}>
<td className="monotype"> <td className="monotype">
<Link to={`/sources/${source.id}/alert-rules/${rule.id}`}> <RuleTitle rule={rule} />
{rule.name}
</Link>
</td> </td>
<td className="monotype">{rule.trigger}</td> <td className="monotype">{rule.trigger}</td>
<td className="monotype">{rule.message}</td> <td className="monotype">{rule.message}</td>
@ -57,21 +51,25 @@ const RuleRow = ({rule, source, onDelete, onChangeRuleStatus}) => {
</div> </div>
</td> </td>
<td className="text-right"> <td className="text-right">
<button <button className="btn btn-danger btn-xs" onClick={() => onDelete(rule)}>
className="btn btn-danger btn-xs"
onClick={() => onDelete(rule)}
>
Delete Delete
</button> </button>
</td> </td>
</tr> </tr>
) )
const RuleTitle = ({rule: {name, links, query}}) => {
// no queryConfig means the rule was manually created outside of Chronograf
if (!query) {
return <i>{name}</i>
}
return <Link to={links.self}>{name}</Link>
} }
const {arrayOf, func, shape} = PropTypes const {arrayOf, func, shape, string} = PropTypes
KapacitorRulesTable.propTypes = { KapacitorRulesTable.propTypes = {
source: shape(),
rules: arrayOf(shape()), rules: arrayOf(shape()),
onChangeRuleStatus: func, onChangeRuleStatus: func,
onDelete: func, onDelete: func,
@ -84,4 +82,14 @@ RuleRow.propTypes = {
onDelete: func, onDelete: func,
} }
RuleTitle.propTypes = {
rule: shape({
name: string.isRequired,
query: shape(),
links: shape({
self: string.isRequired,
}).isRequired,
}),
}
export default KapacitorRulesTable export default KapacitorRulesTable