refactoring dimension values frontend req (#57475)

public/app/plugins/datasource/cloudwatch/api.ts

@@ -5,7 +5,13 @@ import { getBackendSrv } from '@grafana/runtime';
 import { TemplateSrv } from 'app/features/templating/template_srv';
 
 import { CloudWatchRequest } from './query-runner/CloudWatchRequest';
-import { CloudWatchJsonData, DescribeLogGroupsRequest, GetDimensionKeysRequest, MultiFilters } from './types';
+import {
+  CloudWatchJsonData,
+  DescribeLogGroupsRequest,
+  GetDimensionKeysRequest,
+  GetDimensionValuesRequest,
+  MultiFilters,
+} from './types';
 
 export interface SelectableResourceValue extends SelectableValue<string> {
   text: string;
@@ -83,13 +89,13 @@ export class CloudWatchAPI extends CloudWatchRequest {
     }).then((dimensionKeys) => dimensionKeys.map(toOption));
   }
 
-  async getDimensionValues(
-    region: string,
-    namespace: string | undefined,
-    metricName: string | undefined,
-    dimensionKey: string,
-    dimensionFilters: {}
-  ) {
+  async getDimensionValues({
+    dimensionKey,
+    region,
+    namespace,
+    dimensionFilters = {},
+    metricName = '',
+  }: GetDimensionValuesRequest) {
     if (!namespace || !metricName) {
       return [];
     }

public/app/plugins/datasource/cloudwatch/cloudwatch-sql/completion/CompletionItemProvider.ts

@@ -199,13 +199,12 @@ export class SQLCompletionItemProvider extends CompletionItemProvider {
             const metricNameToken = getMetricNameToken(currentToken);
             const labelKey = currentToken?.getPreviousNonWhiteSpaceToken()?.getPreviousNonWhiteSpaceToken();
             if (namespaceToken?.value && labelKey?.value && metricNameToken?.value) {
-              const values = await this.api.getDimensionValues(
-                this.templateSrv.replace(this.region),
-                this.templateSrv.replace(namespaceToken.value.replace(/\"/g, '')),
-                this.templateSrv.replace(metricNameToken.value),
-                this.templateSrv.replace(labelKey.value),
-                {}
-              );
+              const values = await this.api.getDimensionValues({
+                region: this.region,
+                namespace: namespaceToken.value.replace(/\"/g, ''),
+                metricName: metricNameToken.value,
+                dimensionKey: labelKey.value,
+              });
               values.map((o) =>
                 addSuggestion(`'${o.value}'`, { insertText: `'${o.value}' `, command: TRIGGER_SUGGEST })
               );

public/app/plugins/datasource/cloudwatch/components/Dimensions/FilterItem.tsx

@@ -52,7 +52,13 @@ export const FilterItem: FunctionComponent<Props> = ({
     }
 
     return datasource.api
-      .getDimensionValues(region, namespace, metricName, filter.key, dimensionsExcludingCurrentKey)
+      .getDimensionValues({
+        dimensionKey: filter.key,
+        dimensionFilters: dimensionsExcludingCurrentKey,
+        region,
+        namespace,
+        metricName,
+      })
       .then((result: Array<SelectableValue<string>>) => {
         if (result.length && !disableExpressions && !result.some((o) => o.value === wildcardOption.value)) {
           result.unshift(wildcardOption);

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

@@ -28,10 +28,10 @@ export function MetricStatEditor({
   onChange,
   onRunQuery,
 }: React.PropsWithChildren<Props>) {
-  const { region, namespace, metricName, dimensions } = metricStat;
+  const { region, namespace } = metricStat;
   const namespaces = useNamespaces(datasource);
   const metrics = useMetrics(datasource, region, namespace);
-  const dimensionKeys = useDimensionKeys(datasource, { region, namespace, metricName, dimensionFilters: dimensions });
+  const dimensionKeys = useDimensionKeys(datasource, { ...metricStat, dimensionFilters: metricStat.dimensions });
 
   const onMetricStatChange = (metricStat: MetricStat) => {
     onChange(metricStat);

public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx

@@ -105,12 +105,12 @@ const FilterItem: React.FC<FilterItemProps> = (props) => {
   const dimensionKeys = useDimensionKeys(datasource, { region: query.region, namespace, metricName });
 
   const loadDimensionValues = async () => {
-    if (!filter.property?.name) {
+    if (!filter.property?.name || !namespace) {
       return [];
     }
 
     return datasource.api
-      .getDimensionValues(query.region, namespace, metricName, filter.property.name, {})
+      .getDimensionValues({ region: query.region, namespace, metricName, dimensionKey: filter.property.name })
       .then((result: Array<SelectableValue<string>>) => {
         return appendTemplateVariables(datasource, result);
       });

public/app/plugins/datasource/cloudwatch/types.ts

@@ -460,3 +460,10 @@ export interface GetDimensionKeysRequest extends ResourceRequest {
   namespace?: string;
   dimensionFilters?: Dimensions;
 }
+
+export interface GetDimensionValuesRequest extends ResourceRequest {
+  dimensionKey: string;
+  namespace: string;
+  metricName?: string;
+  dimensionFilters?: Dimensions;
+}

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

@@ -76,13 +76,13 @@ describe('variables', () => {
     });
     it('should run if values are set', async () => {
       const result = await variables.execute(query);
-      expect(getDimensionValues).toBeCalledWith(
-        query.region,
-        query.namespace,
-        query.metricName,
-        query.dimensionKey,
-        query.dimensionFilters
-      );
+      expect(getDimensionValues).toBeCalledWith({
+        region: query.region,
+        namespace: query.namespace,
+        metricName: query.metricName,
+        dimensionKey: query.dimensionKey,
+        dimensionFilters: query.dimensionFilters,
+      });
       expect(result).toEqual([{ text: 'e', value: 'e', expandable: true }]);
     });
   });

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

@@ -105,7 +105,13 @@ export class CloudWatchVariableSupport extends CustomVariableSupport<CloudWatchD
     if (!dimensionKey || !metricName) {
       return [];
     }
-    const keys = await this.api.getDimensionValues(region, namespace, metricName, dimensionKey, dimensionFilters ?? {});
+    const keys = await this.api.getDimensionValues({
+      region,
+      namespace,
+      metricName,
+      dimensionKey,
+      dimensionFilters,
+    });
     return keys.map((s) => ({
       text: s.label,
       value: s.value,