Cloud Monitoring: Update AliasBy to use experimental UI components (#50461)

public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useDebounce } from 'react-use';
 
 import { QueryEditorProps, toOption } from '@grafana/data';
+import { config } from '@grafana/runtime';
 import { Input } from '@grafana/ui';
 
 import { INPUT_WIDTH } from '../constants';
@@ -15,6 +16,7 @@ import {
   AlignmentTypes,
 } from '../types';
 
+import { MetricQueryEditor as ExperimentalMetricQueryEditor } from './Experimental/MetricQueryEditor';
 import { MetricQueryEditor } from './MetricQueryEditor';
 
 import { AnnotationsHelp, QueryEditorRow } from './';
@@ -78,6 +80,17 @@ export const AnnotationQueryEditor = (props: Props) => {
 
   return (
     <>
+      {config.featureToggles.cloudMonitoringExperimentalUI ? (
+        <ExperimentalMetricQueryEditor
+          refId={query.refId}
+          variableOptionGroup={variableOptionGroup}
+          customMetaData={customMetaData}
+          onChange={handleQueryChange}
+          onRunQuery={onRunQuery}
+          datasource={datasource}
+          query={metricQuery}
+        />
+      ) : (
         <MetricQueryEditor
           refId={query.refId}
           variableOptionGroup={variableOptionGroup}
@@ -87,6 +100,7 @@ export const AnnotationQueryEditor = (props: Props) => {
           datasource={datasource}
           query={metricQuery}
         />
+      )}
 
       <QueryEditorRow label="Title" htmlFor="annotation-query-title">
         <Input id="annotation-query-title" value={title} width={INPUT_WIDTH} onChange={handleTitleChange} />

public/app/plugins/datasource/cloud-monitoring/components/Experimental/AliasBy.tsx

@@ -0,0 +1,32 @@
+import { debounce } from 'lodash';
+import React, { FunctionComponent, useState } from 'react';
+
+import { EditorRow, EditorField } from '@grafana/experimental';
+import { Input } from '@grafana/ui';
+
+import { SELECT_WIDTH } from '../../constants';
+
+export interface Props {
+  refId: string;
+  onChange: (alias: any) => void;
+  value?: string;
+}
+
+export const AliasBy: FunctionComponent<Props> = ({ refId, value = '', onChange }) => {
+  const [alias, setAlias] = useState(value ?? '');
+
+  const propagateOnChange = debounce(onChange, 1000);
+
+  onChange = (e: any) => {
+    setAlias(e.target.value);
+    propagateOnChange(e.target.value);
+  };
+
+  return (
+    <EditorRow>
+      <EditorField label="Alias by">
+        <Input id={`${refId}-alias-by`} width={SELECT_WIDTH} value={alias} onChange={onChange} />
+      </EditorField>
+    </EditorRow>
+  );
+};

public/app/plugins/datasource/cloud-monitoring/components/Experimental/MetricQueryEditor.tsx

@@ -0,0 +1,159 @@
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { SelectableValue } from '@grafana/data';
+import { EditorRows } from '@grafana/experimental';
+
+import CloudMonitoringDatasource from '../../datasource';
+import { getAlignmentPickerData } from '../../functions';
+import {
+  AlignmentTypes,
+  CustomMetaData,
+  EditorMode,
+  MetricDescriptor,
+  MetricKind,
+  MetricQuery,
+  PreprocessorType,
+  SLOQuery,
+  ValueTypes,
+} from '../../types';
+import { Project, VisualMetricQueryEditor } from '../index';
+
+import { GraphPeriod } from './../GraphPeriod';
+import { MQLQueryEditor } from './../MQLQueryEditor';
+import { AliasBy } from './AliasBy';
+
+export interface Props {
+  refId: string;
+  customMetaData: CustomMetaData;
+  variableOptionGroup: SelectableValue<string>;
+  onChange: (query: MetricQuery) => void;
+  onRunQuery: () => void;
+  query: MetricQuery;
+  datasource: CloudMonitoringDatasource;
+}
+
+interface State {
+  labels: any;
+  [key: string]: any;
+}
+
+export const defaultState: State = {
+  labels: {},
+};
+
+export const defaultQuery: (dataSource: CloudMonitoringDatasource) => MetricQuery = (dataSource) => ({
+  editorMode: EditorMode.Visual,
+  projectName: dataSource.getDefaultProject(),
+  metricType: '',
+  metricKind: MetricKind.GAUGE,
+  valueType: '',
+  crossSeriesReducer: 'REDUCE_MEAN',
+  alignmentPeriod: 'cloud-monitoring-auto',
+  perSeriesAligner: AlignmentTypes.ALIGN_MEAN,
+  groupBys: [],
+  filters: [],
+  aliasBy: '',
+  query: '',
+  preprocessor: PreprocessorType.None,
+});
+
+function Editor({
+  refId,
+  query,
+  datasource,
+  onChange: onQueryChange,
+  onRunQuery,
+  customMetaData,
+  variableOptionGroup,
+}: React.PropsWithChildren<Props>) {
+  const [state, setState] = useState<State>(defaultState);
+  const { projectName, metricType, groupBys, editorMode, crossSeriesReducer } = query;
+
+  useEffect(() => {
+    if (projectName && metricType) {
+      datasource
+        .getLabels(metricType, refId, projectName)
+        .then((labels) => setState((prevState) => ({ ...prevState, labels })));
+    }
+  }, [datasource, groupBys, metricType, projectName, refId, crossSeriesReducer]);
+
+  const onChange = useCallback(
+    (metricQuery: MetricQuery | SLOQuery) => {
+      onQueryChange({ ...query, ...metricQuery });
+      onRunQuery();
+    },
+    [onQueryChange, onRunQuery, query]
+  );
+
+  const onMetricTypeChange = useCallback(
+    ({ valueType, metricKind, type }: MetricDescriptor) => {
+      const preprocessor =
+        metricKind === MetricKind.GAUGE || valueType === ValueTypes.DISTRIBUTION
+          ? PreprocessorType.None
+          : PreprocessorType.Rate;
+      const { perSeriesAligner } = getAlignmentPickerData(valueType, metricKind, state.perSeriesAligner, preprocessor);
+      onChange({
+        ...query,
+        perSeriesAligner,
+        metricType: type,
+        valueType,
+        metricKind,
+        preprocessor,
+      });
+    },
+    [onChange, query, state]
+  );
+
+  return (
+    <EditorRows>
+      <Project
+        refId={refId}
+        templateVariableOptions={variableOptionGroup.options}
+        projectName={projectName}
+        datasource={datasource}
+        onChange={(projectName) => {
+          onChange({ ...query, projectName });
+        }}
+      />
+
+      {editorMode === EditorMode.Visual && (
+        <VisualMetricQueryEditor
+          refId={refId}
+          labels={state.labels}
+          variableOptionGroup={variableOptionGroup}
+          customMetaData={customMetaData}
+          onMetricTypeChange={onMetricTypeChange}
+          onChange={onChange}
+          datasource={datasource}
+          query={query}
+        />
+      )}
+
+      {editorMode === EditorMode.MQL && (
+        <>
+          <MQLQueryEditor
+            onChange={(q: string) => onQueryChange({ ...query, query: q })}
+            onRunQuery={onRunQuery}
+            query={query.query}
+          ></MQLQueryEditor>
+          <GraphPeriod
+            onChange={(graphPeriod: string) => onQueryChange({ ...query, graphPeriod })}
+            graphPeriod={query.graphPeriod}
+            refId={refId}
+            variableOptionGroup={variableOptionGroup}
+          />
+        </>
+      )}
+
+      <AliasBy
+        refId={refId}
+        value={query.aliasBy}
+        onChange={(aliasBy) => {
+          onChange({ ...query, aliasBy });
+        }}
+      />
+    </EditorRows>
+  );
+}
+
+export const MetricQueryEditor = React.memo(Editor);

public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx

@@ -2,12 +2,15 @@ import { css } from '@emotion/css';
 import React, { PureComponent } from 'react';
 
 import { QueryEditorProps, toOption } from '@grafana/data';
+import { EditorRows } from '@grafana/experimental';
+import { config } from '@grafana/runtime';
 import { Button, Select } from '@grafana/ui';
 
 import { QUERY_TYPES, SELECT_WIDTH } from '../constants';
 import CloudMonitoringDatasource from '../datasource';
 import { CloudMonitoringQuery, EditorMode, MetricQuery, QueryType, SLOQuery, CloudMonitoringOptions } from '../types';
 
+import { MetricQueryEditor as ExperimentalMetricQueryEditor } from './Experimental/MetricQueryEditor';
 import { defaultQuery } from './MetricQueryEditor';
 import { defaultQuery as defaultSLOQuery } from './SLO/SLOQueryEditor';
 
@@ -55,7 +58,7 @@ export class QueryEditor extends PureComponent<Props> {
     };
 
     return (
-      <>
+      <EditorRows>
         <QueryEditorRow
           label="Query type"
           fillComponent={
@@ -91,7 +94,20 @@ export class QueryEditor extends PureComponent<Props> {
           />
         </QueryEditorRow>
 
-        {queryType === QueryType.METRICS && (
+        {queryType === QueryType.METRICS &&
+          (config.featureToggles.cloudMonitoringExperimentalUI ? (
+            <ExperimentalMetricQueryEditor
+              refId={query.refId}
+              variableOptionGroup={variableOptionGroup}
+              customMetaData={customMetaData}
+              onChange={(metricQuery: MetricQuery) => {
+                this.props.onChange({ ...this.props.query, metricQuery });
+              }}
+              onRunQuery={onRunQuery}
+              datasource={datasource}
+              query={metricQuery}
+            />
+          ) : (
             <MetricQueryEditor
               refId={query.refId}
               variableOptionGroup={variableOptionGroup}
@@ -102,8 +118,8 @@ export class QueryEditor extends PureComponent<Props> {
               onRunQuery={onRunQuery}
               datasource={datasource}
               query={metricQuery}
-          ></MetricQueryEditor>
-        )}
+            />
+          ))}
 
         {queryType === QueryType.SLO && (
           <SLOQueryEditor
@@ -116,7 +132,7 @@ export class QueryEditor extends PureComponent<Props> {
             query={sloQuery}
           ></SLOQueryEditor>
         )}
-      </>
+      </EditorRows>
     );
   }
 }