[7.x] [Logs UI] Log stream row rendering (elastic#60773) (elastic#61953)

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

@@ -0,0 +1,98 @@
+/*
+ * 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, { useCallback } from 'react';
+import { EuiButtonIcon } 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';
+
+interface LogEntryActionsColumnProps {
+  isHovered: boolean;
+  isMenuOpen: boolean;
+  onOpenMenu: () => void;
+  onCloseMenu: () => void;
+  onViewDetails: () => void;
+}
+
+const MENU_LABEL = i18n.translate('xpack.infra.logEntryItemView.logEntryActionsMenuToolTip', {
+  defaultMessage: 'View Details',
+});
+
+const LOG_DETAILS_LABEL = i18n.translate('xpack.infra.logs.logEntryActionsDetailsButton', {
+  defaultMessage: 'View actions for line',
+});
+
+export const LogEntryActionsColumn: React.FC<LogEntryActionsColumnProps> = ({
+  isHovered,
+  isMenuOpen,
+  onOpenMenu,
+  onCloseMenu,
+  onViewDetails,
+}) => {
+  const handleClickViewDetails = useCallback(() => {
+    onCloseMenu();
+    onViewDetails();
+  }, [onCloseMenu, onViewDetails]);
+
+  const button = (
+    <ButtonWrapper>
+      <EuiButtonIcon
+        aria-label={MENU_LABEL}
+        color="ghost"
+        iconType="boxesHorizontal"
+        onClick={onOpenMenu}
+      />
+    </ButtonWrapper>
+  );
+
+  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} />
+              </SectionLinks>
+            </Section>
+          </ActionMenu>
+        </AbsoluteWrapper>
+      ) : null}
+    </ActionsColumnContent>
+  );
+};
+
+const ActionsColumnContent = euiStyled(LogEntryColumnContent)`
+  overflow: hidden;
+  user-select: none;
+`;
+
+const ButtonWrapper = euiStyled.div`
+  background: ${props => props.theme.eui.euiColorPrimary};
+  border-radius: 50%;
+`;
+
+// this prevents the button from influencing the line height
+const AbsoluteWrapper = euiStyled.div`
+  overflow: hidden;
+  position: absolute;
+`;

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

@@ -25,8 +25,6 @@ describe('LogEntryFieldColumn', () => {
         columnValue={column}
         highlights={[]}
         isActiveHighlight={false}
-        isHighlighted={false}
-        isHovered={false}
         wrapMode="pre-wrapped"
       />,
       { wrappingComponent: EuiThemeProvider } as any // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/36075
@@ -58,8 +56,6 @@ describe('LogEntryFieldColumn', () => {
         columnValue={column}
         highlights={[]}
         isActiveHighlight={false}
-        isHighlighted={false}
-        isHovered={false}
         wrapMode="pre-wrapped"
       />,
       { wrappingComponent: EuiThemeProvider } as any // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/36075
@@ -81,8 +77,6 @@ describe('LogEntryFieldColumn', () => {
         columnValue={column}
         highlights={[]}
         isActiveHighlight={false}
-        isHighlighted={false}
-        isHovered={false}
         wrapMode="pre-wrapped"
       />,
       { wrappingComponent: EuiThemeProvider } as any // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/36075

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

@@ -13,7 +13,6 @@ import { ActiveHighlightMarker, highlightFieldValue, HighlightMarker } from './h
 import { LogEntryColumnContent } from './log_entry_column';
 import { LogColumn } from '../../../../common/http_api';
 import {
-  hoveredContentStyle,
   longWrappedContentStyle,
   preWrappedContentStyle,
   unwrappedContentStyle,
@@ -24,17 +23,13 @@ interface LogEntryFieldColumnProps {
   columnValue: LogColumn;
   highlights: LogColumn[];
   isActiveHighlight: boolean;
-  isHighlighted: boolean;
-  isHovered: boolean;
   wrapMode: WrapMode;
 }
 
 export const LogEntryFieldColumn: React.FunctionComponent<LogEntryFieldColumnProps> = ({
   columnValue,
   highlights: [firstHighlight], // we only support one highlight for now
   isActiveHighlight,
-  isHighlighted,
-  isHovered,
   wrapMode,
 }) => {
   const value = useMemo(() => {
@@ -63,11 +58,7 @@ export const LogEntryFieldColumn: React.FunctionComponent<LogEntryFieldColumnPro
     )
   );
 
-  return (
-    <FieldColumnContent isHighlighted={isHighlighted} isHovered={isHovered} wrapMode={wrapMode}>
-      {formattedValue}
-    </FieldColumnContent>
-  );
+  return <FieldColumnContent wrapMode={wrapMode}>{formattedValue}</FieldColumnContent>;
 };
 
 const CommaSeparatedLi = euiStyled.li`
@@ -81,15 +72,12 @@ const CommaSeparatedLi = euiStyled.li`
 `;
 
 interface LogEntryColumnContentProps {
-  isHighlighted: boolean;
-  isHovered: boolean;
   wrapMode: WrapMode;
 }
 
 const FieldColumnContent = euiStyled(LogEntryColumnContent)<LogEntryColumnContentProps>`
   text-overflow: ellipsis;
 
-  ${props => (props.isHovered || props.isHighlighted ? hoveredContentStyle : '')};
   ${props =>
     props.wrapMode === 'long'
       ? longWrappedContentStyle

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

@@ -18,7 +18,6 @@ import {
 import { ActiveHighlightMarker, highlightFieldValue, HighlightMarker } from './highlighting';
 import { LogEntryColumnContent } from './log_entry_column';
 import {
-  hoveredContentStyle,
   longWrappedContentStyle,
   preWrappedContentStyle,
   unwrappedContentStyle,
@@ -30,13 +29,11 @@ interface LogEntryMessageColumnProps {
   columnValue: LogColumn;
   highlights: LogColumn[];
   isActiveHighlight: boolean;
-  isHighlighted: boolean;
-  isHovered: boolean;
   wrapMode: WrapMode;
 }
 
 export const LogEntryMessageColumn = memo<LogEntryMessageColumnProps>(
-  ({ columnValue, highlights, isActiveHighlight, isHighlighted, isHovered, wrapMode }) => {
+  ({ columnValue, highlights, isActiveHighlight, wrapMode }) => {
     const message = useMemo(
       () =>
         isMessageColumn(columnValue)
@@ -45,24 +42,16 @@ export const LogEntryMessageColumn = memo<LogEntryMessageColumnProps>(
       [columnValue, highlights, isActiveHighlight]
     );
 
-    return (
-      <MessageColumnContent isHighlighted={isHighlighted} isHovered={isHovered} wrapMode={wrapMode}>
-        {message}
-      </MessageColumnContent>
-    );
+    return <MessageColumnContent wrapMode={wrapMode}>{message}</MessageColumnContent>;
   }
 );
 
 interface MessageColumnContentProps {
-  isHovered: boolean;
-  isHighlighted: boolean;
   wrapMode: WrapMode;
 }
 
 const MessageColumnContent = euiStyled(LogEntryColumnContent)<MessageColumnContentProps>`
   text-overflow: ellipsis;
-
-  ${props => (props.isHovered || props.isHighlighted ? hoveredContentStyle : '')};
   ${props =>
     props.wrapMode === 'long'
       ? longWrappedContentStyle