All pages have new page classes
- More consistent - More semantic - Might have missed a page or two, will circle back laterpull/634/head
Alex P
parent
c99cf1dbb1
commit
72293b3fcf
|
|
@ -50,14 +50,12 @@ const App = React.createClass({
|
|||
const {sourceID, base64ExplorerID} = this.props.params;
|
||||
|
||||
return (
|
||||
<div className="chronograf-wrapper--flex">
|
||||
<div className="chronograf-root">
|
||||
<SideNavContainer sourceID={sourceID} explorationID={base64ExplorerID} addFlashMessage={this.handleNotification} currentLocation={this.props.location.pathname} />
|
||||
<div className="page-wrapper">
|
||||
{this.renderNotifications()}
|
||||
{this.props.children && React.cloneElement(this.props.children, {
|
||||
addFlashMessage: this.handleNotification,
|
||||
})}
|
||||
</div>
|
||||
{this.renderNotifications()}
|
||||
{this.props.children && React.cloneElement(this.props.children, {
|
||||
addFlashMessage: this.handleNotification,
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -96,17 +96,17 @@ const AlertsApp = React.createClass({
|
|||
return (
|
||||
// I stole this from the Hosts page.
|
||||
// Perhaps we should create an abstraction?
|
||||
<div className="hosts hosts-page">
|
||||
<div className="chronograf-header">
|
||||
<div className="chronograf-header__container">
|
||||
<div className="chronograf-header__left">
|
||||
<div className="page">
|
||||
<div className="page-header">
|
||||
<div className="page-header__container">
|
||||
<div className="page-header__left">
|
||||
<h1>
|
||||
Alert History
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hosts-page-scroll-container">
|
||||
<div className="page-contents">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ const App = React.createClass({
|
|||
const {base64ExplorerID} = this.props.params;
|
||||
|
||||
return (
|
||||
<div className="data-explorer-container">
|
||||
<div className="page">
|
||||
<DataExplorer source={this.props.source} explorerID={this.decodeID(base64ExplorerID)} />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -108,8 +108,8 @@ const Header = React.createClass({
|
|||
{text: 'Delete', icon: 'trash', target: '#deleteExplorerModal', handler: this.openDeleteExplorerModal},
|
||||
];
|
||||
return (
|
||||
<div className="chronograf-header data-explorer__header">
|
||||
<div className="chronograf-header__left">
|
||||
<div className="page-header data-explorer__header">
|
||||
<div className="page-header__left">
|
||||
<h1 className="dropdown-title">Exploration:</h1>
|
||||
<Dropdown
|
||||
className="sessions-dropdown"
|
||||
|
|
@ -120,7 +120,7 @@ const Header = React.createClass({
|
|||
/>
|
||||
<div className="btn btn-sm btn-primary sessions-dropdown__btn" onClick={this.handleCreateExploration}>New Exploration</div>
|
||||
</div>
|
||||
<div className="chronograf-header__right">
|
||||
<div className="page-header__right">
|
||||
<h1>Source:</h1>
|
||||
<div className="source-indicator">
|
||||
<span className="icon cpu"></span>
|
||||
|
|
|
|||
|
|
@ -97,20 +97,20 @@ export const HostPage = React.createClass({
|
|||
const {layouts, timeRange} = this.state;
|
||||
|
||||
return (
|
||||
<div className="host-dashboard hosts-page">
|
||||
<div className="chronograf-header hosts-dashboard-header">
|
||||
<div className="chronograf-header__container">
|
||||
<div className="chronograf-header__left">
|
||||
<div className="page">
|
||||
<div className="page-header full-width">
|
||||
<div className="page-header__container">
|
||||
<div className="page-header__left">
|
||||
<h1>{hostID}</h1>
|
||||
</div>
|
||||
<div className="chronograf-header__right">
|
||||
<div className="page-header__right">
|
||||
<h1>Range:</h1>
|
||||
<TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={timeRange.inputValue} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hosts-page-scroll-container">
|
||||
<div className="container-fluid hosts-dashboard">
|
||||
<div className="page-contents">
|
||||
<div className="container-fluid full-width">
|
||||
{ (layouts.length > 0) ? this.renderLayouts(layouts) : '' }
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -44,17 +44,17 @@ export const HostsPage = React.createClass({
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="hosts hosts-page">
|
||||
<div className="chronograf-header">
|
||||
<div className="chronograf-header__container">
|
||||
<div className="chronograf-header__left">
|
||||
<div className="page">
|
||||
<div className="page-header">
|
||||
<div className="page-header__container">
|
||||
<div className="page-header__left">
|
||||
<h1>
|
||||
Host List
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hosts-page-scroll-container">
|
||||
<div className="page-contents">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
|
|
|
|||
|
|
@ -30,14 +30,14 @@ export const KapacitorRule = React.createClass({
|
|||
const {chooseTrigger, updateRuleValues} = kapacitorActions;
|
||||
|
||||
return (
|
||||
<div className="kapacitor-rule-page">
|
||||
<div className="page">
|
||||
<RuleHeader
|
||||
rule={rule}
|
||||
actions={kapacitorActions}
|
||||
onSave={isEditing ? this.handleEdit : this.handleCreate}
|
||||
validationError={this.validationError()}
|
||||
/>
|
||||
<div className="rule-builder-wrapper">
|
||||
<div className="page-contents">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-xs-12">
|
||||
|
|
|
|||
|
|
@ -44,12 +44,12 @@ export const RuleHeader = React.createClass({
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="chronograf-header">
|
||||
<div className="chronograf-header__container">
|
||||
<div className="chronograf-header__left">
|
||||
<div className="page-header">
|
||||
<div className="page-header__container">
|
||||
<div className="page-header__left">
|
||||
{this.renderEditName()}
|
||||
</div>
|
||||
<div className="chronograf-header__right">
|
||||
<div className="page-header__right">
|
||||
{this.renderSave()}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -117,61 +117,62 @@ export const KapacitorPage = React.createClass({
|
|||
const username = newUsername === undefined ? kapacitor && kapacitor.username || '' : newUsername;
|
||||
|
||||
return (
|
||||
<div className="kapacitor">
|
||||
<div className="chronograf-header">
|
||||
<div className="chronograf-header__container">
|
||||
<div className="chronograf-header__left">
|
||||
<div className="page">
|
||||
<div className="page-header">
|
||||
<div className="page-header__container">
|
||||
<div className="page-header__left">
|
||||
<h1>
|
||||
Configure Kapacitor
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="page-contents">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-md-8 col-md-offset-2">
|
||||
<div className="panel panel-minimal">
|
||||
<div className="panel-body">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<hr/>
|
||||
<h4 className="text-center">Connection Details</h4>
|
||||
<br/>
|
||||
<form onSubmit={this.handleKapacitorUpdate}>
|
||||
<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.kapacitorURL = r} className="form-control" id="connect-string" placeholder="http://localhost:9092" value={url} onChange={this.updateURL}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-6 col-sm-4">
|
||||
<label htmlFor="name">Name</label>
|
||||
<input ref={(r) => this.kapacitorName = r} className="form-control" id="name" placeholder="My Kapacitor" value={name} onChange={this.updateName}></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.kapacitorUser = r} className="form-control" id="username" value={username} onChange={this.updateUsername}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-6 col-sm-4">
|
||||
<label htmlFor="password">Password</label>
|
||||
<input ref={(r) => this.kapacitorPassword = r} className="form-control" id="password" type="password"></input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-md-8 col-md-offset-2">
|
||||
<div className="panel panel-minimal">
|
||||
<div className="panel-body">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<hr/>
|
||||
<h4 className="text-center">Connection Details</h4>
|
||||
<br/>
|
||||
<form onSubmit={this.handleKapacitorUpdate}>
|
||||
<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.kapacitorURL = r} className="form-control" id="connect-string" placeholder="http://localhost:9092" value={url} onChange={this.updateURL}></input>
|
||||
<div className="form-group col-xs-4 col-xs-offset-4">
|
||||
<button className="btn btn-block btn-success" type="submit">Connect Kapacitor</button>
|
||||
</div>
|
||||
<div className="form-group col-xs-6 col-sm-4">
|
||||
<label htmlFor="name">Name</label>
|
||||
<input ref={(r) => this.kapacitorName = r} className="form-control" id="name" placeholder="My Kapacitor" value={name} onChange={this.updateName}></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.kapacitorUser = r} className="form-control" id="username" value={username} onChange={this.updateUsername}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-6 col-sm-4">
|
||||
<label htmlFor="password">Password</label>
|
||||
<input ref={(r) => this.kapacitorPassword = r} className="form-control" id="password" type="password"></input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-4 col-xs-offset-4">
|
||||
<button className="btn btn-block btn-success" type="submit">Connect Kapacitor</button>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-8 col-md-offset-2">
|
||||
{this.renderAlertOutputs()}
|
||||
<div className="row">
|
||||
<div className="col-md-8 col-md-offset-2">
|
||||
{this.renderAlertOutputs()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -90,15 +90,15 @@ export const KapacitorRulesPage = React.createClass({
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="kapacitor-rules-page">
|
||||
<div className="chronograf-header">
|
||||
<div className="chronograf-header__container">
|
||||
<div className="chronograf-header__left">
|
||||
<div className="page">
|
||||
<div className="page-header">
|
||||
<div className="page-header__container">
|
||||
<div className="page-header__left">
|
||||
<h1>Kapacitor Rules</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hosts-page-scroll-container">
|
||||
<div className="page-contents">
|
||||
<div className="container-fluid">
|
||||
{this.renderSubComponent()}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -66,20 +66,20 @@ export const KubernetesPage = React.createClass({
|
|||
);
|
||||
|
||||
return (
|
||||
<div className="host-dashboard hosts-page">
|
||||
<div className="chronograf-header hosts-dashboard-header">
|
||||
<div className="chronograf-header__container">
|
||||
<div className="chronograf-header__left">
|
||||
<div className="page">
|
||||
<div className="page-header full-width">
|
||||
<div className="page-header__container">
|
||||
<div className="page-header__left">
|
||||
<h1>Kubernetes Dashboard</h1>
|
||||
</div>
|
||||
<div className="chronograf-header__right">
|
||||
<div className="page-header__right">
|
||||
<h1>Range:</h1>
|
||||
<TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={timeRange.inputValue} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hosts-page-scroll-container">
|
||||
<div className="container-fluid hosts-dashboard">
|
||||
<div className="page-contents">
|
||||
<div className="container-fluid full-width">
|
||||
{layouts.length ? this.renderLayouts(layouts) : emptyState}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -64,53 +64,55 @@ export const ManageSources = React.createClass({
|
|||
const sourcesTitle = `${numSources} ${numSources === 1 ? 'Source' : 'Sources'}`;
|
||||
|
||||
return (
|
||||
<div id="manage-sources-page">
|
||||
<div className="chronograf-header">
|
||||
<div className="chronograf-header__container">
|
||||
<div className="chronograf-header__left">
|
||||
<div className="page" id="manage-sources-page">
|
||||
<div className="page-header">
|
||||
<div className="page-header__container">
|
||||
<div className="page-header__left">
|
||||
<h1>InfluxDB Sources</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="page-contents">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
|
||||
<div className="panel panel-minimal">
|
||||
<div className="panel-heading u-flex u-ai-center u-jc-space-between">
|
||||
<h2 className="panel-title">{sourcesTitle}</h2>
|
||||
<Link to={`/sources/${this.props.source.id}/manage-sources/new`} className="btn btn-sm btn-primary">Add New Source</Link>
|
||||
</div>
|
||||
<div className="panel-body">
|
||||
<div className="table-responsive margin-bottom-zero">
|
||||
<table className="table v-center margin-bottom-zero">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Host</th>
|
||||
<th>Kapacitor</th>
|
||||
<th className="text-right"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
sources.map((source) => {
|
||||
return (
|
||||
<tr key={source.id}>
|
||||
<td>{source.name}{source.default ? <span className="label label-primary">Default</span> : null}</td>
|
||||
<td>{source.url}</td>
|
||||
<td>{_.get(source, ['kapacitor', 'name'], '')}</td>
|
||||
<td className="text-right">
|
||||
<Link className="btn btn-default btn-xs" to={`${pathname}/${source.id}/edit`}>Edit</Link>
|
||||
<Link className="btn btn-success btn-xs" to={`/sources/${source.id}/hosts`}>Connect</Link>
|
||||
<button className="btn btn-danger btn-xs" onClick={() => this.handleDeleteSource(source)}>Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="panel panel-minimal">
|
||||
<div className="panel-heading u-flex u-ai-center u-jc-space-between">
|
||||
<h2 className="panel-title">{sourcesTitle}</h2>
|
||||
<Link to={`/sources/${this.props.source.id}/manage-sources/new`} className="btn btn-sm btn-primary">Add New Source</Link>
|
||||
</div>
|
||||
<div className="panel-body">
|
||||
<div className="table-responsive margin-bottom-zero">
|
||||
<table className="table v-center margin-bottom-zero">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Host</th>
|
||||
<th>Kapacitor</th>
|
||||
<th className="text-right"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
sources.map((source) => {
|
||||
return (
|
||||
<tr key={source.id}>
|
||||
<td>{source.name}{source.default ? <span className="label label-primary">Default</span> : null}</td>
|
||||
<td>{source.url}</td>
|
||||
<td>{_.get(source, ['kapacitor', 'name'], '')}</td>
|
||||
<td className="text-right">
|
||||
<Link className="btn btn-default btn-xs" to={`${pathname}/${source.id}/edit`}>Edit</Link>
|
||||
<Link className="btn btn-success btn-xs" to={`/sources/${source.id}/hosts`}>Connect</Link>
|
||||
<button className="btn btn-danger btn-xs" onClick={() => this.handleDeleteSource(source)}>Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -82,58 +82,60 @@ export const SourceForm = React.createClass({
|
|||
}
|
||||
|
||||
return (
|
||||
<div id="source-form-page">
|
||||
<div className="chronograf-header">
|
||||
<div className="chronograf-header__container">
|
||||
<div className="chronograf-header__left">
|
||||
<div className="page" id="source-form-page">
|
||||
<div className="page-header">
|
||||
<div className="page-header__container">
|
||||
<div className="page-header__left">
|
||||
<h1>
|
||||
{editMode ? "Edit Source" : "Add a New Source"}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-md-8 col-md-offset-2">
|
||||
<div className="panel panel-summer">
|
||||
<div className="panel-body">
|
||||
<h4 className="text-center">Connection Details</h4>
|
||||
<br/>
|
||||
<div className="page-contents">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-md-8 col-md-offset-2">
|
||||
<div className="panel panel-summer">
|
||||
<div className="panel-body">
|
||||
<h4 className="text-center">Connection Details</h4>
|
||||
<br/>
|
||||
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<div>
|
||||
<div className="form-group col-xs-6 col-sm-4 col-sm-offset-2">
|
||||
<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={this.onInputChange} value={source.url || ''}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-6 col-sm-4">
|
||||
<label htmlFor="name">Name</label>
|
||||
<input type="text" name="name" ref={(r) => this.sourceName = r} className="form-control" id="name" placeholder="Influx 1" onChange={this.onInputChange} value={source.name || ''}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-6 col-sm-4 col-sm-offset-2">
|
||||
<label htmlFor="username">Username</label>
|
||||
<input type="text" name="username" ref={(r) => this.sourceUsername = r} className="form-control" id="username" onChange={this.onInputChange} value={source.username || ''}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-6 col-sm-4">
|
||||
<label htmlFor="password">Password</label>
|
||||
<input type="password" name="password" ref={(r) => this.sourcePassword = r} className="form-control" id="password" onChange={this.onInputChange} value={source.password || ''}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-8 col-xs-offset-2">
|
||||
<label htmlFor="telegraf">Telegraf database</label>
|
||||
<input type="text" name="telegraf" ref={(r) => this.sourceTelegraf = r} className="form-control" id="telegraf" onChange={this.onInputChange} value={source.telegraf || 'telegraf'}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-8 col-xs-offset-2">
|
||||
<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>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<div>
|
||||
<div className="form-group col-xs-6 col-sm-4 col-sm-offset-2">
|
||||
<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={this.onInputChange} value={source.url || ''}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-6 col-sm-4">
|
||||
<label htmlFor="name">Name</label>
|
||||
<input type="text" name="name" ref={(r) => this.sourceName = r} className="form-control" id="name" placeholder="Influx 1" onChange={this.onInputChange} value={source.name || ''}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-6 col-sm-4 col-sm-offset-2">
|
||||
<label htmlFor="username">Username</label>
|
||||
<input type="text" name="username" ref={(r) => this.sourceUsername = r} className="form-control" id="username" onChange={this.onInputChange} value={source.username || ''}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-6 col-sm-4">
|
||||
<label htmlFor="password">Password</label>
|
||||
<input type="password" name="password" ref={(r) => this.sourcePassword = r} className="form-control" id="password" onChange={this.onInputChange} value={source.password || ''}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-8 col-xs-offset-2">
|
||||
<label htmlFor="telegraf">Telegraf database</label>
|
||||
<input type="text" name="telegraf" ref={(r) => this.sourceTelegraf = r} className="form-control" id="telegraf" onChange={this.onInputChange} value={source.telegraf || 'telegraf'}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-8 col-xs-offset-2">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-4 col-xs-offset-4">
|
||||
<button className={classNames('btn btn-block', {'btn-primary': editMode, 'btn-success': !editMode})} type="submit">{editMode ? "Save Changes" : "Add Source"}</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="form-group col-xs-4 col-xs-offset-4">
|
||||
<button className={classNames('btn btn-block', {'btn-primary': editMode, 'btn-success': !editMode})} type="submit">{editMode ? "Save Changes" : "Add Source"}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue