Move KapacitorForm to class based component
Brandon Farmer
parent
6f8ec406c6
commit
6d7126b634
|
|
@ -1,4 +1,4 @@
|
|||
import React, {PureComponent, ChangeEvent} from 'react'
|
||||
import React, {Component, ChangeEvent} from 'react'
|
||||
import {findDOMNode} from 'react-dom'
|
||||
import {
|
||||
DragSourceSpec,
|
||||
|
|
@ -112,7 +112,7 @@ function MyDragSource(dragv1, dragv2, dragfunc1) {
|
|||
isDragging: monitor.isDragging(),
|
||||
})
|
||||
)
|
||||
export default class GraphOptionsCustomizableField extends PureComponent<
|
||||
export default class GraphOptionsCustomizableField extends Component<
|
||||
GraphOptionsCustomizableFieldProps
|
||||
> {
|
||||
constructor(props) {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import React, {ChangeEvent, MouseEvent, SFC} from 'react'
|
||||
import React, {ChangeEvent, MouseEvent, PureComponent} from 'react'
|
||||
|
||||
import AlertOutputs from 'src/kapacitor/components/AlertOutputs'
|
||||
import Input from 'src/kapacitor/components/KapacitorFormInput'
|
||||
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
|
||||
|
||||
import {insecureSkipVerifyText} from 'src/shared/copy/tooltipText'
|
||||
import {Kapacitor, Source} from 'src/types'
|
||||
import KapacitorFormSkipVerify from 'src/kapacitor/components/KapacitorFormSkipVerify'
|
||||
|
||||
export interface Notification {
|
||||
id?: string
|
||||
|
|
@ -30,125 +30,149 @@ interface Props {
|
|||
notify: (message: Notification | NotificationFunc) => void
|
||||
}
|
||||
|
||||
const KapacitorForm: SFC<Props> = ({
|
||||
onChangeUrl,
|
||||
onReset,
|
||||
kapacitor,
|
||||
kapacitor: {url, name, username, password, insecureSkipVerify},
|
||||
onSubmit,
|
||||
exists,
|
||||
onInputChange,
|
||||
onCheckboxChange,
|
||||
source,
|
||||
hash,
|
||||
notify,
|
||||
}) => (
|
||||
<div className="page">
|
||||
<div className="page-header">
|
||||
<div className="page-header__container">
|
||||
<div className="page-header__left">
|
||||
<h1 className="page-header__title">{`${
|
||||
exists ? 'Configure' : 'Add a New'
|
||||
} Kapacitor Connection`}</h1>
|
||||
class KapacitorForm extends PureComponent<Props> {
|
||||
public render() {
|
||||
const {
|
||||
onChangeUrl,
|
||||
onReset,
|
||||
kapacitor,
|
||||
kapacitor: {name, username, password},
|
||||
onSubmit,
|
||||
exists,
|
||||
onInputChange,
|
||||
onCheckboxChange,
|
||||
source,
|
||||
hash,
|
||||
notify,
|
||||
} = this.props
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-header">
|
||||
<div className="page-header__container">
|
||||
<div className="page-header__left">
|
||||
<h1 className="page-header__title">{this.headerText}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FancyScrollbar className="page-contents">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-md-3">
|
||||
<div className="panel">
|
||||
<div className="panel-heading">
|
||||
<h2 className="panel-title">Connection Details</h2>
|
||||
</div>
|
||||
<div className="panel-body">
|
||||
<form onSubmit={onSubmit}>
|
||||
<div>
|
||||
<Input
|
||||
name="kapaUrl"
|
||||
label="Kapacitor URL"
|
||||
value={url}
|
||||
placeholder={url}
|
||||
onChange={onChangeUrl}
|
||||
/>
|
||||
<Input
|
||||
name="name"
|
||||
label="Name"
|
||||
value={name}
|
||||
placeholder={name}
|
||||
onChange={onInputChange}
|
||||
maxLength={33}
|
||||
/>
|
||||
<Input
|
||||
name="username"
|
||||
label="Username"
|
||||
value={username || ''}
|
||||
placeholder={username}
|
||||
onChange={onInputChange}
|
||||
/>
|
||||
<Input
|
||||
name="password"
|
||||
label="password"
|
||||
placeholder="password"
|
||||
value={password || ''}
|
||||
onChange={onInputChange}
|
||||
inputType="password"
|
||||
/>
|
||||
<FancyScrollbar className="page-contents">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-md-3">
|
||||
<div className="panel">
|
||||
<div className="panel-heading">
|
||||
<h2 className="panel-title">Connection Details</h2>
|
||||
</div>
|
||||
{url &&
|
||||
url.startsWith('https') && (
|
||||
<div className="form-group col-xs-12">
|
||||
<div className="form-control-static">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="insecureSkipVerifyCheckbox"
|
||||
name="insecureSkipVerify"
|
||||
checked={insecureSkipVerify}
|
||||
onChange={onCheckboxChange}
|
||||
/>
|
||||
<label htmlFor="insecureSkipVerifyCheckbox">
|
||||
Unsafe SSL
|
||||
</label>
|
||||
</div>
|
||||
<label className="form-helper">
|
||||
{insecureSkipVerifyText}
|
||||
</label>
|
||||
<div className="panel-body">
|
||||
<form onSubmit={onSubmit}>
|
||||
<div>
|
||||
<Input
|
||||
name="kapaUrl"
|
||||
label="Kapacitor URL"
|
||||
value={this.url}
|
||||
placeholder={this.url}
|
||||
onChange={onChangeUrl}
|
||||
/>
|
||||
<Input
|
||||
name="name"
|
||||
label="Name"
|
||||
value={name}
|
||||
placeholder={name}
|
||||
onChange={onInputChange}
|
||||
maxLength={33}
|
||||
/>
|
||||
<Input
|
||||
name="username"
|
||||
label="Username"
|
||||
value={username || ''}
|
||||
placeholder={username}
|
||||
onChange={onInputChange}
|
||||
/>
|
||||
<Input
|
||||
name="password"
|
||||
label="password"
|
||||
placeholder="password"
|
||||
value={password || ''}
|
||||
onChange={onInputChange}
|
||||
inputType="password"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group form-group-submit col-xs-12 text-center">
|
||||
<button
|
||||
className="btn btn-default"
|
||||
type="button"
|
||||
onClick={onReset}
|
||||
data-test="reset-button"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-success"
|
||||
type="submit"
|
||||
data-test="submit-button"
|
||||
>
|
||||
{exists ? 'Update' : 'Connect'}
|
||||
</button>
|
||||
{this.isSecure && (
|
||||
<KapacitorFormSkipVerify
|
||||
kapacitor={kapacitor}
|
||||
onCheckboxChange={onCheckboxChange}
|
||||
/>
|
||||
)}
|
||||
<div className="form-group form-group-submit col-xs-12 text-center">
|
||||
<button
|
||||
className="btn btn-default"
|
||||
type="button"
|
||||
onClick={onReset}
|
||||
data-test="reset-button"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-success"
|
||||
type="submit"
|
||||
data-test="submit-button"
|
||||
>
|
||||
{this.buttonText}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-9">
|
||||
<AlertOutputs
|
||||
hash={hash}
|
||||
exists={exists}
|
||||
source={source}
|
||||
kapacitor={kapacitor}
|
||||
notify={notify}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-9">
|
||||
<AlertOutputs
|
||||
hash={hash}
|
||||
exists={exists}
|
||||
source={source}
|
||||
kapacitor={kapacitor}
|
||||
notify={notify}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FancyScrollbar>
|
||||
</div>
|
||||
</FancyScrollbar>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
private get buttonText(): string {
|
||||
const {exists} = this.props
|
||||
|
||||
if (exists) {
|
||||
return 'Update'
|
||||
}
|
||||
|
||||
return 'Connect'
|
||||
}
|
||||
|
||||
private get headerText(): string {
|
||||
const {exists} = this.props
|
||||
|
||||
let prefix = 'Add a New'
|
||||
if (exists) {
|
||||
prefix = 'Configure'
|
||||
}
|
||||
|
||||
return `${prefix} Kapacitor Connection`
|
||||
}
|
||||
|
||||
private get url(): string {
|
||||
const {kapacitor: {url}} = this.props
|
||||
if (url) {
|
||||
return url
|
||||
}
|
||||
|
||||
return ''
|
||||
}
|
||||
|
||||
private get isSecure(): boolean {
|
||||
return this.url.startsWith('https')
|
||||
}
|
||||
}
|
||||
|
||||
export default KapacitorForm
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
import React, {SFC, ChangeEvent} from 'react'
|
||||
import {Kapacitor} from 'src/types'
|
||||
import {insecureSkipVerifyText} from 'src/shared/copy/tooltipText'
|
||||
|
||||
interface Props {
|
||||
kapacitor: Kapacitor
|
||||
onCheckboxChange: (e: ChangeEvent<HTMLInputElement>) => void
|
||||
}
|
||||
|
||||
const KapacitorFormSkipVerify: SFC<Props> = ({
|
||||
kapacitor: {insecureSkipVerify},
|
||||
onCheckboxChange,
|
||||
}) => {
|
||||
return (
|
||||
<div className="form-group col-xs-12">
|
||||
<div className="form-control-static">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="insecureSkipVerifyCheckbox"
|
||||
name="insecureSkipVerify"
|
||||
checked={insecureSkipVerify}
|
||||
onChange={onCheckboxChange}
|
||||
/>
|
||||
<label htmlFor="insecureSkipVerifyCheckbox">Unsafe SSL</label>
|
||||
</div>
|
||||
<label className="form-helper">{insecureSkipVerifyText}</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default KapacitorFormSkipVerify
|
||||
Loading…
Reference in New Issue