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

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 />', () => {

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>

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 ? (