Cloudwatch: reorg files in components (#73176)

.betterer.results

@@ -3513,10 +3513,7 @@ exports[`better eslint`] = {
     "public/app/plugins/datasource/cloud-monitoring/types/types.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/plugins/datasource/cloudwatch/components/ConfigEditor.test.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
-    "public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx:5381": [
+    "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/datasource.ts:5381": [

public/app/plugins/datasource/cloudwatch/annotationSupport.ts

@@ -1,6 +1,6 @@
 import { AnnotationQuery } from '@grafana/data';
 
-import { AnnotationQueryEditor } from './components/AnnotationQueryEditor';
+import { AnnotationQueryEditor } from './components/AnnotationQueryEditor/AnnotationQueryEditor';
 import { DEFAULT_ANNOTATIONS_QUERY } from './defaultQueries';
 import { isCloudWatchAnnotation } from './guards';
 import { CloudWatchAnnotationQuery, CloudWatchQuery, LegacyAnnotationQuery } from './types';

public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor/AnnotationQueryEditor.test.tsx

@@ -4,9 +4,9 @@ import '@testing-library/jest-dom';
 
 import { QueryEditorProps } from '@grafana/data';
 
-import { setupMockedDataSource } from '../__mocks__/CloudWatchDataSource';
-import { CloudWatchDatasource } from '../datasource';
-import { CloudWatchAnnotationQuery, CloudWatchJsonData, CloudWatchMetricsQuery, CloudWatchQuery } from '../types';
+import { setupMockedDataSource } from '../../__mocks__/CloudWatchDataSource';
+import { CloudWatchDatasource } from '../../datasource';
+import { CloudWatchAnnotationQuery, CloudWatchJsonData, CloudWatchMetricsQuery, CloudWatchQuery } from '../../types';
 
 import { AnnotationQueryEditor } from './AnnotationQueryEditor';
 

public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor/AnnotationQueryEditor.tsx

@@ -4,15 +4,15 @@ import { QueryEditorProps } from '@grafana/data';
 import { EditorField, EditorHeader, EditorRow, EditorSwitch, InlineSelect, Space } from '@grafana/experimental';
 import { Alert, Input } from '@grafana/ui';
 
-import { CloudWatchDatasource } from '../datasource';
-import { isCloudWatchAnnotationQuery } from '../guards';
-import { useRegions } from '../hooks';
-import { CloudWatchJsonData, CloudWatchQuery, MetricStat } from '../types';
-
-import { MetricStatEditor } from './MetricStatEditor';
+import { CloudWatchDatasource } from '../../datasource';
+import { isCloudWatchAnnotationQuery } from '../../guards';
+import { useRegions } from '../../hooks';
+import { CloudWatchJsonData, CloudWatchQuery, MetricStat } from '../../types';
+import { MetricStatEditor } from '../shared/MetricStatEditor/MetricStatEditor';
 
 export type Props = QueryEditorProps<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData>;
 
+// Dashboard Settings -> Annotations -> New Query
 export const AnnotationQueryEditor = (props: Props) => {
   const { query, onChange, datasource } = props;
   const [regions, regionIsLoading] = useRegions(datasource);

public/app/plugins/datasource/cloudwatch/components/CheatSheet/LogsCheatSheet.tsx

@@ -6,8 +6,8 @@ import React, { useState } from 'react';
 import { Collapse } from '@grafana/ui';
 import { flattenTokens } from '@grafana/ui/src/slate-plugins/slate-prism';
 
-import tokenizer from '../language/cloudwatch-logs/syntax';
-import { CloudWatchQuery } from '../types';
+import tokenizer from '../../language/cloudwatch-logs/syntax';
+import { CloudWatchQuery } from '../../types';
 
 interface QueryExample {
   category: string;

public/app/plugins/datasource/cloudwatch/components/ConfigEditor/ConfigEditor.test.tsx

@@ -7,8 +7,8 @@ import { AwsAuthType } from '@grafana/aws-sdk';
 import { PluginContextProvider, PluginMeta, PluginMetaInfo, PluginType } from '@grafana/data';
 import { configureStore } from 'app/store/configureStore';
 
-import { CloudWatchSettings, setupMockedDataSource } from '../__mocks__/CloudWatchDataSource';
-import { CloudWatchDatasource } from '../datasource';
+import { CloudWatchSettings, setupMockedDataSource } from '../../__mocks__/CloudWatchDataSource';
+import { CloudWatchDatasource } from '../../datasource';
 
 import { ConfigEditor, Props } from './ConfigEditor';
 
@@ -107,9 +107,6 @@ const setup = (optionOverrides?: Partial<Props['options']>) => {
 
 describe('Render', () => {
   beforeEach(() => {
-    (window as any).grafanaBootData = {
-      settings: {},
-    };
     jest.resetAllMocks();
     putMock.mockImplementation(async () => ({ datasource: setupMockedDataSource().datasource }));
     getMock.mockImplementation(async () => ({ datasource: setupMockedDataSource().datasource }));

public/app/plugins/datasource/cloudwatch/components/ConfigEditor/ConfigEditor.tsx

@@ -18,11 +18,11 @@ import { createWarningNotification } from 'app/core/copy/appNotification';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { store } from 'app/store/store';
 
-import { CloudWatchDatasource } from '../datasource';
-import { SelectableResourceValue } from '../resources/types';
-import { CloudWatchJsonData, CloudWatchSecureJsonData } from '../types';
+import { CloudWatchDatasource } from '../../datasource';
+import { SelectableResourceValue } from '../../resources/types';
+import { CloudWatchJsonData, CloudWatchSecureJsonData } from '../../types';
+import { LogGroupsField } from '../shared/LogGroups/LogGroupsField';
 
-import { LogGroupsField } from './LogGroups/LogGroupsField';
 import { XrayLinkConfig } from './XrayLinkConfig';
 
 export type Props = DataSourcePluginOptionsEditorProps<CloudWatchJsonData, CloudWatchSecureJsonData>;

public/app/plugins/datasource/cloudwatch/components/Forms.tsx

@@ -1,29 +0,0 @@
-import React, { InputHTMLAttributes } from 'react';
-
-import { InlineFormLabel } from '@grafana/ui';
-
-export interface Props extends InputHTMLAttributes<HTMLInputElement> {
-  label: string;
-  tooltip?: string;
-  children?: React.ReactNode;
-}
-
-export const QueryField = ({ label, tooltip, children }: Partial<Props>) => (
-  <>
-    <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
-      {label}
-    </InlineFormLabel>
-    {children}
-  </>
-);
-
-export const QueryInlineField = ({ ...props }: Props) => {
-  return (
-    <div className={'gf-form-inline'}>
-      <QueryField {...props} />
-      <div className="gf-form gf-form--grow">
-        <div className="gf-form-label gf-form-label--grow" />
-      </div>
-    </div>
-  );
-};

public/app/plugins/datasource/cloudwatch/components/MetaInspector/MetaInspector.tsx

@@ -3,11 +3,12 @@ import React, { useMemo } from 'react';
 
 import { MetadataInspectorProps } from '@grafana/data';
 
-import { CloudWatchDatasource } from '../datasource';
-import { CloudWatchQuery, CloudWatchJsonData } from '../types';
+import { CloudWatchDatasource } from '../../datasource';
+import { CloudWatchQuery, CloudWatchJsonData } from '../../types';
 
 export type Props = MetadataInspectorProps<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData>;
 
+// To view: Query Editor in Dashboard -> Query Inspector -> Meta Data
 export function MetaInspector({ data = [] }: Props) {
   const rows = useMemo(() => groupBy(data, 'refId'), [data]);
 

public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/CloudWatchLink.test.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 
 import { LoadingState } from '@grafana/data';
 
-import { setupMockedDataSource } from '../__mocks__/CloudWatchDataSource';
-import { RequestMock } from '../__mocks__/Request';
-import { validLogsQuery } from '../__mocks__/queries';
-import { CloudWatchLogsQuery } from '../types';
+import { setupMockedDataSource } from '../../../__mocks__/CloudWatchDataSource';
+import { RequestMock } from '../../../__mocks__/Request';
+import { validLogsQuery } from '../../../__mocks__/queries';
+import { CloudWatchLogsQuery } from '../../../types';
 
 import { CloudWatchLink } from './CloudWatchLink';
 

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

@@ -4,9 +4,9 @@ import { usePrevious } from 'react-use';
 import { PanelData } from '@grafana/data';
 import { Icon } from '@grafana/ui';
 
-import { AwsUrl, encodeUrl } from '../aws_url';
-import { CloudWatchDatasource } from '../datasource';
-import { CloudWatchLogsQuery } from '../types';
+import { AwsUrl, encodeUrl } from '../../../aws_url';
+import { CloudWatchDatasource } from '../../../datasource';
+import { CloudWatchLogsQuery } from '../../../types';
 
 interface Props {
   query: CloudWatchLogsQuery;

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

@@ -1,4 +1,3 @@
-// Libraries
 import { css } from '@emotion/css';
 import React, { memo } from 'react';
 
@@ -6,12 +5,12 @@ import { AbsoluteTimeRange, QueryEditorProps } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { InlineFormLabel } from '@grafana/ui';
 
-import { CloudWatchDatasource } from '../datasource';
-import { CloudWatchJsonData, CloudWatchLogsQuery, CloudWatchQuery } from '../types';
+import { CloudWatchDatasource } from '../../../datasource';
+import { CloudWatchJsonData, CloudWatchLogsQuery, CloudWatchQuery } from '../../../types';
 
 import { CloudWatchLink } from './CloudWatchLink';
-import CloudWatchLogsQueryField from './LogsQueryField';
-import CloudWatchLogsQueryFieldMonaco from './LogsQueryField/LogsQueryField';
+import CloudWatchLogsQueryFieldMonaco from './LogsQueryField';
+import CloudWatchLogsQueryField from './LogsQueryFieldOld';
 
 type Props = QueryEditorProps<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData> & {
   query: CloudWatchLogsQuery;

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

@@ -4,14 +4,13 @@ import React, { ReactNode, useCallback } from 'react';
 import { QueryEditorProps } from '@grafana/data';
 import { CodeEditor, Monaco, Themeable2, withTheme2 } from '@grafana/ui';
 
-import { CloudWatchDatasource } from '../../datasource';
-import language from '../../language/logs/definition';
-import { TRIGGER_SUGGEST } from '../../language/monarch/commands';
-import { registerLanguage } from '../../language/monarch/register';
-import { CloudWatchJsonData, CloudWatchLogsQuery, CloudWatchQuery } from '../../types';
-import { getStatsGroups } from '../../utils/query/getStatsGroups';
-
-import { LogGroupsField } from './../LogGroups/LogGroupsField';
+import { CloudWatchDatasource } from '../../../datasource';
+import language from '../../../language/logs/definition';
+import { TRIGGER_SUGGEST } from '../../../language/monarch/commands';
+import { registerLanguage } from '../../../language/monarch/register';
+import { CloudWatchJsonData, CloudWatchLogsQuery, CloudWatchQuery } from '../../../types';
+import { getStatsGroups } from '../../../utils/query/getStatsGroups';
+import { LogGroupsField } from '../../shared/LogGroups/LogGroupsField';
 
 export interface CloudWatchLogsQueryFieldProps
   extends QueryEditorProps<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData>,

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

@@ -16,12 +16,11 @@ import {
 
 // Utils & Services
 // dom also includes Element polyfills
-import { CloudWatchDatasource } from '../datasource';
-import syntax from '../language/cloudwatch-logs/syntax';
-import { CloudWatchJsonData, CloudWatchLogsQuery, CloudWatchQuery } from '../types';
-import { getStatsGroups } from '../utils/query/getStatsGroups';
-
-import { LogGroupsField } from './LogGroups/LogGroupsField';
+import { CloudWatchDatasource } from '../../../datasource';
+import syntax from '../../../language/cloudwatch-logs/syntax';
+import { CloudWatchJsonData, CloudWatchLogsQuery, CloudWatchQuery } from '../../../types';
+import { getStatsGroups } from '../../../utils/query/getStatsGroups';
+import { LogGroupsField } from '../../shared/LogGroups/LogGroupsField';
 
 export interface CloudWatchLogsQueryFieldProps
   extends QueryEditorProps<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData>,

public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/DynamicLabelsField.tsx

@@ -4,10 +4,10 @@ import React, { useCallback, useRef } from 'react';
 
 import { CodeEditor, getInputStyles, Monaco, useTheme2 } from '@grafana/ui';
 
-import { DynamicLabelsCompletionItemProvider } from '../language/dynamic-labels/CompletionItemProvider';
-import language from '../language/dynamic-labels/definition';
-import { TRIGGER_SUGGEST } from '../language/monarch/commands';
-import { registerLanguage } from '../language/monarch/register';
+import { DynamicLabelsCompletionItemProvider } from '../../../language/dynamic-labels/CompletionItemProvider';
+import language from '../../../language/dynamic-labels/definition';
+import { TRIGGER_SUGGEST } from '../../../language/monarch/commands';
+import { registerLanguage } from '../../../language/monarch/register';
 
 const dynamicLabelsCompletionItemProvider = new DynamicLabelsCompletionItemProvider();
 

public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MathExpressionQueryField.tsx

@@ -3,10 +3,10 @@ import React, { useCallback, useRef } from 'react';
 
 import { CodeEditor, Monaco } from '@grafana/ui';
 
-import { CloudWatchDatasource } from '../datasource';
-import language from '../language/metric-math/definition';
-import { TRIGGER_SUGGEST } from '../language/monarch/commands';
-import { registerLanguage } from '../language/monarch/register';
+import { CloudWatchDatasource } from '../../../datasource';
+import language from '../../../language/metric-math/definition';
+import { TRIGGER_SUGGEST } from '../../../language/monarch/commands';
+import { registerLanguage } from '../../../language/monarch/register';
 
 export interface Props {
   onChange: (query: string) => void;

public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.test.tsx

@@ -7,9 +7,9 @@ import * as ui from '@grafana/ui';
 import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { TemplateSrv } from 'app/features/templating/template_srv';
 
-import { CustomVariableModel, initialVariableModelState } from '../../../../../features/variables/types';
-import { CloudWatchDatasource } from '../../datasource';
-import { CloudWatchJsonData, MetricEditorMode, MetricQueryType } from '../../types';
+import { CustomVariableModel, initialVariableModelState } from '../../../../../../features/variables/types';
+import { CloudWatchDatasource } from '../../../datasource';
+import { CloudWatchJsonData, MetricEditorMode, MetricQueryType } from '../../../types';
 
 import { MetricsQueryEditor, Props } from './MetricsQueryEditor';
 

public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.tsx

@@ -4,9 +4,8 @@ import { QueryEditorProps, SelectableValue } from '@grafana/data';
 import { EditorField, EditorRow, InlineSelect, Space } from '@grafana/experimental';
 import { ConfirmModal, Input, RadioButtonGroup } from '@grafana/ui';
 
-import { MathExpressionQueryField, MetricStatEditor, SQLBuilderEditor } from '../';
-import { CloudWatchDatasource } from '../../datasource';
-import useMigratedMetricsQuery from '../../migrations/useMigratedMetricsQuery';
+import { CloudWatchDatasource } from '../../../datasource';
+import useMigratedMetricsQuery from '../../../migrations/useMigratedMetricsQuery';
 import {
   CloudWatchJsonData,
   CloudWatchMetricsQuery,
@@ -14,9 +13,13 @@ import {
   MetricEditorMode,
   MetricQueryType,
   MetricStat,
-} from '../../types';
-import { DynamicLabelsField } from '../DynamicLabelsField';
-import { SQLCodeEditor } from '../SQLCodeEditor';
+} from '../../../types';
+import { MetricStatEditor } from '../../shared/MetricStatEditor';
+
+import { DynamicLabelsField } from './DynamicLabelsField';
+import { MathExpressionQueryField } from './MathExpressionQueryField';
+import { SQLBuilderEditor } from './SQLBuilderEditor';
+import { SQLCodeEditor } from './SQLCodeEditor';
 
 export interface Props extends QueryEditorProps<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData> {
   query: CloudWatchMetricsQuery;

public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderEditor.test.tsx

@@ -1,10 +1,11 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 
-import { SQLBuilderEditor } from '..';
-import { setupMockedDataSource } from '../../__mocks__/CloudWatchDataSource';
-import { QueryEditorExpressionType, QueryEditorPropertyType } from '../../expressions';
-import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType, SQLExpression } from '../../types';
+import { setupMockedDataSource } from '../../../../__mocks__/CloudWatchDataSource';
+import { QueryEditorExpressionType, QueryEditorPropertyType } from '../../../../expressions';
+import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType, SQLExpression } from '../../../../types';
+
+import { SQLBuilderEditor } from './SQLBuilderEditor';
 
 const { datasource } = setupMockedDataSource();
 

public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderEditor.tsx

@@ -3,9 +3,9 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { EditorField, EditorRow, EditorRows } from '@grafana/experimental';
 import { Input } from '@grafana/ui';
 
-import { CloudWatchDatasource } from '../../datasource';
-import SQLGenerator from '../../language/cloudwatch-sql/SQLGenerator';
-import { CloudWatchMetricsQuery } from '../../types';
+import { CloudWatchDatasource } from '../../../../datasource';
+import SQLGenerator from '../../../../language/cloudwatch-sql/SQLGenerator';
+import { CloudWatchMetricsQuery } from '../../../../types';
 
 import SQLBuilderSelectRow from './SQLBuilderSelectRow';
 import SQLFilter from './SQLFilter';
@@ -19,7 +19,7 @@ export type Props = {
   onChange: (value: CloudWatchMetricsQuery) => void;
 };
 
-export function SQLBuilderEditor({ query, datasource, onChange }: React.PropsWithChildren<Props>) {
+export const SQLBuilderEditor = ({ query, datasource, onChange }: React.PropsWithChildren<Props>) => {
   const sql = query.sql ?? {};
 
   const onQueryChange = useCallback(
@@ -86,4 +86,4 @@ export function SQLBuilderEditor({ query, datasource, onChange }: React.PropsWit
       )}
     </EditorRows>
   );
-}
+};

public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderSelectRow.test.tsx

@@ -2,9 +2,9 @@ import { act, render, screen } from '@testing-library/react';
 import React from 'react';
 import { selectOptionInTest } from 'test/helpers/selectOptionInTest';
 
-import { setupMockedDataSource } from '../../__mocks__/CloudWatchDataSource';
-import { QueryEditorExpressionType, QueryEditorPropertyType } from '../../expressions';
-import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType, SQLExpression } from '../../types';
+import { setupMockedDataSource } from '../../../../__mocks__/CloudWatchDataSource';
+import { QueryEditorExpressionType, QueryEditorPropertyType } from '../../../../expressions';
+import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType, SQLExpression } from '../../../../types';
 
 import SQLBuilderSelectRow from './SQLBuilderSelectRow';
 

public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderSelectRow.tsx

@@ -4,11 +4,11 @@ import { SelectableValue, toOption } from '@grafana/data';
 import { EditorField, EditorFieldGroup, EditorSwitch } from '@grafana/experimental';
 import { Select } from '@grafana/ui';
 
-import { CloudWatchDatasource } from '../../datasource';
-import { useDimensionKeys, useMetrics, useNamespaces } from '../../hooks';
-import { STATISTICS } from '../../language/cloudwatch-sql/language';
-import { CloudWatchMetricsQuery } from '../../types';
-import { appendTemplateVariables } from '../../utils/utils';
+import { CloudWatchDatasource } from '../../../../datasource';
+import { useDimensionKeys, useMetrics, useNamespaces } from '../../../../hooks';
+import { STATISTICS } from '../../../../language/cloudwatch-sql/language';
+import { CloudWatchMetricsQuery } from '../../../../types';
+import { appendTemplateVariables } from '../../../../utils/utils';
 
 import {
   getMetricNameFromExpression,

public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLFilter.tsx

@@ -5,12 +5,16 @@ import { SelectableValue, toOption } from '@grafana/data';
 import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
 import { Select } from '@grafana/ui';
 
-import { CloudWatchDatasource } from '../../datasource';
-import { QueryEditorExpressionType, QueryEditorOperatorExpression, QueryEditorPropertyType } from '../../expressions';
-import { useDimensionKeys } from '../../hooks';
-import { COMPARISON_OPERATORS, EQUALS } from '../../language/cloudwatch-sql/language';
-import { CloudWatchMetricsQuery } from '../../types';
-import { appendTemplateVariables } from '../../utils/utils';
+import { CloudWatchDatasource } from '../../../../datasource';
+import {
+  QueryEditorExpressionType,
+  QueryEditorOperatorExpression,
+  QueryEditorPropertyType,
+} from '../../../../expressions';
+import { useDimensionKeys } from '../../../../hooks';
+import { COMPARISON_OPERATORS, EQUALS } from '../../../../language/cloudwatch-sql/language';
+import { CloudWatchMetricsQuery } from '../../../../types';
+import { appendTemplateVariables } from '../../../../utils/utils';
 
 import {
   getFlattenedFilters,

public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLGroupBy.test.tsx

@@ -3,9 +3,9 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 import selectEvent from 'react-select-event';
 
-import { setupMockedDataSource } from '../../__mocks__/CloudWatchDataSource';
-import { createArray, createGroupBy } from '../../__mocks__/sqlUtils';
-import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType, SQLExpression } from '../../types';
+import { setupMockedDataSource } from '../../../../__mocks__/CloudWatchDataSource';
+import { createArray, createGroupBy } from '../../../../__mocks__/sqlUtils';
+import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType, SQLExpression } from '../../../../types';
 
 import SQLGroupBy from './SQLGroupBy';
 

public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLGroupBy.tsx

@@ -4,10 +4,14 @@ import { SelectableValue, toOption } from '@grafana/data';
 import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
 import { Select } from '@grafana/ui';
 
-import { CloudWatchDatasource } from '../../datasource';
-import { QueryEditorExpressionType, QueryEditorGroupByExpression, QueryEditorPropertyType } from '../../expressions';
-import { useDimensionKeys } from '../../hooks';
-import { CloudWatchMetricsQuery } from '../../types';
+import { CloudWatchDatasource } from '../../../../datasource';
+import {
+  QueryEditorExpressionType,
+  QueryEditorGroupByExpression,
+  QueryEditorPropertyType,
+} from '../../../../expressions';
+import { useDimensionKeys } from '../../../../hooks';
+import { CloudWatchMetricsQuery } from '../../../../types';
 
 import {
   getFlattenedGroupBys,

public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLOrderByGroup.tsx

@@ -4,10 +4,10 @@ import { SelectableValue, toOption } from '@grafana/data';
 import { AccessoryButton, EditorField, EditorFieldGroup, InputGroup } from '@grafana/experimental';
 import { Select } from '@grafana/ui';
 
-import { CloudWatchDatasource } from '../../datasource';
-import { ASC, DESC, STATISTICS } from '../../language/cloudwatch-sql/language';
-import { CloudWatchMetricsQuery } from '../../types';
-import { appendTemplateVariables } from '../../utils/utils';
+import { CloudWatchDatasource } from '../../../../datasource';
+import { ASC, DESC, STATISTICS } from '../../../../language/cloudwatch-sql/language';
+import { CloudWatchMetricsQuery } from '../../../../types';
+import { appendTemplateVariables } from '../../../../utils/utils';
 
 import { setOrderBy, setSql } from './utils';
 

public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/utils.ts

@@ -7,9 +7,9 @@ import {
   QueryEditorArrayExpression,
   QueryEditorOperatorExpression,
   QueryEditorGroupByExpression,
-} from '../../expressions';
-import { SCHEMA } from '../../language/cloudwatch-sql/language';
-import { SQLExpression, CloudWatchMetricsQuery, Dimensions } from '../../types';
+} from '../../../../expressions';
+import { SCHEMA } from '../../../../language/cloudwatch-sql/language';
+import { SQLExpression, CloudWatchMetricsQuery, Dimensions } from '../../../../types';
 
 export function getMetricNameFromExpression(selectExpression: SQLExpression['select']): string | undefined {
   return selectExpression?.parameters?.[0].name;

public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLCodeEditor.tsx

@@ -3,10 +3,10 @@ import React, { useCallback, useEffect } from 'react';
 
 import { CodeEditor, Monaco } from '@grafana/ui';
 
-import { CloudWatchDatasource } from '../datasource';
-import language from '../language/cloudwatch-sql/definition';
-import { TRIGGER_SUGGEST } from '../language/monarch/commands';
-import { registerLanguage } from '../language/monarch/register';
+import { CloudWatchDatasource } from '../../../datasource';
+import language from '../../../language/cloudwatch-sql/definition';
+import { TRIGGER_SUGGEST } from '../../../language/monarch/commands';
+import { registerLanguage } from '../../../language/monarch/register';
 
 export interface Props {
   region: string;

public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryEditor.test.tsx

@@ -5,16 +5,16 @@ import React from 'react';
 import { QueryEditorProps } from '@grafana/data';
 import { config } from '@grafana/runtime';
 
-import { setupMockedDataSource } from '../__mocks__/CloudWatchDataSource';
+import { setupMockedDataSource } from '../../__mocks__/CloudWatchDataSource';
 import {
   validLogsQuery,
   validMetricQueryBuilderQuery,
   validMetricQueryCodeQuery,
   validMetricSearchBuilderQuery,
   validMetricSearchCodeQuery,
-} from '../__mocks__/queries';
-import { CloudWatchDatasource } from '../datasource';
-import { CloudWatchQuery, CloudWatchJsonData, MetricEditorMode, MetricQueryType } from '../types';
+} from '../../__mocks__/queries';
+import { CloudWatchDatasource } from '../../datasource';
+import { CloudWatchQuery, CloudWatchJsonData, MetricEditorMode, MetricQueryType } from '../../types';
 
 import { QueryEditor } from './QueryEditor';
 
@@ -34,7 +34,7 @@ const props: QueryEditorProps<CloudWatchDatasource, CloudWatchQuery, CloudWatchJ
 
 const FAKE_EDITOR_LABEL = 'FakeEditor';
 
-jest.mock('./SQLCodeEditor', () => ({
+jest.mock('./MetricsQueryEditor/SQLCodeEditor', () => ({
   SQLCodeEditor: ({ sql, onChange }: { sql: string; onChange: (val: string) => void }) => {
     return (
       <>
@@ -45,7 +45,7 @@ jest.mock('./SQLCodeEditor', () => ({
   },
 }));
 
-export { SQLCodeEditor } from './SQLCodeEditor';
+export { SQLCodeEditor } from './MetricsQueryEditor/SQLCodeEditor';
 
 describe('QueryEditor should render right editor', () => {
   describe('when using grafana 6.3.0 metric query', () => {

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

@@ -2,11 +2,11 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 import { QueryEditorProps } from '@grafana/data';
 
-import { CloudWatchDatasource } from '../datasource';
-import { isCloudWatchLogsQuery, isCloudWatchMetricsQuery } from '../guards';
-import { CloudWatchJsonData, CloudWatchQuery } from '../types';
+import { CloudWatchDatasource } from '../../datasource';
+import { isCloudWatchLogsQuery, isCloudWatchMetricsQuery } from '../../guards';
+import { CloudWatchJsonData, CloudWatchQuery } from '../../types';
 
-import LogsQueryEditor from './LogsQueryEditor';
+import LogsQueryEditor from './LogsQueryEditor/LogsQueryEditor';
 import { MetricsQueryEditor } from './MetricsQueryEditor/MetricsQueryEditor';
 import QueryHeader from './QueryHeader';
 

public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryHeader.test.tsx

@@ -4,9 +4,9 @@ import selectEvent from 'react-select-event';
 
 import { config } from '@grafana/runtime';
 
-import { setupMockedDataSource } from '../__mocks__/CloudWatchDataSource';
-import { validLogsQuery, validMetricSearchBuilderQuery } from '../__mocks__/queries';
-import { DEFAULT_LOGS_QUERY_STRING } from '../defaultQueries';
+import { setupMockedDataSource } from '../../__mocks__/CloudWatchDataSource';
+import { validLogsQuery, validMetricSearchBuilderQuery } from '../../__mocks__/queries';
+import { DEFAULT_LOGS_QUERY_STRING } from '../../defaultQueries';
 
 import QueryHeader from './QueryHeader';
 

public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryHeader.tsx

@@ -5,11 +5,11 @@ import { EditorHeader, InlineSelect, FlexItem } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
 import { Badge, Button } from '@grafana/ui';
 
-import { CloudWatchDatasource } from '../datasource';
-import { DEFAULT_LOGS_QUERY_STRING } from '../defaultQueries';
-import { isCloudWatchLogsQuery, isCloudWatchMetricsQuery } from '../guards';
-import { useIsMonitoringAccount, useRegions } from '../hooks';
-import { CloudWatchJsonData, CloudWatchQuery, CloudWatchQueryMode, MetricQueryType } from '../types';
+import { CloudWatchDatasource } from '../../datasource';
+import { DEFAULT_LOGS_QUERY_STRING } from '../../defaultQueries';
+import { isCloudWatchLogsQuery, isCloudWatchMetricsQuery } from '../../guards';
+import { useIsMonitoringAccount, useRegions } from '../../hooks';
+import { CloudWatchJsonData, CloudWatchQuery, CloudWatchQueryMode, MetricQueryType } from '../../types';
 
 export interface Props extends QueryEditorProps<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData> {
   extraHeaderElementLeft?: JSX.Element;

public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.tsx

@@ -4,12 +4,12 @@ import { QueryEditorProps, SelectableValue } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { InlineField } from '@grafana/ui';
 
-import { Dimensions } from '..';
 import { CloudWatchDatasource } from '../../datasource';
 import { useAccountOptions, useDimensionKeys, useMetrics, useNamespaces, useRegions } from '../../hooks';
 import { migrateVariableQuery } from '../../migrations/variableQueryMigrations';
 import { CloudWatchJsonData, CloudWatchQuery, VariableQuery, VariableQueryType } from '../../types';
-import { ALL_ACCOUNTS_OPTION } from '../Account';
+import { ALL_ACCOUNTS_OPTION } from '../shared/Account';
+import { Dimensions } from '../shared/Dimensions/Dimensions';
 
 import { MultiFilter } from './MultiFilter';
 import { VariableQueryField } from './VariableQueryField';

public/app/plugins/datasource/cloudwatch/components/index.ts

@@ -1,7 +0,0 @@
-export { Dimensions } from './Dimensions/Dimensions';
-export { QueryInlineField, QueryField } from './Forms';
-export { QueryEditor as PanelQueryEditor } from './QueryEditor';
-export { CloudWatchLogsQueryEditor } from './LogsQueryEditor';
-export { MetricStatEditor } from './MetricStatEditor';
-export { SQLBuilderEditor } from './SQLBuilderEditor';
-export { MathExpressionQueryField } from './MathExpressionQueryField';

public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/Dimensions.test.tsx

@@ -2,9 +2,10 @@ import { fireEvent, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { Dimensions } from '..';
-import { setupMockedDataSource } from '../../__mocks__/CloudWatchDataSource';
-import { CloudWatchMetricsQuery } from '../../types';
+import { setupMockedDataSource } from '../../../__mocks__/CloudWatchDataSource';
+import { CloudWatchMetricsQuery } from '../../../types';
+
+import { Dimensions } from './Dimensions';
 
 const ds = setupMockedDataSource({
   variables: [],

public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/Dimensions.tsx

@@ -4,8 +4,8 @@ import React, { useMemo, useState } from 'react';
 import { SelectableValue } from '@grafana/data';
 import { EditorList } from '@grafana/experimental';
 
-import { CloudWatchDatasource } from '../../datasource';
-import { Dimensions as DimensionsType, MetricStat } from '../../types';
+import { CloudWatchDatasource } from '../../../datasource';
+import { Dimensions as DimensionsType, MetricStat } from '../../../types';
 
 import { FilterItem } from './FilterItem';
 

public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/FilterItem.tsx

@@ -6,9 +6,9 @@ import { GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';
 import { AccessoryButton, InputGroup } from '@grafana/experimental';
 import { Select, stylesFactory, useTheme2 } from '@grafana/ui';
 
-import { CloudWatchDatasource } from '../../datasource';
-import { Dimensions, MetricStat } from '../../types';
-import { appendTemplateVariables } from '../../utils/utils';
+import { CloudWatchDatasource } from '../../../datasource';
+import { Dimensions, MetricStat } from '../../../types';
+import { appendTemplateVariables } from '../../../utils/utils';
 
 import { DimensionFilterCondition } from './Dimensions';
 

public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsField.test.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import { config } from '@grafana/runtime';
 
-import { logGroupNamesVariable, setupMockedDataSource } from '../../__mocks__/CloudWatchDataSource';
+import { logGroupNamesVariable, setupMockedDataSource } from '../../../__mocks__/CloudWatchDataSource';
 
 import { LogGroupsField } from './LogGroupsField';
 

public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsField.tsx

@@ -1,11 +1,11 @@
 import { css } from '@emotion/css';
 import React, { useEffect, useState } from 'react';
 
-import { CloudWatchDatasource } from '../../datasource';
-import { useAccountOptions } from '../../hooks';
-import { DescribeLogGroupsRequest } from '../../resources/types';
-import { LogGroup } from '../../types';
-import { isTemplateVariable } from '../../utils/templateVariableUtils';
+import { CloudWatchDatasource } from '../../../datasource';
+import { useAccountOptions } from '../../../hooks';
+import { DescribeLogGroupsRequest } from '../../../resources/types';
+import { LogGroup } from '../../../types';
+import { isTemplateVariable } from '../../../utils/templateVariableUtils';
 
 import { LogGroupsSelector } from './LogGroupsSelector';
 import { SelectedLogGroups } from './SelectedLogGroups';
@@ -24,6 +24,7 @@ const rowGap = css`
   gap: 3px;
 `;
 
+// used in Config Editor and in Log Query Editor
 export const LogGroupsField = ({
   datasource,
   onChange,

public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsSelector.test.tsx

@@ -5,7 +5,7 @@ import lodash from 'lodash';
 import React from 'react';
 import selectEvent from 'react-select-event';
 
-import { ResourceResponse, LogGroupResponse } from '../../resources/types';
+import { ResourceResponse, LogGroupResponse } from '../../../resources/types';
 
 import { LogGroupsSelector } from './LogGroupsSelector';
 

public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsSelector.tsx

@@ -4,11 +4,12 @@ import { SelectableValue } from '@grafana/data';
 import { EditorField, Space } from '@grafana/experimental';
 import { Button, Checkbox, Icon, Label, LoadingPlaceholder, Modal, Select, useStyles2 } from '@grafana/ui';
 
-import Search from '../../Search';
-import { DescribeLogGroupsRequest, ResourceResponse, LogGroupResponse } from '../../resources/types';
-import { LogGroup } from '../../types';
+import { DescribeLogGroupsRequest, ResourceResponse, LogGroupResponse } from '../../../resources/types';
+import { LogGroup } from '../../../types';
+import getStyles from '../../styles';
 import { Account, ALL_ACCOUNTS_OPTION } from '../Account';
-import getStyles from '../styles';
+
+import Search from './Search';
 
 type CrossAccountLogsQueryProps = {
   selectedLogGroups?: LogGroup[];

public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/Search.test.tsx

@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import lodash from 'lodash';
 import React from 'react';
 
-import Search from '../Search';
+import Search from './Search';
 
 const defaultProps = {
   searchPhrase: '',

public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/SelectedLogGroups.test.tsx

@@ -2,7 +2,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { LogGroup } from '../../types';
+import { LogGroup } from '../../../types';
 
 import { SelectedLogGroups } from './SelectedLogGroups';
 

public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/SelectedLogGroups.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react';
 
 import { Button, ConfirmModal, useStyles2 } from '@grafana/ui';
 
-import { LogGroup } from '../../types';
-import getStyles from '../styles';
+import { LogGroup } from '../../../types';
+import getStyles from '../../styles';
 
 type CrossAccountLogsQueryProps = {
   selectedLogGroups?: LogGroup[];

public/app/plugins/datasource/cloudwatch/components/shared/MetricStatEditor/MetricStatEditor.test.tsx

@@ -5,10 +5,11 @@ import selectEvent from 'react-select-event';
 
 import { config } from '@grafana/runtime';
 
-import { MetricStatEditor } from '..';
-import { setupMockedDataSource, statisticVariable } from '../../__mocks__/CloudWatchDataSource';
-import { validMetricSearchBuilderQuery } from '../../__mocks__/queries';
-import { MetricStat } from '../../types';
+import { setupMockedDataSource, statisticVariable } from '../../../__mocks__/CloudWatchDataSource';
+import { validMetricSearchBuilderQuery } from '../../../__mocks__/queries';
+import { MetricStat } from '../../../types';
+
+import { MetricStatEditor } from './MetricStatEditor';
 
 const originalFeatureToggleValue = config.featureToggles.cloudWatchCrossAccountQuerying;
 const ds = setupMockedDataSource({

public/app/plugins/datasource/cloudwatch/components/shared/MetricStatEditor/MetricStatEditor.tsx

@@ -5,13 +5,13 @@ import { EditorField, EditorFieldGroup, EditorRow, EditorRows, EditorSwitch } fr
 import { config } from '@grafana/runtime';
 import { Select } from '@grafana/ui';
 
-import { Dimensions } from '..';
-import { CloudWatchDatasource } from '../../datasource';
-import { useAccountOptions, useDimensionKeys, useMetrics, useNamespaces } from '../../hooks';
-import { standardStatistics } from '../../standardStatistics';
-import { MetricStat } from '../../types';
-import { appendTemplateVariables, toOption } from '../../utils/utils';
+import { CloudWatchDatasource } from '../../../datasource';
+import { useAccountOptions, useDimensionKeys, useMetrics, useNamespaces } from '../../../hooks';
+import { standardStatistics } from '../../../standardStatistics';
+import { MetricStat } from '../../../types';
+import { appendTemplateVariables, toOption } from '../../../utils/utils';
 import { Account } from '../Account';
+import { Dimensions } from '../Dimensions/Dimensions';
 
 export type Props = {
   refId: string;
@@ -25,13 +25,14 @@ const percentileSyntaxRE = /^(p|tm|tc|ts|wm)\d{2}(?:\.\d{1,2})?$/;
 const boundariesInnerParenthesesSyntax = `\\d*(\\.\\d+)?%?:\\d*(\\.\\d+)?%?`;
 const boundariesSyntaxRE = new RegExp(`^(PR|TM|TC|TS|WM)\\((${boundariesInnerParenthesesSyntax})\\)$`);
 
-export function MetricStatEditor({
+// used in both Metric Query editor and in Annotations Editor
+export const MetricStatEditor = ({
   refId,
   metricStat,
   datasource,
   disableExpressions = false,
   onChange,
-}: React.PropsWithChildren<Props>) {
+}: React.PropsWithChildren<Props>) => {
   const namespaces = useNamespaces(datasource);
   const metrics = useMetrics(datasource, metricStat);
   const dimensionKeys = useDimensionKeys(datasource, { ...metricStat, dimensionFilters: metricStat.dimensions });
@@ -164,4 +165,4 @@ export function MetricStatEditor({
       </EditorRow>
     </EditorRows>
   );
-}
+};

public/app/plugins/datasource/cloudwatch/module.tsx

@@ -1,10 +1,10 @@
 import { DashboardLoadedEvent, DataSourcePlugin } from '@grafana/data';
 import { getAppEvents } from '@grafana/runtime';
 
-import { ConfigEditor } from './components/ConfigEditor';
-import LogsCheatSheet from './components/LogsCheatSheet';
-import { MetaInspector } from './components/MetaInspector';
-import { QueryEditor } from './components/QueryEditor';
+import LogsCheatSheet from './components/CheatSheet/LogsCheatSheet';
+import { ConfigEditor } from './components/ConfigEditor/ConfigEditor';
+import { MetaInspector } from './components/MetaInspector/MetaInspector';
+import { QueryEditor } from './components/QueryEditor/QueryEditor';
 import { CloudWatchDatasource } from './datasource';
 import { onDashboardLoadedHandler } from './tracking';
 import { CloudWatchJsonData, CloudWatchQuery } from './types';

public/app/plugins/datasource/cloudwatch/query-runner/CloudWatchMetricsQueryRunner.ts

@@ -20,7 +20,7 @@ import { TemplateSrv } from 'app/features/templating/template_srv';
 import { store } from 'app/store/store';
 import { AppNotificationTimeout } from 'app/types';
 
-import { ThrottlingErrorMessage } from '../components/ThrottlingErrorMessage';
+import { ThrottlingErrorMessage } from '../components/Errors/ThrottlingErrorMessage';
 import memoizedDebounce from '../memoizedDebounce';
 import { migrateMetricQuery } from '../migrations/metricQueryMigrations';
 import {

public/app/plugins/datasource/cloudwatch/variables.ts

@@ -9,8 +9,8 @@ import {
   SelectableValue,
 } from '@grafana/data';
 
-import { ALL_ACCOUNTS_OPTION } from './components/Account';
 import { VariableQueryEditor } from './components/VariableQueryEditor/VariableQueryEditor';
+import { ALL_ACCOUNTS_OPTION } from './components/shared/Account';
 import { CloudWatchDatasource } from './datasource';
 import { DEFAULT_VARIABLE_QUERY } from './defaultQueries';
 import { migrateVariableQuery } from './migrations/variableQueryMigrations';