Log Row: Fix menu styling and dimensions (#69569)

* fix wrong logrowmenu styling

* fix imports
This commit is contained in:
Sven Grossmann 2023-06-05 20:24:41 +02:00 committed by GitHub
parent fa2e27e175
commit 9d2f4786c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 17 deletions

View File

@ -3,8 +3,8 @@ import memoizeOne from 'memoize-one';
import React, { PureComponent } from 'react';
import Highlighter from 'react-highlight-words';
import { LogRowModel, findHighlightChunksInText, CoreApp } from '@grafana/data';
import { ClipboardButton, IconButton, Tooltip } from '@grafana/ui';
import { CoreApp, findHighlightChunksInText, LogRowModel } from '@grafana/data';
import { ClipboardButton, IconButton } from '@grafana/ui';
import { LogMessageAnsi } from './LogMessageAnsi';
import { LogRowStyles } from './getLogRowStyles';
@ -100,16 +100,15 @@ export class LogRowMessage extends PureComponent<Props> {
</div>
</td>
<td className={cx('log-row-menu-cell', styles.logRowMenuCell)}>
<span
className={cx('log-row-menu', styles.rowMenu, {
[styles.rowMenuWithContextButton]: shouldShowContextToggle,
})}
onClick={this.onLogRowClick}
>
<span className={cx('log-row-menu', styles.rowMenu)} onClick={this.onLogRowClick}>
{shouldShowContextToggle && (
<Tooltip placement="top" content={'Show context'}>
<IconButton size="md" name="gf-show-context" onClick={this.onShowContextClick} />
</Tooltip>
<IconButton
tooltip="Show context"
tooltipPlacement="top"
size="md"
name="gf-show-context"
onClick={this.onShowContextClick}
/>
)}
<ClipboardButton
className={styles.copyLogButton}

View File

@ -241,16 +241,12 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
position: absolute;
top: 0;
bottom: auto;
height: ${theme.spacing(4.5)};
background: ${theme.colors.background.primary};
box-shadow: ${theme.shadows.z3};
padding: ${theme.spacing(0, 0, 0, 0.5)};
padding: ${theme.spacing(0.5, 0.5, 0.5, 1)};
z-index: 100;
visibility: hidden;
width: ${theme.spacing(5)};
`,
rowMenuWithContextButton: css`
width: ${theme.spacing(10)};
gap: ${theme.spacing(0.5)};
`,
logRowMenuCell: css`
position: sticky;