From cda10fae525d5cf784368791e1aaa1de2ce88f4b Mon Sep 17 00:00:00 2001 From: Gareth Dawson Date: Thu, 15 Jun 2023 12:25:34 +0100 Subject: [PATCH] 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 * rename feature toggle --------- Co-authored-by: Sven Grossmann --- .../configure-grafana/feature-toggles/index.md | 1 + packages/grafana-data/src/types/featureToggles.gen.ts | 1 + pkg/services/featuremgmt/registry.go | 7 +++++++ pkg/services/featuremgmt/toggles_gen.csv | 1 + pkg/services/featuremgmt/toggles_gen.go | 4 ++++ public/app/features/explore/Logs/Logs.tsx | 7 +++++-- public/app/features/logs/components/getLogRowStyles.ts | 4 +++- 7 files changed, 22 insertions(+), 3 deletions(-) diff --git a/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md b/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md index 6a46e2f25ff..1f3f9d12f48 100644 --- a/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md +++ b/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 diff --git a/packages/grafana-data/src/types/featureToggles.gen.ts b/packages/grafana-data/src/types/featureToggles.gen.ts index 8d203e6e611..ed48409bb9b 100644 --- a/packages/grafana-data/src/types/featureToggles.gen.ts +++ b/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; } diff --git a/pkg/services/featuremgmt/registry.go b/pkg/services/featuremgmt/registry.go index 19c10cdb6ad..7aa8b4c0c88 100644 --- a/pkg/services/featuremgmt/registry.go +++ b/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", diff --git a/pkg/services/featuremgmt/toggles_gen.csv b/pkg/services/featuremgmt/toggles_gen.csv index b9f1a43dc8f..a9cba470996 100644 --- a/pkg/services/featuremgmt/toggles_gen.csv +++ b/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 diff --git a/pkg/services/featuremgmt/toggles_gen.go b/pkg/services/featuremgmt/toggles_gen.go index 9d3fb419e6a..2ab472b452c 100644 --- a/pkg/services/featuremgmt/toggles_gen.go +++ b/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" diff --git a/public/app/features/explore/Logs/Logs.tsx b/public/app/features/explore/Logs/Logs.tsx index 83139785915..7782d901dc7 100644 --- a/public/app/features/explore/Logs/Logs.tsx +++ b/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);'} `, }; }; diff --git a/public/app/features/logs/components/getLogRowStyles.ts b/public/app/features/logs/components/getLogRowStyles.ts index 4c737403bbc..b35ac2738d6 100644 --- a/public/app/features/logs/components/getLogRowStyles.ts +++ b/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};