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

This commit is contained in:
Kevin Yu
2022-06-09 09:22:44 -07:00
committed by GitHub
parent 1284c596fe
commit e046f14f36
4 changed files with 245 additions and 24 deletions

View File

@@ -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,19 +94,32 @@ export class QueryEditor extends PureComponent<Props> {
/>
</QueryEditorRow>
{queryType === QueryType.METRICS && (
<MetricQueryEditor
refId={query.refId}
variableOptionGroup={variableOptionGroup}
customMetaData={customMetaData}
onChange={(metricQuery: MetricQuery) => {
this.props.onChange({ ...this.props.query, metricQuery });
}}
onRunQuery={onRunQuery}
datasource={datasource}
query={metricQuery}
></MetricQueryEditor>
)}
{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}
customMetaData={customMetaData}
onChange={(metricQuery: MetricQuery) => {
this.props.onChange({ ...this.props.query, metricQuery });
}}
onRunQuery={onRunQuery}
datasource={datasource}
query={metricQuery}
/>
))}
{queryType === QueryType.SLO && (
<SLOQueryEditor
@@ -116,7 +132,7 @@ export class QueryEditor extends PureComponent<Props> {
query={sloQuery}
></SLOQueryEditor>
)}
</>
</EditorRows>
);
}
}