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

LogContext: Fix wrong width if lines are wrapped (#56650)

Browse Source
This commit is contained in:
Sven Grossmann 2022-10-10 16:31:14 +02:00 committed by GitHub
parent 65e56c9fb8
commit fb31daa92f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/app/features/logs/components/LogRowContext.tsx
View File

@ -35,13 +35,13 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
const headerHeight = 40;
const logsHeight = 220;
const contextHeight = headerHeight + logsHeight;
const width = wrapLogMessage ? '100%' : '75%';
const afterContext = wrapLogMessage
? css`
top: -${contextHeight}px;
`
: css`
margin-top: -${contextHeight}px;
width: 75%;
`;
const beforeContext = wrapLogMessage
@ -50,9 +50,11 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
`
: css`
margin-top: 20px;
width: 75%;
`;
return {
width: css`
width: ${width};
`,
commonStyles: css`
position: absolute;
height: ${contextHeight}px;
@ -78,7 +80,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
`,
title: css`
position: absolute;
width: 75%;
width: ${width};
margin-top: -${contextHeight + headerHeight}px;
z-index: ${theme.zIndex.modal};
height: ${headerHeight}px;
@ -297,7 +299,7 @@ export const LogRowContext: React.FunctionComponent<LogRowContextProps> = ({
document.removeEventListener('keydown', handleEscKeyDown, false);
};
}, [onOutsideClick]);
const { afterContext, beforeContext, title, top, actions } = useStyles2((theme) =>
const { afterContext, beforeContext, title, top, actions, width } = useStyles2((theme) =>
getLogRowContextStyles(theme, wrapLogMessage)
);
@ -311,7 +313,7 @@ export const LogRowContext: React.FunctionComponent<LogRowContextProps> = ({
rows={context.after}
error={errors && errors.after}
row={row}
className={cx(afterContext, top)}
className={cx(afterContext, top, width)}
shouldScrollToBottom
canLoadMoreRows={hasMoreContextRows ? hasMoreContextRows.after : false}
onLoadMoreContext={onLoadMoreContext}
@ -327,12 +329,12 @@ export const LogRowContext: React.FunctionComponent<LogRowContextProps> = ({
row={row}
rows={context.before}
error={errors && errors.before}
className={beforeContext}
className={cx(beforeContext, width)}
groupPosition={LogGroupPosition.Bottom}
logsSortOrder={logsSortOrder}
/>
)}
<div className={title}>
<div className={cx(title, width)}>
<h5>Log context</h5>
<div className={actions}>
<IconButton size="lg" name="times" onClick={onOutsideClick} />