chronograf/ui/stories/kapacitor.js

94 lines
2.3 KiB
JavaScript

import React from 'react'
import {storiesOf, action, linkTo} from '@kadira/storybook'
import {spyActions} from './shared'
// Stubs
import kapacitor from './stubs/kapacitor'
import source from './stubs/source'
import rule from './stubs/rule'
import query from './stubs/query'
import queryConfigs from './stubs/queryConfigs'
// Actions for Spies
import * as kapacitorActions from 'src/kapacitor/actions/view'
import * as queryActions from 'src/data_explorer/actions/view'
// Components
import KapacitorRule from 'src/kapacitor/components/KapacitorRule'
import ValuesSection from 'src/kapacitor/components/ValuesSection'
const valuesSection = (trigger, values) =>
<div className="rule-builder">
<ValuesSection
rule={rule({
trigger,
values,
})}
query={query()}
onChooseTrigger={action('chooseTrigger')}
onUpdateValues={action('updateRuleValues')}
/>
</div>
storiesOf('ValuesSection', module)
.add('Threshold', () =>
valuesSection('threshold', {
operator: 'less than',
rangeOperator: 'greater than',
value: '10',
rangeValue: '20',
})
)
.add('Threshold inside Range', () =>
valuesSection('threshold', {
operator: 'inside range',
rangeOperator: 'greater than',
value: '10',
rangeValue: '20',
})
)
// .add('Threshold outside of Range', () => (
// valuesSection('threshold', {
// "operator": "otuside of range",
// "rangeOperator": "less than",
// "value": "10",
// "rangeValue": "20",
// })
// ))
.add('Relative', () =>
valuesSection('relative', {
change: 'change',
operator: 'greater than',
shift: '1m',
value: '10',
})
)
.add('Deadman', () =>
valuesSection('deadman', {
period: '10m',
})
)
storiesOf('KapacitorRule', module).add('Threshold', () =>
<div className="chronograf-root">
<KapacitorRule
source={source()}
rule={rule({
trigger: 'threshold',
})}
query={query()}
queryConfigs={queryConfigs()}
kapacitor={kapacitor()}
queryActions={spyActions(queryActions)}
kapacitorActions={spyActions(kapacitorActions)}
addFlashMessage={action('addFlashMessage')}
enabledAlerts={['slack']}
isEditing={true}
router={{
push: action('route'),
}}
/>
</div>
)