[Logs UI] Allow for jumping to the previous and next highlight

x-pack/legacy/plugins/infra/common/graphql/types.ts

@@ -334,9 +334,14 @@ export interface InfraTimeKeyInput {
 
   tiebreaker: number;
 }
-
+/** A highlighting definition */
 export interface InfraLogEntryHighlightInput {
+  /** The query to highlight by */
   query: string;
+  /** The number of highlighted documents to include beyond the beginning of the interval */
+  countBefore: number;
+  /** The number of highlighted documents to include beyond the end of the interval */
+  countAfter: number;
 }
 
 export interface InfraTimerangeInput {

x-pack/legacy/plugins/infra/common/time/time_key.ts

@@ -13,6 +13,10 @@ export interface TimeKey {
   gid?: string;
 }
 
+export interface UniqueTimeKey extends TimeKey {
+  gid: string;
+}
+
 export type Comparator = (firstValue: any, secondValue: any) => number;
 
 export const isTimeKey = (value: any): value is TimeKey =>

x-pack/legacy/plugins/infra/public/components/logging/log_highlights_menu.tsx

@@ -25,12 +25,20 @@ interface LogHighlightsMenuProps {
   onChange: (highlightTerms: string[]) => void;
   isLoading: boolean;
   activeHighlights: boolean;
+  hasPreviousHighlight: boolean;
+  hasNextHighlight: boolean;
+  goToPreviousHighlight: () => void;
+  goToNextHighlight: () => void;
 }
 
 export const LogHighlightsMenu: React.FC<LogHighlightsMenuProps> = ({
   onChange,
   isLoading,
   activeHighlights,
+  hasPreviousHighlight,
+  goToPreviousHighlight,
+  hasNextHighlight,
+  goToNextHighlight,
 }) => {
   const {
     isVisible: isPopoverOpen,
@@ -62,7 +70,6 @@ export const LogHighlightsMenu: React.FC<LogHighlightsMenuProps> = ({
       {activeHighlights ? <ActiveHighlightsIndicator /> : null}
     </EuiButtonEmpty>
   );
-
   return (
     <EuiPopover
       id="popover"
@@ -83,10 +90,29 @@ export const LogHighlightsMenu: React.FC<LogHighlightsMenuProps> = ({
               aria-label={termsFieldLabel}
             />
           </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonIcon
+              aria-label={goToPreviousHighlightLabel}
+              iconType="arrowUp"
+              onClick={goToPreviousHighlight}
+              title={goToPreviousHighlightLabel}
+              isDisabled={!hasPreviousHighlight}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonIcon
+              aria-label={goToNextHighlightLabel}
+              iconType="arrowDown"
+              onClick={goToNextHighlight}
+              title={goToNextHighlightLabel}
+              isDisabled={!hasNextHighlight}
+            />
+          </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButtonIcon
               aria-label={clearTermsButtonLabel}
               color="danger"
+              isDisabled={highlightTerm === ''}
               iconType="trash"
               onClick={clearHighlightTerm}
               title={clearTermsButtonLabel}
@@ -109,6 +135,20 @@ const clearTermsButtonLabel = i18n.translate(
   }
 );
 
+const goToPreviousHighlightLabel = i18n.translate(
+  'xpack.infra.logs.highlights.goToPreviousHighlightButtonLabel',
+  {
+    defaultMessage: 'Jump to previous highlight',
+  }
+);
+
+const goToNextHighlightLabel = i18n.translate(
+  'xpack.infra.logs.highlights.goToNextHighlightButtonLabel',
+  {
+    defaultMessage: 'Jump to next highlight',
+  }
+);
+
 const ActiveHighlightsIndicator = euiStyled(EuiIcon).attrs({
   type: 'checkInCircleFilled',
   size: 'm',

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

@@ -7,11 +7,32 @@
 import React from 'react';
 
 import euiStyled from '../../../../../../common/eui_styled_components';
-import { tintOrShade } from '../../../utils/styles';
+import { chooseLightOrDarkColor, tintOrShade } from '../../../utils/styles';
+
+export const ActiveHighlightMarker = euiStyled.mark`
+  color: ${props =>
+    chooseLightOrDarkColor(
+      props.theme.eui.euiColorAccent,
+      props.theme.eui.euiColorEmptyShade,
+      props.theme.eui.euiColorDarkestShade
+    )};
+  background-color: ${props => props.theme.eui.euiColorAccent};
+  outline: 1px solid ${props => props.theme.eui.euiColorAccent};
+  };
+`;
 
 export const HighlightMarker = euiStyled.mark`
+  color: ${props =>
+    chooseLightOrDarkColor(
+      tintOrShade(props.theme.eui.euiTextColor, props.theme.eui.euiColorAccent, 0.7, 0.5),
+      props.theme.eui.euiColorEmptyShade,
+      props.theme.eui.euiColorDarkestShade
+    )};
   background-color: ${props =>
     tintOrShade(props.theme.eui.euiTextColor, props.theme.eui.euiColorAccent, 0.7, 0.5)};
+  outline: 1px solid ${props =>
+    tintOrShade(props.theme.eui.euiTextColor, props.theme.eui.euiColorAccent, 0.7, 0.5)};
+  };
 `;
 
 export const highlightFieldValue = (

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

@@ -23,6 +23,7 @@ describe('LogEntryFieldColumn', () => {
       <LogEntryFieldColumn
         columnValue={column}
         highlights={[]}
+        isActiveHighlight={false}
         isHighlighted={false}
         isHovered={false}
         isWrapped={false}
@@ -50,6 +51,7 @@ describe('LogEntryFieldColumn', () => {
       <LogEntryFieldColumn
         columnValue={column}
         highlights={[]}
+        isActiveHighlight={false}
         isHighlighted={false}
         isHovered={false}
         isWrapped={false}

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

@@ -14,12 +14,13 @@ import {
   LogEntryColumn,
   LogEntryHighlightColumn,
 } from '../../../utils/log_entry';
-import { highlightFieldValue, HighlightMarker } from './highlighting';
+import { ActiveHighlightMarker, highlightFieldValue, HighlightMarker } from './highlighting';
 import { LogEntryColumnContent } from './log_entry_column';
 
 interface LogEntryFieldColumnProps {
   columnValue: LogEntryColumn;
   highlights: LogEntryHighlightColumn[];
+  isActiveHighlight: boolean;
   isHighlighted: boolean;
   isHovered: boolean;
   isWrapped: boolean;
@@ -28,6 +29,7 @@ interface LogEntryFieldColumnProps {
 export const LogEntryFieldColumn: React.FunctionComponent<LogEntryFieldColumnProps> = ({
   columnValue,
   highlights: [firstHighlight], // we only support one highlight for now
+  isActiveHighlight,
   isHighlighted,
   isHovered,
   isWrapped,
@@ -42,7 +44,7 @@ export const LogEntryFieldColumn: React.FunctionComponent<LogEntryFieldColumnPro
           {highlightFieldValue(
             entry,
             isHighlightFieldColumn(firstHighlight) ? firstHighlight.highlights : [],
-            HighlightMarker
+            isActiveHighlight ? ActiveHighlightMarker : HighlightMarker
           )}
         </CommaSeparatedLi>
       ))}
@@ -51,7 +53,7 @@ export const LogEntryFieldColumn: React.FunctionComponent<LogEntryFieldColumnPro
     highlightFieldValue(
       value,
       isHighlightFieldColumn(firstHighlight) ? firstHighlight.highlights : [],
-      HighlightMarker
+      isActiveHighlight ? ActiveHighlightMarker : HighlightMarker
     )
   );
 

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

@@ -16,26 +16,27 @@ import {
   LogEntryHighlightColumn,
   LogEntryMessageSegment,
 } from '../../../utils/log_entry';
-import { highlightFieldValue, HighlightMarker } from './highlighting';
+import { ActiveHighlightMarker, highlightFieldValue, HighlightMarker } from './highlighting';
 import { LogEntryColumnContent } from './log_entry_column';
 import { hoveredContentStyle } from './text_styles';
 
 interface LogEntryMessageColumnProps {
   columnValue: LogEntryColumn;
   highlights: LogEntryHighlightColumn[];
+  isActiveHighlight: boolean;
   isHighlighted: boolean;
   isHovered: boolean;
   isWrapped: boolean;
 }
 
 export const LogEntryMessageColumn = memo<LogEntryMessageColumnProps>(
-  ({ columnValue, highlights, isHighlighted, isHovered, isWrapped }) => {
+  ({ columnValue, highlights, isActiveHighlight, isHighlighted, isHovered, isWrapped }) => {
     const message = useMemo(
       () =>
         isMessageColumn(columnValue)
-          ? formatMessageSegments(columnValue.message, highlights)
+          ? formatMessageSegments(columnValue.message, highlights, isActiveHighlight)
           : null,
-      [columnValue, highlights]
+      [columnValue, highlights, isActiveHighlight]
     );
 
     return (
@@ -75,23 +76,30 @@ const MessageColumnContent = LogEntryColumnContent.extend.attrs<{
 
 const formatMessageSegments = (
   messageSegments: LogEntryMessageSegment[],
-  highlights: LogEntryHighlightColumn[]
+  highlights: LogEntryHighlightColumn[],
+  isActiveHighlight: boolean
 ) =>
   messageSegments.map((messageSegment, index) =>
     formatMessageSegment(
       messageSegment,
       highlights.map(highlight =>
         isHighlightMessageColumn(highlight) ? highlight.message[index].highlights : []
-      )
+      ),
+      isActiveHighlight
     )
   );
 
 const formatMessageSegment = (
   messageSegment: LogEntryMessageSegment,
-  [firstHighlight = []]: string[][] // we only support one highlight for now
+  [firstHighlight = []]: string[][], // we only support one highlight for now
+  isActiveHighlight: boolean
 ): React.ReactNode => {
   if (isFieldSegment(messageSegment)) {
-    return highlightFieldValue(messageSegment.value, firstHighlight, HighlightMarker);
+    return highlightFieldValue(
+      messageSegment.value,
+      firstHighlight,
+      isActiveHighlight ? ActiveHighlightMarker : HighlightMarker
+    );
   } else if (isConstantSegment(messageSegment)) {
     return messageSegment.constant;
   }

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

@@ -33,6 +33,7 @@ interface LogEntryRowProps {
   columnConfigurations: LogColumnConfiguration[];
   columnWidths: LogEntryColumnWidths;
   highlights: LogEntryHighlight[];
+  isActiveHighlight: boolean;
   isHighlighted: boolean;
   logEntry: LogEntry;
   openFlyoutWithItem: (id: string) => void;
@@ -45,6 +46,7 @@ export const LogEntryRow = ({
   columnConfigurations,
   columnWidths,
   highlights,
+  isActiveHighlight,
   isHighlighted,
   logEntry,
   openFlyoutWithItem,
@@ -144,6 +146,7 @@ export const LogEntryRow = ({
                   columnValue={column}
                   highlights={highlightsByColumnId[column.columnId] || []}
                   isHighlighted={isHighlighted}
+                  isActiveHighlight={isActiveHighlight}
                   isHovered={isHovered}
                   isWrapped={wrap}
                 />
@@ -164,6 +167,7 @@ export const LogEntryRow = ({
                 <LogEntryFieldColumn
                   columnValue={column}
                   highlights={highlightsByColumnId[column.columnId] || []}
+                  isActiveHighlight={isActiveHighlight}
                   isHighlighted={isHighlighted}
                   isHovered={isHovered}
                   isWrapped={wrap}

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

@@ -9,7 +9,7 @@ import React, { useMemo } from 'react';
 
 import euiStyled from '../../../../../../common/eui_styled_components';
 import { TextScale } from '../../../../common/log_text_scale';
-import { TimeKey } from '../../../../common/time';
+import { TimeKey, UniqueTimeKey } from '../../../../common/time';
 import { callWithoutRepeats } from '../../../utils/handlers';
 import { LogColumnConfiguration } from '../../../utils/source_configuration';
 import { AutoSizer } from '../../auto_sizer';
@@ -51,6 +51,7 @@ interface ScrollableLogTextStreamViewProps {
   showColumnConfiguration: () => void;
   intl: InjectedIntl;
   highlightedItem: string | null;
+  currentHighlightKey: UniqueTimeKey | null;
 }
 
 interface ScrollableLogTextStreamViewState {
@@ -97,6 +98,7 @@ class ScrollableLogTextStreamViewClass extends React.PureComponent<
   public render() {
     const {
       columnConfigurations,
+      currentHighlightKey,
       hasMoreAfterEnd,
       hasMoreBeforeStart,
       highlightedItem,
@@ -187,6 +189,10 @@ class ScrollableLogTextStreamViewClass extends React.PureComponent<
                                     boundingBoxRef={itemMeasureRef}
                                     logEntry={item.logEntry}
                                     highlights={item.highlights}
+                                    isActiveHighlight={
+                                      !!currentHighlightKey &&
+                                      currentHighlightKey.gid === item.logEntry.gid
+                                    }
                                     scale={scale}
                                     wrap={wrap}
                                     isHighlighted={