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.{' '}