From 143810bb95af196174f05fd3b8d59b8518e6277e Mon Sep 17 00:00:00 2001 From: Giordano Ricci Date: Thu, 5 May 2022 10:36:50 +0100 Subject: [PATCH] Explore: simplify support for multiple query editors (#48701) * 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> --- .../plugins/add-query-editor-help.md | 1 - .../add-support-for-explore-queries.md | 61 +++++-------------- packages/grafana-data/src/types/datasource.ts | 6 ++ .../plugins/datasource/cloudwatch/module.tsx | 5 +- 4 files changed, 23 insertions(+), 50 deletions(-) diff --git a/docs/sources/developers/plugins/add-query-editor-help.md b/docs/sources/developers/plugins/add-query-editor-help.md index 6eca73a4687..13d4687641c 100644 --- a/docs/sources/developers/plugins/add-query-editor-help.md +++ b/docs/sources/developers/plugins/add-query-editor-help.md @@ -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) .setConfigEditor(ConfigEditor) .setQueryEditor(QueryEditor) - .setExploreQueryField(ExploreQueryEditor) .setQueryEditorHelp(QueryEditorHelp); ``` diff --git a/docs/sources/developers/plugins/add-support-for-explore-queries.md b/docs/sources/developers/plugins/add-support-for-explore-queries.md index be4ef28037f..4c9e357222e 100644 --- a/docs/sources/developers/plugins/add-support-for-explore-queries.md +++ b/docs/sources/developers/plugins/add-support-for-explore-queries.md @@ -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; + type Props = QueryEditorProps; export default (props: Props) => { - return

My query editor

; + return

My Explore-specific query editor

; }; ``` -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) - .setConfigEditor(ConfigEditor) - .setQueryEditor(QueryEditor) - .setExploreQueryField(ExploreQueryEditor); - ``` + type Props = QueryEditorProps; -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 ( - - ); + switch (app) { + case CoreApp.Explore: + return ; + default: + return
My base query editor
; + } }; ``` diff --git a/packages/grafana-data/src/types/datasource.ts b/packages/grafana-data/src/types/datasource.ts index d05fc6985e6..8d84a51751e 100644 --- a/packages/grafana-data/src/types/datasource.ts +++ b/packages/grafana-data/src/types/datasource.ts @@ -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>) { this.components.ExploreQueryField = ExploreQueryField; return this; } + /** @deprecated Use `setQueryEditor` instead. */ setExploreMetricsQueryField(ExploreQueryField: ComponentType>) { this.components.ExploreMetricsQueryField = ExploreQueryField; return this; } + /** @deprecated Use `setQueryEditor` instead. */ setExploreLogsQueryField(ExploreQueryField: ComponentType>) { this.components.ExploreLogsQueryField = ExploreQueryField; return this; @@ -151,8 +154,11 @@ export interface DataSourcePluginComponents< AnnotationsQueryCtrl?: any; VariableQueryEditor?: any; QueryEditor?: ComponentType>; + /** @deprecated it will be removed in a future release and `QueryEditor` will be used instead. */ ExploreQueryField?: ComponentType>; + /** @deprecated it will be removed in a future release and `QueryEditor` will be used instead. */ ExploreMetricsQueryField?: ComponentType>; + /** @deprecated it will be removed in a future release and `QueryEditor` will be used instead. */ ExploreLogsQueryField?: ComponentType>; QueryEditorHelp?: ComponentType>; ConfigEditor?: ComponentType>; diff --git a/public/app/plugins/datasource/cloudwatch/module.tsx b/public/app/plugins/datasource/cloudwatch/module.tsx index a4f63d4bca4..b295691232c 100644 --- a/public/app/plugins/datasource/cloudwatch/module.tsx +++ b/public/app/plugins/datasource/cloudwatch/module.tsx @@ -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