[Logs UI] View in context tweaks (#67777)
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
parent
f89e911f64
commit
e66eaf74fd
|
@ -5,19 +5,11 @@
|
|||
*/
|
||||
|
||||
import React, { useCallback } from 'react';
|
||||
import { EuiButtonIcon } from '@elastic/eui';
|
||||
import { EuiButtonIcon, EuiPopover, EuiContextMenuPanel, EuiContextMenuItem } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
|
||||
import { LogEntryColumnContent } from './log_entry_column';
|
||||
import {
|
||||
euiStyled,
|
||||
ActionMenu,
|
||||
Section,
|
||||
SectionTitle,
|
||||
SectionLinks,
|
||||
SectionLink,
|
||||
} from '../../../../../observability/public';
|
||||
import { euiStyled } from '../../../../../observability/public';
|
||||
|
||||
interface LogEntryActionsColumnProps {
|
||||
isHovered: boolean;
|
||||
|
@ -78,29 +70,32 @@ export const LogEntryActionsColumn: React.FC<LogEntryActionsColumnProps> = ({
|
|||
</ButtonWrapper>
|
||||
);
|
||||
|
||||
const items = [
|
||||
<EuiContextMenuItem key="log_details" onClick={handleClickViewDetails}>
|
||||
{LOG_DETAILS_LABEL}
|
||||
</EuiContextMenuItem>,
|
||||
];
|
||||
|
||||
if (onViewLogInContext !== undefined) {
|
||||
items.push(
|
||||
<EuiContextMenuItem key="view_in_context" onClick={handleClickViewInContext}>
|
||||
{LOG_VIEW_IN_CONTEXT_LABEL}
|
||||
</EuiContextMenuItem>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ActionsColumnContent>
|
||||
{isHovered || isMenuOpen ? (
|
||||
<AbsoluteWrapper>
|
||||
<ActionMenu closePopover={onCloseMenu} isOpen={isMenuOpen} button={button}>
|
||||
<Section>
|
||||
<SectionTitle>
|
||||
<FormattedMessage
|
||||
id="xpack.infra.logs.logEntryActionsMenuTitle"
|
||||
defaultMessage="Log line details"
|
||||
/>
|
||||
</SectionTitle>
|
||||
<SectionLinks>
|
||||
<SectionLink label={LOG_DETAILS_LABEL} onClick={handleClickViewDetails} />
|
||||
{onViewLogInContext !== undefined ? (
|
||||
<SectionLink
|
||||
label={LOG_VIEW_IN_CONTEXT_LABEL}
|
||||
onClick={handleClickViewInContext}
|
||||
/>
|
||||
) : null}
|
||||
</SectionLinks>
|
||||
</Section>
|
||||
</ActionMenu>
|
||||
<EuiPopover
|
||||
closePopover={onCloseMenu}
|
||||
isOpen={isMenuOpen}
|
||||
button={button}
|
||||
ownFocus={true}
|
||||
>
|
||||
<EuiContextMenuPanel items={items} />
|
||||
</EuiPopover>
|
||||
</AbsoluteWrapper>
|
||||
) : null}
|
||||
</ActionsColumnContent>
|
||||
|
@ -115,10 +110,11 @@ const ActionsColumnContent = euiStyled(LogEntryColumnContent)`
|
|||
const ButtonWrapper = euiStyled.div`
|
||||
background: ${(props) => props.theme.eui.euiColorPrimary};
|
||||
border-radius: 50%;
|
||||
padding: 4px;
|
||||
transform: translateY(-6px);
|
||||
`;
|
||||
|
||||
// this prevents the button from influencing the line height
|
||||
const AbsoluteWrapper = euiStyled.div`
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
`;
|
||||
|
|
|
@ -8,12 +8,13 @@ import {
|
|||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiModal,
|
||||
EuiModalBody,
|
||||
EuiOverlayMask,
|
||||
EuiText,
|
||||
EuiTextColor,
|
||||
EuiToolTip,
|
||||
EuiSpacer,
|
||||
} from '@elastic/eui';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import { noop } from 'lodash';
|
||||
import React, { useCallback, useContext, useMemo } from 'react';
|
||||
import { LogEntry } from '../../../../common/http_api';
|
||||
|
@ -22,6 +23,7 @@ import { useLogSourceContext } from '../../../containers/logs/log_source';
|
|||
import { LogViewConfiguration } from '../../../containers/logs/log_view_configuration';
|
||||
import { ViewLogInContext } from '../../../containers/logs/view_log_in_context';
|
||||
import { useViewportDimensions } from '../../../utils/use_viewport_dimensions';
|
||||
import { euiStyled } from '../../../../../observability/public';
|
||||
|
||||
const MODAL_MARGIN = 25;
|
||||
|
||||
|
@ -55,7 +57,7 @@ export const PageViewLogInContext: React.FC = () => {
|
|||
return (
|
||||
<EuiOverlayMask>
|
||||
<EuiModal onClose={closeModal} maxWidth={false}>
|
||||
<EuiModalBody style={{ width: vw - MODAL_MARGIN * 2, height: vh - MODAL_MARGIN * 2 }}>
|
||||
<LogInContextWrapper width={vw - MODAL_MARGIN * 2} height={vh - MODAL_MARGIN * 2}>
|
||||
<EuiFlexGroup
|
||||
direction="column"
|
||||
responsive={false}
|
||||
|
@ -64,6 +66,7 @@ export const PageViewLogInContext: React.FC = () => {
|
|||
>
|
||||
<EuiFlexItem grow={1}>
|
||||
<LogEntryContext context={contextEntry.context} />
|
||||
<EuiSpacer size="m" />
|
||||
<ScrollableLogTextStreamView
|
||||
target={contextEntry.cursor}
|
||||
columnConfigurations={columnConfigurations}
|
||||
|
@ -89,15 +92,28 @@ export const PageViewLogInContext: React.FC = () => {
|
|||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiModalBody>
|
||||
</LogInContextWrapper>
|
||||
</EuiModal>
|
||||
</EuiOverlayMask>
|
||||
);
|
||||
};
|
||||
|
||||
const LogInContextWrapper = euiStyled.div<{ width: number | string; height: number | string }>`
|
||||
padding: 16px;
|
||||
width: ${(props) => (typeof props.width === 'number' ? `${props.width}px` : props.width)};
|
||||
height: ${(props) => (typeof props.height === 'number' ? `${props.height}px` : props.height)};
|
||||
`;
|
||||
|
||||
const LogEntryContext: React.FC<{ context: LogEntry['context'] }> = ({ context }) => {
|
||||
let text;
|
||||
if ('container.id' in context) {
|
||||
return <p>Displayed logs are from container {context['container.id']}</p>;
|
||||
text = (
|
||||
<FormattedMessage
|
||||
id="xpack.infra.logs.viewInContext.logsFromContainerTitle"
|
||||
defaultMessage="Displayed logs are from container {container}"
|
||||
values={{ container: context['container.id'] }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if ('host.name' in context) {
|
||||
|
@ -105,21 +121,27 @@ const LogEntryContext: React.FC<{ context: LogEntry['context'] }> = ({ context }
|
|||
context['log.file.path'].length > 45
|
||||
? context['log.file.path'].slice(0, 20) + '...' + context['log.file.path'].slice(-25)
|
||||
: context['log.file.path'];
|
||||
text = (
|
||||
<FormattedMessage
|
||||
id="xpack.infra.logs.viewInContext.logsFromFileTitle"
|
||||
defaultMessage="Displayed logs are from file {file} and host {host}"
|
||||
values={{
|
||||
file: (
|
||||
<EuiToolTip content={context['log.file.path']}>
|
||||
<span>{shortenedFilePath}</span>
|
||||
</EuiToolTip>
|
||||
),
|
||||
host: context['host.name'],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<EuiText size="s">
|
||||
<p>
|
||||
<EuiTextColor color="subdued">
|
||||
Displayed logs are from file{' '}
|
||||
<EuiToolTip content={context['log.file.path']}>
|
||||
<span>{shortenedFilePath}</span>
|
||||
</EuiToolTip>{' '}
|
||||
and host {context['host.name']}
|
||||
</EuiTextColor>
|
||||
<EuiTextColor color="subdued">{text}</EuiTextColor>
|
||||
</p>
|
||||
</EuiText>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
|
|
@ -7605,7 +7605,6 @@
|
|||
"xpack.infra.logs.lastUpdate": "前回の更新 {timestamp}",
|
||||
"xpack.infra.logs.loadingNewEntriesText": "新しいエントリーを読み込み中",
|
||||
"xpack.infra.logs.logEntryActionsDetailsButton": "詳細を表示",
|
||||
"xpack.infra.logs.logEntryActionsMenuTitle": "行詳細のログ",
|
||||
"xpack.infra.logs.logEntryCategories.analyzeCategoryInMlButtonLabel": "ML で分析",
|
||||
"xpack.infra.logs.logEntryCategories.analyzeCategoryInMlTooltipDescription": "ML アプリでこのカテゴリーを分析します。",
|
||||
"xpack.infra.logs.logEntryCategories.categoryColumnTitle": "カテゴリー",
|
||||
|
|
|
@ -7609,7 +7609,6 @@
|
|||
"xpack.infra.logs.lastUpdate": "上次更新时间 {timestamp}",
|
||||
"xpack.infra.logs.loadingNewEntriesText": "正在加载新条目",
|
||||
"xpack.infra.logs.logEntryActionsDetailsButton": "查看详情",
|
||||
"xpack.infra.logs.logEntryActionsMenuTitle": "日志行详情",
|
||||
"xpack.infra.logs.logEntryCategories.analyzeCategoryInMlButtonLabel": "在 ML 中分析",
|
||||
"xpack.infra.logs.logEntryCategories.analyzeCategoryInMlTooltipDescription": "在 ML 应用中分析此类别。",
|
||||
"xpack.infra.logs.logEntryCategories.categoryColumnTitle": "类别",
|
||||
|
|
Loading…
Reference in a new issue