From 0d60b1ce0a9aad4b4a1ac15344581541c2f5c3b2 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Wed, 4 May 2022 07:36:18 +0200 Subject: [PATCH] CloudWatch: Display dynamic label field in case feature is enabled (#48614) * move metrics editor related files to a separate folder * cleanup * add tests * remove snapshot test * nit * remove unsued import * remove snapshot --- .../{ => MetricsQueryEditor}/Alias.tsx | 5 +- .../MetricsQueryEditor.test.tsx | 61 +++++++++++++++---- .../MetricsQueryEditor.tsx | 55 +++++++++++------ .../MetricsQueryHeader.test.tsx | 4 +- .../MetricsQueryHeader.tsx | 4 +- .../usePreparedMetricsQuery.test.ts | 2 +- .../usePreparedMetricsQuery.ts | 4 +- .../components/PanelQueryEditor.tsx | 2 +- .../cloudwatch/components/QueryHeader.tsx | 2 +- .../MetricsQueryEditor.test.tsx.snap | 3 - .../datasource/cloudwatch/components/index.ts | 1 - 11 files changed, 98 insertions(+), 45 deletions(-) rename public/app/plugins/datasource/cloudwatch/components/{ => MetricsQueryEditor}/Alias.tsx (78%) rename public/app/plugins/datasource/cloudwatch/components/{ => MetricsQueryEditor}/MetricsQueryEditor.test.tsx (76%) rename public/app/plugins/datasource/cloudwatch/components/{ => MetricsQueryEditor}/MetricsQueryEditor.tsx (73%) rename public/app/plugins/datasource/cloudwatch/components/{ => MetricsQueryEditor}/MetricsQueryHeader.test.tsx (97%) rename public/app/plugins/datasource/cloudwatch/components/{ => MetricsQueryEditor}/MetricsQueryHeader.tsx (96%) rename public/app/plugins/datasource/cloudwatch/components/{ => MetricsQueryEditor}/usePreparedMetricsQuery.test.ts (99%) rename public/app/plugins/datasource/cloudwatch/components/{ => MetricsQueryEditor}/usePreparedMetricsQuery.ts (93%) delete mode 100644 public/app/plugins/datasource/cloudwatch/components/__snapshots__/MetricsQueryEditor.test.tsx.snap diff --git a/public/app/plugins/datasource/cloudwatch/components/Alias.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/Alias.tsx similarity index 78% rename from public/app/plugins/datasource/cloudwatch/components/Alias.tsx rename to public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/Alias.tsx index 2f3ddd8d8b5..044f1416af0 100644 --- a/public/app/plugins/datasource/cloudwatch/components/Alias.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/Alias.tsx @@ -6,9 +6,10 @@ import { Input } from '@grafana/ui'; export interface Props { onChange: (alias: any) => void; value: string; + id?: string; } -export const Alias: FunctionComponent = ({ value = '', onChange }) => { +export const Alias: FunctionComponent = ({ value = '', onChange, id }) => { const [alias, setAlias] = useState(value); const propagateOnChange = debounce(onChange, 1500); @@ -18,5 +19,5 @@ export const Alias: FunctionComponent = ({ value = '', onChange }) => { propagateOnChange(e.target.value); }; - return ; + return ; }; diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.test.tsx similarity index 76% rename from public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx rename to public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.test.tsx index f74ddbf21d8..92349bb29e6 100644 --- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.test.tsx @@ -1,14 +1,14 @@ import { render, screen, act } from '@testing-library/react'; import React from 'react'; import selectEvent from 'react-select-event'; -import renderer from 'react-test-renderer'; import { DataSourceInstanceSettings } from '@grafana/data'; +import { config } from '@grafana/runtime'; 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'; @@ -70,15 +70,6 @@ const setup = () => { }; describe('QueryEditor', () => { - it('should render component', async () => { - const { act } = renderer; - await act(async () => { - const props = setup(); - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); - }); - }); - describe('should handle editor modes correctly', () => { it('when metric query type is metric search and editor mode is builder', async () => { await act(async () => { @@ -165,4 +156,48 @@ describe('QueryEditor', () => { expect(await screen.findByText('*')).toBeInTheDocument(); }); }); + + describe('when dynamic labels feature toggle is enabled', () => { + it('shoud render label field', async () => { + await act(async () => { + const props = setup(); + const originalValue = config.featureToggles.cloudWatchDynamicLabels; + config.featureToggles.cloudWatchDynamicLabels = true; + + render( + + ); + + expect(screen.getByText('Label')).toBeInTheDocument(); + expect(screen.queryByText('Alias')).toBeNull(); + expect(screen.getByLabelText('Label - optional')).toHaveValue( + "Period: ${PROP('Period')} InstanceId: ${PROP('Dim.InstanceId')}" + ); + + config.featureToggles.cloudWatchDynamicLabels = originalValue; + }); + }); + }); + + describe('when dynamic labels feature toggle is disabled', () => { + it('shoud render alias field', async () => { + await act(async () => { + const props = setup(); + const originalValue = config.featureToggles.cloudWatchDynamicLabels; + config.featureToggles.cloudWatchDynamicLabels = false; + + const expected = 'Period: {{period}} InstanceId: {{InstanceId}}'; + render(); + + expect(await screen.getByText('Alias')).toBeInTheDocument(); + expect(screen.queryByText('Label')).toBeNull(); + expect(screen.getByLabelText('Alias - optional')).toHaveValue(expected); + + config.featureToggles.cloudWatchDynamicLabels = originalValue; + }); + }); + }); }); diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.tsx similarity index 73% rename from public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx rename to public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.tsx index c484dec6cbc..3b65e28c7ca 100644 --- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.tsx @@ -2,10 +2,12 @@ import React, { ChangeEvent, useState } from 'react'; import { QueryEditorProps } from '@grafana/data'; import { EditorField, EditorRow, Space } from '@grafana/experimental'; +import { config } from '@grafana/runtime'; import { Input } from '@grafana/ui'; -import { CloudWatchDatasource } from '../datasource'; -import { isCloudWatchMetricsQuery } from '../guards'; +import { MathExpressionQueryField, MetricStatEditor, SQLBuilderEditor, SQLCodeEditor } from '../'; +import { CloudWatchDatasource } from '../../datasource'; +import { isCloudWatchMetricsQuery } from '../../guards'; import { CloudWatchJsonData, CloudWatchMetricsQuery, @@ -13,13 +15,12 @@ import { MetricEditorMode, MetricQueryType, MetricStat, -} from '../types'; +} from '../../types'; +import QueryHeader from '../QueryHeader'; -import QueryHeader from './QueryHeader'; +import { Alias } from './Alias'; import usePreparedMetricsQuery from './usePreparedMetricsQuery'; -import { Alias, MathExpressionQueryField, MetricStatEditor, SQLBuilderEditor, SQLCodeEditor } from './'; - export interface Props extends QueryEditorProps { query: CloudWatchMetricsQuery; } @@ -130,17 +131,37 @@ export const MetricsQueryEditor = (props: Props) => { /> - - onChange({ ...preparedQuery, alias: value })} - /> - + {config.featureToggles.cloudWatchDynamicLabels ? ( + + ) => + onChange({ ...preparedQuery, label: event.target.value }) + } + /> + + ) : ( + + onChange({ ...preparedQuery, alias: value })} + /> + + )} ); diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryHeader.test.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryHeader.test.tsx similarity index 97% rename from public/app/plugins/datasource/cloudwatch/components/MetricsQueryHeader.test.tsx rename to public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryHeader.test.tsx index eaf5d1d616f..54951d12547 100644 --- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryHeader.test.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryHeader.test.tsx @@ -2,8 +2,8 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; import { act } from 'react-dom/test-utils'; -import { setupMockedDataSource } from '../__mocks__/CloudWatchDataSource'; -import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType } from '../types'; +import { setupMockedDataSource } from '../../__mocks__/CloudWatchDataSource'; +import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType } from '../../types'; import MetricsQueryHeader from './MetricsQueryHeader'; diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryHeader.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryHeader.tsx similarity index 96% rename from public/app/plugins/datasource/cloudwatch/components/MetricsQueryHeader.tsx rename to public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryHeader.tsx index 29c08845ce5..dadb2424ff0 100644 --- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryHeader.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryHeader.tsx @@ -4,8 +4,8 @@ import { SelectableValue } from '@grafana/data'; import { InlineSelect, FlexItem } from '@grafana/experimental'; import { Button, ConfirmModal, RadioButtonGroup } from '@grafana/ui'; -import { CloudWatchDatasource } from '../datasource'; -import { CloudWatchMetricsQuery, CloudWatchQuery, MetricEditorMode, MetricQueryType } from '../types'; +import { CloudWatchDatasource } from '../../datasource'; +import { CloudWatchMetricsQuery, CloudWatchQuery, MetricEditorMode, MetricQueryType } from '../../types'; interface MetricsQueryHeaderProps { query: CloudWatchMetricsQuery; diff --git a/public/app/plugins/datasource/cloudwatch/components/usePreparedMetricsQuery.test.ts b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/usePreparedMetricsQuery.test.ts similarity index 99% rename from public/app/plugins/datasource/cloudwatch/components/usePreparedMetricsQuery.test.ts rename to public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/usePreparedMetricsQuery.test.ts index 8f179549d0a..45bfb80d0e8 100644 --- a/public/app/plugins/datasource/cloudwatch/components/usePreparedMetricsQuery.test.ts +++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/usePreparedMetricsQuery.test.ts @@ -1,6 +1,6 @@ import { renderHook } from '@testing-library/react-hooks'; -import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType } from '../types'; +import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType } from '../../types'; import usePreparedMetricsQuery, { DEFAULT_QUERY } from './usePreparedMetricsQuery'; diff --git a/public/app/plugins/datasource/cloudwatch/components/usePreparedMetricsQuery.ts b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/usePreparedMetricsQuery.ts similarity index 93% rename from public/app/plugins/datasource/cloudwatch/components/usePreparedMetricsQuery.ts rename to public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/usePreparedMetricsQuery.ts index 15375c58664..0e0f618fcc1 100644 --- a/public/app/plugins/datasource/cloudwatch/components/usePreparedMetricsQuery.ts +++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/usePreparedMetricsQuery.ts @@ -1,8 +1,8 @@ import deepEqual from 'fast-deep-equal'; import { useEffect, useMemo } from 'react'; -import { migrateMetricQuery } from '../migrations/metricQueryMigrations'; -import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType } from '../types'; +import { migrateMetricQuery } from '../../migrations/metricQueryMigrations'; +import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType } from '../../types'; export const DEFAULT_QUERY: Omit = { queryMode: 'Metrics', diff --git a/public/app/plugins/datasource/cloudwatch/components/PanelQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/PanelQueryEditor.tsx index 079fdae5671..a901584d643 100644 --- a/public/app/plugins/datasource/cloudwatch/components/PanelQueryEditor.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/PanelQueryEditor.tsx @@ -6,8 +6,8 @@ import { CloudWatchDatasource } from '../datasource'; import { isCloudWatchMetricsQuery } from '../guards'; import { CloudWatchJsonData, CloudWatchQuery } from '../types'; +import { MetricsQueryEditor } from '././MetricsQueryEditor/MetricsQueryEditor'; import LogsQueryEditor from './LogsQueryEditor'; -import { MetricsQueryEditor } from './MetricsQueryEditor'; export type Props = QueryEditorProps; diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx index f90298afd75..3444c3feef9 100644 --- a/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx @@ -8,7 +8,7 @@ import { CloudWatchDatasource } from '../datasource'; import { useRegions } from '../hooks'; import { CloudWatchQuery, CloudWatchQueryMode } from '../types'; -import MetricsQueryHeader from './MetricsQueryHeader'; +import MetricsQueryHeader from './MetricsQueryEditor/MetricsQueryHeader'; interface QueryHeaderProps { query: CloudWatchQuery; diff --git a/public/app/plugins/datasource/cloudwatch/components/__snapshots__/MetricsQueryEditor.test.tsx.snap b/public/app/plugins/datasource/cloudwatch/components/__snapshots__/MetricsQueryEditor.test.tsx.snap deleted file mode 100644 index d977a61df6d..00000000000 --- a/public/app/plugins/datasource/cloudwatch/components/__snapshots__/MetricsQueryEditor.test.tsx.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`QueryEditor should render component 1`] = `null`; diff --git a/public/app/plugins/datasource/cloudwatch/components/index.ts b/public/app/plugins/datasource/cloudwatch/components/index.ts index 0362b31b34f..3c3d07f66f0 100644 --- a/public/app/plugins/datasource/cloudwatch/components/index.ts +++ b/public/app/plugins/datasource/cloudwatch/components/index.ts @@ -1,6 +1,5 @@ export { Dimensions } from './Dimensions/Dimensions'; export { QueryInlineField, QueryField } from './Forms'; -export { Alias } from './Alias'; export { PanelQueryEditor } from './PanelQueryEditor'; export { CloudWatchLogsQueryEditor } from './LogsQueryEditor'; export { MetricStatEditor } from './MetricStatEditor';