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>
This commit is contained in:
Gareth Dawson 2023-06-15 12:25:34 +01:00 committed by GitHub
parent 57d7288fe4
commit cda10fae52
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 22 additions and 3 deletions

View File

@ -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

View File

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

View File

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

View File

@ -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

1 Name Stage Owner requiresDevMode RequiresLicense RequiresRestart FrontendOnly
81 pluginsFrontendSandbox experimental @grafana/plugins-platform-backend false false false true
82 sqlDatasourceDatabaseSelection preview @grafana/grafana-bi-squad false false false true
83 cloudWatchLogsMonacoEditor experimental @grafana/aws-plugins false false false true
84 exploreScrollableLogsContainer experimental @grafana/observability-logs false false false true
85 recordedQueriesMulti experimental @grafana/observability-metrics false false false false

View File

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

View File

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

View File

@ -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};