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, wrapLogMessage,
prettifyLogMessage, prettifyLogMessage,
onToggleContext, onToggleContext,
app,
logsSortOrder, logsSortOrder,
showContextToggle, showContextToggle,
getLogRowContextUi, getLogRowContextUi,
@ -118,7 +117,6 @@ export class LogRowMessage extends PureComponent<Props> {
const { hasAnsi, raw } = row; const { hasAnsi, raw } = row;
const restructuredEntry = restructureLog(raw, prettifyLogMessage); const restructuredEntry = restructureLog(raw, prettifyLogMessage);
const shouldShowContextToggle = showContextToggle ? showContextToggle(row) : false; const shouldShowContextToggle = showContextToggle ? showContextToggle(row) : false;
const inExplore = app === CoreApp.Explore;
return ( return (
<> <>
@ -161,13 +159,7 @@ export class LogRowMessage extends PureComponent<Props> {
</div> </div>
</td> </td>
{showRowMenu && ( {showRowMenu && (
<td <td className={cx('log-row-menu-cell', styles.logRowMenuCell)}>
className={cx('log-row-menu-cell', styles.logRowMenuCell, {
[styles.logRowMenuCellDefaultPosition]: !inExplore,
[styles.logRowMenuCellExplore]: inExplore && !shouldShowContextToggle,
[styles.logRowMenuCellExploreWithContextButton]: inExplore && shouldShowContextToggle,
})}
>
<span <span
className={cx('log-row-menu', styles.rowMenu, { className={cx('log-row-menu', styles.rowMenu, {
[styles.rowMenuWithContextButton]: shouldShowContextToggle, [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-family: ${theme.typography.fontFamilyMonospace};
font-size: ${theme.typography.bodySmall.fontSize}; font-size: ${theme.typography.bodySmall.fontSize};
width: 100%; width: 100%;
margin-bottom: ${theme.spacing(2.25)}; /* This is to make sure the last row's LogRowMenu is not cut off. */
`, `,
contextBackground: css` contextBackground: css`
background: ${hoverBgColor}; background: ${hoverBgColor};
@ -241,17 +242,14 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
width: ${theme.spacing(10)}; width: ${theme.spacing(10)};
`, `,
logRowMenuCell: css` logRowMenuCell: css`
position: absolute; position: sticky;
z-index: ${theme.zIndex.dropdown};
margin-top: -${theme.spacing(0.125)}; margin-top: -${theme.spacing(0.125)};
`, right: 0px;
logRowMenuCellDefaultPosition: css`
right: 40px; & > span {
`, transform: translateX(-100%);
logRowMenuCellExplore: css` }
right: calc(115px + ${theme.spacing(1)});
`,
logRowMenuCellExploreWithContextButton: css`
right: calc(155px + ${theme.spacing(1)});
`, `,
logLine: css` logLine: css`
background-color: transparent; background-color: transparent;