diff --git a/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.test.tsx b/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.test.tsx
index e92fbef3181..af079083213 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
import React from 'react';
import { createMockDatasource } from '../__mocks__/cloudMonitoringDatasource';
@@ -64,4 +64,17 @@ describe('MetricQueryEditor', () => {
const projectDropdown = await screen.findByLabelText('Project');
expect(projectDropdown).toBeInTheDocument();
});
+
+ it('preserves the aliasBy property when switching between Builder and MQL queries', async () => {
+ const query = createMockQuery({ aliasBy: 'AliasTest' });
+ query.queryType = QueryType.TIME_SERIES_QUERY;
+
+ render();
+ await waitFor(() => expect(screen.getByLabelText('Alias by').closest('input')!.value).toEqual('AliasTest'));
+
+ query.queryType = QueryType.TIME_SERIES_LIST;
+
+ render();
+ await waitFor(() => expect(screen.getByLabelText('Alias by').closest('input')!.value).toEqual('AliasTest'));
+ });
});
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx
index 6b8ba5375f3..ea3e20a3a79 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx
@@ -1,12 +1,13 @@
import React, { useCallback, useEffect } from 'react';
import { SelectableValue } from '@grafana/data';
-import { EditorRows } from '@grafana/experimental';
+import { EditorRows, Stack } from '@grafana/experimental';
import CloudMonitoringDatasource from '../datasource';
import { AlignmentTypes, CloudMonitoringQuery, QueryType, TimeSeriesList, TimeSeriesQuery } from '../types/query';
import { CustomMetaData } from '../types/types';
+import { AliasBy } from './AliasBy';
import { GraphPeriod } from './GraphPeriod';
import { MQLQueryEditor } from './MQLQueryEditor';
import { Project } from './Project';
@@ -68,6 +69,7 @@ function Editor({
datasource: query.datasource,
queryType: QueryType.TIME_SERIES_LIST,
timeSeriesList: defaultTimeSeriesList(datasource),
+ aliasBy: query.aliasBy,
});
}
if (query.queryType === QueryType.TIME_SERIES_QUERY && !query.timeSeriesQuery) {
@@ -76,6 +78,7 @@ function Editor({
datasource: query.datasource,
queryType: QueryType.TIME_SERIES_QUERY,
timeSeriesQuery: defaultTimeSeriesQuery(datasource),
+ aliasBy: query.aliasBy,
});
}
}, [onQueryChange, query, datasource]);
@@ -98,13 +101,22 @@ function Editor({
{query.queryType === QueryType.TIME_SERIES_QUERY && query.timeSeriesQuery && (
<>
- onChangeTimeSeriesQuery({ ...query.timeSeriesQuery!, projectName: projectName })}
- templateVariableOptions={variableOptionGroup.options}
- projectName={query.timeSeriesQuery.projectName!}
- />
+
+
+ onChangeTimeSeriesQuery({ ...query.timeSeriesQuery!, projectName: projectName })
+ }
+ templateVariableOptions={variableOptionGroup.options}
+ projectName={query.timeSeriesQuery.projectName!}
+ />
+ onQueryChange({ ...query, aliasBy })}
+ />
+
onChangeTimeSeriesQuery({ ...query.timeSeriesQuery!, query: q })}
onRunQuery={onRunQuery}