From ccddee4a4aec10a05970669d8d77d1f733bad7eb Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Fri, 23 Nov 2018 15:12:20 +0100 Subject: [PATCH] add support for explore events --- public/app/features/explore/Explore.tsx | 31 +++++++++++++++------ public/app/features/explore/QueryEditor.tsx | 5 ++-- public/app/features/explore/QueryRows.tsx | 6 +++- 3 files changed, 29 insertions(+), 13 deletions(-) diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index e36f1de4776..073101ab83a 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -20,7 +20,7 @@ import { getIntervals, generateKey, generateQueryKeys, - // hasNonEmptyQuery, + hasNonEmptyQuery, makeTimeSeriesList, updateHistory, } from 'app/core/utils/explore'; @@ -31,6 +31,7 @@ import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage'; import TableModel, { mergeTablesIntoModel } from 'app/core/table_model'; import { DatasourceSrv } from 'app/features/plugins/datasource_srv'; import { getTimeSrv } from 'app/features/dashboard/time_srv'; +import { Emitter } from 'app/core/utils/emitter'; import Panel from './Panel'; import QueryRows from './QueryRows'; @@ -89,6 +90,7 @@ interface ExploreProps { */ export class Explore extends React.PureComponent { el: any; + exploreEvents: Emitter; /** * Current query expressions of the rows including their modifications, used for running queries. * Not kept in component state to prevent edit-render roundtrips. @@ -140,6 +142,7 @@ export class Explore extends React.PureComponent { getTimezone: () => 'utc', timeRangeUpdated: () => console.log('refreshDashboard!'), }); + this.exploreEvents = new Emitter(); } async componentDidMount() { @@ -699,22 +702,24 @@ export class Explore extends React.PureComponent { async runQueries(resultType: ResultType, queryOptions: any, resultGetter?: any) { const queries = [...this.modifiedQueries]; - // if (!hasNonEmptyQuery(queries)) { - // return; - // } + if (!hasNonEmptyQuery(queries)) { + return; + } const { datasource } = this.state; const datasourceId = datasource.meta.id; - // Run all queries concurrently + // Run all queries concurrentlyso queries.forEach(async (query, rowIndex) => { const transaction = this.startQueryTransaction(query, rowIndex, resultType, queryOptions); try { const now = Date.now(); const res = await datasource.query(transaction.options); + this.exploreEvents.emit('data-received', res); const latency = Date.now() - now; const results = resultGetter ? resultGetter(res.data) : res.data; this.completeQueryTransaction(transaction.id, results, latency, queries, datasourceId); this.setState({ graphRange: transaction.options.range }); } catch (response) { + this.exploreEvents.emit('data-error', response); this.failQueryTransaction(transaction.id, response, datasourceId); } }); @@ -767,10 +772,17 @@ export class Explore extends React.PureComponent { const graphResult = _.flatten( queryTransactions.filter(qt => qt.resultType === 'Graph' && qt.done && qt.result).map(qt => qt.result) ); - const tableResult = mergeTablesIntoModel( - new TableModel(), - ...queryTransactions.filter(qt => qt.resultType === 'Table' && qt.done && qt.result).map(qt => qt.result) - ); + + //Temp solution... How do detect if ds supports table format? + let tableResult; + try { + tableResult = mergeTablesIntoModel( + new TableModel(), + ...queryTransactions.filter(qt => qt.resultType === 'Table' && qt.done && qt.result).map(qt => qt.result) + ); + } catch (error) { + console.log(error); + } const logsResult = datasource && datasource.mergeStreams ? datasource.mergeStreams( @@ -866,6 +878,7 @@ export class Explore extends React.PureComponent { onExecuteQuery={this.onSubmit} onRemoveQueryRow={this.onRemoveQueryRow} transactions={queryTransactions} + exploreEvents={this.exploreEvents} />
diff --git a/public/app/features/explore/QueryEditor.tsx b/public/app/features/explore/QueryEditor.tsx index 3d680163ac4..3966500e787 100644 --- a/public/app/features/explore/QueryEditor.tsx +++ b/public/app/features/explore/QueryEditor.tsx @@ -33,9 +33,7 @@ export default class QueryEditor extends PureComponent { this.props.onQueryChange({ refId: initialQuery.refId, ...target }, false); this.props.onExecuteQuery(); }, - events: { - on: () => exploreEvents, - }, + events: exploreEvents, panel: { datasource, targets: [{}], @@ -43,6 +41,7 @@ export default class QueryEditor extends PureComponent { dashboard: { getNextQueryLetter: x => '', }, + hideRowButtons: true, }, }; diff --git a/public/app/features/explore/QueryRows.tsx b/public/app/features/explore/QueryRows.tsx index bbadf8ccbf1..08f7a5e83e1 100644 --- a/public/app/features/explore/QueryRows.tsx +++ b/public/app/features/explore/QueryRows.tsx @@ -1,6 +1,7 @@ import React, { PureComponent } from 'react'; import { QueryTransaction, HistoryItem, QueryHint } from 'app/types/explore'; +import { Emitter } from 'app/core/utils/emitter'; // import DefaultQueryField from './QueryField'; import QueryEditor from './QueryEditor'; @@ -28,6 +29,7 @@ interface QueryRowCommonProps { datasource: DataSource; history: HistoryItem[]; transactions: QueryTransaction[]; + exploreEvents: Emitter; } type QueryRowProps = QueryRowCommonProps & @@ -82,7 +84,7 @@ class QueryRow extends PureComponent { }; render() { - const { datasource, history, initialQuery, transactions } = this.props; + const { datasource, history, initialQuery, transactions, exploreEvents } = this.props; const transactionWithError = transactions.find(t => t.error !== undefined); const hint = getFirstHintFromTransactions(transactions); const queryError = transactionWithError ? transactionWithError.error : null; @@ -112,6 +114,8 @@ class QueryRow extends PureComponent { error={queryError} onQueryChange={this.onChangeQuery} onExecuteQuery={this.onExecuteQuery} + initialQuery={initialQuery} + exploreEvents={exploreEvents} // hint={hint} // initialQuery={initialQuery} // history={history}