The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
grafana/public/app/features/query/components/QueryEditorRow.tsx

434 lines
12 KiB

// Libraries
import React, { PureComponent, ReactNode } from 'react';
import classNames from 'classnames';
import { has, cloneDeep } from 'lodash';
// Utils & Services
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
import { AngularComponent, getAngularLoader } from '@grafana/runtime';
import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
import { ErrorBoundaryAlert, HorizontalGroup, InfoBox } from '@grafana/ui';
import {
DataQuery,
DataSourceApi,
DataSourceInstanceSettings,
EventBusExtended,
EventBusSrv,
LoadingState,
PanelData,
PanelEvents,
TimeRange,
toLegacyResponseData,
} from '@grafana/data';
import { QueryEditorRowHeader } from './QueryEditorRowHeader';
import {
QueryOperationRow,
QueryOperationRowRenderProps,
} from 'app/core/components/QueryOperationRow/QueryOperationRow';
import { QueryOperationAction } from 'app/core/components/QueryOperationRow/QueryOperationAction';
import { DashboardModel } from '../../dashboard/state/DashboardModel';
import { selectors } from '@grafana/e2e-selectors';
import { PanelModel } from 'app/features/dashboard/state';
interface Props {
data: PanelData;
query: DataQuery;
queries: DataQuery[];
id: string;
index: number;
dataSource: DataSourceInstanceSettings;
onChangeDataSource?: (dsSettings: DataSourceInstanceSettings) => void;
renderHeaderExtras?: () => ReactNode;
onAddQuery: (query: DataQuery) => void;
onRemoveQuery: (query: DataQuery) => void;
onChange: (query: DataQuery) => void;
onRunQuery: () => void;
visualization?: ReactNode;
hideDisableQuery?: boolean;
}
interface State {
loadedDataSourceIdentifier?: string | null;
datasource: DataSourceApi | null;
hasTextEditMode: boolean;
data?: PanelData;
isOpen?: boolean;
showingHelp: boolean;
}
export class QueryEditorRow extends PureComponent<Props, State> {
element: HTMLElement | null = null;
angularScope: AngularQueryComponentScope | null = null;
angularQueryEditor: AngularComponent | null = null;
state: State = {
datasource: null,
hasTextEditMode: false,
data: undefined,
isOpen: true,
showingHelp: false,
};
componentDidMount() {
this.loadDatasource();
}
componentWillUnmount() {
if (this.angularQueryEditor) {
this.angularQueryEditor.destroy();
}
}
getAngularQueryComponentScope(): AngularQueryComponentScope {
const { query, queries } = this.props;
const { datasource } = this.state;
const panel = new PanelModel({ targets: queries });
const dashboard = {} as DashboardModel;
const me = this;
return {
datasource: datasource,
target: query,
panel: panel,
dashboard: dashboard,
refresh: () => {
// Old angular editors modify the query model and just call refresh
// Important that this use this.props here so that as this fuction is only created on mount and it's
// important not to capture old prop functions in this closure
// the "hide" attribute of the quries can be changed from the "outside",
// it will be applied to "this.props.query.hide", but not to "query.hide".
// so we have to apply it.
if (query.hide !== me.props.query.hide) {
query.hide = me.props.query.hide;
}
this.props.onChange(query);
this.props.onRunQuery();
},
render: () => () => console.log('legacy render function called, it does nothing'),
events: new EventBusSrv(),
range: getTimeSrv().timeRange(),
};
}
getQueryDataSourceIdentifier(): string | null | undefined {
const { query, dataSource: dsSettings } = this.props;
return query.datasource ?? dsSettings.name;
}
async loadDatasource() {
const dataSourceSrv = getDatasourceSrv();
let datasource: DataSourceApi;
const dataSourceIdentifier = this.getQueryDataSourceIdentifier();
try {
datasource = await dataSourceSrv.get(dataSourceIdentifier);
} catch (error) {
datasource = await dataSourceSrv.get();
}
this.setState({
datasource,
loadedDataSourceIdentifier: dataSourceIdentifier,
hasTextEditMode: has(datasource, 'components.QueryCtrl.prototype.toggleEditorMode'),
});
}
componentDidUpdate(prevProps: Props) {
const { datasource, loadedDataSourceIdentifier } = this.state;
const { data, query } = this.props;
if (data !== prevProps.data) {
const dataFilteredByRefId = filterPanelDataToQuery(data, query.refId);
this.setState({ data: dataFilteredByRefId });
if (this.angularScope) {
this.angularScope.range = getTimeSrv().timeRange();
}
if (this.angularQueryEditor && dataFilteredByRefId) {
notifyAngularQueryEditorsOfData(this.angularScope!, dataFilteredByRefId, this.angularQueryEditor);
}
}
// check if we need to load another datasource
if (datasource && loadedDataSourceIdentifier !== this.getQueryDataSourceIdentifier()) {
if (this.angularQueryEditor) {
this.angularQueryEditor.destroy();
this.angularQueryEditor = null;
}
this.loadDatasource();
return;
}
if (!this.element || this.angularQueryEditor) {
return;
}
this.renderAngularQueryEditor();
}
renderAngularQueryEditor = () => {
if (!this.element) {
return;
}
if (this.angularQueryEditor) {
this.angularQueryEditor.destroy();
this.angularQueryEditor = null;
}
const loader = getAngularLoader();
const template = '<plugin-component type="query-ctrl" />';
const scopeProps = { ctrl: this.getAngularQueryComponentScope() };
this.angularQueryEditor = loader.load(this.element, scopeProps, template);
this.angularScope = scopeProps.ctrl;
};
onOpen = () => {
this.renderAngularQueryEditor();
};
renderPluginEditor = () => {
const { query, onChange, queries, onRunQuery } = this.props;
const { datasource, data } = this.state;
if (datasource?.components?.QueryCtrl) {
return <div ref={(element) => (this.element = element)} />;
}
if (datasource?.components?.QueryEditor) {
const QueryEditor = datasource.components.QueryEditor;
return (
<QueryEditor
key={datasource?.name}
query={query}
datasource={datasource}
onChange={onChange}
onRunQuery={onRunQuery}
data={data}
range={getTimeSrv().timeRange()}
queries={queries}
/>
);
}
return <div>Data source plugin does not export any Query Editor component</div>;
};
onToggleEditMode = (e: React.MouseEvent, props: QueryOperationRowRenderProps) => {
e.stopPropagation();
if (this.angularScope && this.angularScope.toggleEditorMode) {
this.angularScope.toggleEditorMode();
this.angularQueryEditor?.digest();
if (!props.isOpen) {
props.onOpen();
}
}
};
onRemoveQuery = () => {
this.props.onRemoveQuery(this.props.query);
};
onCopyQuery = () => {
const copy = cloneDeep(this.props.query);
this.props.onAddQuery(copy);
};
onDisableQuery = () => {
const { query } = this.props;
this.props.onChange({ ...query, hide: !query.hide });
this.props.onRunQuery();
};
onToggleHelp = () => {
this.setState((state) => ({
showingHelp: !state.showingHelp,
}));
};
onClickExample = (query: DataQuery) => {
this.props.onChange({
...query,
refId: this.props.query.refId,
});
this.onToggleHelp();
};
renderCollapsedText(): string | null {
const { datasource } = this.state;
if (datasource?.getQueryDisplayText) {
return datasource.getQueryDisplayText(this.props.query);
}
if (this.angularScope && this.angularScope.getCollapsedText) {
return this.angularScope.getCollapsedText();
}
return null;
}
renderActions = (props: QueryOperationRowRenderProps) => {
const { query, hideDisableQuery = false } = this.props;
const { hasTextEditMode, datasource } = this.state;
const isDisabled = query.hide;
const hasEditorHelp = datasource?.components?.QueryEditorHelp;
return (
<HorizontalGroup width="auto">
{hasEditorHelp && (
<QueryOperationAction title="Toggle data source help" icon="question-circle" onClick={this.onToggleHelp} />
)}
{hasTextEditMode && (
<QueryOperationAction
title="Toggle text edit mode"
icon="pen"
onClick={(e) => {
this.onToggleEditMode(e, props);
}}
/>
)}
<QueryOperationAction title="Duplicate query" icon="copy" onClick={this.onCopyQuery} />
{!hideDisableQuery ? (
<QueryOperationAction
title="Disable/enable query"
icon={isDisabled ? 'eye-slash' : 'eye'}
onClick={this.onDisableQuery}
/>
) : null}
<QueryOperationAction title="Remove query" icon="trash-alt" onClick={this.onRemoveQuery} />
</HorizontalGroup>
);
};
renderHeader = (props: QueryOperationRowRenderProps) => {
const { query, dataSource, onChangeDataSource, onChange, queries, renderHeaderExtras } = this.props;
return (
<QueryEditorRowHeader
query={query}
queries={queries}
onChangeDataSource={onChangeDataSource}
dataSource={dataSource}
disabled={query.hide}
onClick={(e) => this.onToggleEditMode(e, props)}
onChange={onChange}
collapsedText={!props.isOpen ? this.renderCollapsedText() : null}
renderExtras={renderHeaderExtras}
/>
);
};
render() {
const { query, id, index, visualization } = this.props;
const { datasource, showingHelp } = this.state;
const isDisabled = query.hide;
const rowClasses = classNames('query-editor-row', {
'query-editor-row--disabled': isDisabled,
'gf-form-disabled': isDisabled,
});
if (!datasource) {
return null;
}
const editor = this.renderPluginEditor();
const DatasourceCheatsheet = datasource.components?.QueryEditorHelp;
return (
<div aria-label={selectors.components.QueryEditorRows.rows}>
<QueryOperationRow
id={id}
draggable={true}
index={index}
headerElement={this.renderHeader}
actions={this.renderActions}
onOpen={this.onOpen}
>
<div className={rowClasses}>
<ErrorBoundaryAlert>
{showingHelp && DatasourceCheatsheet && (
<InfoBox onDismiss={this.onToggleHelp}>
<DatasourceCheatsheet
onClickExample={(query) => this.onClickExample(query)}
datasource={datasource}
/>
</InfoBox>
)}
{editor}
</ErrorBoundaryAlert>
{visualization}
</div>
</QueryOperationRow>
</div>
);
}
}
function notifyAngularQueryEditorsOfData(scope: AngularQueryComponentScope, data: PanelData, editor: AngularComponent) {
if (data.state === LoadingState.Done) {
const legacy = data.series.map((v) => toLegacyResponseData(v));
scope.events.emit(PanelEvents.dataReceived, legacy);
} else if (data.state === LoadingState.Error) {
scope.events.emit(PanelEvents.dataError, data.error);
}
// Some query controllers listen to data error events and need a digest
// for some reason this needs to be done in next tick
setTimeout(editor.digest);
}
export interface AngularQueryComponentScope {
target: DataQuery;
panel: PanelModel;
dashboard: DashboardModel;
events: EventBusExtended;
refresh: () => void;
render: () => void;
datasource: DataSourceApi | null;
toggleEditorMode?: () => void;
getCollapsedText?: () => string;
range: TimeRange;
}
/**
* Get a version of the PanelData limited to the query we are looking at
*/
export function filterPanelDataToQuery(data: PanelData, refId: string): PanelData | undefined {
const series = data.series.filter((series) => series.refId === refId);
// No matching series
if (!series.length) {
// If there was an error with no data, pass it to the QueryEditors
if (data.error && !data.series.length) {
return {
...data,
state: LoadingState.Error,
};
}
return undefined;
}
// Only say this is an error if the error links to the query
let state = LoadingState.Done;
const error = data.error && data.error.refId === refId ? data.error : undefined;
if (error) {
state = LoadingState.Error;
}
const timeRange = data.timeRange;
return {
...data,
state,
series,
error,
timeRange,
};
}