+
+
Connection Details
+
-
- Kapacitor is used as the monitoring and alerting agent.
- This page will let you configure which Kapacitor to use and
- set up alert end points like email, Slack, and others.
-
-
-
Connect Kapacitor to Source
-
{source.url}
-
)
- },
+ }
// TODO: move these to another page. they dont belong on this page
renderAlertOutputs() {
const {exists, kapacitor, addFlashMessage, source} = this.props
if (exists) {
- return
+ return
}
return (
+
+
Configure Alert Endpoints
+
-
Configure Alert Endpoints
Set your Kapacitor connection info to configure alerting endpoints.
)
- },
-})
+ }
+}
+
+const {
+ func,
+ shape,
+ string,
+ bool,
+} = PropTypes
+
+KapacitorForm.propTypes = {
+ onSubmit: func.isRequired,
+ onInputChange: func.isRequired,
+ onReset: func.isRequired,
+ kapacitor: shape({
+ url: string.isRequired,
+ name: string.isRequired,
+ username: string,
+ password: string,
+ }).isRequired,
+ source: shape({}).isRequired,
+ addFlashMessage: func.isRequired,
+ exists: bool.isRequired,
+}
export default KapacitorForm
diff --git a/ui/src/kapacitor/components/PagerDutyConfig.js b/ui/src/kapacitor/components/PagerDutyConfig.js
deleted file mode 100644
index d6e96b958..000000000
--- a/ui/src/kapacitor/components/PagerDutyConfig.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, {PropTypes} from 'react'
-
-const PagerDutyConfig = React.createClass({
- propTypes: {
- config: PropTypes.shape({
- options: PropTypes.shape({
- 'service-key': PropTypes.bool.isRequired,
- url: PropTypes.string.isRequired,
- }).isRequired,
- }).isRequired,
- onSave: PropTypes.func.isRequired,
- },
-
- handleSaveAlert(e) {
- e.preventDefault()
-
- const properties = {
- serviceKey: this.serviceKey.value,
- url: this.url.value,
- }
-
- this.props.onSave(properties)
- },
-
- render() {
- const {options} = this.props.config
- const {url} = options
- const serviceKey = options['service-key']
-
- return (
-
-
PagerDuty Alert
-
-
You can have alerts sent to PagerDuty by entering info below.
-
-
- )
- },
-})
-
-export default PagerDutyConfig
diff --git a/ui/src/kapacitor/components/SMTPConfig.js b/ui/src/kapacitor/components/SMTPConfig.js
deleted file mode 100644
index 2a61c5165..000000000
--- a/ui/src/kapacitor/components/SMTPConfig.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, {PropTypes} from 'react'
-
-const SMTPConfig = React.createClass({
- propTypes: {
- config: PropTypes.shape({
- options: PropTypes.shape({
- host: PropTypes.string,
- port: PropTypes.number,
- username: PropTypes.string,
- password: PropTypes.bool,
- from: PropTypes.string,
- }).isRequired,
- }).isRequired,
- onSave: PropTypes.func.isRequired,
- },
-
- handleSaveAlert(e) {
- e.preventDefault()
-
- const properties = {
- host: this.host.value,
- port: this.port.value,
- from: this.from.value,
- username: this.username.value,
- password: this.password.value,
- }
-
- this.props.onSave(properties)
- },
-
- render() {
- const {host, port, from, username, password} = this.props.config.options
-
- return (
-
-
SMTP Alert
-
-
You can have alerts sent to an email address by setting up an SMTP endpoint.
-
-
- )
- },
-})
-
-export default SMTPConfig
diff --git a/ui/src/kapacitor/components/SensuConfig.js b/ui/src/kapacitor/components/SensuConfig.js
deleted file mode 100644
index b3c9bad5e..000000000
--- a/ui/src/kapacitor/components/SensuConfig.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, {PropTypes} from 'react'
-
-const SensuConfig = React.createClass({
- propTypes: {
- config: PropTypes.shape({
- options: PropTypes.shape({
- source: PropTypes.string.isRequired,
- addr: PropTypes.string.isRequired,
- }).isRequired,
- }).isRequired,
- onSave: PropTypes.func.isRequired,
- },
-
- handleSaveAlert(e) {
- e.preventDefault()
-
- const properties = {
- source: this.source.value,
- addr: this.addr.value,
- }
-
- this.props.onSave(properties)
- },
-
- render() {
- const {source, addr} = this.props.config.options
-
- return (
-
-
Sensu Alert
-
-
Have alerts sent to Sensu.
-
-
- )
- },
-})
-
-export default SensuConfig
diff --git a/ui/src/kapacitor/components/SlackConfig.js b/ui/src/kapacitor/components/SlackConfig.js
deleted file mode 100644
index c6ab16eec..000000000
--- a/ui/src/kapacitor/components/SlackConfig.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, {PropTypes} from 'react'
-
-const SlackConfig = React.createClass({
- propTypes: {
- config: PropTypes.shape({
- options: PropTypes.shape({
- url: PropTypes.bool.isRequired,
- channel: PropTypes.string.isRequired,
- }).isRequired,
- }).isRequired,
- onSave: PropTypes.func.isRequired,
- onTest: PropTypes.func.isRequired,
- },
-
- getInitialState() {
- return {
- testEnabled: !!this.props.config.options.url,
- }
- },
-
- componentWillReceiveProps(nextProps) {
- this.setState({
- testEnabled: !!nextProps.config.options.url,
- })
- },
-
- handleSaveAlert(e) {
- e.preventDefault()
-
- const properties = {
- url: this.url.value,
- channel: this.channel.value,
- }
-
- this.props.onSave(properties)
- },
-
- handleTest(e) {
- e.preventDefault()
- this.props.onTest({
- url: this.url.value,
- channel: this.channel.value,
- })
- },
-
- render() {
- const {url, channel} = this.props.config.options
-
- return (
-
-
Slack Alert
-
-
Post alerts to a Slack channel.
-
-
- )
- },
-})
-
-export default SlackConfig
diff --git a/ui/src/kapacitor/components/TalkConfig.js b/ui/src/kapacitor/components/TalkConfig.js
deleted file mode 100644
index 05ff984c3..000000000
--- a/ui/src/kapacitor/components/TalkConfig.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, {PropTypes} from 'react'
-
-const {
- bool,
- string,
- shape,
- func,
-} = PropTypes
-
-const TalkConfig = React.createClass({
- propTypes: {
- config: shape({
- options: shape({
- url: bool.isRequired,
- author_name: string.isRequired,
- }).isRequired,
- }).isRequired,
- onSave: func.isRequired,
- },
-
- handleSaveAlert(e) {
- e.preventDefault()
-
- const properties = {
- url: this.url.value,
- author_name: this.author.value,
- }
-
- this.props.onSave(properties)
- },
-
- render() {
- const {url, author_name: author} = this.props.config.options
-
- return (
-
-
Talk Alert
-
-
Have alerts sent to Talk.
-
-
- )
- },
-})
-
-export default TalkConfig
diff --git a/ui/src/kapacitor/components/TelegramConfig.js b/ui/src/kapacitor/components/TelegramConfig.js
deleted file mode 100644
index b29f950aa..000000000
--- a/ui/src/kapacitor/components/TelegramConfig.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import React, {PropTypes} from 'react'
-import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'
-import {TELEGRAM_CHAT_ID_TIP, TELEGRAM_TOKEN_TIP} from 'src/kapacitor/copy'
-
-const {
- bool,
- func,
- shape,
- string,
-} = PropTypes
-
-const TelegramConfig = React.createClass({
- propTypes: {
- config: shape({
- options: shape({
- 'chat-id': string.isRequired,
- 'disable-notification': bool.isRequired,
- 'disable-web-page-preview': bool.isRequired,
- 'parse-mode': string.isRequired,
- token: bool.isRequired,
- }).isRequired,
- }).isRequired,
- onSave: func.isRequired,
- },
-
- handleSaveAlert(e) {
- e.preventDefault()
-
- let parseMode
- if (this.parseModeHTML.checked) {
- parseMode = 'HTML'
- }
- if (this.parseModeMarkdown.checked) {
- parseMode = 'Markdown'
- }
-
- const properties = {
- 'chat-id': this.chatID.value,
- 'disable-notification': this.disableNotification.checked,
- 'disable-web-page-preview': this.disableWebPagePreview.checked,
- 'parse-mode': parseMode,
- token: this.token.value,
- }
-
- this.props.onSave(properties)
- },
-
- render() {
- const {options} = this.props.config
- const {token} = options
- const chatID = options['chat-id']
- const disableNotification = options['disable-notification']
- const disableWebPagePreview = options['disable-web-page-preview']
- const parseMode = options['parse-mode']
-
- return (
-
-
Telegram Alert
-
-
- Send alert messages to a Telegram bot .
-
-
-
- )
- },
-})
-
-export default TelegramConfig
diff --git a/ui/src/kapacitor/components/VictorOpsConfig.js b/ui/src/kapacitor/components/VictorOpsConfig.js
deleted file mode 100644
index b821117d7..000000000
--- a/ui/src/kapacitor/components/VictorOpsConfig.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import React, {PropTypes} from 'react'
-
-const VictorOpsConfig = React.createClass({
- propTypes: {
- config: PropTypes.shape({
- options: PropTypes.shape({
- 'api-key': PropTypes.bool,
- 'routing-key': PropTypes.string,
- url: PropTypes.string,
- }).isRequired,
- }).isRequired,
- onSave: PropTypes.func.isRequired,
- },
-
- handleSaveAlert(e) {
- e.preventDefault()
-
- const properties = {
- 'api-key': this.apiKey.value,
- 'routing-key': this.routingKey.value,
- url: this.url.value,
- }
-
- this.props.onSave(properties)
- },
-
- render() {
- const {options} = this.props.config
- const apiKey = options['api-key']
- const routingKey = options['routing-key']
- const {url} = options
-
- return (
-
-
VictorOps Alert
-
-
Have alerts sent to VictorOps.
-
-
- )
- },
-})
-
-export default VictorOpsConfig
diff --git a/ui/src/kapacitor/components/config/AlertaConfig.js b/ui/src/kapacitor/components/config/AlertaConfig.js
new file mode 100644
index 000000000..37df70114
--- /dev/null
+++ b/ui/src/kapacitor/components/config/AlertaConfig.js
@@ -0,0 +1,63 @@
+import React, {PropTypes} from 'react'
+
+const AlertaConfig = React.createClass({
+ propTypes: {
+ config: PropTypes.shape({
+ options: PropTypes.shape({
+ environment: PropTypes.string,
+ origin: PropTypes.string,
+ token: PropTypes.bool,
+ url: PropTypes.string,
+ }).isRequired,
+ }).isRequired,
+ onSave: PropTypes.func.isRequired,
+ },
+
+ handleSaveAlert(e) {
+ e.preventDefault()
+
+ const properties = {
+ environment: this.environment.value,
+ origin: this.origin.value,
+ token: this.token.value,
+ url: this.url.value,
+ }
+
+ this.props.onSave(properties)
+ },
+
+ render() {
+ const {environment, origin, token, url} = this.props.config.options
+
+ return (
+
+ )
+ },
+})
+
+export default AlertaConfig
diff --git a/ui/src/kapacitor/components/config/HipChatConfig.js b/ui/src/kapacitor/components/config/HipChatConfig.js
new file mode 100644
index 000000000..421e71627
--- /dev/null
+++ b/ui/src/kapacitor/components/config/HipChatConfig.js
@@ -0,0 +1,95 @@
+import React, {PropTypes} from 'react'
+import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'
+import {HIPCHAT_TOKEN_TIP} from 'src/kapacitor/copy'
+
+const {
+ bool,
+ func,
+ shape,
+ string,
+} = PropTypes
+
+const HipchatConfig = React.createClass({
+ propTypes: {
+ config: shape({
+ options: shape({
+ room: string.isRequired,
+ token: bool.isRequired,
+ url: string.isRequired,
+ }).isRequired,
+ }).isRequired,
+ onSave: func.isRequired,
+ },
+
+ handleSaveAlert(e) {
+ e.preventDefault()
+
+ const properties = {
+ room: this.room.value,
+ url: `https://${this.url.value}.hipchat.com/v2/room`,
+ token: this.token.value,
+ }
+
+ this.props.onSave(properties)
+ },
+
+ render() {
+ const {options} = this.props.config
+ const {url, room, token} = options
+
+ const subdomain = url.replace('https://', '').replace('.hipchat.com/v2/room', '')
+
+ return (
+
+ )
+ },
+})
+
+export default HipchatConfig
diff --git a/ui/src/kapacitor/components/OpsGenieConfig.js b/ui/src/kapacitor/components/config/OpsGenieConfig.js
similarity index 75%
rename from ui/src/kapacitor/components/OpsGenieConfig.js
rename to ui/src/kapacitor/components/config/OpsGenieConfig.js
index 53833d707..9d626a207 100644
--- a/ui/src/kapacitor/components/OpsGenieConfig.js
+++ b/ui/src/kapacitor/components/config/OpsGenieConfig.js
@@ -64,25 +64,20 @@ const OpsGenieConfig = React.createClass({
const {currentTeams, currentRecipients} = this.state
return (
-
-
OpsGenie Alert
-
-
Have alerts sent to OpsGenie.
-
-
+
+ Save
+
+
)
},
})
diff --git a/ui/src/kapacitor/components/config/PagerDutyConfig.js b/ui/src/kapacitor/components/config/PagerDutyConfig.js
new file mode 100644
index 000000000..224289524
--- /dev/null
+++ b/ui/src/kapacitor/components/config/PagerDutyConfig.js
@@ -0,0 +1,51 @@
+import React, {PropTypes} from 'react'
+
+const PagerDutyConfig = React.createClass({
+ propTypes: {
+ config: PropTypes.shape({
+ options: PropTypes.shape({
+ 'service-key': PropTypes.bool.isRequired,
+ url: PropTypes.string.isRequired,
+ }).isRequired,
+ }).isRequired,
+ onSave: PropTypes.func.isRequired,
+ },
+
+ handleSaveAlert(e) {
+ e.preventDefault()
+
+ const properties = {
+ serviceKey: this.serviceKey.value,
+ url: this.url.value,
+ }
+
+ this.props.onSave(properties)
+ },
+
+ render() {
+ const {options} = this.props.config
+ const {url} = options
+ const serviceKey = options['service-key']
+
+ return (
+
+ )
+ },
+})
+
+export default PagerDutyConfig
diff --git a/ui/src/kapacitor/components/config/SMTPConfig.js b/ui/src/kapacitor/components/config/SMTPConfig.js
new file mode 100644
index 000000000..545875c27
--- /dev/null
+++ b/ui/src/kapacitor/components/config/SMTPConfig.js
@@ -0,0 +1,69 @@
+import React, {PropTypes} from 'react'
+
+const SMTPConfig = React.createClass({
+ propTypes: {
+ config: PropTypes.shape({
+ options: PropTypes.shape({
+ host: PropTypes.string,
+ port: PropTypes.number,
+ username: PropTypes.string,
+ password: PropTypes.bool,
+ from: PropTypes.string,
+ }).isRequired,
+ }).isRequired,
+ onSave: PropTypes.func.isRequired,
+ },
+
+ handleSaveAlert(e) {
+ e.preventDefault()
+
+ const properties = {
+ host: this.host.value,
+ port: this.port.value,
+ from: this.from.value,
+ username: this.username.value,
+ password: this.password.value,
+ }
+
+ this.props.onSave(properties)
+ },
+
+ render() {
+ const {host, port, from, username, password} = this.props.config.options
+
+ return (
+
+ )
+ },
+})
+
+export default SMTPConfig
diff --git a/ui/src/kapacitor/components/config/SensuConfig.js b/ui/src/kapacitor/components/config/SensuConfig.js
new file mode 100644
index 000000000..588c789c3
--- /dev/null
+++ b/ui/src/kapacitor/components/config/SensuConfig.js
@@ -0,0 +1,48 @@
+import React, {PropTypes} from 'react'
+
+const SensuConfig = React.createClass({
+ propTypes: {
+ config: PropTypes.shape({
+ options: PropTypes.shape({
+ source: PropTypes.string.isRequired,
+ addr: PropTypes.string.isRequired,
+ }).isRequired,
+ }).isRequired,
+ onSave: PropTypes.func.isRequired,
+ },
+
+ handleSaveAlert(e) {
+ e.preventDefault()
+
+ const properties = {
+ source: this.source.value,
+ addr: this.addr.value,
+ }
+
+ this.props.onSave(properties)
+ },
+
+ render() {
+ const {source, addr} = this.props.config.options
+
+ return (
+
+ )
+ },
+})
+
+export default SensuConfig
diff --git a/ui/src/kapacitor/components/config/SlackConfig.js b/ui/src/kapacitor/components/config/SlackConfig.js
new file mode 100644
index 000000000..b9855b939
--- /dev/null
+++ b/ui/src/kapacitor/components/config/SlackConfig.js
@@ -0,0 +1,71 @@
+import React, {PropTypes} from 'react'
+
+const SlackConfig = React.createClass({
+ propTypes: {
+ config: PropTypes.shape({
+ options: PropTypes.shape({
+ url: PropTypes.bool.isRequired,
+ channel: PropTypes.string.isRequired,
+ }).isRequired,
+ }).isRequired,
+ onSave: PropTypes.func.isRequired,
+ onTest: PropTypes.func.isRequired,
+ },
+
+ getInitialState() {
+ return {
+ testEnabled: !!this.props.config.options.url,
+ }
+ },
+
+ componentWillReceiveProps(nextProps) {
+ this.setState({
+ testEnabled: !!nextProps.config.options.url,
+ })
+ },
+
+ handleSaveAlert(e) {
+ e.preventDefault()
+
+ const properties = {
+ url: this.url.value,
+ channel: this.channel.value,
+ }
+
+ this.props.onSave(properties)
+ },
+
+ handleTest(e) {
+ e.preventDefault()
+ this.props.onTest({
+ url: this.url.value,
+ channel: this.channel.value,
+ })
+ },
+
+ render() {
+ const {url, channel} = this.props.config.options
+
+ return (
+
+ )
+ },
+})
+
+export default SlackConfig
diff --git a/ui/src/kapacitor/components/config/TalkConfig.js b/ui/src/kapacitor/components/config/TalkConfig.js
new file mode 100644
index 000000000..240346d1c
--- /dev/null
+++ b/ui/src/kapacitor/components/config/TalkConfig.js
@@ -0,0 +1,56 @@
+import React, {PropTypes} from 'react'
+
+const {
+ bool,
+ string,
+ shape,
+ func,
+} = PropTypes
+
+const TalkConfig = React.createClass({
+ propTypes: {
+ config: shape({
+ options: shape({
+ url: bool.isRequired,
+ author_name: string.isRequired,
+ }).isRequired,
+ }).isRequired,
+ onSave: func.isRequired,
+ },
+
+ handleSaveAlert(e) {
+ e.preventDefault()
+
+ const properties = {
+ url: this.url.value,
+ author_name: this.author.value,
+ }
+
+ this.props.onSave(properties)
+ },
+
+ render() {
+ const {url, author_name: author} = this.props.config.options
+
+ return (
+
+ )
+ },
+})
+
+export default TalkConfig
diff --git a/ui/src/kapacitor/components/config/TelegramConfig.js b/ui/src/kapacitor/components/config/TelegramConfig.js
new file mode 100644
index 000000000..52ff92b8b
--- /dev/null
+++ b/ui/src/kapacitor/components/config/TelegramConfig.js
@@ -0,0 +1,138 @@
+import React, {PropTypes} from 'react'
+import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'
+import {TELEGRAM_CHAT_ID_TIP, TELEGRAM_TOKEN_TIP} from 'src/kapacitor/copy'
+
+const {
+ bool,
+ func,
+ shape,
+ string,
+} = PropTypes
+
+const TelegramConfig = React.createClass({
+ propTypes: {
+ config: shape({
+ options: shape({
+ 'chat-id': string.isRequired,
+ 'disable-notification': bool.isRequired,
+ 'disable-web-page-preview': bool.isRequired,
+ 'parse-mode': string.isRequired,
+ token: bool.isRequired,
+ }).isRequired,
+ }).isRequired,
+ onSave: func.isRequired,
+ },
+
+ handleSaveAlert(e) {
+ e.preventDefault()
+
+ let parseMode
+ if (this.parseModeHTML.checked) {
+ parseMode = 'HTML'
+ }
+ if (this.parseModeMarkdown.checked) {
+ parseMode = 'Markdown'
+ }
+
+ const properties = {
+ 'chat-id': this.chatID.value,
+ 'disable-notification': this.disableNotification.checked,
+ 'disable-web-page-preview': this.disableWebPagePreview.checked,
+ 'parse-mode': parseMode,
+ token: this.token.value,
+ }
+
+ this.props.onSave(properties)
+ },
+
+ render() {
+ const {options} = this.props.config
+ const {token} = options
+ const chatID = options['chat-id']
+ const disableNotification = options['disable-notification']
+ const disableWebPagePreview = options['disable-web-page-preview']
+ const parseMode = options['parse-mode']
+
+ return (
+
+ )
+ },
+})
+
+export default TelegramConfig
diff --git a/ui/src/kapacitor/components/config/VictorOpsConfig.js b/ui/src/kapacitor/components/config/VictorOpsConfig.js
new file mode 100644
index 000000000..73e11eac4
--- /dev/null
+++ b/ui/src/kapacitor/components/config/VictorOpsConfig.js
@@ -0,0 +1,59 @@
+import React, {PropTypes} from 'react'
+
+const VictorOpsConfig = React.createClass({
+ propTypes: {
+ config: PropTypes.shape({
+ options: PropTypes.shape({
+ 'api-key': PropTypes.bool,
+ 'routing-key': PropTypes.string,
+ url: PropTypes.string,
+ }).isRequired,
+ }).isRequired,
+ onSave: PropTypes.func.isRequired,
+ },
+
+ handleSaveAlert(e) {
+ e.preventDefault()
+
+ const properties = {
+ 'api-key': this.apiKey.value,
+ 'routing-key': this.routingKey.value,
+ url: this.url.value,
+ }
+
+ this.props.onSave(properties)
+ },
+
+ render() {
+ const {options} = this.props.config
+ const apiKey = options['api-key']
+ const routingKey = options['routing-key']
+ const {url} = options
+
+ return (
+
+ )
+ },
+})
+
+export default VictorOpsConfig
diff --git a/ui/src/kapacitor/components/config/index.js b/ui/src/kapacitor/components/config/index.js
new file mode 100644
index 000000000..8cf004a07
--- /dev/null
+++ b/ui/src/kapacitor/components/config/index.js
@@ -0,0 +1,23 @@
+import AlertaConfig from './AlertaConfig'
+import HipChatConfig from './HipChatConfig'
+import OpsGenieConfig from './OpsGenieConfig'
+import PagerDutyConfig from './PagerDutyConfig'
+import SensuConfig from './SensuConfig'
+import SlackConfig from './SlackConfig'
+import SMTPConfig from './SMTPConfig'
+import TalkConfig from './TalkConfig'
+import TelegramConfig from './TelegramConfig'
+import VictorOpsConfig from './VictorOpsConfig'
+
+export {
+ AlertaConfig,
+ HipChatConfig,
+ OpsGenieConfig,
+ PagerDutyConfig,
+ SensuConfig,
+ SlackConfig,
+ SMTPConfig,
+ TalkConfig,
+ TelegramConfig,
+ VictorOpsConfig,
+}
diff --git a/ui/src/kapacitor/containers/KapacitorPage.js b/ui/src/kapacitor/containers/KapacitorPage.js
index d7a1651ef..012eec4f3 100644
--- a/ui/src/kapacitor/containers/KapacitorPage.js
+++ b/ui/src/kapacitor/containers/KapacitorPage.js
@@ -1,4 +1,4 @@
-import React, {PropTypes} from 'react'
+import React, {Component, PropTypes} from 'react'
import {
getKapacitor,
createKapacitor,
@@ -7,26 +7,13 @@ import {
} from 'shared/apis'
import KapacitorForm from '../components/KapacitorForm'
-const defaultName = "My Kapacitor"
-const kapacitorPort = "9092"
+const defaultName = 'My Kapacitor'
+const kapacitorPort = '9092'
-const {
- func,
- shape,
- string,
-} = PropTypes
-
-export const KapacitorPage = React.createClass({
- propTypes: {
- source: shape({
- id: string.isRequired,
- url: string.isRequired,
- }),
- addFlashMessage: func,
- },
-
- getInitialState() {
- return {
+class KapacitorPage extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
kapacitor: {
url: this._parseKapacitorURL(),
name: defaultName,
@@ -35,39 +22,27 @@ export const KapacitorPage = React.createClass({
},
exists: false,
}
- },
+
+ this.handleInputChange = ::this.handleInputChange
+ this.handleSubmit = ::this.handleSubmit
+ this.handleResetToDefaults = ::this.handleResetToDefaults
+ this._parseKapacitorURL = ::this._parseKapacitorURL
+ }
componentDidMount() {
- const {source} = this.props
- getKapacitor(source).then((kapacitor) => {
- if (!kapacitor) {
- return
- }
+ const {source, params: {id}} = this.props
+ if (!id) {
+ return
+ }
+ getKapacitor(source, id).then((kapacitor) => {
this.setState({kapacitor, exists: true}, () => {
pingKapacitor(kapacitor).catch(() => {
this.props.addFlashMessage({type: 'error', text: 'Could not connect to Kapacitor. Check settings.'})
})
})
})
- },
-
- render() {
- const {source, addFlashMessage} = this.props
- const {kapacitor, exists} = this.state
-
- return (
-
- )
- },
+ }
handleInputChange(e) {
const {value, name} = e.target
@@ -76,8 +51,7 @@ export const KapacitorPage = React.createClass({
const update = {[name]: value.trim()}
return {kapacitor: {...prevState.kapacitor, ...update}}
})
- },
-
+ }
handleSubmit(e) {
e.preventDefault()
@@ -99,7 +73,7 @@ export const KapacitorPage = React.createClass({
addFlashMessage({type: 'error', text: 'There was a problem creating the Kapacitor record'})
})
}
- },
+ }
handleResetToDefaults(e) {
e.preventDefault()
@@ -111,14 +85,48 @@ export const KapacitorPage = React.createClass({
}
this.setState({kapacitor: {...defaultState}})
- },
+ }
_parseKapacitorURL() {
const parser = document.createElement('a')
parser.href = this.props.source.url
return `${parser.protocol}//${parser.hostname}:${kapacitorPort}`
- },
-})
+ }
+
+ render() {
+ const {source, addFlashMessage} = this.props
+ const {kapacitor, exists} = this.state
+
+ return (
+
+ )
+ }
+}
+
+const {
+ func,
+ shape,
+ string,
+} = PropTypes
+
+KapacitorPage.propTypes = {
+ addFlashMessage: func,
+ params: shape({
+ id: string,
+ }).isRequired,
+ source: shape({
+ id: string.isRequired,
+ url: string.isRequired,
+ }),
+}
export default KapacitorPage
diff --git a/ui/src/kapacitor/containers/KapacitorRulePage.js b/ui/src/kapacitor/containers/KapacitorRulePage.js
index df55b05d9..141f486e5 100644
--- a/ui/src/kapacitor/containers/KapacitorRulePage.js
+++ b/ui/src/kapacitor/containers/KapacitorRulePage.js
@@ -1,11 +1,10 @@
import React, {PropTypes} from 'react'
-import {withRouter} from 'react-router'
import {connect} from 'react-redux'
import _ from 'lodash'
import * as kapacitorActionCreators from '../actions/view'
import * as queryActionCreators from '../../data_explorer/actions/view'
import {bindActionCreators} from 'redux'
-import {getKapacitor, getKapacitorConfig} from 'shared/apis/index'
+import {getActiveKapacitor, getKapacitorConfig} from 'shared/apis/index'
import {ALERTS, DEFAULT_RULE_ID} from 'src/kapacitor/constants'
import KapacitorRule from 'src/kapacitor/components/KapacitorRule'
@@ -53,7 +52,7 @@ export const KapacitorRulePage = React.createClass({
kapacitorActions.loadDefaultRule()
}
- getKapacitor(source).then((kapacitor) => {
+ getActiveKapacitor(source).then((kapacitor) => {
this.setState({kapacitor})
getKapacitorConfig(kapacitor).then(({data: {sections}}) => {
const enabledAlerts = Object.keys(sections).filter((section) => {
@@ -117,4 +116,4 @@ function mapDispatchToProps(dispatch) {
}
}
-export default connect(mapStateToProps, mapDispatchToProps)(withRouter(KapacitorRulePage))
+export default connect(mapStateToProps, mapDispatchToProps)(KapacitorRulePage)
diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.js b/ui/src/kapacitor/containers/KapacitorRulesPage.js
index a7344a239..0ac448dcc 100644
--- a/ui/src/kapacitor/containers/KapacitorRulesPage.js
+++ b/ui/src/kapacitor/containers/KapacitorRulesPage.js
@@ -1,7 +1,7 @@
import React, {PropTypes, Component} from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
-import {getKapacitor} from 'src/shared/apis'
+import {getActiveKapacitor} from 'src/shared/apis'
import * as kapacitorActionCreators from '../actions/view'
import KapacitorRules from 'src/kapacitor/components/KapacitorRules'
@@ -18,7 +18,7 @@ class KapacitorRulesPage extends Component {
}
componentDidMount() {
- getKapacitor(this.props.source).then((kapacitor) => {
+ getActiveKapacitor(this.props.source).then((kapacitor) => {
if (kapacitor) {
this.props.actions.fetchRules(kapacitor)
}
diff --git a/ui/src/shared/actions/sources.js b/ui/src/shared/actions/sources.js
index 9fb356ffb..0711ebb02 100644
--- a/ui/src/shared/actions/sources.js
+++ b/ui/src/shared/actions/sources.js
@@ -1,4 +1,8 @@
-import {deleteSource, getSources} from 'src/shared/apis'
+import {deleteSource,
+ getSources,
+ getKapacitors as getKapacitorsAJAX,
+ updateKapacitor as updateKapacitorAJAX,
+} from 'src/shared/apis'
import {publishNotification} from './notifications'
export const loadSources = (sources) => ({
@@ -22,6 +26,21 @@ export const addSource = (source) => ({
},
})
+export const fetchKapacitors = (source, kapacitors) => ({
+ type: 'LOAD_KAPACITORS',
+ payload: {
+ source,
+ kapacitors,
+ },
+})
+
+export const setActiveKapacitor = (kapacitor) => ({
+ type: 'SET_ACTIVE_KAPACITOR',
+ payload: {
+ kapacitor,
+ },
+})
+
// Async action creators
export const removeAndLoadSources = (source) => async (dispatch) => {
@@ -42,3 +61,19 @@ export const removeAndLoadSources = (source) => async (dispatch) => {
dispatch(publishNotification("error", "Internal Server Error. Check API Logs"))
}
}
+
+export const fetchKapacitorsAsync = (source) => async (dispatch) => {
+ try {
+ const {data} = await getKapacitorsAJAX(source)
+ dispatch(fetchKapacitors(source, data.kapacitors))
+ } catch (err) {
+ dispatch(publishNotification('error', `Internal Server Error. Could not retrieve kapacitors for source ${source.id}.`))
+ }
+}
+
+export const setActiveKapacitorAsync = (kapacitor) => async (dispatch) => {
+ // eagerly update the redux state
+ dispatch(setActiveKapacitor(kapacitor))
+ const kapacitorPost = {...kapacitor, active: true}
+ await updateKapacitorAJAX(kapacitorPost)
+}
diff --git a/ui/src/shared/apis/index.js b/ui/src/shared/apis/index.js
index d42f63885..f66da174a 100644
--- a/ui/src/shared/apis/index.js
+++ b/ui/src/shared/apis/index.js
@@ -58,15 +58,37 @@ export function pingKapacitor(kapacitor) {
})
}
-export function getKapacitor(source) {
+export function getKapacitor(source, kapacitorID) {
+ return AJAX({
+ url: `${source.links.kapacitors}/${kapacitorID}`,
+ method: 'GET',
+ }).then(({data}) => {
+ return data
+ })
+}
+
+export function getActiveKapacitor(source) {
return AJAX({
url: source.links.kapacitors,
method: 'GET',
}).then(({data}) => {
- return data.kapacitors[0]
+ const activeKapacitor = data.kapacitors.find((k) => k.active)
+ return activeKapacitor || data.kapacitors[0]
})
}
+export const getKapacitors = async (source) => {
+ try {
+ return await AJAX({
+ method: 'GET',
+ url: source.links.kapacitors,
+ })
+ } catch (error) {
+ console.error(error)
+ throw error
+ }
+}
+
export function createKapacitor(source, {url, name = 'My Kapacitor', username, password}) {
return AJAX({
url: source.links.kapacitors,
@@ -80,7 +102,7 @@ export function createKapacitor(source, {url, name = 'My Kapacitor', username, p
})
}
-export function updateKapacitor({links, url, name = 'My Kapacitor', username, password}) {
+export function updateKapacitor({links, url, name = 'My Kapacitor', username, password, active}) {
return AJAX({
url: links.self,
method: 'PATCH',
@@ -89,6 +111,7 @@ export function updateKapacitor({links, url, name = 'My Kapacitor', username, pa
url,
username,
password,
+ active,
},
})
}
diff --git a/ui/src/shared/components/Dropdown.js b/ui/src/shared/components/Dropdown.js
index 8d18c6a55..a18589cd8 100644
--- a/ui/src/shared/components/Dropdown.js
+++ b/ui/src/shared/components/Dropdown.js
@@ -1,7 +1,99 @@
-import React, {PropTypes} from 'react'
+import React, {Component, PropTypes} from 'react'
+import {Link} from 'react-router'
import classnames from 'classnames'
+
import OnClickOutside from 'shared/components/OnClickOutside'
+class Dropdown extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ isOpen: false,
+ }
+
+ this.handleClickOutside = ::this.handleClickOutside
+ this.handleSelection = ::this.handleSelection
+ this.toggleMenu = ::this.toggleMenu
+ this.handleAction = ::this.handleAction
+ }
+
+ static defaultProps = {
+ actions: [],
+ buttonSize: 'btn-sm',
+ buttonColor: 'btn-info',
+ menuWidth: '100%',
+ }
+
+ handleClickOutside() {
+ this.setState({isOpen: false})
+ }
+
+ handleSelection(item) {
+ this.toggleMenu()
+ this.props.onChoose(item)
+ }
+
+ toggleMenu(e) {
+ if (e) {
+ e.stopPropagation()
+ }
+ this.setState({isOpen: !this.state.isOpen})
+ }
+
+ handleAction(e, action, item) {
+ e.stopPropagation()
+ action.handler(item)
+ }
+
+ render() {
+ const {items, selected, className, iconName, actions, addNew, buttonSize, buttonColor, menuWidth} = this.props
+ const {isOpen} = this.state
+
+ return (
+
+
+ {iconName ? {selected}
+
+ {isOpen ?
+
+ : null}
+
+ )
+ }
+}
+
const {
arrayOf,
shape,
@@ -9,79 +101,26 @@ const {
func,
} = PropTypes
-const Dropdown = React.createClass({
- propTypes: {
- items: arrayOf(shape({
- text: string.isRequired,
- })).isRequired,
- onChoose: func.isRequired,
- selected: string.isRequired,
- iconName: string,
- className: string,
- },
- getInitialState() {
- return {
- isOpen: false,
- }
- },
- getDefaultProps() {
- return {
- actions: [],
- }
- },
- handleClickOutside() {
- this.setState({isOpen: false})
- },
- handleSelection(item) {
- this.toggleMenu()
- this.props.onChoose(item)
- },
- toggleMenu(e) {
- if (e) {
- e.stopPropagation()
- }
- this.setState({isOpen: !this.state.isOpen})
- },
- handleAction(e, action, item) {
- e.stopPropagation()
- action.handler(item)
- },
- render() {
- const self = this
- const {items, selected, className, iconName, actions} = self.props
-
- return (
-
-
- {iconName ? {selected}
-
- {self.state.isOpen ?
-
- : null}
-
- )
- },
-})
+Dropdown.propTypes = {
+ actions: arrayOf(shape({
+ icon: string.isRequired,
+ text: string.isRequired,
+ handler: func.isRequired,
+ })),
+ items: arrayOf(shape({
+ text: string.isRequired,
+ })).isRequired,
+ onChoose: func.isRequired,
+ addNew: shape({
+ url: string.isRequired,
+ text: string.isRequired,
+ }),
+ selected: string.isRequired,
+ iconName: string,
+ className: string,
+ buttonSize: string,
+ buttonColor: string,
+ menuWidth: string,
+}
export default OnClickOutside(Dropdown)
diff --git a/ui/src/shared/reducers/sources.js b/ui/src/shared/reducers/sources.js
index cfef11c40..2c4781c80 100644
--- a/ui/src/shared/reducers/sources.js
+++ b/ui/src/shared/reducers/sources.js
@@ -1,3 +1,5 @@
+import _ from 'lodash'
+
const getInitialState = () => []
const initialState = getInitialState()
@@ -25,6 +27,27 @@ const sourcesReducer = (state = initialState, action) => {
}) : state
return [...updatedSources, source]
}
+
+ case 'LOAD_KAPACITORS': {
+ const {source, kapacitors} = action.payload
+ const sourceIndex = state.findIndex((s) => s.id === source.id)
+ const updatedSources = _.cloneDeep(state)
+ if (updatedSources[sourceIndex]) {
+ updatedSources[sourceIndex].kapacitors = kapacitors
+ }
+ return updatedSources
+ }
+
+ case 'SET_ACTIVE_KAPACITOR': {
+ const {kapacitor} = action.payload
+ const updatedSources = _.cloneDeep(state)
+ updatedSources.forEach((source) => {
+ source.kapacitors.forEach((k, i) => {
+ source.kapacitors[i].active = (k.id === kapacitor.id)
+ })
+ })
+ return updatedSources
+ }
}
return state
diff --git a/ui/src/side_nav/containers/SideNav.js b/ui/src/side_nav/containers/SideNav.js
index c98893d2d..6a30c20f2 100644
--- a/ui/src/side_nav/containers/SideNav.js
+++ b/ui/src/side_nav/containers/SideNav.js
@@ -56,8 +56,6 @@ const SideNav = React.createClass({
InfluxDB
- Kapacitor
{
showLogout ? (
diff --git a/ui/src/sources/components/InfluxTable.js b/ui/src/sources/components/InfluxTable.js
new file mode 100644
index 000000000..7af217be4
--- /dev/null
+++ b/ui/src/sources/components/InfluxTable.js
@@ -0,0 +1,132 @@
+import React, {PropTypes} from 'react'
+import {Link, withRouter} from 'react-router'
+
+import Dropdown from 'shared/components/Dropdown'
+
+const kapacitorDropdown = (kapacitors, source, router, setActiveKapacitor) => {
+ if (!kapacitors || kapacitors.length === 0) {
+ return (
+
Add Kapacitor
+ )
+ }
+ const kapacitorItems = kapacitors.map((k) => {
+ return {
+ text: k.name,
+ resource: `/sources/${source.id}/kapacitors/${k.id}`,
+ kapacitor: k,
+ }
+ })
+
+ const activeKapacitor = kapacitors.find((k) => k.active)
+
+ let selected = ''
+ if (activeKapacitor) {
+ selected = activeKapacitor.name
+ } else {
+ selected = kapacitorItems[0].text
+ }
+
+ return (
+
setActiveKapacitor(item.kapacitor)}
+ addNew={{
+ url: `/sources/${source.id}/kapacitors/new`,
+ text: "Add Kapacitor",
+ }}
+ actions={
+ [{
+ icon: "pencil",
+ text: "edit",
+ handler: (item) => {
+ router.push(`${item.resource}/edit`)
+ },
+ }]}
+ selected={selected}
+ />
+ )
+}
+
+const InfluxTable = ({
+ sources,
+ source,
+ handleDeleteSource,
+ location,
+ router,
+ setActiveKapacitor,
+}) => (
+
+
+
+
+
InfluxDB Sources
+
+
+
+
+
+ Name
+ Host
+ Kapacitor
+
+
+
+ {
+ sources.map((s) => {
+ return (
+
+ Default : null}{s.url}
+
+ {
+ kapacitorDropdown(s.kapacitors, s, router, setActiveKapacitor)
+ }
+
+
+ handleDeleteSource(s)}>
+
+
+ )
+ })
+ }
+
+
+
+
+
+
-
InfluxDB Sources
+ Configuration
-
-
-
-
-
-
{sourcesTitle}
-
-
-
-
-
-
- Name
- Host
- Kapacitor
-
-
-
- {
- sources.map((source) => {
- const kapacitorName = kapacitors[source.id] ? kapacitors[source.id].name : ''
- return (
-
- {source.name}{source.default ? Default : null}
- {source.url}
- {kapacitorName ? kapacitorName : "--"}
-
- this.handleDeleteSource(source)}>
-
-
- )
- })
- }
-
-
-
-
-
-
-
+
)
- },
-})
-
-function mapStateToProps(state) {
- return {
- sources: state.sources,
}
}
-export default connect(mapStateToProps, {removeAndLoadSources})(withRouter(ManageSources))
+const {
+ array,
+ func,
+ shape,
+ string,
+} = PropTypes
+
+ManageSources.propTypes = {
+ source: shape({
+ id: string.isRequired,
+ links: shape({
+ proxy: string.isRequired,
+ self: string.isRequired,
+ }),
+ }),
+ sources: array,
+ addFlashMessage: func,
+ removeAndLoadSources: func.isRequired,
+ fetchKapacitors: func.isRequired,
+ setActiveKapacitor: func.isRequired,
+}
+
+const mapStateToProps = ({sources}) => ({
+ sources,
+})
+
+const mapDispatchToProps = (dispatch) => ({
+ removeAndLoadSources: bindActionCreators(removeAndLoadSources, dispatch),
+ fetchKapacitors: bindActionCreators(fetchKapacitorsAsync, dispatch),
+ setActiveKapacitor: bindActionCreators(setActiveKapacitorAsync, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ManageSources)
diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
index 3b7c63c27..3dba7aced 100644
--- a/ui/src/style/chronograf.scss
+++ b/ui/src/style/chronograf.scss
@@ -45,6 +45,8 @@
@import 'components/query-maker';
// Pages
+
+@import 'pages/config-endpoints';
@import 'pages/signup';
@import 'pages/auth-page';
@import 'pages/kapacitor';
diff --git a/ui/src/style/pages/config-endpoints.scss b/ui/src/style/pages/config-endpoints.scss
new file mode 100644
index 000000000..37aac2ca1
--- /dev/null
+++ b/ui/src/style/pages/config-endpoints.scss
@@ -0,0 +1,65 @@
+/*
+ Kapacitor Config Styles
+ ----------------------------------------------
+*/
+
+$config-endpoint-tab-height: 40px;
+
+$config-endpoint-tab-text: $g10-wolf;
+$config-endpoint-tab-text-hover: $g15-platinum;
+$config-endpoint-tab-text-active: $g18-cloud;
+
+$config-endpoint-tab-bg: transparent;
+$config-endpoint-tab-bg-hover: $g3-castle;
+$config-endpoint-tab-bg-active: $g3-castle;
+
+.config-endpoint {
+ display: flex;
+ align-items: stretch;
+}
+.config-endpoint--tabs {
+ flex: 0 0 0;
+ display: flex;
+
+ .btn-group.tab-group {
+ overflow: hidden;
+ background-color: $g2-kevlar;
+ border-radius: $radius 0 0 $radius;
+ margin: 0;
+ display: flex;
+ flex: 1 0 0;
+ flex-direction: column;
+ align-items: stretch;
+
+ .btn.tab {
+ color: $config-endpoint-tab-text;
+ background-color: $config-endpoint-tab-bg;
+ border-radius: 0;
+ height: $config-endpoint-tab-height;
+ border: 0;
+ padding: 0 40px 0 15px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-weight: 500;
+ font-size: 16px;
+
+ &:first-child {border-top-left-radius: $radius;}
+
+ &:hover {
+ color: $config-endpoint-tab-text-hover;
+ background-color: $config-endpoint-tab-bg-hover;
+ }
+ &.active {
+ color: $config-endpoint-tab-text-active;
+ background-color: $config-endpoint-tab-bg-active;
+ }
+ }
+ }
+}
+.config-endpoint--tab-contents {
+ flex: 1 0 0;
+ background-color: $config-endpoint-tab-bg-active;
+ border-radius: 0 $radius $radius 0;
+ padding: 16px 42px;
+}
\ No newline at end of file
diff --git a/ui/src/style/unsorted.scss b/ui/src/style/unsorted.scss
index 0c61f8d6b..3aae03605 100644
--- a/ui/src/style/unsorted.scss
+++ b/ui/src/style/unsorted.scss
@@ -154,3 +154,28 @@
div:nth-child(3) {left: 100%; animation: refreshingSpinnerC 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;}
}
+
+/*
+ Kapacitor selector dropdown
+ ----------------------------------------------
+*/
+.dropdown .dropdown-toggle.btn-xs {
+ height: 22px !important;
+ line-height: 22px !important;
+ padding: 0 9px !important;
+}
+.dropdown-selected {
+ display: inline-block;
+ width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding-right: 15px;
+}
+.dropdown.sources--kapacitor-selector {
+ .dropdown-toggle {
+ width: 160px;
+ }
+}
+
+