From e8e0649ebd924b2f0753a79454a3e83b093963df Mon Sep 17 00:00:00 2001
From: Joey <90795735+joey-grafana@users.noreply.github.com>
Date: Wed, 11 Dec 2024 11:17:47 +0000
Subject: [PATCH] Tempo: Update AggregateBy notice (#97630)

* Update notice

* Update link

* Remove extra import

* Update notice
---
 .../SearchTraceQLEditor/GroupByField.tsx      | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.tsx
index de8e1c3133d..d08b30d1f5f 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.tsx
+++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.tsx
@@ -86,7 +86,10 @@ export const GroupByField = (props: Props) => {
     .map((t) => ({ label: t, value: t }));
 
   return (
-    <InlineSearchField label="Aggregate by" tooltip={`${notice} Select one or more tags to see the metrics summary.`}>
+    <InlineSearchField
+      label="Aggregate by"
+      tooltip={`Note: We recommend using Explore Traces instead. Select one or more tags to see the metrics summary.`}
+    >
       <>
         {query.groupBy?.map((f, i) => {
           const tags = tagOptions(f)
@@ -152,15 +155,27 @@ export const GroupByField = (props: Props) => {
           );
         })}
         {query.groupBy && query.groupBy.length > 0 && query.groupBy[0].tag && (
-          <Alert title={notice} severity="warning" className={styles.notice}></Alert>
+          <Alert title="" severity="warning" className={styles.notice}>
+            The aggregate by feature is deprecated. We recommend using Explore Traces instead. If you want to write your
+            own TraceQL queries to replicate this API, please check
+            <a
+              href={
+                'https://grafana.com/docs/tempo/latest/api_docs/metrics-summary/#deprecation-in-favor-of-traceql-metrics'
+              }
+              className={styles.noticeLink}
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              this page
+            </a>
+            .
+          </Alert>
         )}
       </>
     </InlineSearchField>
   );
 };
 
-export const notice = 'The aggregate by feature is deprecated and will be removed in the future.';
-
 const getStyles = (theme: GrafanaTheme2) => ({
   addTag: css({
     marginLeft: theme.spacing(1),
@@ -169,4 +184,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
     width: '500px',
     marginTop: theme.spacing(0.75),
   }),
+  noticeLink: css({
+    color: theme.colors.text.link,
+    textDecoration: 'underline',
+    marginLeft: '5px',
+  }),
 });