[ML] AIOps: Adds expanded rows to pattern analysis table

x-pack/plugins/aiops/common/api/log_categorization/create_category_request.ts

@@ -15,7 +15,7 @@ import { createRandomSamplerWrapper } from '@kbn/ml-random-sampler-utils';
 import { createCategorizeQuery } from './create_categorize_query';
 
 const CATEGORY_LIMIT = 1000;
-const EXAMPLE_LIMIT = 1;
+const EXAMPLE_LIMIT = 4;
 
 export interface CategorizationAdditionalFilter {
   from: number;

x-pack/plugins/aiops/common/api/log_categorization/process_category_results.ts

@@ -47,6 +47,7 @@ export function processCategoryResults(
       subFieldExamples:
         b.sub_time_range?.buckets[0].examples.hits.hits.map((h) => get(h._source, field)) ??
         undefined,
+      regex: b.regex,
     };
   });
   return {

x-pack/plugins/aiops/common/api/log_categorization/types.ts

@@ -15,6 +15,7 @@ export interface Category {
   subFieldExamples?: string[];
   examples: string[];
   sparkline?: Record<number, number>;
+  regex: string;
 }
 
 interface CategoryExamples {
@@ -27,6 +28,7 @@ export interface CategoriesAgg {
       key: string;
       doc_count: number;
       examples: CategoryExamples;
+      regex: string;
       sparkline: {
         buckets: Array<{ key_as_string: string; key: number; doc_count: number }>;
       };

x-pack/plugins/aiops/public/application/utils/build_extended_base_filter_criteria.ts

@@ -50,6 +50,7 @@ export function buildExtendedBaseFilterCriteria(
               key,
               count: docCount,
               examples: [],
+              regex: '',
             },
           ])
         );
@@ -70,6 +71,7 @@ export function buildExtendedBaseFilterCriteria(
               key: `${selectedSignificantItem.key}`,
               count: selectedSignificantItem.doc_count,
               examples: [],
+              regex: '',
             },
           ])
         );
@@ -97,6 +99,7 @@ export function buildExtendedBaseFilterCriteria(
                 key: `${selectedSignificantItem.key}`,
                 count: selectedSignificantItem.doc_count,
                 examples: [],
+                regex: '',
               },
             ]),
           ],

x-pack/plugins/aiops/public/components/log_categorization/category_table/category_table.tsx

@@ -5,17 +5,16 @@
  * 2.0.
  */
 
-import React, { FC, useMemo, useState } from 'react';
+import React, { FC, useCallback, useMemo, useState } from 'react';
 
 import {
   useEuiBackgroundColor,
   EuiInMemoryTable,
   EuiBasicTableColumn,
-  EuiCode,
-  EuiText,
   EuiTableSelectionType,
   EuiHorizontalRule,
   EuiSpacer,
+  EuiButtonIcon,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
@@ -42,6 +41,8 @@ import type { EventRate } from '../use_categorize_request';
 
 import { getLabels } from './labels';
 import { TableHeader } from './table_header';
+import { ExpandedRow } from './expanded_row';
+import { FormattedPatternExamples } from '../format_category';
 
 interface Props {
   categories: Category[];
@@ -83,6 +84,9 @@ export const CategoryTable: FC<Props> = ({
   const { openInDiscoverWithFilter } = useDiscoverLinks();
   const [selectedCategories, setSelectedCategories] = useState<Category[]>([]);
   const { onTableChange, pagination, sorting } = useTableState<Category>(categories ?? [], 'key');
+  const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState<Record<string, JSX.Element>>(
+    {}
+  );
 
   const labels = useMemo(() => {
     const isFlyout = onAddFilter !== undefined && onClose !== undefined;
@@ -132,7 +136,42 @@ export const CategoryTable: FC<Props> = ({
     );
   };
 
+  const toggleDetails = useCallback(
+    (category: Category) => {
+      const itemIdToExpandedRowMapValues = { ...itemIdToExpandedRowMap };
+      if (itemIdToExpandedRowMapValues[category.key]) {
+        delete itemIdToExpandedRowMapValues[category.key];
+      } else {
+        itemIdToExpandedRowMapValues[category.key] = <ExpandedRow category={category} />;
+      }
+      setItemIdToExpandedRowMap(itemIdToExpandedRowMapValues);
+    },
+    [itemIdToExpandedRowMap]
+  );
+
   const columns: Array<EuiBasicTableColumn<Category>> = [
+    {
+      align: 'left',
+      width: '40px',
+      isExpander: true,
+      render: (item: Category) => (
+        <EuiButtonIcon
+          data-test-subj="aiopsLogPatternsColumnsButton"
+          onClick={() => toggleDetails(item)}
+          aria-label={
+            itemIdToExpandedRowMap[item.key]
+              ? i18n.translate('xpack.aiops.logCategorization.column.collapseRow', {
+                  defaultMessage: 'Collapse',
+                })
+              : i18n.translate('xpack.aiops.logCategorization.column.expandRow', {
+                  defaultMessage: 'Expand',
+                })
+          }
+          iconType={itemIdToExpandedRowMap[item.key] ? 'arrowDown' : 'arrowRight'}
+        />
+      ),
+      'data-test-subj': 'aiopsLogPatternsExpandRowToggle',
+    },
     {
       field: 'count',
       name: i18n.translate('xpack.aiops.logCategorization.column.count', {
@@ -142,20 +181,13 @@ export const CategoryTable: FC<Props> = ({
       width: '80px',
     },
     {
-      field: 'examples',
       name: i18n.translate('xpack.aiops.logCategorization.column.examples', {
         defaultMessage: 'Examples',
       }),
       sortable: true,
-      render: (examples: string[]) => (
+      render: (item: Category) => (
         <>
-          {examples.map((e) => (
-            <EuiText size="s" key={e}>
-              <EuiCode language="log" transparentBackground css={{ paddingInline: '0px' }}>
-                {e}
-              </EuiCode>
-            </EuiText>
-          ))}
+          <FormattedPatternExamples category={item} count={1} />
         </>
       ),
     },
@@ -187,7 +219,7 @@ export const CategoryTable: FC<Props> = ({
   ] as Array<EuiBasicTableColumn<Category>>;
 
   if (showSparkline === true) {
-    columns.splice(1, 0, {
+    columns.splice(2, 0, {
       field: 'sparkline',
       name: i18n.translate('xpack.aiops.logCategorization.column.logRate', {
         defaultMessage: 'Log rate',
@@ -271,6 +303,8 @@ export const CategoryTable: FC<Props> = ({
         pagination={pagination}
         sorting={sorting}
         data-test-subj="aiopsLogPatternsTable"
+        isExpandable={true}
+        itemIdToExpandedRowMap={itemIdToExpandedRowMap}
         rowProps={(category) => {
           return enableRowActions
             ? {

x-pack/plugins/aiops/public/components/log_categorization/category_table/expanded_row.tsx

@@ -0,0 +1,69 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FC } from 'react';
+import { EuiText, EuiSpacer, useEuiTheme } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { css } from '@emotion/react';
+import type { Category } from '../../../../common/api/log_categorization/types';
+import { FormattedPatternExamples, FormattedRegex, FormattedTokens } from '../format_category';
+
+interface ExpandedRowProps {
+  category: Category;
+}
+
+export const ExpandedRow: FC<ExpandedRowProps> = ({ category }) => {
+  const { euiTheme } = useEuiTheme();
+  const cssExpandedRow = css({
+    marginRight: euiTheme.size.xxl,
+    width: '100%',
+  });
+
+  return (
+    <div css={cssExpandedRow}>
+      <EuiSpacer />
+
+      <Section
+        title={i18n.translate('xpack.aiops.logCategorization.expandedRow.title.tokens', {
+          defaultMessage: 'Tokens',
+        })}
+      >
+        <FormattedTokens category={category} />
+      </Section>
+
+      <Section
+        title={i18n.translate('xpack.aiops.logCategorization.expandedRow.title.regex', {
+          defaultMessage: 'Regex',
+        })}
+      >
+        <FormattedRegex category={category} />
+      </Section>
+
+      <Section
+        title={i18n.translate('xpack.aiops.logCategorization.expandedRow.title.examples', {
+          defaultMessage: 'Examples',
+        })}
+      >
+        <FormattedPatternExamples category={category} />
+      </Section>
+    </div>
+  );
+};
+
+const Section: FC<{ title: string }> = ({ title, children }) => {
+  return (
+    <>
+      <EuiText size="s">
+        <strong>{title}</strong>
+      </EuiText>
+      <EuiSpacer size="xs" />
+      {children}
+      <EuiSpacer />
+    </>
+  );
+};

x-pack/plugins/aiops/public/components/log_categorization/format_category.test.tsx

@@ -0,0 +1,97 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { Category } from '../../../common/api/log_categorization/types';
+import { useCreateFormattedExample } from './format_category';
+import { renderHook } from '@testing-library/react-hooks';
+
+jest.mock('../../hooks/use_eui_theme', () => ({
+  useIsDarkTheme: () => false,
+}));
+
+const categoryData: Array<{
+  category: Category;
+  elementCount: number;
+}> = [
+  {
+    category: {
+      key: 'Processed messages out of',
+      count: 0,
+      examples: ['Processed 676 messages out of 676'],
+      regex: '.*?Processed.+?messages.+?out.+?of.*?',
+    },
+    elementCount: 9,
+  },
+  {
+    category: {
+      key: 'Processed messages out of',
+      count: 0,
+      examples: ['Processed out 676 messages messages out of 676 Processed'],
+      regex: '.*?Processed.+?messages.+?out.+?of.*?',
+    },
+    elementCount: 9,
+  },
+  {
+    category: {
+      key: 'Processed of',
+      count: 0,
+      examples: ['Processed 676 messages out of 676'],
+      regex: '.*?Processed.+?of.*?',
+    },
+    elementCount: 5,
+  },
+  {
+    category: {
+      key: 'Processed messages out of',
+      count: 0,
+      examples: ['Processed messages out of'],
+      regex: '.*?Processed.+?messages.+?out.+?of.*?',
+    },
+    elementCount: 9,
+  },
+  {
+    category: {
+      key: '',
+      count: 0,
+      examples: ['Processed messages out of'],
+      regex: '.*?',
+    },
+    elementCount: 3,
+  },
+  {
+    category: {
+      key: 'Processed messages out of',
+      count: 0,
+      examples: ['Processed 676 (*?) message* out of 676'],
+      regex: '.*?Processed.+?messages.+?out.+?of.*?',
+    },
+    elementCount: 9,
+  },
+  {
+    category: {
+      key: '2024 0000 admin to admin console.prod 6000 api HTTP 1.1 https admin Mozilla 5.0 AppleWebKit KHTML like Gecko Chrome Safari',
+      count: 0,
+      examples: [
+        '[05/Jan/2024 04:11:42 +0000] 40.69.144.53 - Lucio77 admin-console.you-got.mail to: admin-console.prod.008:6000: "GET /api/listCustomers HTTP/1.1" 200 383 "https://admin-console.you-got.mail" "Mozilla/5.0 (Windows; U; Windows NT 6.3) AppleWebKit/531.1.1 (KHTML, like Gecko) Chrome/23.0.835.0 Safari/531.1.1"',
+      ],
+      regex:
+        '.*?2024.+?0000.+?admin.+?to.+?admin.+?console.prod.+?6000.+?api.+?HTTP.+?1.1.+?https.+?admin.+?Mozilla.+?5.0.+?AppleWebKit.+?KHTML.+?like.+?Gecko.+?Chrome.+?Safari.*?',
+    },
+    elementCount: 41,
+  },
+];
+
+describe('FormattedPatternExamples', () => {
+  it('correctly splits each example into correct number of html elements', () => {
+    categoryData.forEach(({ category, elementCount }) => {
+      const { result } = renderHook(() => useCreateFormattedExample());
+      const createFormattedExample = result.current;
+      const resp = createFormattedExample(category.key, category.examples[0]);
+      expect(resp.length).toEqual(elementCount);
+    });
+  });
+});