[Logs UI] Logs ui context menu (#69915)

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

@@ -0,0 +1,94 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiButtonIcon, EuiPopover, EuiContextMenuPanel, EuiContextMenuItem } from '@elastic/eui';
+
+import { euiStyled } from '../../../../../observability/public';
+import { LogEntryColumnContent } from './log_entry_column';
+
+interface LogEntryContextMenuItem {
+  label: string;
+  onClick: () => void;
+}
+
+interface LogEntryContextMenuProps {
+  'aria-label'?: string;
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+  items: LogEntryContextMenuItem[];
+}
+
+const DEFAULT_MENU_LABEL = i18n.translate(
+  'xpack.infra.logEntryItemView.logEntryActionsMenuToolTip',
+  {
+    defaultMessage: 'View actions for line',
+  }
+);
+
+export const LogEntryContextMenu: React.FC<LogEntryContextMenuProps> = ({
+  'aria-label': ariaLabel,
+  isOpen,
+  onOpen,
+  onClose,
+  items,
+}) => {
+  const closeMenuAndCall = useMemo(() => {
+    return (callback: LogEntryContextMenuItem['onClick']) => {
+      return () => {
+        onClose();
+        callback();
+      };
+    };
+  }, [onClose]);
+
+  const button = (
+    <ButtonWrapper>
+      <EuiButtonIcon
+        aria-label={ariaLabel || DEFAULT_MENU_LABEL}
+        color="ghost"
+        iconType="boxesHorizontal"
+        onClick={onOpen}
+      />
+    </ButtonWrapper>
+  );
+
+  const wrappedItems = useMemo(() => {
+    return items.map((item, i) => (
+      <EuiContextMenuItem key={i} onClick={closeMenuAndCall(item.onClick)}>
+        {item.label}
+      </EuiContextMenuItem>
+    ));
+  }, [items, closeMenuAndCall]);
+
+  return (
+    <LogEntryContextMenuContent>
+      <AbsoluteWrapper>
+        <EuiPopover closePopover={onClose} isOpen={isOpen} button={button} ownFocus={true}>
+          <EuiContextMenuPanel items={wrappedItems} />
+        </EuiPopover>
+      </AbsoluteWrapper>
+    </LogEntryContextMenuContent>
+  );
+};
+
+const LogEntryContextMenuContent = euiStyled(LogEntryColumnContent)`
+  overflow: hidden;
+  user-select: none;
+`;
+
+const AbsoluteWrapper = euiStyled.div`
+  position: absolute;
+`;
+
+const ButtonWrapper = euiStyled.div`
+  background: ${(props) => props.theme.eui.euiColorPrimary};
+  border-radius: 50%;
+  padding: 4px;
+  transform: translateY(-6px);
+`;

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

@@ -5,6 +5,7 @@
  */
 
 import React, { memo, useState, useCallback, useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
 import { isEmpty } from 'lodash';
 
 import { euiStyled } from '../../../../../observability/public';
@@ -18,11 +19,26 @@ import {
 import { TextScale } from '../../../../common/log_text_scale';
 import { LogEntryColumn, LogEntryColumnWidths, iconColumnId } from './log_entry_column';
 import { LogEntryFieldColumn } from './log_entry_field_column';
-import { LogEntryActionsColumn } from './log_entry_actions_column';
 import { LogEntryMessageColumn } from './log_entry_message_column';
 import { LogEntryTimestampColumn } from './log_entry_timestamp_column';
 import { monospaceTextStyle, hoveredContentStyle, highlightedContentStyle } from './text_styles';
 import { LogEntry, LogColumn } from '../../../../common/http_api';
+import { LogEntryContextMenu } from './log_entry_context_menu';
+
+const MENU_LABEL = i18n.translate('xpack.infra.logEntryItemView.logEntryActionsMenuToolTip', {
+  defaultMessage: 'View actions for line',
+});
+
+const LOG_DETAILS_LABEL = i18n.translate('xpack.infra.logs.logEntryActionsDetailsButton', {
+  defaultMessage: 'View details',
+});
+
+const LOG_VIEW_IN_CONTEXT_LABEL = i18n.translate(
+  'xpack.infra.lobs.logEntryActionsViewInContextButton',
+  {
+    defaultMessage: 'View in context',
+  }
+);
 
 interface LogEntryRowProps {
   boundingBoxRef?: React.Ref<Element>;
@@ -76,6 +92,29 @@ export const LogEntryRow = memo(
     const hasActionViewLogInContext = hasContext && openViewLogInContext !== undefined;
     const hasActionsMenu = hasActionFlyoutWithItem || hasActionViewLogInContext;
 
+    const menuItems = useMemo(() => {
+      const items = [];
+      if (hasActionFlyoutWithItem) {
+        items.push({
+          label: LOG_DETAILS_LABEL,
+          onClick: openFlyout,
+        });
+      }
+      if (hasActionViewLogInContext) {
+        items.push({
+          label: LOG_VIEW_IN_CONTEXT_LABEL,
+          onClick: handleOpenViewLogInContext,
+        });
+      }
+
+      return items;
+    }, [
+      hasActionFlyoutWithItem,
+      hasActionViewLogInContext,
+      openFlyout,
+      handleOpenViewLogInContext,
+    ]);
+
     const logEntryColumnsById = useMemo(
       () =>
         logEntry.columns.reduce<{
@@ -183,16 +222,15 @@ export const LogEntryRow = memo(
             key="logColumn iconLogColumn iconLogColumn:details"
             {...columnWidths[iconColumnId]}
           >
-            <LogEntryActionsColumn
-              isHovered={isHovered}
-              isMenuOpen={isMenuOpen}
-              onOpenMenu={openMenu}
-              onCloseMenu={closeMenu}
-              onViewDetails={hasActionFlyoutWithItem ? openFlyout : undefined}
-              onViewLogInContext={
-                hasActionViewLogInContext ? handleOpenViewLogInContext : undefined
-              }
-            />
+            {isHovered || isMenuOpen ? (
+              <LogEntryContextMenu
+                aria-label={MENU_LABEL}
+                isOpen={isMenuOpen}
+                onOpen={openMenu}
+                onClose={closeMenu}
+                items={menuItems}
+              />
+            ) : null}
           </LogEntryColumn>
         ) : null}
       </LogEntryRowWrapper>