Cloudwatch: Add template variable query function for listing log groups (#50100)

* cloud-datasources mob! :shipit:

* cloud-datasources mob! :shipit:

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

* mob next [ci-skip] [ci skip] [skip ci]

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

* cloud-datasources mob! 👶

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

* cloud-datasources mob! 👶

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

* mob next [ci-skip] [ci skip] [skip ci]

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

* cloud-datasources mob! :shipit:

lastFile:public/app/plugins/datasource/cloudwatch/variables.test.ts

* cloud-datasources mob! ☕

* prettier md

Co-authored-by: Kevin Yu <kevinwcyu@users.noreply.github.com>
Co-authored-by: Andres <andres.martinez@grafana.com>
Co-authored-by: Erik Sundell <erik.sundell87@gmail.com>
Co-authored-by: Adam Simpson <adam@adamsimpson.net>

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

@@ -81,7 +81,7 @@ describe('VariableEditor', () => {
       render(<VariableQueryEditor {...props} />);
 
       await waitFor(() => {
-        const querySelect = screen.queryByRole('combobox', { name: 'Query Type' });
+        const querySelect = screen.queryByRole('combobox', { name: 'Query type' });
         expect(querySelect).toBeInTheDocument();
         expect(screen.queryByText('Regions')).toBeInTheDocument();
         // Should not render any fields besides Query Type
@@ -103,7 +103,7 @@ describe('VariableEditor', () => {
       render(<VariableQueryEditor {...props} />);
 
       await waitFor(() => {
-        const querySelect = screen.queryByRole('combobox', { name: 'Query Type' });
+        const querySelect = screen.queryByRole('combobox', { name: 'Query type' });
         expect(querySelect).toBeInTheDocument();
         expect(screen.queryByText('Metrics')).toBeInTheDocument();
         const regionSelect = screen.queryByRole('combobox', { name: 'Region' });
@@ -216,7 +216,7 @@ describe('VariableEditor', () => {
       };
       render(<VariableQueryEditor {...props} />);
 
-      const querySelect = screen.queryByLabelText('Query Type');
+      const querySelect = screen.queryByLabelText('Query type');
       expect(querySelect).toBeInTheDocument();
       expect(screen.queryByText('Dimension Values')).toBeInTheDocument();
       const regionSelect = screen.getByRole('combobox', { name: 'Region' });
@@ -240,4 +240,21 @@ describe('VariableEditor', () => {
       });
     });
   });
+  describe('LogGroups queryType is selected', () => {
+    it('should only render region and prefix', async () => {
+      const props = defaultProps;
+      props.query = {
+        ...defaultQuery,
+        queryType: VariableQueryType.LogGroups,
+      };
+      render(<VariableQueryEditor {...props} />);
+
+      await waitFor(() => {
+        screen.getByLabelText('Log group prefix');
+        screen.getByLabelText('Region');
+      });
+
+      expect(screen.queryByLabelText('Namespace')).not.toBeInTheDocument();
+    });
+  });
 });

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

@@ -25,6 +25,7 @@ const queryTypes: Array<{ value: string; label: string }> = [
   { value: VariableQueryType.EC2InstanceAttributes, label: 'EC2 Instance Attributes' },
   { value: VariableQueryType.ResourceArns, label: 'Resource ARNs' },
   { value: VariableQueryType.Statistics, label: 'Statistics' },
+  { value: VariableQueryType.LogGroups, label: 'Log Groups' },
 ];
 
 export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
@@ -88,6 +89,7 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
     VariableQueryType.EBSVolumeIDs,
     VariableQueryType.EC2InstanceAttributes,
     VariableQueryType.ResourceArns,
+    VariableQueryType.LogGroups,
   ].includes(parsedQuery.queryType);
   const hasNamespaceField = [
     VariableQueryType.Metrics,
@@ -100,7 +102,7 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
         value={parsedQuery.queryType}
         options={queryTypes}
         onChange={(value: VariableQueryType) => onQueryChange({ ...parsedQuery, queryType: value })}
-        label="Query Type"
+        label="Query type"
         inputId={`variable-query-type-${query.refId}`}
       />
       {hasRegionField && (
@@ -135,7 +137,7 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
             value={dimensionKey || null}
             options={dimensionKeys}
             onChange={(value: string) => onQueryChange({ ...parsedQuery, dimensionKey: value })}
-            label="Dimension Key"
+            label="Dimension key"
             inputId={`variable-query-dimension-key-${query.refId}`}
           />
           <InlineField label="Dimensions" labelWidth={20} tooltip="Dimensions to filter the returned values on">
@@ -163,9 +165,8 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
         <>
           <VariableTextField
             value={parsedQuery.attributeName}
-            placeholder="attribute name"
             onBlur={(value: string) => onQueryChange({ ...parsedQuery, attributeName: value })}
-            label="Attribute Name"
+            label="Attribute name"
             interactive={true}
             tooltip={
               <>
@@ -210,9 +211,8 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
         <>
           <VariableTextField
             value={parsedQuery.resourceType}
-            placeholder="resource type"
             onBlur={(value: string) => onQueryChange({ ...parsedQuery, resourceType: value })}
-            label="Resource Type"
+            label="Resource type"
           />
           <InlineField label="Tags" labelWidth={20} tooltip="Tags to filter the returned values on.">
             <MultiFilter
@@ -225,6 +225,13 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
           </InlineField>
         </>
       )}
+      {parsedQuery.queryType === VariableQueryType.LogGroups && (
+        <VariableTextField
+          value={query.logGroupPrefix ?? ''}
+          onBlur={(value: string) => onQueryChange({ ...parsedQuery, logGroupPrefix: value })}
+          label="Log group prefix"
+        />
+      )}
     </>
   );
 };

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

@@ -6,9 +6,9 @@ const LABEL_WIDTH = 20;
 
 interface VariableTextFieldProps {
   onBlur: (value: string) => void;
-  placeholder: string;
   value: string;
   label: string;
+  placeholder?: string;
   tooltip?: PopoverContent;
   interactive?: boolean;
 }