[7.x] [Logs UI] Add expandable rows with category examples (#54586)

x-pack/plugins/infra/common/http_api/log_analysis/results/index.ts

@@ -6,4 +6,5 @@
 
 export * from './log_entry_categories';
 export * from './log_entry_category_datasets';
+export * from './log_entry_category_examples';
 export * from './log_entry_rate';

x-pack/plugins/infra/common/http_api/log_analysis/results/log_entry_categories.ts

@@ -72,9 +72,16 @@ export const logEntryCategoryHistogramRT = rt.type({
 
 export type LogEntryCategoryHistogram = rt.TypeOf<typeof logEntryCategoryHistogramRT>;
 
+export const logEntryCategoryDatasetRT = rt.type({
+  name: rt.string,
+  maximumAnomalyScore: rt.number,
+});
+
+export type LogEntryCategoryDataset = rt.TypeOf<typeof logEntryCategoryDatasetRT>;
+
 export const logEntryCategoryRT = rt.type({
   categoryId: rt.number,
-  datasets: rt.array(rt.string),
+  datasets: rt.array(logEntryCategoryDatasetRT),
   histograms: rt.array(logEntryCategoryHistogramRT),
   logEntryCount: rt.number,
   maximumAnomalyScore: rt.number,

x-pack/plugins/infra/common/http_api/log_analysis/results/log_entry_category_examples.ts

@@ -0,0 +1,75 @@
+/*
+ * 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 * as rt from 'io-ts';
+
+import {
+  badRequestErrorRT,
+  forbiddenErrorRT,
+  timeRangeRT,
+  routeTimingMetadataRT,
+} from '../../shared';
+
+export const LOG_ANALYSIS_GET_LOG_ENTRY_CATEGORY_EXAMPLES_PATH =
+  '/api/infra/log_analysis/results/log_entry_category_examples';
+
+/**
+ * request
+ */
+
+export const getLogEntryCategoryExamplesRequestPayloadRT = rt.type({
+  data: rt.type({
+    // the category to fetch the examples for
+    categoryId: rt.number,
+    // the number of examples to fetch
+    exampleCount: rt.number,
+    // the id of the source configuration
+    sourceId: rt.string,
+    // the time range to fetch the category examples from
+    timeRange: timeRangeRT,
+  }),
+});
+
+export type GetLogEntryCategoryExamplesRequestPayload = rt.TypeOf<
+  typeof getLogEntryCategoryExamplesRequestPayloadRT
+>;
+
+/**
+ * response
+ */
+
+const logEntryCategoryExampleRT = rt.type({
+  dataset: rt.string,
+  message: rt.string,
+  timestamp: rt.number,
+});
+
+export type LogEntryCategoryExample = rt.TypeOf<typeof logEntryCategoryExampleRT>;
+
+export const getLogEntryCategoryExamplesSuccessReponsePayloadRT = rt.intersection([
+  rt.type({
+    data: rt.type({
+      examples: rt.array(logEntryCategoryExampleRT),
+    }),
+  }),
+  rt.partial({
+    timing: routeTimingMetadataRT,
+  }),
+]);
+
+export type GetLogEntryCategoryExamplesSuccessResponsePayload = rt.TypeOf<
+  typeof getLogEntryCategoryExamplesSuccessReponsePayloadRT
+>;
+
+export const getLogEntryCategoryExamplesResponsePayloadRT = rt.union([
+  getLogEntryCategoryExamplesSuccessReponsePayloadRT,
+  badRequestErrorRT,
+  forbiddenErrorRT,
+]);
+
+export type GetLogEntryCategoryExamplesReponsePayload = rt.TypeOf<
+  typeof getLogEntryCategoryExamplesResponsePayloadRT
+>;

x-pack/plugins/infra/common/log_analysis/job_parameters.ts

@@ -28,3 +28,10 @@ export const jobSourceConfigurationRT = rt.type({
 });
 
 export type JobSourceConfiguration = rt.TypeOf<typeof jobSourceConfigurationRT>;
+
+export const jobCustomSettingsRT = rt.partial({
+  job_revision: rt.number,
+  logs_source_config: rt.partial(jobSourceConfigurationRT.props),
+});
+
+export type JobCustomSettings = rt.TypeOf<typeof jobCustomSettingsRT>;

x-pack/plugins/infra/common/log_analysis/log_analysis_results.ts

@@ -44,3 +44,10 @@ export const formatAnomalyScore = (score: number) => {
 export const getFriendlyNameForPartitionId = (partitionId: string) => {
   return partitionId !== '' ? partitionId : 'unknown';
 };
+
+export const compareDatasetsByMaximumAnomalyScore = <
+  Dataset extends { maximumAnomalyScore: number }
+>(
+  firstDataset: Dataset,
+  secondDataset: Dataset
+) => firstDataset.maximumAnomalyScore - secondDataset.maximumAnomalyScore;

x-pack/plugins/infra/public/components/basic_table/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export * from './row_expansion_button';

x-pack/plugins/infra/public/components/basic_table/row_expansion_button.tsx

@@ -0,0 +1,44 @@
+/*
+ * 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 { EuiButtonIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { useCallback } from 'react';
+
+export const RowExpansionButton = <Item extends any>({
+  isExpanded,
+  item,
+  onCollapse,
+  onExpand,
+}: {
+  isExpanded: boolean;
+  item: Item;
+  onCollapse: (item: Item) => void;
+  onExpand: (item: Item) => void;
+}) => {
+  const handleClick = useCallback(() => (isExpanded ? onCollapse(item) : onExpand(item)), [
+    isExpanded,
+    item,
+    onCollapse,
+    onExpand,
+  ]);
+
+  return (
+    <EuiButtonIcon
+      onClick={handleClick}
+      aria-label={isExpanded ? collapseAriaLabel : expandAriaLabel}
+      iconType={isExpanded ? 'arrowUp' : 'arrowDown'}
+    />
+  );
+};
+
+const collapseAriaLabel = i18n.translate('xpack.infra.table.collapseRowLabel', {
+  defaultMessage: 'Collapse',
+});
+
+const expandAriaLabel = i18n.translate('xpack.infra.table.expandRowLabel', {
+  defaultMessage: 'Expand',
+});

x-pack/plugins/infra/public/components/formatted_time.tsx

@@ -17,8 +17,10 @@ const getFormattedTime = (
   return userFormat ? moment(time).format(userFormat) : moment(time).format(fallbackFormat);
 };
 
+export type TimeFormat = 'dateTime' | 'time';
+
 interface UseFormattedTimeOptions {
-  format?: 'dateTime' | 'time';
+  format?: TimeFormat;
   fallbackFormat?: string;
 }
 

x-pack/plugins/infra/public/components/logging/log_analysis_results/analyze_in_ml_button.tsx

@@ -18,7 +18,9 @@ export const AnalyzeInMlButton: React.FunctionComponent<{
 }> = ({ jobId, partition, timeRange }) => {
   const linkProps = useLinkProps(
     typeof partition === 'string'
-      ? getPartitionSpecificSingleMetricViewerLinkDescriptor(jobId, partition, timeRange)
+      ? getEntitySpecificSingleMetricViewerLink(jobId, timeRange, {
+          'event.dataset': partition,
+        })
       : getOverallAnomalyExplorerLinkDescriptor(jobId, timeRange)
   );
   const buttonLabel = (
@@ -61,10 +63,10 @@ const getOverallAnomalyExplorerLinkDescriptor = (
   };
 };
 
-const getPartitionSpecificSingleMetricViewerLinkDescriptor = (
+export const getEntitySpecificSingleMetricViewerLink = (
   jobId: string,
-  partition: string,
-  timeRange: TimeRange
+  timeRange: TimeRange,
+  entities: Record<string, string>
 ): LinkDescriptor => {
   const { from, to } = convertTimeRangeToParams(timeRange);
 
@@ -81,7 +83,7 @@ const getPartitionSpecificSingleMetricViewerLinkDescriptor = (
 
   const _a = encode({
     mlTimeSeriesExplorer: {
-      entities: { 'event.dataset': partition },
+      entities,
     },
   });
 

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

@@ -4,4 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+export { LogEntryColumn, LogEntryColumnWidths, useColumnWidths } from './log_entry_column';
+export { LogEntryFieldColumn } from './log_entry_field_column';
+export { LogEntryMessageColumn } from './log_entry_message_column';
+export { LogEntryRowWrapper } from './log_entry_row';
+export { LogEntryTimestampColumn } from './log_entry_timestamp_column';
 export { ScrollableLogTextStreamView } from './scrollable_log_text_stream_view';

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

@@ -4,12 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { useMemo } from 'react';
+
 import { euiStyled } from '../../../../../observability/public';
+import { TextScale } from '../../../../common/log_text_scale';
 import {
-  LogColumnConfiguration,
   isMessageLogColumnConfiguration,
   isTimestampLogColumnConfiguration,
+  LogColumnConfiguration,
 } from '../../../utils/source_configuration';
+import { useFormattedTime, TimeFormat } from '../../formatted_time';
+import { useMeasuredCharacterDimensions } from './text_styles';
 
 const DATE_COLUMN_SLACK_FACTOR = 1.1;
 const FIELD_COLUMN_MIN_WIDTH_CHARACTERS = 10;
@@ -100,3 +105,33 @@ export const getColumnWidths = (
       },
     }
   );
+
+/**
+ * This hook calculates the column widths based on the given configuration. It
+ * depends on the `CharacterDimensionsProbe` it returns being rendered so it can
+ * measure the monospace character size.
+ */
+export const useColumnWidths = ({
+  columnConfigurations,
+  scale,
+  timeFormat = 'time',
+}: {
+  columnConfigurations: LogColumnConfiguration[];
+  scale: TextScale;
+  timeFormat?: TimeFormat;
+}) => {
+  const { CharacterDimensionsProbe, dimensions } = useMeasuredCharacterDimensions(scale);
+  const referenceTime = useMemo(() => Date.now(), []);
+  const formattedCurrentDate = useFormattedTime(referenceTime, { format: timeFormat });
+  const columnWidths = useMemo(
+    () => getColumnWidths(columnConfigurations, dimensions.width, formattedCurrentDate.length),
+    [columnConfigurations, dimensions.width, formattedCurrentDate]
+  );
+  return useMemo(
+    () => ({
+      columnWidths,
+      CharacterDimensionsProbe,
+    }),
+    [columnWidths, CharacterDimensionsProbe]
+  );
+};

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

@@ -26,7 +26,7 @@ describe('LogEntryFieldColumn', () => {
         isActiveHighlight={false}
         isHighlighted={false}
         isHovered={false}
-        isWrapped={false}
+        wrapMode="pre-wrapped"
       />,
       { wrappingComponent: EuiThemeProvider } as any // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/36075
     );
@@ -58,7 +58,7 @@ describe('LogEntryFieldColumn', () => {
         isActiveHighlight={false}
         isHighlighted={false}
         isHovered={false}
-        isWrapped={false}
+        wrapMode="pre-wrapped"
       />,
       { wrappingComponent: EuiThemeProvider } as any // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/36075
     );
@@ -80,7 +80,7 @@ describe('LogEntryFieldColumn', () => {
         isActiveHighlight={false}
         isHighlighted={false}
         isHovered={false}
-        isWrapped={false}
+        wrapMode="pre-wrapped"
       />,
       { wrappingComponent: EuiThemeProvider } as any // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/36075
     );