[7.x] [Logs UI] View in context tweaks (#67777) (#68516)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

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,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;
 `;

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

@@ -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'];
-
-    return (
-      <EuiText size="s">
-        <p>
-          <EuiTextColor color="subdued">
-            Displayed logs are from file{' '}
+    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>{' '}
-            and host {context['host.name']}
-          </EuiTextColor>
-        </p>
-      </EuiText>
+            </EuiToolTip>
+          ),
+          host: context['host.name'],
+        }}
+      />
     );
   }
 
-  return null;
+  return (
+    <EuiText size="s">
+      <p>
+        <EuiTextColor color="subdued">{text}</EuiTextColor>
+      </p>
+    </EuiText>
+  );
 };

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

@@ -7601,7 +7601,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": "カテゴリー",

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

@@ -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": "类别",