-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[ML] [AIOps] Adding expanded rows to pattern analysis table (#175320)
Changes the syntax highlighting of the example text so that it is now based on the pattern's tokens, rather than being the default "log" format supplied by `EuiCode` Adds an expanded row to the able which lists the tokens, the regex and 4 examples so we can see how the non-token parts of each example vary. Highlighting colors have been copied from the `EuiCode` component. <img width="1027" alt="image" src="https://github.com/elastic/kibana/assets/22172091/e6068e93-cf52-4c6c-a8ea-2d3dccb08491">
- Loading branch information
1 parent
7321d6e
commit b10f083
Showing
17 changed files
with
417 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
69 changes: 69 additions & 0 deletions
69
x-pack/plugins/aiops/public/components/log_categorization/category_table/expanded_row.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 /> | ||
| </> | ||
| ); | ||
| }; |
97 changes: 97 additions & 0 deletions
97
x-pack/plugins/aiops/public/components/log_categorization/format_category.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.