From 2fdfabceaed36fc6c86031972a6b156d2c10cea0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Fri, 20 Mar 2020 16:34:56 +0100
Subject: [PATCH 01/15] Use `focusBackgroundColor` for hovered lines

---
 .../components/logging/log_text_stream/text_styles.tsx      | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/text_styles.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/text_styles.tsx
index 434258343eefb..ff774c946ca67 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/text_styles.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/text_styles.tsx
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { darken, transparentize } from 'polished';
 import React, { useMemo, useState, useCallback } from 'react';
 
 import { euiStyled, css } from '../../../../../observability/public';
@@ -30,10 +29,7 @@ export const monospaceTextStyle = (scale: TextScale) => css`
 `;
 
 export const hoveredContentStyle = css`
-  background-color: ${props =>
-    props.theme.darkMode
-      ? transparentize(0.9, darken(0.05, props.theme.eui.euiColorHighlight))
-      : darken(0.05, props.theme.eui.euiColorHighlight)};
+  background-color: ${props => props.theme.eui.euiFocusBackgroundColor};
 `;
 
 export const longWrappedContentStyle = css`

From 46751268418df6fc6e33602231e228a40fe027b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Fri, 20 Mar 2020 16:39:10 +0100
Subject: [PATCH 02/15] Set hover styles using CSS

This simplifies how the row renders, removing the need for each column
to have a `isHovered` prop to render the hovered styles.

Since now we rely in the browser, it also prevents some re-renders in
the columns.
---
 .../log_entry_field_column.test.tsx           |  3 ---
 .../log_entry_field_column.tsx                |  7 ++---
 .../log_text_stream/log_entry_icon_column.tsx | 25 +++++-------------
 .../log_entry_message_column.tsx              |  8 +++---
 .../logging/log_text_stream/log_entry_row.tsx | 14 +++++-----
 .../log_entry_timestamp_column.tsx            | 26 ++++---------------
 6 files changed, 23 insertions(+), 60 deletions(-)

diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.test.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.test.tsx
index 5fc4606a774d5..3eefb3991a2e6 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.test.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.test.tsx
@@ -26,7 +26,6 @@ describe('LogEntryFieldColumn', () => {
         highlights={[]}
         isActiveHighlight={false}
         isHighlighted={false}
-        isHovered={false}
         wrapMode="pre-wrapped"
       />,
       { wrappingComponent: EuiThemeProvider } as any // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/36075
@@ -59,7 +58,6 @@ describe('LogEntryFieldColumn', () => {
         highlights={[]}
         isActiveHighlight={false}
         isHighlighted={false}
-        isHovered={false}
         wrapMode="pre-wrapped"
       />,
       { wrappingComponent: EuiThemeProvider } as any // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/36075
@@ -82,7 +80,6 @@ describe('LogEntryFieldColumn', () => {
         highlights={[]}
         isActiveHighlight={false}
         isHighlighted={false}
-        isHovered={false}
         wrapMode="pre-wrapped"
       />,
       { wrappingComponent: EuiThemeProvider } as any // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/36075
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx
index 202108cda5ac0..e8dd3cf7f4b1f 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx
@@ -25,7 +25,6 @@ interface LogEntryFieldColumnProps {
   highlights: LogColumn[];
   isActiveHighlight: boolean;
   isHighlighted: boolean;
-  isHovered: boolean;
   wrapMode: WrapMode;
 }
 
@@ -34,7 +33,6 @@ export const LogEntryFieldColumn: React.FunctionComponent<LogEntryFieldColumnPro
   highlights: [firstHighlight], // we only support one highlight for now
   isActiveHighlight,
   isHighlighted,
-  isHovered,
   wrapMode,
 }) => {
   const value = useMemo(() => {
@@ -64,7 +62,7 @@ export const LogEntryFieldColumn: React.FunctionComponent<LogEntryFieldColumnPro
   );
 
   return (
-    <FieldColumnContent isHighlighted={isHighlighted} isHovered={isHovered} wrapMode={wrapMode}>
+    <FieldColumnContent isHighlighted={isHighlighted} wrapMode={wrapMode}>
       {formattedValue}
     </FieldColumnContent>
   );
@@ -82,14 +80,13 @@ 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.isHighlighted ? hoveredContentStyle : '')};
   ${props =>
     props.wrapMode === 'long'
       ? longWrappedContentStyle
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_icon_column.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_icon_column.tsx
index a4099cdf5a1fb..b49bf5addd844 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_icon_column.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_icon_column.tsx
@@ -12,52 +12,41 @@ import { LogEntryColumnContent } from './log_entry_column';
 import { hoveredContentStyle } from './text_styles';
 import { euiStyled } from '../../../../../observability/public';
 
-interface LogEntryIconColumnProps {
+interface LogEntryDetailsIconColumnProps {
   isHighlighted: boolean;
   isHovered: boolean;
+  openFlyout: () => void;
 }
 
-export const LogEntryIconColumn: React.FunctionComponent<LogEntryIconColumnProps> = ({
-  children,
+export const LogEntryDetailsIconColumn: React.FC<LogEntryDetailsIconColumnProps> = ({
   isHighlighted,
   isHovered,
+  openFlyout,
 }) => {
-  return (
-    <IconColumnContent isHighlighted={isHighlighted} isHovered={isHovered}>
-      {children}
-    </IconColumnContent>
-  );
-};
-
-export const LogEntryDetailsIconColumn: React.FunctionComponent<LogEntryIconColumnProps & {
-  openFlyout: () => void;
-}> = ({ isHighlighted, isHovered, openFlyout }) => {
   const label = i18n.translate('xpack.infra.logEntryItemView.viewDetailsToolTip', {
     defaultMessage: 'View Details',
   });
 
   return (
-    <LogEntryIconColumn isHighlighted={isHighlighted} isHovered={isHovered}>
+    <IconColumnContent isHighlighted={isHighlighted}>
       {isHovered ? (
         <AbsoluteIconButtonWrapper>
           <EuiButtonIcon onClick={openFlyout} iconType="expand" title={label} aria-label={label} />
         </AbsoluteIconButtonWrapper>
       ) : null}
-    </LogEntryIconColumn>
+    </IconColumnContent>
   );
 };
 
 interface IconColumnContentProps {
   isHighlighted: boolean;
-  isHovered: boolean;
 }
 
 const IconColumnContent = euiStyled(LogEntryColumnContent)<IconColumnContentProps>`
-  background-color: ${props => props.theme.eui.euiColorEmptyShade};
   overflow: hidden;
   user-select: none;
 
-  ${props => (props.isHovered || props.isHighlighted ? hoveredContentStyle : '')};
+  ${props => (props.isHighlighted ? hoveredContentStyle : '')};
 `;
 
 // this prevents the button from influencing the line height
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_message_column.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_message_column.tsx
index 5ad7cba6427d1..659b75755b4ac 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_message_column.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_message_column.tsx
@@ -31,12 +31,11 @@ interface LogEntryMessageColumnProps {
   highlights: LogColumn[];
   isActiveHighlight: boolean;
   isHighlighted: boolean;
-  isHovered: boolean;
   wrapMode: WrapMode;
 }
 
 export const LogEntryMessageColumn = memo<LogEntryMessageColumnProps>(
-  ({ columnValue, highlights, isActiveHighlight, isHighlighted, isHovered, wrapMode }) => {
+  ({ columnValue, highlights, isActiveHighlight, isHighlighted, wrapMode }) => {
     const message = useMemo(
       () =>
         isMessageColumn(columnValue)
@@ -46,7 +45,7 @@ export const LogEntryMessageColumn = memo<LogEntryMessageColumnProps>(
     );
 
     return (
-      <MessageColumnContent isHighlighted={isHighlighted} isHovered={isHovered} wrapMode={wrapMode}>
+      <MessageColumnContent isHighlighted={isHighlighted} wrapMode={wrapMode}>
         {message}
       </MessageColumnContent>
     );
@@ -54,7 +53,6 @@ export const LogEntryMessageColumn = memo<LogEntryMessageColumnProps>(
 );
 
 interface MessageColumnContentProps {
-  isHovered: boolean;
   isHighlighted: boolean;
   wrapMode: WrapMode;
 }
@@ -62,7 +60,7 @@ interface MessageColumnContentProps {
 const MessageColumnContent = euiStyled(LogEntryColumnContent)<MessageColumnContentProps>`
   text-overflow: ellipsis;
 
-  ${props => (props.isHovered || props.isHighlighted ? hoveredContentStyle : '')};
+  ${props => (props.isHighlighted ? hoveredContentStyle : '')};
   ${props =>
     props.wrapMode === 'long'
       ? longWrappedContentStyle
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
index ce264245d385b..887adf8ff58fb 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
@@ -20,7 +20,7 @@ import { LogEntryFieldColumn } from './log_entry_field_column';
 import { LogEntryDetailsIconColumn } from './log_entry_icon_column';
 import { LogEntryMessageColumn } from './log_entry_message_column';
 import { LogEntryTimestampColumn } from './log_entry_timestamp_column';
-import { monospaceTextStyle } from './text_styles';
+import { monospaceTextStyle, hoveredContentStyle } from './text_styles';
 import { LogEntry, LogColumn } from '../../../../common/http_api';
 
 interface LogEntryRowProps {
@@ -119,11 +119,7 @@ export const LogEntryRow = memo(
                 {...columnWidth}
               >
                 {isTimestampColumn(column) ? (
-                  <LogEntryTimestampColumn
-                    isHighlighted={isHighlighted}
-                    isHovered={isHovered}
-                    time={column.timestamp}
-                  />
+                  <LogEntryTimestampColumn isHighlighted={isHighlighted} time={column.timestamp} />
                 ) : null}
               </LogEntryColumn>
             );
@@ -143,7 +139,6 @@ export const LogEntryRow = memo(
                     highlights={highlightsByColumnId[column.columnId] || []}
                     isHighlighted={isHighlighted}
                     isActiveHighlight={isActiveHighlight}
-                    isHovered={isHovered}
                     wrapMode={wrap ? 'long' : 'pre-wrapped'}
                   />
                 ) : null}
@@ -165,7 +160,6 @@ export const LogEntryRow = memo(
                     highlights={highlightsByColumnId[column.columnId] || []}
                     isActiveHighlight={isActiveHighlight}
                     isHighlighted={isHighlighted}
-                    isHovered={isHovered}
                     wrapMode={wrap ? 'long' : 'pre-wrapped'}
                   />
                 ) : null}
@@ -204,4 +198,8 @@ export const LogEntryRowWrapper = euiStyled.div.attrs(() => ({
   overflow: hidden;
 
   ${props => monospaceTextStyle(props.scale)};
+
+  &:hover {
+    ${hoveredContentStyle}
+  }
 `;
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx
index f3ea9c81108c6..8ae1f0d3dd403 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx
@@ -4,46 +4,30 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { darken, transparentize } from 'polished';
 import React, { memo } from 'react';
 
-import { euiStyled, css } from '../../../../../observability/public';
+import { euiStyled } from '../../../../../observability/public';
 import { TimeFormat, useFormattedTime } from '../../formatted_time';
 import { LogEntryColumnContent } from './log_entry_column';
+import { hoveredContentStyle } from './text_styles';
 
 interface LogEntryTimestampColumnProps {
   format?: TimeFormat;
   isHighlighted: boolean;
-  isHovered: boolean;
   time: number;
 }
 
 export const LogEntryTimestampColumn = memo<LogEntryTimestampColumnProps>(
-  ({ format = 'time', isHighlighted, isHovered, time }) => {
+  ({ format = 'time', isHighlighted, time }) => {
     const formattedTime = useFormattedTime(time, { format });
 
     return (
-      <TimestampColumnContent isHovered={isHovered} isHighlighted={isHighlighted}>
-        {formattedTime}
-      </TimestampColumnContent>
+      <TimestampColumnContent isHighlighted={isHighlighted}>{formattedTime}</TimestampColumnContent>
     );
   }
 );
 
-const hoveredContentStyle = css`
-  background-color: ${props =>
-    props.theme.darkMode
-      ? transparentize(0.9, darken(0.05, props.theme.eui.euiColorHighlight))
-      : darken(0.05, props.theme.eui.euiColorHighlight)};
-  border-color: ${props =>
-    props.theme.darkMode
-      ? transparentize(0.7, darken(0.2, props.theme.eui.euiColorHighlight))
-      : darken(0.2, props.theme.eui.euiColorHighlight)};
-  color: ${props => props.theme.eui.euiColorFullShade};
-`;
-
 interface TimestampColumnContentProps {
-  isHovered: boolean;
   isHighlighted: boolean;
 }
 
@@ -53,5 +37,5 @@ const TimestampColumnContent = euiStyled(LogEntryColumnContent)<TimestampColumnC
   text-overflow: clip;
   white-space: pre;
 
-  ${props => (props.isHovered || props.isHighlighted ? hoveredContentStyle : '')};
+  ${props => (props.isHighlighted ? hoveredContentStyle : '')};
 `;

From 5e3a20e7682520e84677cd4ea884c24b9458e664 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Fri, 20 Mar 2020 18:01:12 +0100
Subject: [PATCH 03/15] Set highlighted styles in the row

Instead of applying the style for each individual column, apply them to
the containing row. It's easier to reason about, simplifies the
interface to the columns, and prevents rerendering.
---
 .../log_entry_field_column.test.tsx              |  3 ---
 .../log_text_stream/log_entry_field_column.tsx   | 11 +----------
 .../log_text_stream/log_entry_icon_column.tsx    | 13 ++-----------
 .../log_text_stream/log_entry_message_column.tsx | 13 ++-----------
 .../logging/log_text_stream/log_entry_row.tsx    | 15 ++++++---------
 .../log_entry_timestamp_column.tsx               | 16 +++-------------
 .../logging/log_text_stream/text_styles.tsx      |  4 ++++
 7 files changed, 18 insertions(+), 57 deletions(-)

diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.test.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.test.tsx
index 3eefb3991a2e6..d6068b6e60992 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.test.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.test.tsx
@@ -25,7 +25,6 @@ describe('LogEntryFieldColumn', () => {
         columnValue={column}
         highlights={[]}
         isActiveHighlight={false}
-        isHighlighted={false}
         wrapMode="pre-wrapped"
       />,
       { wrappingComponent: EuiThemeProvider } as any // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/36075
@@ -57,7 +56,6 @@ describe('LogEntryFieldColumn', () => {
         columnValue={column}
         highlights={[]}
         isActiveHighlight={false}
-        isHighlighted={false}
         wrapMode="pre-wrapped"
       />,
       { wrappingComponent: EuiThemeProvider } as any // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/36075
@@ -79,7 +77,6 @@ describe('LogEntryFieldColumn', () => {
         columnValue={column}
         highlights={[]}
         isActiveHighlight={false}
-        isHighlighted={false}
         wrapMode="pre-wrapped"
       />,
       { wrappingComponent: EuiThemeProvider } as any // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/36075
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx
index e8dd3cf7f4b1f..c73c9674f9683 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx
+++ b/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,7 +23,6 @@ interface LogEntryFieldColumnProps {
   columnValue: LogColumn;
   highlights: LogColumn[];
   isActiveHighlight: boolean;
-  isHighlighted: boolean;
   wrapMode: WrapMode;
 }
 
@@ -32,7 +30,6 @@ export const LogEntryFieldColumn: React.FunctionComponent<LogEntryFieldColumnPro
   columnValue,
   highlights: [firstHighlight], // we only support one highlight for now
   isActiveHighlight,
-  isHighlighted,
   wrapMode,
 }) => {
   const value = useMemo(() => {
@@ -61,11 +58,7 @@ export const LogEntryFieldColumn: React.FunctionComponent<LogEntryFieldColumnPro
     )
   );
 
-  return (
-    <FieldColumnContent isHighlighted={isHighlighted} wrapMode={wrapMode}>
-      {formattedValue}
-    </FieldColumnContent>
-  );
+  return <FieldColumnContent wrapMode={wrapMode}>{formattedValue}</FieldColumnContent>;
 };
 
 const CommaSeparatedLi = euiStyled.li`
@@ -79,14 +72,12 @@ const CommaSeparatedLi = euiStyled.li`
 `;
 
 interface LogEntryColumnContentProps {
-  isHighlighted: boolean;
   wrapMode: WrapMode;
 }
 
 const FieldColumnContent = euiStyled(LogEntryColumnContent)<LogEntryColumnContentProps>`
   text-overflow: ellipsis;
 
-  ${props => (props.isHighlighted ? hoveredContentStyle : '')};
   ${props =>
     props.wrapMode === 'long'
       ? longWrappedContentStyle
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_icon_column.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_icon_column.tsx
index b49bf5addd844..f1b7b9a5526c2 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_icon_column.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_icon_column.tsx
@@ -9,17 +9,14 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 
 import { LogEntryColumnContent } from './log_entry_column';
-import { hoveredContentStyle } from './text_styles';
 import { euiStyled } from '../../../../../observability/public';
 
 interface LogEntryDetailsIconColumnProps {
-  isHighlighted: boolean;
   isHovered: boolean;
   openFlyout: () => void;
 }
 
 export const LogEntryDetailsIconColumn: React.FC<LogEntryDetailsIconColumnProps> = ({
-  isHighlighted,
   isHovered,
   openFlyout,
 }) => {
@@ -28,7 +25,7 @@ export const LogEntryDetailsIconColumn: React.FC<LogEntryDetailsIconColumnProps>
   });
 
   return (
-    <IconColumnContent isHighlighted={isHighlighted}>
+    <IconColumnContent>
       {isHovered ? (
         <AbsoluteIconButtonWrapper>
           <EuiButtonIcon onClick={openFlyout} iconType="expand" title={label} aria-label={label} />
@@ -38,15 +35,9 @@ export const LogEntryDetailsIconColumn: React.FC<LogEntryDetailsIconColumnProps>
   );
 };
 
-interface IconColumnContentProps {
-  isHighlighted: boolean;
-}
-
-const IconColumnContent = euiStyled(LogEntryColumnContent)<IconColumnContentProps>`
+const IconColumnContent = euiStyled(LogEntryColumnContent)`
   overflow: hidden;
   user-select: none;
-
-  ${props => (props.isHighlighted ? hoveredContentStyle : '')};
 `;
 
 // this prevents the button from influencing the line height
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_message_column.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_message_column.tsx
index 659b75755b4ac..0fe0cbdfac593 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_message_column.tsx
+++ b/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,12 +29,11 @@ interface LogEntryMessageColumnProps {
   columnValue: LogColumn;
   highlights: LogColumn[];
   isActiveHighlight: boolean;
-  isHighlighted: boolean;
   wrapMode: WrapMode;
 }
 
 export const LogEntryMessageColumn = memo<LogEntryMessageColumnProps>(
-  ({ columnValue, highlights, isActiveHighlight, isHighlighted, wrapMode }) => {
+  ({ columnValue, highlights, isActiveHighlight, wrapMode }) => {
     const message = useMemo(
       () =>
         isMessageColumn(columnValue)
@@ -44,23 +42,16 @@ export const LogEntryMessageColumn = memo<LogEntryMessageColumnProps>(
       [columnValue, highlights, isActiveHighlight]
     );
 
-    return (
-      <MessageColumnContent isHighlighted={isHighlighted} wrapMode={wrapMode}>
-        {message}
-      </MessageColumnContent>
-    );
+    return <MessageColumnContent wrapMode={wrapMode}>{message}</MessageColumnContent>;
   }
 );
 
 interface MessageColumnContentProps {
-  isHighlighted: boolean;
   wrapMode: WrapMode;
 }
 
 const MessageColumnContent = euiStyled(LogEntryColumnContent)<MessageColumnContentProps>`
   text-overflow: ellipsis;
-
-  ${props => (props.isHighlighted ? hoveredContentStyle : '')};
   ${props =>
     props.wrapMode === 'long'
       ? longWrappedContentStyle
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
index 887adf8ff58fb..9f407ac8faea7 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
@@ -20,7 +20,7 @@ import { LogEntryFieldColumn } from './log_entry_field_column';
 import { LogEntryDetailsIconColumn } from './log_entry_icon_column';
 import { LogEntryMessageColumn } from './log_entry_message_column';
 import { LogEntryTimestampColumn } from './log_entry_timestamp_column';
-import { monospaceTextStyle, hoveredContentStyle } from './text_styles';
+import { monospaceTextStyle, hoveredContentStyle, highlightedContentStyle } from './text_styles';
 import { LogEntry, LogColumn } from '../../../../common/http_api';
 
 interface LogEntryRowProps {
@@ -105,6 +105,7 @@ export const LogEntryRow = memo(
         }
         onMouseEnter={setItemIsHovered}
         onMouseLeave={setItemIsNotHovered}
+        isHighlighted={isHighlighted}
         scale={scale}
       >
         {columnConfigurations.map(columnConfiguration => {
@@ -119,7 +120,7 @@ export const LogEntryRow = memo(
                 {...columnWidth}
               >
                 {isTimestampColumn(column) ? (
-                  <LogEntryTimestampColumn isHighlighted={isHighlighted} time={column.timestamp} />
+                  <LogEntryTimestampColumn time={column.timestamp} />
                 ) : null}
               </LogEntryColumn>
             );
@@ -137,7 +138,6 @@ export const LogEntryRow = memo(
                   <LogEntryMessageColumn
                     columnValue={column}
                     highlights={highlightsByColumnId[column.columnId] || []}
-                    isHighlighted={isHighlighted}
                     isActiveHighlight={isActiveHighlight}
                     wrapMode={wrap ? 'long' : 'pre-wrapped'}
                   />
@@ -159,7 +159,6 @@ export const LogEntryRow = memo(
                     columnValue={column}
                     highlights={highlightsByColumnId[column.columnId] || []}
                     isActiveHighlight={isActiveHighlight}
-                    isHighlighted={isHighlighted}
                     wrapMode={wrap ? 'long' : 'pre-wrapped'}
                   />
                 ) : null}
@@ -171,11 +170,7 @@ export const LogEntryRow = memo(
           key="logColumn iconLogColumn iconLogColumn:details"
           {...columnWidths[iconColumnId]}
         >
-          <LogEntryDetailsIconColumn
-            isHighlighted={isHighlighted}
-            isHovered={isHovered}
-            openFlyout={openFlyout}
-          />
+          <LogEntryDetailsIconColumn isHovered={isHovered} openFlyout={openFlyout} />
         </LogEntryColumn>
       </LogEntryRowWrapper>
     );
@@ -184,6 +179,7 @@ export const LogEntryRow = memo(
 
 interface LogEntryRowWrapperProps {
   scale: TextScale;
+  isHighlighted: boolean;
 }
 
 export const LogEntryRowWrapper = euiStyled.div.attrs(() => ({
@@ -198,6 +194,7 @@ export const LogEntryRowWrapper = euiStyled.div.attrs(() => ({
   overflow: hidden;
 
   ${props => monospaceTextStyle(props.scale)};
+  ${props => (props.isHighlighted ? highlightedContentStyle : '')}
 
   &:hover {
     ${hoveredContentStyle}
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx
index 8ae1f0d3dd403..cf9c75a361b55 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx
@@ -9,33 +9,23 @@ import React, { memo } from 'react';
 import { euiStyled } from '../../../../../observability/public';
 import { TimeFormat, useFormattedTime } from '../../formatted_time';
 import { LogEntryColumnContent } from './log_entry_column';
-import { hoveredContentStyle } from './text_styles';
 
 interface LogEntryTimestampColumnProps {
   format?: TimeFormat;
-  isHighlighted: boolean;
   time: number;
 }
 
 export const LogEntryTimestampColumn = memo<LogEntryTimestampColumnProps>(
-  ({ format = 'time', isHighlighted, time }) => {
+  ({ format = 'time', time }) => {
     const formattedTime = useFormattedTime(time, { format });
 
-    return (
-      <TimestampColumnContent isHighlighted={isHighlighted}>{formattedTime}</TimestampColumnContent>
-    );
+    return <TimestampColumnContent>{formattedTime}</TimestampColumnContent>;
   }
 );
 
-interface TimestampColumnContentProps {
-  isHighlighted: boolean;
-}
-
-const TimestampColumnContent = euiStyled(LogEntryColumnContent)<TimestampColumnContentProps>`
+const TimestampColumnContent = euiStyled(LogEntryColumnContent)`
   color: ${props => props.theme.eui.euiColorDarkShade};
   overflow: hidden;
   text-overflow: clip;
   white-space: pre;
-
-  ${props => (props.isHighlighted ? hoveredContentStyle : '')};
 `;
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/text_styles.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/text_styles.tsx
index ff774c946ca67..69a6abbca4b34 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/text_styles.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/text_styles.tsx
@@ -32,6 +32,10 @@ export const hoveredContentStyle = css`
   background-color: ${props => props.theme.eui.euiFocusBackgroundColor};
 `;
 
+export const highlightedContentStyle = css`
+  background-color: ${props => props.theme.eui.euiFocusBackgroundColor};
+`;
+
 export const longWrappedContentStyle = css`
   overflow: visible;
   white-space: pre-wrap;

From 27708a3271d5fda7e510fb0189676ac2b5d43a06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Mon, 23 Mar 2020 12:08:47 +0100
Subject: [PATCH 04/15] Rename icon column to actions column

---
 ...n_column.tsx => log_entry_actions_column.tsx} | 16 ++++++++--------
 .../logging/log_text_stream/log_entry_row.tsx    |  4 ++--
 2 files changed, 10 insertions(+), 10 deletions(-)
 rename x-pack/plugins/infra/public/components/logging/log_text_stream/{log_entry_icon_column.tsx => log_entry_actions_column.tsx} (73%)

diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_icon_column.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx
similarity index 73%
rename from x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_icon_column.tsx
rename to x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx
index f1b7b9a5526c2..42d9d9370f264 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_icon_column.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx
@@ -11,12 +11,12 @@ import React from 'react';
 import { LogEntryColumnContent } from './log_entry_column';
 import { euiStyled } from '../../../../../observability/public';
 
-interface LogEntryDetailsIconColumnProps {
+interface LogEntryActionsColumnProps {
   isHovered: boolean;
   openFlyout: () => void;
 }
 
-export const LogEntryDetailsIconColumn: React.FC<LogEntryDetailsIconColumnProps> = ({
+export const LogEntryActionsColumn: React.FC<LogEntryActionsColumnProps> = ({
   isHovered,
   openFlyout,
 }) => {
@@ -25,23 +25,23 @@ export const LogEntryDetailsIconColumn: React.FC<LogEntryDetailsIconColumnProps>
   });
 
   return (
-    <IconColumnContent>
+    <ActionsColumnContent>
       {isHovered ? (
-        <AbsoluteIconButtonWrapper>
+        <AbsoluteWrapper>
           <EuiButtonIcon onClick={openFlyout} iconType="expand" title={label} aria-label={label} />
-        </AbsoluteIconButtonWrapper>
+        </AbsoluteWrapper>
       ) : null}
-    </IconColumnContent>
+    </ActionsColumnContent>
   );
 };
 
-const IconColumnContent = euiStyled(LogEntryColumnContent)`
+const ActionsColumnContent = euiStyled(LogEntryColumnContent)`
   overflow: hidden;
   user-select: none;
 `;
 
 // this prevents the button from influencing the line height
-const AbsoluteIconButtonWrapper = euiStyled.div`
+const AbsoluteWrapper = euiStyled.div`
   overflow: hidden;
   position: absolute;
 `;
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
index 9f407ac8faea7..7b80d49138f73 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
@@ -17,7 +17,7 @@ import {
 import { TextScale } from '../../../../common/log_text_scale';
 import { LogEntryColumn, LogEntryColumnWidths, iconColumnId } from './log_entry_column';
 import { LogEntryFieldColumn } from './log_entry_field_column';
-import { LogEntryDetailsIconColumn } from './log_entry_icon_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';
@@ -170,7 +170,7 @@ export const LogEntryRow = memo(
           key="logColumn iconLogColumn iconLogColumn:details"
           {...columnWidths[iconColumnId]}
         >
-          <LogEntryDetailsIconColumn isHovered={isHovered} openFlyout={openFlyout} />
+          <LogEntryActionsColumn isHovered={isHovered} openFlyout={openFlyout} />
         </LogEntryColumn>
       </LogEntryRowWrapper>
     );

From c948b9a3652c470460f132dc269d1026a1e89e9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Mon, 23 Mar 2020 13:17:26 +0100
Subject: [PATCH 05/15] Turn expand button into a menu

---
 .../log_entry_actions_column.tsx              | 83 +++++++++++++++++--
 .../logging/log_text_stream/log_entry_row.tsx | 20 ++++-
 2 files changed, 95 insertions(+), 8 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 42d9d9370f264..5b91918a143d4 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
@@ -4,42 +4,113 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButtonIcon } from '@elastic/eui';
+import React, { useCallback } from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonIcon,
+  EuiPopover,
+  EuiTitle,
+  EuiButtonEmpty,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import { LogEntryColumnContent } from './log_entry_column';
 import { euiStyled } from '../../../../../observability/public';
 
 interface LogEntryActionsColumnProps {
   isHovered: boolean;
-  openFlyout: () => void;
+  isMenuOpen: boolean;
+  openMenu: () => void;
+  closeMenu: () => void;
+  onViewDetails: () => void;
 }
 
 export const LogEntryActionsColumn: React.FC<LogEntryActionsColumnProps> = ({
   isHovered,
-  openFlyout,
+  isMenuOpen,
+  openMenu,
+  closeMenu,
+  onViewDetails,
 }) => {
-  const label = i18n.translate('xpack.infra.logEntryItemView.viewDetailsToolTip', {
+  const handleClickViewDetails = useCallback(() => {
+    closeMenu();
+    onViewDetails();
+  }, [closeMenu, onViewDetails]);
+
+  const label = i18n.translate('xpack.infra.logEntryItemView.logEntryActionsMenuToolTip', {
     defaultMessage: 'View Details',
   });
 
+  const button = (
+    <ButtonWrapper>
+      <EuiButtonIcon
+        aria-label={label}
+        color="ghost"
+        iconType="boxesHorizontal"
+        onClick={openMenu}
+      />
+    </ButtonWrapper>
+  );
+
   return (
     <ActionsColumnContent>
       {isHovered ? (
         <AbsoluteWrapper>
-          <EuiButtonIcon onClick={openFlyout} iconType="expand" title={label} aria-label={label} />
+          <EuiPopover button={button} isOpen={isMenuOpen} closePopover={closeMenu}>
+            <EuiFlexGroup direction="column" gutterSize="none">
+              <EuiFlexItem>
+                <EuiTitle size="xxs">
+                  <h2>
+                    <FormattedMessage
+                      id="xpack.infra.logs.logEntryActionsMenuTitle"
+                      defaultMessage="Log line details"
+                    />
+                  </h2>
+                </EuiTitle>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <CtaButton onClick={handleClickViewDetails}>
+                  <FormattedMessage
+                    id="xpack.infra.logs.logEntryActionsDetailsButton"
+                    defaultMessage="Log details"
+                  />
+                </CtaButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPopover>
         </AbsoluteWrapper>
       ) : null}
     </ActionsColumnContent>
   );
 };
 
+interface CtaButtonProps {
+  onClick: () => void;
+}
+const CtaButton: React.FC<CtaButtonProps> = ({ children, onClick }) => {
+  return (
+    <EuiButtonEmpty
+      size="s"
+      onClick={onClick}
+      contentProps={{ style: { justifyContent: 'flex-start', flexGrow: 1, padding: 0 } }}
+    >
+      {children}
+    </EuiButtonEmpty>
+  );
+};
+
 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;
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
index 7b80d49138f73..a985eb9df9724 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
@@ -50,6 +50,15 @@ export const LogEntryRow = memo(
     wrap,
   }: LogEntryRowProps) => {
     const [isHovered, setIsHovered] = useState(false);
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+    const openMenu = useCallback(() => {
+      setIsMenuOpen(true);
+    }, []);
+
+    const closeMenu = useCallback(() => {
+      setIsMenuOpen(false);
+    }, []);
 
     const setItemIsHovered = useCallback(() => {
       setIsHovered(true);
@@ -57,7 +66,8 @@ export const LogEntryRow = memo(
 
     const setItemIsNotHovered = useCallback(() => {
       setIsHovered(false);
-    }, []);
+      closeMenu();
+    }, [closeMenu]);
 
     const openFlyout = useCallback(() => openFlyoutWithItem?.(logEntry.id), [
       openFlyoutWithItem,
@@ -170,7 +180,13 @@ export const LogEntryRow = memo(
           key="logColumn iconLogColumn iconLogColumn:details"
           {...columnWidths[iconColumnId]}
         >
-          <LogEntryActionsColumn isHovered={isHovered} openFlyout={openFlyout} />
+          <LogEntryActionsColumn
+            isHovered={isHovered}
+            isMenuOpen={isMenuOpen}
+            openMenu={openMenu}
+            closeMenu={closeMenu}
+            onViewDetails={openFlyout}
+          />
         </LogEntryColumn>
       </LogEntryRowWrapper>
     );

From a7e21d615fbc37e4c7979dcfbe7580420d6f10ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Mon, 23 Mar 2020 14:41:29 +0100
Subject: [PATCH 06/15] Remove outdated props from `CategoryExampleMessage`

---
 .../logging/log_text_stream/log_entry_row.tsx         |  2 +-
 .../top_categories/category_example_message.tsx       | 11 +----------
 2 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
index a985eb9df9724..750486e1ffa63 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
@@ -195,7 +195,7 @@ export const LogEntryRow = memo(
 
 interface LogEntryRowWrapperProps {
   scale: TextScale;
-  isHighlighted: boolean;
+  isHighlighted?: boolean;
 }
 
 export const LogEntryRowWrapper = euiStyled.div.attrs(() => ({
diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_example_message.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_example_message.tsx
index 023082154565c..3855706bb6d47 100644
--- a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_example_message.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_example_message.tsx
@@ -34,12 +34,7 @@ export const CategoryExampleMessage: React.FunctionComponent<{
   return (
     <LogEntryRowWrapper scale={exampleMessageScale}>
       <LogEntryColumn {...columnWidths[timestampColumnId]}>
-        <LogEntryTimestampColumn
-          format={exampleTimestampFormat}
-          isHighlighted={false}
-          isHovered={false}
-          time={timestamp}
-        />
+        <LogEntryTimestampColumn format={exampleTimestampFormat} time={timestamp} />
       </LogEntryColumn>
       <LogEntryColumn {...columnWidths[messageColumnId]}>
         <LogEntryMessageColumn
@@ -48,8 +43,6 @@ export const CategoryExampleMessage: React.FunctionComponent<{
             message: [{ field: 'message', value: message, highlights: [] }],
           }}
           highlights={noHighlights}
-          isHovered={false}
-          isHighlighted={false}
           isActiveHighlight={false}
           wrapMode="none"
         />
@@ -63,8 +56,6 @@ export const CategoryExampleMessage: React.FunctionComponent<{
             highlights: [],
           }}
           highlights={noHighlights}
-          isHovered={false}
-          isHighlighted={false}
           isActiveHighlight={false}
           wrapMode="none"
         />

From 6b063e32ceabd106624ad90de5e6c1e498766988 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Mon, 23 Mar 2020 16:18:57 +0100
Subject: [PATCH 07/15] Cleanup translations

---
 x-pack/plugins/translations/translations/ja-JP.json | 1 -
 x-pack/plugins/translations/translations/zh-CN.json | 1 -
 2 files changed, 2 deletions(-)

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index bec3ffd147964..64943af4f8f82 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -6348,7 +6348,6 @@
     "xpack.infra.logEntryActionsMenu.apmActionLabel": "APMで表示",
     "xpack.infra.logEntryActionsMenu.buttonLabel": "アクション",
     "xpack.infra.logEntryActionsMenu.uptimeActionLabel": "監視ステータスを表示",
-    "xpack.infra.logEntryItemView.viewDetailsToolTip": "詳細を表示",
     "xpack.infra.logFlyout.fieldColumnLabel": "フィールド",
     "xpack.infra.logFlyout.filterAriaLabel": "フィルター",
     "xpack.infra.logFlyout.flyoutTitle": "ログイベントドキュメントの詳細",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index f472247232cb8..5eb06314960f7 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -6348,7 +6348,6 @@
     "xpack.infra.logEntryActionsMenu.apmActionLabel": "在 APM 中查看",
     "xpack.infra.logEntryActionsMenu.buttonLabel": "操作",
     "xpack.infra.logEntryActionsMenu.uptimeActionLabel": "查看监测状态",
-    "xpack.infra.logEntryItemView.viewDetailsToolTip": "查看详情",
     "xpack.infra.logFlyout.fieldColumnLabel": "字段",
     "xpack.infra.logFlyout.filterAriaLabel": "筛选",
     "xpack.infra.logFlyout.flyoutTitle": "日志事件文档详情",

From d6de0d4579dc5aaf8d919bf6821f76155e214d59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Thu, 26 Mar 2020 15:48:40 +0100
Subject: [PATCH 08/15] Rename callbacks for consistency

---
 .../log_text_stream/log_entry_actions_column.tsx | 16 ++++++++--------
 .../logging/log_text_stream/log_entry_row.tsx    |  4 ++--
 2 files changed, 10 insertions(+), 10 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 5b91918a143d4..d7f18d94a24a8 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
@@ -22,22 +22,22 @@ import { euiStyled } from '../../../../../observability/public';
 interface LogEntryActionsColumnProps {
   isHovered: boolean;
   isMenuOpen: boolean;
-  openMenu: () => void;
-  closeMenu: () => void;
+  onOpenMenu: () => void;
+  onCloseMenu: () => void;
   onViewDetails: () => void;
 }
 
 export const LogEntryActionsColumn: React.FC<LogEntryActionsColumnProps> = ({
   isHovered,
   isMenuOpen,
-  openMenu,
-  closeMenu,
+  onOpenMenu,
+  onCloseMenu,
   onViewDetails,
 }) => {
   const handleClickViewDetails = useCallback(() => {
-    closeMenu();
+    onCloseMenu();
     onViewDetails();
-  }, [closeMenu, onViewDetails]);
+  }, [onCloseMenu, onViewDetails]);
 
   const label = i18n.translate('xpack.infra.logEntryItemView.logEntryActionsMenuToolTip', {
     defaultMessage: 'View Details',
@@ -49,7 +49,7 @@ export const LogEntryActionsColumn: React.FC<LogEntryActionsColumnProps> = ({
         aria-label={label}
         color="ghost"
         iconType="boxesHorizontal"
-        onClick={openMenu}
+        onClick={onOpenMenu}
       />
     </ButtonWrapper>
   );
@@ -58,7 +58,7 @@ export const LogEntryActionsColumn: React.FC<LogEntryActionsColumnProps> = ({
     <ActionsColumnContent>
       {isHovered ? (
         <AbsoluteWrapper>
-          <EuiPopover button={button} isOpen={isMenuOpen} closePopover={closeMenu}>
+          <EuiPopover button={button} isOpen={isMenuOpen} closePopover={onCloseMenu}>
             <EuiFlexGroup direction="column" gutterSize="none">
               <EuiFlexItem>
                 <EuiTitle size="xxs">
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
index 750486e1ffa63..7775728149d15 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
@@ -183,8 +183,8 @@ export const LogEntryRow = memo(
           <LogEntryActionsColumn
             isHovered={isHovered}
             isMenuOpen={isMenuOpen}
-            openMenu={openMenu}
-            closeMenu={closeMenu}
+            onOpenMenu={openMenu}
+            onCloseMenu={closeMenu}
             onViewDetails={openFlyout}
           />
         </LogEntryColumn>

From 0da6be88b802fe281ff1e99f3777d75e665653c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Thu, 26 Mar 2020 15:52:16 +0100
Subject: [PATCH 09/15] Extract menu label outside the component

---
 .../log_text_stream/log_entry_actions_column.tsx       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 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 d7f18d94a24a8..d4dd976904a03 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
@@ -27,6 +27,10 @@ interface LogEntryActionsColumnProps {
   onViewDetails: () => void;
 }
 
+const MENU_LABEL = i18n.translate('xpack.infra.logEntryItemView.logEntryActionsMenuToolTip', {
+  defaultMessage: 'View Details',
+});
+
 export const LogEntryActionsColumn: React.FC<LogEntryActionsColumnProps> = ({
   isHovered,
   isMenuOpen,
@@ -39,14 +43,10 @@ export const LogEntryActionsColumn: React.FC<LogEntryActionsColumnProps> = ({
     onViewDetails();
   }, [onCloseMenu, onViewDetails]);
 
-  const label = i18n.translate('xpack.infra.logEntryItemView.logEntryActionsMenuToolTip', {
-    defaultMessage: 'View Details',
-  });
-
   const button = (
     <ButtonWrapper>
       <EuiButtonIcon
-        aria-label={label}
+        aria-label={MENU_LABEL}
         color="ghost"
         iconType="boxesHorizontal"
         onClick={onOpenMenu}

From 3366edeac13c61de044ca1a600220cc8c76ae996 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Thu, 26 Mar 2020 16:55:24 +0100
Subject: [PATCH 10/15] Use shared menu components

---
 .../log_entry_actions_column.tsx              | 57 +++++++++----------
 1 file changed, 26 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 d4dd976904a03..3e269d2f989e6 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,19 @@
  */
 
 import React, { useCallback } from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButtonIcon,
-  EuiPopover,
-  EuiTitle,
-  EuiButtonEmpty,
-} from '@elastic/eui';
+import { EuiButtonIcon, EuiButtonEmpty } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { LogEntryColumnContent } from './log_entry_column';
-import { euiStyled } from '../../../../../observability/public';
+import {
+  euiStyled,
+  ActionMenu,
+  Section,
+  SectionTitle,
+  SectionLinks,
+  SectionLink,
+} from '../../../../../observability/public';
 
 interface LogEntryActionsColumnProps {
   isHovered: boolean;
@@ -31,6 +31,10 @@ const MENU_LABEL = i18n.translate('xpack.infra.logEntryItemView.logEntryActionsM
   defaultMessage: 'View Details',
 });
 
+const LOG_DETAILS_LABEL = i18n.translate('xpack.infra.logs.logEntryActionsDetailsButton', {
+  defaultMessage: 'Log details',
+});
+
 export const LogEntryActionsColumn: React.FC<LogEntryActionsColumnProps> = ({
   isHovered,
   isMenuOpen,
@@ -58,28 +62,19 @@ export const LogEntryActionsColumn: React.FC<LogEntryActionsColumnProps> = ({
     <ActionsColumnContent>
       {isHovered ? (
         <AbsoluteWrapper>
-          <EuiPopover button={button} isOpen={isMenuOpen} closePopover={onCloseMenu}>
-            <EuiFlexGroup direction="column" gutterSize="none">
-              <EuiFlexItem>
-                <EuiTitle size="xxs">
-                  <h2>
-                    <FormattedMessage
-                      id="xpack.infra.logs.logEntryActionsMenuTitle"
-                      defaultMessage="Log line details"
-                    />
-                  </h2>
-                </EuiTitle>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <CtaButton onClick={handleClickViewDetails}>
-                  <FormattedMessage
-                    id="xpack.infra.logs.logEntryActionsDetailsButton"
-                    defaultMessage="Log details"
-                  />
-                </CtaButton>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiPopover>
+          <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>

From 57fb77d05a19e8abe4474ad7ca7cd25dc0b9acea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Thu, 26 Mar 2020 16:58:45 +0100
Subject: [PATCH 11/15] Keep menu open when user hovers away

---
 .../logging/log_text_stream/log_entry_actions_column.tsx       | 2 +-
 .../components/logging/log_text_stream/log_entry_row.tsx       | 3 +--
 2 files changed, 2 insertions(+), 3 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 3e269d2f989e6..4e4d8978fe269 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
@@ -60,7 +60,7 @@ export const LogEntryActionsColumn: React.FC<LogEntryActionsColumnProps> = ({
 
   return (
     <ActionsColumnContent>
-      {isHovered ? (
+      {isHovered || isMenuOpen ? (
         <AbsoluteWrapper>
           <ActionMenu closePopover={onCloseMenu} isOpen={isMenuOpen} button={button}>
             <Section>
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
index 7775728149d15..ea7050213c2a9 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
@@ -66,8 +66,7 @@ export const LogEntryRow = memo(
 
     const setItemIsNotHovered = useCallback(() => {
       setIsHovered(false);
-      closeMenu();
-    }, [closeMenu]);
+    }, []);
 
     const openFlyout = useCallback(() => openFlyoutWithItem?.(logEntry.id), [
       openFlyoutWithItem,

From 7fa2f8bd068099f0e29046b1ae00812d7362c82b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Thu, 26 Mar 2020 17:00:05 +0100
Subject: [PATCH 12/15] Cosmetic changes

---
 .../logging/log_text_stream/log_entry_row.tsx  | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
index ea7050213c2a9..7d7df796d13ad 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
@@ -52,21 +52,11 @@ export const LogEntryRow = memo(
     const [isHovered, setIsHovered] = useState(false);
     const [isMenuOpen, setIsMenuOpen] = useState(false);
 
-    const openMenu = useCallback(() => {
-      setIsMenuOpen(true);
-    }, []);
+    const openMenu = useCallback(() => setIsMenuOpen(true), []);
+    const closeMenu = useCallback(() => setIsMenuOpen(false), []);
 
-    const closeMenu = useCallback(() => {
-      setIsMenuOpen(false);
-    }, []);
-
-    const setItemIsHovered = useCallback(() => {
-      setIsHovered(true);
-    }, []);
-
-    const setItemIsNotHovered = useCallback(() => {
-      setIsHovered(false);
-    }, []);
+    const setItemIsHovered = useCallback(() => setIsHovered(true), []);
+    const setItemIsNotHovered = useCallback(() => setIsHovered(false), []);
 
     const openFlyout = useCallback(() => openFlyoutWithItem?.(logEntry.id), [
       openFlyoutWithItem,

From 5477c655bbb15bd570eee97200dd79d1a37891ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Fri, 27 Mar 2020 14:36:27 +0100
Subject: [PATCH 13/15] Remove unused component

---
 .../log_text_stream/log_entry_actions_column.tsx  | 15 ---------------
 1 file changed, 15 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 4e4d8978fe269..b5507f15ff42e 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
@@ -81,21 +81,6 @@ export const LogEntryActionsColumn: React.FC<LogEntryActionsColumnProps> = ({
   );
 };
 
-interface CtaButtonProps {
-  onClick: () => void;
-}
-const CtaButton: React.FC<CtaButtonProps> = ({ children, onClick }) => {
-  return (
-    <EuiButtonEmpty
-      size="s"
-      onClick={onClick}
-      contentProps={{ style: { justifyContent: 'flex-start', flexGrow: 1, padding: 0 } }}
-    >
-      {children}
-    </EuiButtonEmpty>
-  );
-};
-
 const ActionsColumnContent = euiStyled(LogEntryColumnContent)`
   overflow: hidden;
   user-select: none;

From cd79a1534b2b1108f704b72a9141338fae8bc664 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Fri, 27 Mar 2020 16:15:07 +0100
Subject: [PATCH 14/15] Remove unused import

---
 .../logging/log_text_stream/log_entry_actions_column.tsx        | 2 +-
 1 file changed, 1 insertion(+), 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 b5507f15ff42e..849c5db8cf102 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,7 +5,7 @@
  */
 
 import React, { useCallback } from 'react';
-import { EuiButtonIcon, EuiButtonEmpty } from '@elastic/eui';
+import { EuiButtonIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 

From 86a8fc234b3adafcce3738b628f09eab71100da0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Tue, 31 Mar 2020 11:29:46 +0200
Subject: [PATCH 15/15] Tweak copy

---
 .../logging/log_text_stream/log_entry_actions_column.tsx        | 2 +-
 1 file changed, 1 insertion(+), 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 849c5db8cf102..e02346c4e758a 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
@@ -32,7 +32,7 @@ const MENU_LABEL = i18n.translate('xpack.infra.logEntryItemView.logEntryActionsM
 });
 
 const LOG_DETAILS_LABEL = i18n.translate('xpack.infra.logs.logEntryActionsDetailsButton', {
-  defaultMessage: 'Log details',
+  defaultMessage: 'View actions for line',
 });
 
 export const LogEntryActionsColumn: React.FC<LogEntryActionsColumnProps> = ({