From 7adb1168520a1fe5a499d5e393d3d0b2d65feedf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= <pm.jamroz@gmail.com>
Date: Wed, 11 Jun 2025 14:02:24 +0200
Subject: [PATCH] Tempo: Add a warning message about TraceQL metrics being an
 experimental feature (#106537)

Add a warning message to the query editor when used with alerting
---
 .../datasource/tempo/traceql/QueryEditor.tsx  | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

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 = (
+    <Alert title="Tempo metrics is an experimental feature" severity="warning">
+      Please note that TraceQL metrics is an experimental feature and should not be used in production. Read more about
+      it in{' '}
+      <a
+        className={css({ textDecoration: 'underline' })}
+        href="https://grafana.com/docs/tempo/latest/operations/traceql-metrics/"
+        target="_blank"
+      >
+        documentation
+        <Icon name="external-link-alt" />
+      </a>
+      .
+    </Alert>
+  );
+  const inAlerting = props.app === CoreApp.UnifiedAlerting || props.app === CoreApp.CloudAlerting;
+
   return (
     <>
+      {inAlerting && alertingWarning}
       <InlineLabel>
         Build complex queries using TraceQL to select a list of traces.{' '}
         <a rel="noreferrer" target="_blank" href="https://grafana.com/docs/tempo/latest/traceql/">