From 8243e030b4412ba093989aee077a25495b6b1d30 Mon Sep 17 00:00:00 2001
From: Matias Chomicki <matyax@gmail.com>
Date: Fri, 6 Dec 2024 16:15:25 +0000
Subject: [PATCH] Log Labels: add support to disable labels for unique labels
 (#97567)

* LogLabels: add support to disable labels for unique labels

* LogRow: disable tooltip for unique labels
---
 .../logs/components/LogLabels.test.tsx        | 11 ++++++++++
 .../features/logs/components/LogLabels.tsx    | 22 +++++++++----------
 .../app/features/logs/components/LogRow.tsx   |  2 +-
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/public/app/features/logs/components/LogLabels.test.tsx b/public/app/features/logs/components/LogLabels.test.tsx
index cb3c0e90dfb..af5217d110f 100644
--- a/public/app/features/logs/components/LogLabels.test.tsx
+++ b/public/app/features/logs/components/LogLabels.test.tsx
@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { LogLabels, LogLabelsList } from './LogLabels';
 
@@ -23,6 +24,16 @@ describe('<LogLabels />', () => {
     expect(screen.queryByText('foo=bar')).toBeInTheDocument();
     expect(screen.queryByText(/baz/)).not.toBeInTheDocument();
   });
+  it('shows a tooltip', async () => {
+    render(<LogLabels labels={{ foo: 'bar' }} />);
+    await userEvent.hover(screen.getByText('foo=bar'));
+    expect(screen.getAllByText('foo=bar')).toHaveLength(2);
+  });
+  it('disables the tooltip', async () => {
+    render(<LogLabels labels={{ foo: 'bar' }} addTooltip={false} />);
+    await userEvent.hover(screen.getByText('foo=bar'));
+    expect(screen.getAllByText('foo=bar')).toHaveLength(1);
+  });
 });
 
 describe('<LogLabelsList />', () => {
diff --git a/public/app/features/logs/components/LogLabels.tsx b/public/app/features/logs/components/LogLabels.tsx
index c3d7b9117ad..951597c887f 100644
--- a/public/app/features/logs/components/LogLabels.tsx
+++ b/public/app/features/logs/components/LogLabels.tsx
@@ -10,15 +10,16 @@ const HIDDEN_LABELS = ['detected_level', 'level', 'lvl', 'filename'];
 interface Props {
   labels: Labels;
   emptyMessage?: string;
+  addTooltip?: boolean;
 }
 
-export const LogLabels = memo(({ labels, emptyMessage }: Props) => {
+export const LogLabels = memo(({ labels, emptyMessage, addTooltip = true }: Props) => {
   const styles = useStyles2(getStyles);
   const displayLabels = useMemo(
     () =>
       Object.keys(labels)
-        .filter((label) => !label.startsWith('_') && !HIDDEN_LABELS.includes(label))
-        .sort(),
+        .filter((label) => !label.startsWith('_') && !HIDDEN_LABELS.includes(label) && labels[label])
+        .map((label) => `${label}=${labels[label]}`),
     [labels]
   );
 
@@ -32,16 +33,15 @@ export const LogLabels = memo(({ labels, emptyMessage }: Props) => {
 
   return (
     <span className={cx([styles.logsLabels])}>
-      {displayLabels.map((label) => {
-        const value = labels[label];
-        if (!value) {
-          return;
-        }
-        const labelValue = `${label}=${value}`;
-        return (
-          <Tooltip content={labelValue} key={label} placement="top">
+      {displayLabels.map((labelValue) => {
+        return addTooltip ? (
+          <Tooltip content={labelValue} key={labelValue} placement="top">
             <LogLabel styles={styles}>{labelValue}</LogLabel>
           </Tooltip>
+        ) : (
+          <LogLabel styles={styles} tooltip={labelValue} key={labelValue}>
+            {labelValue}
+          </LogLabel>
         );
       })}
     </span>
diff --git a/public/app/features/logs/components/LogRow.tsx b/public/app/features/logs/components/LogRow.tsx
index 6a59f32dbfc..4cb008a314b 100644
--- a/public/app/features/logs/components/LogRow.tsx
+++ b/public/app/features/logs/components/LogRow.tsx
@@ -281,7 +281,7 @@ class UnThemedLogRow extends PureComponent<Props, State> {
           {showTime && <td className={styles.logsRowLocalTime}>{this.renderTimeStamp(row.timeEpochMs)}</td>}
           {showLabels && processedRow.uniqueLabels && (
             <td className={styles.logsRowLabels}>
-              <LogLabels labels={processedRow.uniqueLabels} />
+              <LogLabels labels={processedRow.uniqueLabels} addTooltip={false} />
             </td>
           )}
           {displayedFields && displayedFields.length > 0 ? (