+ const styles = useStyles2(getStyles);
+
+ return (
+
{warning && (
{warning}
@@ -192,116 +196,6 @@ export const ConfigEditor = (props: Props) => {
datasourceUid={options.jsonData.tracingDatasourceUid}
/>
- ) : (
- <>
- {warning && (
-
- {warning}
-
- )}
-
{
- return datasource.resources
- .getRegions()
- .then((regions) =>
- regions.reduce(
- (acc: string[], curr: SelectableResourceValue) => (curr.value ? [...acc, curr.value] : acc),
- []
- )
- );
- })
- }
- externalId={externalId}
- >
-
-
-
-
-
- {config.secureSocksDSProxyEnabled && (
-
- )}
-
-
CloudWatch Logs
-
-
-
-
-
- {datasource ? (
- {
- if (saved) {
- return;
- }
-
- let error = 'You need to save the data source before adding log groups.';
- if (props.options.version && props.options.version > 1) {
- error =
- 'You have unsaved connection detail changes. You need to save the data source before adding log groups.';
- }
- setLogGroupFieldState({
- invalid: true,
- error,
- });
- throw new Error(error);
- }}
- legacyLogGroupNames={defaultLogGroups}
- logGroups={logGroups}
- onChange={(updatedLogGroups) => {
- onOptionsChange({
- ...props.options,
- jsonData: {
- ...props.options.jsonData,
- logGroups: updatedLogGroups,
- defaultLogGroups: undefined,
- },
- });
- }}
- maxNoOfVisibleLogGroups={2}
- //legacy props
- legacyOnChange={(logGroups) => {
- updateDatasourcePluginJsonDataOption(props, 'defaultLogGroups', logGroups);
- }}
- />
- ) : (
- <>
- )}
-
-
-
updateDatasourcePluginJsonDataOption(props, 'tracingDatasourceUid', uid)}
- datasourceUid={options.jsonData.tracingDatasourceUid}
- />
-
);
};
@@ -367,3 +261,9 @@ function useDataSourceSavedState(props: Props) {
return saved;
}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+ formStyles: css({
+ maxWidth: theme.spacing(50),
+ }),
+});
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.test.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.test.tsx
index 9f5c19be7b6..1d871de1da6 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.test.tsx
@@ -2,8 +2,6 @@ import { act, fireEvent, render, screen, waitFor, within } from '@testing-librar
import userEvent from '@testing-library/user-event';
import { select } from 'react-select-event';
-import { config } from '@grafana/runtime';
-
import { setupMockedDataSource } from '../../__mocks__/CloudWatchDataSource';
import { GetDimensionKeysRequest } from '../../resources/types';
import { VariableQueryType } from '../../types';
@@ -24,12 +22,6 @@ const defaultQuery = {
const ds = setupMockedDataSource();
-const originalFormFeatureToggleValue = config.featureToggles.awsDatasourcesNewFormStyling;
-
-const cleanupFeatureToggle = () => {
- config.featureToggles.awsDatasourcesNewFormStyling = originalFormFeatureToggleValue;
-};
-
ds.datasource.resources.getRegions = jest.fn().mockResolvedValue([
{ label: 'a1', value: 'a1' },
{ label: 'b1', value: 'b1' },
@@ -82,221 +74,200 @@ describe('VariableEditor', () => {
beforeEach(() => {
onChange.mockClear();
});
- function run() {
- describe('and a new variable is created', () => {
- it('should trigger a query using the first query type in the array', async () => {
- const props = defaultProps;
- props.query = defaultQuery;
- render();
+ describe('and a new variable is created', () => {
+ it('should trigger a query using the first query type in the array', async () => {
+ const props = defaultProps;
+ props.query = defaultQuery;
+ render();
- await waitFor(() => {
- const querySelect = screen.queryByRole('combobox', { name: 'Query type' });
- expect(querySelect).toBeInTheDocument();
- expect(screen.queryByText('Regions')).toBeInTheDocument();
- // Should not render any fields besides Query Type
- const regionSelect = screen.queryByRole('combobox', { name: 'Region' });
- expect(regionSelect).not.toBeInTheDocument();
- });
- });
- });
-
- describe('and an existing variable is edited', () => {
- it('should trigger new query using the saved query type', async () => {
- const props = defaultProps;
- props.query = {
- ...defaultQuery,
- queryType: VariableQueryType.Metrics,
- namespace: 'z2',
- region: 'a1',
- };
- render();
-
- await waitFor(() => {
- const querySelect = screen.queryByRole('combobox', { name: 'Query type' });
- expect(querySelect).toBeInTheDocument();
- expect(screen.queryByText('Metrics')).toBeInTheDocument();
- const regionSelect = screen.queryByRole('combobox', { name: 'Region' });
- expect(regionSelect).toBeInTheDocument();
- expect(screen.queryByText('a1')).toBeInTheDocument();
- const namespaceSelect = screen.queryByRole('combobox', { name: 'Namespace' });
- expect(namespaceSelect).toBeInTheDocument();
- expect(screen.queryByText('z2')).toBeInTheDocument();
- // Should only render Query Type, Region, and Namespace selectors
- const metricSelect = screen.queryByRole('combobox', { name: 'Metric' });
- expect(metricSelect).not.toBeInTheDocument();
- });
- });
- it('should parse dimensionFilters correctly', async () => {
- const props = defaultProps;
- props.query = {
- ...defaultQuery,
- queryType: VariableQueryType.DimensionValues,
- namespace: 'z2',
- region: 'a1',
- metricName: 'i3',
- dimensionKey: 's4',
- dimensionFilters: { s4: 'foo' },
- };
- await act(async () => {
- render();
- });
- const filterItem = screen.getByTestId('cloudwatch-dimensions-filter-item');
- expect(filterItem).toBeInTheDocument();
- expect(within(filterItem).getByText('s4')).toBeInTheDocument();
- expect(within(filterItem).getByText('foo')).toBeInTheDocument();
-
- // change filter key
- const keySelect = screen.getByRole('combobox', { name: 'Dimensions filter key' });
- // confirms getDimensionKeys was called with filter and that the element uses keysForDimensionFilter
- select(keySelect, 'v4', {
- container: document.body,
- });
- expect(ds.datasource.resources.getDimensionKeys).toHaveBeenCalledWith(
- {
- namespace: 'z2',
- region: 'a1',
- metricName: 'i3',
- dimensionFilters: undefined,
- },
- false
- );
- await waitFor(() => {
- expect(onChange).toHaveBeenCalledWith({
- ...defaultQuery,
- queryType: VariableQueryType.DimensionValues,
- namespace: 'z2',
- region: 'a1',
- metricName: 'i3',
- dimensionKey: 's4',
- dimensionFilters: { v4: undefined },
- });
- });
-
- // set filter value
- const valueSelect = screen.getByRole('combobox', { name: 'Dimensions filter value' });
- await select(valueSelect, 'bar', {
- container: document.body,
- });
- expect(onChange).toHaveBeenCalledWith({
- ...defaultQuery,
- queryType: VariableQueryType.DimensionValues,
- namespace: 'z2',
- region: 'a1',
- metricName: 'i3',
- dimensionKey: 's4',
- dimensionFilters: { v4: 'bar' },
- });
- });
- it('should parse multiFilters correctly', async () => {
- const props = defaultProps;
- props.query = {
- ...defaultQuery,
- queryType: VariableQueryType.EC2InstanceAttributes,
- region: 'a1',
- attributeName: 'Tags.blah',
- ec2Filters: { s4: ['foo', 'bar'] },
- };
- render();
-
- await waitFor(() => {
- expect(screen.getByDisplayValue('Tags.blah')).toBeInTheDocument();
- });
-
- const filterItem = screen.getByTestId('cloudwatch-multifilter-item');
- expect(filterItem).toBeInTheDocument();
- expect(within(filterItem).getByDisplayValue('foo, bar')).toBeInTheDocument();
-
- // set filter value
- const valueElement = screen.getByTestId('cloudwatch-multifilter-item-value');
- expect(valueElement).toBeInTheDocument();
- await userEvent.type(valueElement!, ',baz');
- fireEvent.blur(valueElement!);
-
- expect(screen.getByDisplayValue('foo, bar, baz')).toBeInTheDocument();
- expect(onChange).toHaveBeenCalledWith({
- ...defaultQuery,
- queryType: VariableQueryType.EC2InstanceAttributes,
- region: 'a1',
- attributeName: 'Tags.blah',
- ec2Filters: { s4: ['foo', 'bar', 'baz'] },
- });
- });
- });
- describe('and a different region is selected', () => {
- it('should clear invalid fields', async () => {
- const props = defaultProps;
- props.query = {
- ...defaultQuery,
- queryType: VariableQueryType.DimensionValues,
- namespace: 'z2',
- region: 'a1',
- metricName: 'i3',
- dimensionKey: 's4',
- dimensionFilters: { s4: 'foo' },
- };
- render();
-
- const querySelect = screen.queryByLabelText('Query type');
+ await waitFor(() => {
+ const querySelect = screen.queryByRole('combobox', { name: 'Query type' });
expect(querySelect).toBeInTheDocument();
- expect(screen.queryByText('Dimension Values')).toBeInTheDocument();
- const regionSelect = screen.getByRole('combobox', { name: 'Region' });
- await waitFor(() =>
- select(regionSelect, 'b1', {
- container: document.body,
- })
- );
+ expect(screen.queryByText('Regions')).toBeInTheDocument();
+ // Should not render any fields besides Query Type
+ const regionSelect = screen.queryByRole('combobox', { name: 'Region' });
+ expect(regionSelect).not.toBeInTheDocument();
+ });
+ });
+ });
- expect(ds.datasource.resources.getMetrics).toHaveBeenCalledWith({ namespace: 'z2', region: 'b1' });
- expect(ds.datasource.resources.getDimensionKeys).toHaveBeenCalledWith({ namespace: 'z2', region: 'b1' });
- expect(props.onChange).toHaveBeenCalledWith({
+ describe('and an existing variable is edited', () => {
+ it('should trigger new query using the saved query type', async () => {
+ const props = defaultProps;
+ props.query = {
+ ...defaultQuery,
+ queryType: VariableQueryType.Metrics,
+ namespace: 'z2',
+ region: 'a1',
+ };
+ render();
+
+ await waitFor(() => {
+ const querySelect = screen.queryByRole('combobox', { name: 'Query type' });
+ expect(querySelect).toBeInTheDocument();
+ expect(screen.queryByText('Metrics')).toBeInTheDocument();
+ const regionSelect = screen.queryByRole('combobox', { name: 'Region' });
+ expect(regionSelect).toBeInTheDocument();
+ expect(screen.queryByText('a1')).toBeInTheDocument();
+ const namespaceSelect = screen.queryByRole('combobox', { name: 'Namespace' });
+ expect(namespaceSelect).toBeInTheDocument();
+ expect(screen.queryByText('z2')).toBeInTheDocument();
+ // Should only render Query Type, Region, and Namespace selectors
+ const metricSelect = screen.queryByRole('combobox', { name: 'Metric' });
+ expect(metricSelect).not.toBeInTheDocument();
+ });
+ });
+ it('should parse dimensionFilters correctly', async () => {
+ const props = defaultProps;
+ props.query = {
+ ...defaultQuery,
+ queryType: VariableQueryType.DimensionValues,
+ namespace: 'z2',
+ region: 'a1',
+ metricName: 'i3',
+ dimensionKey: 's4',
+ dimensionFilters: { s4: 'foo' },
+ };
+ await act(async () => {
+ render();
+ });
+ const filterItem = screen.getByTestId('cloudwatch-dimensions-filter-item');
+ expect(filterItem).toBeInTheDocument();
+ expect(within(filterItem).getByText('s4')).toBeInTheDocument();
+ expect(within(filterItem).getByText('foo')).toBeInTheDocument();
+
+ // change filter key
+ const keySelect = screen.getByRole('combobox', { name: 'Dimensions filter key' });
+ // confirms getDimensionKeys was called with filter and that the element uses keysForDimensionFilter
+ select(keySelect, 'v4', {
+ container: document.body,
+ });
+ expect(ds.datasource.resources.getDimensionKeys).toHaveBeenCalledWith(
+ {
+ namespace: 'z2',
+ region: 'a1',
+ metricName: 'i3',
+ dimensionFilters: undefined,
+ },
+ false
+ );
+ await waitFor(() => {
+ expect(onChange).toHaveBeenCalledWith({
...defaultQuery,
- refId: 'CloudWatchVariableQueryEditor-VariableQuery',
queryType: VariableQueryType.DimensionValues,
namespace: 'z2',
- region: 'b1',
- // metricName i3 exists in the new region and should not be removed
+ region: 'a1',
metricName: 'i3',
- // dimensionKey s4 and valueDimension do not exist in the new region and should be removed
- dimensionKey: '',
- dimensionFilters: {},
+ dimensionKey: 's4',
+ dimensionFilters: { v4: undefined },
});
});
- });
- describe('LogGroups queryType is selected', () => {
- it('should only render region and prefix', async () => {
- const props = defaultProps;
- props.query = {
- ...defaultQuery,
- queryType: VariableQueryType.LogGroups,
- };
- render();
- await waitFor(() => {
- screen.getByLabelText('Log group prefix');
- screen.getByLabelText('Region');
- });
-
- expect(screen.queryByLabelText('Namespace')).not.toBeInTheDocument();
+ // set filter value
+ const valueSelect = screen.getByRole('combobox', { name: 'Dimensions filter value' });
+ await select(valueSelect, 'bar', {
+ container: document.body,
+ });
+ expect(onChange).toHaveBeenCalledWith({
+ ...defaultQuery,
+ queryType: VariableQueryType.DimensionValues,
+ namespace: 'z2',
+ region: 'a1',
+ metricName: 'i3',
+ dimensionKey: 's4',
+ dimensionFilters: { v4: 'bar' },
});
});
- }
+ it('should parse multiFilters correctly', async () => {
+ const props = defaultProps;
+ props.query = {
+ ...defaultQuery,
+ queryType: VariableQueryType.EC2InstanceAttributes,
+ region: 'a1',
+ attributeName: 'Tags.blah',
+ ec2Filters: { s4: ['foo', 'bar'] },
+ };
+ render();
- describe('variable editor with awsDatasourcesNewFormStyling feature toggle enabled', () => {
- beforeAll(() => {
- config.featureToggles.awsDatasourcesNewFormStyling = false;
- });
- afterAll(() => {
- cleanupFeatureToggle();
- });
- run();
- describe('variable editor with awsDatasourcesNewFormStyling feature toggle enabled', () => {
- beforeAll(() => {
- config.featureToggles.awsDatasourcesNewFormStyling = true;
+ await waitFor(() => {
+ expect(screen.getByDisplayValue('Tags.blah')).toBeInTheDocument();
});
- afterAll(() => {
- cleanupFeatureToggle();
+
+ const filterItem = screen.getByTestId('cloudwatch-multifilter-item');
+ expect(filterItem).toBeInTheDocument();
+ expect(within(filterItem).getByDisplayValue('foo, bar')).toBeInTheDocument();
+
+ // set filter value
+ const valueElement = screen.getByTestId('cloudwatch-multifilter-item-value');
+ expect(valueElement).toBeInTheDocument();
+ await userEvent.type(valueElement!, ',baz');
+ fireEvent.blur(valueElement!);
+
+ expect(screen.getByDisplayValue('foo, bar, baz')).toBeInTheDocument();
+ expect(onChange).toHaveBeenCalledWith({
+ ...defaultQuery,
+ queryType: VariableQueryType.EC2InstanceAttributes,
+ region: 'a1',
+ attributeName: 'Tags.blah',
+ ec2Filters: { s4: ['foo', 'bar', 'baz'] },
});
- run();
+ });
+ });
+ describe('and a different region is selected', () => {
+ it('should clear invalid fields', async () => {
+ const props = defaultProps;
+ props.query = {
+ ...defaultQuery,
+ queryType: VariableQueryType.DimensionValues,
+ namespace: 'z2',
+ region: 'a1',
+ metricName: 'i3',
+ dimensionKey: 's4',
+ dimensionFilters: { s4: 'foo' },
+ };
+ render();
+
+ const querySelect = screen.queryByLabelText('Query type');
+ expect(querySelect).toBeInTheDocument();
+ expect(screen.queryByText('Dimension Values')).toBeInTheDocument();
+ const regionSelect = screen.getByRole('combobox', { name: 'Region' });
+ await waitFor(() =>
+ select(regionSelect, 'b1', {
+ container: document.body,
+ })
+ );
+
+ expect(ds.datasource.resources.getMetrics).toHaveBeenCalledWith({ namespace: 'z2', region: 'b1' });
+ expect(ds.datasource.resources.getDimensionKeys).toHaveBeenCalledWith({ namespace: 'z2', region: 'b1' });
+ expect(props.onChange).toHaveBeenCalledWith({
+ ...defaultQuery,
+ refId: 'CloudWatchVariableQueryEditor-VariableQuery',
+ queryType: VariableQueryType.DimensionValues,
+ namespace: 'z2',
+ region: 'b1',
+ // metricName i3 exists in the new region and should not be removed
+ metricName: 'i3',
+ // dimensionKey s4 and valueDimension do not exist in the new region and should be removed
+ dimensionKey: '',
+ dimensionFilters: {},
+ });
+ });
+ });
+ describe('LogGroups queryType is selected', () => {
+ it('should only render region and prefix', async () => {
+ const props = defaultProps;
+ props.query = {
+ ...defaultQuery,
+ queryType: VariableQueryType.LogGroups,
+ };
+ render();
+
+ await waitFor(() => {
+ screen.getByLabelText('Log group prefix');
+ screen.getByLabelText('Region');
+ });
+
+ expect(screen.queryByLabelText('Namespace')).not.toBeInTheDocument();
});
});
});
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.tsx
index e554875ba23..806b431fdef 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.tsx
@@ -1,7 +1,9 @@
-import { QueryEditorProps, SelectableValue } from '@grafana/data';
+import { css } from '@emotion/css';
+
+import { GrafanaTheme2, QueryEditorProps, SelectableValue } from '@grafana/data';
import { EditorField } from '@grafana/experimental';
import { config } from '@grafana/runtime';
-import { InlineField } from '@grafana/ui';
+import { useStyles2 } from '@grafana/ui';
import { CloudWatchDatasource } from '../../datasource';
import {
@@ -50,7 +52,6 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
const accountState = useAccountOptions(datasource.resources, query.region);
const dimensionKeyError = useEnsureVariableHasSingleSelection(datasource, dimensionKey);
- const newFormStylingEnabled = config.featureToggles.awsDatasourcesNewFormStyling;
const onRegionChange = async (region: string) => {
const validatedQuery = await sanitizeQuery({
...parsedQuery,
@@ -119,8 +120,11 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
VariableQueryType.DimensionKeys,
VariableQueryType.DimensionValues,
].includes(parsedQuery.queryType);
+
+ const styles = useStyles2(getStyles);
+
return (
-
+
{
}
label="Query type"
inputId={`variable-query-type-${query.refId}`}
- newFormStylingEnabled={newFormStylingEnabled}
/>
{hasRegionField && (
{
label="Region"
isLoading={regionIsLoading}
inputId={`variable-query-region-${query.refId}`}
- newFormStylingEnabled={newFormStylingEnabled}
/>
)}
{hasAccountIDField &&
@@ -152,7 +154,6 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
onChange={(accountId?: string) => onQueryChange({ ...parsedQuery, accountId })}
options={[ALL_ACCOUNTS_OPTION, ...accountState?.value]}
allowCustomValue={false}
- newFormStylingEnabled={newFormStylingEnabled}
/>
)}
{hasNamespaceField && (
@@ -163,7 +164,6 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
label="Namespace"
inputId={`variable-query-namespace-${query.refId}`}
allowCustomValue
- newFormStylingEnabled={newFormStylingEnabled}
/>
)}
{parsedQuery.queryType === VariableQueryType.DimensionValues && (
@@ -175,7 +175,6 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
label="Metric"
inputId={`variable-query-metric-${query.refId}`}
allowCustomValue
- newFormStylingEnabled={newFormStylingEnabled}
/>
{
label="Dimension key"
inputId={`variable-query-dimension-key-${query.refId}`}
allowCustomValue
- newFormStylingEnabled={newFormStylingEnabled}
error={dimensionKeyError}
/>
- {newFormStylingEnabled ? (
-
- {
- onChange({ ...parsedQuery, dimensionFilters: dimensions });
- }}
- disableExpressions={true}
- datasource={datasource}
- />
-
- ) : (
-
- {
- onChange({ ...parsedQuery, dimensionFilters: dimensions });
- }}
- disableExpressions={true}
- datasource={datasource}
- />
-
- )}
+
+ {
+ onChange({ ...parsedQuery, dimensionFilters: dimensions });
+ }}
+ disableExpressions={true}
+ datasource={datasource}
+ />
+
)}
{parsedQuery.queryType === VariableQueryType.EBSVolumeIDs && (
@@ -223,7 +207,6 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
placeholder="i-XXXXXXXXXXXXXXXXX"
onBlur={(value: string) => onQueryChange({ ...parsedQuery, instanceID: value })}
label="Instance ID"
- newFormStylingEnabled={newFormStylingEnabled}
/>
)}
{parsedQuery.queryType === VariableQueryType.EC2InstanceAttributes && (
@@ -233,7 +216,6 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
onBlur={(value: string) => onQueryChange({ ...parsedQuery, attributeName: value })}
label="Attribute name"
interactive={true}
- newFormStylingEnabled={newFormStylingEnabled}
tooltip={
<>
{'Attribute or tag to query on. Tags should be formatted "Tags.". '}
@@ -247,60 +229,31 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
}
/>
- {newFormStylingEnabled ? (
-
-
- Pre-defined ec2:DescribeInstances filters/tags
-
- {' and the values to filter on. Tags should be formatted tag:.'}
-
- }
- >
- {
- onChange({ ...parsedQuery, ec2Filters: filters });
- }}
- keyPlaceholder="filter/tag"
- datasource={datasource}
- />
-
- ) : (
-
-
- Pre-defined ec2:DescribeInstances filters/tags
-
- {' and the values to filter on. Tags should be formatted tag:.'}
-
- }
- >
- {
- onChange({ ...parsedQuery, ec2Filters: filters });
- }}
- keyPlaceholder="filter/tag"
- datasource={datasource}
- />
-
- )}
+
+
+ Pre-defined ec2:DescribeInstances filters/tags
+
+ {' and the values to filter on. Tags should be formatted tag:.'}
+
+ }
+ >
+ {
+ onChange({ ...parsedQuery, ec2Filters: filters });
+ }}
+ keyPlaceholder="filter/tag"
+ datasource={datasource}
+ />
+
)}
{parsedQuery.queryType === VariableQueryType.ResourceArns && (
@@ -309,31 +262,17 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
value={parsedQuery.resourceType}
onBlur={(value: string) => onQueryChange({ ...parsedQuery, resourceType: value })}
label="Resource type"
- newFormStylingEnabled={newFormStylingEnabled}
/>
- {newFormStylingEnabled ? (
-
- {
- onChange({ ...parsedQuery, tags: filters });
- }}
- keyPlaceholder="tag"
- datasource={datasource}
- />
-
- ) : (
-
- {
- onChange({ ...parsedQuery, tags: filters });
- }}
- keyPlaceholder="tag"
- datasource={datasource}
- />
-
- )}
+
+ {
+ onChange({ ...parsedQuery, tags: filters });
+ }}
+ keyPlaceholder="tag"
+ datasource={datasource}
+ />
+
)}
{parsedQuery.queryType === VariableQueryType.LogGroups && (
@@ -341,9 +280,17 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
value={query.logGroupPrefix ?? ''}
onBlur={(value: string) => onQueryChange({ ...parsedQuery, logGroupPrefix: value })}
label="Log group prefix"
- newFormStylingEnabled={newFormStylingEnabled}
/>
)}
);
};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+ formStyles: css({
+ maxWidth: theme.spacing(30),
+ }),
+ dimensionsWidth: css({
+ width: theme.spacing(50),
+ }),
+});
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryField.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryField.tsx
index eb1399ce9c9..500a069c9da 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryField.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryField.tsx
@@ -1,14 +1,10 @@
-import { css } from '@emotion/css';
-
-import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { SelectableValue } from '@grafana/data';
import { EditorField } from '@grafana/experimental';
-import { Alert, InlineField, Select, useStyles2 } from '@grafana/ui';
+import { Alert, Select } from '@grafana/ui';
import { VariableQueryType } from '../../types';
import { removeMarginBottom } from '../styles';
-const LABEL_WIDTH = 20;
-
interface VariableQueryFieldProps
{
onChange: (value: T) => void;
options: SelectableValue[];
@@ -17,7 +13,6 @@ interface VariableQueryFieldProps {
inputId?: string;
allowCustomValue?: boolean;
isLoading?: boolean;
- newFormStylingEnabled?: boolean;
error?: string;
}
@@ -29,11 +24,9 @@ export const VariableQueryField = ({
allowCustomValue = false,
isLoading = false,
inputId = label,
- newFormStylingEnabled,
error,
}: VariableQueryFieldProps) => {
- const styles = useStyles2(getStyles);
- return newFormStylingEnabled ? (
+ return (
<>
{error && }
- ) : (
- <>
-
-
- {error && }
-
);
};
-
-const getStyles = (theme: GrafanaTheme2) => ({
- // width set to InlineField labelWidth + Select width + 0.5 for margin on the label
- inlineFieldAlert: css({ maxWidth: theme.spacing(LABEL_WIDTH + 25 + 0.5) }),
-});
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableTextField.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableTextField.tsx
index 4313f440275..ed9c2dee2ec 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableTextField.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableTextField.tsx
@@ -1,12 +1,10 @@
import { useState } from 'react';
import { EditorField } from '@grafana/experimental';
-import { InlineField, Input, PopoverContent } from '@grafana/ui';
+import { Input, PopoverContent } from '@grafana/ui';
import { removeMarginBottom } from '../styles';
-const LABEL_WIDTH = 20;
-
interface Props {
onBlur: (value: string) => void;
value: string;
@@ -17,17 +15,9 @@ interface Props {
newFormStylingEnabled?: boolean;
}
-export const VariableTextField = ({
- interactive,
- label,
- onBlur,
- placeholder,
- value,
- tooltip,
- newFormStylingEnabled,
-}: Props) => {
+export const VariableTextField = ({ interactive, label, onBlur, placeholder, value, tooltip }: Props) => {
const [localValue, setLocalValue] = useState(value);
- return newFormStylingEnabled ? (
+ return (
onBlur(localValue)}
/>
- ) : (
-
- setLocalValue(e.currentTarget.value)}
- onBlur={() => onBlur(localValue)}
- width={25}
- />
-
);
};