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

Log Context: Add wrap lines button to easier wrap lines (#67047)

Browse Source 
* add wrap lines button

* change default to 50 lines

* fix test

* change css classes
This commit is contained in:
Sven Grossmann 2023-04-21 17:21:02 +02:00 committed by GitHub
parent d419402a43
commit 6abd75b69c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 47 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/features/explore/utils/logs.ts
View File

@ -4,4 +4,5 @@ export const SETTINGS_KEYS = {
wrapLogMessage: 'grafana.explore.logs.wrapLogMessage',
prettifyLogMessage: 'grafana.explore.logs.prettifyLogMessage',
logsSortOrder: 'grafana.explore.logs.sortOrder',
logContextWrapLogMessage: 'grafana.explore.logs.logContext.wrapLogMessage',
};

33
public/app/features/logs/components/log-context/LogContextButtons.tsx
View File

@ -1,12 +1,13 @@
import { css } from '@emotion/css';
import React from 'react';
import React, { useCallback } from 'react';
import { SelectableValue } from '@grafana/data';
import { ButtonGroup, ButtonSelect, useStyles2 } from '@grafana/ui';
import { reportInteraction } from '@grafana/runtime';
import { ButtonGroup, ButtonSelect, InlineField, InlineFieldRow, InlineSwitch, useStyles2 } from '@grafana/ui';
const getStyles = () => {
return {
logSamplesButton: css`
buttonGroup: css`
display: inline-flex;
`,
};
@ -24,14 +25,36 @@ export type Props = {
option: SelectableValue<number>;
onChangeOption: (item: SelectableValue<number>) => void;
position?: 'top' | 'bottom';
wrapLines?: boolean;
onChangeWrapLines?: (wrapLines: boolean) => void;
};
export const LogContextButtons = (props: Props) => {
const { option, onChangeOption } = props;
const { option, onChangeOption, wrapLines, onChangeWrapLines, position } = props;
const internalOnChangeWrapLines = useCallback(
(event: React.FormEvent<HTMLInputElement>) => {
if (onChangeWrapLines) {
const state = event.currentTarget.checked;
reportInteraction('grafana_explore_logs_log_context_toggle_lines_clicked', {
state,
});
onChangeWrapLines(state);
}
},
[onChangeWrapLines]
);
const styles = useStyles2(getStyles);
return (
<ButtonGroup className={styles.logSamplesButton}>
<ButtonGroup className={styles.buttonGroup}>
{position === 'top' && onChangeWrapLines && (
<InlineFieldRow>
<InlineField label="Wrap lines">
<InlineSwitch value={wrapLines} onChange={internalOnChangeWrapLines} />
</InlineField>
</InlineFieldRow>
)}
<ButtonSelect variant="canvas" value={option} options={LoadMoreOptions} onChange={onChangeOption} />
</ButtonGroup>
);

2
public/app/features/logs/components/log-context/LogRowContextModal.test.tsx
View File

@ -114,7 +114,7 @@ describe('LogRowContextModal', () => {
await waitFor(() => expect(getRowContext).toHaveBeenCalledTimes(2));
const tenLinesButton = screen.getByRole('button', {
name: /10 lines/i,
name: /50 lines/i,
});
await userEvent.click(tenLinesButton);
const twentyLinesButton = screen.getByRole('menuitemradio', {

23
public/app/features/logs/components/log-context/LogRowContextModal.tsx
View File

@ -142,10 +142,15 @@ export const LogRowContextModal: React.FunctionComponent<LogRowContextModalProps
const theme = useTheme2();
const styles = getStyles(theme);
const [context, setContext] = useState<{ after: LogRowModel[]; before: LogRowModel[] }>({ after: [], before: [] });
const [limit, setLimit] = useState<number>(LoadMoreOptions[0].value!);
// LoadMoreOptions[2] refers to 50 lines
const defaultLimit = LoadMoreOptions[2];
const [limit, setLimit] = useState<number>(defaultLimit.value!);
const [loadingWidth, setLoadingWidth] = useState(0);
const [loadMoreOption, setLoadMoreOption] = useState<SelectableValue<number>>(LoadMoreOptions[0]);
const [loadMoreOption, setLoadMoreOption] = useState<SelectableValue<number>>(defaultLimit);
const [contextQuery, setContextQuery] = useState<DataQuery | null>(null);
const [wrapLines, setWrapLines] = useState(
store.getBool(SETTINGS_KEYS.logContextWrapLogMessage, store.getBool(SETTINGS_KEYS.wrapLogMessage, true))
);
const getFullTimeRange = useCallback(() => {
const { before, after } = context;
@ -265,7 +270,13 @@ export const LogRowContextModal: React.FunctionComponent<LogRowContextModalProps
Showing {context.after.length} lines {logsSortOrder === LogsSortOrder.Ascending ? 'after' : 'before'} match.
</div>
<div>
<LogContextButtons onChangeOption={onChangeLimitOption} option={loadMoreOption} />
<LogContextButtons
position="top"
wrapLines={wrapLines}
onChangeWrapLines={setWrapLines}
onChangeOption={onChangeLimitOption}
option={loadMoreOption}
/>
</div>
</div>
<div className={loading ? '' : styles.hidden}>
@ -281,7 +292,7 @@ export const LogRowContextModal: React.FunctionComponent<LogRowContextModalProps
dedupStrategy={LogsDedupStrategy.none}
showLabels={store.getBool(SETTINGS_KEYS.showLabels, false)}
showTime={store.getBool(SETTINGS_KEYS.showTime, true)}
wrapLogMessage={store.getBool(SETTINGS_KEYS.wrapLogMessage, true)}
wrapLogMessage={wrapLines}
prettifyLogMessage={store.getBool(SETTINGS_KEYS.prettifyLogMessage, false)}
enableLogDetails={true}
timeZone={timeZone}
@ -299,7 +310,7 @@ export const LogRowContextModal: React.FunctionComponent<LogRowContextModalProps
dedupStrategy={LogsDedupStrategy.none}
showLabels={store.getBool(SETTINGS_KEYS.showLabels, false)}
showTime={store.getBool(SETTINGS_KEYS.showTime, true)}
wrapLogMessage={store.getBool(SETTINGS_KEYS.wrapLogMessage, true)}
wrapLogMessage={wrapLines}
prettifyLogMessage={store.getBool(SETTINGS_KEYS.prettifyLogMessage, false)}
enableLogDetails={true}
timeZone={timeZone}
@ -316,7 +327,7 @@ export const LogRowContextModal: React.FunctionComponent<LogRowContextModalProps
dedupStrategy={LogsDedupStrategy.none}
showLabels={store.getBool(SETTINGS_KEYS.showLabels, false)}
showTime={store.getBool(SETTINGS_KEYS.showTime, true)}
wrapLogMessage={store.getBool(SETTINGS_KEYS.wrapLogMessage, true)}
wrapLogMessage={wrapLines}
prettifyLogMessage={store.getBool(SETTINGS_KEYS.prettifyLogMessage, false)}
enableLogDetails={true}
timeZone={timeZone}