Logs: Make logs container scrollable (#69371)

* feat: make logs container scrollable

* fix container height

* add a feature toggle

* fix: scroll behaviour with wrap lines on

* Update public/app/features/logs/components/getLogRowStyles.ts

Co-authored-by: Sven Grossmann <sven.grossmann@grafana.com>

* rename feature toggle

---------

Co-authored-by: Sven Grossmann <sven.grossmann@grafana.com>

docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md

@@ -113,6 +113,7 @@ Experimental features might be changed or removed without prior notice.
 | `lokiPredefinedOperations`         | Adds predefined query operations to Loki query editor                                                        |
 | `pluginsFrontendSandbox`           | Enables the plugins frontend sandbox                                                                         |
 | `cloudWatchLogsMonacoEditor`       | Enables the Monaco editor for CloudWatch Logs queries                                                        |
+| `exploreScrollableLogsContainer`   | Improves the scrolling behavior of logs in Explore                                                           |
 | `recordedQueriesMulti`             | Enables writing multiple items from a single query within Recorded Queries                                   |
 
 ## Development feature toggles

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -100,5 +100,6 @@ export interface FeatureToggles {
   pluginsFrontendSandbox?: boolean;
   sqlDatasourceDatabaseSelection?: boolean;
   cloudWatchLogsMonacoEditor?: boolean;
+  exploreScrollableLogsContainer?: boolean;
   recordedQueriesMulti?: boolean;
 }

pkg/services/featuremgmt/registry.go

@@ -557,6 +557,13 @@ var (
 			FrontendOnly: true,
 			Owner:        awsPluginsSquad,
 		},
+		{
+			Name:         "exploreScrollableLogsContainer",
+			Description:  "Improves the scrolling behavior of logs in Explore",
+			Stage:        FeatureStageExperimental,
+			FrontendOnly: true,
+			Owner:        grafanaObservabilityLogsSquad,
+		},
 		{
 			Name:        "recordedQueriesMulti",
 			Description: "Enables writing multiple items from a single query within Recorded Queries",

pkg/services/featuremgmt/toggles_gen.csv

@@ -81,4 +81,5 @@ lokiPredefinedOperations,experimental,@grafana/observability-logs,false,false,fa
 pluginsFrontendSandbox,experimental,@grafana/plugins-platform-backend,false,false,false,true
 sqlDatasourceDatabaseSelection,preview,@grafana/grafana-bi-squad,false,false,false,true
 cloudWatchLogsMonacoEditor,experimental,@grafana/aws-plugins,false,false,false,true
+exploreScrollableLogsContainer,experimental,@grafana/observability-logs,false,false,false,true
 recordedQueriesMulti,experimental,@grafana/observability-metrics,false,false,false,false

pkg/services/featuremgmt/toggles_gen.go

@@ -335,6 +335,10 @@ const (
 	// Enables the Monaco editor for CloudWatch Logs queries
 	FlagCloudWatchLogsMonacoEditor = "cloudWatchLogsMonacoEditor"
 
+	// FlagExploreScrollableLogsContainer
+	// Improves the scrolling behavior of logs in Explore
+	FlagExploreScrollableLogsContainer = "exploreScrollableLogsContainer"
+
 	// FlagRecordedQueriesMulti
 	// Enables writing multiple items from a single query within Recorded Queries
 	FlagRecordedQueriesMulti = "recordedQueriesMulti"

public/app/features/explore/Logs/Logs.tsx

@@ -27,7 +27,7 @@ import {
   EventBus,
   LogRowContextOptions,
 } from '@grafana/data';
-import { reportInteraction } from '@grafana/runtime';
+import { config, reportInteraction } from '@grafana/runtime';
 import { DataQuery } from '@grafana/schema';
 import {
   RadioButtonGroup,
@@ -102,8 +102,10 @@ interface State {
   contextRow?: LogRowModel;
 }
 
+const scrollableLogsContainer = config.featureToggles.exploreScrollableLogsContainer;
 // We need to override css overflow of divs in Collapse element to enable sticky Logs navigation
 const styleOverridesForStickyNavigation = css`
+  ${scrollableLogsContainer && 'margin-bottom: 0px'};
   & > div {
     overflow: visible;
     & > div {
@@ -632,9 +634,10 @@ const getStyles = (theme: GrafanaTheme2, wrapLogMessage: boolean) => {
       justify-content: space-between;
     `,
     logRows: css`
-      overflow-x: ${wrapLogMessage ? 'unset' : 'scroll'};
+      overflow-x: ${scrollableLogsContainer ? 'scroll;' : `${wrapLogMessage ? 'unset' : 'scroll'};`}
       overflow-y: visible;
       width: 100%;
+      ${scrollableLogsContainer && 'max-height: calc(100vh - 170px);'}
     `,
   };
 };

public/app/features/logs/components/getLogRowStyles.ts

@@ -3,6 +3,7 @@ import memoizeOne from 'memoize-one';
 import tinycolor from 'tinycolor2';
 
 import { colorManipulator, GrafanaTheme2, LogLevel } from '@grafana/data';
+import { config } from '@grafana/runtime';
 import { styleMixins } from '@grafana/ui';
 
 export const getLogLevelStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
@@ -43,6 +44,7 @@ export const getLogLevelStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) =>
 export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
   const hoverBgColor = styleMixins.hoverColor(theme.colors.background.secondary, theme);
   const contextOutlineColor = tinycolor(theme.components.dashboard.background).setAlpha(0.7).toRgbString();
+  const scrollableLogsContainer = config.featureToggles.exploreScrollableLogsContainer;
   return {
     logsRowLevel: css`
       label: logs-row__level;
@@ -70,7 +72,7 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
       font-family: ${theme.typography.fontFamilyMonospace};
       font-size: ${theme.typography.bodySmall.fontSize};
       width: 100%;
-      margin-bottom: ${theme.spacing(2.25)}; /* This is to make sure the last row's LogRowMenu is not cut off. */
+      ${!scrollableLogsContainer && `margin-bottom: ${theme.spacing(2.25)};`}
     `,
     contextBackground: css`
       background: ${hoverBgColor};