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
This commit is contained in:
Adam Simpson 2023-07-26 10:04:18 -04:00 committed by GitHub
parent 0c2b2219bb
commit 51b199e986
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 80 additions and 0 deletions

View File

@ -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}');

View File

@ -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',
})
);
});
});
});

View File

@ -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"

View File

@ -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));