root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 235 Packages Projects Releases Wiki Activity

New Log Details: Inline improvements (#110276) 

* LogLineDetails: make inline details taller

* Translations: add missing plurals

* Update sidebar icon

* LogList: default to inline details

* LogLineDetails: details by screen width

* Inline details: slightly smaller

* LogLineDetails: use container size for default mode
This commit is contained in:
Matias Chomicki 2025-09-03 18:53:38 +02:00 committed by GitHub
parent 8e41d5929a
commit bbc401a6be
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/logs/components/panel/LogLineDetails.tsx
View File

@ -194,7 +194,7 @@ export const InlineLogLineDetails = memo(({ logs, log, onResize, timeRange, time
});
InlineLogLineDetails.displayName = 'InlineLogLineDetails';
export const LOG_LINE_DETAILS_HEIGHT = 35;
export const LOG_LINE_DETAILS_HEIGHT = 45;
const getStyles = (theme: GrafanaTheme2, mode: LogLineDetailsMode, showControls?: boolean) => ({
inlineWrapper: css({

2
public/app/features/logs/components/panel/LogLineDetailsHeader.tsx
View File

@ -237,7 +237,7 @@ export const LogLineDetailsHeader = ({ focusLogLine, log, search, onSearch }: Pr
/>
)}
<IconButton
name={detailsMode === 'inline' ? 'columns' : 'gf-layout-simple'}
name={detailsMode === 'inline' ? 'web-section' : 'gf-layout-simple'}
tooltip={
detailsMode === 'inline'
? t('logs.log-line-details.sidebar-mode', 'Anchor to the right')

2
public/app/features/logs/components/panel/LogList.tsx
View File

@ -109,7 +109,7 @@ export const LogList = ({
displayedFields,
containerElement,
logOptionsStorageKey,
detailsMode = logOptionsStorageKey ? (store.get(`${logOptionsStorageKey}.detailsMode`) ?? 'sidebar') : 'sidebar',
detailsMode,
dedupStrategy,
enableLogDetails,
eventBus,

15
public/app/features/logs/components/panel/LogListContext.tsx
View File

@ -199,7 +199,10 @@ export const LogListContextProvider = ({
children,
containerElement,
enableLogDetails,
detailsMode: detailsModeProp,
logOptionsStorageKey,
detailsMode: detailsModeProp = logOptionsStorageKey
? store.get(`${logOptionsStorageKey}.detailsMode`)
: getDefaultDetailsMode(containerElement),
dedupStrategy,
displayedFields,
filterLevels,
@ -209,7 +212,6 @@ export const LogListContextProvider = ({
logs,
logLineMenuCustomItems,
logsMeta,
logOptionsStorageKey,
logSupportsContext,
noInteractions,
onClickFilterLabel,
@ -258,7 +260,9 @@ export const LogListContextProvider = ({
const [detailsWidth, setDetailsWidthState] = useState(
getDetailsWidth(containerElement, logOptionsStorageKey, undefined, detailsModeProp, showControls)
);
const [detailsMode, setDetailsMode] = useState<LogLineDetailsMode>(detailsModeProp ?? 'sidebar');
const [detailsMode, setDetailsMode] = useState<LogLineDetailsMode>(
detailsModeProp ?? getDefaultDetailsMode(containerElement)
);
const [isAssistantAvailable, openAssistant] = useAssistant();
const [prettifyJSON, setPrettifyJSONState] = useState(prettifyJSONProp);
const [wrapLogMessage, setWrapLogMessageState] = useState(wrapLogMessageProp);
@ -745,3 +749,8 @@ ${log.entry.replaceAll('`', '\\`')}
],
});
}
export function getDefaultDetailsMode(container: HTMLDivElement | undefined): LogLineDetailsMode {
const width = container?.clientWidth ?? window.innerWidth;
return width > 1440 ? 'sidebar' : 'inline';
}

4
public/locales/en-US/grafana.json
View File

@ -9446,9 +9446,9 @@
"type": {
"loki": {
"indexed-label_one": "Indexed label",
"indexed-label_other": "Indexed label",
"indexed-label_other": "Indexed labels",
"parsedl-label_one": "Parsed field",
"parsedl-label_other": "Parsed field",
"parsedl-label_other": "Parsed fields",
"structured-metadata_one": "Structured metadata",
"structured-metadata_other": "Structured metadata"
}