style cleanup
Jade McGough
parent
8e3e9af73f
commit
5acf147bfe
|
|
@ -54,56 +54,54 @@ export const SourceForm = React.createClass({
|
|||
const {source, editMode, onInputChange} = this.props
|
||||
|
||||
return (
|
||||
<div className="panel panel-minimal">
|
||||
<div className="panel-body">
|
||||
<h4 className="text-center">Connection Details</h4>
|
||||
<br/>
|
||||
<div className="panel-body">
|
||||
<h4 className="text-center">Connection Details</h4>
|
||||
<br/>
|
||||
|
||||
<form onSubmit={this.handleSubmitForm}>
|
||||
<div className="form-group col-xs-12 col-sm-6">
|
||||
<label htmlFor="connect-string"> Connection String</label>
|
||||
<input type="text" name="url" ref={(r) => this.sourceURL = r} className="form-control" id="connect-string" placeholder="http://localhost:8086" onChange={onInputChange} value={source.url || ''} onBlur={this.handleBlurSourceURL}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-12 col-sm-6">
|
||||
<label htmlFor="name">Name</label>
|
||||
<input type="text" name="name" ref={(r) => this.sourceName = r} className="form-control" id="name" placeholder="Influx 1" onChange={onInputChange} value={source.name || ''}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-12 col-sm-6">
|
||||
<label htmlFor="username">Username</label>
|
||||
<input type="text" name="username" ref={(r) => this.sourceUsername = r} className="form-control" id="username" onChange={onInputChange} value={source.username || ''}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-12 col-sm-6">
|
||||
<label htmlFor="password">Password</label>
|
||||
<input type="password" name="password" ref={(r) => this.sourcePassword = r} className="form-control" id="password" onChange={onInputChange} value={source.password || ''}></input>
|
||||
</div>
|
||||
{_.get(source, 'type', '').includes("enterprise") ?
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="meta-url">Meta Service Connection URL</label>
|
||||
<input type="text" name="metaUrl" ref={(r) => this.metaUrl = r} className="form-control" id="meta-url" placeholder="http://localhost:8091" onChange={onInputChange} value={source.metaUrl || ''}></input>
|
||||
</div> : null}
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="telegraf">Telegraf database</label>
|
||||
<input type="text" name="telegraf" ref={(r) => this.sourceTelegraf = r} className="form-control" id="telegraf" onChange={onInputChange} value={source.telegraf || 'telegraf'}></input>
|
||||
<form onSubmit={this.handleSubmitForm}>
|
||||
<div className="form-group col-xs-12 col-sm-6">
|
||||
<label htmlFor="connect-string"> Connection String</label>
|
||||
<input type="text" name="url" ref={(r) => this.sourceURL = r} className="form-control" id="connect-string" placeholder="http://localhost:8086" onChange={onInputChange} value={source.url || ''} onBlur={this.handleBlurSourceURL}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-12 col-sm-6">
|
||||
<label htmlFor="name">Name</label>
|
||||
<input type="text" name="name" ref={(r) => this.sourceName = r} className="form-control" id="name" placeholder="Influx 1" onChange={onInputChange} value={source.name || ''}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-12 col-sm-6">
|
||||
<label htmlFor="username">Username</label>
|
||||
<input type="text" name="username" ref={(r) => this.sourceUsername = r} className="form-control" id="username" onChange={onInputChange} value={source.username || ''}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-12 col-sm-6">
|
||||
<label htmlFor="password">Password</label>
|
||||
<input type="password" name="password" ref={(r) => this.sourcePassword = r} className="form-control" id="password" onChange={onInputChange} value={source.password || ''}></input>
|
||||
</div>
|
||||
{_.get(source, 'type', '').includes("enterprise") ?
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="meta-url">Meta Service Connection URL</label>
|
||||
<input type="text" name="metaUrl" ref={(r) => this.metaUrl = r} className="form-control" id="meta-url" placeholder="http://localhost:8091" onChange={onInputChange} value={source.metaUrl || ''}></input>
|
||||
</div> : null}
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="telegraf">Telegraf database</label>
|
||||
<input type="text" name="telegraf" ref={(r) => this.sourceTelegraf = r} className="form-control" id="telegraf" onChange={onInputChange} value={source.telegraf || 'telegraf'}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-12">
|
||||
<div className="form-control-static">
|
||||
<input type="checkbox" id="defaultSourceCheckbox" defaultChecked={source.default} ref={(r) => this.sourceDefault = r} />
|
||||
<label htmlFor="defaultSourceCheckbox">Make this the default source</label>
|
||||
</div>
|
||||
</div>
|
||||
{_.get(source, 'url', '').startsWith("https") ?
|
||||
<div className="form-group col-xs-12">
|
||||
<div className="form-control-static">
|
||||
<input type="checkbox" id="defaultSourceCheckbox" defaultChecked={source.default} ref={(r) => this.sourceDefault = r} />
|
||||
<label htmlFor="defaultSourceCheckbox">Make this the default source</label>
|
||||
<input type="checkbox" id="insecureSkipVerifyCheckbox" defaultChecked={source.insecureSkipVerify} ref={(r) => this.sourceInsecureSkipVerify = r} />
|
||||
<label htmlFor="insecureSkipVerifyCheckbox">Unsafe SSL</label>
|
||||
</div>
|
||||
</div>
|
||||
{_.get(source, 'url', '').startsWith("https") ?
|
||||
<div className="form-group col-xs-12">
|
||||
<div className="form-control-static">
|
||||
<input type="checkbox" id="insecureSkipVerifyCheckbox" defaultChecked={source.insecureSkipVerify} ref={(r) => this.sourceInsecureSkipVerify = r} />
|
||||
<label htmlFor="insecureSkipVerifyCheckbox">Unsafe SSL</label>
|
||||
</div>
|
||||
<label className="form-helper">{insecureSkipVerifyText}</label>
|
||||
</div> : null}
|
||||
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className={classNames('btn btn-block', {'btn-primary': editMode, 'btn-success': !editMode})} type="submit">{editMode ? "Save Changes" : "Add Source"}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<label className="form-helper">{insecureSkipVerifyText}</label>
|
||||
</div> : null}
|
||||
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className={classNames('btn btn-block', {'btn-primary': editMode, 'btn-success': !editMode})} type="submit">{editMode ? "Save Changes" : "Add Source"}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -110,67 +110,26 @@ export const CreateSource = React.createClass({
|
|||
})
|
||||
},
|
||||
|
||||
// <div className="panel panel-minimal">
|
||||
// <div className="panel-heading text-center">
|
||||
// <h2 className="deluxe">Welcome to Chronograf</h2>
|
||||
// </div>
|
||||
// <div className="panel-body">
|
||||
// <h4 className="text-center">Connect to a New Source</h4>
|
||||
// <br/>
|
||||
//
|
||||
// <form onSubmit={this.handleNewSource}>
|
||||
// <div>
|
||||
// <div className="form-group col-xs-6 col-sm-4 col-sm-offset-2">
|
||||
// <label htmlFor="connect-string">Connection String</label>
|
||||
// <input ref={(r) => this.sourceURL = r} onChange={this.onInputChange} className="form-control" id="connect-string" defaultValue="http://localhost:8086"></input>
|
||||
// </div>
|
||||
// <div className="form-group col-xs-6 col-sm-4">
|
||||
// <label htmlFor="name">Name</label>
|
||||
// <input ref={(r) => this.sourceName = r} className="form-control" id="name" defaultValue="Influx 1"></input>
|
||||
// </div>
|
||||
// <div className="form-group col-xs-6 col-sm-4 col-sm-offset-2">
|
||||
// <label htmlFor="username">Username</label>
|
||||
// <input ref={(r) => this.sourceUser = r} className="form-control" id="username"></input>
|
||||
// </div>
|
||||
// <div className="form-group col-xs-6 col-sm-4">
|
||||
// <label htmlFor="password">Password</label>
|
||||
// <input ref={(r) => this.sourcePassword = r} className="form-control" id="password" type="password"></input>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="form-group col-xs-8 col-xs-offset-2">
|
||||
// <label htmlFor="telegraf">Telegraf Database</label>
|
||||
// <input ref={(r) => this.sourceTelegraf = r} className="form-control" id="telegraf" type="text" defaultValue="telegraf"></input>
|
||||
// </div>
|
||||
// {this.state.showSSL ?
|
||||
// <div className="form-group col-xs-8 col-xs-offset-2">
|
||||
// <div className="form-control-static">
|
||||
// <input type="checkbox" id="insecureSkipVerifyCheckbox" ref={(r) => this.sourceInsecureSkipVerify = r} />
|
||||
// <label htmlFor="insecureSkipVerifyCheckbox">Unsafe SSL</label>
|
||||
// </div>
|
||||
// <label className="form-helper">{insecureSkipVerifyText}</label>
|
||||
// </div> : null}
|
||||
// <div className="form-group form-group-submit col-xs-12 text-center">
|
||||
// <button className="btn btn-success" type="submit">Connect New Source</button>
|
||||
// </div>
|
||||
// </form>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
render() {
|
||||
const {source} = this.state
|
||||
|
||||
return (
|
||||
<div className="select-source-page" id="select-source-page">
|
||||
<div className="select-source-page">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-md-8 col-md-offset-2">
|
||||
<SourceForm
|
||||
source={source}
|
||||
editMode={false}
|
||||
onInputChange={this.handleInputChange}
|
||||
onSubmit={this.handleSubmit}
|
||||
onBlurSourceURL={this.handleBlurSourceURL}
|
||||
/>
|
||||
<div className="panel panel-minimal">
|
||||
<div className="panel-heading text-center">
|
||||
<h2 className="deluxe">Welcome to Chronograf</h2>
|
||||
</div>
|
||||
<SourceForm
|
||||
source={source}
|
||||
editMode={false}
|
||||
onInputChange={this.handleInputChange}
|
||||
onSubmit={this.handleSubmit}
|
||||
onBlurSourceURL={this.handleBlurSourceURL}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -125,13 +125,15 @@ export const SourcePage = React.createClass({
|
|||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-md-8 col-md-offset-2">
|
||||
<SourceForm
|
||||
source={source}
|
||||
editMode={editMode}
|
||||
onInputChange={this.handleInputChange}
|
||||
onSubmit={this.handleSubmit}
|
||||
onBlurSourceURL={this.handleBlurSourceURL}
|
||||
/>
|
||||
<div className="panel panel-minimal">
|
||||
<SourceForm
|
||||
source={source}
|
||||
editMode={editMode}
|
||||
onInputChange={this.handleInputChange}
|
||||
onSubmit={this.handleSubmit}
|
||||
onBlurSourceURL={this.handleBlurSourceURL}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,6 @@
|
|||
Unsorted
|
||||
----------------------------------------------
|
||||
*/
|
||||
.select-source-page {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
@include custom-scrollbar($g2-kevlar, $c-pool);
|
||||
@include gradient-v($g2-kevlar, $g0-obsidian);
|
||||
}
|
||||
.text-right .btn {
|
||||
margin: 0 0 0 4px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue