From d58e652cc3c2e94d00f9b806d3901d97bd55ae34 Mon Sep 17 00:00:00 2001
From: Darren Janeczek <38694490+darrenjaneczek@users.noreply.github.com>
Date: Wed, 20 Mar 2024 18:20:23 -0400
Subject: [PATCH] datatrails: include description of related metrics tab
 (#84525)

* fix: include description of related metrics tab
---
 public/app/features/trails/MetricScene.tsx | 20 +++++++++++++++++---
 public/app/features/trails/shared.ts       |  1 +
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/public/app/features/trails/MetricScene.tsx b/public/app/features/trails/MetricScene.tsx
index e3b889fe513..29971855954 100644
--- a/public/app/features/trails/MetricScene.tsx
+++ b/public/app/features/trails/MetricScene.tsx
@@ -12,7 +12,7 @@ import {
   SceneVariableSet,
   QueryVariable,
 } from '@grafana/scenes';
-import { ToolbarButton, Box, Stack, Icon, TabsBar, Tab, useStyles2, LinkButton } from '@grafana/ui';
+import { ToolbarButton, Box, Stack, Icon, TabsBar, Tab, useStyles2, LinkButton, Tooltip } from '@grafana/ui';
 
 import { getExploreUrl } from '../../core/utils/explore';
 
@@ -109,7 +109,12 @@ export class MetricScene extends SceneObjectBase<MetricSceneState> {
 const actionViewsDefinitions: ActionViewDefinition[] = [
   { displayName: 'Overview', value: 'overview', getScene: buildMetricOverviewScene },
   { displayName: 'Breakdown', value: 'breakdown', getScene: buildBreakdownActionScene },
-  { displayName: 'Related metrics', value: 'related', getScene: buildRelatedMetricsScene },
+  {
+    displayName: 'Related metrics',
+    value: 'related',
+    getScene: buildRelatedMetricsScene,
+    description: 'Relevant metrics based on current label filters',
+  },
 ];
 
 export interface MetricActionBarState extends SceneObjectState {}
@@ -179,7 +184,7 @@ export class MetricActionBar extends SceneObjectBase<MetricActionBarState> {
 
         <TabsBar>
           {actionViewsDefinitions.map((tab, index) => {
-            return (
+            const tabRender = (
               <Tab
                 key={index}
                 label={tab.displayName}
@@ -187,6 +192,15 @@ export class MetricActionBar extends SceneObjectBase<MetricActionBarState> {
                 onChangeTab={() => metricScene.setActionView(tab.value)}
               />
             );
+
+            if (tab.description) {
+              return (
+                <Tooltip key={index} content={tab.description} placement="bottom-start" theme="info">
+                  {tabRender}
+                </Tooltip>
+              );
+            }
+            return tabRender;
           })}
         </TabsBar>
       </Box>
diff --git a/public/app/features/trails/shared.ts b/public/app/features/trails/shared.ts
index 55960310c9c..e52984979cf 100644
--- a/public/app/features/trails/shared.ts
+++ b/public/app/features/trails/shared.ts
@@ -6,6 +6,7 @@ export type ActionViewType = 'overview' | 'breakdown' | 'logs' | 'related';
 export interface ActionViewDefinition {
   displayName: string;
   value: ActionViewType;
+  description?: string;
   getScene: () => SceneObject;
 }