mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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:
parent
57d7288fe4
commit
cda10fae52
@ -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
|
||||
|
@ -100,5 +100,6 @@ export interface FeatureToggles {
|
||||
pluginsFrontendSandbox?: boolean;
|
||||
sqlDatasourceDatabaseSelection?: boolean;
|
||||
cloudWatchLogsMonacoEditor?: boolean;
|
||||
exploreScrollableLogsContainer?: boolean;
|
||||
recordedQueriesMulti?: boolean;
|
||||
}
|
||||
|
@ -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",
|
||||
|
@ -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
|
||||
|
|
@ -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"
|
||||
|
@ -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);'}
|
||||
`,
|
||||
};
|
||||
};
|
||||
|
@ -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};
|
||||
|
Loading…
Reference in New Issue
Block a user