Logs Panel: Explose details mode and default to inline (#107902)

Logs Panel: Explose details mode

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;

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}

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',
         });
     }
 

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?:  _

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;

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",