From 165efcd9cc50870f63618d539a696603816dd94c Mon Sep 17 00:00:00 2001
From: Adam Simpson <adam@adamsimpson.net>
Date: Thu, 28 Jul 2022 13:47:01 -0400
Subject: [PATCH] CloudMonitor: Consolidate editor rows (#52675)

* consolidate project, metric, and service

* CloudMonitor: make AlignmentPeriodLabel a tooltip

alignmentPeriodLabel now returns a string instead of component. This is
because as a <label> it would cause wrapping issues when the screen size
would change. It also isn't essential information _unless_ the user is
using a template variable for the Alignment period.

* refactor: remove any hard-coded widths for auto

* chore: use newly moved experimental comps in UI
---
 .../components/Experimental/AliasBy.tsx       | 10 +--
 .../Experimental/Alignment.test.tsx           | 19 -----
 .../components/Experimental/Alignment.tsx     | 59 +++++++--------
 .../Experimental/AlignmentFunction.tsx        |  2 -
 .../Experimental/AlignmentPeriodLabel.tsx     | 28 -------
 .../components/Experimental/GroupBy.tsx       | 52 +++++++------
 .../Experimental/MetricQueryEditor.tsx        | 20 -----
 .../components/Experimental/Metrics.test.tsx  | 17 ++++-
 .../components/Experimental/Metrics.tsx       | 28 ++++++-
 .../components/Experimental/PeriodSelect.tsx  |  3 +-
 .../components/Experimental/Preprocessor.tsx  | 32 ++++----
 .../components/Experimental/Project.tsx       | 28 ++++---
 .../components/Experimental/SLO.tsx           | 34 ++++-----
 .../Experimental/SLOQueryEditor.tsx           | 74 +++++++++----------
 .../components/Experimental/Selector.tsx      | 36 +++++----
 .../components/Experimental/Service.tsx       | 30 ++++----
 .../Experimental/VisualMetricQueryEditor.tsx  | 47 +++++++-----
 .../cloud-monitoring/functions.test.ts        | 10 +++
 .../datasource/cloud-monitoring/functions.ts  | 15 +++-
 19 files changed, 264 insertions(+), 280 deletions(-)
 delete mode 100644 public/app/plugins/datasource/cloud-monitoring/components/Experimental/AlignmentPeriodLabel.tsx

diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/AliasBy.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/AliasBy.tsx
index b4abe66e4b6..294c5c92f6f 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/AliasBy.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/AliasBy.tsx
@@ -1,7 +1,7 @@
 import { debounce } from 'lodash';
 import React, { FunctionComponent, useState } from 'react';
 
-import { EditorField, EditorRow, Input } from '@grafana/ui';
+import { EditorField, Input } from '@grafana/ui';
 
 import { SELECT_WIDTH } from '../../constants';
 
@@ -22,10 +22,8 @@ export const AliasBy: FunctionComponent<Props> = ({ refId, value = '', onChange
   };
 
   return (
-    <EditorRow>
-      <EditorField label="Alias by">
-        <Input id={`${refId}-alias-by`} width={SELECT_WIDTH} value={alias} onChange={onChange} />
-      </EditorField>
-    </EditorRow>
+    <EditorField label="Alias by">
+      <Input id={`${refId}-alias-by`} width={SELECT_WIDTH} value={alias} onChange={onChange} />
+    </EditorField>
   );
 };
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Alignment.test.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Alignment.test.tsx
index a81039f9b03..a3fa46189b4 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Alignment.test.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Alignment.test.tsx
@@ -80,23 +80,4 @@ describe('Alignment', () => {
     await userEvent.click(screen.getByText('1m'));
     expect(onChange).toBeCalledWith(expect.objectContaining({ alignmentPeriod: '+60s' }));
   });
-
-  it('renders period label if alignment period and per series aligner is set', () => {
-    const datasource = createMockDatasource();
-    const query = createMockMetricQuery();
-    const onChange = jest.fn();
-
-    render(
-      <Alignment
-        refId="refId"
-        customMetaData={{ perSeriesAligner: 'ALIGN_DELTA', alignmentPeriod: '10' }}
-        datasource={datasource}
-        query={query}
-        onChange={onChange}
-        templateVariableOptions={[]}
-      />
-    );
-
-    expect(screen.getByText('10s interval (delta)'));
-  });
 });
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Alignment.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Alignment.tsx
index 49091c626f8..a25371ee94e 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Alignment.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Alignment.tsx
@@ -1,14 +1,14 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorRow, EditorFieldGroup, EditorField, Stack } from '@grafana/ui';
+import { EditorField, EditorFieldGroup } from '@grafana/ui';
 
-import { ALIGNMENT_PERIODS, SELECT_WIDTH } from '../../constants';
+import { ALIGNMENT_PERIODS } from '../../constants';
 import CloudMonitoringDatasource from '../../datasource';
+import { alignmentPeriodLabel } from '../../functions';
 import { CustomMetaData, MetricQuery, SLOQuery } from '../../types';
 
 import { AlignmentFunction } from './AlignmentFunction';
-import { AlignmentPeriodLabel } from './AlignmentPeriodLabel';
 import { PeriodSelect } from './PeriodSelect';
 
 export interface Props {
@@ -28,34 +28,29 @@ export const Alignment: FC<Props> = ({
   customMetaData,
   datasource,
 }) => {
+  const alignmentLabel = useMemo(() => alignmentPeriodLabel(customMetaData, datasource), [customMetaData, datasource]);
   return (
-    <EditorRow>
-      <EditorFieldGroup>
-        <EditorField
-          label="Alignment function"
-          tooltip="The process of alignment consists of collecting all data points received in a fixed length of time, applying a function to combine those data points, and assigning a timestamp to the result."
-        >
-          <AlignmentFunction
-            inputId={`${refId}-alignment-function`}
-            templateVariableOptions={templateVariableOptions}
-            query={query}
-            onChange={onChange}
-          />
-        </EditorField>
-        <EditorField label="Alignment period">
-          <PeriodSelect
-            inputId={`${refId}-alignment-period`}
-            selectWidth={SELECT_WIDTH}
-            templateVariableOptions={templateVariableOptions}
-            current={query.alignmentPeriod}
-            onChange={(period) => onChange({ ...query, alignmentPeriod: period })}
-            aligmentPeriods={ALIGNMENT_PERIODS}
-          />
-        </EditorField>
-        <Stack alignItems="flex-end">
-          <AlignmentPeriodLabel datasource={datasource} customMetaData={customMetaData} />
-        </Stack>
-      </EditorFieldGroup>
-    </EditorRow>
+    <EditorFieldGroup>
+      <EditorField
+        label="Alignment function"
+        tooltip="The process of alignment consists of collecting all data points received in a fixed length of time, applying a function to combine those data points, and assigning a timestamp to the result."
+      >
+        <AlignmentFunction
+          inputId={`${refId}-alignment-function`}
+          templateVariableOptions={templateVariableOptions}
+          query={query}
+          onChange={onChange}
+        />
+      </EditorField>
+      <EditorField label="Alignment period" tooltip={alignmentLabel}>
+        <PeriodSelect
+          inputId={`${refId}-alignment-period`}
+          templateVariableOptions={templateVariableOptions}
+          current={query.alignmentPeriod}
+          onChange={(period) => onChange({ ...query, alignmentPeriod: period })}
+          aligmentPeriods={ALIGNMENT_PERIODS}
+        />
+      </EditorField>
+    </EditorFieldGroup>
   );
 };
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/AlignmentFunction.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/AlignmentFunction.tsx
index 49025f84028..bcc1a250f0c 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/AlignmentFunction.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/AlignmentFunction.tsx
@@ -3,7 +3,6 @@ import React, { FC, useMemo } from 'react';
 import { SelectableValue } from '@grafana/data';
 import { Select } from '@grafana/ui';
 
-import { SELECT_WIDTH } from '../../constants';
 import { getAlignmentPickerData } from '../../functions';
 import { MetricQuery } from '../../types';
 
@@ -23,7 +22,6 @@ export const AlignmentFunction: FC<Props> = ({ inputId, query, templateVariableO
 
   return (
     <Select
-      width={SELECT_WIDTH}
       onChange={({ value }) => onChange({ ...query, perSeriesAligner: value! })}
       value={[...alignOptions, ...templateVariableOptions].find((s) => s.value === perSeriesAligner)}
       options={[
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/AlignmentPeriodLabel.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/AlignmentPeriodLabel.tsx
deleted file mode 100644
index d3377e452ae..00000000000
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/AlignmentPeriodLabel.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { FC, useMemo } from 'react';
-
-import { rangeUtil } from '@grafana/data';
-
-import { ALIGNMENTS } from '../../constants';
-import CloudMonitoringDatasource from '../../datasource';
-import { CustomMetaData } from '../../types';
-
-export interface Props {
-  customMetaData: CustomMetaData;
-  datasource: CloudMonitoringDatasource;
-}
-
-export const AlignmentPeriodLabel: FC<Props> = ({ customMetaData, datasource }) => {
-  const { perSeriesAligner, alignmentPeriod } = customMetaData;
-  const formatAlignmentText = useMemo(() => {
-    if (!alignmentPeriod || !perSeriesAligner) {
-      return '';
-    }
-
-    const alignment = ALIGNMENTS.find((ap) => ap.value === datasource.templateSrv.replace(perSeriesAligner));
-    const seconds = parseInt(alignmentPeriod, 10);
-    const hms = rangeUtil.secondsToHms(seconds);
-    return `${hms} interval (${alignment?.text ?? ''})`;
-  }, [datasource, perSeriesAligner, alignmentPeriod]);
-
-  return <label>{formatAlignmentText}</label>;
-};
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/GroupBy.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/GroupBy.tsx
index d610fac1e8b..e9471de6444 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/GroupBy.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/GroupBy.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorFieldGroup, EditorRow, MultiSelect } from '@grafana/ui';
+import { EditorField, EditorFieldGroup, MultiSelect } from '@grafana/ui';
 
 import { SYSTEM_LABELS } from '../../constants';
 import { labelsToGroupedOptions } from '../../functions';
@@ -32,32 +32,30 @@ export const GroupBy: FunctionComponent<Props> = ({
   );
 
   return (
-    <EditorRow>
-      <EditorFieldGroup>
-        <EditorField
-          label="Group by"
-          tooltip="You can reduce the amount of data returned for a metric by combining different time series. To combine multiple time series, you can specify a grouping and a function. Grouping is done on the basis of labels. The grouping function is used to combine the time series in the group into a single time series."
-        >
-          <MultiSelect
-            inputId={`${refId}-group-by`}
-            width="auto"
-            placeholder="Choose label"
-            options={options}
-            value={query.groupBys ?? []}
-            onChange={(options) => {
-              onChange({ ...query, groupBys: options.map((o) => o.value!) });
-            }}
-          />
-        </EditorField>
-        <Aggregation
-          metricDescriptor={metricDescriptor}
-          templateVariableOptions={variableOptionGroup.options}
-          crossSeriesReducer={query.crossSeriesReducer}
-          groupBys={query.groupBys ?? []}
-          onChange={(crossSeriesReducer) => onChange({ ...query, crossSeriesReducer })}
-          refId={refId}
+    <EditorFieldGroup>
+      <EditorField
+        label="Group by"
+        tooltip="You can reduce the amount of data returned for a metric by combining different time series. To combine multiple time series, you can specify a grouping and a function. Grouping is done on the basis of labels. The grouping function is used to combine the time series in the group into a single time series."
+      >
+        <MultiSelect
+          inputId={`${refId}-group-by`}
+          width="auto"
+          placeholder="Choose label"
+          options={options}
+          value={query.groupBys ?? []}
+          onChange={(options) => {
+            onChange({ ...query, groupBys: options.map((o) => o.value!) });
+          }}
         />
-      </EditorFieldGroup>
-    </EditorRow>
+      </EditorField>
+      <Aggregation
+        metricDescriptor={metricDescriptor}
+        templateVariableOptions={variableOptionGroup.options}
+        crossSeriesReducer={query.crossSeriesReducer}
+        groupBys={query.groupBys ?? []}
+        onChange={(crossSeriesReducer) => onChange({ ...query, crossSeriesReducer })}
+        refId={refId}
+      />
+    </EditorFieldGroup>
   );
 };
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/MetricQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/MetricQueryEditor.tsx
index cff44cb3d33..4db17479d9e 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/MetricQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/MetricQueryEditor.tsx
@@ -18,9 +18,7 @@ import {
 } from '../../types';
 
 import { MQLQueryEditor } from './../MQLQueryEditor';
-import { AliasBy } from './AliasBy';
 import { GraphPeriod } from './GraphPeriod';
-import { Project } from './Project';
 import { VisualMetricQueryEditor } from './VisualMetricQueryEditor';
 
 export interface Props {
@@ -107,16 +105,6 @@ function Editor({
 
   return (
     <EditorRows>
-      <Project
-        refId={refId}
-        templateVariableOptions={variableOptionGroup.options}
-        projectName={projectName}
-        datasource={datasource}
-        onChange={(projectName) => {
-          onChange({ ...query, projectName });
-        }}
-      />
-
       {editorMode === EditorMode.Visual && (
         <VisualMetricQueryEditor
           refId={refId}
@@ -145,14 +133,6 @@ function Editor({
           />
         </>
       )}
-
-      <AliasBy
-        refId={refId}
-        value={query.aliasBy}
-        onChange={(aliasBy) => {
-          onChange({ ...query, aliasBy });
-        }}
-      />
     </EditorRows>
   );
 }
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Metrics.test.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Metrics.test.tsx
index a53d9670fb5..93cdd58316b 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Metrics.test.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Metrics.test.tsx
@@ -4,12 +4,14 @@ import { openMenu, select } from 'react-select-event';
 
 import { createMockDatasource } from '../../__mocks__/cloudMonitoringDatasource';
 import { createMockMetricDescriptor } from '../../__mocks__/cloudMonitoringMetricDescriptor';
+import { createMockMetricQuery } from '../../__mocks__/cloudMonitoringQuery';
 
 import { Metrics } from './Metrics';
 
 describe('Metrics', () => {
   it('renders metrics fields', async () => {
     const onChange = jest.fn();
+    const query = createMockMetricQuery();
     const datasource = createMockDatasource();
 
     render(
@@ -20,6 +22,8 @@ describe('Metrics', () => {
         templateVariableOptions={[]}
         datasource={datasource}
         onChange={onChange}
+        onProjectChange={jest.fn()}
+        query={query}
       >
         {() => <div />}
       </Metrics>
@@ -31,6 +35,7 @@ describe('Metrics', () => {
 
   it('can select a service', async () => {
     const onChange = jest.fn();
+    const query = createMockMetricQuery();
     const datasource = createMockDatasource({
       getMetricTypes: jest.fn().mockResolvedValue([createMockMetricDescriptor()]),
     });
@@ -43,6 +48,8 @@ describe('Metrics', () => {
         templateVariableOptions={[]}
         datasource={datasource}
         onChange={onChange}
+        onProjectChange={jest.fn()}
+        query={query}
       >
         {() => <div />}
       </Metrics>
@@ -56,6 +63,7 @@ describe('Metrics', () => {
 
   it('can select a metric name', async () => {
     const onChange = jest.fn();
+    const query = createMockMetricQuery();
     const datasource = createMockDatasource({
       getMetricTypes: jest.fn().mockResolvedValue([createMockMetricDescriptor()]),
     });
@@ -68,6 +76,8 @@ describe('Metrics', () => {
         templateVariableOptions={[]}
         datasource={datasource}
         onChange={onChange}
+        onProjectChange={jest.fn()}
+        query={query}
       >
         {() => <div />}
       </Metrics>
@@ -81,6 +91,7 @@ describe('Metrics', () => {
 
   it('should render available metric options according to the selected service', async () => {
     const onChange = jest.fn();
+    const query = createMockMetricQuery();
     const datasource = createMockDatasource({
       getMetricTypes: jest.fn().mockResolvedValue([
         createMockMetricDescriptor({
@@ -115,6 +126,8 @@ describe('Metrics', () => {
         templateVariableOptions={[]}
         datasource={datasource}
         onChange={onChange}
+        onProjectChange={jest.fn()}
+        query={query}
       >
         {() => <div />}
       </Metrics>
@@ -167,6 +180,7 @@ describe('Metrics', () => {
         }),
       ]),
     });
+    const query = createMockMetricQuery();
 
     render(
       <Metrics
@@ -176,11 +190,12 @@ describe('Metrics', () => {
         templateVariableOptions={[]}
         datasource={datasource}
         onChange={onChange}
+        onProjectChange={jest.fn()}
+        query={query}
       >
         {() => <div />}
       </Metrics>
     );
-
     const service = await screen.findByLabelText('Service');
     await openMenu(service);
     expect(screen.getAllByLabelText('Select option').length).toEqual(2);
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Metrics.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Metrics.tsx
index 287a5bc30b6..4b31d5ba864 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Metrics.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Metrics.tsx
@@ -6,7 +6,9 @@ import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { EditorField, EditorFieldGroup, EditorRow, getSelectStyles, Select, useStyles2, useTheme2 } from '@grafana/ui';
 
 import CloudMonitoringDatasource from '../../datasource';
-import { MetricDescriptor } from '../../types';
+import { MetricDescriptor, MetricQuery } from '../../types';
+
+import { Project } from './Project';
 
 export interface Props {
   refId: string;
@@ -15,7 +17,9 @@ export interface Props {
   datasource: CloudMonitoringDatasource;
   projectName: string;
   metricType: string;
+  query: MetricQuery;
   children: (metricDescriptor?: MetricDescriptor) => JSX.Element;
+  onProjectChange: (query: MetricQuery) => void;
 }
 
 export function Metrics(props: Props) {
@@ -30,7 +34,17 @@ export function Metrics(props: Props) {
 
   const customStyle = useStyles2(getStyles);
 
-  const { metricType, templateVariableOptions, projectName, datasource, onChange, children } = props;
+  const {
+    onProjectChange,
+    query,
+    refId,
+    metricType,
+    templateVariableOptions,
+    projectName,
+    datasource,
+    onChange,
+    children,
+  } = props;
   const { templateSrv } = datasource;
 
   const getSelectedMetricDescriptor = useCallback(
@@ -121,6 +135,16 @@ export function Metrics(props: Props) {
     <>
       <EditorRow>
         <EditorFieldGroup>
+          <Project
+            refId={refId}
+            templateVariableOptions={templateVariableOptions}
+            projectName={projectName}
+            datasource={datasource}
+            onChange={(projectName) => {
+              onProjectChange({ ...query, projectName });
+            }}
+          />
+
           <EditorField label="Service" width="auto">
             <Select
               width="auto"
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/PeriodSelect.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/PeriodSelect.tsx
index b96b678df5d..ce388b98cb4 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/PeriodSelect.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/PeriodSelect.tsx
@@ -21,7 +21,6 @@ export function PeriodSelect({
   templateVariableOptions,
   onChange,
   current,
-  selectWidth,
   disabled,
   aligmentPeriods,
 }: Props) {
@@ -37,7 +36,7 @@ export function PeriodSelect({
 
   return (
     <Select
-      width={selectWidth}
+      width="auto"
       onChange={({ value }) => onChange(value!)}
       value={[...options, ...templateVariableOptions].find((s) => s.value === current)}
       options={[
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Preprocessor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Preprocessor.tsx
index 9f968830395..590d7c1cb89 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Preprocessor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Preprocessor.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorRow, RadioButtonGroup } from '@grafana/ui';
+import { EditorField, RadioButtonGroup } from '@grafana/ui';
 
 import { getAlignmentPickerData } from '../../functions';
 import { MetricDescriptor, MetricKind, MetricQuery, PreprocessorType, ValueTypes } from '../../types';
@@ -17,22 +17,20 @@ export interface Props {
 export const Preprocessor: FunctionComponent<Props> = ({ query, metricDescriptor, onChange }) => {
   const options = useOptions(metricDescriptor);
   return (
-    <EditorRow>
-      <EditorField
-        label="Pre-processing"
-        tooltip="Preprocessing options are displayed when the selected metric has a metric kind of delta or cumulative. The specific options available are determined by the metic's value type. If you select 'Rate', data points are aligned and converted to a rate per time series. If you select 'Delta', data points are aligned by their delta (difference) per time series"
-      >
-        <RadioButtonGroup
-          onChange={(value: PreprocessorType) => {
-            const { valueType, metricKind, perSeriesAligner: psa } = query;
-            const { perSeriesAligner } = getAlignmentPickerData(valueType, metricKind, psa, value);
-            onChange({ ...query, preprocessor: value, perSeriesAligner });
-          }}
-          value={query.preprocessor ?? PreprocessorType.None}
-          options={options}
-        />
-      </EditorField>
-    </EditorRow>
+    <EditorField
+      label="Pre-processing"
+      tooltip="Preprocessing options are displayed when the selected metric has a metric kind of delta or cumulative. The specific options available are determined by the metic's value type. If you select 'Rate', data points are aligned and converted to a rate per time series. If you select 'Delta', data points are aligned by their delta (difference) per time series"
+    >
+      <RadioButtonGroup
+        onChange={(value: PreprocessorType) => {
+          const { valueType, metricKind, perSeriesAligner: psa } = query;
+          const { perSeriesAligner } = getAlignmentPickerData(valueType, metricKind, psa, value);
+          onChange({ ...query, preprocessor: value, perSeriesAligner });
+        }}
+        value={query.preprocessor ?? PreprocessorType.None}
+        options={options}
+      />
+    </EditorField>
   );
 };
 
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Project.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Project.tsx
index 4a92219497a..9a82c54b295 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Project.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Project.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorRow, Select } from '@grafana/ui';
+import { EditorField, Select } from '@grafana/ui';
 
 import CloudMonitoringDatasource from '../../datasource';
 
@@ -32,19 +32,17 @@ export function Project({ refId, projectName, datasource, onChange, templateVari
   );
 
   return (
-    <EditorRow>
-      <EditorField label="Project">
-        <Select
-          width="auto"
-          allowCustomValue
-          formatCreateLabel={(v) => `Use project: ${v}`}
-          onChange={({ value }) => onChange(value!)}
-          options={projectsWithTemplateVariables}
-          value={{ value: projectName, label: projectName }}
-          placeholder="Select Project"
-          inputId={`${refId}-project`}
-        />
-      </EditorField>
-    </EditorRow>
+    <EditorField label="Project">
+      <Select
+        width="auto"
+        allowCustomValue
+        formatCreateLabel={(v) => `Use project: ${v}`}
+        onChange={({ value }) => onChange(value!)}
+        options={projectsWithTemplateVariables}
+        value={{ value: projectName, label: projectName }}
+        placeholder="Select Project"
+        inputId={`${refId}-project`}
+      />
+    </EditorField>
   );
 }
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx
index f25af420afe..71561804469 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorRow, Select } from '@grafana/ui';
+import { Select, EditorField } from '@grafana/ui';
 
 import CloudMonitoringDatasource from '../../datasource';
 import { SLOQuery } from '../../types';
@@ -35,22 +35,20 @@ export const SLO: React.FC<Props> = ({ refId, query, templateVariableOptions, on
   }, [datasource, projectName, serviceId, templateVariableOptions]);
 
   return (
-    <EditorRow>
-      <EditorField label="SLO">
-        <Select
-          inputId={`${refId}-slo`}
-          width="auto"
-          allowCustomValue
-          value={query?.sloId && { value: query?.sloId, label: query?.sloName || query?.sloId }}
-          placeholder="Select SLO"
-          options={slos}
-          onChange={async ({ value: sloId = '', label: sloName = '' }) => {
-            const slos = await datasource.getServiceLevelObjectives(projectName, serviceId);
-            const slo = slos.find(({ value }) => value === datasource.templateSrv.replace(sloId));
-            onChange({ ...query, sloId, sloName, goal: slo?.goal });
-          }}
-        />
-      </EditorField>
-    </EditorRow>
+    <EditorField label="SLO">
+      <Select
+        inputId={`${refId}-slo`}
+        width="auto"
+        allowCustomValue
+        value={query?.sloId && { value: query?.sloId, label: query?.sloName || query?.sloId }}
+        placeholder="Select SLO"
+        options={slos}
+        onChange={async ({ value: sloId = '', label: sloName = '' }) => {
+          const slos = await datasource.getServiceLevelObjectives(projectName, serviceId);
+          const slo = slos.find(({ value }) => value === datasource.templateSrv.replace(sloId));
+          onChange({ ...query, sloId, sloName, goal: slo?.goal });
+        }}
+      />
+    </EditorField>
   );
 };
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLOQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLOQueryEditor.tsx
index 43be8272279..1651585cb55 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLOQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLOQueryEditor.tsx
@@ -1,14 +1,14 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorRow, EditorFieldGroup, EditorField, Stack } from '@grafana/ui';
+import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/ui';
 
 import { ALIGNMENT_PERIODS } from '../../constants';
 import CloudMonitoringDatasource from '../../datasource';
+import { alignmentPeriodLabel } from '../../functions';
 import { AlignmentTypes, CustomMetaData, SLOQuery } from '../../types';
 
 import { AliasBy } from './AliasBy';
-import { AlignmentPeriodLabel } from './AlignmentPeriodLabel';
 import { PeriodSelect } from './PeriodSelect';
 import { Project } from './Project';
 import { SLO } from './SLO';
@@ -45,40 +45,41 @@ export function SLOQueryEditor({
   variableOptionGroup,
   customMetaData,
 }: React.PropsWithChildren<Props>) {
+  const alignmentLabel = useMemo(() => alignmentPeriodLabel(customMetaData, datasource), [customMetaData, datasource]);
   return (
     <>
-      <Project
-        refId={refId}
-        templateVariableOptions={variableOptionGroup.options}
-        projectName={query.projectName}
-        datasource={datasource}
-        onChange={(projectName) => onChange({ ...query, projectName })}
-      />
-      <Service
-        refId={refId}
-        datasource={datasource}
-        templateVariableOptions={variableOptionGroup.options}
-        query={query}
-        onChange={onChange}
-      />
-      <SLO
-        refId={refId}
-        datasource={datasource}
-        templateVariableOptions={variableOptionGroup.options}
-        query={query}
-        onChange={onChange}
-      />
-      <Selector
-        refId={refId}
-        datasource={datasource}
-        templateVariableOptions={variableOptionGroup.options}
-        query={query}
-        onChange={onChange}
-      />
-
       <EditorRow>
+        <Project
+          refId={refId}
+          templateVariableOptions={variableOptionGroup.options}
+          projectName={query.projectName}
+          datasource={datasource}
+          onChange={(projectName) => onChange({ ...query, projectName })}
+        />
+        <Service
+          refId={refId}
+          datasource={datasource}
+          templateVariableOptions={variableOptionGroup.options}
+          query={query}
+          onChange={onChange}
+        />
+        <SLO
+          refId={refId}
+          datasource={datasource}
+          templateVariableOptions={variableOptionGroup.options}
+          query={query}
+          onChange={onChange}
+        />
+        <Selector
+          refId={refId}
+          datasource={datasource}
+          templateVariableOptions={variableOptionGroup.options}
+          query={query}
+          onChange={onChange}
+        />
+
         <EditorFieldGroup>
-          <EditorField label="Alignment period">
+          <EditorField label="Alignment period" tooltip={alignmentLabel}>
             <PeriodSelect
               inputId={`${refId}-alignment-period`}
               templateVariableOptions={variableOptionGroup.options}
@@ -87,13 +88,10 @@ export function SLOQueryEditor({
               aligmentPeriods={ALIGNMENT_PERIODS}
             />
           </EditorField>
-          <Stack alignItems="flex-end">
-            <AlignmentPeriodLabel datasource={datasource} customMetaData={customMetaData} />
-          </Stack>
         </EditorFieldGroup>
-      </EditorRow>
 
-      <AliasBy refId={refId} value={query.aliasBy} onChange={(aliasBy) => onChange({ ...query, aliasBy })} />
+        <AliasBy refId={refId} value={query.aliasBy} onChange={(aliasBy) => onChange({ ...query, aliasBy })} />
+      </EditorRow>
     </>
   );
 }
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Selector.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Selector.tsx
index d65e609ea8d..250d19e03d6 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Selector.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Selector.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorRow, Select } from '@grafana/ui';
+import { EditorField, Select } from '@grafana/ui';
 
 import { SELECTORS } from '../../constants';
 import CloudMonitoringDatasource from '../../datasource';
@@ -17,23 +17,21 @@ export interface Props {
 
 export const Selector: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
   return (
-    <EditorRow>
-      <EditorField label="Selector" htmlFor={`${refId}-slo-selector`}>
-        <Select
-          inputId={`${refId}-slo-selector`}
-          width="auto"
-          allowCustomValue
-          value={[...SELECTORS, ...templateVariableOptions].find((s) => s.value === query?.selectorName ?? '')}
-          options={[
-            {
-              label: 'Template Variables',
-              options: templateVariableOptions,
-            },
-            ...SELECTORS,
-          ]}
-          onChange={({ value: selectorName }) => onChange({ ...query, selectorName: selectorName ?? '' })}
-        />
-      </EditorField>
-    </EditorRow>
+    <EditorField label="Selector" htmlFor={`${refId}-slo-selector`}>
+      <Select
+        inputId={`${refId}-slo-selector`}
+        width="auto"
+        allowCustomValue
+        value={[...SELECTORS, ...templateVariableOptions].find((s) => s.value === query?.selectorName ?? '')}
+        options={[
+          {
+            label: 'Template Variables',
+            options: templateVariableOptions,
+          },
+          ...SELECTORS,
+        ]}
+        onChange={({ value: selectorName }) => onChange({ ...query, selectorName: selectorName ?? '' })}
+      />
+    </EditorField>
   );
 };
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx
index 8aa5f1b74aa..c592e6dd412 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorRow, Select } from '@grafana/ui';
+import { EditorField, Select } from '@grafana/ui';
 
 import CloudMonitoringDatasource from '../../datasource';
 import { SLOQuery } from '../../types';
@@ -35,20 +35,18 @@ export const Service: React.FC<Props> = ({ refId, query, templateVariableOptions
   }, [datasource, projectName, templateVariableOptions]);
 
   return (
-    <EditorRow>
-      <EditorField label="Service">
-        <Select
-          inputId={`${refId}-slo-service`}
-          width="auto"
-          allowCustomValue
-          value={query?.serviceId && { value: query?.serviceId, label: query?.serviceName || query?.serviceId }}
-          placeholder="Select service"
-          options={services}
-          onChange={({ value: serviceId = '', label: serviceName = '' }) =>
-            onChange({ ...query, serviceId, serviceName, sloId: '' })
-          }
-        />
-      </EditorField>
-    </EditorRow>
+    <EditorField label="Service">
+      <Select
+        inputId={`${refId}-slo-service`}
+        width="auto"
+        allowCustomValue
+        value={query?.serviceId && { value: query?.serviceId, label: query?.serviceName || query?.serviceId }}
+        placeholder="Select service"
+        options={services}
+        onChange={({ value: serviceId = '', label: serviceName = '' }) =>
+          onChange({ ...query, serviceId, serviceName, sloId: '' })
+        }
+      />
+    </EditorField>
   );
 };
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/VisualMetricQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/VisualMetricQueryEditor.tsx
index f2396901211..7829cd48c3e 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/VisualMetricQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/VisualMetricQueryEditor.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
+import { EditorRow } from '@grafana/ui';
 
 import CloudMonitoringDatasource from '../../datasource';
 import { CustomMetaData, MetricDescriptor, MetricQuery, SLOQuery } from '../../types';
 
+import { AliasBy } from './AliasBy';
 import { Alignment } from './Alignment';
 import { GroupBy } from './GroupBy';
 import { LabelFilter } from './LabelFilter';
@@ -40,6 +42,8 @@ function Editor({
       templateVariableOptions={variableOptionGroup.options}
       datasource={datasource}
       onChange={onMetricTypeChange}
+      onProjectChange={onChange}
+      query={query}
     >
       {(metric) => (
         <>
@@ -49,23 +53,32 @@ function Editor({
             onChange={(filters: string[]) => onChange({ ...query, filters })}
             variableOptionGroup={variableOptionGroup}
           />
-          <Preprocessor metricDescriptor={metric} query={query} onChange={onChange} />
-          <GroupBy
-            refId={refId}
-            labels={Object.keys(labels)}
-            query={query}
-            onChange={onChange}
-            variableOptionGroup={variableOptionGroup}
-            metricDescriptor={metric}
-          />
-          <Alignment
-            refId={refId}
-            datasource={datasource}
-            templateVariableOptions={variableOptionGroup.options}
-            query={query}
-            customMetaData={customMetaData}
-            onChange={onChange}
-          />
+          <EditorRow>
+            <Preprocessor metricDescriptor={metric} query={query} onChange={onChange} />
+            <GroupBy
+              refId={refId}
+              labels={Object.keys(labels)}
+              query={query}
+              onChange={onChange}
+              variableOptionGroup={variableOptionGroup}
+              metricDescriptor={metric}
+            />
+            <Alignment
+              refId={refId}
+              datasource={datasource}
+              templateVariableOptions={variableOptionGroup.options}
+              query={query}
+              customMetaData={customMetaData}
+              onChange={onChange}
+            />
+            <AliasBy
+              refId={refId}
+              value={query.aliasBy}
+              onChange={(aliasBy) => {
+                onChange({ ...query, aliasBy });
+              }}
+            />
+          </EditorRow>
         </>
       )}
     </Metrics>
diff --git a/public/app/plugins/datasource/cloud-monitoring/functions.test.ts b/public/app/plugins/datasource/cloud-monitoring/functions.test.ts
index 3e5c2409b58..3d932ed7ef5 100644
--- a/public/app/plugins/datasource/cloud-monitoring/functions.test.ts
+++ b/public/app/plugins/datasource/cloud-monitoring/functions.test.ts
@@ -9,6 +9,7 @@ import {
   getMetricTypesByService,
   labelsToGroupedOptions,
   stringArrayToFilters,
+  alignmentPeriodLabel,
 } from './functions';
 import { newMockDatasource } from './specs/testData';
 import { AlignmentTypes, MetricDescriptor, MetricKind, ValueTypes } from './types';
@@ -226,4 +227,13 @@ describe('functions', () => {
       ]);
     });
   });
+
+  describe('alignmentPeriodLabel', () => {
+    it('returns period label if alignment period and per series aligner is set', () => {
+      const datasource = newMockDatasource();
+
+      const label = alignmentPeriodLabel({ perSeriesAligner: 'ALIGN_DELTA', alignmentPeriod: '10' }, datasource);
+      expect(label).toBe('10s interval (delta)');
+    });
+  });
 });
diff --git a/public/app/plugins/datasource/cloud-monitoring/functions.ts b/public/app/plugins/datasource/cloud-monitoring/functions.ts
index 0dd7bc46ed0..fb7c1ab2ccb 100644
--- a/public/app/plugins/datasource/cloud-monitoring/functions.ts
+++ b/public/app/plugins/datasource/cloud-monitoring/functions.ts
@@ -1,10 +1,11 @@
 import { chunk, initial, startCase, uniqBy } from 'lodash';
 
+import { rangeUtil } from '@grafana/data';
 import { getTemplateSrv, TemplateSrv } from '@grafana/runtime';
 
 import { AGGREGATIONS, ALIGNMENTS, SYSTEM_LABELS } from './constants';
 import CloudMonitoringDatasource from './datasource';
-import { AlignmentTypes, MetricDescriptor, MetricKind, PreprocessorType, ValueTypes } from './types';
+import { AlignmentTypes, CustomMetaData, MetricDescriptor, MetricKind, PreprocessorType, ValueTypes } from './types';
 
 const templateSrv: TemplateSrv = getTemplateSrv();
 
@@ -113,3 +114,15 @@ export const stringArrayToFilters = (filterArray: string[]) =>
     value,
     condition,
   }));
+
+export const alignmentPeriodLabel = (customMetaData: CustomMetaData, datasource: CloudMonitoringDatasource) => {
+  const { perSeriesAligner, alignmentPeriod } = customMetaData;
+  if (!alignmentPeriod || !perSeriesAligner) {
+    return '';
+  }
+
+  const alignment = ALIGNMENTS.find((ap) => ap.value === datasource.templateSrv.replace(perSeriesAligner));
+  const seconds = parseInt(alignmentPeriod, 10);
+  const hms = rangeUtil.secondsToHms(seconds);
+  return `${hms} interval (${alignment?.text ?? ''})`;
+};