From 5108225785213b7f24a975aca563ea0c17dda2ef Mon Sep 17 00:00:00 2001
From: Matias Chomicki <matias.chomicki@grafana.com>
Date: Wed, 9 Jul 2025 17:31:10 +0200
Subject: [PATCH] Logs Panel: Explose details mode and default to inline
 (#107902)

Logs Panel: Explose details mode
---
 .../logs/panelcfg/x/LogsPanelCfg_types.gen.ts    |  1 +
 public/app/plugins/panel/logs/LogsPanel.tsx      |  8 ++++++++
 public/app/plugins/panel/logs/module.tsx         | 16 ++++++++++++++++
 public/app/plugins/panel/logs/panelcfg.cue       |  1 +
 public/app/plugins/panel/logs/panelcfg.gen.ts    |  1 +
 public/locales/en-US/grafana.json                |  5 +++++
 6 files changed, 32 insertions(+)

diff --git a/packages/grafana-schema/src/raw/composable/logs/panelcfg/x/LogsPanelCfg_types.gen.ts b/packages/grafana-schema/src/raw/composable/logs/panelcfg/x/LogsPanelCfg_types.gen.ts
index dbf274e51bc..73b7933cd79 100644
--- a/packages/grafana-schema/src/raw/composable/logs/panelcfg/x/LogsPanelCfg_types.gen.ts
+++ b/packages/grafana-schema/src/raw/composable/logs/panelcfg/x/LogsPanelCfg_types.gen.ts
@@ -15,6 +15,7 @@ export const pluginVersion = "12.1.0-pre";
 export interface Options {
   controlsStorageKey?: string;
   dedupStrategy: common.LogsDedupStrategy;
+  detailsMode?: ('inline' | 'sidebar');
   displayedFields?: Array<string>;
   enableInfiniteScrolling?: boolean;
   enableLogDetails: boolean;
diff --git a/public/app/plugins/panel/logs/LogsPanel.tsx b/public/app/plugins/panel/logs/LogsPanel.tsx
index 709055ce389..ed375de1044 100644
--- a/public/app/plugins/panel/logs/LogsPanel.tsx
+++ b/public/app/plugins/panel/logs/LogsPanel.tsx
@@ -114,6 +114,12 @@ interface LogsPanelProps extends PanelProps<Options> {
    * When the feature toggle newLogsPanel is enabled, you can pass extra options to the LogLineMenu component.
    * These options are an array of items with { label, onClick } or { divider: true } for dividers.
    * logLineMenuCustomItems?: LogLineMenuCustomItem[];
+   *
+   * Use the default, bigger, font size, or a smaller one. Defaults to "default".
+   * fontSize?: 'default' | 'small'
+   *
+   * Set the mode used by the Log Details panel. Displayed as a sidebar, or inline below the log line. Defaults to "inline".
+   * detailsMode?: 'inline' | 'sidebar'
    */
 }
 interface LogsPermalinkUrlState {
@@ -153,6 +159,7 @@ export const LogsPanel = ({
     onNewLogsReceived,
     fontSize,
     syntaxHighlighting,
+    detailsMode,
     ...options
   },
   id,
@@ -535,6 +542,7 @@ export const LogsPanel = ({
               app={isCoreApp(app) ? app : CoreApp.Dashboard}
               containerElement={scrollElement}
               dedupStrategy={dedupStrategy}
+              detailsMode={detailsMode}
               displayedFields={displayedFields}
               enableLogDetails={enableLogDetails}
               fontSize={fontSize}
diff --git a/public/app/plugins/panel/logs/module.tsx b/public/app/plugins/panel/logs/module.tsx
index 0e339918d65..de1562c4898 100644
--- a/public/app/plugins/panel/logs/module.tsx
+++ b/public/app/plugins/panel/logs/module.tsx
@@ -108,6 +108,22 @@ export const plugin = new PanelPlugin<Options>(LogsPanel)
               },
             ],
           },
+        })
+        .addRadio({
+          path: 'detailsMode',
+          name: t('logs.name-details-mode', 'Log Details panel mode'),
+          category,
+          description: '',
+          settings: {
+            options: [
+              { value: 'inline', label: t('logs.name-details-options.label-inline', 'Inline') },
+              {
+                value: 'sidebar',
+                label: t('logs.name-details-options.label-sidebar', 'Sidebar'),
+              },
+            ],
+          },
+          defaultValue: 'inline',
         });
     }
 
diff --git a/public/app/plugins/panel/logs/panelcfg.cue b/public/app/plugins/panel/logs/panelcfg.cue
index cd21fc2e041..70ddf33b412 100644
--- a/public/app/plugins/panel/logs/panelcfg.cue
+++ b/public/app/plugins/panel/logs/panelcfg.cue
@@ -40,6 +40,7 @@ composableKinds: PanelCfg: {
 					dedupStrategy:            common.LogsDedupStrategy
 					enableInfiniteScrolling?: bool
 					fontSize?:                "default" | "small"                  @cuetsy(kind="enum", memberNames="default|small")
+					detailsMode?:             "inline" | "sidebar"                  @cuetsy(kind="enum", memberNames="inline|sidebar")
 					// TODO: figure out how to define callbacks
 					onClickFilterLabel?:     _
 					onClickFilterOutLabel?:  _
diff --git a/public/app/plugins/panel/logs/panelcfg.gen.ts b/public/app/plugins/panel/logs/panelcfg.gen.ts
index 5af4d61f578..a07151c7fda 100644
--- a/public/app/plugins/panel/logs/panelcfg.gen.ts
+++ b/public/app/plugins/panel/logs/panelcfg.gen.ts
@@ -13,6 +13,7 @@ import * as common from '@grafana/schema';
 export interface Options {
   controlsStorageKey?: string;
   dedupStrategy: common.LogsDedupStrategy;
+  detailsMode?: ('inline' | 'sidebar');
   displayedFields?: Array<string>;
   enableInfiniteScrolling?: boolean;
   enableLogDetails: boolean;
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index d80bd556f31..8b70a50723d 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -8855,6 +8855,11 @@
     },
     "name-common-labels": "Common labels",
     "name-deduplication": "Deduplication",
+    "name-details-mode": "Log Details panel mode",
+    "name-details-options": {
+      "label-inline": "Inline",
+      "label-sidebar": "Sidebar"
+    },
     "name-enable-infinite-scrolling": "Enable infinite scrolling",
     "name-enable-log-details": "Enable log details",
     "name-enable-syntax-highlighting": "Enable syntax highlighting",