-
Notifications
You must be signed in to change notification settings - Fork 8.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Log Explorer] Implement Flyout content header (#169832)
## π Summary Closes #169501 π ~**Merge blocked by:** #169634 This work implements the first frame for a detailed log flyout. It adds highlight on the log level, timestamp and message details for a log. This first layer of customization will work as a base for all the upcoming enhancements on the flyout detail. https://github.com/elastic/kibana/assets/34506779/a1c2997c-5fef-4899-836f-ff810de3f148 --------- Co-authored-by: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Achyut Jhunjhunwala <achyut.jhunjhunwala@elastic.co>
- Loading branch information
1 parent
014df2d
commit 9b6edea
Showing
20 changed files
with
584 additions
and
19 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
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15,6 +15,7 @@ | |
"data", | ||
"dataViews", | ||
"discover", | ||
"fieldFormats", | ||
"fleet", | ||
"kibanaReact", | ||
"kibanaUtils", | ||
|
47 changes: 47 additions & 0 deletions
47
x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_detail.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,47 @@ | ||
/* | ||
* 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 from 'react'; | ||
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; | ||
import { LogLevel } from './sub_components/log_level'; | ||
import { Timestamp } from './sub_components/timestamp'; | ||
import { FlyoutProps, LogDocument } from './types'; | ||
import { getDocDetailRenderFlags, useDocDetail } from './use_doc_detail'; | ||
import { Message } from './sub_components/message'; | ||
|
||
export function FlyoutDetail({ dataView, doc }: Pick<FlyoutProps, 'dataView' | 'doc' | 'actions'>) { | ||
const parsedDoc = useDocDetail(doc as LogDocument, { dataView }); | ||
|
||
const { hasTimestamp, hasLogLevel, hasMessage, hasBadges, hasFlyoutHeader } = | ||
getDocDetailRenderFlags(parsedDoc); | ||
|
||
return hasFlyoutHeader ? ( | ||
<EuiFlexGroup direction="column" gutterSize="m" data-test-subj="logExplorerFlyoutDetail"> | ||
<EuiFlexItem grow={false}> | ||
{hasBadges && ( | ||
<EuiFlexGroup responsive={false} gutterSize="m"> | ||
{hasLogLevel && ( | ||
<EuiFlexItem grow={false}> | ||
<LogLevel level={parsedDoc['log.level']} /> | ||
</EuiFlexItem> | ||
)} | ||
{hasTimestamp && ( | ||
<EuiFlexItem grow={false}> | ||
<Timestamp timestamp={parsedDoc['@timestamp']} /> | ||
</EuiFlexItem> | ||
)} | ||
</EuiFlexGroup> | ||
)} | ||
</EuiFlexItem> | ||
{hasMessage && ( | ||
<EuiFlexItem grow={false}> | ||
<Message message={parsedDoc.message} /> | ||
</EuiFlexItem> | ||
)} | ||
</EuiFlexGroup> | ||
) : null; | ||
} |
9 changes: 9 additions & 0 deletions
9
x-pack/plugins/log_explorer/public/components/flyout_detail/index.ts
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,9 @@ | ||
/* | ||
* 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. | ||
*/ | ||
|
||
export * from './flyout_detail'; | ||
export * from './types'; |
33 changes: 33 additions & 0 deletions
33
x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/log_level.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,33 @@ | ||
/* | ||
* 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 from 'react'; | ||
import { EuiBadge, type EuiBadgeProps } from '@elastic/eui'; | ||
import { FlyoutDoc } from '../types'; | ||
|
||
const LEVEL_DICT: Record<string, EuiBadgeProps['color']> = { | ||
error: 'danger', | ||
warn: 'warning', | ||
info: 'primary', | ||
default: 'default', | ||
}; | ||
|
||
interface LogLevelProps { | ||
level: FlyoutDoc['log.level']; | ||
} | ||
|
||
export function LogLevel({ level }: LogLevelProps) { | ||
if (!level) return null; | ||
|
||
const levelColor = LEVEL_DICT[level] ?? LEVEL_DICT.default; | ||
|
||
return ( | ||
<EuiBadge color={levelColor} data-test-subj="logExplorerFlyoutLogLevel"> | ||
{level} | ||
</EuiBadge> | ||
); | ||
} |
34 changes: 34 additions & 0 deletions
34
x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/message.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,34 @@ | ||
/* | ||
* 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 from 'react'; | ||
import { EuiCodeBlock, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; | ||
import { FlyoutDoc } from '../types'; | ||
import { flyoutMessageLabel } from '../translations'; | ||
|
||
interface MessageProps { | ||
message: FlyoutDoc['message']; | ||
} | ||
|
||
export function Message({ message }: MessageProps) { | ||
if (!message) return null; | ||
|
||
return ( | ||
<EuiFlexGroup direction="column" gutterSize="xs" data-test-subj="logExplorerFlyoutLogMessage"> | ||
<EuiFlexItem> | ||
<EuiText color="subdued" size="xs"> | ||
{flyoutMessageLabel} | ||
</EuiText> | ||
</EuiFlexItem> | ||
<EuiFlexItem> | ||
<EuiCodeBlock overflowHeight={100} paddingSize="m" isCopyable language="txt" fontSize="m"> | ||
{message} | ||
</EuiCodeBlock> | ||
</EuiFlexItem> | ||
</EuiFlexGroup> | ||
); | ||
} |
24 changes: 24 additions & 0 deletions
24
x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/timestamp.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,24 @@ | ||
/* | ||
* 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 from 'react'; | ||
import { EuiBadge } from '@elastic/eui'; | ||
import { FlyoutDoc } from '../types'; | ||
|
||
interface TimestampProps { | ||
timestamp: FlyoutDoc['@timestamp']; | ||
} | ||
|
||
export function Timestamp({ timestamp }: TimestampProps) { | ||
if (!timestamp) return null; | ||
|
||
return ( | ||
<EuiBadge color="hollow" data-test-subj="logExplorerFlyoutLogTimestamp"> | ||
{timestamp} | ||
</EuiBadge> | ||
); | ||
} |
12 changes: 12 additions & 0 deletions
12
x-pack/plugins/log_explorer/public/components/flyout_detail/translations.ts
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,12 @@ | ||
/* | ||
* 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 { i18n } from '@kbn/i18n'; | ||
|
||
export const flyoutMessageLabel = i18n.translate('xpack.logExplorer.flyoutDetail.label.message', { | ||
defaultMessage: 'Message', | ||
}); |
35 changes: 35 additions & 0 deletions
35
x-pack/plugins/log_explorer/public/components/flyout_detail/types.ts
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,35 @@ | ||
/* | ||
* 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 { EuiIconType } from '@elastic/eui/src/components/icon/icon'; | ||
import type { DataView } from '@kbn/data-views-plugin/common'; | ||
import type { FlyoutContentProps } from '@kbn/discover-plugin/public'; | ||
import type { DataTableRecord } from '@kbn/discover-utils/types'; | ||
|
||
export interface FlyoutProps extends FlyoutContentProps { | ||
dataView: DataView; | ||
} | ||
|
||
export interface LogDocument extends DataTableRecord { | ||
flattened: { | ||
'@timestamp': string; | ||
'log.level'?: string; | ||
message?: string; | ||
}; | ||
} | ||
|
||
export interface FlyoutDoc { | ||
'@timestamp': string; | ||
'log.level'?: string; | ||
message?: string; | ||
} | ||
|
||
export interface FlyoutHighlightField { | ||
label: string; | ||
value: string; | ||
iconType?: EuiIconType; | ||
} |
60 changes: 60 additions & 0 deletions
60
x-pack/plugins/log_explorer/public/components/flyout_detail/use_doc_detail.ts
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,60 @@ | ||
/* | ||
* 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 { formatFieldValue } from '@kbn/discover-utils'; | ||
import { LOG_LEVEL_FIELD, MESSAGE_FIELD, TIMESTAMP_FIELD } from '../../../common/constants'; | ||
import { useKibanaContextForPlugin } from '../../utils/use_kibana'; | ||
import { FlyoutDoc, FlyoutProps, LogDocument } from './types'; | ||
|
||
export function useDocDetail( | ||
doc: LogDocument, | ||
{ dataView }: Pick<FlyoutProps, 'dataView'> | ||
): FlyoutDoc { | ||
const { services } = useKibanaContextForPlugin(); | ||
|
||
const formatField = <F extends keyof LogDocument['flattened']>( | ||
field: F | ||
): LogDocument['flattened'][F] => { | ||
return ( | ||
doc.flattened[field] && | ||
formatFieldValue( | ||
doc.flattened[field], | ||
doc.raw, | ||
services.fieldFormats, | ||
dataView, | ||
dataView.fields.getByName(field) | ||
) | ||
); | ||
}; | ||
|
||
const level = formatField(LOG_LEVEL_FIELD)?.toLowerCase(); | ||
const timestamp = formatField(TIMESTAMP_FIELD); | ||
const message = formatField(MESSAGE_FIELD); | ||
|
||
return { | ||
[LOG_LEVEL_FIELD]: level, | ||
[TIMESTAMP_FIELD]: timestamp, | ||
[MESSAGE_FIELD]: message, | ||
}; | ||
} | ||
|
||
export const getDocDetailRenderFlags = (doc: FlyoutDoc) => { | ||
const hasTimestamp = Boolean(doc['@timestamp']); | ||
const hasLogLevel = Boolean(doc['log.level']); | ||
const hasMessage = Boolean(doc.message); | ||
|
||
const hasBadges = hasTimestamp || hasLogLevel; | ||
|
||
const hasFlyoutHeader = hasBadges || hasMessage; | ||
|
||
return { | ||
hasTimestamp, | ||
hasLogLevel, | ||
hasMessage, | ||
hasBadges, | ||
hasFlyoutHeader, | ||
}; | ||
}; |
32 changes: 32 additions & 0 deletions
32
x-pack/plugins/log_explorer/public/customizations/custom_flyout_content.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,32 @@ | ||
/* | ||
* 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 from 'react'; | ||
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; | ||
import { FlyoutDetail } from '../components/flyout_detail/flyout_detail'; | ||
import { FlyoutProps } from '../components/flyout_detail'; | ||
|
||
export const CustomFlyoutContent = ({ | ||
actions, | ||
dataView, | ||
doc, | ||
renderDefaultContent, | ||
}: FlyoutProps) => { | ||
return ( | ||
<EuiFlexGroup direction="column"> | ||
{/* Apply custom Log Explorer detail */} | ||
<EuiFlexItem> | ||
<FlyoutDetail actions={actions} dataView={dataView} doc={doc} /> | ||
</EuiFlexItem> | ||
{/* Restore default content */} | ||
<EuiFlexItem>{renderDefaultContent()}</EuiFlexItem> | ||
</EuiFlexGroup> | ||
); | ||
}; | ||
|
||
// eslint-disable-next-line import/no-default-export | ||
export default CustomFlyoutContent; |
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
Oops, something went wrong.