Skip to content

Commit a3e9d32

Browse files
Alejandro Fernándezelasticmachine
Alejandro Fernández
and
elasticmachine
committed
[Logs UI] View in context tweaks (#67777)
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
1 parent 65ec264 commit a3e9d32

4 files changed

Lines changed: 64 additions & 48 deletions

File tree

‎x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx‎

Lines changed: 26 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,11 @@
55
*/
66

77
import React, { useCallback } from 'react';
8-
import { EuiButtonIcon } from '@elastic/eui';
8+
import { EuiButtonIcon, EuiPopover, EuiContextMenuPanel, EuiContextMenuItem } from '@elastic/eui';
99
import { i18n } from '@kbn/i18n';
10-
import { FormattedMessage } from '@kbn/i18n/react';
1110

1211
import { LogEntryColumnContent } from './log_entry_column';
13-
import {
14-
euiStyled,
15-
ActionMenu,
16-
Section,
17-
SectionTitle,
18-
SectionLinks,
19-
SectionLink,
20-
} from '../../../../../observability/public';
12+
import { euiStyled } from '../../../../../observability/public';
2113

2214
interface LogEntryActionsColumnProps {
2315
isHovered: boolean;
@@ -78,29 +70,32 @@ export const LogEntryActionsColumn: React.FC<LogEntryActionsColumnProps> = ({
7870
</ButtonWrapper>
7971
);
8072

73+
const items = [
74+
<EuiContextMenuItem key="log_details" onClick={handleClickViewDetails}>
75+
{LOG_DETAILS_LABEL}
76+
</EuiContextMenuItem>,
77+
];
78+
79+
if (onViewLogInContext !== undefined) {
80+
items.push(
81+
<EuiContextMenuItem key="view_in_context" onClick={handleClickViewInContext}>
82+
{LOG_VIEW_IN_CONTEXT_LABEL}
83+
</EuiContextMenuItem>
84+
);
85+
}
86+
8187
return (
8288
<ActionsColumnContent>
8389
{isHovered || isMenuOpen ? (
8490
<AbsoluteWrapper>
85-
<ActionMenu closePopover={onCloseMenu} isOpen={isMenuOpen} button={button}>
86-
<Section>
87-
<SectionTitle>
88-
<FormattedMessage
89-
id="xpack.infra.logs.logEntryActionsMenuTitle"
90-
defaultMessage="Log line details"
91-
/>
92-
</SectionTitle>
93-
<SectionLinks>
94-
<SectionLink label={LOG_DETAILS_LABEL} onClick={handleClickViewDetails} />
95-
{onViewLogInContext !== undefined ? (
96-
<SectionLink
97-
label={LOG_VIEW_IN_CONTEXT_LABEL}
98-
onClick={handleClickViewInContext}
99-
/>
100-
) : null}
101-
</SectionLinks>
102-
</Section>
103-
</ActionMenu>
91+
<EuiPopover
92+
closePopover={onCloseMenu}
93+
isOpen={isMenuOpen}
94+
button={button}
95+
ownFocus={true}
96+
>
97+
<EuiContextMenuPanel items={items} />
98+
</EuiPopover>
10499
</AbsoluteWrapper>
105100
) : null}
106101
</ActionsColumnContent>
@@ -115,10 +110,11 @@ const ActionsColumnContent = euiStyled(LogEntryColumnContent)`
115110
const ButtonWrapper = euiStyled.div`
116111
background: ${(props) => props.theme.eui.euiColorPrimary};
117112
border-radius: 50%;
113+
padding: 4px;
114+
transform: translateY(-6px);
118115
`;
119116

120117
// this prevents the button from influencing the line height
121118
const AbsoluteWrapper = euiStyled.div`
122-
overflow: hidden;
123119
position: absolute;
124120
`;

‎x-pack/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx‎

Lines changed: 38 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@ import {
88
EuiFlexGroup,
99
EuiFlexItem,
1010
EuiModal,
11-
EuiModalBody,
1211
EuiOverlayMask,
1312
EuiText,
1413
EuiTextColor,
1514
EuiToolTip,
15+
EuiSpacer,
1616
} from '@elastic/eui';
17+
import { FormattedMessage } from '@kbn/i18n/react';
1718
import { noop } from 'lodash';
1819
import React, { useCallback, useContext, useMemo } from 'react';
1920
import { LogEntry } from '../../../../common/http_api';
@@ -22,6 +23,7 @@ import { useLogSourceContext } from '../../../containers/logs/log_source';
2223
import { LogViewConfiguration } from '../../../containers/logs/log_view_configuration';
2324
import { ViewLogInContext } from '../../../containers/logs/view_log_in_context';
2425
import { useViewportDimensions } from '../../../utils/use_viewport_dimensions';
26+
import { euiStyled } from '../../../../../observability/public';
2527

2628
const MODAL_MARGIN = 25;
2729

@@ -55,7 +57,7 @@ export const PageViewLogInContext: React.FC = () => {
5557
return (
5658
<EuiOverlayMask>
5759
<EuiModal onClose={closeModal} maxWidth={false}>
58-
<EuiModalBody style={{ width: vw - MODAL_MARGIN * 2, height: vh - MODAL_MARGIN * 2 }}>
60+
<LogInContextWrapper width={vw - MODAL_MARGIN * 2} height={vh - MODAL_MARGIN * 2}>
5961
<EuiFlexGroup
6062
direction="column"
6163
responsive={false}
@@ -64,6 +66,7 @@ export const PageViewLogInContext: React.FC = () => {
6466
>
6567
<EuiFlexItem grow={1}>
6668
<LogEntryContext context={contextEntry.context} />
69+
<EuiSpacer size="m" />
6770
<ScrollableLogTextStreamView
6871
target={contextEntry.cursor}
6972
columnConfigurations={columnConfigurations}
@@ -89,37 +92,56 @@ export const PageViewLogInContext: React.FC = () => {
8992
/>
9093
</EuiFlexItem>
9194
</EuiFlexGroup>
92-
</EuiModalBody>
95+
</LogInContextWrapper>
9396
</EuiModal>
9497
</EuiOverlayMask>
9598
);
9699
};
97100

101+
const LogInContextWrapper = euiStyled.div<{ width: number | string; height: number | string }>`
102+
padding: 16px;
103+
width: ${(props) => (typeof props.width === 'number' ? `${props.width}px` : props.width)};
104+
height: ${(props) => (typeof props.height === 'number' ? `${props.height}px` : props.height)};
105+
`;
106+
98107
const LogEntryContext: React.FC<{ context: LogEntry['context'] }> = ({ context }) => {
108+
let text;
99109
if ('container.id' in context) {
100-
return <p>Displayed logs are from container {context['container.id']}</p>;
110+
text = (
111+
<FormattedMessage
112+
id="xpack.infra.logs.viewInContext.logsFromContainerTitle"
113+
defaultMessage="Displayed logs are from container {container}"
114+
values={{ container: context['container.id'] }}
115+
/>
116+
);
101117
}
102118

103119
if ('host.name' in context) {
104120
const shortenedFilePath =
105121
context['log.file.path'].length > 45
106122
? context['log.file.path'].slice(0, 20) + '...' + context['log.file.path'].slice(-25)
107123
: context['log.file.path'];
108-
109-
return (
110-
<EuiText size="s">
111-
<p>
112-
<EuiTextColor color="subdued">
113-
Displayed logs are from file{' '}
124+
text = (
125+
<FormattedMessage
126+
id="xpack.infra.logs.viewInContext.logsFromFileTitle"
127+
defaultMessage="Displayed logs are from file {file} and host {host}"
128+
values={{
129+
file: (
114130
<EuiToolTip content={context['log.file.path']}>
115131
<span>{shortenedFilePath}</span>
116-
</EuiToolTip>{' '}
117-
and host {context['host.name']}
118-
</EuiTextColor>
119-
</p>
120-
</EuiText>
132+
</EuiToolTip>
133+
),
134+
host: context['host.name'],
135+
}}
136+
/>
121137
);
122138
}
123139

124-
return null;
140+
return (
141+
<EuiText size="s">
142+
<p>
143+
<EuiTextColor color="subdued">{text}</EuiTextColor>
144+
</p>
145+
</EuiText>
146+
);
125147
};

‎x-pack/plugins/translations/translations/ja-JP.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7640,7 +7640,6 @@
76407640
"xpack.infra.logs.lastUpdate": "前回の更新 {timestamp}",
76417641
"xpack.infra.logs.loadingNewEntriesText": "新しいエントリーを読み込み中",
76427642
"xpack.infra.logs.logEntryActionsDetailsButton": "詳細を表示",
7643-
"xpack.infra.logs.logEntryActionsMenuTitle": "行詳細のログ",
76447643
"xpack.infra.logs.logEntryCategories.analyzeCategoryInMlButtonLabel": "ML で分析",
76457644
"xpack.infra.logs.logEntryCategories.analyzeCategoryInMlTooltipDescription": "ML アプリでこのカテゴリーを分析します。",
76467645
"xpack.infra.logs.logEntryCategories.categoryColumnTitle": "カテゴリー",

‎x-pack/plugins/translations/translations/zh-CN.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7644,7 +7644,6 @@
76447644
"xpack.infra.logs.lastUpdate": "上次更新时间 {timestamp}",
76457645
"xpack.infra.logs.loadingNewEntriesText": "正在加载新条目",
76467646
"xpack.infra.logs.logEntryActionsDetailsButton": "查看详情",
7647-
"xpack.infra.logs.logEntryActionsMenuTitle": "日志行详情",
76487647
"xpack.infra.logs.logEntryCategories.analyzeCategoryInMlButtonLabel": "在 ML 中分析",
76497648
"xpack.infra.logs.logEntryCategories.analyzeCategoryInMlTooltipDescription": "在 ML 应用中分析此类别。",
76507649
"xpack.infra.logs.logEntryCategories.categoryColumnTitle": "类别",

0 commit comments

Comments
 (0)