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