diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/__mocks__/query.ts b/public/app/plugins/datasource/grafana-azure-monitor-datasource/__mocks__/query.ts index 16b9aa555b9..ff72138ff38 100644 --- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/__mocks__/query.ts +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/__mocks__/query.ts @@ -1,42 +1,42 @@ import { AzureMonitorQuery, AzureQueryType } from '../types'; -const azureMonitorQuery: AzureMonitorQuery = { - appInsights: undefined, // The actualy shape of this at runtime disagrees with the ts interface +export default function createMockQuery(): AzureMonitorQuery { + return { + appInsights: undefined, // The actualy shape of this at runtime disagrees with the ts interface - azureLogAnalytics: { - query: - '//change this example to create your own time series query\n //the table to query (e.g. Usage, Heartbeat, Perf)\n| where $__timeFilter(TimeGenerated) //this is a macro used to show the full chart’s time range, choose the datetime column here\n| summarize count() by , bin(TimeGenerated, $__interval) //change “group by column” to a column in your table, such as “Computer”. The $__interval macro is used to auto-select the time grain. Can also use 1h, 5m etc.\n| order by TimeGenerated asc', - resultFormat: 'time_series', - workspace: 'e3fe4fde-ad5e-4d60-9974-e2f3562ffdf2', - }, + azureLogAnalytics: { + query: + '//change this example to create your own time series query\n
//the table to query (e.g. Usage, Heartbeat, Perf)\n| where $__timeFilter(TimeGenerated) //this is a macro used to show the full chart’s time range, choose the datetime column here\n| summarize count() by , bin(TimeGenerated, $__interval) //change “group by column” to a column in your table, such as “Computer”. The $__interval macro is used to auto-select the time grain. Can also use 1h, 5m etc.\n| order by TimeGenerated asc', + resultFormat: 'time_series', + workspace: 'e3fe4fde-ad5e-4d60-9974-e2f3562ffdf2', + }, - azureMonitor: { - // aggOptions: [], - aggregation: 'Average', - allowedTimeGrainsMs: [60000, 300000, 900000, 1800000, 3600000, 21600000, 43200000, 86400000], - // dimensionFilter: '*', - dimensionFilters: [], - metricDefinition: 'Microsoft.Compute/virtualMachines', - metricName: 'Metric A', - metricNamespace: 'Microsoft.Compute/virtualMachines', - resourceGroup: 'grafanastaging', - resourceName: 'grafana', - timeGrain: 'auto', - alias: '', - // timeGrains: [], - top: '10', - }, + azureMonitor: { + // aggOptions: [], + aggregation: 'Average', + allowedTimeGrainsMs: [60000, 300000, 900000, 1800000, 3600000, 21600000, 43200000, 86400000], + // dimensionFilter: '*', + dimensionFilters: [], + metricDefinition: 'Microsoft.Compute/virtualMachines', + metricName: 'Metric A', + metricNamespace: 'Microsoft.Compute/virtualMachines', + resourceGroup: 'grafanastaging', + resourceName: 'grafana', + timeGrain: 'auto', + alias: '', + // timeGrains: [], + top: '10', + }, - insightsAnalytics: { - query: '', - resultFormat: 'time_series', - }, + insightsAnalytics: { + query: '', + resultFormat: 'time_series', + }, - queryType: AzureQueryType.AzureMonitor, - refId: 'A', - subscription: 'abc-123', + queryType: AzureQueryType.AzureMonitor, + refId: 'A', + subscription: 'abc-123', - format: 'dunno lol', // unsure what this value should be. It's not there at runtime, but it's in the ts interface -}; - -export default azureMonitorQuery; + format: 'dunno lol', // unsure what this value should be. It's not there at runtime, but it's in the ts interface + }; +} diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/azure_monitor/azure_monitor_datasource.ts b/public/app/plugins/datasource/grafana-azure-monitor-datasource/azure_monitor/azure_monitor_datasource.ts index 67504a5e05e..45550626f45 100644 --- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/azure_monitor/azure_monitor_datasource.ts +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/azure_monitor/azure_monitor_datasource.ts @@ -42,11 +42,15 @@ export default class AzureMonitorDatasource extends DataSourceWithBackend = ({ const [metricNames, setMetricNames] = useState([]); useEffect(() => { - if ( - !( - subscriptionId && - query.azureMonitor.resourceGroup && - query.azureMonitor.metricDefinition && - query.azureMonitor.resourceName && - query.azureMonitor.metricNamespace - ) - ) { + const { resourceGroup, metricDefinition, resourceName, metricNamespace } = query.azureMonitor; + + if (!(subscriptionId && resourceGroup && metricDefinition && resourceName && metricNamespace)) { metricNames.length > 0 && setMetricNames([]); return; } datasource - .getMetricNames( - subscriptionId, - query.azureMonitor.resourceGroup, - query.azureMonitor.metricDefinition, - query.azureMonitor.resourceName, - query.azureMonitor.metricNamespace - ) - .then((results) => setMetricNames(results.map(toOption))) + .getMetricNames(subscriptionId, resourceGroup, metricDefinition, resourceName, metricNamespace) + .then((results) => { + setMetricNames(results.map(toOption)); + }) .catch((err) => { // TODO: handle error console.error(err); diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNamespaceField.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNamespaceField.tsx index ab5666ab52c..a754a27b6b2 100644 --- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNamespaceField.tsx +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNamespaceField.tsx @@ -16,19 +16,27 @@ const MetricNamespaceField: React.FC = ({ const [metricNamespaces, setMetricNamespaces] = useState([]); useEffect(() => { - if (!(subscriptionId && query.azureMonitor.resourceGroup, query.azureMonitor.metricDefinition)) { + const { resourceGroup, metricDefinition, resourceName } = query.azureMonitor; + + if (!(subscriptionId && resourceGroup && metricDefinition && resourceName)) { metricNamespaces.length > 0 && setMetricNamespaces([]); return; } datasource - .getMetricNamespaces( - subscriptionId, - query.azureMonitor.resourceGroup, - query.azureMonitor.metricDefinition, - query.azureMonitor.resourceName - ) - .then((results) => setMetricNamespaces(results.map(toOption))) + .getMetricNamespaces(subscriptionId, resourceGroup, metricDefinition, resourceName) + .then((results) => { + // if (results.length === 1) { + // onQueryChange({ + // ...query, + // azureMonitor: { + // ...query.azureMonitor, + // metricNamespace: results[0].value, + // }, + // }); + // } + setMetricNamespaces(results.map(toOption)); + }) .catch((err) => { // TODO: handle error console.error(err); @@ -52,7 +60,7 @@ const MetricNamespaceField: React.FC = ({ ...query.azureMonitor, metricNamespace: change.value, - metricName: 'select', + metricName: undefined, dimensionFilters: [], }, }); diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricsQueryEditor.test.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricsQueryEditor.test.tsx index f8e64fc6fc2..3e0f3782ff6 100644 --- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricsQueryEditor.test.tsx +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricsQueryEditor.test.tsx @@ -4,7 +4,7 @@ import selectEvent from 'react-select-event'; import MetricsQueryEditor from './MetricsQueryEditor'; -import mockQuery from '../../__mocks__/query'; +import createMockQuery from '../../__mocks__/query'; import createMockDatasource from '../../__mocks__/datasource'; const variableOptionGroup = { @@ -18,7 +18,7 @@ describe('Azure Monitor QueryEditor', () => { render( {}} @@ -30,6 +30,8 @@ describe('Azure Monitor QueryEditor', () => { it('should change the subscription ID when selected', async () => { const mockDatasource = createMockDatasource(); const onChange = jest.fn(); + const mockQuery = createMockQuery(); + mockQuery.azureMonitor.metricName = undefined; mockDatasource.azureMonitorDatasource.getSubscriptions = jest.fn().mockResolvedValueOnce([ { value: 'abc-123', @@ -59,10 +61,11 @@ describe('Azure Monitor QueryEditor', () => { subscription: 'abc-456', azureMonitor: { ...mockQuery.azureMonitor, - resourceGroup: 'select', - metricDefinition: 'select', - resourceName: 'select', - metricName: 'select', + resourceGroup: undefined, + metricDefinition: undefined, + metricNamespace: undefined, + resourceName: undefined, + metricName: undefined, aggregation: '', timeGrain: '', dimensionFilters: [], @@ -73,6 +76,7 @@ describe('Azure Monitor QueryEditor', () => { it('should change the metric name when selected', async () => { const mockDatasource = createMockDatasource(); const onChange = jest.fn(); + const mockQuery = createMockQuery(); mockDatasource.getMetricNames = jest.fn().mockResolvedValueOnce([ { value: 'metric-a', @@ -83,11 +87,10 @@ describe('Azure Monitor QueryEditor', () => { text: 'Metric B', }, ]); - render( = ({ const [namespaces, setNamespaces] = useState([]); useEffect(() => { - if (!(subscriptionId && query.azureMonitor.resourceGroup)) { + const { resourceGroup } = query.azureMonitor; + + if (!(subscriptionId && resourceGroup)) { namespaces.length && setNamespaces([]); return; } datasource - .getMetricDefinitions(subscriptionId, query.azureMonitor.resourceGroup) + .getMetricDefinitions(subscriptionId, resourceGroup) .then((results) => setNamespaces(results.map(toOption))) .catch((err) => { // TODO: handle error @@ -41,9 +43,9 @@ const NamespaceField: React.FC = ({ azureMonitor: { ...query.azureMonitor, metricDefinition: change.value, - resourceName: 'select', - metricNamespace: 'select', - metricName: 'select', + resourceName: undefined, + metricNamespace: undefined, + metricName: undefined, aggregation: '', timeGrain: '', dimensionFilters: [], diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceGroupsField.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceGroupsField.tsx index 34e971869ed..c6a5025a8bd 100644 --- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceGroupsField.tsx +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceGroupsField.tsx @@ -41,10 +41,10 @@ const ResourceGroupsField: React.FC = ({ azureMonitor: { ...query.azureMonitor, resourceGroup: change.value, - metricDefinition: 'select', - resourceName: 'select', - metricNamespace: 'select', - metricName: 'select', + metricDefinition: undefined, + resourceName: undefined, + metricNamespace: undefined, + metricName: undefined, aggregation: '', timeGrain: '', dimensionFilters: [], diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceNameField.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceNameField.tsx index 020697f96f4..4faf36678c0 100644 --- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceNameField.tsx +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceNameField.tsx @@ -16,13 +16,15 @@ const ResourceNameField: React.FC = ({ const [resourceNames, setResourceNames] = useState([]); useEffect(() => { - if (!(subscriptionId && query.azureMonitor.resourceGroup && query.azureMonitor.metricDefinition)) { + const { resourceGroup, metricDefinition } = query.azureMonitor; + + if (!(subscriptionId && resourceGroup && metricDefinition)) { resourceNames.length > 0 && setResourceNames([]); return; } datasource - .getResourceNames(subscriptionId, query.azureMonitor.resourceGroup, query.azureMonitor.metricDefinition) + .getResourceNames(subscriptionId, resourceGroup, metricDefinition) .then((results) => setResourceNames(results.map(toOption))) .catch((err) => { // TODO: handle error @@ -42,8 +44,8 @@ const ResourceNameField: React.FC = ({ ...query.azureMonitor, resourceName: change.value, - metricNamespace: 'select', - metricName: 'select', + metricNamespace: undefined, + metricName: undefined, aggregation: '', timeGrain: '', dimensionFilters: [], @@ -55,11 +57,12 @@ const ResourceNameField: React.FC = ({ const options = useMemo(() => [...resourceNames, variableOptionGroup], [resourceNames, variableOptionGroup]); + const selectedResourceNameValue = findOption(resourceNames, query.azureMonitor.resourceName); return (