mirror of https://github.com/grafana/grafana
* adds +/- buttons to query rows in the Explore section * on Run Query all query expressions are submitted * `generateQueryKey` and `ensureQueries` are helpers to ensure each query field has a unique key for react.pull/11761/head
David Kaltschmidt
7 years ago
parent
25d3ec5bbf
commit
949e3d29e8
@ -0,0 +1,69 @@ |
||||
import React, { PureComponent } from 'react'; |
||||
|
||||
import QueryField from './QueryField'; |
||||
|
||||
class QueryRow extends PureComponent<any, any> { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
query: '', |
||||
}; |
||||
} |
||||
|
||||
handleChangeQuery = value => { |
||||
const { index, onChangeQuery } = this.props; |
||||
this.setState({ query: value }); |
||||
if (onChangeQuery) { |
||||
onChangeQuery(value, index); |
||||
} |
||||
}; |
||||
|
||||
handleClickAddButton = () => { |
||||
const { index, onAddQueryRow } = this.props; |
||||
if (onAddQueryRow) { |
||||
onAddQueryRow(index); |
||||
} |
||||
}; |
||||
|
||||
handleClickRemoveButton = () => { |
||||
const { index, onRemoveQueryRow } = this.props; |
||||
if (onRemoveQueryRow) { |
||||
onRemoveQueryRow(index); |
||||
} |
||||
}; |
||||
|
||||
handlePressEnter = () => { |
||||
const { onExecuteQuery } = this.props; |
||||
if (onExecuteQuery) { |
||||
onExecuteQuery(); |
||||
} |
||||
}; |
||||
|
||||
render() { |
||||
const { request } = this.props; |
||||
return ( |
||||
<div className="query-row"> |
||||
<div className="query-row-tools"> |
||||
<button className="btn btn-small btn-inverse" onClick={this.handleClickAddButton}> |
||||
<i className="fa fa-plus" /> |
||||
</button> |
||||
<button className="btn btn-small btn-inverse" onClick={this.handleClickRemoveButton}> |
||||
<i className="fa fa-minus" /> |
||||
</button> |
||||
</div> |
||||
<div className="query-field-wrapper"> |
||||
<QueryField onPressEnter={this.handlePressEnter} onQueryChange={this.handleChangeQuery} request={request} /> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
export default class QueryRows extends PureComponent<any, any> { |
||||
render() { |
||||
const { className = '', queries, ...handlers } = this.props; |
||||
return ( |
||||
<div className={className}>{queries.map((q, index) => <QueryRow key={q.key} index={index} {...handlers} />)}</div> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,31 @@ |
||||
export function buildQueryOptions({ format, interval, instant, now, queries }) { |
||||
const to = now; |
||||
const from = to - 1000 * 60 * 60 * 3; |
||||
return { |
||||
interval, |
||||
range: { |
||||
from, |
||||
to, |
||||
}, |
||||
targets: queries.map(expr => ({ |
||||
expr, |
||||
format, |
||||
instant, |
||||
})), |
||||
}; |
||||
} |
||||
|
||||
export function generateQueryKey(index = 0) { |
||||
return `Q-${Date.now()}-${Math.random()}-${index}`; |
||||
} |
||||
|
||||
export function ensureQueries(queries?) { |
||||
if (queries && typeof queries === 'object' && queries.length > 0 && typeof queries[0] === 'string') { |
||||
return queries.map((query, i) => ({ key: generateQueryKey(i), query })); |
||||
} |
||||
return [{ key: generateQueryKey(), query: '' }]; |
||||
} |
||||
|
||||
export function hasQuery(queries) { |
||||
return queries.some(q => q.query); |
||||
} |
||||
Loading…
Reference in new issue