@ -1,6 +1,7 @@
import React from 'react' ;
import { QueryEditorProps , SelectableValue } from '@grafana/data' ;
import { EditorField } from '@grafana/experimental' ;
import { config } from '@grafana/runtime' ;
import { InlineField } from '@grafana/ui' ;
@ -44,6 +45,7 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
const keysForDimensionFilter = useDimensionKeys ( datasource , { region , namespace , metricName , dimensionFilters } ) ;
const accountState = useAccountOptions ( datasource . resources , query . region ) ;
const newFormStylingEnabled = config . featureToggles . awsDatasourcesNewFormStyling ;
const onRegionChange = async ( region : string ) = > {
const validatedQuery = await sanitizeQuery ( {
. . . parsedQuery ,
@ -122,6 +124,7 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
}
label = "Query type"
inputId = { ` variable-query-type- ${ query . refId } ` }
newFormStylingEnabled = { newFormStylingEnabled }
/ >
{ hasRegionField && (
< VariableQueryField
@ -131,6 +134,7 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
label = "Region"
isLoading = { regionIsLoading }
inputId = { ` variable-query-region- ${ query . refId } ` }
newFormStylingEnabled = { newFormStylingEnabled }
/ >
) }
{ hasAccountIDField &&
@ -143,6 +147,7 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
onChange = { ( accountId? : string ) = > onQueryChange ( { . . . parsedQuery , accountId } ) }
options = { [ ALL_ACCOUNTS_OPTION , . . . accountState ? . value ] }
allowCustomValue = { false }
newFormStylingEnabled = { newFormStylingEnabled }
/ >
) }
{ hasNamespaceField && (
@ -153,6 +158,7 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
label = "Namespace"
inputId = { ` variable-query-namespace- ${ query . refId } ` }
allowCustomValue
newFormStylingEnabled = { newFormStylingEnabled }
/ >
) }
{ parsedQuery . queryType === VariableQueryType . DimensionValues && (
@ -164,6 +170,7 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
label = "Metric"
inputId = { ` variable-query-metric- ${ query . refId } ` }
allowCustomValue
newFormStylingEnabled = { newFormStylingEnabled }
/ >
< VariableQueryField
value = { dimensionKey || null }
@ -172,8 +179,27 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
label = "Dimension key"
inputId = { ` variable-query-dimension-key- ${ query . refId } ` }
allowCustomValue
newFormStylingEnabled = { newFormStylingEnabled }
/ >
< InlineField label = "Dimensions" labelWidth = { 20 } shrink tooltip = "Dimensions to filter the returned values on" >
{ newFormStylingEnabled ? (
< EditorField label = "Dimensions" className = "width-30" tooltip = "Dimensions to filter the returned values on" >
< Dimensions
metricStat = { { . . . parsedQuery , dimensions : parsedQuery.dimensionFilters } }
onChange = { ( dimensions ) = > {
onChange ( { . . . parsedQuery , dimensionFilters : dimensions } ) ;
} }
dimensionKeys = { keysForDimensionFilter }
disableExpressions = { true }
datasource = { datasource }
/ >
< / EditorField >
) : (
< InlineField
label = "Dimensions"
labelWidth = { 20 }
shrink
tooltip = "Dimensions to filter the returned values on"
>
< Dimensions
metricStat = { { . . . parsedQuery , dimensions : parsedQuery.dimensionFilters } }
onChange = { ( dimensions ) = > {
@ -184,6 +210,7 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
datasource = { datasource }
/ >
< / InlineField >
) }
< / >
) }
{ parsedQuery . queryType === VariableQueryType . EBSVolumeIDs && (
@ -192,6 +219,7 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
placeholder = "i-XXXXXXXXXXXXXXXXX"
onBlur = { ( value : string ) = > onQueryChange ( { . . . parsedQuery , instanceID : value } ) }
label = "Instance ID"
newFormStylingEnabled = { newFormStylingEnabled }
/ >
) }
{ parsedQuery . queryType === VariableQueryType . EC2InstanceAttributes && (
@ -201,6 +229,7 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
onBlur = { ( value : string ) = > onQueryChange ( { . . . parsedQuery , attributeName : value } ) }
label = "Attribute name"
interactive = { true }
newFormStylingEnabled = { newFormStylingEnabled }
tooltip = {
< >
{ 'Attribute or tag to query on. Tags should be formatted "Tags.<name>". ' }
@ -214,6 +243,32 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
< / >
}
/ >
{ newFormStylingEnabled ? (
< EditorField
label = "Filters"
tooltipInteractive
tooltip = {
< >
< a
href = "https://grafana.com/docs/grafana/latest/datasources/aws-cloudwatch/template-queries-cloudwatch/#selecting-attributes"
target = "_blank"
rel = "noreferrer"
>
Pre - defined ec2 :DescribeInstances filters / tags
< / a >
{ ' and the values to filter on. Tags should be formatted tag:<name>.' }
< / >
}
>
< MultiFilter
filters = { parsedQuery . ec2Filters }
onChange = { ( filters ) = > {
onChange ( { . . . parsedQuery , ec2Filters : filters } ) ;
} }
keyPlaceholder = "filter/tag"
/ >
< / EditorField >
) : (
< InlineField
label = "Filters"
labelWidth = { 20 }
@ -239,6 +294,7 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
keyPlaceholder = "filter/tag"
/ >
< / InlineField >
) }
< / >
) }
{ parsedQuery . queryType === VariableQueryType . ResourceArns && (
@ -247,7 +303,19 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
value = { parsedQuery . resourceType }
onBlur = { ( value : string ) = > onQueryChange ( { . . . parsedQuery , resourceType : value } ) }
label = "Resource type"
newFormStylingEnabled = { newFormStylingEnabled }
/ >
{ newFormStylingEnabled ? (
< EditorField label = "Tags" tooltip = "Tags to filter the returned values on." >
< MultiFilter
filters = { parsedQuery . tags }
onChange = { ( filters ) = > {
onChange ( { . . . parsedQuery , tags : filters } ) ;
} }
keyPlaceholder = "tag"
/ >
< / EditorField >
) : (
< InlineField label = "Tags" shrink labelWidth = { 20 } tooltip = "Tags to filter the returned values on." >
< MultiFilter
filters = { parsedQuery . tags }
@ -257,6 +325,7 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
keyPlaceholder = "tag"
/ >
< / InlineField >
) }
< / >
) }
{ parsedQuery . queryType === VariableQueryType . LogGroups && (
@ -264,6 +333,7 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
value = { query . logGroupPrefix ? ? '' }
onBlur = { ( value : string ) = > onQueryChange ( { . . . parsedQuery , logGroupPrefix : value } ) }
label = "Log group prefix"
newFormStylingEnabled = { newFormStylingEnabled }
/ >
) }
< / >