New Log Details: fix attribute extension links (#110119)

* New Log Details: fix attribute extension links

* LogLineDetailsFields: do not render empty divs

public/app/features/logs/components/panel/LogLineDetails.test.tsx

@@ -742,4 +742,26 @@ describe('LogLineDetails', () => {
 
     expect(screen.getByText('Could not retrieve trace.')).toBeInTheDocument();
   });
+
+  test('shows attribute extension links when they are available', () => {
+    const usePluginLinksMock = jest.fn().mockReturnValue({
+      links: [
+        {
+          type: 'link',
+          title: 'Open service overview for label',
+          path: 'https://example.com',
+          category: 'label',
+          icon: 'compass',
+        },
+      ],
+    });
+    setPluginLinksHook(usePluginLinksMock);
+    jest.requireMock('@grafana/runtime').usePluginLinks = usePluginLinksMock;
+
+    setup(undefined, { labels: { label: 'value' } });
+
+    expect(screen.getByText('label')).toBeInTheDocument();
+    expect(screen.getByText('value')).toBeInTheDocument();
+    expect(screen.getByText('Open service overview for label')).toBeInTheDocument();
+  });
 });

public/app/features/logs/components/panel/LogLineDetailsComponent.tsx

@@ -63,7 +63,7 @@ export const LogLineDetailsComponent = memo(
           .map((label) => ({
             key: label,
             value: log.labels[label],
-            link: extensionLinks?.[label],
+            links: extensionLinks?.[label],
           })),
       [extensionLinks, log.labels]
     );

public/app/features/logs/components/panel/LogLineDetailsFields.tsx

@@ -339,7 +339,7 @@ export const LogLineDetailsField = ({
         }
         return (
           <div className={styles.row} key={`${link.title}-${i}`}>
-            <div className={disableActions ? styles.linkNoActions : styles.link}>
+            <div className={disableActions ? undefined : styles.link}>
               <DataLinkButton
                 buttonProps={{
                   // Show tooltip message if max number of pinned lines has been reached
@@ -359,7 +359,6 @@ export const LogLineDetailsField = ({
       })}
       {showFieldsStats && fieldStats && (
         <div className={styles.row}>
-          <div />
           <div className={disableActions ? undefined : styles.statsColumn}>
             <LogLabelStats
               className={styles.stats}
@@ -400,10 +399,7 @@ const getFieldStyles = (theme: GrafanaTheme2) => ({
     },
   }),
   link: css({
-    gridColumn: 'span 3',
-  }),
-  linkNoActions: css({
-    gridColumn: 'span 2',
+    gridColumn: '2 / 4',
   }),
   stats: css({
     paddingRight: theme.spacing(1),
@@ -412,7 +408,7 @@ const getFieldStyles = (theme: GrafanaTheme2) => ({
     maxWidth: '50vh',
   }),
   statsColumn: css({
-    gridColumn: 'span 2',
+    gridColumn: '2 / 4',
   }),
   valueContainer: css({
     display: 'flex',