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: Position LogRowMenu sticky to be able to use it in scrollable containers (#65502)

Browse Source 
* fix logrowmenu

* remove comment

* add comment

* get rid of absolute positions

* remove `inExplore` check
This commit is contained in:
Sven Grossmann 2023-03-29 15:55:28 +02:00 committed by GitHub
parent d4397fae25
commit 07d960ac26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/app/features/logs/components/LogRowMessage.tsx
View File

@ -109,7 +109,6 @@ export class LogRowMessage extends PureComponent<Props> {
wrapLogMessage,
prettifyLogMessage,
onToggleContext,
app,
logsSortOrder,
showContextToggle,
getLogRowContextUi,
@ -118,7 +117,6 @@ export class LogRowMessage extends PureComponent<Props> {
const { hasAnsi, raw } = row;
const restructuredEntry = restructureLog(raw, prettifyLogMessage);
const shouldShowContextToggle = showContextToggle ? showContextToggle(row) : false;
const inExplore = app === CoreApp.Explore;
return (
<>
@ -161,13 +159,7 @@ export class LogRowMessage extends PureComponent<Props> {
</div>
</td>
{showRowMenu && (
<td
className={cx('log-row-menu-cell', styles.logRowMenuCell, {
[styles.logRowMenuCellDefaultPosition]: !inExplore,
[styles.logRowMenuCellExplore]: inExplore && !shouldShowContextToggle,
[styles.logRowMenuCellExploreWithContextButton]: inExplore && shouldShowContextToggle,
})}
>
<td className={cx('log-row-menu-cell', styles.logRowMenuCell)}>
<span
className={cx('log-row-menu', styles.rowMenu, {
[styles.rowMenuWithContextButton]: shouldShowContextToggle,

18
public/app/features/logs/components/getLogRowStyles.ts
View File

@ -70,6 +70,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. */
`,
contextBackground: css`
background: ${hoverBgColor};
@ -241,17 +242,14 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
width: ${theme.spacing(10)};
`,
logRowMenuCell: css`
position: absolute;
position: sticky;
z-index: ${theme.zIndex.dropdown};
margin-top: -${theme.spacing(0.125)};
`,
logRowMenuCellDefaultPosition: css`
right: 40px;
`,
logRowMenuCellExplore: css`
right: calc(115px + ${theme.spacing(1)});
`,
logRowMenuCellExploreWithContextButton: css`
right: calc(155px + ${theme.spacing(1)});
right: 0px;
& > span {
transform: translateX(-100%);
}
`,
logLine: css`
background-color: transparent;