From eaf9a0b39a855ad9e2ddfddea3b1dd903c7db6c4 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Thu, 22 Nov 2018 18:22:15 +0100 Subject: [PATCH] initial commit --- public/app/features/explore/Explore.tsx | 16 +++-- public/app/features/explore/QueryEditor.tsx | 59 +++++++++++++++++++ public/app/features/explore/QueryRows.tsx | 47 +++++++++++---- public/app/features/panel/metrics_wrapper.ts | 23 ++++++++ public/app/features/plugins/datasource_srv.ts | 5 +- 5 files changed, 131 insertions(+), 19 deletions(-) create mode 100644 public/app/features/explore/QueryEditor.tsx create mode 100644 public/app/features/panel/metrics_wrapper.ts diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index d4e9b689495..e36f1de4776 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'; @@ -30,6 +30,7 @@ import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer' 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 Panel from './Panel'; import QueryRows from './QueryRows'; @@ -132,6 +133,13 @@ export class Explore extends React.PureComponent { }; } this.modifiedQueries = initialQueries.slice(); + const timeSrv = getTimeSrv(); + timeSrv.init({ + time: { from: 'now-6h', to: 'now' }, + refresh: false, + getTimezone: () => 'utc', + timeRangeUpdated: () => console.log('refreshDashboard!'), + }); } async componentDidMount() { @@ -691,9 +699,9 @@ 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 diff --git a/public/app/features/explore/QueryEditor.tsx b/public/app/features/explore/QueryEditor.tsx new file mode 100644 index 00000000000..bbff55a1cce --- /dev/null +++ b/public/app/features/explore/QueryEditor.tsx @@ -0,0 +1,59 @@ +import React, { PureComponent } from 'react'; +import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader'; +import 'app/features/panel/metrics_wrapper'; +import { DataQuery } from 'app/types'; + +interface QueryEditorProps { + datasource: any; + error?: string | JSX.Element; + onExecuteQuery?: () => void; + onQueryChange?: (value: DataQuery, override?: boolean) => void; +} + +export default class QueryEditor extends PureComponent { + element: any; + component: AngularComponent; + + async componentDidMount() { + if (!this.element) { + return; + } + + const { datasource } = this.props; + const loader = getAngularLoader(); + const template = ''; + const target = { datasource: datasource.name }; + // const changeableTarget = onChange(target, () => console.log(target)); + // const changeable = onChange(target, () => console.log(target)); + const scopeProps = { + target, //: changeable, + ctrl: { + refresh: () => { + this.props.onQueryChange({ refId: 'TEST', ...target }, false); + this.props.onExecuteQuery(); + }, + events: { + on: () => {}, + }, + panel: { + datasource, + }, + dashboard: { + getNextQueryLetter: x => 'TEST', + }, + }, + }; + + this.component = loader.load(this.element, scopeProps, template); + } + + componentWillUnmount() { + if (this.component) { + this.component.destroy(); + } + } + + render() { + return
(this.element = element)} style={{ width: '100%' }} />; + } +} diff --git a/public/app/features/explore/QueryRows.tsx b/public/app/features/explore/QueryRows.tsx index 52c705c469c..bbadf8ccbf1 100644 --- a/public/app/features/explore/QueryRows.tsx +++ b/public/app/features/explore/QueryRows.tsx @@ -2,7 +2,8 @@ import React, { PureComponent } from 'react'; import { QueryTransaction, HistoryItem, QueryHint } from 'app/types/explore'; -import DefaultQueryField from './QueryField'; +// import DefaultQueryField from './QueryField'; +import QueryEditor from './QueryEditor'; import QueryTransactionStatus from './QueryTransactionStatus'; import { DataSource, DataQuery } from 'app/types'; @@ -36,6 +37,11 @@ type QueryRowProps = QueryRowCommonProps & }; class QueryRow extends PureComponent { + onExecuteQuery = () => { + const { onExecuteQuery } = this.props; + onExecuteQuery(); + }; + onChangeQuery = (value: DataQuery, override?: boolean) => { const { index, onChangeQuery } = this.props; if (onChangeQuery) { @@ -80,23 +86,40 @@ class QueryRow extends PureComponent { const transactionWithError = transactions.find(t => t.error !== undefined); const hint = getFirstHintFromTransactions(transactions); const queryError = transactionWithError ? transactionWithError.error : null; - const QueryField = datasource.pluginExports.ExploreQueryField || DefaultQueryField; + // const QueryField = datasource.pluginExports.ExploreQueryField || DefaultQueryField; + const QueryField = datasource.pluginExports.ExploreQueryField; + // const QueryEditor = datasource.pluginExports.QueryCtrl; return (
- + {QueryField ? ( + + ) : ( + + )}