IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Logs: Add new scroll behaviour to logs samples panel (#70320)

Browse Source 
update log sample scroll with new bahaviour
This commit is contained in:
Gareth Dawson 2023-06-20 09:40:10 +01:00 committed by GitHub
parent 750630626e
commit b552595e0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
public/app/features/explore/Logs/LogsSamplePanel.tsx
View File

@ -11,7 +11,7 @@ import {
SplitOpen, SplitOpen,
SupplementaryQueryType, SupplementaryQueryType,
} from '@grafana/data'; } from '@grafana/data';
import { reportInteraction } from '@grafana/runtime'; import { config, reportInteraction } from '@grafana/runtime';
import { DataQuery, TimeZone } from '@grafana/schema'; import { DataQuery, TimeZone } from '@grafana/schema';
import { Button, Collapse, Icon, Tooltip, useStyles2 } from '@grafana/ui'; import { Button, Collapse, Icon, Tooltip, useStyles2 } from '@grafana/ui';
import { dataFrameToLogsModel } from 'app/core/logsModel'; import { dataFrameToLogsModel } from 'app/core/logsModel';
@ -107,6 +107,7 @@ export function LogsSamplePanel(props: Props) {
return queryResponse?.state !== LoadingState.NotStarted ? ( return queryResponse?.state !== LoadingState.NotStarted ? (
<Collapse <Collapse
className={styles.logsSamplePanel}
label={ label={
<div> <div>
Logs sample Logs sample
@ -124,16 +125,25 @@ export function LogsSamplePanel(props: Props) {
) : null; ) : null;
} }
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => {
logSamplesButton: css` const scrollableLogsContainer = config.featureToggles.exploreScrollableLogsContainer;
position: absolute;
top: ${theme.spacing(1)}; return {
right: ${theme.spacing(1)}; logsSamplePanel: css`
`, ${scrollableLogsContainer && 'max-height: calc(100vh - 115px);'}
logContainer: css` `,
overflow-x: scroll; logSamplesButton: css`
`, position: absolute;
infoTooltip: css` top: ${theme.spacing(1)};
margin-left: ${theme.spacing(1)}; right: ${theme.spacing(1)};
`, `,
}); logContainer: css`
${scrollableLogsContainer && 'position: relative;'}
${scrollableLogsContainer && 'height: 100%;'}
overflow: scroll;
`,
infoTooltip: css`
margin-left: ${theme.spacing(1)};
`,
};
};