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

Merge branch 'master' into ifql/filter

pull/3421/head
Andrew Watkins 2018-05-10 16:40:05 -07:00 committed by GitHub
parent 803875c1bb 35e7b36e6d
commit 4fafd851d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 381 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -5,6 +5,7 @@
1. [#3233](https://github.com/influxdata/chronograf/pull/3233): Add default retention policy field as option in source configuration for use in querying hosts from Host List page & Host pages
1. [#3290](https://github.com/influxdata/chronograf/pull/3290): Add support for PagerDuty v2 in UI
1. [#3369](https://github.com/influxdata/chronograf/pull/3369): Add support for OpsGenie v2 in UI
1. [#3416](https://github.com/influxdata/chronograf/pull/3416): Allow kapacitor services to be disabled
### UI Improvements
@ -33,6 +34,8 @@
1. [#3357](https://github.com/influxdata/chronograf/pull/3357): Fix only the selected template variable value getting loaded
1. [#3389](https://github.com/influxdata/chronograf/pull/3389): Fix Generic OAuth bug for GitHub Enterprise where the principal was incorrectly being checked for email being Primary and Verified
1. [#3402](https://github.com/influxdata/chronograf/pull/3402): Fix missing icons when using basepath
1. [#3412](https://github.com/influxdata/chronograf/pull/3412): Limit max-width of TICKScript editor.
## v1.4.4.1 [2018-04-16]

2
ui/package.json
View File

@ -119,7 +119,7 @@
"webpack-dev-server": "^2.11.1"
},
"dependencies": {
"axios": "^0.13.1",
"axios": "^0.18.0",
"bignumber.js": "^4.0.2",
"calculate-size": "^1.1.1",
"chroma-js": "^1.3.6",

1
ui/src/ifql/components/FuncNode.tsx
View File

@ -34,6 +34,7 @@ export default class FuncNode extends PureComponent<Props, State> {
public render() {
const {
func,
func: {args},
bodyID,
onChangeArg,
declarationID,

4
ui/src/kapacitor/components/AlertTabs.tsx
View File

@ -430,7 +430,7 @@ class AlertTabs extends PureComponent<Props, State> {
return _.get(
sections,
[section, 'elements', '0', 'options', 'enabled'],
null
false
)
}
@ -475,7 +475,7 @@ class AlertTabs extends PureComponent<Props, State> {
}
private sanitizeProperties = (section: string, properties: Props): Props => {
const cleanProps = {...properties, enabled: true}
const cleanProps = {enabled: true, ...properties}
const {redacted} = this.getSection(this.state.configSections, section)
if (redacted && redacted.length) {
redacted.forEach(badProp => {

54
ui/src/kapacitor/components/DataSection.js
View File

@ -7,6 +7,8 @@ import FieldList from 'src/shared/components/FieldList'
import {defaultEveryFrequency} from 'src/kapacitor/constants'
import {SourceContext} from 'src/CheckSources'
const makeQueryHandlers = (actions, query) => ({
handleChooseNamespace: namespace => {
actions.chooseNamespace(query.id, namespace)
@ -66,28 +68,36 @@ const DataSection = ({
} = makeQueryHandlers(actions, query)
return (
<div className="rule-section">
<div className="query-builder">
<DatabaseList query={query} onChooseNamespace={handleChooseNamespace} />
<MeasurementList
query={query}
onChooseMeasurement={handleChooseMeasurement}
onChooseTag={handleChooseTag}
onGroupByTag={handleGroupByTag}
onToggleTagAcceptance={handleToggleTagAcceptance}
/>
{isDeadman ? null : (
<FieldList
query={query}
onToggleField={handleToggleField}
isKapacitorRule={isKapacitorRule}
onGroupByTime={handleGroupByTime}
removeFuncs={handleRemoveFuncs}
applyFuncsToField={handleApplyFuncsToField(onAddEvery)}
/>
)}
</div>
</div>
<SourceContext.Consumer>
{source => (
<div className="rule-section">
<div className="query-builder">
<DatabaseList
query={query}
onChooseNamespace={handleChooseNamespace}
/>
<MeasurementList
query={query}
onChooseMeasurement={handleChooseMeasurement}
onChooseTag={handleChooseTag}
onGroupByTag={handleGroupByTag}
onToggleTagAcceptance={handleToggleTagAcceptance}
/>
{isDeadman ? null : (
<FieldList
query={query}
onToggleField={handleToggleField}
isKapacitorRule={isKapacitorRule}
onGroupByTime={handleGroupByTime}
removeFuncs={handleRemoveFuncs}
applyFuncsToField={handleApplyFuncsToField(onAddEvery)}
source={source}
/>
)}
</div>
</div>
)}
</SourceContext.Consumer>
)
}

2
ui/src/kapacitor/components/HandlerEmpty.js
View File

@ -5,7 +5,7 @@ const HandlerEmpty = ({onGoToConfig, validationError}) => (
<div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters">
<div className="endpoint-tab--parameters--empty">
<p>This handler has not been configured</p>
<p>This handler is not enabled</p>
<div className="form-group form-group-submit col-xs-12 text-center">
<button
className="btn btn-primary"

28
ui/src/kapacitor/components/config/AlertaConfig.tsx
View File

@ -1,4 +1,5 @@
import React, {PureComponent} from 'react'
import _ from 'lodash'
import React, {PureComponent, ChangeEvent} from 'react'
import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
import {ErrorHandling} from 'src/shared/decorators/errors'
@ -16,6 +17,7 @@ interface Config {
origin: string
token: boolean
url: string
enabled: boolean
}
}
@ -28,6 +30,7 @@ interface Props {
interface State {
testEnabled: boolean
enabled: boolean
}
@ErrorHandling
@ -41,12 +44,13 @@ class AlertaConfig extends PureComponent<Props, State> {
super(props)
this.state = {
testEnabled: this.props.enabled,
enabled: _.get(this.props, 'config.options.enabled', false),
}
}
public render() {
const {environment, origin, token, url} = this.props.config.options
const {testEnabled} = this.state
const {testEnabled, enabled} = this.state
return (
<form onSubmit={this.handleSubmit}>
@ -97,6 +101,18 @@ class AlertaConfig extends PureComponent<Props, State> {
/>
</div>
<div className="form-group col-xs-12">
<div className="form-control-static">
<input
type="checkbox"
id="disabled"
checked={enabled}
onChange={this.handleEnabledChange}
/>
<label htmlFor="disabled">Configuration Enabled</label>
</div>
</div>
<div className="form-group form-group-submit col-xs-12 text-center">
<button
className="btn btn-primary"
@ -108,7 +124,7 @@ class AlertaConfig extends PureComponent<Props, State> {
</button>
<button
className="btn btn-primary"
disabled={!this.state.testEnabled}
disabled={!this.state.testEnabled || !enabled}
onClick={this.props.onTest}
>
<span className="icon pulse-c" />
@ -119,6 +135,11 @@ class AlertaConfig extends PureComponent<Props, State> {
)
}
private handleEnabledChange = (e: ChangeEvent<HTMLInputElement>) => {
this.setState({enabled: e.target.checked})
this.disableTest()
}
private handleSubmit = async e => {
e.preventDefault()
@ -127,6 +148,7 @@ class AlertaConfig extends PureComponent<Props, State> {
origin: this.origin.value,
token: this.token.value,
url: this.url.value,
enabled: this.state.enabled,
}
const success = await this.props.onSave(properties)

28
ui/src/kapacitor/components/config/HipChatConfig.tsx
View File

@ -1,4 +1,5 @@
import React, {PureComponent} from 'react'
import _ from 'lodash'
import React, {PureComponent, ChangeEvent} from 'react'
import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'
import {HIPCHAT_TOKEN_TIP} from 'src/kapacitor/copy'
@ -16,6 +17,7 @@ interface Config {
room: string
token: boolean
url: string
enabled: boolean
}
}
@ -28,6 +30,7 @@ interface Props {
interface State {
testEnabled: boolean
enabled: boolean
}
@ErrorHandling
@ -40,13 +43,14 @@ class HipchatConfig extends PureComponent<Props, State> {
super(props)
this.state = {
testEnabled: this.props.enabled,
enabled: _.get(this.props, 'config.options.enabled', false),
}
}
public render() {
const {options} = this.props.config
const {url, room, token} = options
const {testEnabled} = this.state
const {testEnabled, enabled} = this.state
const subdomain = url
.replace('https://', '')
@ -94,6 +98,18 @@ class HipchatConfig extends PureComponent<Props, State> {
/>
</div>
<div className="form-group col-xs-12">
<div className="form-control-static">
<input
type="checkbox"
id="disabled"
checked={enabled}
onChange={this.handleEnabledChange}
/>
<label htmlFor="disabled">Configuration Enabled</label>
</div>
</div>
<div className="form-group form-group-submit col-xs-12 text-center">
<button
className="btn btn-primary"
@ -105,7 +121,7 @@ class HipchatConfig extends PureComponent<Props, State> {
</button>
<button
className="btn btn-primary"
disabled={!this.state.testEnabled}
disabled={!this.state.testEnabled || !enabled}
onClick={this.props.onTest}
>
<span className="icon pulse-c" />
@ -116,6 +132,11 @@ class HipchatConfig extends PureComponent<Props, State> {
)
}
private handleEnabledChange = (e: ChangeEvent<HTMLInputElement>) => {
this.setState({enabled: e.target.checked})
this.disableTest()
}
private handleSubmit = async e => {
e.preventDefault()
@ -123,6 +144,7 @@ class HipchatConfig extends PureComponent<Props, State> {
room: this.room.value,
url: `https://${this.url.value}.hipchat.com/v2/room`,
token: this.token.value,
enabled: this.state.enabled,
}
const success = await this.props.onSave(properties)

28
ui/src/kapacitor/components/config/OpsGenieConfig.tsx
View File

@ -1,4 +1,5 @@
import React, {PureComponent} from 'react'
import _ from 'lodash'
import React, {PureComponent, ChangeEvent} from 'react'
import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
import TagInput from 'src/shared/components/TagInput'
@ -15,6 +16,7 @@ interface Config {
'api-key': boolean
teams: string[]
recipients: string[]
enabled: boolean
}
}
@ -33,6 +35,7 @@ interface State {
currentTeams: string[]
currentRecipients: string[]
testEnabled: boolean
enabled: boolean
}
@ErrorHandling
@ -48,13 +51,14 @@ class OpsGenieConfig extends PureComponent<Props, State> {
currentTeams: teams || [],
currentRecipients: recipients || [],
testEnabled: this.props.enabled,
enabled: _.get(this.props, 'config.options.enabled', false),
}
}
public render() {
const {options} = this.props.config
const apiKey = options['api-key']
const {testEnabled} = this.state
const {testEnabled, enabled} = this.state
return (
<form onSubmit={this.handleSubmit}>
@ -84,6 +88,18 @@ class OpsGenieConfig extends PureComponent<Props, State> {
disableTest={this.disableTest}
/>
<div className="form-group col-xs-12">
<div className="form-control-static">
<input
type="checkbox"
id="disabled"
checked={enabled}
onChange={this.handleEnabledChange}
/>
<label htmlFor="disabled">Configuration Enabled</label>
</div>
</div>
<div className="form-group form-group-submit col-xs-12 text-center">
<button
className="btn btn-primary"
@ -95,7 +111,7 @@ class OpsGenieConfig extends PureComponent<Props, State> {
</button>
<button
className="btn btn-primary"
disabled={!this.state.testEnabled}
disabled={!this.state.testEnabled || !enabled}
onClick={this.props.onTest}
>
<span className="icon pulse-c" />
@ -106,6 +122,11 @@ class OpsGenieConfig extends PureComponent<Props, State> {
)
}
private handleEnabledChange = (e: ChangeEvent<HTMLInputElement>) => {
this.setState({enabled: e.target.checked})
this.disableTest()
}
private get currentTeamsForTags(): Item[] {
const {currentTeams} = this.state
return currentTeams.map(team => ({name: team}))
@ -123,6 +144,7 @@ class OpsGenieConfig extends PureComponent<Props, State> {
'api-key': this.apiKey.value,
teams: this.state.currentTeams,
recipients: this.state.currentRecipients,
enabled: this.state.enabled,
}
const success = await this.props.onSave(properties)

28
ui/src/kapacitor/components/config/PagerDutyConfig.tsx
View File

@ -1,4 +1,5 @@
import React, {PureComponent} from 'react'
import _ from 'lodash'
import React, {PureComponent, ChangeEvent} from 'react'
import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
import {ErrorHandling} from 'src/shared/decorators/errors'
@ -11,6 +12,7 @@ interface Config {
options: {
'service-key': boolean
url: string
enabled: boolean
}
}
@ -23,6 +25,7 @@ interface Props {
interface State {
testEnabled: boolean
enabled: boolean
}
@ErrorHandling
@ -34,6 +37,7 @@ class PagerDutyConfig extends PureComponent<Props, State> {
super(props)
this.state = {
testEnabled: this.props.enabled,
enabled: _.get(this.props, 'config.options.enabled', false),
}
}
@ -41,7 +45,7 @@ class PagerDutyConfig extends PureComponent<Props, State> {
const {options} = this.props.config
const {url} = options
const serviceKey = options['service-key']
const {testEnabled} = this.state
const {testEnabled, enabled} = this.state
return (
<form onSubmit={this.handleSubmit}>
@ -68,6 +72,18 @@ class PagerDutyConfig extends PureComponent<Props, State> {
/>
</div>
<div className="form-group col-xs-12">
<div className="form-control-static">
<input
type="checkbox"
id="disabled"
checked={enabled}
onChange={this.handleEnabledChange}
/>
<label htmlFor="disabled">Configuration Enabled</label>
</div>
</div>
<div className="form-group form-group-submit col-xs-12 text-center">
<button
className="btn btn-primary"
@ -79,7 +95,7 @@ class PagerDutyConfig extends PureComponent<Props, State> {
</button>
<button
className="btn btn-primary"
disabled={!this.state.testEnabled}
disabled={!this.state.testEnabled || !enabled}
onClick={this.props.onTest}
>
<span className="icon pulse-c" />
@ -92,12 +108,18 @@ class PagerDutyConfig extends PureComponent<Props, State> {
private handleServiceKeyRef = r => (this.serviceKey = r)
private handleEnabledChange = (e: ChangeEvent<HTMLInputElement>) => {
this.setState({enabled: e.target.checked})
this.disableTest()
}
private handleSubmit = async e => {
e.preventDefault()
const properties = {
'service-key': this.serviceKey.value,
url: this.url.value,
enabled: this.state.enabled,
}
const success = await this.props.onSave(properties)

28
ui/src/kapacitor/components/config/PushoverConfig.tsx
View File

@ -1,4 +1,5 @@
import React, {PureComponent} from 'react'
import _ from 'lodash'
import React, {PureComponent, ChangeEvent} from 'react'
import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'
import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
@ -17,6 +18,7 @@ interface Config {
token: boolean
'user-key': boolean
url: string
enabled: boolean
}
}
@ -29,6 +31,7 @@ interface Props {
interface State {
testEnabled: boolean
enabled: boolean
}
@ErrorHandling
@ -41,6 +44,7 @@ class PushoverConfig extends PureComponent<Props, State> {
super(props)
this.state = {
testEnabled: this.props.enabled,
enabled: _.get(this.props, 'config.options.enabled', false),
}
}
@ -48,7 +52,7 @@ class PushoverConfig extends PureComponent<Props, State> {
const {options} = this.props.config
const {token, url} = options
const userKey = options['user-key']
const {testEnabled} = this.state
const {testEnabled, enabled} = this.state
return (
<form onSubmit={this.handleSubmit}>
@ -98,6 +102,18 @@ class PushoverConfig extends PureComponent<Props, State> {
/>
</div>
<div className="form-group col-xs-12">
<div className="form-control-static">
<input
type="checkbox"
id="disabled"
checked={enabled}
onChange={this.handleEnabledChange}
/>
<label htmlFor="disabled">Configuration Enabled</label>
</div>
</div>
<div className="form-group form-group-submit col-xs-12 text-center">
<button
className="btn btn-primary"
@ -109,7 +125,7 @@ class PushoverConfig extends PureComponent<Props, State> {
</button>
<button
className="btn btn-primary"
disabled={!this.state.testEnabled}
disabled={!this.state.testEnabled || !enabled}
onClick={this.props.onTest}
>
<span className="icon pulse-c" />
@ -120,6 +136,11 @@ class PushoverConfig extends PureComponent<Props, State> {
)
}
private handleEnabledChange = (e: ChangeEvent<HTMLInputElement>) => {
this.setState({enabled: e.target.checked})
this.disableTest()
}
private handleSubmit = async e => {
e.preventDefault()
@ -127,6 +148,7 @@ class PushoverConfig extends PureComponent<Props, State> {
token: this.token.value,
url: this.url.value,
'user-key': this.userKey.value,
enabled: this.state.enabled,
}
const success = await this.props.onSave(properties)

33
ui/src/kapacitor/components/config/SMTPConfig.tsx
View File

@ -1,4 +1,5 @@
import React, {PureComponent} from 'react'
import _ from 'lodash'
import React, {PureComponent, ChangeEvent} from 'react'
import {ErrorHandling} from 'src/shared/decorators/errors'
interface Properties {
@ -18,6 +19,7 @@ interface Config {
password: boolean
from: string
to: string | string[]
enabled: boolean
}
}
@ -30,6 +32,7 @@ interface Props {
interface State {
testEnabled: boolean
enabled: boolean
}
@ErrorHandling
@ -45,11 +48,17 @@ class SMTPConfig extends PureComponent<Props, State> {
super(props)
this.state = {
testEnabled: this.props.enabled,
enabled: _.get(this.props, 'config.options.enabled', false),
}
}
public render() {
const {host, port, from, username, password, to} = this.props.config.options
const {host, port, from, username, password, to} = _.get(
this.props,
'config.options',
{}
)
const {enabled} = this.state
return (
<form onSubmit={this.handleSubmit}>
@ -127,6 +136,18 @@ class SMTPConfig extends PureComponent<Props, State> {
/>
</div>
<div className="form-group col-xs-12">
<div className="form-control-static">
<input
type="checkbox"
id="disabled"
checked={enabled}
onChange={this.handleEnabledChange}
/>
<label htmlFor="disabled">Configuration Enabled</label>
</div>
</div>
<div className="form-group form-group-submit col-xs-12 text-center">
<button
className="btn btn-primary"
@ -138,7 +159,7 @@ class SMTPConfig extends PureComponent<Props, State> {
</button>
<button
className="btn btn-primary"
disabled={!this.state.testEnabled}
disabled={!this.state.testEnabled || !enabled}
onClick={this.props.onTest}
>
<span className="icon pulse-c" />
@ -149,6 +170,11 @@ class SMTPConfig extends PureComponent<Props, State> {
)
}
private handleEnabledChange = (e: ChangeEvent<HTMLInputElement>) => {
this.setState({enabled: e.target.checked})
this.disableTest()
}
private handleSubmit = async e => {
e.preventDefault()
@ -159,6 +185,7 @@ class SMTPConfig extends PureComponent<Props, State> {
to: this.to.value ? [this.to.value] : [],
username: this.username.value,
password: this.password.value,
enabled: this.state.enabled,
}
const success = await this.props.onSave(properties)
if (success) {

27
ui/src/kapacitor/components/config/SensuConfig.tsx
View File

@ -1,4 +1,5 @@
import React, {PureComponent} from 'react'
import _ from 'lodash'
import React, {PureComponent, ChangeEvent} from 'react'
import {ErrorHandling} from 'src/shared/decorators/errors'
interface Properties {
@ -10,6 +11,7 @@ interface Config {
options: {
source: string
addr: string
enabled: boolean
}
}
@ -22,6 +24,7 @@ interface Props {
interface State {
testEnabled: boolean
enabled: boolean
}
@ErrorHandling
@ -33,11 +36,13 @@ class SensuConfig extends PureComponent<Props, State> {
super(props)
this.state = {
testEnabled: this.props.enabled,
enabled: _.get(this.props, 'config.options.enabled', false),
}
}
public render() {
const {source, addr} = this.props.config.options
const {enabled} = this.state
return (
<form onSubmit={this.handleSubmit}>
@ -65,6 +70,18 @@ class SensuConfig extends PureComponent<Props, State> {
/>
</div>
<div className="form-group col-xs-12">
<div className="form-control-static">
<input
type="checkbox"
id="disabled"
checked={enabled}
onChange={this.handleEnabledChange}
/>
<label htmlFor="disabled">Configuration Enabled</label>
</div>
</div>
<div className="form-group form-group-submit col-xs-12 text-center">
<button
className="btn btn-primary"
@ -76,7 +93,7 @@ class SensuConfig extends PureComponent<Props, State> {
</button>
<button
className="btn btn-primary"
disabled={!this.state.testEnabled}
disabled={!this.state.testEnabled || !enabled}
onClick={this.props.onTest}
>
<span className="icon pulse-c" />
@ -87,12 +104,18 @@ class SensuConfig extends PureComponent<Props, State> {
)
}
private handleEnabledChange = (e: ChangeEvent<HTMLInputElement>) => {
this.setState({enabled: e.target.checked})
this.disableTest()
}
private handleSubmit = async e => {
e.preventDefault()
const properties = {
source: this.source.value,
addr: this.addr.value,
enabled: this.state.enabled,
}
const success = await this.props.onSave(properties)

28
ui/src/kapacitor/components/config/SlackConfig.tsx
View File

@ -1,4 +1,5 @@
import React, {PureComponent} from 'react'
import _ from 'lodash'
import React, {PureComponent, ChangeEvent} from 'react'
import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
import {ErrorHandling} from 'src/shared/decorators/errors'
@ -11,6 +12,7 @@ interface Config {
options: {
url: boolean
channel: string
enabled: boolean
}
}
@ -23,6 +25,7 @@ interface Props {
interface State {
testEnabled: boolean
enabled: boolean
}
@ErrorHandling
@ -34,12 +37,13 @@ class SlackConfig extends PureComponent<Props, State> {
super(props)
this.state = {
testEnabled: this.props.enabled,
enabled: _.get(this.props, 'config.options.enabled', false),
}
}
public render() {
const {url, channel} = this.props.config.options
const {testEnabled} = this.state
const {testEnabled, enabled} = this.state
return (
<form onSubmit={this.handleSubmit}>
@ -73,6 +77,18 @@ class SlackConfig extends PureComponent<Props, State> {
/>
</div>
<div className="form-group col-xs-12">
<div className="form-control-static">
<input
type="checkbox"
id="disabled"
checked={enabled}
onChange={this.handleEnabledChange}
/>
<label htmlFor="disabled">Configuration Enabled</label>
</div>
</div>
<div className="form-group form-group-submit col-xs-12 text-center">
<button
className="btn btn-primary"
@ -84,7 +100,7 @@ class SlackConfig extends PureComponent<Props, State> {
</button>
<button
className="btn btn-primary"
disabled={!this.state.testEnabled}
disabled={!this.state.testEnabled || !enabled}
onClick={this.props.onTest}
>
<span className="icon pulse-c" />
@ -97,11 +113,17 @@ class SlackConfig extends PureComponent<Props, State> {
)
}
private handleEnabledChange = (e: ChangeEvent<HTMLInputElement>) => {
this.setState({enabled: e.target.checked})
this.disableTest()
}
private handleSubmit = async e => {
e.preventDefault()
const properties = {
url: this.url.value,
channel: this.channel.value,
enabled: this.state.enabled,
}
const success = await this.props.onSave(properties)
if (success) {

28
ui/src/kapacitor/components/config/TalkConfig.tsx
View File

@ -1,4 +1,5 @@
import React, {PureComponent} from 'react'
import _ from 'lodash'
import React, {PureComponent, ChangeEvent} from 'react'
import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
import {ErrorHandling} from 'src/shared/decorators/errors'
@ -12,11 +13,13 @@ interface Config {
options: {
url: boolean
author_name: string
enabled: boolean
}
}
interface State {
testEnabled: boolean
enabled: boolean
}
interface Props {
@ -35,12 +38,13 @@ class TalkConfig extends PureComponent<Props, State> {
super(props)
this.state = {
testEnabled: this.props.enabled,
enabled: _.get(this.props, 'config.options.enabled', false),
}
}
public render() {
const {url, author_name: author} = this.props.config.options
const {testEnabled} = this.state
const {testEnabled, enabled} = this.state
return (
<form onSubmit={this.handleSubmit}>
@ -67,6 +71,18 @@ class TalkConfig extends PureComponent<Props, State> {
/>
</div>
<div className="form-group col-xs-12">
<div className="form-control-static">
<input
type="checkbox"
id="disabled"
checked={enabled}
onChange={this.handleEnabledChange}
/>
<label htmlFor="disabled">Configuration Enabled</label>
</div>
</div>
<div className="form-group form-group-submit col-xs-12 text-center">
<button
className="btn btn-primary"
@ -78,7 +94,7 @@ class TalkConfig extends PureComponent<Props, State> {
</button>
<button
className="btn btn-primary"
disabled={!this.state.testEnabled}
disabled={!this.state.testEnabled || !enabled}
onClick={this.props.onTest}
>
<span className="icon pulse-c" />
@ -89,12 +105,18 @@ class TalkConfig extends PureComponent<Props, State> {
)
}
private handleEnabledChange = (e: ChangeEvent<HTMLInputElement>) => {
this.setState({enabled: e.target.checked})
this.disableTest()
}
private handleSubmit = async e => {
e.preventDefault()
const properties = {
url: this.url.value,
author_name: this.author.value,
enabled: this.state.enabled,
}
const success = await this.props.onSave(properties)

28
ui/src/kapacitor/components/config/TelegramConfig.tsx
View File

@ -1,4 +1,5 @@
import React, {PureComponent} from 'react'
import _ from 'lodash'
import React, {PureComponent, ChangeEvent} from 'react'
import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'
import {TELEGRAM_CHAT_ID_TIP, TELEGRAM_TOKEN_TIP} from 'src/kapacitor/copy'
@ -20,6 +21,7 @@ interface Config {
'disable-web-page-preview': boolean
'parse-mode': string
token: boolean
enabled: boolean
}
}
@ -32,6 +34,7 @@ interface Props {
interface State {
testEnabled: boolean
enabled: boolean
}
@ErrorHandling
@ -47,6 +50,7 @@ class TelegramConfig extends PureComponent<Props, State> {
super(props)
this.state = {
testEnabled: this.props.enabled,
enabled: _.get(this.props, 'config.options.enabled', false),
}
}
@ -57,7 +61,7 @@ class TelegramConfig extends PureComponent<Props, State> {
const disableNotification = options['disable-notification']
const disableWebPagePreview = options['disable-web-page-preview']
const parseMode = options['parse-mode']
const {testEnabled} = this.state
const {testEnabled, enabled} = this.state
return (
<form onSubmit={this.handleSubmit}>
@ -177,6 +181,18 @@ class TelegramConfig extends PureComponent<Props, State> {
</div>
</div>
<div className="form-group col-xs-12">
<div className="form-control-static">
<input
type="checkbox"
id="disabled"
checked={enabled}
onChange={this.handleEnabledChange}
/>
<label htmlFor="disabled">Configuration Enabled</label>
</div>
</div>
<div className="form-group form-group-submit col-xs-12 text-center">
<button
className="btn btn-primary"
@ -188,7 +204,7 @@ class TelegramConfig extends PureComponent<Props, State> {
</button>
<button
className="btn btn-primary"
disabled={!this.state.testEnabled}
disabled={!this.state.testEnabled || !enabled}
onClick={this.props.onTest}
>
<span className="icon pulse-c" />
@ -199,6 +215,11 @@ class TelegramConfig extends PureComponent<Props, State> {
)
}
private handleEnabledChange = (e: ChangeEvent<HTMLInputElement>) => {
this.setState({enabled: e.target.checked})
this.disableTest()
}
private handleSubmit = async e => {
e.preventDefault()
@ -216,6 +237,7 @@ class TelegramConfig extends PureComponent<Props, State> {
'disable-web-page-preview': this.disableWebPagePreview.checked,
'parse-mode': parseMode,
token: this.token.value,
enabled: this.state.enabled,
}
const success = await this.props.onSave(properties)

28
ui/src/kapacitor/components/config/VictorOpsConfig.tsx
View File

@ -1,4 +1,5 @@
import React, {PureComponent} from 'react'
import _ from 'lodash'
import React, {PureComponent, ChangeEvent} from 'react'
import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
import {ErrorHandling} from 'src/shared/decorators/errors'
@ -14,6 +15,7 @@ interface Config {
'api-key': boolean
'routing-key': string
url: string
enabled: boolean
}
}
@ -26,6 +28,7 @@ interface Props {
interface State {
testEnabled: boolean
enabled: boolean
}
@ErrorHandling
@ -38,6 +41,7 @@ class VictorOpsConfig extends PureComponent<Props, State> {
super(props)
this.state = {
testEnabled: this.props.enabled,
enabled: _.get(this.props, 'config.options.enabled', false),
}
}
@ -46,7 +50,7 @@ class VictorOpsConfig extends PureComponent<Props, State> {
const apiKey = options['api-key']
const routingKey = options['routing-key']
const {url} = options
const {testEnabled} = this.state
const {testEnabled, enabled} = this.state
return (
<form onSubmit={this.handleSubmit}>
@ -85,6 +89,18 @@ class VictorOpsConfig extends PureComponent<Props, State> {
/>
</div>
<div className="form-group col-xs-12">
<div className="form-control-static">
<input
type="checkbox"
id="disabled"
checked={enabled}
onChange={this.handleEnabledChange}
/>
<label htmlFor="disabled">Configuration Enabled</label>
</div>
</div>
<div className="form-group form-group-submit col-xs-12 text-center">
<button
className="btn btn-primary"
@ -96,7 +112,7 @@ class VictorOpsConfig extends PureComponent<Props, State> {
</button>
<button
className="btn btn-primary"
disabled={!this.state.testEnabled}
disabled={!this.state.testEnabled || !enabled}
onClick={this.props.onTest}
>
<span className="icon pulse-c" />
@ -107,6 +123,11 @@ class VictorOpsConfig extends PureComponent<Props, State> {
)
}
private handleEnabledChange = (e: ChangeEvent<HTMLInputElement>) => {
this.setState({enabled: e.target.checked})
this.disableTest()
}
private handleSubmit = async e => {
e.preventDefault()
@ -114,6 +135,7 @@ class VictorOpsConfig extends PureComponent<Props, State> {
'api-key': this.apiKey.value,
'routing-key': this.routingKey.value,
url: this.url.value,
enabled: this.state.enabled,
}
const success = await this.props.onSave(properties)

6
ui/src/shared/apis/index.js
View File

@ -156,7 +156,7 @@ export const getKapacitorConfigSection = (kapacitor, section) => {
}
export function updateKapacitorConfigSection(kapacitor, section, properties) {
return AJAX({
const params = {
method: 'POST',
url: kapacitor.links.proxy,
params: {
@ -168,7 +168,9 @@ export function updateKapacitorConfigSection(kapacitor, section, properties) {
headers: {
'Content-Type': 'application/json',
},
})
}
return AJAX(params)
}
export const testAlertOutput = async (kapacitor, outputName) => {

8
ui/src/shared/components/FieldList.tsx
View File

@ -61,18 +61,15 @@ interface Props {
addInitialField: (field: Field, groupBy: GroupBy) => void
initialGroupByTime: string | null
isQuerySupportedByExplorer: boolean
source: Source
}
interface State {
fields: Field[]
}
interface Context {
source: Source
}
@ErrorHandling
class FieldList extends PureComponent<Props, State> {
public static context: Context
public static defaultProps: Partial<Props> = {
isKapacitorRule: false,
initialGroupByTime: null,
@ -249,8 +246,7 @@ class FieldList extends PureComponent<Props, State> {
private getFields = (): void => {
const {database, measurement, retentionPolicy} = this.props.query
const {source} = this.context
const {querySource} = this.props
const {querySource, source} = this.props
const proxy =
_.get(querySource, ['links', 'proxy'], null) || source.links.proxy

8
ui/src/style/components/time-machine/ifql-builder.scss
View File

@ -21,6 +21,7 @@ $ifql-invalid-color: $c-viridian;
position: relative;
background-color: $g4-onyx;
transition: background-color 0.25s ease;
&:hover {
background-color: $g6-smoke;
}
@ -41,6 +42,7 @@ $ifql-invalid-color: $c-viridian;
display: flex;
flex-wrap: nowrap;
align-items: center;
&:last-of-type {
margin-bottom: 0;
}
@ -82,7 +84,10 @@ $ifql-invalid-color: $c-viridian;
@extend %ifql-node;
display: flex;
align-items: center;
margin-left: $ifql-node-gap; // Connection Line
margin-left: $ifql-node-gap;
// Connection Line
&:after {
content: '';
height: 4px;
@ -93,6 +98,7 @@ $ifql-invalid-color: $c-viridian;
left: 0;
transform: translate(-100%, -50%);
}
&:first-child:after {
content: none;
margin-left: 0;

1
ui/src/style/pages/tickscript-editor.scss
View File

@ -8,6 +8,7 @@ $tickscript-controls-height: 60px;
.tickscript {
flex: 1 0 0;
position: relative;
max-width: 100%;
}
.tickscript-controls,
.tickscript-console,

56
ui/src/utils/ajax.ts
View File

@ -1,19 +1,47 @@
import axios from 'axios'
import axios, {AxiosResponse} from 'axios'
let links
export const setAJAXLinks = ({updatedLinks}) => {
export const setAJAXLinks = ({updatedLinks}): void => {
links = updatedLinks
}
// do not prefix route with basepath, ex. for external links
const addBasepath = (url, excludeBasepath) => {
const addBasepath = (url, excludeBasepath): string => {
const basepath = window.basepath || ''
return excludeBasepath ? url : `${basepath}${url}`
}
const generateResponseWithLinks = (response, newLinks) => {
interface Links {
auth: object
logoutLink: object
external: object
users: object
allUsers: object
organizations: object
meLink: object
config: object
environment: object
ifql: object
}
interface LinksInputs {
auth: object
logout: object
external: object
users: object
allUsers: object
organizations: object
me: object
config: object
environment: object
ifql: object
}
function generateResponseWithLinks<T extends object>(
response: T,
newLinks: LinksInputs
): T & Links {
const {
auth,
logout,
@ -27,8 +55,7 @@ const generateResponseWithLinks = (response, newLinks) => {
ifql,
} = newLinks
return {
...response,
const linksObj = {
auth: {links: auth},
logoutLink: logout,
external,
@ -40,6 +67,8 @@ const generateResponseWithLinks = (response, newLinks) => {
environment,
ifql,
}
return Object.assign({}, response, linksObj)
}
interface RequestParams {
@ -52,7 +81,7 @@ interface RequestParams {
headers?: object
}
const AJAX = async (
async function AJAX<T = any>(
{
url,
resource = null,
@ -63,7 +92,7 @@ const AJAX = async (
headers = {},
}: RequestParams,
excludeBasepath = false
) => {
): Promise<(T | T & {links: object}) | AxiosResponse<T>> {
try {
if (!links) {
console.error(
@ -79,7 +108,7 @@ const AJAX = async (
: addBasepath(`${links[resource]}`, excludeBasepath)
}
const response = await axios({
const response = await axios.request<T>({
url,
method,
data,
@ -97,12 +126,9 @@ const AJAX = async (
}
}
export const getAJAX = async url => {
export async function getAJAX<T = any>(url: string): Promise<AxiosResponse<T>> {
try {
return await axios({
method: 'GET',
url: addBasepath(url, false),
})
return await axios.request<T>({method: 'GET', url: addBasepath(url, false)})
} catch (error) {
console.error(error)
throw error

22
ui/yarn.lock
View File

@ -471,11 +471,12 @@ aws4@^1.2.1, aws4@^1.6.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.7.0.tgz#d4d0e9b9dbfca77bf08eeb0a8a471550fe39e289"
axios@^0.13.1:
version "0.13.1"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.13.1.tgz#3e67abfe4333bc9d2d5fe6fbd13b4694eafc8df8"
axios@^0.18.0:
version "0.18.0"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
dependencies:
follow-redirects "0.0.7"
follow-redirects "^1.3.0"
is-buffer "^1.1.5"
babel-code-frame@^6.16.0, babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
version "6.26.0"
@ -3485,14 +3486,7 @@ flush-write-stream@^1.0.0:
inherits "^2.0.1"
readable-stream "^2.0.4"
follow-redirects@0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-0.0.7.tgz#34b90bab2a911aa347571da90f22bd36ecd8a919"
dependencies:
debug "^2.2.0"
stream-consume "^0.1.0"
follow-redirects@^1.0.0:
follow-redirects@^1.0.0, follow-redirects@^1.3.0:
version "1.4.1"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.4.1.tgz#d8120f4518190f55aac65bb6fc7b85fcd666d6aa"
dependencies:
@ -8223,10 +8217,6 @@ stream-browserify@^2.0.1:
inherits "~2.0.1"
readable-stream "^2.0.2"
stream-consume@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/stream-consume/-/stream-consume-0.1.1.tgz#d3bdb598c2bd0ae82b8cac7ac50b1107a7996c48"
stream-each@^1.1.0:
version "1.2.2"
resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.2.tgz#8e8c463f91da8991778765873fe4d960d8f616bd"