CloudWatch: Improve instance attribute variable query editor (#105206)

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

@@ -190,7 +190,7 @@ describe('VariableEditor', () => {
       render(<VariableQueryEditor {...props} />);
 
       await waitFor(() => {
-        expect(screen.getByDisplayValue('Tags.blah')).toBeInTheDocument();
+        expect(screen.queryByText('Tags.blah')).toBeInTheDocument();
       });
 
       const filterItem = screen.getByTestId('cloudwatch-multifilter-item');

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 && (
         <>
-          <VariableTextField
+          <VariableQueryField
             value={parsedQuery.attributeName}
-            onBlur={(value: string) => 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={
               <>

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<T> {
   inputId?: string;
   allowCustomValue?: boolean;
   isLoading?: boolean;
+  tooltip?: PopoverContent;
+  interactive?: boolean;
   error?: string;
 }
 
@@ -24,11 +26,19 @@ export const VariableQueryField = <T extends string | VariableQueryType>({
   allowCustomValue = false,
   isLoading = false,
   inputId = label,
+  tooltip,
+  interactive,
   error,
 }: VariableQueryFieldProps<T>) => {
   return (
     <>
-      <EditorField label={label} htmlFor={inputId} className={removeMarginBottom}>
+      <EditorField
+        label={label}
+        tooltip={tooltip}
+        tooltipInteractive={interactive}
+        htmlFor={inputId}
+        className={removeMarginBottom}
+      >
         <Select
           aria-label={label}
           allowCustomValue={allowCustomValue}