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}