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

Explore/Logs: Correctly display newlines in detected fields (#29541)

Browse Source 
* Fix using of newlines in detected fields

* Wrapping depends on main selection

* Update props to be optional

* Add missing wrapLogMessage prop to test
This commit is contained in:
Ivana Huckova 2020-12-15 14:43:12 +01:00 committed by GitHub
parent 683ce69347
commit 356fa0dce6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-ui/src/components/Logs/LogDetails.test.tsx
View File

@ -8,6 +8,7 @@ const setup = (propOverrides?: Partial<Props>, rowOverrides?: Partial<LogRowMode
const props: Props = {
theme: {} as GrafanaTheme,
showDuplicates: false,
wrapLogMessage: false,
row: {
dataFrame: new MutableDataFrame(),
entryFieldIndex: 0,

3
packages/grafana-ui/src/components/Logs/LogDetails.tsx
View File

@ -29,6 +29,7 @@ export interface Props extends Themeable {
row: LogRowModel;
showDuplicates: boolean;
getRows: () => LogRowModel[];
wrapLogMessage: boolean;
className?: string;
hasError?: boolean;
onMouseEnter?: () => void;
@ -85,6 +86,7 @@ class UnThemedLogDetails extends PureComponent<Props> {
onClickHideDetectedField,
showDetectedFields,
getFieldLinks,
wrapLogMessage,
} = this.props;
const style = getLogRowStyles(theme, row.logLevel);
const styles = getStyles(theme);
@ -163,6 +165,7 @@ class UnThemedLogDetails extends PureComponent<Props> {
: calculateStats(row.dataFrame.fields[fieldIndex].values.toArray())
}
showDetectedFields={showDetectedFields}
wrapLogMessage={wrapLogMessage}
/>
);
})}

1
packages/grafana-ui/src/components/Logs/LogDetailsRow.test.tsx
View File

@ -10,6 +10,7 @@ const setup = (propOverrides?: Partial<Props>) => {
parsedValue: '',
parsedKey: '',
isLabel: true,
wrapLogMessage: false,
getStats: () => null,
onClickFilterLabel: () => {},
onClickFilterOutLabel: () => {},

9
packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx
View File

@ -15,6 +15,7 @@ import { Tag } from '..';
export interface Props extends Themeable {
parsedValue: string;
parsedKey: string;
wrapLogMessage?: boolean;
isLabel?: boolean;
onClickFilterLabel?: (key: string, value: string) => void;
onClickFilterOutLabel?: (key: string, value: string) => void;
@ -50,6 +51,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
showingField: css`
color: ${theme.palette.blue95};
`,
wrapLine: css`
label: wrapLine;
white-space: pre-wrap;
`,
};
});
@ -107,7 +112,7 @@ class UnThemedLogDetailsRow extends PureComponent<Props, State> {
}
render() {
const { theme, parsedKey, parsedValue, isLabel, links, showDetectedFields } = this.props;
const { theme, parsedKey, parsedValue, isLabel, links, showDetectedFields, wrapLogMessage } = this.props;
const { showFieldsStats, fieldStats, fieldCount } = this.state;
const styles = getStyles(theme);
const style = getLogRowStyles(theme);
@ -146,7 +151,7 @@ class UnThemedLogDetailsRow extends PureComponent<Props, State> {
{/* Key - value columns */}
<td className={style.logDetailsLabel}>{parsedKey}</td>
<td className={styles.wordBreakAll}>
<td className={cx(styles.wordBreakAll, wrapLogMessage && styles.wrapLine)}>
{parsedValue}
{links &&
links.map(link => {

2
packages/grafana-ui/src/components/Logs/LogRow.tsx
View File

@ -203,6 +203,7 @@ class UnThemedLogRow extends PureComponent<Props, State> {
row={row}
showDetectedFields={showDetectedFields!}
getFieldLinks={getFieldLinks}
wrapLogMessage={wrapLogMessage}
/>
) : (
<LogRowMessage
@ -233,6 +234,7 @@ class UnThemedLogRow extends PureComponent<Props, State> {
onClickHideDetectedField={onClickHideDetectedField}
getRows={getRows}
row={row}
wrapLogMessage={wrapLogMessage}
hasError={hasError}
showDetectedFields={showDetectedFields}
/>

12
packages/grafana-ui/src/components/Logs/LogRowMessageDetectedFields.tsx
View File

@ -1,4 +1,5 @@
import React, { PureComponent } from 'react';
import { cx, css } from 'emotion';
import { LogRowModel, Field, LinkModel } from '@grafana/data';
import { Themeable } from '../../types/theme';
@ -9,13 +10,20 @@ import { getAllFields } from './logParser';
export interface Props extends Themeable {
row: LogRowModel;
showDetectedFields: string[];
wrapLogMessage: boolean;
getFieldLinks?: (field: Field, rowIndex: number) => Array<LinkModel<Field>>;
}
class UnThemedLogRowMessageDetectedFields extends PureComponent<Props> {
render() {
const { row, showDetectedFields, getFieldLinks } = this.props;
const { row, showDetectedFields, getFieldLinks, wrapLogMessage } = this.props;
const fields = getAllFields(row, getFieldLinks);
const wrapClassName = cx(
wrapLogMessage &&
css`
white-space: pre-wrap;
`
);
const line = showDetectedFields
.map(parsedKey => {
@ -33,7 +41,7 @@ class UnThemedLogRowMessageDetectedFields extends PureComponent<Props> {
.filter(s => s !== null)
.join(' ');
return <td>{line}</td>;
return <td className={wrapClassName}>{line}</td>;
}
}