Logs panel: Support details view (#34125)

* Show log details in Logs panel

* Add hide log details as panel option

* Refactor tests to use testing library

* Change hideLogDetails to enableLogsDetails

* Add enableLogDetails to test file

public/app/plugins/panel/logs/LogsPanel.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import { LogRows, CustomScrollbar } from '@grafana/ui';
-import { PanelProps } from '@grafana/data';
+import { PanelProps, Field } from '@grafana/data';
 import { Options } from './types';
 import { dataFrameToLogsModel, dedupLogRows } from 'app/core/logs_model';
+import { getFieldLinksForExplore } from 'app/features/explore/utils/links';
 
 interface LogsPanelProps extends PanelProps<Options> {}
 
 export const LogsPanel: React.FunctionComponent<LogsPanelProps> = ({
   data,
   timeZone,
-  options: { showLabels, showTime, wrapLogMessage, sortOrder, dedupStrategy },
+  options: { showLabels, showTime, wrapLogMessage, sortOrder, dedupStrategy, enableLogDetails },
 }) => {
   if (!data) {
     return (
@@ -23,6 +24,10 @@ export const LogsPanel: React.FunctionComponent<LogsPanelProps> = ({
   const logRows = newResults?.rows || [];
   const deduplicatedRows = dedupLogRows(logRows, dedupStrategy);
 
+  const getFieldLinks = (field: Field, rowIndex: number) => {
+    return getFieldLinksForExplore({ field, rowIndex, range: data.timeRange });
+  };
+
   return (
     <CustomScrollbar autoHide>
       <LogRows
@@ -34,8 +39,9 @@ export const LogsPanel: React.FunctionComponent<LogsPanelProps> = ({
         showTime={showTime}
         wrapLogMessage={wrapLogMessage}
         timeZone={timeZone}
-        allowDetails={true}
+        getFieldLinks={getFieldLinks}
         logsSortOrder={sortOrder}
+        enableLogDetails={enableLogDetails}
       />
     </CustomScrollbar>
   );

public/app/plugins/panel/logs/module.tsx

@@ -22,6 +22,12 @@ export const plugin = new PanelPlugin<Options>(LogsPanel).setPanelOptions((build
       description: '',
       defaultValue: false,
     })
+    .addBooleanSwitch({
+      path: 'enableLogDetails',
+      name: 'Enable log details',
+      description: '',
+      defaultValue: true,
+    })
     .addRadio({
       path: 'dedupStrategy',
       name: 'Deduplication',

public/app/plugins/panel/logs/types.ts

@@ -4,6 +4,7 @@ export interface Options {
   showLabels: boolean;
   showTime: boolean;
   wrapLogMessage: boolean;
+  enableLogDetails: boolean;
   sortOrder: LogsSortOrder;
   dedupStrategy: LogsDedupStrategy;
 }