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

Apply new classnames to query builder list components

pull/1309/head
Alex P 2017-04-17 12:14:53 -07:00
parent 37107f9724
commit 86b72aa103
4 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/src/data_explorer/components/DatabaseList.js
View File

@ -61,19 +61,19 @@ const DatabaseList = React.createClass({
return (
<div className="query-builder--column">
<div className="query-builder--column-heading">Databases</div>
<ul className="qeditor--list">
<div className="query-builder--heading">Databases</div>
<div className="query-builder--list">
{this.state.namespaces.map((namespace) => {
const {database, retentionPolicy} = namespace
const isActive = database === query.database && retentionPolicy === query.retentionPolicy
return (
<li className={classNames('qeditor--list-item qeditor--list-radio', {active: isActive})} key={`${database}..${retentionPolicy}`} onClick={_.wrap(namespace, onChooseNamespace)}>
<div className={classNames('query-builder--list-item', {active: isActive})} key={`${database}..${retentionPolicy}`} onClick={_.wrap(namespace, onChooseNamespace)}>
{database}.{retentionPolicy}
</li>
</div>
)
})}
</ul>
</div>
</div>
)
},

8
ui/src/data_explorer/components/FieldList.js
View File

@ -74,7 +74,7 @@ const FieldList = React.createClass({
return (
<div className="query-builder--column">
<div className="query-builder--column-heading">Fields</div>
<div className="query-builder--heading">Fields</div>
{
hasAggregates ?
<div className="qeditor--list-header">
@ -93,11 +93,11 @@ const FieldList = React.createClass({
renderList() {
const {database, measurement} = this.props.query
if (!database || !measurement) {
return <div className="qeditor--empty">No <strong>Measurement</strong> selected</div>
return <div className="query-builder--list-empty">No <strong>Measurement</strong> selected</div>
}
return (
<ul className="qeditor--list">
<div className="query-builder--list">
{this.state.fields.map((fieldFunc) => {
const selectedField = this.props.query.fields.find((f) => f.field === fieldFunc.field)
return (
@ -111,7 +111,7 @@ const FieldList = React.createClass({
/>
)
})}
</ul>
</div>
)
},

10
ui/src/data_explorer/components/MeasurementList.js
View File

@ -72,7 +72,7 @@ const MeasurementList = React.createClass({
render() {
return (
<div className="query-builder--column">
<div className="query-builder--column-heading">Measurements</div>
<div className="query-builder--heading">Measurements</div>
{this.props.query.database ? <div className="qeditor--list-header">
<input className="qeditor--filter" ref="filterText" placeholder="Filter" type="text" value={this.state.filterText} onChange={this.handleFilterText} onKeyUp={this.handleEscape} />
<span className="icon search"></span>
@ -84,20 +84,20 @@ const MeasurementList = React.createClass({
renderList() {
if (!this.props.query.database) {
return <div className="qeditor--empty">No <strong>Database</strong> selected</div>
return <div className="query-builder--list-empty">No <strong>Database</strong> selected</div>
}
const measurements = this.state.measurements.filter((m) => m.match(this.state.filterText))
return (
<ul className="qeditor--list">
<div className="query-builder--list">
{measurements.map((measurement) => {
const isActive = measurement === this.props.query.measurement
return (
<li className={classNames('qeditor--list-item qeditor--list-radio', {active: isActive})} key={measurement} onClick={_.wrap(measurement, this.props.onChooseMeasurement)}>{measurement}</li>
<div className={classNames('qeditor--list-item qeditor--list-radio', {active: isActive})} key={measurement} onClick={_.wrap(measurement, this.props.onChooseMeasurement)}>{measurement}</div>
)
})}
</ul>
</div>
)
},

8
ui/src/data_explorer/components/TagList.js
View File

@ -91,7 +91,7 @@ const TagList = React.createClass({
return (
<div className="query-builder--column">
<div className="query-builder--column-heading">Tags</div>
<div className="query-builder--heading">Tags</div>
{(!query.database || !query.measurement || !query.retentionPolicy) ? null : <div className="qeditor--list-header">
<div className="toggle toggle-sm">
<div onClick={this.handleAcceptReject} className={cx("toggle-btn", {active: query.areTagsAccepted})}>=</div>
@ -106,11 +106,11 @@ const TagList = React.createClass({
renderList() {
const {database, measurement, retentionPolicy} = this.props.query
if (!database || !measurement || !retentionPolicy) {
return <div className="qeditor--empty">No <strong>Measurement</strong> selected</div>
return <div className="query-builder--list-empty">No <strong>Measurement</strong> selected</div>
}
return (
<ul className="qeditor--list">
<div className="query-builder--list">
{_.map(this.state.tags, (tagValues, tagKey) => {
return (
<TagListItem
@ -124,7 +124,7 @@ const TagList = React.createClass({
/>
)
})}
</ul>
</div>
)
},
})