IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: simplify support for multiple query editors (#48701)

Browse Source 
* Explore: simplify support for multiple query editors

* CloudWatch: remove usage of deprecated plugin methods

* Apply suggestions from code review

Co-authored-by: JitaC <70489351+achatterjee-grafana@users.noreply.github.com>

* Update docs/sources/developers/plugins/add-support-for-explore-queries.md

Co-authored-by: JitaC <70489351+achatterjee-grafana@users.noreply.github.com>

* Update docs/sources/developers/plugins/add-support-for-explore-queries.md

Co-authored-by: JitaC <70489351+achatterjee-grafana@users.noreply.github.com>

* run prettier

Co-authored-by: JitaC <70489351+achatterjee-grafana@users.noreply.github.com>
This commit is contained in:
Giordano Ricci 2022-05-05 10:36:50 +01:00 committed by GitHub
parent 1cd9175075
commit 143810bb95
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/sources/developers/plugins/add-query-editor-help.md
View File

@ -27,7 +27,6 @@ By adding a help component to your plugin, you can for example create "cheat she
export const plugin = new DataSourcePlugin<DataSource, MyQuery, MyDataSourceOptions>(DataSource)
.setConfigEditor(ConfigEditor)
.setQueryEditor(QueryEditor)
.setExploreQueryField(ExploreQueryEditor)
.setQueryEditorHelp(QueryEditorHelp);
```

61
docs/sources/developers/plugins/add-support-for-explore-queries.md
View File

@ -10,11 +10,11 @@ This guide assumes that you're already familiar with how to [Build a data source
With Explore, users can make ad-hoc queries without the use of a dashboard. This is useful when users want to troubleshoot or to learn more about the data.
Your data source already supports Explore by default, and will use the existing query editor for the data source. If you want to offer extended Explore functionality for your data source however, you can define a Explore-specific query editor.
Your data source supports Explore by default and uses the existing query editor for the data source.
## Add a query editor for Explore
## Add an Explore-specific query editor
The query editor for Explore is similar to the query editor for the data source itself. In fact, you'll probably reuse the same components for both query editors.
To extend Explore functionality for your data source, you can define an Explore-specific query editor.
1. Create a file `ExploreQueryEditor.tsx` in the `src` directory of your plugin, with the following content:
@ -26,60 +26,31 @@ The query editor for Explore is similar to the query editor for the data source
import { DataSource } from './DataSource';
import { MyQuery, MyDataSourceOptions } from './types';
export type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
export default (props: Props) => {
return <h2>My query editor</h2>;
return <h2>My Explore-specific query editor</h2>;
};
```
1. Configure the plugin to use the `ExploreQueryEditor`.
1. Modify your base query editor in `QueryEditor.tsx` to render the Explore-specific query editor. For example:
```ts
// [...]
import { CoreApp } from '@grafana/data';
import ExploreQueryEditor from './ExploreQueryEditor';
```
```ts
export const plugin = new DataSourcePlugin<DataSource, MyQuery, MyDataSourceOptions>(DataSource)
.setConfigEditor(ConfigEditor)
.setQueryEditor(QueryEditor)
.setExploreQueryField(ExploreQueryEditor);
```
type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
1. Add a `QueryField` to `ExploreQueryEditor`.
```ts
import { QueryField } from '@grafana/ui';
```
```ts
export default (props: Props) => {
const { query } = props;
const { app } = props;
const onQueryChange = (value: string, override?: boolean) => {
const { query, onChange, onRunQuery } = props;
if (onChange) {
// Update the query whenever the query field changes.
onChange({ ...query, queryText: value });
// Run the query on Enter.
if (override && onRunQuery) {
onRunQuery();
}
}
};
return (
<QueryField
portalOrigin="mock-origin"
onChange={onQueryChange}
onRunQuery={props.onRunQuery}
onBlur={props.onBlur}
query={query.queryText || ''}
placeholder="Enter a query"
/>
);
switch (app) {
case CoreApp.Explore:
return <ExploreQueryEditor {...props} />;
default:
return <div>My base query editor</div>;
}
};
```

6
packages/grafana-data/src/types/datasource.ts
View File

@ -65,16 +65,19 @@ export class DataSourcePlugin<
return this;
}
/** @deprecated Use `setQueryEditor` instead. When using Explore `props.app` is equal to `CoreApp.Explore` */
setExploreQueryField(ExploreQueryField: ComponentType<QueryEditorProps<DSType, TQuery, TOptions>>) {
this.components.ExploreQueryField = ExploreQueryField;
return this;
}
/** @deprecated Use `setQueryEditor` instead. */
setExploreMetricsQueryField(ExploreQueryField: ComponentType<QueryEditorProps<DSType, TQuery, TOptions>>) {
this.components.ExploreMetricsQueryField = ExploreQueryField;
return this;
}
/** @deprecated Use `setQueryEditor` instead. */
setExploreLogsQueryField(ExploreQueryField: ComponentType<QueryEditorProps<DSType, TQuery, TOptions>>) {
this.components.ExploreLogsQueryField = ExploreQueryField;
return this;
@ -151,8 +154,11 @@ export interface DataSourcePluginComponents<
AnnotationsQueryCtrl?: any;
VariableQueryEditor?: any;
QueryEditor?: ComponentType<QueryEditorProps<DSType, TQuery, TOptions>>;
/** @deprecated it will be removed in a future release and `QueryEditor` will be used instead. */
ExploreQueryField?: ComponentType<QueryEditorProps<DSType, TQuery, TOptions>>;
/** @deprecated it will be removed in a future release and `QueryEditor` will be used instead. */
ExploreMetricsQueryField?: ComponentType<QueryEditorProps<DSType, TQuery, TOptions>>;
/** @deprecated it will be removed in a future release and `QueryEditor` will be used instead. */
ExploreLogsQueryField?: ComponentType<QueryEditorProps<DSType, TQuery, TOptions>>;
QueryEditorHelp?: ComponentType<QueryEditorHelpProps<TQuery>>;
ConfigEditor?: ComponentType<DataSourcePluginOptionsEditorProps<TOptions, TSecureOptions>>;

5
public/app/plugins/datasource/cloudwatch/module.tsx
View File

@ -2,7 +2,6 @@ import { DataSourcePlugin } from '@grafana/data';
import { ConfigEditor } from './components/ConfigEditor';
import LogsCheatSheet from './components/LogsCheatSheet';
import { CloudWatchLogsQueryEditor } from './components/LogsQueryEditor';
import { MetaInspector } from './components/MetaInspector';
import { PanelQueryEditor } from './components/PanelQueryEditor';
import { CloudWatchDatasource } from './datasource';
@ -14,6 +13,4 @@ export const plugin = new DataSourcePlugin<CloudWatchDatasource, CloudWatchQuery
.setQueryEditorHelp(LogsCheatSheet)
.setConfigEditor(ConfigEditor)
.setQueryEditor(PanelQueryEditor)
.setMetadataInspector(MetaInspector)
.setExploreMetricsQueryField(PanelQueryEditor)
.setExploreLogsQueryField(CloudWatchLogsQueryEditor);
.setMetadataInspector(MetaInspector);