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

WIP Partially transform Values Section to an SFC

pull/1971/head
deniz kusefoglu 2017-09-08 10:36:35 -07:00
parent 4b28c6f383
commit 4e1f19f3a7
1 changed files with 95 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
ui/src/kapacitor/components/ValuesSection.js
View File

@ -12,113 +12,104 @@ import {Tab, TabList, TabPanels, TabPanel, Tabs} from 'shared/components/Tabs'
const TABS = ['Threshold', 'Relative', 'Deadman']
export const ValuesSection = React.createClass({
propTypes: {
rule: PropTypes.shape({
id: PropTypes.string,
}).isRequired,
onChooseTrigger: PropTypes.func.isRequired,
onUpdateValues: PropTypes.func.isRequired,
query: PropTypes.shape({}).isRequired,
onDeadmanChange: PropTypes.func.isRequired,
onRuleTypeDropdownChange: PropTypes.func.isRequired,
onRuleTypeInputChange: PropTypes.func.isRequired,
onAddEvery: PropTypes.func.isRequired,
onRemoveEvery: PropTypes.func.isRequired,
timeRange: PropTypes.shape({}).isRequired,
queryConfigActions: PropTypes.shape({}).isRequired,
source: PropTypes.shape({}).isRequired,
},
const handleChooseTrigger = (rule, onChooseTrigger) => {
if (TABS[triggerIndex] === rule.trigger) {
return
}
return onChooseTrigger(rule.id, TABS[triggerIndex])
}
const initialIndex = rule => TABS.indexOf(_.startCase(rule.trigger))
const isDeadman = rule => rule.trigger === 'deadman'
render() {
const {
rule,
query,
source,
timeRange,
onAddEvery,
onRemoveEvery,
onDeadmanChange,
queryConfigActions,
onRuleTypeInputChange,
onRuleTypeDropdownChange,
} = this.props
const initialIndex = TABS.indexOf(_.startCase(rule.trigger))
const isDeadman = rule.trigger === 'deadman'
return (
<div className="rule-section">
<h3 className="rule-section--heading">Alert Type</h3>
<div className="rule-section--body">
<Tabs initialIndex={initialIndex} onSelect={this.handleChooseTrigger}>
<TabList isKapacitorTabs="true">
{TABS.map(tab =>
<Tab key={tab} isKapacitorTab={true}>
{tab}
</Tab>
)}
</TabList>
<div>
<h3 className="rule-builder--sub-header">Time Series</h3>
<DataSection
query={query}
timeRange={timeRange}
isKapacitorRule={true}
actions={queryConfigActions}
onAddEvery={onAddEvery}
onRemoveEvery={onRemoveEvery}
isDeadman={isDeadman}
/>
</div>
<h3 className="rule-builder--sub-header">Rule Conditions</h3>
<TabPanels>
<TabPanel>
<Threshold
rule={rule}
query={query}
onDropdownChange={onRuleTypeDropdownChange}
onRuleTypeInputChange={onRuleTypeInputChange}
/>
</TabPanel>
<TabPanel>
<Relative
rule={rule}
onDropdownChange={onRuleTypeDropdownChange}
onRuleTypeInputChange={onRuleTypeInputChange}
/>
</TabPanel>
<TabPanel>
<Deadman rule={rule} onChange={onDeadmanChange} />
</TabPanel>
</TabPanels>
{isDeadman
? null
: <RuleGraph
rule={rule}
query={query}
source={source}
timeRange={timeRange}
/>}
</Tabs>
const ValuesSection = ({
rule,
query,
source,
timeRange,
onAddEvery,
onRemoveEvery,
onDeadmanChange,
queryConfigActions,
onRuleTypeInputChange,
onRuleTypeDropdownChange,
onChooseTrigger,
}) =>
<div className="rule-section">
<h3 className="rule-section--heading">Alert Type</h3>
<div className="rule-section--body">
<Tabs
initialIndex={initialIndex(rule)}
onSelect={handleChooseTrigger(rule, onChooseTrigger)}
>
<TabList isKapacitorTabs="true">
{TABS.map(tab =>
<Tab key={tab} isKapacitorTab={true}>
{tab}
</Tab>
)}
</TabList>
<div>
<h3 className="rule-builder--sub-header">Time Series</h3>
<DataSection
query={query}
timeRange={timeRange}
isKapacitorRule={true}
actions={queryConfigActions}
onAddEvery={onAddEvery}
onRemoveEvery={onRemoveEvery}
isDeadman={isDeadman(rule)}
/>
</div>
</div>
)
},
<h3 className="rule-builder--sub-header">Rule Conditions</h3>
<TabPanels>
<TabPanel>
<Threshold
rule={rule}
query={query}
onDropdownChange={onRuleTypeDropdownChange}
onRuleTypeInputChange={onRuleTypeInputChange}
/>
</TabPanel>
<TabPanel>
<Relative
rule={rule}
onDropdownChange={onRuleTypeDropdownChange}
onRuleTypeInputChange={onRuleTypeInputChange}
/>
</TabPanel>
<TabPanel>
<Deadman rule={rule} onChange={onDeadmanChange} />
</TabPanel>
</TabPanels>
{isDeadman(rule)
? null
: <RuleGraph
rule={rule}
query={query}
source={source}
timeRange={timeRange}
/>}
</Tabs>
</div>
</div>
handleChooseTrigger(triggerIndex) {
const {rule, onChooseTrigger} = this.props
if (TABS[triggerIndex] === rule.trigger) {
return
}
const {shape, string, func} = PropTypes
onChooseTrigger(rule.id, TABS[triggerIndex])
},
handleValuesChange(values) {
const {onUpdateValues, rule} = this.props
onUpdateValues(rule.id, rule.trigger, values)
},
})
ValuesSection.propTypes = {
rule: shape({
id: string,
}).isRequired,
onChooseTrigger: func.isRequired,
onUpdateValues: func.isRequired,
query: shape({}).isRequired,
onDeadmanChange: func.isRequired,
onRuleTypeDropdownChange: func.isRequired,
onRuleTypeInputChange: func.isRequired,
onAddEvery: func.isRequired,
onRemoveEvery: func.isRequired,
timeRange: shape({}).isRequired,
queryConfigActions: shape({}).isRequired,
source: shape({}).isRequired,
}
export default ValuesSection