From ae1c4484be57f70051714b388b80bcae7edb68b4 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Fri, 15 Jun 2018 16:40:34 -0700 Subject: [PATCH] Convert KapacitorRule tree to typescript --- ui/src/kapacitor/components/CodeData.js | 24 -- ui/src/kapacitor/components/CodeData.tsx | 20 + ui/src/kapacitor/components/DataSection.tsx | 2 +- .../components/{Deadman.js => Deadman.tsx} | 30 +- .../{KapacitorRule.js => KapacitorRule.tsx} | 342 ++++++++++-------- .../{NameSection.js => NameSection.tsx} | 60 ++- .../components/{Relative.js => Relative.tsx} | 42 +-- ui/src/kapacitor/components/RuleHandlers.tsx | 2 +- .../{RuleHeader.js => RuleHeader.tsx} | 25 +- ui/src/kapacitor/components/RuleHeaderSave.js | 39 -- .../kapacitor/components/RuleHeaderSave.tsx | 57 +++ .../{RuleMessage.js => RuleMessage.tsx} | 32 +- ...eTemplates.js => RuleMessageTemplates.tsx} | 29 +- ...RuleMessageText.js => RuleMessageText.tsx} | 19 +- ui/src/kapacitor/components/Threshold.js | 85 ----- ui/src/kapacitor/components/Threshold.tsx | 122 +++++++ .../{ValuesSection.js => ValuesSection.tsx} | 63 ++-- ...citorRulePage.js => KapacitorRulePage.tsx} | 98 ++--- ui/src/shared/components/Tabs.tsx | 6 +- ui/src/types/actions.ts | 4 + ui/src/types/kapacitor.ts | 3 +- 21 files changed, 614 insertions(+), 490 deletions(-) delete mode 100644 ui/src/kapacitor/components/CodeData.js create mode 100644 ui/src/kapacitor/components/CodeData.tsx rename ui/src/kapacitor/components/{Deadman.js => Deadman.tsx} (58%) rename ui/src/kapacitor/components/{KapacitorRule.js => KapacitorRule.tsx} (74%) rename ui/src/kapacitor/components/{NameSection.js => NameSection.tsx} (54%) rename ui/src/kapacitor/components/{Relative.js => Relative.tsx} (73%) rename ui/src/kapacitor/components/{RuleHeader.js => RuleHeader.tsx} (72%) delete mode 100644 ui/src/kapacitor/components/RuleHeaderSave.js create mode 100644 ui/src/kapacitor/components/RuleHeaderSave.tsx rename ui/src/kapacitor/components/{RuleMessage.js => RuleMessage.tsx} (71%) rename ui/src/kapacitor/components/{RuleMessageTemplates.js => RuleMessageTemplates.tsx} (77%) rename ui/src/kapacitor/components/{RuleMessageText.js => RuleMessageText.tsx} (59%) delete mode 100644 ui/src/kapacitor/components/Threshold.js create mode 100644 ui/src/kapacitor/components/Threshold.tsx rename ui/src/kapacitor/components/{ValuesSection.js => ValuesSection.tsx} (75%) rename ui/src/kapacitor/containers/{KapacitorRulePage.js => KapacitorRulePage.tsx} (64%) diff --git a/ui/src/kapacitor/components/CodeData.js b/ui/src/kapacitor/components/CodeData.js deleted file mode 100644 index 081c75aff7..0000000000 --- a/ui/src/kapacitor/components/CodeData.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' - -const CodeData = ({onClickTemplate, template}) => ( - - {template.label} - -) - -const {func, shape, string} = PropTypes - -CodeData.propTypes = { - onClickTemplate: func, - template: shape({ - label: string, - text: string, - }), -} - -export default CodeData diff --git a/ui/src/kapacitor/components/CodeData.tsx b/ui/src/kapacitor/components/CodeData.tsx new file mode 100644 index 0000000000..3010196257 --- /dev/null +++ b/ui/src/kapacitor/components/CodeData.tsx @@ -0,0 +1,20 @@ +import React, {SFC} from 'react' + +import {RuleMessage} from 'src/types/kapacitor' + +interface Props { + onClickTemplate: () => void + template: RuleMessage +} + +const CodeData: SFC = ({onClickTemplate, template}) => ( + + {template.label} + +) + +export default CodeData diff --git a/ui/src/kapacitor/components/DataSection.tsx b/ui/src/kapacitor/components/DataSection.tsx index bda68cb211..2211341fd6 100644 --- a/ui/src/kapacitor/components/DataSection.tsx +++ b/ui/src/kapacitor/components/DataSection.tsx @@ -24,7 +24,7 @@ interface Props { query: QueryConfig isDeadman: boolean isKapacitorRule: boolean - onAddEvery: () => void + onAddEvery: (every?: string) => void timeRange: TimeRange } diff --git a/ui/src/kapacitor/components/Deadman.js b/ui/src/kapacitor/components/Deadman.tsx similarity index 58% rename from ui/src/kapacitor/components/Deadman.js rename to ui/src/kapacitor/components/Deadman.tsx index b5419caf21..d5f56eaef2 100644 --- a/ui/src/kapacitor/components/Deadman.js +++ b/ui/src/kapacitor/components/Deadman.tsx @@ -1,13 +1,24 @@ -import React from 'react' -import PropTypes from 'prop-types' +import React, {SFC} from 'react' + import {PERIODS} from 'src/kapacitor/constants' -import Dropdown from 'shared/components/Dropdown' +import Dropdown from 'src/shared/components/Dropdown' + +import {AlertRule} from 'src/types' const periods = PERIODS.map(text => { return {text} }) -const Deadman = ({rule, onChange}) => ( +interface Item { + text: string +} + +interface Props { + rule: AlertRule + onChange: (item: Item) => void +} + +const Deadman: SFC = ({rule, onChange}) => (

Send Alert if Data is missing for

(
) -const {shape, string, func} = PropTypes - -Deadman.propTypes = { - rule: shape({ - values: shape({ - period: string, - }), - }), - onChange: func.isRequired, -} - export default Deadman diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.tsx similarity index 74% rename from ui/src/kapacitor/components/KapacitorRule.js rename to ui/src/kapacitor/components/KapacitorRule.tsx index 172a15bcea..7daf037763 100644 --- a/ui/src/kapacitor/components/KapacitorRule.js +++ b/ui/src/kapacitor/components/KapacitorRule.tsx @@ -1,20 +1,20 @@ -import React, {Component} from 'react' -import PropTypes from 'prop-types' +import React, {Component, ChangeEvent} from 'react' import {connect} from 'react-redux' import {bindActionCreators} from 'redux' +import {InjectedRouter} from 'react-router' import NameSection from 'src/kapacitor/components/NameSection' import ValuesSection from 'src/kapacitor/components/ValuesSection' import RuleHeader from 'src/kapacitor/components/RuleHeader' import RuleHandlers from 'src/kapacitor/components/RuleHandlers' import RuleMessage from 'src/kapacitor/components/RuleMessage' -import FancyScrollbar from 'shared/components/FancyScrollbar' +import FancyScrollbar from 'src/shared/components/FancyScrollbar' import {createRule, editRule} from 'src/kapacitor/apis' -import buildInfluxQLQuery from 'utils/influxql' -import {timeRanges} from 'shared/data/timeRanges' +import buildInfluxQLQuery from 'src/utils/influxql' +import {timeRanges} from 'src/shared/data/timeRanges' import {DEFAULT_RULE_ID} from 'src/kapacitor/constants' -import {notify as notifyAction} from 'shared/actions/notifications' +import {notify as notifyAction} from 'src/shared/actions/notifications' import { notifyAlertRuleCreated, @@ -24,11 +24,52 @@ import { notifyAlertRuleRequiresQuery, notifyAlertRuleRequiresConditionValue, notifyAlertRuleDeadmanInvalid, -} from 'shared/copy/notifications' +} from 'src/shared/copy/notifications' import {ErrorHandling} from 'src/shared/decorators/errors' +import { + Source, + AlertRule, + Notification, + Kapacitor, + QueryConfig, + TimeRange, +} from 'src/types' +import {Handler} from 'src/types/kapacitor' +import { + KapacitorQueryConfigActions, + KapacitorRuleActions, +} from 'src/types/actions' + +interface Props { + source: Source + rule: AlertRule + query: QueryConfig + queryConfigs: QueryConfig[] + queryConfigActions: KapacitorQueryConfigActions + ruleActions: KapacitorRuleActions + notify: (message: Notification) => void + ruleID: string + handlersFromConfig: Handler[] + router: InjectedRouter + kapacitor: Kapacitor + configLink: string +} + +interface Item { + text: string +} + +interface TypeItem extends Item { + type: string +} + +interface State { + timeRange: TimeRange +} + @ErrorHandling -class KapacitorRule extends Component { +class KapacitorRule extends Component { constructor(props) { super(props) this.state = { @@ -36,137 +77,7 @@ class KapacitorRule extends Component { } } - handleChooseTimeRange = ({lower}) => { - const timeRange = timeRanges.find(range => range.lower === lower) - this.setState({timeRange}) - } - - handleCreate = pathname => { - const {notify, queryConfigs, rule, source, router, kapacitor} = this.props - - const newRule = Object.assign({}, rule, { - query: queryConfigs[rule.queryID], - }) - delete newRule.queryID - - createRule(kapacitor, newRule) - .then(() => { - router.push(pathname || `/sources/${source.id}/alert-rules`) - notify(notifyAlertRuleCreated(newRule.name)) - }) - .catch(e => { - notify(notifyAlertRuleCreateFailed(newRule.name, e.data.message)) - }) - } - - handleEdit = pathname => { - const {notify, queryConfigs, rule, router, source} = this.props - const updatedRule = Object.assign({}, rule, { - query: queryConfigs[rule.queryID], - }) - - editRule(updatedRule) - .then(() => { - router.push(pathname || `/sources/${source.id}/alert-rules`) - notify(notifyAlertRuleUpdated(rule.name)) - }) - .catch(e => { - notify(notifyAlertRuleUpdateFailed(rule.name, e.data.message)) - }) - } - - handleSave = () => { - const {rule} = this.props - if (rule.id === DEFAULT_RULE_ID) { - this.handleCreate() - } else { - this.handleEdit() - } - } - - handleSaveToConfig = configName => () => { - const {rule, configLink, router} = this.props - const pathname = `${configLink}#${configName}` - if (this.validationError()) { - router.push({ - pathname, - }) - return - } - if (rule.id === DEFAULT_RULE_ID) { - this.handleCreate(pathname) - } else { - this.handleEdit(pathname) - } - } - - handleAddEvery = frequency => { - const { - rule: {id: ruleID}, - ruleActions: {addEvery}, - } = this.props - addEvery(ruleID, frequency) - } - - handleRemoveEvery = () => { - const { - rule: {id: ruleID}, - ruleActions: {removeEvery}, - } = this.props - removeEvery(ruleID) - } - - validationError = () => { - const {rule, query} = this.props - if (rule.trigger === 'deadman') { - return this.deadmanValidation() - } - - if (!buildInfluxQLQuery({}, query)) { - return notifyAlertRuleRequiresQuery() - } - - if (!rule.values.value) { - return notifyAlertRuleRequiresConditionValue() - } - - return '' - } - - deadmanValidation = () => { - const {query} = this.props - if (query && (!query.database || !query.measurement)) { - return notifyAlertRuleDeadmanInvalid() - } - - return '' - } - - handleRuleTypeDropdownChange = ({type, text}) => { - const {ruleActions, rule} = this.props - ruleActions.updateRuleValues(rule.id, rule.trigger, { - ...this.props.rule.values, - [type]: text, - }) - } - - handleRuleTypeInputChange = e => { - const {ruleActions, rule} = this.props - const {lower, upper} = e.target.form - - ruleActions.updateRuleValues(rule.id, rule.trigger, { - ...this.props.rule.values, - value: lower.value, - rangeValue: upper ? upper.value : '', - }) - } - - handleDeadmanChange = ({text}) => { - const {ruleActions, rule} = this.props - ruleActions.updateRuleValues(rule.id, rule.trigger, {period: text}) - } - - render() { + public render() { const { rule, source, @@ -183,7 +94,7 @@ class KapacitorRule extends Component {
@@ -215,7 +126,7 @@ class KapacitorRule extends Component { ruleActions={ruleActions} handlersFromConfig={handlersFromConfig} onGoToConfig={this.handleSaveToConfig} - validationError={this.validationError()} + validationError={this.validationError} />
@@ -226,27 +137,138 @@ class KapacitorRule extends Component { ) } -} -const {arrayOf, func, shape, string} = PropTypes + private handleChooseTimeRange = ({lower}: TimeRange) => { + const timeRange = timeRanges.find(range => range.lower === lower) + this.setState({timeRange}) + } -KapacitorRule.propTypes = { - source: shape({}).isRequired, - rule: shape({ - values: shape({}), - }).isRequired, - query: shape({}).isRequired, - queryConfigs: shape({}).isRequired, - queryConfigActions: shape({}).isRequired, - ruleActions: shape({}).isRequired, - notify: func.isRequired, - ruleID: string.isRequired, - handlersFromConfig: arrayOf(shape({})).isRequired, - router: shape({ - push: func.isRequired, - }).isRequired, - kapacitor: shape({}).isRequired, - configLink: string.isRequired, + private handleCreate = (pathname?: string) => { + const {notify, queryConfigs, rule, source, router, kapacitor} = this.props + + const newRule = Object.assign({}, rule, { + query: queryConfigs[rule.queryID], + }) + delete newRule.queryID + + createRule(kapacitor, newRule) + .then(() => { + router.push(pathname || `/sources/${source.id}/alert-rules`) + notify(notifyAlertRuleCreated(newRule.name)) + }) + .catch(e => { + notify(notifyAlertRuleCreateFailed(newRule.name, e.data.message)) + }) + } + + private handleEdit = (pathname?: string) => { + const {notify, queryConfigs, rule, router, source} = this.props + const updatedRule = Object.assign({}, rule, { + query: queryConfigs[rule.queryID], + }) + + editRule(updatedRule) + .then(() => { + router.push(pathname || `/sources/${source.id}/alert-rules`) + notify(notifyAlertRuleUpdated(rule.name)) + }) + .catch(e => { + notify(notifyAlertRuleUpdateFailed(rule.name, e.data.message)) + }) + } + + private handleSave = () => { + const {rule} = this.props + if (rule.id === DEFAULT_RULE_ID) { + this.handleCreate() + } else { + this.handleEdit() + } + } + + private handleSaveToConfig = (configName: string) => () => { + const {rule, configLink, router} = this.props + const pathname = `${configLink}#${configName}` + + if (this.validationError) { + router.push({ + pathname, + }) + return + } + + if (rule.id === DEFAULT_RULE_ID) { + this.handleCreate(pathname) + } else { + this.handleEdit(pathname) + } + } + + private handleAddEvery = (frequency: string) => { + const { + rule: {id: ruleID}, + ruleActions: {addEvery}, + } = this.props + addEvery(ruleID, frequency) + } + + private handleRemoveEvery = () => { + const { + rule: {id: ruleID}, + ruleActions: {removeEvery}, + } = this.props + removeEvery(ruleID) + } + + private get validationError(): string { + const {rule, query} = this.props + if (rule.trigger === 'deadman') { + return this.deadmanValidation() + } + + if (!buildInfluxQLQuery({lower: ''}, query)) { + return notifyAlertRuleRequiresQuery() + } + + if (!rule.values.value) { + return notifyAlertRuleRequiresConditionValue() + } + + return '' + } + + private deadmanValidation = () => { + const {query} = this.props + if (query && (!query.database || !query.measurement)) { + return notifyAlertRuleDeadmanInvalid() + } + + return '' + } + + private handleRuleTypeDropdownChange = ({type, text}: TypeItem) => { + const {ruleActions, rule} = this.props + ruleActions.updateRuleValues(rule.id, rule.trigger, { + ...this.props.rule.values, + [type]: text, + }) + } + + private handleRuleTypeInputChange = (e: ChangeEvent) => { + const {ruleActions, rule} = this.props + const {lower, upper} = e.target.form + + ruleActions.updateRuleValues(rule.id, rule.trigger, { + ...this.props.rule.values, + value: lower.value, + rangeValue: upper ? upper.value : '', + }) + } + + private handleDeadmanChange = ({text}: Item) => { + const {ruleActions, rule} = this.props + ruleActions.updateRuleValues(rule.id, rule.trigger, {period: text}) + } } const mapDispatchToProps = dispatch => ({ diff --git a/ui/src/kapacitor/components/NameSection.js b/ui/src/kapacitor/components/NameSection.tsx similarity index 54% rename from ui/src/kapacitor/components/NameSection.js rename to ui/src/kapacitor/components/NameSection.tsx index c4491e9a6e..c468515c93 100644 --- a/ui/src/kapacitor/components/NameSection.js +++ b/ui/src/kapacitor/components/NameSection.tsx @@ -1,11 +1,25 @@ -import React, {Component} from 'react' -import PropTypes from 'prop-types' +import React, {Component, ChangeEvent, KeyboardEvent} from 'react' + import {DEFAULT_RULE_ID} from 'src/kapacitor/constants' import {ErrorHandling} from 'src/shared/decorators/errors' +import {AlertRule} from 'src/types' + +interface Props { + defaultName: string + onRuleRename: (id: string, name: string) => void + rule: AlertRule +} + +interface State { + reset: boolean +} + @ErrorHandling -class NameSection extends Component { - constructor(props) { +class NameSection extends Component { + private inputRef: HTMLInputElement + + constructor(props: Props) { super(props) this.state = { @@ -13,14 +27,22 @@ class NameSection extends Component { } } - handleInputBlur = reset => e => { + public handleInputBlur = (reset: boolean) => ( + e: ChangeEvent + ): void => { const {defaultName, onRuleRename, rule} = this.props - onRuleRename(rule.id, reset ? defaultName : e.target.value) + let ruleName: string + if (reset) { + ruleName = defaultName + } else { + ruleName = e.target.value + } + onRuleRename(rule.id, ruleName) this.setState({reset: false}) } - handleKeyDown = e => { + public handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'Enter') { this.inputRef.blur() } @@ -30,15 +52,13 @@ class NameSection extends Component { } } - render() { - const {rule, defaultName} = this.props + public render() { + const {defaultName} = this.props const {reset} = this.state return (
-

- {rule.id === DEFAULT_RULE_ID ? 'Name this Alert Rule' : 'Name'} -

+

{this.header}

) } -} -const {func, string, shape} = PropTypes + private get header() { + const { + rule: {id}, + } = this.props -NameSection.propTypes = { - defaultName: string.isRequired, - onRuleRename: func.isRequired, - rule: shape({}).isRequired, + if (id === DEFAULT_RULE_ID) { + return 'Name this Alert Rule' + } + + return 'Name' + } } export default NameSection diff --git a/ui/src/kapacitor/components/Relative.js b/ui/src/kapacitor/components/Relative.tsx similarity index 73% rename from ui/src/kapacitor/components/Relative.js rename to ui/src/kapacitor/components/Relative.tsx index 6b483f01ee..c6cb23cbf1 100644 --- a/ui/src/kapacitor/components/Relative.js +++ b/ui/src/kapacitor/components/Relative.tsx @@ -1,14 +1,27 @@ -import React from 'react' -import PropTypes from 'prop-types' -import {CHANGES, RELATIVE_OPERATORS, SHIFTS} from 'src/kapacitor/constants' -import Dropdown from 'shared/components/Dropdown' +import React, {SFC, ChangeEvent} from 'react' -const mapToItems = (arr, type) => arr.map(text => ({text, type})) +import {CHANGES, RELATIVE_OPERATORS, SHIFTS} from 'src/kapacitor/constants' +import Dropdown from 'src/shared/components/Dropdown' + +import {AlertRule} from 'src/types' + +const mapToItems = (arr: string[], type: string) => + arr.map(text => ({text, type})) const changes = mapToItems(CHANGES, 'change') const shifts = mapToItems(SHIFTS, 'shift') const operators = mapToItems(RELATIVE_OPERATORS, 'operator') -const Relative = ({ +interface TypeItem { + type: string + text: string +} +interface Props { + onRuleTypeInputChange: (e: ChangeEvent) => void + onDropdownChange: (item: TypeItem) => void + rule: AlertRule +} + +const Relative: SFC = ({ onRuleTypeInputChange, onDropdownChange, rule: { @@ -46,7 +59,7 @@ const Relative = ({ style={{width: '160px', marginLeft: '6px'}} type="text" name="lower" - spellCheck="false" + spellCheck={false} value={value} onChange={onRuleTypeInputChange} required={true} @@ -56,19 +69,4 @@ const Relative = ({
) -const {shape, string, func} = PropTypes - -Relative.propTypes = { - onRuleTypeInputChange: func.isRequired, - onDropdownChange: func.isRequired, - rule: shape({ - values: shape({ - change: string, - shift: string, - operator: string, - value: string, - }), - }), -} - export default Relative diff --git a/ui/src/kapacitor/components/RuleHandlers.tsx b/ui/src/kapacitor/components/RuleHandlers.tsx index 2f73960453..fba7a456ca 100644 --- a/ui/src/kapacitor/components/RuleHandlers.tsx +++ b/ui/src/kapacitor/components/RuleHandlers.tsx @@ -26,7 +26,7 @@ interface Props { rule: AlertRule ruleActions: RuleActions handlersFromConfig: Handler[] - onGoToConfig: () => void + onGoToConfig: (configName: string) => void validationError: string } diff --git a/ui/src/kapacitor/components/RuleHeader.js b/ui/src/kapacitor/components/RuleHeader.tsx similarity index 72% rename from ui/src/kapacitor/components/RuleHeader.js rename to ui/src/kapacitor/components/RuleHeader.tsx index 9ecf4c2eba..16a9d913dc 100644 --- a/ui/src/kapacitor/components/RuleHeader.js +++ b/ui/src/kapacitor/components/RuleHeader.tsx @@ -1,15 +1,24 @@ import React, {Component} from 'react' -import PropTypes from 'prop-types' + import RuleHeaderSave from 'src/kapacitor/components/RuleHeaderSave' + import {ErrorHandling} from 'src/shared/decorators/errors' +import {Source} from 'src/types' + +interface Props { + source: Source + onSave: () => void + validationError: string +} + @ErrorHandling -class RuleHeader extends Component { - constructor(props) { +class RuleHeader extends Component { + constructor(props: Props) { super(props) } - render() { + public render() { const {source, onSave, validationError} = this.props return ( @@ -29,12 +38,4 @@ class RuleHeader extends Component { } } -const {func, shape, string} = PropTypes - -RuleHeader.propTypes = { - source: shape({}).isRequired, - onSave: func.isRequired, - validationError: string.isRequired, -} - export default RuleHeader diff --git a/ui/src/kapacitor/components/RuleHeaderSave.js b/ui/src/kapacitor/components/RuleHeaderSave.js deleted file mode 100644 index 5516eeec0e..0000000000 --- a/ui/src/kapacitor/components/RuleHeaderSave.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import ReactTooltip from 'react-tooltip' -import SourceIndicator from 'shared/components/SourceIndicator' - -const RuleHeaderSave = ({onSave, validationError}) => ( -
- - {validationError ? ( - - ) : ( - - )} - -
-) - -const {func, string} = PropTypes - -RuleHeaderSave.propTypes = { - onSave: func.isRequired, - validationError: string.isRequired, -} - -export default RuleHeaderSave diff --git a/ui/src/kapacitor/components/RuleHeaderSave.tsx b/ui/src/kapacitor/components/RuleHeaderSave.tsx new file mode 100644 index 0000000000..b7036d1d56 --- /dev/null +++ b/ui/src/kapacitor/components/RuleHeaderSave.tsx @@ -0,0 +1,57 @@ +import React, {Component} from 'react' + +import ReactTooltip from 'react-tooltip' +import SourceIndicator from 'src/shared/components/SourceIndicator' + +import {ErrorHandling} from 'src/shared/decorators/errors' + +import {Source} from 'src/types' + +interface Props { + onSave: () => void + validationError: string + source: Source +} + +@ErrorHandling +class RuleHeaderSave extends Component { + public render() { + const {source} = this.props + return ( +
+ + {this.saveRuleButton} + +
+ ) + } + + private get saveRuleButton() { + const {onSave, validationError} = this.props + if (validationError) { + return ( + + ) + } else { + return ( + + ) + } + } +} + +export default RuleHeaderSave diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.tsx similarity index 71% rename from ui/src/kapacitor/components/RuleMessage.js rename to ui/src/kapacitor/components/RuleMessage.tsx index 1d871f00da..230e987a57 100644 --- a/ui/src/kapacitor/components/RuleMessage.js +++ b/ui/src/kapacitor/components/RuleMessage.tsx @@ -1,22 +1,24 @@ -import React, {Component} from 'react' -import PropTypes from 'prop-types' +import React, {Component, ChangeEvent} from 'react' import RuleMessageText from 'src/kapacitor/components/RuleMessageText' import RuleMessageTemplates from 'src/kapacitor/components/RuleMessageTemplates' import {ErrorHandling} from 'src/shared/decorators/errors' +import {AlertRule} from 'src/types' +import {KapacitorRuleActions} from 'src/types/actions' + +interface Props { + rule: AlertRule + ruleActions: KapacitorRuleActions +} + @ErrorHandling -class RuleMessage extends Component { +class RuleMessage extends Component { constructor(props) { super(props) } - handleChangeMessage = e => { - const {ruleActions, rule} = this.props - ruleActions.updateMessage(rule.id, e.target.value) - } - - render() { + public render() { const {rule, ruleActions} = this.props return ( @@ -35,15 +37,11 @@ class RuleMessage extends Component {
) } -} -const {func, shape} = PropTypes - -RuleMessage.propTypes = { - rule: shape().isRequired, - ruleActions: shape({ - updateMessage: func.isRequired, - }).isRequired, + private handleChangeMessage = (e: ChangeEvent) => { + const {ruleActions, rule} = this.props + ruleActions.updateMessage(rule.id, e.target.value) + } } export default RuleMessage diff --git a/ui/src/kapacitor/components/RuleMessageTemplates.js b/ui/src/kapacitor/components/RuleMessageTemplates.tsx similarity index 77% rename from ui/src/kapacitor/components/RuleMessageTemplates.js rename to ui/src/kapacitor/components/RuleMessageTemplates.tsx index 5f6c1a663d..840ae73d83 100644 --- a/ui/src/kapacitor/components/RuleMessageTemplates.js +++ b/ui/src/kapacitor/components/RuleMessageTemplates.tsx @@ -1,5 +1,5 @@ import React, {Component} from 'react' -import PropTypes from 'prop-types' + import _ from 'lodash' import ReactTooltip from 'react-tooltip' @@ -8,19 +8,22 @@ import CodeData from 'src/kapacitor/components/CodeData' import {RULE_MESSAGE_TEMPLATES} from 'src/kapacitor/constants' import {ErrorHandling} from 'src/shared/decorators/errors' +import {RuleMessage} from 'src/types/kapacitor' +import {AlertRule} from 'src/types' + +interface Props { + rule: AlertRule + updateMessage: (id: string, message: string) => void +} + // needs to be React Component for CodeData click handler to work @ErrorHandling -class RuleMessageTemplates extends Component { +class RuleMessageTemplates extends Component { constructor(props) { super(props) } - handleClickTemplate = template => () => { - const {updateMessage, rule} = this.props - updateMessage(rule.id, `${rule.message} ${template.label}`) - } - - render() { + public render() { return (

Templates:

@@ -41,13 +44,11 @@ class RuleMessageTemplates extends Component {
) } -} -const {func, shape} = PropTypes - -RuleMessageTemplates.propTypes = { - rule: shape().isRequired, - updateMessage: func.isRequired, + private handleClickTemplate = (template: RuleMessage) => () => { + const {updateMessage, rule} = this.props + updateMessage(rule.id, `${rule.message} ${template.label}`) + } } export default RuleMessageTemplates diff --git a/ui/src/kapacitor/components/RuleMessageText.js b/ui/src/kapacitor/components/RuleMessageText.tsx similarity index 59% rename from ui/src/kapacitor/components/RuleMessageText.js rename to ui/src/kapacitor/components/RuleMessageText.tsx index cc3dfb9b04..f7e0a787f2 100644 --- a/ui/src/kapacitor/components/RuleMessageText.js +++ b/ui/src/kapacitor/components/RuleMessageText.tsx @@ -1,7 +1,13 @@ -import React from 'react' -import PropTypes from 'prop-types' +import React, {SFC, ChangeEvent} from 'react' -const RuleMessageText = ({rule, updateMessage}) => ( +import {AlertRule} from 'src/types' + +interface Props { + rule: AlertRule + updateMessage: (e: ChangeEvent) => void +} + +const RuleMessageText: SFC = ({rule, updateMessage}) => (