apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

LogContext: Improve text describing the loglines (#55475)

Browse Source 
* changed messages before and after LogContext

* add comment explaining the if

* add tests

* removed unused divs

* improved if statements
pull/55921/head
Sven Grossmann 3 years ago committed by GitHub
parent a45ef61d25
commit 7e8738e01e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 70 additions and 13 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      public/app/features/logs/components/LogRow.tsx
  2. 32
      public/app/features/logs/components/LogRowContext.test.tsx
  3. 36
      public/app/features/logs/components/LogRowContext.tsx
  4. 2
      public/app/features/logs/components/LogRowContextProvider.tsx
  5. 5
      public/app/features/logs/components/LogRowMessage.tsx

8
public/app/features/logs/components/LogRow.tsx
Unescape View File

@ -119,7 +119,8 @@ class UnThemedLogRow extends PureComponent<Props, State> {
context?: LogRowContextRows,
errors?: LogRowContextQueryErrors,
hasMoreContextRows?: HasMoreContextRows,
updateLimit?: () => void
updateLimit?: () => void,
logsSortOrder?: LogsSortOrder | null
) {
const {
getRows,
@ -209,6 +210,7 @@ class UnThemedLogRow extends PureComponent<Props, State> {
wrapLogMessage={wrapLogMessage}
prettifyLogMessage={prettifyLogMessage}
onToggleContext={this.toggleContext}
logsSortOrder={logsSortOrder}
/>
)}
</tr>
@ -240,8 +242,8 @@ class UnThemedLogRow extends PureComponent<Props, State> {
return (
<>
<LogRowContextProvider row={row} getRowContext={getRowContext} logsSortOrder={logsSortOrder}>
{({ result, errors, hasMoreContextRows, updateLimit }) => {
return <>{this.renderLogRow(result, errors, hasMoreContextRows, updateLimit)}</>;
{({ result, errors, hasMoreContextRows, updateLimit, logsSortOrder }) => {
return <>{this.renderLogRow(result, errors, hasMoreContextRows, updateLimit, logsSortOrder)}</>;
}}
</LogRowContextProvider>
</>

32
public/app/features/logs/components/LogRowContext.test.tsx
Unescape View File

@ -1,9 +1,9 @@
import { render, screen } from '@testing-library/react';
import React from 'react';
import { LogRowModel } from '@grafana/data';
import { LogRowModel, LogsSortOrder } from '@grafana/data';
import { LogRowContextGroup } from './LogRowContext';
import { LogGroupPosition, LogRowContextGroup } from './LogRowContext';
describe('LogRowContextGroup component', () => {
it('should correctly render logs with ANSI', () => {
@ -13,13 +13,31 @@ describe('LogRowContextGroup component', () => {
canLoadMoreRows: false,
row: {} as LogRowModel,
className: '',
groupPosition: LogGroupPosition.Top,
};
render(
<div>
<LogRowContextGroup {...defaultProps} />
</div>
);
render(<LogRowContextGroup {...defaultProps} />);
expect(screen.getAllByTestId('ansiLogLine')).toHaveLength(2);
});
it.each([
[LogGroupPosition.Top, LogsSortOrder.Ascending, 'before'],
[LogGroupPosition.Top, LogsSortOrder.Descending, 'after'],
[LogGroupPosition.Bottom, LogsSortOrder.Ascending, 'after'],
[LogGroupPosition.Bottom, LogsSortOrder.Descending, 'before'],
])(`should when component is %s and sorting is %s display '%s'`, async (groupPosition, logsSortOrder, expected) => {
const defaultProps = {
rows: ['Log 1', 'Log 2', 'Log 3'],
onLoadMoreContext: () => {},
canLoadMoreRows: false,
row: {} as LogRowModel,
className: '',
groupPosition,
logsSortOrder,
};
render(<LogRowContextGroup {...defaultProps} />);
expect(await screen.findByText(`Showing 3 lines ${expected} match.`)).toBeInTheDocument();
});
});

36
public/app/features/logs/components/LogRowContext.tsx
Unescape View File

@ -1,18 +1,24 @@
import { css, cx } from '@emotion/css';
import React, { useRef, useState, useLayoutEffect, useEffect } from 'react';
import { GrafanaTheme2, DataQueryError, LogRowModel, textUtil } from '@grafana/data';
import { GrafanaTheme2, DataQueryError, LogRowModel, textUtil, LogsSortOrder } from '@grafana/data';
import { useStyles2, Alert, ClickOutsideWrapper, CustomScrollbar, List } from '@grafana/ui';
import { LogMessageAnsi } from './LogMessageAnsi';
import { LogRowContextRows, LogRowContextQueryErrors, HasMoreContextRows } from './LogRowContextProvider';
export enum LogGroupPosition {
Bottom = 'bottom',
Top = 'top',
}
interface LogRowContextProps {
row: LogRowModel;
context: LogRowContextRows;
wrapLogMessage: boolean;
errors?: LogRowContextQueryErrors;
hasMoreContextRows?: HasMoreContextRows;
logsSortOrder?: LogsSortOrder | null;
onOutsideClick: () => void;
onLoadMoreContext: () => void;
}
@ -74,13 +80,17 @@ interface LogRowContextGroupHeaderProps {
row: LogRowModel;
rows: Array<string | DataQueryError>;
onLoadMoreContext: () => void;
groupPosition: LogGroupPosition;
shouldScrollToBottom?: boolean;
canLoadMoreRows?: boolean;
logsSortOrder?: LogsSortOrder | null;
}
interface LogRowContextGroupProps extends LogRowContextGroupHeaderProps {
rows: Array<string | DataQueryError>;
groupPosition: LogGroupPosition;
className?: string;
error?: string;
logsSortOrder?: LogsSortOrder | null;
}
const LogRowContextGroupHeader: React.FunctionComponent<LogRowContextGroupHeaderProps> = ({
@ -88,9 +98,22 @@ const LogRowContextGroupHeader: React.FunctionComponent<LogRowContextGroupHeader
rows,
onLoadMoreContext,
canLoadMoreRows,
groupPosition,
logsSortOrder,
}) => {
const { header } = useStyles2(getLogRowContextStyles);
// determine the position in time for this LogGroup by taking the ordering of
// logs and position of the component itself into account.
let logGroupPosition = 'after';
if (groupPosition === LogGroupPosition.Bottom) {
if (logsSortOrder === LogsSortOrder.Descending) {
logGroupPosition = 'before';
}
} else if (logsSortOrder === LogsSortOrder.Ascending) {
logGroupPosition = 'before';
}
return (
<div className={header}>
<span
@ -98,7 +121,7 @@ const LogRowContextGroupHeader: React.FunctionComponent<LogRowContextGroupHeader
opacity: 0.6;
`}
>
Found {rows.length} rows.
Showing {rows.length} lines {logGroupPosition} match.
</span>
{(rows.length >= 10 || (rows.length > 10 && rows.length % 10 !== 0)) && canLoadMoreRows && (
<span
@ -126,6 +149,8 @@ export const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps
shouldScrollToBottom,
canLoadMoreRows,
onLoadMoreContext,
groupPosition,
logsSortOrder,
}) => {
const { commonStyles, logs } = useStyles2(getLogRowContextStyles);
const [scrollTop, setScrollTop] = useState(0);
@ -144,6 +169,8 @@ export const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps
rows,
onLoadMoreContext,
canLoadMoreRows,
groupPosition,
logsSortOrder,
};
return (
@ -187,6 +214,7 @@ export const LogRowContext: React.FunctionComponent<LogRowContextProps> = ({
onLoadMoreContext,
hasMoreContextRows,
wrapLogMessage,
logsSortOrder,
}) => {
useEffect(() => {
const handleEscKeyDown = (e: KeyboardEvent): void => {
@ -215,6 +243,8 @@ export const LogRowContext: React.FunctionComponent<LogRowContextProps> = ({
shouldScrollToBottom
canLoadMoreRows={hasMoreContextRows ? hasMoreContextRows.after : false}
onLoadMoreContext={onLoadMoreContext}
groupPosition={LogGroupPosition.Top}
logsSortOrder={logsSortOrder}
/>
)}
@ -226,6 +256,8 @@ export const LogRowContext: React.FunctionComponent<LogRowContextProps> = ({
rows={context.before}
error={errors && errors.before}
className={beforeContext}
groupPosition={LogGroupPosition.Bottom}
logsSortOrder={logsSortOrder}
/>
)}
</div>

2
public/app/features/logs/components/LogRowContextProvider.tsx
Unescape View File

@ -45,6 +45,7 @@ interface LogRowContextProviderProps {
hasMoreContextRows: HasMoreContextRows;
updateLimit: () => void;
limit: number;
logsSortOrder?: LogsSortOrder | null;
}) => JSX.Element;
}
@ -208,5 +209,6 @@ export const LogRowContextProvider: React.FunctionComponent<LogRowContextProvide
hasMoreContextRows,
updateLimit: () => setLimit(limit + 10),
limit,
logsSortOrder,
});
};

5
public/app/features/logs/components/LogRowMessage.tsx
Unescape View File

@ -4,7 +4,7 @@ import React, { PureComponent } from 'react';
import Highlighter from 'react-highlight-words';
import tinycolor from 'tinycolor2';
import { LogRowModel, findHighlightChunksInText, GrafanaTheme2 } from '@grafana/data';
import { LogRowModel, findHighlightChunksInText, GrafanaTheme2, LogsSortOrder } from '@grafana/data';
import { withTheme2, Themeable2, IconButton, Tooltip } from '@grafana/ui';
import { LogMessageAnsi } from './LogMessageAnsi';
@ -28,6 +28,7 @@ interface Props extends Themeable2 {
getRows: () => LogRowModel[];
onToggleContext: () => void;
updateLimit?: () => void;
logsSortOrder?: LogsSortOrder | null;
}
const getStyles = (theme: GrafanaTheme2) => {
@ -128,6 +129,7 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
wrapLogMessage,
prettifyLogMessage,
onToggleContext,
logsSortOrder,
} = this.props;
const style = getLogRowStyles(theme, row.logLevel);
@ -150,6 +152,7 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
wrapLogMessage={wrapLogMessage}
hasMoreContextRows={hasMoreContextRows}
onOutsideClick={onToggleContext}
logsSortOrder={logsSortOrder}
onLoadMoreContext={() => {
if (updateLimit) {
updateLimit();

Write Preview
Loading…
Cancel
Save