From 9101eb219cb3d647055b33243739c59c02c23356 Mon Sep 17 00:00:00 2001
From: Joey <90795735+joey-grafana@users.noreply.github.com>
Date: Wed, 11 Oct 2023 09:43:05 +0100
Subject: [PATCH] Tempo: Improve UX of service graph related warnings (#76134)

Improve UX of service graph related warnings
---
 .../datasource/tempo/ServiceGraphSection.tsx  | 53 ++++++++++++-------
 1 file changed, 33 insertions(+), 20 deletions(-)

diff --git a/public/app/plugins/datasource/tempo/ServiceGraphSection.tsx b/public/app/plugins/datasource/tempo/ServiceGraphSection.tsx
index 53bba555f23..fc174bf971d 100644
--- a/public/app/plugins/datasource/tempo/ServiceGraphSection.tsx
+++ b/public/app/plugins/datasource/tempo/ServiceGraphSection.tsx
@@ -53,15 +53,18 @@ export function ServiceGraphSection({
   const ds = dsState.value as PrometheusDatasource;
 
   if (!graphDatasourceUid) {
-    return <div className="text-warning">Please set up a service graph datasource in the datasource settings.</div>;
+    return getWarning(
+      'No service graph datasource selected',
+      'Please set up a service graph datasource in the datasource settings',
+      styles
+    );
   }
 
   if (graphDatasourceUid && !ds) {
-    return (
-      <div className="text-warning">
-        Service graph datasource is configured but the data source no longer exists. Please configure existing data
-        source to use the service graph functionality.
-      </div>
+    return getWarning(
+      'No service graph data found',
+      'Service graph datasource is configured but the data source no longer exists. Please configure existing data source to use the service graph functionality',
+      styles
     );
   }
 
@@ -101,24 +104,34 @@ export function ServiceGraphSection({
           />
         </InlineField>
       </InlineFieldRow>
-      {hasKeys === false ? (
-        <Alert title="No service graph data found" severity="info" className={styles.alert}>
-          Please ensure that service graph metrics are set up correctly according to the{' '}
-          <a
-            target="_blank"
-            rel="noreferrer noopener"
-            href="https://grafana.com/docs/grafana/latest/datasources/tempo/#service-graph"
-            className={styles.link}
-          >
-            Tempo documentation
-          </a>
-          .
-        </Alert>
-      ) : null}
+      {hasKeys === false
+        ? getWarning(
+            'No service graph data found',
+            'Please ensure that service graph metrics are set up correctly',
+            styles
+          )
+        : null}
     </div>
   );
 }
 
+function getWarning(title: string, description: string, styles: { alert: string; link: string }) {
+  return (
+    <Alert title={title} severity="info" className={styles.alert}>
+      {description} according to the{' '}
+      <a
+        target="_blank"
+        rel="noreferrer noopener"
+        href="https://grafana.com/docs/grafana/latest/datasources/tempo/service-graph/"
+        className={styles.link}
+      >
+        Tempo documentation
+      </a>
+      .
+    </Alert>
+  );
+}
+
 function queryToFilter(query: string): AdHocVariableFilter[] {
   let match;
   let filters: AdHocVariableFilter[] = [];