From 910430dc021b1a6e1716ac311e05de2a0d1cea77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?= Date: Thu, 28 May 2020 17:44:09 +0200 Subject: [PATCH 1/6] Tweak the log line action CTA size --- .../logging/log_text_stream/log_entry_actions_column.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx index 1ac2e00abca70..5cdde050383c2 100644 --- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx @@ -115,10 +115,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; `; From 7c2bb0617d24aa9d4ecade8a92faeea86d854db2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?= Date: Fri, 29 May 2020 15:40:54 +0200 Subject: [PATCH 2/6] Tweak modal padding --- .../public/pages/logs/stream/page_view_log_in_context.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx b/x-pack/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx index b6e6710a0b3b4..591961c74559d 100644 --- a/x-pack/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx +++ b/x-pack/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx @@ -54,7 +54,9 @@ export const PageViewLogInContext: React.FC = () => { return ( - + Date: Fri, 29 May 2020 17:03:23 +0200 Subject: [PATCH 3/6] Tweak spacing in modal window --- .../logs/stream/page_view_log_in_context.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx b/x-pack/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx index 591961c74559d..ddef53a99c330 100644 --- a/x-pack/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx +++ b/x-pack/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx @@ -8,11 +8,11 @@ import { EuiFlexGroup, EuiFlexItem, EuiModal, - EuiModalBody, EuiOverlayMask, EuiText, EuiTextColor, EuiToolTip, + EuiSpacer, } from '@elastic/eui'; import { noop } from 'lodash'; import React, { useCallback, useContext, useMemo } from 'react'; @@ -22,6 +22,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; @@ -54,9 +55,7 @@ export const PageViewLogInContext: React.FC = () => { return ( - + { > + { /> - + ); }; +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 }) => { if ('container.id' in context) { return

Displayed logs are from container {context['container.id']}

; From c28dd6ee949cdec2a513dfc9373fcc370b01751c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?= Date: Fri, 29 May 2020 17:13:51 +0200 Subject: [PATCH 4/6] Add i18n to the context line --- .../logs/stream/page_view_log_in_context.tsx | 40 +++++++++++++------ 1 file changed, 27 insertions(+), 13 deletions(-) diff --git a/x-pack/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx b/x-pack/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx index ddef53a99c330..6fd40a52f615f 100644 --- a/x-pack/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx +++ b/x-pack/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx @@ -14,6 +14,7 @@ import { 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'; @@ -103,8 +104,15 @@ const LogInContextWrapper = euiStyled.div<{ width: number | string; height: numb `; const LogEntryContext: React.FC<{ context: LogEntry['context'] }> = ({ context }) => { + let text; if ('container.id' in context) { - return

Displayed logs are from container {context['container.id']}

; + text = ( + + ); } if ('host.name' in context) { @@ -112,21 +120,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']; - - return ( - -

- - Displayed logs are from file{' '} + text = ( + {shortenedFilePath} - {' '} - and host {context['host.name']} - -

- + + ), + host: context['host.name'], + }} + /> ); } - return null; + return ( + +

+ {text} +

+ + ); }; From c791a67e96094e559227843659f5b84a14470539 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?= Date: Wed, 3 Jun 2020 15:26:53 +0200 Subject: [PATCH 5/6] Use `EuiContextMenu` for log row's CTA --- .../log_entry_actions_column.tsx | 48 ++++++++----------- .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - 3 files changed, 19 insertions(+), 31 deletions(-) diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx index 5cdde050383c2..5cc2547683139 100644 --- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx @@ -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,27 @@ export const LogEntryActionsColumn: React.FC = ({ ); + const items = [ + + {LOG_DETAILS_LABEL} + , + ]; + + if (onViewLogInContext !== undefined) { + items.push( + + {LOG_VIEW_IN_CONTEXT_LABEL} + + ); + } + return ( {isHovered || isMenuOpen ? ( - -
- - - - - - {onViewLogInContext !== undefined ? ( - - ) : null} - -
- + + + ) : null} diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 4522a641d6dd9..18978cf023ef2 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -7638,7 +7638,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": "カテゴリー", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index bceded8ea3bbb..9b0245d5bed91 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -7642,7 +7642,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": "类别", From c869294650d93e0e604dc16416aaaad26d949c51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?= Date: Mon, 8 Jun 2020 13:59:14 +0200 Subject: [PATCH 6/6] Restore `ownFocus` in the menu The shared observability component added the `ownFocus` property to the popover menu. This added some accessibility text that we want to keep. --- .../logging/log_text_stream/log_entry_actions_column.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx index 5cc2547683139..e27de7fd6b5a8 100644 --- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx @@ -88,7 +88,12 @@ export const LogEntryActionsColumn: React.FC = ({ {isHovered || isMenuOpen ? ( - +