grafana/public/app/features/explore/QueryEditor.tsx

105 lines
3.0 KiB
TypeScript
Raw Normal View History

2019-01-17 10:59:47 -06:00
// Libraries
2018-11-22 11:22:15 -06:00
import React, { PureComponent } from 'react';
2019-01-17 10:59:47 -06:00
// Services
import { getAngularLoader, AngularComponent } from '@grafana/runtime';
2019-01-17 10:59:47 -06:00
// Types
import { DataQuery, TimeRange, EventBusExtended } from '@grafana/data';
2018-11-27 07:49:03 -06:00
import 'app/features/plugins/plugin_loader';
2018-11-22 11:22:15 -06:00
interface QueryEditorProps {
error?: any;
2018-11-22 11:22:15 -06:00
datasource: any;
onExecuteQuery?: () => void;
2019-02-04 04:07:32 -06:00
onQueryChange?: (value: DataQuery) => void;
initialQuery: DataQuery;
exploreEvents: EventBusExtended;
range: TimeRange;
textEditModeEnabled?: boolean;
2018-11-22 11:22:15 -06:00
}
export default class QueryEditor extends PureComponent<QueryEditorProps, any> {
element: any;
component?: AngularComponent;
angularScope: any;
2018-11-22 11:22:15 -06:00
async componentDidMount() {
if (!this.element) {
return;
}
const { datasource, initialQuery, exploreEvents, range } = this.props;
2018-11-27 07:45:39 -06:00
2018-11-22 11:22:15 -06:00
const loader = getAngularLoader();
const template = '<plugin-component type="query-ctrl"> </plugin-component>';
const target = { datasource: datasource.name, ...initialQuery };
2018-11-22 11:22:15 -06:00
const scopeProps = {
ctrl: {
datasource,
target,
range,
2018-11-22 11:22:15 -06:00
refresh: () => {
setTimeout(() => {
// the "hide" attribute of the quries can be changed from the "outside",
// it will be applied to "this.props.initialQuery.hide", but not to "target.hide".
// so we have to apply it.
if (target.hide !== this.props.initialQuery.hide) {
target.hide = this.props.initialQuery.hide;
}
this.props.onQueryChange?.(target);
this.props.onExecuteQuery?.();
}, 1);
2018-11-22 11:22:15 -06:00
},
onQueryChange: () => {
setTimeout(() => {
this.props.onQueryChange?.(target);
}, 1);
},
2018-11-23 08:12:20 -06:00
events: exploreEvents,
2019-02-04 04:07:32 -06:00
panel: { datasource, targets: [target] },
dashboard: {},
2018-11-22 11:22:15 -06:00
},
};
this.component = loader.load(this.element, scopeProps, template);
this.angularScope = scopeProps.ctrl;
setTimeout(() => {
this.props.onQueryChange?.(target);
this.props.onExecuteQuery?.();
}, 1);
2018-11-22 11:22:15 -06:00
}
componentDidUpdate(prevProps: QueryEditorProps) {
const hasToggledEditorMode = prevProps.textEditModeEnabled !== this.props.textEditModeEnabled;
const hasNewError = prevProps.error !== this.props.error;
if (this.component) {
if (hasToggledEditorMode && this.angularScope && this.angularScope.toggleEditorMode) {
this.angularScope.toggleEditorMode();
}
if (this.angularScope) {
this.angularScope.range = this.props.range;
}
if (hasNewError || hasToggledEditorMode) {
// Some query controllers listen to data error events and need a digest
// for some reason this needs to be done in next tick
setTimeout(this.component.digest);
}
}
}
2018-11-22 11:22:15 -06:00
componentWillUnmount() {
if (this.component) {
this.component.destroy();
}
}
render() {
return <div className="gf-form-query" ref={(element) => (this.element = element)} style={{ width: '100%' }} />;
2018-11-22 11:22:15 -06:00
}
}