Fix types

x-pack/legacy/plugins/infra/common/http_api/log_entries/entries.ts

@@ -52,16 +52,16 @@ export type LogEntriesRequest = rt.TypeOf<typeof logEntriesRequestRT>;
 // JSON value
 const valueRT = rt.union([rt.string, rt.number, rt.boolean, rt.object, rt.null, rt.undefined]);
 
-export const logMessagePartRT = rt.union([
- rt.type({
- constant: rt.string,
- }),
- rt.type({
-  field: rt.string,
-  value: valueRT,
- highlights: rt.array(rt.string),
- }),
-]);
+export const logMessagePartConstantRT = rt.type({
+ constant: rt.string,
+});
+export const logMessagePartFieldRT = rt.type({
+ field: rt.string,
+ value: valueRT,
+ highlights: rt.array(rt.string),
+});
+
+export const logMessagePartRT = rt.union([logMessagePartConstantRT, logMessagePartFieldRT]);
 
 export const logTimestampColumnRT = rt.type({ columnId: rt.string, timestamp: rt.number });
 export const logFieldColumnRT = rt.type({
@@ -83,7 +83,9 @@ export const logEntryRT = rt.type({
  columns: rt.array(logColumnRT),
 });
 
-export type LogMessagepart = rt.TypeOf<typeof logMessagePartRT>;
+export type LogMessagePartConstant = rt.TypeOf<typeof logMessagePartConstantRT>;
+export type LogMessagePartField = rt.TypeOf<typeof logMessagePartFieldRT>;
+export type LogMessagePart = rt.TypeOf<typeof logMessagePartRT>;
 export type LogTimestampColumn = rt.TypeOf<typeof logTimestampColumnRT>;
 export type LogFieldColumn = rt.TypeOf<typeof logFieldColumnRT>;
 export type LogMessageColumn = rt.TypeOf<typeof logMessageColumnRT>;

x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/item.ts

@@ -7,15 +7,14 @@
 import { bisector } from 'd3-array';
 
 import { compareToTimeKey, TimeKey } from '../../../../common/time';
-import { LogEntryHighlight } from '../../../utils/log_entry';
 import { LogEntry } from '../../../../common/http_api';
 
 export type StreamItem = LogEntryStreamItem;
 
 export interface LogEntryStreamItem {
  kind: 'logEntry';
  logEntry: LogEntry;
- highlights: LogEntryHighlight[];
+ highlights: LogEntry[];
 }
 
 export function getStreamItemTimeKey(item: StreamItem) {

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

@@ -9,18 +9,14 @@ import { darken, transparentize } from 'polished';
 import React, { useMemo } from 'react';
 
 import euiStyled, { css } from '../../../../../../common/eui_styled_components';
-import {
- isFieldColumn,
- isHighlightFieldColumn,
- LogEntryHighlightColumn,
-} from '../../../utils/log_entry';
+import { isFieldColumn, isHighlightFieldColumn } from '../../../utils/log_entry';
 import { ActiveHighlightMarker, highlightFieldValue, HighlightMarker } from './highlighting';
 import { LogEntryColumnContent } from './log_entry_column';
 import { LogColumn } from '../../../../common/http_api';
 
 interface LogEntryFieldColumnProps {
  columnValue: LogColumn;
- highlights: LogEntryHighlightColumn[];
+ highlights: LogColumn[];
  isActiveHighlight: boolean;
  isHighlighted: boolean;
  isHovered: boolean;
@@ -37,12 +33,7 @@ export const LogEntryFieldColumn: React.FunctionComponent<LogEntryFieldColumnPro
 }) => {
  const value = useMemo(() => {
  if (isFieldColumn(columnValue)) {
- // FIXME
- try {
- return JSON.parse(columnValue.value as string);
- } catch (e) {
- return columnValue.value;
- }
+ return columnValue.value;
  }
  return null;
  }, [columnValue]);
@@ -60,7 +51,7 @@ export const LogEntryFieldColumn: React.FunctionComponent<LogEntryFieldColumnPro
  </ul>
  ) : (
  highlightFieldValue(
- typeof value === 'object' && value != null ? stringify(value) : value,
+ typeof value === 'string' ? value : stringify(value),
  isHighlightFieldColumn(firstHighlight) ? firstHighlight.highlights : [],
  isActiveHighlight ? ActiveHighlightMarker : HighlightMarker
  )

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

@@ -5,24 +5,24 @@
  */
 
 import React, { memo, useMemo } from 'react';
+import stringify from 'json-stable-stringify';
 
 import euiStyled, { css } from '../../../../../../common/eui_styled_components';
 import {
  isConstantSegment,
  isFieldSegment,
  isHighlightMessageColumn,
  isMessageColumn,
- LogEntryHighlightColumn,
- LogEntryMessageSegment,
+ isHighlightFieldSegment,
 } from '../../../utils/log_entry';
 import { ActiveHighlightMarker, highlightFieldValue, HighlightMarker } from './highlighting';
 import { LogEntryColumnContent } from './log_entry_column';
 import { hoveredContentStyle } from './text_styles';
-import { LogColumn } from '../../../../common/http_api';
+import { LogColumn, LogMessagePart } from '../../../../common/http_api';
 
 interface LogEntryMessageColumnProps {
  columnValue: LogColumn;
- highlights: LogEntryHighlightColumn[];
+ highlights: LogColumn[];
  isActiveHighlight: boolean;
  isHighlighted: boolean;
  isHovered: boolean;
@@ -77,28 +77,39 @@ const MessageColumnContent = euiStyled(LogEntryColumnContent)<MessageColumnConte
 `;
 
 const formatMessageSegments = (
- messageSegments: LogEntryMessageSegment[],
- highlights: LogEntryHighlightColumn[],
+ messageSegments: LogMessagePart[],
+ highlights: LogColumn[],
  isActiveHighlight: boolean
 ) =>
  messageSegments.map((messageSegment, index) =>
  formatMessageSegment(
  messageSegment,
- highlights.map(highlight =>
- isHighlightMessageColumn(highlight) ? highlight.message[index].highlights : []
- ),
+ highlights.map(highlight => {
+ if (isHighlightMessageColumn(highlight)) {
+ const segment = highlight.message[index];
+ if (isHighlightFieldSegment(segment)) {
+ return segment.highlights;
+ }
+ }
+ return [];
+ }),
  isActiveHighlight
  )
  );
 
 const formatMessageSegment = (
- messageSegment: LogEntryMessageSegment,
+ messageSegment: LogMessagePart,
  [firstHighlight = []]: string[][], // we only support one highlight for now
  isActiveHighlight: boolean
 ): React.ReactNode => {
  if (isFieldSegment(messageSegment)) {
+ const value =
+ typeof messageSegment.value === 'string'
+ ? messageSegment.value
+ : stringify(messageSegment.value);
+
  return highlightFieldValue(
- messageSegment.value,
+ value,
  firstHighlight,
  isActiveHighlight ? ActiveHighlightMarker : HighlightMarker
  );

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

@@ -8,11 +8,7 @@
 import React, { useState, useCallback, useMemo } from 'react';
 
 import euiStyled from '../../../../../../common/eui_styled_components';
-import {
- LogEntryHighlight,
- LogEntryHighlightColumn,
- isTimestampColumn,
-} from '../../../utils/log_entry';
+import { isTimestampColumn } from '../../../utils/log_entry';
 import {
  LogColumnConfiguration,
  isTimestampLogColumnConfiguration,
@@ -26,13 +22,13 @@ 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 { LogEntry } from '../../../../common/http_api';
+import { LogEntry, LogColumn } from '../../../../common/http_api';
 
 interface LogEntryRowProps {
  boundingBoxRef?: React.Ref<Element>;
  columnConfigurations: LogColumnConfiguration[];
  columnWidths: LogEntryColumnWidths;
- highlights: LogEntryHighlight[];
+ highlights: LogEntry[];
  isActiveHighlight: boolean;
  isHighlighted: boolean;
  logEntry: LogEntry;
@@ -85,7 +81,7 @@ export const LogEntryRow = ({
  const highlightsByColumnId = useMemo(
  () =>
  highlights.reduce<{
- [columnId: string]: LogEntryHighlightColumn[];
+ [columnId: string]: LogColumn[];
  }>(
  (columnsById, highlight) =>
  highlight.columns.reduce(

x-pack/legacy/plugins/infra/public/containers/logs/log_highlights/next_and_previous.tsx

@@ -13,7 +13,7 @@ import {
  getLogEntryIndexBeforeTime,
  getUniqueLogEntryKey,
 } from '../../../utils/log_entry';
-import { LogEntryHighlights } from './log_entry_highlights';
+import { LogEntriesHighlightsResponse } from '../../../../common/http_api';
 
 export const useNextAndPrevious = ({
  highlightTerms,
@@ -23,7 +23,7 @@ export const useNextAndPrevious = ({
 }: {
  highlightTerms: string[];
  jumpToTargetPosition: (target: TimeKey) => void;
- logEntryHighlights: LogEntryHighlights | undefined;
+ logEntryHighlights: LogEntriesHighlightsResponse['data'] | undefined;
  visibleMidpoint: TimeKey | null;
 }) => {
  const [currentTimeKey, setCurrentTimeKey] = useState<UniqueTimeKey | null>(null);

x-pack/legacy/plugins/infra/public/containers/logs/with_stream_items.ts

@@ -6,7 +6,6 @@
 
 import { useContext, useMemo } from 'react';
 import { StreamItem, LogEntryStreamItem } from '../../components/logging/log_text_stream/item';
-import { LogEntryHighlight } from '../../utils/log_entry';
 import { RendererFunction } from '../../utils/typed_react';
 // deep inporting to avoid a circular import problem
 import { LogHighlightsState } from './log_highlights/log_highlights';
@@ -47,7 +46,7 @@ export const WithStreamItems: React.FunctionComponent<{
 
 const createLogEntryStreamItem = (
  logEntry: LogEntry,
- highlights: LogEntryHighlight[]
+ highlights: LogEntry[]
 ): LogEntryStreamItem => ({
  kind: 'logEntry' as 'logEntry',
  logEntry,

x-pack/legacy/plugins/infra/public/utils/log_entry/log_entry.ts

@@ -14,6 +14,9 @@ import {
  LogTimestampColumn,
  LogFieldColumn,
  LogMessageColumn,
+ LogMessagePart,
+ LogMessagePartField,
+ LogMessagePartConstant,
 } from '../../../common/http_api';
 
 export type LogEntryMessageSegment = InfraLogEntryFields.Message;
@@ -48,10 +51,8 @@ export const isMessageColumn = (column: LogColumn): column is LogMessageColumn =
 export const isFieldColumn = (column: LogColumn): column is LogFieldColumn =>
  column != null && 'field' in column;
 
-export const isConstantSegment = (
- segment: LogEntryMessageSegment
-): segment is LogEntryConstantMessageSegment => 'constant' in segment;
+export const isConstantSegment = (segment: LogMessagePart): segment is LogMessagePartConstant =>
+ 'constant' in segment;
 
-export const isFieldSegment = (
- segment: LogEntryMessageSegment
-): segment is LogEntryFieldMessageSegment => 'field' in segment && 'value' in segment;
+export const isFieldSegment = (segment: LogMessagePart): segment is LogMessagePartField =>
+ 'field' in segment && 'value' in segment;

x-pack/legacy/plugins/infra/public/utils/log_entry/log_entry_highlight.ts

@@ -5,9 +5,14 @@
  */
 
 import { InfraLogEntryHighlightFields } from '../../graphql/types';
-import { LogEntry } from '../../../common/http_api';
-
-export type LogEntryHighlight = InfraLogEntryHighlightFields.Fragment;
+import {
+ LogEntry,
+ LogColumn,
+ LogMessageColumn,
+ LogFieldColumn,
+ LogMessagePart,
+ LogMessagePartField,
+} from '../../../common/http_api';
 
 export type LogEntryHighlightColumn = InfraLogEntryHighlightFields.Columns;
 export type LogEntryHighlightMessageColumn = InfraLogEntryHighlightFields.InfraLogEntryMessageColumnInlineFragment;
@@ -20,15 +25,11 @@ export interface LogEntryHighlightsMap {
  [entryId: string]: LogEntry[];
 }
 
-export const isHighlightMessageColumn = (
- column: LogEntryHighlightColumn
-): column is LogEntryHighlightMessageColumn => column != null && 'message' in column;
+export const isHighlightMessageColumn = (column: LogColumn): column is LogMessageColumn =>
+ column != null && 'message' in column;
 
-export const isHighlightFieldColumn = (
- column: LogEntryHighlightColumn
-): column is LogEntryHighlightFieldColumn => column != null && 'field' in column;
+export const isHighlightFieldColumn = (column: LogColumn): column is LogFieldColumn =>
+ column != null && 'field' in column;
 
-export const isHighlightFieldSegment = (
- segment: LogEntryHighlightMessageSegment
-): segment is LogEntryHighlightFieldMessageSegment =>
+export const isHighlightFieldSegment = (segment: LogMessagePart): segment is LogMessagePartField =>
  segment && 'field' in segment && 'highlights' in segment;