Tempo: Update AggregateBy notice (#97630)

* Update notice

* Update link

* Remove extra import

* Update notice

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',
+  }),
 });