Azure Monitor: Clean up fields when editing Metrics (#41762)

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricsQueryEditor.test.tsx

@@ -109,46 +109,8 @@ describe('Azure Monitor QueryEditor', () => {
       azureMonitor: {
         ...mockQuery.azureMonitor,
         metricName: 'metric-b',
-      },
+        aggregation: undefined,
-    });
+        timeGrain: '',
-  });
-
-  it('should auto select a default aggregation if none exists once a metric is selected', async () => {
-    const mockDatasource = createMockDatasource();
-    const onChange = jest.fn();
-    const mockQuery = createMockQuery();
-    (mockQuery.azureMonitor ?? {}).aggregation = undefined;
-    mockDatasource.getMetricNames = jest.fn().mockResolvedValue([
-      {
-        value: 'metric-a',
-        text: 'Metric A',
-      },
-      {
-        value: 'metric-b',
-        text: 'Metric B',
-      },
-    ]);
-    render(
-      <MetricsQueryEditor
-        subscriptionId="123"
-        query={createMockQuery()}
-        datasource={mockDatasource}
-        variableOptionGroup={variableOptionGroup}
-        onChange={onChange}
-        setError={() => {}}
-      />
-    );
-    await waitFor(() => expect(screen.getByTestId('azure-monitor-metrics-query-editor')).toBeInTheDocument());
-
-    const metrics = await screen.findByLabelText('Metric');
-    await selectOptionInTest(metrics, 'Metric B');
-
-    expect(onChange).toHaveBeenLastCalledWith({
-      ...mockQuery,
-      azureMonitor: {
-        ...mockQuery.azureMonitor,
-        metricName: 'metric-b',
-        aggregation: 'Average',
       },
     });
   });

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/dataHooks.test.ts

@@ -2,6 +2,7 @@ import { renderHook } from '@testing-library/react-hooks';
 
 import {
   DataHook,
+  updateSubscriptions,
   useAsyncState,
   useMetricNames,
   useResourceGroups,
@@ -340,8 +341,82 @@ describe('AzureMonitor: metrics dataHooks', () => {
 
       expect(onChange).toHaveBeenCalledWith({
         ...query,
-        azureMonitor: scenario.expectedClearedQueryPartial,
+        azureMonitor: {
+          ...scenario.expectedClearedQueryPartial,
+          dimensionFilters: [],
+          timeGrain: '',
+        },
       });
     });
   });
 });
+
+describe('AzureMonitor: updateSubscriptions', () => {
+  const bareQuery = {
+    refId: 'A',
+    queryType: AzureQueryType.AzureMonitor,
+  };
+
+  [
+    {
+      description: 'should not update with no subscriptions',
+      query: bareQuery,
+      subscriptionOptions: [],
+    },
+    {
+      description: 'should not update with the subscription as an option',
+      query: { ...bareQuery, subscription: 'foo' },
+      subscriptionOptions: [{ label: 'foo', value: 'foo' }],
+    },
+    {
+      description: 'should update with the first subscription',
+      query: { ...bareQuery },
+      subscriptionOptions: [{ label: 'foo', value: 'foo' }],
+      onChangeArgs: {
+        ...bareQuery,
+        subscription: 'foo',
+        azureMonitor: {
+          dimensionFilters: [],
+          timeGrain: '',
+        },
+      },
+    },
+    {
+      description: 'should update with the default subscription if the current subsription does not exists',
+      query: { ...bareQuery, subscription: 'bar' },
+      subscriptionOptions: [{ label: 'foo', value: 'foo' }],
+      onChangeArgs: {
+        ...bareQuery,
+        subscription: 'foo',
+        azureMonitor: {
+          dimensionFilters: [],
+          timeGrain: '',
+        },
+      },
+    },
+    {
+      description: 'should clean up if neither the default sub nor the current sub exists',
+      query: { ...bareQuery, subscription: 'bar' },
+      subscriptionOptions: [{ label: 'foo', value: 'foo' }],
+      defaultSubscription: 'foobar',
+      onChangeArgs: {
+        ...bareQuery,
+        subscription: '',
+        azureMonitor: {
+          dimensionFilters: [],
+          timeGrain: '',
+        },
+      },
+    },
+  ].forEach((test) => {
+    it(test.description, () => {
+      const onChange = jest.fn();
+      updateSubscriptions(test.query, test.subscriptionOptions, onChange, test.defaultSubscription);
+      if (test.onChangeArgs) {
+        expect(onChange).toHaveBeenCalledWith(test.onChangeArgs);
+      } else {
+        expect(onChange).not.toHaveBeenCalled();
+      }
+    });
+  });
+});

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/dataHooks.ts

@@ -55,8 +55,38 @@ export function useAsyncState<T>(asyncFn: () => Promise<T>, setError: Function,
   return finalValue;
 }
 
-export const useSubscriptions: DataHook = (query, datasource, onChange, setError) => {
+export const updateSubscriptions = (
+  query: AzureMonitorQuery,
+  subscriptionOptions: AzureMonitorOption[],
+  onChange: OnChangeFn,
+  defaultSubscription?: string
+) => {
   const { subscription } = query;
+
+  // Return early if subscriptions havent loaded, or if the query already has a subscription
+  if (!subscriptionOptions.length || (subscription && hasOption(subscriptionOptions, subscription))) {
+    return;
+  }
+
+  const defaultSub = defaultSubscription || subscriptionOptions[0].value;
+
+  if (!subscription && defaultSub && hasOption(subscriptionOptions, defaultSub)) {
+    onChange(setSubscriptionID(query, defaultSub));
+  }
+
+  // Check if the current subscription is in the list of subscriptions
+  if (subscription && !hasOption(subscriptionOptions, subscription)) {
+    if (hasOption(subscriptionOptions, defaultSub)) {
+      // Use the default sub if is on theh list
+      onChange(setSubscriptionID(query, defaultSub));
+    } else {
+      // Neither the current subscription nor the defaultSub is on the list, remove it
+      onChange(setSubscriptionID(query, ''));
+    }
+  }
+};
+
+export const useSubscriptions: DataHook = (query, datasource, onChange, setError) => {
   const defaultSubscription = datasource.azureMonitorDatasource.defaultSubscriptionId;
 
   const subscriptionOptions = useAsyncState(
@@ -69,17 +99,8 @@ export const useSubscriptions: DataHook = (query, datasource, onChange, setError
   );
 
   useEffect(() => {
-    // Return early if subscriptions havent loaded, or if the query already has a subscription
+    updateSubscriptions(query, subscriptionOptions, onChange, defaultSubscription);
-    if (!subscriptionOptions.length || (subscription && hasOption(subscriptionOptions, subscription))) {
+  }, [subscriptionOptions, query, defaultSubscription, onChange]);
-      return;
-    }
-
-    const defaultSub = defaultSubscription || subscriptionOptions[0].value;
-
-    if (!subscription && defaultSub && hasOption(subscriptionOptions, defaultSub)) {
-      onChange(setSubscriptionID(query, defaultSub));
-    }
-  }, [subscriptionOptions, query, subscription, defaultSubscription, onChange]);
 
   return subscriptionOptions;
 };

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/setQueryValue.ts

@@ -11,6 +11,13 @@ export function setSubscriptionID(query: AzureMonitorQuery, subscriptionID: stri
     azureMonitor: {
       ...query.azureMonitor,
       resourceGroup: undefined,
+      metricDefinition: undefined,
+      metricNamespace: undefined,
+      resourceName: undefined,
+      metricName: undefined,
+      aggregation: undefined,
+      timeGrain: '',
+      dimensionFilters: [],
     },
   };
 }
@@ -25,7 +32,13 @@ export function setResourceGroup(query: AzureMonitorQuery, resourceGroup: string
     azureMonitor: {
       ...query.azureMonitor,
       resourceGroup: resourceGroup,
+      metricDefinition: undefined,
+      metricNamespace: undefined,
       resourceName: undefined,
+      metricName: undefined,
+      aggregation: undefined,
+      timeGrain: '',
+      dimensionFilters: [],
     },
   };
 }
@@ -44,6 +57,9 @@ export function setResourceType(query: AzureMonitorQuery, resourceType: string |
       resourceName: undefined,
       metricNamespace: undefined,
       metricName: undefined,
+      aggregation: undefined,
+      timeGrain: '',
+      dimensionFilters: [],
     },
   };
 
@@ -60,6 +76,11 @@ export function setResourceName(query: AzureMonitorQuery, resourceName: string |
     azureMonitor: {
       ...query.azureMonitor,
       resourceName: resourceName,
+      metricNamespace: undefined,
+      metricName: undefined,
+      aggregation: undefined,
+      timeGrain: '',
+      dimensionFilters: [],
     },
   };
 }
@@ -75,6 +96,9 @@ export function setMetricNamespace(query: AzureMonitorQuery, metricNamespace: st
       ...query.azureMonitor,
       metricNamespace: metricNamespace,
       metricName: undefined,
+      aggregation: undefined,
+      timeGrain: '',
+      dimensionFilters: [],
     },
   };
 }
@@ -89,6 +113,9 @@ export function setMetricName(query: AzureMonitorQuery, metricName: string | und
     azureMonitor: {
       ...query.azureMonitor,
       metricName: metricName,
+      aggregation: undefined,
+      timeGrain: '',
+      dimensionFilters: [],
     },
   };
 }