move influx source managament table to separate component
Jade McGough
parent
b198755da2
commit
429ef27661
|
|
@ -0,0 +1,81 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
import {Link} from 'react-router'
|
||||
|
||||
const InfluxTable = ({
|
||||
sources,
|
||||
source,
|
||||
handleDeleteSource,
|
||||
kapacitors,
|
||||
location,
|
||||
}) => (
|
||||
<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">InfluxDB Sources</h2>
|
||||
<Link to={`/sources/${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((s) => {
|
||||
const kapacitorName = kapacitors[s.id] ? kapacitors[s.id].name : ''
|
||||
return (
|
||||
<tr key={s.id}>
|
||||
<td>{s.name}{s.default ? <span className="default-source-label">Default</span> : null}</td>
|
||||
<td className="monotype">{s.url}</td>
|
||||
<td>{kapacitorName ? kapacitorName : "--"}</td>
|
||||
<td className="text-right">
|
||||
<Link className="btn btn-info btn-xs" to={`${location.pathname}/${s.id}/edit`}><span className="icon pencil"></span></Link>
|
||||
<Link className="btn btn-success btn-xs" to={`/sources/${s.id}/hosts`}>Connect</Link>
|
||||
<button className="btn btn-danger btn-xs" onClick={() => handleDeleteSource(s)}><span className="icon trash"></span></button>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
const {
|
||||
array,
|
||||
func,
|
||||
object,
|
||||
shape,
|
||||
string,
|
||||
} = PropTypes
|
||||
|
||||
InfluxTable.propTypes = {
|
||||
sources: array.isRequired,
|
||||
kapacitors: object,
|
||||
location: shape({
|
||||
pathname: string.isRequired,
|
||||
}).isRequired,
|
||||
handleDeleteSource: func.isRequired,
|
||||
source: shape({
|
||||
id: string.isRequired,
|
||||
links: shape({
|
||||
proxy: string.isRequired,
|
||||
self: string.isRequired,
|
||||
}),
|
||||
}),
|
||||
}
|
||||
|
||||
export default InfluxTable
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
import {withRouter, Link} from 'react-router'
|
||||
import {withRouter} from 'react-router'
|
||||
import {getKapacitor} from 'shared/apis'
|
||||
import {removeAndLoadSources} from 'src/shared/actions/sources'
|
||||
import {connect} from 'react-redux'
|
||||
|
||||
import InfluxTable from '../components/InfluxTable'
|
||||
|
||||
const {
|
||||
array,
|
||||
func,
|
||||
|
|
@ -59,67 +61,28 @@ export const ManageSources = React.createClass({
|
|||
},
|
||||
|
||||
render() {
|
||||
// probably should move kapacitors to props and use redux store
|
||||
const {kapacitors} = this.state
|
||||
const {sources} = this.props
|
||||
const {pathname} = this.props.location
|
||||
const numSources = sources.length
|
||||
const sourcesTitle = `${numSources} ${numSources === 1 ? 'Source' : 'Sources'}`
|
||||
const {sources, source, location} = this.props
|
||||
|
||||
return (
|
||||
<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>
|
||||
<h1>Configuration</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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) => {
|
||||
const kapacitorName = kapacitors[source.id] ? kapacitors[source.id].name : ''
|
||||
return (
|
||||
<tr key={source.id}>
|
||||
<td>{source.name}{source.default ? <span className="default-source-label">Default</span> : null}</td>
|
||||
<td className="monotype">{source.url}</td>
|
||||
<td>{kapacitorName ? kapacitorName : "--"}</td>
|
||||
<td className="text-right">
|
||||
<Link className="btn btn-info btn-xs" to={`${pathname}/${source.id}/edit`}><span className="icon pencil"></span></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)}><span className="icon trash"></span></button>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<InfluxTable
|
||||
handleDeleteSource={this.handleDeleteSource}
|
||||
source={source}
|
||||
sources={sources}
|
||||
kapacitors={kapacitors}
|
||||
location={location}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue