From 00f16cd01851196f4029ec1b212d816e3050760d Mon Sep 17 00:00:00 2001 From: Isabella Siu Date: Mon, 18 Mar 2024 08:56:57 -0400 Subject: [PATCH] CloudWatch Logs: Remove toggle for cloudWatchLogsMonacoEditor (#84414) --- .betterer.results | 10 -- .../feature-toggles/index.md | 1 - .../src/types/featureToggles.gen.ts | 1 - pkg/services/featuremgmt/registry.go | 9 -- pkg/services/featuremgmt/toggles_gen.csv | 1 - pkg/services/featuremgmt/toggles_gen.go | 4 - pkg/services/featuremgmt/toggles_gen.json | 3 +- .../LogsQueryEditor/LogsQueryEditor.tsx | 33 +---- .../LogsQueryEditor/LogsQueryField.tsx | 4 +- .../LogsQueryEditor/LogsQueryFieldOld.tsx | 119 ------------------ 10 files changed, 7 insertions(+), 178 deletions(-) delete mode 100644 public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryFieldOld.tsx diff --git a/.betterer.results b/.betterer.results index f465107fe69..e718efde2b2 100644 --- a/.betterer.results +++ b/.betterer.results @@ -4494,9 +4494,6 @@ exports[`better eslint`] = { "public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryEditor.tsx:5381": [ [0, 0, 0, "Styles should be written using objects.", "0"] ], - "public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryFieldOld.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/DynamicLabelsField.tsx:5381": [ [0, 0, 0, "Styles should be written using objects.", "0"] ], @@ -6551,7 +6548,6 @@ exports[`no gf-form usage`] = { [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"] ], "public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryEditor.tsx:5381": [ - [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"] ], "public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryField.tsx:5381": [ @@ -6559,12 +6555,6 @@ exports[`no gf-form usage`] = { [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"] ], - "public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryFieldOld.tsx:5381": [ - [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], - [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], - [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], - [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"] - ], "public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LegacyLogGroupNamesSelection.tsx:5381": [ [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"] diff --git a/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md b/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md index e305ab17659..4a040f36d7e 100644 --- a/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md +++ b/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md @@ -38,7 +38,6 @@ Some features are enabled by default. You can disable these feature by setting t | `lokiMetricDataplane` | Changes metric responses from Loki to be compliant with the dataplane specification. | Yes | | `dataplaneFrontendFallback` | Support dataplane contract field name change for transformations and field name matchers where the name is different | Yes | | `enableElasticsearchBackendQuerying` | Enable the processing of queries and responses in the Elasticsearch data source through backend | Yes | -| `cloudWatchLogsMonacoEditor` | Enables the Monaco editor for CloudWatch Logs queries | Yes | | `recordedQueriesMulti` | Enables writing multiple items from a single query within Recorded Queries | Yes | | `logsExploreTableVisualisation` | A table visualisation for logs in Explore | Yes | | `transformationsRedesign` | Enables the transformations redesign | Yes | diff --git a/packages/grafana-data/src/types/featureToggles.gen.ts b/packages/grafana-data/src/types/featureToggles.gen.ts index 1d394adfca0..7fb36ef7153 100644 --- a/packages/grafana-data/src/types/featureToggles.gen.ts +++ b/packages/grafana-data/src/types/featureToggles.gen.ts @@ -87,7 +87,6 @@ export interface FeatureToggles { frontendSandboxMonitorOnly?: boolean; sqlDatasourceDatabaseSelection?: boolean; lokiFormatQuery?: boolean; - cloudWatchLogsMonacoEditor?: boolean; recordedQueriesMulti?: boolean; pluginsDynamicAngularDetectionPatterns?: boolean; vizAndWidgetSplit?: boolean; diff --git a/pkg/services/featuremgmt/registry.go b/pkg/services/featuremgmt/registry.go index 81ff72f692e..a6e1858bca9 100644 --- a/pkg/services/featuremgmt/registry.go +++ b/pkg/services/featuremgmt/registry.go @@ -514,15 +514,6 @@ var ( Stage: FeatureStageExperimental, Owner: grafanaObservabilityLogsSquad, }, - { - Name: "cloudWatchLogsMonacoEditor", - Description: "Enables the Monaco editor for CloudWatch Logs queries", - Stage: FeatureStageGeneralAvailability, - FrontendOnly: true, - Expression: "true", // enabled by default - Owner: awsDatasourcesSquad, - AllowSelfServe: true, - }, { Name: "recordedQueriesMulti", Description: "Enables writing multiple items from a single query within Recorded Queries", diff --git a/pkg/services/featuremgmt/toggles_gen.csv b/pkg/services/featuremgmt/toggles_gen.csv index cfb3fd8fbd1..6954a9c3891 100644 --- a/pkg/services/featuremgmt/toggles_gen.csv +++ b/pkg/services/featuremgmt/toggles_gen.csv @@ -68,7 +68,6 @@ dashboardEmbed,experimental,@grafana/grafana-as-code,false,false,true frontendSandboxMonitorOnly,experimental,@grafana/plugins-platform-backend,false,false,true sqlDatasourceDatabaseSelection,preview,@grafana/dataviz-squad,false,false,true lokiFormatQuery,experimental,@grafana/observability-logs,false,false,true -cloudWatchLogsMonacoEditor,GA,@grafana/aws-datasources,false,false,true recordedQueriesMulti,GA,@grafana/observability-metrics,false,false,false pluginsDynamicAngularDetectionPatterns,experimental,@grafana/plugins-platform-backend,false,false,false vizAndWidgetSplit,experimental,@grafana/dashboards-squad,false,false,true diff --git a/pkg/services/featuremgmt/toggles_gen.go b/pkg/services/featuremgmt/toggles_gen.go index 7ac006ae6e1..40581da464b 100644 --- a/pkg/services/featuremgmt/toggles_gen.go +++ b/pkg/services/featuremgmt/toggles_gen.go @@ -283,10 +283,6 @@ const ( // Enables the ability to format Loki queries FlagLokiFormatQuery = "lokiFormatQuery" - // FlagCloudWatchLogsMonacoEditor - // Enables the Monaco editor for CloudWatch Logs queries - FlagCloudWatchLogsMonacoEditor = "cloudWatchLogsMonacoEditor" - // FlagRecordedQueriesMulti // Enables writing multiple items from a single query within Recorded Queries FlagRecordedQueriesMulti = "recordedQueriesMulti" diff --git a/pkg/services/featuremgmt/toggles_gen.json b/pkg/services/featuremgmt/toggles_gen.json index 00ba0cd9672..0878000aae4 100644 --- a/pkg/services/featuremgmt/toggles_gen.json +++ b/pkg/services/featuremgmt/toggles_gen.json @@ -1555,7 +1555,8 @@ "metadata": { "name": "cloudWatchLogsMonacoEditor", "resourceVersion": "1709648236447", - "creationTimestamp": "2024-03-05T14:17:16Z" + "creationTimestamp": "2024-03-05T14:17:16Z", + "deletionTimestamp": "2024-03-13T18:21:47Z" }, "spec": { "description": "Enables the Monaco editor for CloudWatch Logs queries", diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryEditor.tsx index 14222b9af46..fd57a6f4587 100644 --- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryEditor.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryEditor.tsx @@ -1,16 +1,14 @@ import { css } from '@emotion/css'; import React, { memo } from 'react'; -import { AbsoluteTimeRange, QueryEditorProps } from '@grafana/data'; -import { config } from '@grafana/runtime'; +import { QueryEditorProps } from '@grafana/data'; import { InlineFormLabel } from '@grafana/ui'; import { CloudWatchDatasource } from '../../../datasource'; import { CloudWatchJsonData, CloudWatchLogsQuery, CloudWatchQuery } from '../../../types'; import { CloudWatchLink } from './CloudWatchLink'; -import CloudWatchLogsQueryFieldMonaco from './LogsQueryField'; -import CloudWatchLogsQueryField from './LogsQueryFieldOld'; +import CloudWatchLogsQueryField from './LogsQueryField'; type Props = QueryEditorProps & { query: CloudWatchLogsQuery; @@ -24,34 +22,9 @@ const labelClass = css` export const CloudWatchLogsQueryEditor = memo(function CloudWatchLogsQueryEditor(props: Props) { const { query, data, datasource } = props; - let absolute: AbsoluteTimeRange; - if (data?.request?.range?.from) { - const { range } = data.request; - absolute = { - from: range.from.valueOf(), - to: range.to.valueOf(), - }; - } else { - absolute = { - from: Date.now() - 10000, - to: Date.now(), - }; - } - - return config.featureToggles.cloudWatchLogsMonacoEditor ? ( - - - - } - /> - ) : ( + return ( diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryField.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryField.tsx index 52c44d1d252..cf30ff6665e 100644 --- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryField.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryField.tsx @@ -18,7 +18,7 @@ export interface CloudWatchLogsQueryFieldProps ExtraFieldElement?: ReactNode; query: CloudWatchLogsQuery; } -export const CloudWatchLogsQueryFieldMonaco = (props: CloudWatchLogsQueryFieldProps) => { +export const CloudWatchLogsQueryField = (props: CloudWatchLogsQueryFieldProps) => { const { query, datasource, onChange, ExtraFieldElement, data } = props; const showError = data?.error?.refId === query.refId; @@ -141,4 +141,4 @@ export const CloudWatchLogsQueryFieldMonaco = (props: CloudWatchLogsQueryFieldPr ); }; -export default withTheme2(CloudWatchLogsQueryFieldMonaco); +export default withTheme2(CloudWatchLogsQueryField); diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryFieldOld.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryFieldOld.tsx deleted file mode 100644 index 925ddabf69b..00000000000 --- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryFieldOld.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import { LanguageMap, languages as prismLanguages } from 'prismjs'; -import React, { ReactNode } from 'react'; -import { Node, Plugin } from 'slate'; -import { Editor } from 'slate-react'; - -import { AbsoluteTimeRange, QueryEditorProps } from '@grafana/data'; -import { - BracesPlugin, - QueryField, - SlatePrism, - Themeable2, - TypeaheadInput, - TypeaheadOutput, - withTheme2, -} from '@grafana/ui'; - -// Utils & Services -// dom also includes Element polyfills -import { CloudWatchDatasource } from '../../../datasource'; -import syntax from '../../../language/cloudwatch-logs/syntax'; -import { CloudWatchJsonData, CloudWatchLogsQuery, CloudWatchQuery, LogGroup } from '../../../types'; -import { getStatsGroups } from '../../../utils/query/getStatsGroups'; -import { LogGroupsFieldWrapper } from '../../shared/LogGroups/LogGroupsField'; - -export interface CloudWatchLogsQueryFieldProps - extends QueryEditorProps, - Themeable2 { - absoluteRange: AbsoluteTimeRange; - onLabelsRefresh?: () => void; - ExtraFieldElement?: ReactNode; - query: CloudWatchLogsQuery; -} -const plugins: Array> = [ - BracesPlugin(), - SlatePrism( - { - onlyIn: (node: Node) => node.object === 'block' && node.type === 'code_block', - getSyntax: (node: Node) => 'cloudwatch', - }, - { ...(prismLanguages as LanguageMap), cloudwatch: syntax } - ), -]; -export const CloudWatchLogsQueryField = (props: CloudWatchLogsQueryFieldProps) => { - const { query, datasource, onChange, ExtraFieldElement, data } = props; - - const showError = data?.error?.refId === query.refId; - const cleanText = datasource.languageProvider.cleanText; - - const onChangeQuery = (value: string) => { - // Send text change to parent - const nextQuery = { - ...query, - expression: value, - statsGroups: getStatsGroups(value), - }; - onChange(nextQuery); - }; - - const onTypeahead = async (typeahead: TypeaheadInput): Promise => { - const { datasource, query } = props; - const { logGroups } = query; - - if (!datasource.languageProvider) { - return { suggestions: [] }; - } - - const { history, absoluteRange } = props; - const { prefix, text, value, wrapperClasses, labelKey, editor } = typeahead; - - return await datasource.languageProvider.provideCompletionItems( - { text, value, prefix, wrapperClasses, labelKey, editor }, - { - history, - absoluteRange, - logGroups: logGroups, - region: query.region, - } - ); - }; - - return ( - <> - { - onChange({ ...query, logGroups, logGroupNames: undefined }); - }} - //legacy props can be removed once we remove support for Legacy Log Group Selector - legacyOnChange={(logGroups: string[]) => { - onChange({ ...query, logGroupNames: logGroups }); - }} - /> -
-
- -
- {ExtraFieldElement} -
- {showError ? ( -
-
{data?.error?.message}
-
- ) : null} - - ); -}; - -export default withTheme2(CloudWatchLogsQueryField);