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 1d871de1da6..be8cb585d4c 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.test.tsx
@@ -190,7 +190,7 @@ describe('VariableEditor', () => {
render();
await waitFor(() => {
- expect(screen.getByDisplayValue('Tags.blah')).toBeInTheDocument();
+ expect(screen.queryByText('Tags.blah')).toBeInTheDocument();
});
const filterItem = screen.getByTestId('cloudwatch-multifilter-item');
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.tsx
index 0c3215c0d0d..c2d39f88c8f 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.tsx
@@ -1,6 +1,6 @@
import { css } from '@emotion/css';
-import { GrafanaTheme2, QueryEditorProps, SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, QueryEditorProps, SelectableValue, toOption } from '@grafana/data';
import { EditorField } from '@grafana/plugin-ui';
import { config } from '@grafana/runtime';
import { useStyles2 } from '@grafana/ui';
@@ -41,6 +41,37 @@ const queryTypes: Array<{ value: string; label: string }> = [
: []),
];
+const attributeNames: string[] = [
+ 'AmiLaunchIndex',
+ 'Architecture',
+ 'ClientToken',
+ 'EbsOptimized',
+ 'EnaSupport',
+ 'Hypervisor',
+ 'IamInstanceProfile',
+ 'ImageId',
+ 'InstanceId',
+ 'InstanceLifecycle',
+ 'InstanceType',
+ 'KernelId',
+ 'KeyName',
+ 'LaunchTime',
+ 'Platform',
+ 'PrivateDnsName',
+ 'PrivateIpAddress',
+ 'PublicDnsName',
+ 'PublicIpAddress',
+ 'RamdiskId',
+ 'RootDeviceName',
+ 'RootDeviceType',
+ 'SourceDestCheck',
+ 'SpotInstanceRequestId',
+ 'SriovNetSupport',
+ 'SubnetId',
+ 'VirtualizationType',
+ 'VpcId',
+];
+
export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
const parsedQuery = migrateVariableQuery(query);
@@ -98,6 +129,10 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
}
return { ...query, metricName, dimensionKey, dimensionFilters };
};
+ const allAttributeNames = attributeNames.includes(parsedQuery.attributeName)
+ ? attributeNames
+ : [...attributeNames, parsedQuery.attributeName];
+ const attributeOptions = allAttributeNames.map(toOption);
const hasRegionField = [
VariableQueryType.Metrics,
@@ -211,10 +246,13 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
)}
{parsedQuery.queryType === VariableQueryType.EC2InstanceAttributes && (
<>
- onQueryChange({ ...parsedQuery, attributeName: value })}
+ options={attributeOptions}
+ onChange={(value: string) => onQueryChange({ ...parsedQuery, attributeName: value })}
label="Attribute name"
+ inputId={`variable-query-instance-attribute-${query.refId}`}
+ allowCustomValue
interactive={true}
tooltip={
<>
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryField.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryField.tsx
index de3a1af573b..06f8eb2c6f5 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryField.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryField.tsx
@@ -1,6 +1,6 @@
import { SelectableValue } from '@grafana/data';
import { EditorField } from '@grafana/plugin-ui';
-import { Alert, Select } from '@grafana/ui';
+import { Alert, PopoverContent, Select } from '@grafana/ui';
import { VariableQueryType } from '../../types';
import { removeMarginBottom } from '../styles';
@@ -13,6 +13,8 @@ interface VariableQueryFieldProps {
inputId?: string;
allowCustomValue?: boolean;
isLoading?: boolean;
+ tooltip?: PopoverContent;
+ interactive?: boolean;
error?: string;
}
@@ -24,11 +26,19 @@ export const VariableQueryField = ({
allowCustomValue = false,
isLoading = false,
inputId = label,
+ tooltip,
+ interactive,
error,
}: VariableQueryFieldProps) => {
return (
<>
-
+