public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Logs: table add action buttons and deeplink to log line (#114330)

Browse Source
This commit is contained in:
Liza Detrick
2025-12-03 09:26:41 -08:00
committed by GitHub
parent 8998b1fde4
commit 29cf10f1fb
10 changed files with 488 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/explore/Logs/Logs.test.tsx
+1
View File
@@ -75,6 +75,7 @@ describe('Logs', () => {
Object.defineProperty(window, 'location', {
value: {
href: 'http://localhost:3000/explore?test',
search: '?test',
},
writable: true,
});
public/app/features/explore/Logs/Logs.tsx
+8 -1
View File
@@ -83,6 +83,7 @@ import LogsNavigation from './LogsNavigation';
import { LogsTableWrap, getLogsTableHeight } from './LogsTableWrap';
import { LogsVolumePanelList } from './LogsVolumePanelList';
import { SETTING_KEY_ROOT, SETTINGS_KEYS, visualisationTypeKey } from './utils/logs';
import { getExploreBaseUrl } from './utils/url';
interface Props extends Themeable2 {
width: number;
@@ -617,7 +618,7 @@ const UnthemedLogs: React.FunctionComponent<Props> = (props: Props) => {
// append changed urlState to baseUrl
const serializedState = serializeStateToUrlParam(urlState);
const baseUrl = /.*(?=\/explore)/.exec(`${window.location.href}`)![0];
const baseUrl = getExploreBaseUrl();
const url = urlUtil.renderUrl(`${baseUrl}/explore`, { left: serializedState });
await createAndCopyShortLink(url);
@@ -1002,6 +1003,10 @@ const UnthemedLogs: React.FunctionComponent<Props> = (props: Props) => {
panelState={panelState?.logs}
updatePanelState={updatePanelState}
datasourceType={props.datasourceType}
displayedFields={displayedFields}
exploreId={props.exploreId}
absoluteRange={props.absoluteRange}
logRows={props.logRows}
/>
</div>
)}
@@ -1056,6 +1061,8 @@ const UnthemedLogs: React.FunctionComponent<Props> = (props: Props) => {
onLogOptionsChange={onLogOptionsChange}
filterLevels={filterLevels}
timeRange={props.range}
exploreId={props.exploreId}
absoluteRange={props.absoluteRange}
/>
</div>
)}
public/app/features/explore/Logs/LogsTable.test.tsx
+77 -1
View File
@@ -1,7 +1,7 @@
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import { ComponentProps } from 'react';
import { DataFrame, FieldType, LogsSortOrder, toUtc } from '@grafana/data';
import { DataFrame, FieldType, LogsSortOrder, toUtc, urlUtil } from '@grafana/data';
import { mockTransformationsRegistry, organizeFieldsTransformer } from '@grafana/data/internal';
import { config } from '@grafana/runtime';
import { extractFieldsTransformer } from 'app/features/transformers/extractFields/extractFields';
@@ -362,4 +362,80 @@ describe('LogsTable', () => {
}
});
});
describe('Selected log line', () => {
it('should handle selected log line from URL parameter', async () => {
// Use getMockLokiFrame which has proper structure with id field
const testFrame = getMockLokiFrame();
const logsFrame = parseLogsFrame(testFrame);
// Get the second ID from the parsed frame to test selection of non-first row
const secondId = logsFrame?.idField?.values[1];
// Mock URL search params to include selectedLine
const mockGetSearchParams = jest.spyOn(urlUtil, 'getUrlSearchParams');
mockGetSearchParams.mockReturnValue({
selectedLine: JSON.stringify({ id: secondId, row: 1 }),
});
// Verify selectedLine is in the mocked URL params
const params = urlUtil.getUrlSearchParams();
expect(params.selectedLine).toBeDefined();
expect(params.selectedLine).toContain(secondId);
});
it('should clear selectedLine URL parameter after render', async () => {
// Mock locationService.partial instead of window.history.replaceState
const partialSpy = jest.spyOn(require('@grafana/runtime').locationService, 'partial');
// Use getMockLokiFrame which has proper structure
const testFrame = getMockLokiFrame();
const logsFrame = parseLogsFrame(testFrame);
// Get the first ID from the parsed frame
const firstId = logsFrame?.idField?.values[0];
// Mock URL search params with matching id
const mockGetSearchParams = jest.spyOn(urlUtil, 'getUrlSearchParams');
mockGetSearchParams.mockReturnValue({
selectedLine: JSON.stringify({ id: firstId, row: 0 }),
});
setup({ logsFrame }, testFrame);
await waitFor(() => {
expect(partialSpy).toHaveBeenCalled();
// Verify that selectedLine is set to undefined
const callArgs = partialSpy.mock.calls[0];
expect(callArgs[0]).toEqual({ selectedLine: undefined });
expect(callArgs[1]).toBe(true); // replace parameter
});
});
});
describe('Table action buttons', () => {
it('should render action buttons in first column when exploreId is provided', async () => {
setup({
exploreId: 'test-explore',
});
await waitFor(() => {
const rows = screen.getAllByRole('row');
expect(rows.length).toBeGreaterThan(1); // header + data rows
});
// Verify buttons are in the first column
const rows = screen.getAllByRole('row');
const dataRows = rows.filter((row) => row.getAttribute('role') === 'row' && !row.getAttribute('aria-label'));
dataRows.forEach((row) => {
const cells = row.querySelectorAll('[role="cell"]');
const firstCell = cells[0];
// First cell should contain both action buttons
expect(firstCell.querySelector('button[aria-label="View log line"]')).toBeTruthy();
expect(firstCell.querySelector('button[aria-label="Copy link to log line"]')).toBeTruthy();
});
});
});
});
public/app/features/explore/Logs/LogsTable.tsx
+171 -11
View File
@@ -1,7 +1,9 @@
import { useCallback, useEffect, useState } from 'react';
import { css } from '@emotion/css';
import { useCallback, useEffect, useState, useMemo } from 'react';
import { lastValueFrom } from 'rxjs';
import {
urlUtil,
applyFieldOverrides,
CustomTransformOperator,
DataFrame,
@@ -16,14 +18,26 @@ import {
TimeRange,
transformDataFrame,
ValueLinkConfig,
ExploreLogsPanelState,
AbsoluteTimeRange,
LogRowModel,
GrafanaTheme2,
} from '@grafana/data';
import { config } from '@grafana/runtime';
import { AdHocFilterItem, Table, TableSortByFieldState } from '@grafana/ui';
import { config, locationService } from '@grafana/runtime';
import {
AdHocFilterItem,
CustomCellRendererProps,
TableSortByFieldState,
Table,
TableCellDisplayMode,
useStyles2,
} from '@grafana/ui';
import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR } from '@grafana/ui/internal';
import { LogsFrame } from 'app/features/logs/logsFrame';
import { getFieldLinksForExplore } from '../utils/links';
import { LogsTableActionButtons } from './LogsTableActionButtons';
import { FieldNameMeta } from './LogsTableWrap';
interface Props {
@@ -41,6 +55,11 @@ interface Props {
tableSortBy?: string;
tableSortDir?: 'asc' | 'desc';
onSortByChange?: (sortBy: TableSortByFieldState[]) => void;
displayedFields?: string[];
exploreId?: string;
panelState?: ExploreLogsPanelState;
absoluteRange?: AbsoluteTimeRange;
logRows?: LogRowModel[];
}
export function LogsTable(props: Props) {
@@ -58,7 +77,61 @@ export function LogsTable(props: Props) {
onSortByChange,
} = props;
const [tableFrame, setTableFrame] = useState<DataFrame | undefined>(undefined);
const [columnWidthMap, setColumnWidthMap] = useState<Record<string, number>>({});
const timeIndex = logsFrame?.timeField.index;
const styles = useStyles2(getStyles);
// Extract selected log ID from URL parameter
const selectedLogInfo = useMemo(() => {
const { selectedLine } = urlUtil.getUrlSearchParams();
const param = Array.isArray(selectedLine) ? selectedLine[0] : selectedLine;
if (typeof param !== 'string') {
return undefined;
}
try {
const { id, row } = JSON.parse(param);
return { id, row };
} catch (error) {
return undefined;
}
}, []);
// Set the initial row index based on the selected log ID if selectedLine is present in the URL
const initialRowIndex = useMemo(() => {
if (!selectedLogInfo || !tableFrame || !selectedLogInfo.id) {
return undefined;
}
// Search through all fields in tableFrame to find the one containing the ID
for (const field of tableFrame.fields) {
const lineIndex = field.values.findIndex((v: unknown) => v === selectedLogInfo.id);
if (lineIndex !== -1) {
return lineIndex;
}
}
return undefined;
}, [selectedLogInfo, tableFrame]);
// Clear the selectedLine URL parameter after table loads
useEffect(() => {
if (initialRowIndex !== undefined && tableFrame) {
// Remove selectedLine from URL using locationService (proper Grafana way)
locationService.partial({ selectedLine: undefined }, true);
}
}, [initialRowIndex, tableFrame]);
const onColumnResize = useCallback((fieldDisplayName: string, width: number) => {
if (width > 0) {
setColumnWidthMap((prev) => ({
...prev,
[fieldDisplayName]: width,
}));
}
}, []);
const prepareTableFrame = useCallback(
(frame: DataFrame): DataFrame => {
@@ -81,7 +154,21 @@ export function LogsTable(props: Props) {
},
});
// `getLinks` and `applyFieldOverrides` are taken from TableContainer.tsx
for (const field of frameWithOverrides.fields) {
for (const [index, field] of frameWithOverrides.fields.entries()) {
// Hide ID field from visualization (it's only needed for row matching)
if (logsFrame?.idField && (field.name === logsFrame.idField.name || field.name === 'id')) {
field.config = {
...field.config,
custom: {
...field.config.custom,
hideFrom: {
...field.config.custom?.hideFrom,
viz: true,
},
},
};
}
field.getLinks = (config: ValueLinkConfig) => {
return getFieldLinksForExplore({
field,
@@ -91,13 +178,44 @@ export function LogsTable(props: Props) {
dataFrame: sortedFrame!,
});
};
// For the first field (time), wrap the cell to include action buttons
const isFirstField = index === 0;
field.config = {
...field.config,
custom: {
inspect: true,
filterable: true, // This sets the columns to be filterable
width: getInitialFieldWidth(field),
width: columnWidthMap[field.name] ?? getInitialFieldWidth(field),
...field.config.custom,
cellOptions: isFirstField
? {
type: TableCellDisplayMode.Custom,
cellComponent: (cellProps: CustomCellRendererProps) => (
<>
<LogsTableActionButtons
{...cellProps}
logsFrame={logsFrame ?? undefined}
displayedFields={props.displayedFields}
exploreId={props.exploreId}
panelState={props.panelState}
absoluteRange={props.absoluteRange}
logRows={props.logRows}
rowIndex={cellProps.rowIndex}
/>
<span className={styles.firstColumnCell}>
{cellProps.field.display?.(cellProps.value).text ?? String(cellProps.value)}
</span>
</>
),
}
: field.config.custom?.cellOptions,
headerComponent: isFirstField
? (headerProps: { defaultContent: React.ReactNode }) => (
<div className={styles.firstColumnHeader}>{headerProps.defaultContent}</div>
)
: field.config.custom?.headerComponent,
},
// This sets the individual field value as filterable
filterable: isFieldFilterable(field, logsFrame?.bodyField.name ?? '', logsFrame?.timeField.name ?? ''),
@@ -109,7 +227,22 @@ export function LogsTable(props: Props) {
return frameWithOverrides;
},
[logsSortOrder, timeZone, splitOpen, range, logsFrame?.bodyField.name, logsFrame?.timeField.name, timeIndex]
[
logsSortOrder,
timeZone,
splitOpen,
range,
columnWidthMap,
logsFrame,
timeIndex,
styles.firstColumnCell,
styles.firstColumnHeader,
props.displayedFields,
props.exploreId,
props.panelState,
props.absoluteRange,
props.logRows,
]
);
useEffect(() => {
@@ -127,9 +260,24 @@ export function LogsTable(props: Props) {
// Add the label filters to the transformations
const transform = getLabelFiltersTransform(labelFilters);
if (transform) {
// Ensure ID field is always included for row matching
if (logsFrame?.idField?.name) {
transform.options.includeByName = {
...transform.options.includeByName,
[logsFrame.idField.name]: true,
};
}
transformations.push(transform);
} else {
// If no fields are filtered, filter the default fields, so we don't render all columns
// Always include ID field for row matching
const includeByName: Record<string, boolean> = {
[logsFrame.bodyField.name]: true,
[logsFrame.timeField.name]: true,
};
if (logsFrame?.idField?.name) {
includeByName[logsFrame.idField.name] = true;
}
transformations.push({
id: 'organize',
options: {
@@ -137,10 +285,7 @@ export function LogsTable(props: Props) {
[logsFrame.bodyField.name]: 0,
[logsFrame.timeField.name]: 1,
},
includeByName: {
[logsFrame.bodyField.name]: true,
[logsFrame.timeField.name]: true,
},
includeByName,
},
});
}
@@ -161,6 +306,7 @@ export function LogsTable(props: Props) {
prepareTableFrame,
logsFrame?.bodyField.name,
logsFrame?.timeField.name,
logsFrame?.idField?.name,
]);
if (!tableFrame) {
@@ -193,11 +339,13 @@ export function LogsTable(props: Props) {
<Table
data={tableFrame}
width={width}
onColumnResize={onColumnResize}
onCellFilterAdded={props.onClickFilterLabel && props.onClickFilterOutLabel ? onCellFilterAdded : undefined}
height={props.height}
footerOptions={{ show: true, reducer: ['count'], countRows: true }}
initialSortBy={initialSortBy}
onSortByChange={onSortByChange}
initialRowIndex={initialRowIndex}
/>
);
}
@@ -284,7 +432,19 @@ function getLabelFiltersTransform(labelFilters: Record<string, number>) {
function getInitialFieldWidth(field: Field): number | undefined {
if (field.type === FieldType.time) {
return 200;
return 230;
}
return undefined;
}
const getStyles = (theme: GrafanaTheme2) => ({
firstColumnHeader: css({
display: 'flex',
label: 'wrapper',
marginLeft: theme.spacing(7),
width: '100%',
}),
firstColumnCell: css({
paddingLeft: theme.spacing(7),
}),
});
public/app/features/explore/Logs/LogsTableActionButtons.tsx
+190
View File
@@ -0,0 +1,190 @@
import { css } from '@emotion/css';
import { useCallback, useState } from 'react';
import {
AbsoluteTimeRange,
ExploreLogsPanelState,
GrafanaTheme2,
LogRowModel,
serializeStateToUrlParam,
urlUtil,
} from '@grafana/data';
import { t } from '@grafana/i18n';
import { ClipboardButton, CustomCellRendererProps, IconButton, Modal, useTheme2 } from '@grafana/ui';
import { getLogsPermalinkRange } from 'app/core/utils/shortLinks';
import { getUrlStateFromPaneState } from 'app/features/explore/hooks/useStateSync';
import { LogsFrame } from 'app/features/logs/logsFrame';
import { getState } from 'app/store/store';
import { getExploreBaseUrl } from './utils/url';
interface Props extends CustomCellRendererProps {
logId?: string;
logsFrame?: LogsFrame;
exploreId?: string;
panelState?: ExploreLogsPanelState;
displayedFields?: string[];
absoluteRange?: AbsoluteTimeRange;
logRows?: LogRowModel[];
index?: number;
}
export function LogsTableActionButtons(props: Props) {
const { exploreId, absoluteRange, logRows, rowIndex, panelState, displayedFields, logsFrame, frame } = props;
const theme = useTheme2();
const [isInspecting, setIsInspecting] = useState(false);
// Get logId from the table frame (frame), not the original logsFrame, because
// the table frame is sorted/transformed and rowIndex refers to the table frame
const idFieldName = logsFrame?.idField?.name ?? 'id';
const idField = frame.fields.find((field) => field.name === idFieldName || field.name === 'id');
const logId = idField?.values[rowIndex];
const getLineValue = () => {
const bodyFieldName = logsFrame?.bodyField?.name;
const bodyField = bodyFieldName
? frame.fields.find((field) => field.name === bodyFieldName)
: frame.fields.find((field) => field.type === 'string');
return bodyField?.values[rowIndex];
};
const lineValue = getLineValue();
const styles = getStyles(theme);
// Generate link to the log line
const getText = useCallback(() => {
if (!logId || !exploreId || !absoluteRange || !logRows) {
return '';
}
try {
// Get the log row from the logRows array
const logRow = logRows.find((row) => row.rowId === logId);
if (!logRow) {
return '';
}
// Get the current explore state
const currentPaneState = getState().explore.panes[exploreId];
if (!currentPaneState) {
return '';
}
// Create URL state with log permalink information
const urlState = getUrlStateFromPaneState(currentPaneState);
// Preserve all panel state (columns, labelFieldName, etc.)
urlState.panelsState = {
...currentPaneState.panelsState,
logs: {
...panelState,
displayedFields: displayedFields ?? [],
},
};
// Calculate the time range for the permalink
urlState.range = getLogsPermalinkRange(logRow, logRows, absoluteRange);
// Create the full URL with selectedLine as a URL parameter (with id and row)
const serializedState = serializeStateToUrlParam(urlState);
const baseUrl = getExploreBaseUrl();
const url = urlUtil.renderUrl(`${baseUrl}/explore`, {
left: serializedState,
selectedLine: JSON.stringify({ id: logId, row: rowIndex }),
});
return url;
} catch (error) {
return '';
}
}, [absoluteRange, displayedFields, exploreId, logId, logRows, rowIndex, panelState]);
const handleViewClick = () => {
setIsInspecting(true);
};
return (
<>
<div className={styles.iconWrapper}>
<div className={styles.inspect}>
<IconButton
className={styles.inspectButton}
tooltip={t('explore.logs-table.action-buttons.view-log-line', 'View log line')}
variant="secondary"
aria-label={t('explore.logs-table.action-buttons.view-log-line', 'View log line')}
tooltipPlacement="top"
size="md"
name="eye"
onClick={handleViewClick}
tabIndex={0}
/>
</div>
<div className={styles.inspect}>
<ClipboardButton
className={styles.clipboardButton}
icon="share-alt"
variant="secondary"
fill="text"
size="md"
tooltip={t('explore.logs-table.action-buttons.copy-link', 'Copy link to log line')}
tooltipPlacement="top"
tabIndex={0}
aria-label={t('explore.logs-table.action-buttons.copy-link', 'Copy link to log line')}
getText={getText}
/>
</div>
</div>
{isInspecting && (
<Modal
onDismiss={() => setIsInspecting(false)}
isOpen={true}
title={t('explore.logs-table.action-buttons.inspect-value', 'Inspect value')}
>
<pre>{lineValue}</pre>
<Modal.ButtonRow>
<ClipboardButton icon="copy" getText={() => lineValue}>
{t('explore.logs-table.action-buttons.copy-to-clipboard', 'Copy to Clipboard')}
</ClipboardButton>
</Modal.ButtonRow>
</Modal>
)}
</>
);
}
export const getStyles = (theme: GrafanaTheme2) => ({
clipboardButton: css({
height: '100%',
lineHeight: '1',
padding: 0,
width: '20px',
}),
iconWrapper: css({
background: theme.colors.background.secondary,
boxShadow: theme.shadows.z2,
display: 'flex',
flexDirection: 'row',
height: '35px',
left: 0,
top: 0,
padding: `0 ${theme.spacing(0.5)}`,
position: 'absolute',
zIndex: 1,
}),
inspect: css({
'& button svg': {
marginRight: 'auto',
},
'&:hover': {
color: theme.colors.text.link,
cursor: 'pointer',
},
padding: '5px 3px',
}),
inspectButton: css({
borderRadius: theme.shape.radius.default,
display: 'inline-flex',
margin: 0,
overflow: 'hidden',
verticalAlign: 'middle',
}),
});
public/app/features/explore/Logs/LogsTableWrap.tsx
+10
View File
@@ -7,11 +7,13 @@ import {
ExploreLogsPanelState,
GrafanaTheme2,
Labels,
LogRowModel,
LogsSortOrder,
SelectableValue,
SplitOpen,
store,
TimeRange,
AbsoluteTimeRange,
} from '@grafana/data';
import { t } from '@grafana/i18n';
import { reportInteraction } from '@grafana/runtime';
@@ -40,6 +42,10 @@ interface Props {
onClickFilterLabel?: (key: string, value: string, frame?: DataFrame) => void;
onClickFilterOutLabel?: (key: string, value: string, frame?: DataFrame) => void;
datasourceType?: string;
exploreId?: string;
displayedFields?: string[];
absoluteRange?: AbsoluteTimeRange;
logRows?: LogRowModel[];
}
type ActiveFieldMeta = {
@@ -534,6 +540,10 @@ export function LogsTableWrap(props: Props) {
tableSortBy={panelState?.tableSortBy}
tableSortDir={panelState?.tableSortDir}
onSortByChange={onSortByChange}
displayedFields={props.displayedFields}
exploreId={props.exploreId}
absoluteRange={props.absoluteRange}
logRows={props.logRows}
/>
</div>
</div>
public/app/features/explore/Logs/utils/url.ts
+10
View File
@@ -0,0 +1,10 @@
/**
* Gets the base URL before the /explore path.
* Used for constructing explore URLs with permalinks.
*
* @returns The base URL (e.g., "http://localhost:3000" or "https://grafana.com")
*/
export function getExploreBaseUrl(): string {
const match = /.*(?=\/explore)/.exec(window.location.href);
return match ? match[0] : window.location.origin;
}
public/app/features/logs/components/ControlledLogRows.tsx
+5
View File
@@ -8,6 +8,7 @@ import {
EventBusSrv,
ExploreLogsPanelState,
LogLevel,
LogRowModel,
LogsMetaItem,
LogsSortOrder,
SplitOpen,
@@ -41,6 +42,10 @@ export interface ControlledLogRowsProps extends Omit<Props, 'scrollElement'> {
datasourceType?: string;
width?: number;
logsTableFrames?: DataFrame[];
displayedFields?: string[];
exploreId?: string;
absoluteRange?: AbsoluteTimeRange;
logRows?: LogRowModel[];
}
export type LogRowsComponentProps = Omit<
public/app/features/logs/components/ControlledLogsTable.tsx
+8
View File
@@ -25,6 +25,10 @@ export const ControlledLogsTable = ({
width,
logsTableFrames,
visualisationType,
displayedFields,
exploreId,
absoluteRange,
logRows,
...rest
}: LogRowsComponentProps) => {
const { sortOrder, controlsExpanded } = useLogListContext();
@@ -58,6 +62,10 @@ export const ControlledLogsTable = ({
panelState={panelState}
updatePanelState={updatePanelState}
datasourceType={datasourceType}
displayedFields={displayedFields}
exploreId={exploreId}
absoluteRange={absoluteRange}
logRows={logRows}
/>
</div>
</div>
public/locales/en-US/grafana.json
+8
View File
@@ -7302,6 +7302,14 @@
"title-failed-sample-query": "Failed to load logs sample for this query",
"tooltip": "Show log lines that contributed to visualized metrics"
},
"logs-table": {
"action-buttons": {
"copy-link": "Copy link to log line",
"copy-to-clipboard": "Copy to Clipboard",
"inspect-value": "Inspect value",
"view-log-line": "View log line"
}
},
"logs-table-empty-fields": {
"no-fields": "No fields"
},