mirror of https://github.com/grafana/grafana
Logs Panel: Base elements for the new visualization (#99084)
* Create base components * Create measurement service * Add container for list * Use measurement to render virtualized log lines * Match rendered styles in 2d context for measuring * Improve virtualization initialization and handle resize * Introduce log line processing * Virtualization: fix measurement of lines with line endings * Virtualization: include scrollbar width in calculation * Remove logs * Virtualization: optimize text measurement * Add support for forceEscape * Log line: properly style wrapped/unwrapped lines * Virtualization: handle possible overflows * Improve overflow handling * LogList: remove scroll position ref * Remove logs * Remove log * Add top/bottom navigation buttons * Add timestamp to pre-processing * Add showtime support * Fix imports * Chore: simplify dedup * Show level * Refactor measurement and measure level and timestamp * Virtualization: skip unnecessary measurements * Improve measurements to minimize overflow chance * Introduce logline colors * Update palette * Remove pretiffying * Add comment * Remove unused variable * Add color for info level * Fix dependencies * Refactor overflow to account for smaller estimations * Debounce resizing * Fix imports * Further optimize height calculation * Remove outline * Unused import * Use less under/overflow method * Respond to height changes * Refactor size adjustment to account for layout changes * Add Logs Panel support * Add margin bottom to log lines * Remove unused option * LogList: container div should never be null Bad API design * Log List: make app not undefined and update containerElement usages * New Logs Panel: Create as new visualization (#99427) * Logs Panel: clean up old panel * Logs Panel New: create as new visualization * Plugin: mark as alpha * Logs panel new: hold container in a state variable * Logs panel: fix no data state * Create newLogsPanel feature flag * Logs: use new feature flag * Prettier * Add new panel to code owners * Logs Navigation: add translations * Address betterer issues * Fix import * Extract translations * Update virtualization.ts * Virtualization: add DOM fallback for text measurement * Run gen-cue * plugins_integration_test: add logs-new to expected pluginspull/100089/head
Matias Chomicki
4 months ago
committed by
GitHub
parent
87bb7c3947
commit
ff926c5ac5
@ -0,0 +1,22 @@ |
||||
// Code generated - EDITING IS FUTILE. DO NOT EDIT.
|
||||
//
|
||||
// Generated by:
|
||||
// public/app/plugins/gen.go
|
||||
// Using jennies:
|
||||
// TSTypesJenny
|
||||
// PluginTsTypesJenny
|
||||
//
|
||||
// Run 'make gen-cue' from repository root to regenerate.
|
||||
|
||||
import * as common from '@grafana/schema'; |
||||
|
||||
export const pluginVersion = "11.6.0-pre"; |
||||
|
||||
export interface Options { |
||||
dedupStrategy: common.LogsDedupStrategy; |
||||
enableInfiniteScrolling?: boolean; |
||||
enableLogDetails: boolean; |
||||
showTime: boolean; |
||||
sortOrder: common.LogsSortOrder; |
||||
wrapLogMessage: boolean; |
||||
} |
||||
|
@ -0,0 +1,116 @@ |
||||
import { css } from '@emotion/css'; |
||||
import { CSSProperties, useEffect, useRef } from 'react'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { useTheme2 } from '@grafana/ui'; |
||||
|
||||
import { ProcessedLogModel } from './processing'; |
||||
import { hasUnderOrOverflow } from './virtualization'; |
||||
|
||||
interface Props { |
||||
index: number; |
||||
log: ProcessedLogModel; |
||||
showTime: boolean; |
||||
style: CSSProperties; |
||||
onOverflow?: (index: number, id: string, height: number) => void; |
||||
wrapLogMessage: boolean; |
||||
} |
||||
|
||||
export const LogLine = ({ index, log, style, onOverflow, showTime, wrapLogMessage }: Props) => { |
||||
const theme = useTheme2(); |
||||
const styles = getStyles(theme); |
||||
const logLineRef = useRef<HTMLDivElement | null>(null); |
||||
|
||||
useEffect(() => { |
||||
if (!onOverflow || !logLineRef.current) { |
||||
return; |
||||
} |
||||
const calculatedHeight = typeof style.height === 'number' ? style.height : undefined; |
||||
const actualHeight = hasUnderOrOverflow(logLineRef.current, calculatedHeight); |
||||
if (actualHeight) { |
||||
onOverflow(index, log.uid, actualHeight); |
||||
} |
||||
}, [index, log.uid, onOverflow, style.height]); |
||||
|
||||
return ( |
||||
<div style={style} className={styles.logLine} ref={onOverflow ? logLineRef : undefined}> |
||||
<div className={wrapLogMessage ? styles.wrappedLogLine : styles.unwrappedLogLine}> |
||||
{showTime && <span className={`${styles.timestamp} level-${log.logLevel}`}>{log.timestamp}</span>} |
||||
{log.logLevel && <span className={`${styles.level} level-${log.logLevel}`}>{log.logLevel}</span>} |
||||
{log.body} |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => { |
||||
const colors = { |
||||
critical: '#B877D9', |
||||
error: '#FF5286', |
||||
warning: '#FBAD37', |
||||
debug: '#6CCF8E', |
||||
trace: '#6ed0e0', |
||||
info: '#6E9FFF', |
||||
}; |
||||
|
||||
return { |
||||
logLine: css({ |
||||
color: theme.colors.text.primary, |
||||
fontFamily: theme.typography.fontFamilyMonospace, |
||||
fontSize: theme.typography.fontSize, |
||||
wordBreak: 'break-all', |
||||
'&:hover': { |
||||
opacity: 0.9, |
||||
}, |
||||
}), |
||||
timestamp: css({ |
||||
color: theme.colors.text.secondary, |
||||
display: 'inline-block', |
||||
marginRight: theme.spacing(1), |
||||
'&.level-critical': { |
||||
color: colors.critical, |
||||
}, |
||||
'&.level-error': { |
||||
color: colors.error, |
||||
}, |
||||
'&.level-warning': { |
||||
color: colors.warning, |
||||
}, |
||||
'&.level-debug': { |
||||
color: colors.debug, |
||||
}, |
||||
}), |
||||
level: css({ |
||||
color: theme.colors.text.secondary, |
||||
fontWeight: theme.typography.fontWeightBold, |
||||
display: 'inline-block', |
||||
marginRight: theme.spacing(1), |
||||
'&.level-critical': { |
||||
color: colors.critical, |
||||
}, |
||||
'&.level-error': { |
||||
color: colors.error, |
||||
}, |
||||
'&.level-warning': { |
||||
color: colors.warning, |
||||
}, |
||||
'&.level-info': { |
||||
color: colors.info, |
||||
}, |
||||
'&.level-debug': { |
||||
color: colors.debug, |
||||
}, |
||||
}), |
||||
overflows: css({ |
||||
outline: 'solid 1px red', |
||||
}), |
||||
unwrappedLogLine: css({ |
||||
whiteSpace: 'pre', |
||||
paddingBottom: theme.spacing(0.5), |
||||
}), |
||||
wrappedLogLine: css({ |
||||
whiteSpace: 'pre-wrap', |
||||
paddingBottom: theme.spacing(0.5), |
||||
}), |
||||
}; |
||||
}; |
||||
@ -0,0 +1,135 @@ |
||||
import { debounce } from 'lodash'; |
||||
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'; |
||||
import { ListChildComponentProps, VariableSizeList } from 'react-window'; |
||||
|
||||
import { CoreApp, EventBus, LogRowModel, LogsSortOrder } from '@grafana/data'; |
||||
import { useTheme2 } from '@grafana/ui'; |
||||
|
||||
import { LogLine } from './LogLine'; |
||||
import { preProcessLogs, ProcessedLogModel } from './processing'; |
||||
import { |
||||
getLogLineSize, |
||||
init as initVirtualization, |
||||
resetLogLineSizes, |
||||
ScrollToLogsEvent, |
||||
storeLogLineSize, |
||||
} from './virtualization'; |
||||
|
||||
interface Props { |
||||
app: CoreApp; |
||||
logs: LogRowModel[]; |
||||
containerElement: HTMLDivElement; |
||||
eventBus: EventBus; |
||||
forceEscape?: boolean; |
||||
showTime: boolean; |
||||
sortOrder: LogsSortOrder; |
||||
timeZone: string; |
||||
wrapLogMessage: boolean; |
||||
} |
||||
|
||||
export const LogList = ({ |
||||
app, |
||||
containerElement, |
||||
logs, |
||||
eventBus, |
||||
forceEscape = false, |
||||
showTime, |
||||
sortOrder, |
||||
timeZone, |
||||
wrapLogMessage, |
||||
}: Props) => { |
||||
const [processedLogs, setProcessedLogs] = useState<ProcessedLogModel[]>([]); |
||||
const [listHeight, setListHeight] = useState( |
||||
app === CoreApp.Explore ? window.innerHeight * 0.75 : containerElement.clientHeight |
||||
); |
||||
const theme = useTheme2(); |
||||
const listRef = useRef<VariableSizeList | null>(null); |
||||
const widthRef = useRef(containerElement.clientWidth); |
||||
|
||||
useEffect(() => { |
||||
initVirtualization(theme); |
||||
}, [theme]); |
||||
|
||||
useEffect(() => { |
||||
const subscription = eventBus.subscribe(ScrollToLogsEvent, (e: ScrollToLogsEvent) => { |
||||
if (e.payload.scrollTo === 'top') { |
||||
listRef.current?.scrollTo(0); |
||||
} else { |
||||
listRef.current?.scrollToItem(processedLogs.length - 1); |
||||
} |
||||
}); |
||||
return () => subscription.unsubscribe(); |
||||
}, [eventBus, processedLogs.length]); |
||||
|
||||
useEffect(() => { |
||||
setProcessedLogs(preProcessLogs(logs, { wrap: wrapLogMessage, escape: forceEscape, order: sortOrder, timeZone })); |
||||
listRef.current?.resetAfterIndex(0); |
||||
listRef.current?.scrollTo(0); |
||||
}, [forceEscape, logs, sortOrder, timeZone, wrapLogMessage]); |
||||
|
||||
useEffect(() => { |
||||
const handleResize = debounce(() => { |
||||
setListHeight(app === CoreApp.Explore ? window.innerHeight * 0.75 : containerElement.clientHeight); |
||||
}, 50); |
||||
window.addEventListener('resize', handleResize); |
||||
handleResize(); |
||||
return () => { |
||||
window.removeEventListener('resize', handleResize); |
||||
}; |
||||
}, [app, containerElement.clientHeight]); |
||||
|
||||
useLayoutEffect(() => { |
||||
if (widthRef.current === containerElement.clientWidth) { |
||||
return; |
||||
} |
||||
resetLogLineSizes(); |
||||
listRef.current?.resetAfterIndex(0); |
||||
widthRef.current = containerElement.clientWidth; |
||||
}); |
||||
|
||||
const handleOverflow = useCallback( |
||||
(index: number, id: string, height: number) => { |
||||
if (containerElement) { |
||||
storeLogLineSize(id, containerElement, height); |
||||
listRef.current?.resetAfterIndex(index); |
||||
} |
||||
}, |
||||
[containerElement] |
||||
); |
||||
|
||||
const Renderer = useCallback( |
||||
({ index, style }: ListChildComponentProps) => { |
||||
return ( |
||||
<LogLine |
||||
index={index} |
||||
log={processedLogs[index]} |
||||
showTime={showTime} |
||||
style={style} |
||||
wrapLogMessage={wrapLogMessage} |
||||
onOverflow={handleOverflow} |
||||
/> |
||||
); |
||||
}, |
||||
[handleOverflow, processedLogs, showTime, wrapLogMessage] |
||||
); |
||||
|
||||
if (!containerElement || listHeight == null) { |
||||
// Wait for container to be rendered
|
||||
return null; |
||||
} |
||||
|
||||
return ( |
||||
<VariableSizeList |
||||
height={listHeight} |
||||
itemCount={processedLogs.length} |
||||
itemSize={getLogLineSize.bind(null, processedLogs, containerElement, { wrap: wrapLogMessage, showTime })} |
||||
itemKey={(index: number) => processedLogs[index].uid} |
||||
layout="vertical" |
||||
ref={listRef} |
||||
style={{ overflowY: 'scroll' }} |
||||
width="100%" |
||||
> |
||||
{Renderer} |
||||
</VariableSizeList> |
||||
); |
||||
}; |
||||
@ -0,0 +1,66 @@ |
||||
import { dateTimeFormat, LogRowModel, LogsSortOrder } from '@grafana/data'; |
||||
|
||||
import { escapeUnescapedString, sortLogRows } from '../../utils'; |
||||
|
||||
import { measureTextWidth } from './virtualization'; |
||||
|
||||
export interface ProcessedLogModel extends LogRowModel { |
||||
body: string; |
||||
timestamp: string; |
||||
dimensions: LogDimensions; |
||||
} |
||||
|
||||
export interface LogDimensions { |
||||
timestampWidth: number; |
||||
levelWidth: number; |
||||
} |
||||
|
||||
interface PreProcessOptions { |
||||
escape: boolean; |
||||
order: LogsSortOrder; |
||||
timeZone: string; |
||||
wrap: boolean; |
||||
} |
||||
|
||||
export const preProcessLogs = ( |
||||
logs: LogRowModel[], |
||||
{ escape, order, timeZone, wrap }: PreProcessOptions |
||||
): ProcessedLogModel[] => { |
||||
const orderedLogs = sortLogRows(logs, order); |
||||
return orderedLogs.map((log) => preProcessLog(log, { wrap, escape, timeZone, expanded: false })); |
||||
}; |
||||
|
||||
interface PreProcessLogOptions { |
||||
escape: boolean; |
||||
expanded: boolean; // Not yet implemented
|
||||
timeZone: string; |
||||
wrap: boolean; |
||||
} |
||||
const preProcessLog = ( |
||||
log: LogRowModel, |
||||
{ escape, expanded, timeZone, wrap }: PreProcessLogOptions |
||||
): ProcessedLogModel => { |
||||
let body = log.entry; |
||||
const timestamp = dateTimeFormat(log.timeEpochMs, { |
||||
timeZone, |
||||
defaultWithMS: true, |
||||
}); |
||||
|
||||
if (escape && log.hasUnescapedContent) { |
||||
body = escapeUnescapedString(body); |
||||
} |
||||
// With wrapping disabled, we want to turn it into a single-line log entry unless the line is expanded
|
||||
if (!wrap && !expanded) { |
||||
body = body.replace(/(\r\n|\n|\r)/g, ''); |
||||
} |
||||
|
||||
return { |
||||
...log, |
||||
body, |
||||
timestamp, |
||||
dimensions: { |
||||
timestampWidth: measureTextWidth(timestamp), |
||||
levelWidth: measureTextWidth(log.logLevel), |
||||
}, |
||||
}; |
||||
}; |
||||
@ -0,0 +1,229 @@ |
||||
import { BusEventWithPayload, GrafanaTheme2 } from '@grafana/data'; |
||||
|
||||
import { ProcessedLogModel } from './processing'; |
||||
|
||||
let ctx: CanvasRenderingContext2D | null = null; |
||||
let gridSize = 8; |
||||
let paddingBottom = gridSize * 0.5; |
||||
let lineHeight = 22; |
||||
let measurementMode: 'canvas' | 'dom' = 'canvas'; |
||||
|
||||
export function init(theme: GrafanaTheme2) { |
||||
const font = `${theme.typography.fontSize}px ${theme.typography.fontFamilyMonospace}`; |
||||
const letterSpacing = theme.typography.body.letterSpacing; |
||||
|
||||
initDOMmeasurement(font, letterSpacing); |
||||
initCanvasMeasurement(font, letterSpacing); |
||||
|
||||
gridSize = theme.spacing.gridSize; |
||||
paddingBottom = gridSize * 0.5; |
||||
lineHeight = theme.typography.fontSize * theme.typography.body.lineHeight; |
||||
|
||||
widthMap = new Map<number, number>(); |
||||
resetLogLineSizes(); |
||||
|
||||
determineMeasurementMode(); |
||||
|
||||
return true; |
||||
} |
||||
|
||||
function determineMeasurementMode() { |
||||
if (!ctx) { |
||||
measurementMode = 'dom'; |
||||
return; |
||||
} |
||||
const canvasCharWidth = ctx.measureText('e').width; |
||||
const domCharWidth = measureTextWidthWithDOM('e'); |
||||
const diff = domCharWidth - canvasCharWidth; |
||||
if (diff >= 0.1) { |
||||
console.warn('Virtualized log list: falling back to DOM for measurement'); |
||||
measurementMode = 'dom'; |
||||
} |
||||
} |
||||
|
||||
function initCanvasMeasurement(font: string, letterSpacing: string | undefined) { |
||||
const canvas = document.createElement('canvas'); |
||||
ctx = canvas.getContext('2d'); |
||||
if (!ctx) { |
||||
return; |
||||
} |
||||
ctx.font = font; |
||||
ctx.fontKerning = 'normal'; |
||||
ctx.fontStretch = 'normal'; |
||||
ctx.fontVariantCaps = 'normal'; |
||||
ctx.textRendering = 'optimizeLegibility'; |
||||
if (letterSpacing) { |
||||
ctx.letterSpacing = letterSpacing; |
||||
} |
||||
} |
||||
|
||||
const span = document.createElement('span'); |
||||
function initDOMmeasurement(font: string, letterSpacing: string | undefined) { |
||||
span.style.font = font; |
||||
span.style.visibility = 'hidden'; |
||||
span.style.position = 'absolute'; |
||||
span.style.wordBreak = 'break-all'; |
||||
if (letterSpacing) { |
||||
span.style.letterSpacing = letterSpacing; |
||||
} |
||||
} |
||||
|
||||
let widthMap = new Map<number, number>(); |
||||
export function measureTextWidth(text: string): number { |
||||
if (!ctx) { |
||||
throw new Error(`Measuring context canvas is not initialized. Call init() before.`); |
||||
} |
||||
const key = text.length; |
||||
|
||||
const storedWidth = widthMap.get(key); |
||||
if (storedWidth) { |
||||
return storedWidth; |
||||
} |
||||
|
||||
const width = measurementMode === 'canvas' ? ctx.measureText(text).width : measureTextWidthWithDOM(text); |
||||
widthMap.set(key, width); |
||||
|
||||
return width; |
||||
} |
||||
|
||||
function measureTextWidthWithDOM(text: string) { |
||||
span.textContent = text; |
||||
|
||||
document.body.appendChild(span); |
||||
const width = span.getBoundingClientRect().width; |
||||
document.body.removeChild(span); |
||||
|
||||
return width; |
||||
} |
||||
|
||||
export function measureTextHeight(text: string, maxWidth: number, beforeWidth = 0) { |
||||
let logLines = 0; |
||||
const charWidth = measureTextWidth('e'); |
||||
let logLineCharsLength = Math.round(maxWidth / charWidth); |
||||
const firstLineCharsLength = Math.floor((maxWidth - beforeWidth) / charWidth) - 2 * charWidth; |
||||
const textLines = text.split('\n'); |
||||
|
||||
// Skip unnecessary measurements
|
||||
if (textLines.length === 1 && text.length < firstLineCharsLength) { |
||||
return { |
||||
lines: 1, |
||||
height: lineHeight + paddingBottom, |
||||
}; |
||||
} |
||||
|
||||
for (const textLine of textLines) { |
||||
for (let start = 0; start < textLine.length; ) { |
||||
let testLogLine: string; |
||||
let width = 0; |
||||
let delta = 0; |
||||
let availableWidth = maxWidth - beforeWidth; |
||||
do { |
||||
testLogLine = textLine.substring(start, start + logLineCharsLength - delta); |
||||
width = measureTextWidth(testLogLine); |
||||
delta += 1; |
||||
} while (width >= availableWidth); |
||||
if (beforeWidth) { |
||||
beforeWidth = 0; |
||||
} |
||||
logLines += 1; |
||||
start += testLogLine.length; |
||||
} |
||||
} |
||||
|
||||
const height = logLines * lineHeight + paddingBottom; |
||||
|
||||
return { |
||||
lines: logLines, |
||||
height, |
||||
}; |
||||
} |
||||
|
||||
interface DisplayOptions { |
||||
wrap: boolean; |
||||
showTime: boolean; |
||||
} |
||||
|
||||
export function getLogLineSize( |
||||
logs: ProcessedLogModel[], |
||||
container: HTMLDivElement | null, |
||||
{ wrap, showTime }: DisplayOptions, |
||||
index: number |
||||
) { |
||||
if (!container) { |
||||
return 0; |
||||
} |
||||
if (!wrap) { |
||||
return lineHeight + paddingBottom; |
||||
} |
||||
const storedSize = retrieveLogLineSize(logs[index].uid, container); |
||||
if (storedSize) { |
||||
return storedSize; |
||||
} |
||||
const gap = gridSize; |
||||
let optionsWidth = 0; |
||||
if (showTime) { |
||||
optionsWidth += logs[index].dimensions.timestampWidth + gap; |
||||
} |
||||
if (logs[index].logLevel) { |
||||
optionsWidth += logs[index].dimensions.levelWidth + gap; |
||||
} |
||||
const { height } = measureTextHeight(logs[index].body, getLogContainerWidth(container), optionsWidth); |
||||
return height; |
||||
} |
||||
|
||||
export function hasUnderOrOverflow(element: HTMLDivElement, calculatedHeight?: number): number | null { |
||||
const height = calculatedHeight ?? element.clientHeight; |
||||
if (element.scrollHeight > height) { |
||||
return element.scrollHeight; |
||||
} |
||||
const child = element.firstChild; |
||||
if (child instanceof HTMLDivElement && child.clientHeight < height) { |
||||
return child.clientHeight; |
||||
} |
||||
return null; |
||||
} |
||||
|
||||
const scrollBarWidth = getScrollbarWidth(); |
||||
|
||||
export function getLogContainerWidth(container: HTMLDivElement) { |
||||
return container.clientWidth - scrollBarWidth; |
||||
} |
||||
|
||||
export function getScrollbarWidth() { |
||||
const hiddenDiv = document.createElement('div'); |
||||
|
||||
hiddenDiv.style.width = '100px'; |
||||
hiddenDiv.style.height = '100px'; |
||||
hiddenDiv.style.overflow = 'scroll'; |
||||
hiddenDiv.style.position = 'absolute'; |
||||
hiddenDiv.style.top = '-9999px'; |
||||
|
||||
document.body.appendChild(hiddenDiv); |
||||
const width = hiddenDiv.offsetWidth - hiddenDiv.clientWidth; |
||||
document.body.removeChild(hiddenDiv); |
||||
|
||||
return width; |
||||
} |
||||
|
||||
let logLineSizesMap = new Map<string, number>(); |
||||
export function resetLogLineSizes() { |
||||
logLineSizesMap = new Map<string, number>(); |
||||
} |
||||
|
||||
export function storeLogLineSize(id: string, container: HTMLDivElement, height: number) { |
||||
const key = `${id}_${getLogContainerWidth(container)}`; |
||||
logLineSizesMap.set(key, height); |
||||
} |
||||
|
||||
export function retrieveLogLineSize(id: string, container: HTMLDivElement) { |
||||
const key = `${id}_${getLogContainerWidth(container)}`; |
||||
return logLineSizesMap.get(key); |
||||
} |
||||
|
||||
export interface ScrollToLogsEventPayload { |
||||
scrollTo: 'top' | 'bottom'; |
||||
} |
||||
|
||||
export class ScrollToLogsEvent extends BusEventWithPayload<ScrollToLogsEventPayload> { |
||||
static type = 'logs-panel-scroll-to'; |
||||
} |
||||
@ -0,0 +1,91 @@ |
||||
import { css } from '@emotion/css'; |
||||
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'; |
||||
|
||||
import { CoreApp, GrafanaTheme2, LogsSortOrder, PanelProps } from '@grafana/data'; |
||||
import { usePanelContext, useStyles2 } from '@grafana/ui'; |
||||
import { LogList } from 'app/features/logs/components/panel/LogList'; |
||||
import { ScrollToLogsEvent } from 'app/features/logs/components/panel/virtualization'; |
||||
import { PanelDataErrorView } from 'app/features/panel/components/PanelDataErrorView'; |
||||
|
||||
import { dataFrameToLogsModel, dedupLogRows } from '../../../features/logs/logsModel'; |
||||
|
||||
import { Options } from './panelcfg.gen'; |
||||
|
||||
interface LogsPanelProps extends PanelProps<Options> {} |
||||
|
||||
export const LogsPanel = ({ |
||||
data, |
||||
timeZone, |
||||
fieldConfig, |
||||
options: { showTime, wrapLogMessage, sortOrder, dedupStrategy }, |
||||
id, |
||||
}: LogsPanelProps) => { |
||||
const isAscending = sortOrder === LogsSortOrder.Ascending; |
||||
const style = useStyles2(getStyles); |
||||
const [logsContainer, setLogsContainer] = useState<HTMLDivElement | null>(null); |
||||
const [panelData, setPanelData] = useState(data); |
||||
// Prevents the scroll position to change when new data from infinite scrolling is received
|
||||
const keepScrollPositionRef = useRef(false); |
||||
const { eventBus } = usePanelContext(); |
||||
|
||||
const logs = useMemo(() => { |
||||
const logsModel = panelData |
||||
? dataFrameToLogsModel(panelData.series, data.request?.intervalMs, undefined, data.request?.targets) |
||||
: null; |
||||
return logsModel ? dedupLogRows(logsModel.rows, dedupStrategy) : []; |
||||
}, [data.request?.intervalMs, data.request?.targets, dedupStrategy, panelData]); |
||||
|
||||
useEffect(() => { |
||||
setPanelData(data); |
||||
}, [data]); |
||||
|
||||
useLayoutEffect(() => { |
||||
if (keepScrollPositionRef.current) { |
||||
keepScrollPositionRef.current = false; |
||||
return; |
||||
} |
||||
/** |
||||
* In dashboards, users with newest logs at the bottom have the expectation of keeping the scroll at the bottom |
||||
* when new data is received. See https://github.com/grafana/grafana/pull/37634
|
||||
*/ |
||||
if (data.request?.app === CoreApp.Dashboard || data.request?.app === CoreApp.PanelEditor) { |
||||
eventBus.publish( |
||||
new ScrollToLogsEvent({ |
||||
scrollTo: isAscending ? 'top' : 'bottom', |
||||
}) |
||||
); |
||||
} |
||||
}, [data.request?.app, eventBus, isAscending, logs]); |
||||
|
||||
if (!logs.length) { |
||||
return <PanelDataErrorView fieldConfig={fieldConfig} panelId={id} data={data} needsStringField />; |
||||
} |
||||
|
||||
return ( |
||||
<div className={style.container} ref={(element: HTMLDivElement) => setLogsContainer(element)}> |
||||
{logs.length > 0 && logsContainer && ( |
||||
<LogList |
||||
app={CoreApp.Dashboard} |
||||
containerElement={logsContainer} |
||||
eventBus={eventBus} |
||||
logs={logs} |
||||
showTime={showTime} |
||||
sortOrder={sortOrder} |
||||
timeZone={timeZone} |
||||
wrapLogMessage={wrapLogMessage} |
||||
/> |
||||
)} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({ |
||||
container: css({ |
||||
marginBottom: theme.spacing(1.5), |
||||
minHeight: '100%', |
||||
maxHeight: '100%', |
||||
display: 'flex', |
||||
flex: 1, |
||||
flexDirection: 'column', |
||||
}), |
||||
}); |
||||
|
After Width: | Height: | Size: 2.4 KiB |
@ -0,0 +1,73 @@ |
||||
import { PanelPlugin, LogsSortOrder, LogsDedupStrategy, LogsDedupDescription } from '@grafana/data'; |
||||
|
||||
import { LogsPanel } from './LogsPanel'; |
||||
import { Options } from './panelcfg.gen'; |
||||
import { LogsPanelSuggestionsSupplier } from './suggestions'; |
||||
|
||||
export const plugin = new PanelPlugin<Options>(LogsPanel) |
||||
.setPanelOptions((builder) => { |
||||
builder |
||||
.addBooleanSwitch({ |
||||
path: 'showTime', |
||||
name: 'Time', |
||||
description: '', |
||||
defaultValue: false, |
||||
}) |
||||
.addBooleanSwitch({ |
||||
path: 'wrapLogMessage', |
||||
name: 'Wrap lines', |
||||
description: '', |
||||
defaultValue: false, |
||||
}) |
||||
.addBooleanSwitch({ |
||||
path: 'enableLogDetails', |
||||
name: 'Enable log details', |
||||
description: '', |
||||
defaultValue: true, |
||||
}) |
||||
.addBooleanSwitch({ |
||||
path: 'enableInfiniteScrolling', |
||||
name: 'Enable infinite scrolling', |
||||
description: 'Experimental. Request more results by scrolling to the bottom of the logs list.', |
||||
defaultValue: false, |
||||
}) |
||||
.addRadio({ |
||||
path: 'dedupStrategy', |
||||
name: 'Deduplication', |
||||
description: '', |
||||
settings: { |
||||
options: [ |
||||
{ value: LogsDedupStrategy.none, label: 'None', description: LogsDedupDescription[LogsDedupStrategy.none] }, |
||||
{ |
||||
value: LogsDedupStrategy.exact, |
||||
label: 'Exact', |
||||
description: LogsDedupDescription[LogsDedupStrategy.exact], |
||||
}, |
||||
{ |
||||
value: LogsDedupStrategy.numbers, |
||||
label: 'Numbers', |
||||
description: LogsDedupDescription[LogsDedupStrategy.numbers], |
||||
}, |
||||
{ |
||||
value: LogsDedupStrategy.signature, |
||||
label: 'Signature', |
||||
description: LogsDedupDescription[LogsDedupStrategy.signature], |
||||
}, |
||||
], |
||||
}, |
||||
defaultValue: LogsDedupStrategy.none, |
||||
}) |
||||
.addRadio({ |
||||
path: 'sortOrder', |
||||
name: 'Order', |
||||
description: '', |
||||
settings: { |
||||
options: [ |
||||
{ value: LogsSortOrder.Descending, label: 'Newest first' }, |
||||
{ value: LogsSortOrder.Ascending, label: 'Oldest first' }, |
||||
], |
||||
}, |
||||
defaultValue: LogsSortOrder.Descending, |
||||
}); |
||||
}) |
||||
.setSuggestionsSupplier(new LogsPanelSuggestionsSupplier()); |
||||
@ -0,0 +1,40 @@ |
||||
// Copyright 2023 Grafana Labs |
||||
// |
||||
// Licensed under the Apache License, Version 2.0 (the "License") |
||||
// you may not use this file except in compliance with the License. |
||||
// You may obtain a copy of the License at |
||||
// |
||||
// http://www.apache.org/licenses/LICENSE-2.0 |
||||
// |
||||
// Unless required by applicable law or agreed to in writing, software |
||||
// distributed under the License is distributed on an "AS IS" BASIS, |
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
// See the License for the specific language governing permissions and |
||||
// limitations under the License. |
||||
|
||||
package grafanaplugin |
||||
|
||||
import ( |
||||
"github.com/grafana/grafana/packages/grafana-schema/src/common" |
||||
) |
||||
|
||||
composableKinds: PanelCfg: { |
||||
maturity: "experimental" |
||||
|
||||
lineage: { |
||||
schemas: [{ |
||||
version: [0, 0] |
||||
schema: { |
||||
Options: { |
||||
showTime: bool |
||||
wrapLogMessage: bool |
||||
enableLogDetails: bool |
||||
sortOrder: common.LogsSortOrder |
||||
dedupStrategy: common.LogsDedupStrategy |
||||
enableInfiniteScrolling?: bool |
||||
} @cuetsy(kind="interface") |
||||
} |
||||
}] |
||||
lenses: [] |
||||
} |
||||
} |
||||
@ -0,0 +1,20 @@ |
||||
// Code generated - EDITING IS FUTILE. DO NOT EDIT.
|
||||
//
|
||||
// Generated by:
|
||||
// public/app/plugins/gen.go
|
||||
// Using jennies:
|
||||
// TSTypesJenny
|
||||
// PluginTsTypesJenny
|
||||
//
|
||||
// Run 'make gen-cue' from repository root to regenerate.
|
||||
|
||||
import * as common from '@grafana/schema'; |
||||
|
||||
export interface Options { |
||||
dedupStrategy: common.LogsDedupStrategy; |
||||
enableInfiniteScrolling?: boolean; |
||||
enableLogDetails: boolean; |
||||
showTime: boolean; |
||||
sortOrder: common.LogsSortOrder; |
||||
wrapLogMessage: boolean; |
||||
} |
||||
@ -0,0 +1,17 @@ |
||||
{ |
||||
"type": "panel", |
||||
"name": "Logs (new)", |
||||
"id": "logs-new", |
||||
"state": "alpha", |
||||
|
||||
"info": { |
||||
"author": { |
||||
"name": "Grafana Labs", |
||||
"url": "https://grafana.com" |
||||
}, |
||||
"logos": { |
||||
"small": "img/icn-logs-panel.svg", |
||||
"large": "img/icn-logs-panel.svg" |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,33 @@ |
||||
import { VisualizationSuggestionsBuilder, VisualizationSuggestionScore } from '@grafana/data'; |
||||
import { SuggestionName } from 'app/types/suggestions'; |
||||
|
||||
import { Options } from './panelcfg.gen'; |
||||
|
||||
export class LogsPanelSuggestionsSupplier { |
||||
getSuggestionsForData(builder: VisualizationSuggestionsBuilder) { |
||||
const list = builder.getListAppender<Options, {}>({ |
||||
name: '', |
||||
pluginId: 'logs-new', |
||||
options: {}, |
||||
fieldConfig: { |
||||
defaults: { |
||||
custom: {}, |
||||
}, |
||||
overrides: [], |
||||
}, |
||||
}); |
||||
|
||||
const { dataSummary: ds } = builder; |
||||
|
||||
// Require a string & time field
|
||||
if (!ds.hasData || !ds.hasTimeField || !ds.hasStringField) { |
||||
return; |
||||
} |
||||
|
||||
if (ds.preferredVisualisationType === 'logs') { |
||||
list.append({ name: SuggestionName.Logs, score: VisualizationSuggestionScore.Best }); |
||||
} else { |
||||
list.append({ name: SuggestionName.Logs }); |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue