CloudWatch Logs: Remove toggle for cloudWatchLogsMonacoEditor (#84414)

.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"]

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                |

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;

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",

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

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"

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",

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<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData> & {
   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 ? (
-    <CloudWatchLogsQueryFieldMonaco
-      {...props}
-      ExtraFieldElement={
-        <InlineFormLabel className={`gf-form-label--btn ${labelClass}`} width="auto" tooltip="Link to Graph in AWS">
-          <CloudWatchLink query={query} panelData={data} datasource={datasource} />
-        </InlineFormLabel>
-      }
-    />
-  ) : (
+  return (
     <CloudWatchLogsQueryField
       {...props}
-      history={[]}
-      absoluteRange={absolute}
       ExtraFieldElement={
         <InlineFormLabel className={`gf-form-label--btn ${labelClass}`} width="auto" tooltip="Link to Graph in AWS">
           <CloudWatchLink query={query} panelData={data} datasource={datasource} />

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);

public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryFieldOld.tsx

@@ -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<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData>,
-    Themeable2 {
-  absoluteRange: AbsoluteTimeRange;
-  onLabelsRefresh?: () => void;
-  ExtraFieldElement?: ReactNode;
-  query: CloudWatchLogsQuery;
-}
-const plugins: Array<Plugin<Editor>> = [
-  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<TypeaheadOutput> => {
-    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 (
-    <>
-      <LogGroupsFieldWrapper
-        region={query.region}
-        datasource={datasource}
-        legacyLogGroupNames={query.logGroupNames}
-        logGroups={query.logGroups}
-        onChange={(logGroups: LogGroup[]) => {
-          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 });
-        }}
-      />
-      <div className="gf-form-inline gf-form-inline--nowrap flex-grow-1">
-        <div className="gf-form gf-form--grow flex-shrink-1">
-          <QueryField
-            additionalPlugins={plugins}
-            query={query.expression ?? ''}
-            onChange={onChangeQuery}
-            onTypeahead={onTypeahead}
-            cleanText={cleanText}
-            placeholder="Enter a CloudWatch Logs Insights query (run with Shift+Enter)"
-            portalOrigin="cloudwatch"
-          />
-        </div>
-        {ExtraFieldElement}
-      </div>
-      {showError ? (
-        <div className="query-row-break">
-          <div className="prom-query-field-info text-error">{data?.error?.message}</div>
-        </div>
-      ) : null}
-    </>
-  );
-};
-
-export default withTheme2(CloudWatchLogsQueryField);