diff --git a/public/app/plugins/datasource/tempo/traceql/QueryEditor.tsx b/public/app/plugins/datasource/tempo/traceql/QueryEditor.tsx index 72d0e9890d8..56d2ad225d5 100644 --- a/public/app/plugins/datasource/tempo/traceql/QueryEditor.tsx +++ b/public/app/plugins/datasource/tempo/traceql/QueryEditor.tsx @@ -2,9 +2,9 @@ import { css } from '@emotion/css'; import { defaults } from 'lodash'; import { useState } from 'react'; -import { GrafanaTheme2, QueryEditorProps } from '@grafana/data'; +import { CoreApp, GrafanaTheme2, QueryEditorProps } from '@grafana/data'; import { config, reportInteraction } from '@grafana/runtime'; -import { Button, InlineLabel, useStyles2 } from '@grafana/ui'; +import { Alert, Button, Icon, InlineLabel, useStyles2 } from '@grafana/ui'; import { TempoDatasource } from '../datasource'; import { defaultQuery, MyDataSourceOptions, TempoQuery } from '../types'; @@ -28,8 +28,26 @@ export function QueryEditor(props: Props) { return genQuery === query.query || genQuery === '{}'; }); + const alertingWarning = ( + + Please note that TraceQL metrics is an experimental feature and should not be used in production. Read more about + it in{' '} + + documentation + + + . + + ); + const inAlerting = props.app === CoreApp.UnifiedAlerting || props.app === CoreApp.CloudAlerting; + return ( <> + {inAlerting && alertingWarning} Build complex queries using TraceQL to select a list of traces.{' '}