AzureMonitor: revert Variable Editor region changes (#72306)

* Revert "remove regions/locations from variable editor"

This reverts commit 41dc6a8bfb.

* Revert "remove region pieces from e2e"

This reverts commit 6b1f82f14a.

* e2e: open resource picker correctly

e2e/cloud-plugins-suite/azure-monitor.spec.ts

@@ -126,6 +126,10 @@ const addAzureMonitorVariable = (
         .input()
         .find('input')
         .type(`${options?.namespace}{enter}`);
+      e2eSelectors.variableEditor.region
+        .input()
+        .find('input')
+        .type(`${options?.region}{enter}`);
       break;
     case AzureQueryType.MetricNamesQuery:
       e2eSelectors.variableEditor.subscription
@@ -302,10 +306,14 @@ e2e.scenario({
       subscription: '$subscription',
       resourceGroup: '$resourceGroups',
     });
+    addAzureMonitorVariable('region', AzureQueryType.LocationsQuery, false, {
+      subscription: '$subscription',
+    });
     addAzureMonitorVariable('resource', AzureQueryType.ResourceNamesQuery, false, {
       subscription: '$subscription',
       resourceGroup: '$resourceGroups',
       namespace: '$namespace',
+      region: '$region',
     });
     e2e.pages.Dashboard.SubMenu.submenuItemLabels('subscription').click();
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('grafanalabs-datasources-dev').click();
@@ -319,6 +327,8 @@ e2e.scenario({
       .parent()
       .find('input')
       .type('microsoft.storage/storageaccounts{downArrow}{enter}');
+    e2e.pages.Dashboard.SubMenu.submenuItemLabels('region').parent().find('button').click();
+    e2e.pages.Dashboard.SubMenu.submenuItemLabels('region').parent().find('input').type('uk south{downArrow}{enter}');
     e2e.pages.Dashboard.SubMenu.submenuItemLabels('resource').parent().find('button').click();
     e2e.pages.Dashboard.SubMenu.submenuItemLabels('resource')
       .parent()
@@ -333,6 +343,7 @@ e2e.scenario({
         e2eSelectors.queryEditor.resourcePicker.advanced.subscription.input().find('input').type('$subscription');
         e2eSelectors.queryEditor.resourcePicker.advanced.resourceGroup.input().find('input').type('$resourceGroups');
         e2eSelectors.queryEditor.resourcePicker.advanced.namespace.input().find('input').type('$namespaces');
+        e2eSelectors.queryEditor.resourcePicker.advanced.region.input().find('input').type('$region');
         e2eSelectors.queryEditor.resourcePicker.advanced.resource.input().find('input').type('$resource');
         e2eSelectors.queryEditor.resourcePicker.apply.button().click();
         e2eSelectors.queryEditor.metricsQueryEditor.metricName.input().find('input').type('Transactions{enter}');

public/app/plugins/datasource/azuremonitor/components/VariableEditor/VariableEditor.test.tsx

@@ -258,10 +258,12 @@ describe('VariableEditor:', () => {
       await waitFor(() => expect(screen.getByText('Logs')).toBeInTheDocument());
       await selectAndRerender('select query type', 'Resource Names', onChange, rerender);
       await selectAndRerender('select subscription', 'Primary Subscription', onChange, rerender);
+      await selectAndRerender('select region', 'North Europe', onChange, rerender);
       expect(onChange).toHaveBeenCalledWith(
         expect.objectContaining({
           queryType: AzureQueryType.ResourceNamesQuery,
           subscription: 'sub',
+          region: 'northeurope',
           refId: 'A',
         })
       );
@@ -323,5 +325,21 @@ describe('VariableEditor:', () => {
         })
       );
     });
+
+    it('should run the query if requesting regions', async () => {
+      const onChange = jest.fn();
+      const { rerender } = render(<VariableEditor {...defaultProps} onChange={onChange} />);
+      // wait for initial load
+      await waitFor(() => expect(screen.getByText('Logs')).toBeInTheDocument());
+      await selectAndRerender('select query type', 'Regions', onChange, rerender);
+      await selectAndRerender('select subscription', 'Primary Subscription', onChange, rerender);
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          queryType: AzureQueryType.LocationsQuery,
+          subscription: 'sub',
+          refId: 'A',
+        })
+      );
+    });
   });
 });

public/app/plugins/datasource/azuremonitor/components/VariableEditor/VariableEditor.tsx

@@ -30,6 +30,7 @@ const VariableEditor = (props: Props) => {
     { label: 'Subscriptions', value: AzureQueryType.SubscriptionsQuery },
     { label: 'Resource Groups', value: AzureQueryType.ResourceGroupsQuery },
     { label: 'Namespaces', value: AzureQueryType.NamespacesQuery },
+    { label: 'Regions', value: AzureQueryType.LocationsQuery },
     { label: 'Resource Names', value: AzureQueryType.ResourceNamesQuery },
     { label: 'Metric Names', value: AzureQueryType.MetricNamesQuery },
     { label: 'Workspaces', value: AzureQueryType.WorkspacesQuery },
@@ -50,6 +51,7 @@ const VariableEditor = (props: Props) => {
   const [requireSubscription, setRequireSubscription] = useState(false);
   const [hasResourceGroup, setHasResourceGroup] = useState(false);
   const [hasNamespace, setHasNamespace] = useState(false);
+  const [hasRegion, setHasRegion] = useState(false);
   const [requireResourceGroup, setRequireResourceGroup] = useState(false);
   const [requireNamespace, setRequireNamespace] = useState(false);
   const [requireResource, setRequireResource] = useState(false);
@@ -57,6 +59,7 @@ const VariableEditor = (props: Props) => {
   const [resourceGroups, setResourceGroups] = useState<SelectableValue[]>([]);
   const [namespaces, setNamespaces] = useState<SelectableValue[]>([]);
   const [resources, setResources] = useState<SelectableValue[]>([]);
+  const [regions, setRegions] = useState<SelectableValue[]>([]);
   const [errorMessage, setError] = useLastError();
   const queryType = typeof query === 'string' ? '' : query.queryType;
 
@@ -88,6 +91,7 @@ const VariableEditor = (props: Props) => {
         setRequireSubscription(true);
         setHasResourceGroup(true);
         setHasNamespace(true);
+        setHasRegion(true);
         break;
       case AzureQueryType.MetricNamesQuery:
         setRequireSubscription(true);
@@ -95,6 +99,9 @@ const VariableEditor = (props: Props) => {
         setRequireNamespace(true);
         setRequireResource(true);
         break;
+      case AzureQueryType.LocationsQuery:
+        setRequireSubscription(true);
+        break;
     }
   }, [queryType]);
 
@@ -135,6 +142,16 @@ const VariableEditor = (props: Props) => {
     }
   }, [datasource, subscription, resourceGroup]);
 
+  useEffect(() => {
+    if (subscription) {
+      datasource.azureMonitorDatasource.getLocations([subscription]).then((rgs) => {
+        const regions: SelectableValue[] = [];
+        rgs.forEach((r) => regions.push({ label: r.displayName, value: r.name }));
+        setRegions(regions);
+      });
+    }
+  }, [datasource, subscription, resourceGroup]);
+
   const namespace = (typeof query === 'object' && query.namespace) || '';
   useEffect(() => {
     if (subscription) {
@@ -191,6 +208,13 @@ const VariableEditor = (props: Props) => {
     });
   };
 
+  const onChangeRegion = (selectableValue: SelectableValue) => {
+    onChange({
+      ...query,
+      region: selectableValue.value,
+    });
+  };
+
   const onChangeResource = (selectableValue: SelectableValue) => {
     onChange({
       ...query,
@@ -296,6 +320,22 @@ const VariableEditor = (props: Props) => {
           />
         </InlineField>
       )}
+      {hasRegion && (
+        <InlineField
+          label="Select region"
+          labelWidth={20}
+          data-testid={selectors.components.variableEditor.region.input}
+        >
+          <Select
+            aria-label="select region"
+            onChange={onChangeRegion}
+            options={regions.concat(variableOptionGroup)}
+            width={25}
+            value={query.region || null}
+            placeholder="Optional"
+          />
+        </InlineField>
+      )}
       {requireResource && (
         <InlineField
           label="Select resource"

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

@@ -109,6 +109,17 @@ export class VariableSupport extends CustomVariableSupport<DataSource, AzureMoni
               };
             }
             return { data: [] };
+          case AzureQueryType.LocationsQuery:
+            if (queryObj.subscription && this.hasValue(queryObj.subscription)) {
+              const locationMap = await this.datasource.azureMonitorDatasource.getLocations([queryObj.subscription]);
+              const res: Array<{ text: string; value: string }> = [];
+              locationMap.forEach((loc) => {
+                res.push({ text: loc.displayName, value: loc.name });
+              });
+              return {
+                data: res?.length ? [toDataFrame(res)] : [],
+              };
+            }
           default:
             request.targets[0] = queryObj;
             const queryResp = await lastValueFrom(this.datasource.query(request));