From 2aecfedacb5f35500c73f3f108d63fe75391728a Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Thu, 10 Aug 2023 20:03:26 +0300
Subject: [PATCH] [v10.0.x] Cloud Monitoring: Support AliasBy property in MQL
 mode (#73165)

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

(cherry picked from commit eeefa7dd2217cd0d14211afaaa940c8d43a8a910)

Co-authored-by: Alyssa Bull <58453566+alyssabull@users.noreply.github.com>
---
 .../components/MetricQueryEditor.test.tsx     | 15 +++++++++-
 .../components/MetricQueryEditor.tsx          | 28 +++++++++++++------
 2 files changed, 34 insertions(+), 9 deletions(-)

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 f40397cb19f..14549d8545e 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(<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'));
+  });
 });
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx
index 62970cf97f9..bca3233f684 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx
@@ -1,7 +1,7 @@
 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 {
@@ -13,6 +13,7 @@ import {
   TimeSeriesQuery,
 } from '../types';
 
+import { AliasBy } from './AliasBy';
 import { GraphPeriod } from './GraphPeriod';
 import { MQLQueryEditor } from './MQLQueryEditor';
 import { Project } from './Project';
@@ -75,6 +76,7 @@ function Editor({
         queryType: QueryType.TIME_SERIES_LIST,
         intervalMs: query.intervalMs,
         timeSeriesList: defaultTimeSeriesList(datasource),
+        aliasBy: query.aliasBy,
       });
     }
     if (query.queryType === QueryType.TIME_SERIES_QUERY && !query.timeSeriesQuery) {
@@ -84,6 +86,7 @@ function Editor({
         queryType: QueryType.TIME_SERIES_QUERY,
         intervalMs: query.intervalMs,
         timeSeriesQuery: defaultTimeSeriesQuery(datasource),
+        aliasBy: query.aliasBy,
       });
     }
   }, [onQueryChange, query, datasource]);
@@ -105,13 +108,22 @@ function Editor({
 
       {query.queryType === QueryType.TIME_SERIES_QUERY && query.timeSeriesQuery && (
         <>
-          <Project
-            refId={refId}
-            datasource={datasource}
-            onChange={(projectName) => onChangeTimeSeriesQuery({ ...query.timeSeriesQuery!, projectName: projectName })}
-            templateVariableOptions={variableOptionGroup.options}
-            projectName={query.timeSeriesQuery.projectName!}
-          />
+          <Stack gap={1} direction="row">
+            <Project
+              refId={refId}
+              datasource={datasource}
+              onChange={(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
             onChange={(q: string) => onChangeTimeSeriesQuery({ ...query.timeSeriesQuery!, query: q })}
             onRunQuery={onRunQuery}