diff --git a/public/app/features/logs/components/panel/LogLineDetailsFields.tsx b/public/app/features/logs/components/panel/LogLineDetailsFields.tsx
index e8482b4d7c0..5eecdac7f12 100644
--- a/public/app/features/logs/components/panel/LogLineDetailsFields.tsx
+++ b/public/app/features/logs/components/panel/LogLineDetailsFields.tsx
@@ -267,54 +267,56 @@ export const LogLineDetailsField = ({
{!disableActions && (
- {onClickFilterLabel && fieldSupportsFilters && (
-
- )}
- {onClickFilterOutLabel && fieldSupportsFilters && (
+
+ {onClickFilterLabel && fieldSupportsFilters && (
+
+ )}
+ {onClickFilterOutLabel && fieldSupportsFilters && (
+
+ )}
+ {singleKey && displayedFields.includes(keys[0]) && (
+
+ )}
+ {singleKey && !displayedFields.includes(keys[0]) && (
+
+ )}
- )}
- {singleKey && displayedFields.includes(keys[0]) && (
-
- )}
- {singleKey && !displayedFields.includes(keys[0]) && (
-
- )}
-
+
)}
@@ -388,6 +390,15 @@ const getFieldStyles = (theme: GrafanaTheme2) => ({
actions: css({
whiteSpace: 'nowrap',
}),
+ actionIcons: css({
+ display: 'flex',
+ justifyContent: 'space-between',
+ paddingRight: 2,
+ }),
+ statsIcon: css({
+ margin: 0,
+ paddingRight: 4,
+ }),
label: css({
paddingRight: theme.spacing(1),
overflowWrap: 'break-word',
diff --git a/public/app/features/logs/components/panel/LogLineDetailsHeader.tsx b/public/app/features/logs/components/panel/LogLineDetailsHeader.tsx
index 40d2b2fa14a..34dd3b3b151 100644
--- a/public/app/features/logs/components/panel/LogLineDetailsHeader.tsx
+++ b/public/app/features/logs/components/panel/LogLineDetailsHeader.tsx
@@ -235,6 +235,7 @@ export const LogLineDetailsHeader = ({ focusLogLine, log, search, onSearch }: Pr
tabIndex={0}
/>
)}
+
+
@@ -280,6 +283,7 @@ const getStyles = (theme: GrafanaTheme2, mode: LogLineDetailsMode, wrapLogMessag
display: 'flex',
gap: theme.spacing(1),
paddingLeft: theme.spacing(1),
+ alignContent: 'center',
}),
copyLogButton: css({
padding: 0,
@@ -293,4 +297,12 @@ const getStyles = (theme: GrafanaTheme2, mode: LogLineDetailsMode, wrapLogMessag
componentWrapper: css({
padding: theme.spacing(0, 1, 1, 1),
}),
+ divider: css({
+ width: 1,
+ borderRight: `solid 1px ${theme.colors.border.medium}`,
+ height: theme.spacing(2.25),
+ }),
+ dividerMargin: css({
+ marginRight: theme.spacing(0.5),
+ }),
});
diff --git a/public/app/features/logs/components/panel/useKeyBindings.ts b/public/app/features/logs/components/panel/useKeyBindings.ts
index bf166aede4e..6a75dcfcf2b 100644
--- a/public/app/features/logs/components/panel/useKeyBindings.ts
+++ b/public/app/features/logs/components/panel/useKeyBindings.ts
@@ -1,5 +1,6 @@
import { useEffect } from 'react';
+import { useLogDetailsContext } from './LogDetailsContext';
import { useLogListSearchContext } from './LogListSearchContext';
/**
@@ -11,6 +12,7 @@ import { useLogListSearchContext } from './LogListSearchContext';
export const useKeyBindings = () => {
const { hideSearch, searchVisible, showSearch } = useLogListSearchContext();
+ const { showDetails, detailsMode, closeDetails } = useLogDetailsContext();
useEffect(() => {
function handleToggleSearch(event: KeyboardEvent) {
@@ -24,10 +26,13 @@ export const useKeyBindings = () => {
if (event.key === 'Escape' && searchVisible) {
hideSearch();
}
+ if (event.key === 'Escape' && showDetails.length > 0 && detailsMode === 'sidebar') {
+ closeDetails();
+ }
}
document.addEventListener('keydown', handleToggleSearch);
return () => {
document.removeEventListener('keydown', handleToggleSearch);
};
- });
+ }, [closeDetails, detailsMode, hideSearch, searchVisible, showDetails.length, showSearch]);
};