mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Log Details: Display all field options and remove "show more" (#64334)
* Log details: stop hiding field options * back to iconbutton --------- Co-authored-by: Sven Grossmann <svennergr@gmail.com>
This commit is contained in:
parent
5ba2ca83d5
commit
3292cb86ae
@ -5,7 +5,7 @@ import React, { PureComponent } from 'react';
|
||||
|
||||
import { CoreApp, Field, GrafanaTheme2, LinkModel, LogLabelStatsModel, LogRowModel } from '@grafana/data';
|
||||
import { reportInteraction } from '@grafana/runtime';
|
||||
import { ClipboardButton, DataLinkButton, Themeable2, ToolbarButton, ToolbarButtonRow, withTheme2 } from '@grafana/ui';
|
||||
import { ClipboardButton, DataLinkButton, IconButton, Themeable2, withTheme2 } from '@grafana/ui';
|
||||
|
||||
import { LogLabelStats } from './LogLabelStats';
|
||||
import { getLogRowStyles } from './getLogRowStyles';
|
||||
@ -36,23 +36,10 @@ interface State {
|
||||
|
||||
const getStyles = memoizeOne((theme: GrafanaTheme2) => {
|
||||
return {
|
||||
noHoverBackground: css`
|
||||
label: noHoverBackground;
|
||||
:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
`,
|
||||
hoverCursor: css`
|
||||
label: hoverCursor;
|
||||
cursor: pointer;
|
||||
`,
|
||||
wordBreakAll: css`
|
||||
label: wordBreakAll;
|
||||
word-break: break-all;
|
||||
`,
|
||||
showingField: css`
|
||||
color: ${theme.colors.primary.text};
|
||||
`,
|
||||
copyButton: css`
|
||||
& > button {
|
||||
color: ${theme.colors.text.secondary};
|
||||
@ -77,38 +64,6 @@ const getStyles = memoizeOne((theme: GrafanaTheme2) => {
|
||||
label: wrapLine;
|
||||
white-space: pre-wrap;
|
||||
`,
|
||||
toolbarButtonRow: css`
|
||||
label: toolbarButtonRow;
|
||||
gap: ${theme.spacing(0.5)};
|
||||
|
||||
max-width: calc(3 * ${theme.spacing(theme.components.height.sm)});
|
||||
& > div {
|
||||
height: ${theme.spacing(theme.components.height.sm)};
|
||||
width: ${theme.spacing(theme.components.height.sm)};
|
||||
& > button {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
height: inherit;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
toolbarButtonRowActive: css`
|
||||
& div:last-child > button:not(.stats-button) {
|
||||
color: ${theme.v1.palette.orangeDark};
|
||||
border-color: ${theme.v1.palette.orangeDark};
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
color: ${theme.colors.text.primary};
|
||||
background: ${theme.colors.emphasize(theme.colors.background.canvas, 0.03)};
|
||||
}
|
||||
}
|
||||
`,
|
||||
logDetailsStats: css`
|
||||
padding: 0 ${theme.spacing(1)};
|
||||
`,
|
||||
@ -127,6 +82,12 @@ const getStyles = memoizeOne((theme: GrafanaTheme2) => {
|
||||
}
|
||||
}
|
||||
`,
|
||||
buttonRow: css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: ${theme.spacing(0.5)};
|
||||
margin-left: ${theme.spacing(0.5)};
|
||||
`,
|
||||
};
|
||||
});
|
||||
|
||||
@ -242,61 +203,37 @@ class UnThemedLogDetailsRow extends PureComponent<Props, State> {
|
||||
onClickFilterOutLabel,
|
||||
} = this.props;
|
||||
const { showFieldsStats, fieldStats, fieldCount } = this.state;
|
||||
const activeButton = displayedFields?.includes(parsedKey) || showFieldsStats;
|
||||
const styles = getStyles(theme);
|
||||
const style = getLogRowStyles(theme);
|
||||
const hasFilteringFunctionality = onClickFilterLabel && onClickFilterOutLabel;
|
||||
|
||||
const toggleFieldButton =
|
||||
displayedFields && displayedFields.includes(parsedKey) ? (
|
||||
<ToolbarButton variant="active" tooltip="Hide this field" iconOnly narrow icon="eye" onClick={this.hideField} />
|
||||
<IconButton variant="primary" tooltip="Hide this field" name="eye" onClick={this.hideField} />
|
||||
) : (
|
||||
<ToolbarButton
|
||||
tooltip="Show this field instead of the message"
|
||||
iconOnly
|
||||
narrow
|
||||
icon="eye"
|
||||
onClick={this.showField}
|
||||
/>
|
||||
<IconButton tooltip="Show this field instead of the message" name="eye" onClick={this.showField} />
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<tr className={cx(style.logDetailsValue)}>
|
||||
<td className={style.logsDetailsIcon}>
|
||||
<ToolbarButtonRow
|
||||
alignment="left"
|
||||
className={cx(styles.toolbarButtonRow, activeButton && styles.toolbarButtonRowActive)}
|
||||
>
|
||||
<div className={styles.buttonRow}>
|
||||
{hasFilteringFunctionality && (
|
||||
<ToolbarButton
|
||||
iconOnly
|
||||
narrow
|
||||
icon="search-plus"
|
||||
tooltip="Filter for value"
|
||||
onClick={this.filterLabel}
|
||||
/>
|
||||
<IconButton name="search-plus" tooltip="Filter for value" onClick={this.filterLabel} />
|
||||
)}
|
||||
{hasFilteringFunctionality && (
|
||||
<ToolbarButton
|
||||
iconOnly
|
||||
narrow
|
||||
icon="search-minus"
|
||||
tooltip="Filter out value"
|
||||
onClick={this.filterOutLabel}
|
||||
/>
|
||||
<IconButton name="search-minus" tooltip="Filter out value" onClick={this.filterOutLabel} />
|
||||
)}
|
||||
{displayedFields && toggleFieldButton}
|
||||
<ToolbarButton
|
||||
iconOnly
|
||||
variant={showFieldsStats ? 'active' : 'default'}
|
||||
narrow
|
||||
icon="signal"
|
||||
<IconButton
|
||||
variant={showFieldsStats ? 'primary' : 'secondary'}
|
||||
name="signal"
|
||||
tooltip="Ad-hoc statistics"
|
||||
className="stats-button"
|
||||
onClick={this.showStats}
|
||||
/>
|
||||
</ToolbarButtonRow>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Key - value columns */}
|
||||
@ -328,16 +265,12 @@ class UnThemedLogDetailsRow extends PureComponent<Props, State> {
|
||||
{showFieldsStats && (
|
||||
<tr>
|
||||
<td>
|
||||
<ToolbarButtonRow alignment="left" className={styles.toolbarButtonRow}>
|
||||
<ToolbarButton
|
||||
iconOnly
|
||||
variant={showFieldsStats ? 'active' : 'default'}
|
||||
narrow
|
||||
icon="signal"
|
||||
tooltip="Hide ad-hoc statistics"
|
||||
onClick={this.showStats}
|
||||
/>
|
||||
</ToolbarButtonRow>
|
||||
<IconButton
|
||||
variant={showFieldsStats ? 'primary' : 'secondary'}
|
||||
name="signal"
|
||||
tooltip="Hide ad-hoc statistics"
|
||||
onClick={this.showStats}
|
||||
/>
|
||||
</td>
|
||||
<td colSpan={2}>
|
||||
<div className={styles.logDetailsStats}>
|
||||
|
Loading…
Reference in New Issue
Block a user