Skip to content

N
nexpie-grafana-theme
Commit 949e3d29 by David Kaltschmidt
Options

Explore: add support for multiple queries 

* 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.
parent 25d3ec5b
Showing with 175 additions and 48 deletions
public/app/containers/Explore/Explore.tsx
......@@ -5,29 +5,11 @@ import TimeSeries from 'app/core/time_series2';
import ElapsedTime from './ElapsedTime';
import Legend from './Legend';
import QueryField from './QueryField';
import QueryRows from './QueryRows';
import Graph from './Graph';
import Table from './Table';
import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
function buildQueryOptions({ format, interval, instant, now, query }) {
const to = now;
const from = to - 1000 * 60 * 60 * 3;
return {
interval,
range: {
from,
to,
},
targets: [
{
expr: query,
format,
instant,
},
],
};
}
import { buildQueryOptions, ensureQueries, generateQueryKey, hasQuery } from './utils/query';
function makeTimeSeriesList(dataList, options) {
return dataList.map((seriesData, index) => {
......@@ -63,6 +45,7 @@ interface IExploreState {
graphResult: any;
latency: number;
loading: any;
queries: any;
requestOptions: any;
showingGraph: boolean;
showingTable: boolean;
......@@ -72,7 +55,6 @@ interface IExploreState {
// @observer
export class Explore extends React.Component<any, IExploreState> {
datasourceSrv: DatasourceSrv;
query: string;
constructor(props) {
super(props);
......@@ -83,6 +65,7 @@ export class Explore extends React.Component<any, IExploreState> {
graphResult: null,
latency: 0,
loading: false,
queries: ensureQueries(),
requestOptions: null,
showingGraph: true,
showingTable: true,
......@@ -100,6 +83,27 @@ export class Explore extends React.Component<any, IExploreState> {
}
}
handleAddQueryRow = index => {
const { queries } = this.state;
const nextQueries = [
...queries.slice(0, index + 1),
{ query: '', key: generateQueryKey() },
...queries.slice(index + 1),
];
this.setState({ queries: nextQueries });
};
handleChangeQuery = (query, index) => {
const { queries } = this.state;
const nextQuery = {
...queries[index],
query,
};
const nextQueries = [...queries];
nextQueries[index] = nextQuery;
this.setState({ queries: nextQueries });
};
handleClickGraphButton = () => {
this.setState(state => ({ showingGraph: !state.showingGraph }));
};
......@@ -108,12 +112,13 @@ export class Explore extends React.Component<any, IExploreState> {
this.setState(state => ({ showingTable: !state.showingTable }));
};
handleRequestError({ error }) {
console.error(error);
}
handleQueryChange = query => {
this.query = query;
handleRemoveQueryRow = index => {
const { queries } = this.state;
if (queries.length <= 1) {
return;
}
const nextQueries = [...queries.slice(0, index), ...queries.slice(index + 1)];
this.setState({ queries: nextQueries }, () => this.handleSubmit());
};
handleSubmit = () => {
......@@ -127,9 +132,8 @@ export class Explore extends React.Component<any, IExploreState> {
};
async runGraphQuery() {
const { query } = this;
const { datasource } = this.state;
if (!query) {
const { datasource, queries } = this.state;
if (!hasQuery(queries)) {
return;
}
this.setState({ latency: 0, loading: true, graphResult: null });
......@@ -139,7 +143,7 @@ export class Explore extends React.Component<any, IExploreState> {
interval: datasource.interval,
instant: false,
now,
query,
queries: queries.map(q => q.query),
});
try {
const res = await datasource.query(options);
......@@ -153,14 +157,19 @@ export class Explore extends React.Component<any, IExploreState> {
}
async runTableQuery() {
const { query } = this;
const { datasource } = this.state;
if (!query) {
const { datasource, queries } = this.state;
if (!hasQuery(queries)) {
return;
}
this.setState({ latency: 0, loading: true, tableResult: null });
const now = Date.now();
const options = buildQueryOptions({ format: 'table', interval: datasource.interval, instant: true, now, query });
const options = buildQueryOptions({
format: 'table',
interval: datasource.interval,
instant: true,
now,
queries: queries.map(q => q.query),
});
try {
const res = await datasource.query(options);
const tableModel = res.data[0];
......@@ -182,10 +191,11 @@ export class Explore extends React.Component<any, IExploreState> {
datasource,
datasourceError,
datasourceLoading,
graphResult,
latency,
loading,
queries,
requestOptions,
graphResult,
showingGraph,
showingTable,
tableResult,
......@@ -205,7 +215,8 @@ export class Explore extends React.Component<any, IExploreState> {
{datasource ? (
<div className="m-r-3">
<div className="nav m-b-1">
<div className="pull-right" style={{ paddingRight: '6rem' }}>
<div className="pull-right">
{loading || latency ? <ElapsedTime time={latency} className="" /> : null}
<button type="submit" className="m-l-1 btn btn-primary" onClick={this.handleSubmit}>
<i className="fa fa-return" /> Run Query
</button>
......@@ -219,15 +230,14 @@ export class Explore extends React.Component<any, IExploreState> {
</button>
</div>
</div>
<div className="query-field-wrapper">
<QueryField
request={this.request}
onPressEnter={this.handleSubmit}
onQueryChange={this.handleQueryChange}
onRequestError={this.handleRequestError}
/>
</div>
{loading || latency ? <ElapsedTime time={latency} className="m-l-1" /> : null}
<QueryRows
queries={queries}
request={this.request}
onAddQueryRow={this.handleAddQueryRow}
onChangeQuery={this.handleChangeQuery}
onExecuteQuery={this.handleSubmit}
onRemoveQueryRow={this.handleRemoveQueryRow}
/>
<main className="m-t-2">
{showingGraph ? (
<Graph data={graphResult} id="explore-1" options={requestOptions} height={graphHeight} />
......
public/app/containers/Explore/QueryRows.tsx 0 → 100644
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>
);
}
}
public/app/containers/Explore/utils/query.ts 0 → 100644
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);
}
public/sass/pages/_explore.scss
......@@ -4,6 +4,23 @@
}
}
.query-row {
position: relative;
& + & {
margin-top: 0.5rem;
}
}
.query-row-tools {
position: absolute;
left: -4rem;
top: 0.33rem;
> * {
margin-right: 0.25rem;
}
}
.query-field {
font-size: 14px;
font-family: Consolas, Menlo, Courier, monospace;
......@@ -14,14 +31,14 @@
position: relative;
display: inline-block;
padding: 6px 7px 4px;
width: calc(100% - 6rem);
width: 100%;
cursor: text;
line-height: 1.5;
color: rgba(0, 0, 0, 0.65);
background-color: #fff;
background-image: none;
border: 1px solid lightgray;
border-radius: 4px;
border-radius: 3px;
transition: all 0.3s;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment