IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Cloud Monitoring: Support AliasBy property in MQL mode (#73116)

Browse Source
This commit is contained in:
Alyssa Bull
2023-08-10 10:55:09 -06:00
committed by GitHub
parent 89c7116720
commit eeefa7dd22
2 changed files with 34 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.test.tsx
View File

@@ -1,4 +1,4 @@
import { render, screen } from '@testing-library/react'; import { render, screen, waitFor } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { createMockDatasource } from '../__mocks__/cloudMonitoringDatasource'; import { createMockDatasource } from '../__mocks__/cloudMonitoringDatasource';
@@ -64,4 +64,17 @@ describe('MetricQueryEditor', () => {
const projectDropdown = await screen.findByLabelText('Project'); const projectDropdown = await screen.findByLabelText('Project');
expect(projectDropdown).toBeInTheDocument(); 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(<MetricQueryEditor {...defaultProps} query={query} />);
await waitFor(() => expect(screen.getByLabelText('Alias by').closest('input')!.value).toEqual('AliasTest'));
query.queryType = QueryType.TIME_SERIES_LIST;
render(<MetricQueryEditor {...defaultProps} query={query} />);
await waitFor(() => expect(screen.getByLabelText('Alias by').closest('input')!.value).toEqual('AliasTest'));
});
}); });

28
public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx
View File

@@ -1,12 +1,13 @@
import React, { useCallback, useEffect } from 'react'; import React, { useCallback, useEffect } from 'react';
import { SelectableValue } from '@grafana/data'; import { SelectableValue } from '@grafana/data';
import { EditorRows } from '@grafana/experimental'; import { EditorRows, Stack } from '@grafana/experimental';
import CloudMonitoringDatasource from '../datasource'; import CloudMonitoringDatasource from '../datasource';
import { AlignmentTypes, CloudMonitoringQuery, QueryType, TimeSeriesList, TimeSeriesQuery } from '../types/query'; import { AlignmentTypes, CloudMonitoringQuery, QueryType, TimeSeriesList, TimeSeriesQuery } from '../types/query';
import { CustomMetaData } from '../types/types'; import { CustomMetaData } from '../types/types';
import { AliasBy } from './AliasBy';
import { GraphPeriod } from './GraphPeriod'; import { GraphPeriod } from './GraphPeriod';
import { MQLQueryEditor } from './MQLQueryEditor'; import { MQLQueryEditor } from './MQLQueryEditor';
import { Project } from './Project'; import { Project } from './Project';
@@ -68,6 +69,7 @@ function Editor({
datasource: query.datasource, datasource: query.datasource,
queryType: QueryType.TIME_SERIES_LIST, queryType: QueryType.TIME_SERIES_LIST,
timeSeriesList: defaultTimeSeriesList(datasource), timeSeriesList: defaultTimeSeriesList(datasource),
aliasBy: query.aliasBy,
}); });
} }
if (query.queryType === QueryType.TIME_SERIES_QUERY && !query.timeSeriesQuery) { if (query.queryType === QueryType.TIME_SERIES_QUERY && !query.timeSeriesQuery) {
@@ -76,6 +78,7 @@ function Editor({
datasource: query.datasource, datasource: query.datasource,
queryType: QueryType.TIME_SERIES_QUERY, queryType: QueryType.TIME_SERIES_QUERY,
timeSeriesQuery: defaultTimeSeriesQuery(datasource), timeSeriesQuery: defaultTimeSeriesQuery(datasource),
aliasBy: query.aliasBy,
}); });
} }
}, [onQueryChange, query, datasource]); }, [onQueryChange, query, datasource]);
@@ -98,13 +101,22 @@ function Editor({
{query.queryType === QueryType.TIME_SERIES_QUERY && query.timeSeriesQuery && ( {query.queryType === QueryType.TIME_SERIES_QUERY && query.timeSeriesQuery && (
<> <>
<Project <Stack gap={1} direction="row">
refId={refId} <Project
datasource={datasource} refId={refId}
onChange={(projectName) => onChangeTimeSeriesQuery({ ...query.timeSeriesQuery!, projectName: projectName })} datasource={datasource}
templateVariableOptions={variableOptionGroup.options} onChange={(projectName) =>
projectName={query.timeSeriesQuery.projectName!} onChangeTimeSeriesQuery({ ...query.timeSeriesQuery!, projectName: projectName })
/> }
templateVariableOptions={variableOptionGroup.options}
projectName={query.timeSeriesQuery.projectName!}
/>
<AliasBy
refId={refId}
value={query.aliasBy}
onChange={(aliasBy: string) => onQueryChange({ ...query, aliasBy })}
/>
</Stack>
<MQLQueryEditor <MQLQueryEditor
onChange={(q: string) => onChangeTimeSeriesQuery({ ...query.timeSeriesQuery!, query: q })} onChange={(q: string) => onChangeTimeSeriesQuery({ ...query.timeSeriesQuery!, query: q })}
onRunQuery={onRunQuery} onRunQuery={onRunQuery}