-
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.
[Infra][ObsUX] Hosts & Container Logs only overview (#202992)
## Summary Enables a logs only overview for hosts & containers. Disables the metrics tab as there's no data incoming for metrics, and provides Logs charts on the overview page detailing the Log Rate (all logs generated) and Log Error Rate (all recorded errors). https://github.com/user-attachments/assets/ced14b6d-dd08-4514-9066-6c02c62d5ff8 Closes #201752 ## How to test This is tested using synthtrace data, loading the scenario below: ``` node scripts/synthtrace traces_logs_entities.ts --live ``` This loads a logs-only host, though if other scenarios contain logs only containers, feel free to use those as well. * Go to Inventory page. Click on a host or container. * If it is a logs only host/container, no metrics tab should be shown. Metrics KPI charts should be replaced with Logs KPI charts (Log Rate and Log Error Rate). * If the host/container contains metrics, the metrics tab should be visible and the normal Metrics KPI charts should be present. --------- Co-authored-by: Elastic Machine <[email protected]>
- Loading branch information
1 parent
65b0079
commit 305bb1b
Showing
11 changed files
with
278 additions
and
42 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
43 changes: 43 additions & 0 deletions
43
...ility_solution/infra/public/components/asset_details/hooks/use_chart_series_color.test.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,43 @@ | ||
| /* | ||
| * 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 { useEuiTheme } from '@elastic/eui'; | ||
| import { renderHook } from '@testing-library/react'; | ||
| import { useChartSeriesColor } from './use_chart_series_color'; | ||
|
|
||
| describe('useChartSeriesColor', () => { | ||
| let seriesDefaultColor: string; | ||
|
|
||
| beforeEach(() => { | ||
| const { result } = renderHook(() => useEuiTheme()); | ||
|
|
||
| // Don't try to test a hardcoded value, just use what is provided by EUI. | ||
| // If in the future this value changes, the tests won't break. | ||
| seriesDefaultColor = result.current.euiTheme.colors.backgroundLightText; | ||
| }); | ||
|
|
||
| it('returns a default color value if given no input', () => { | ||
| const { result } = renderHook(() => useChartSeriesColor()); | ||
|
|
||
| expect(result.current).not.toBe(''); | ||
| expect(result.current).toBe(seriesDefaultColor); | ||
| }); | ||
|
|
||
| it('returns a default color value if given an empty string', () => { | ||
| const { result } = renderHook(() => useChartSeriesColor('')); | ||
|
|
||
| expect(result.current).not.toBe(''); | ||
| expect(result.current).toBe(seriesDefaultColor); | ||
| }); | ||
|
|
||
| it('returns the provided color input', () => { | ||
| const { result } = renderHook(() => useChartSeriesColor('#fff')); | ||
|
|
||
| expect(result.current).not.toBe(seriesDefaultColor); | ||
| expect(result.current).toBe('#fff'); | ||
| }); | ||
| }); |
21 changes: 21 additions & 0 deletions
21
...ervability_solution/infra/public/components/asset_details/hooks/use_chart_series_color.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,21 @@ | ||
| /* | ||
| * 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 { useEuiTheme } from '@elastic/eui'; | ||
|
|
||
| /** | ||
| * Provides either the input color, or yields the default EUI theme | ||
| * color for use as the KPI chart series color. | ||
| * @param seriesColor A user-defined color value | ||
| * @returns Either the input `seriesColor` or the default color from EUI | ||
| */ | ||
| export const useChartSeriesColor = (seriesColor?: string): string => { | ||
| const { euiTheme } = useEuiTheme(); | ||
|
|
||
| // Prevent empty string being used as a valid color | ||
| return seriesColor || euiTheme.colors.backgroundLightText; | ||
| }; |
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
77 changes: 77 additions & 0 deletions
77
...gins/observability_solution/infra/public/components/asset_details/hooks/use_log_charts.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,77 @@ | ||
| /* | ||
| * 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'; | ||
| import { useMemo } from 'react'; | ||
| import { LensConfig } from '@kbn/lens-embeddable-utils/config_builder'; | ||
| import { useChartSeriesColor } from './use_chart_series_color'; | ||
|
|
||
| const LOG_RATE = i18n.translate('xpack.infra.assetDetails.charts.logRate', { | ||
| defaultMessage: 'Log Rate', | ||
| }); | ||
|
|
||
| const LOG_ERROR_RATE = i18n.translate('xpack.infra.assetDetails.charts.logErrorRate', { | ||
| defaultMessage: 'Log Error Rate', | ||
| }); | ||
|
|
||
| const logRateMetric: LensConfig & { id: string } = { | ||
| id: 'logMetric', | ||
| chartType: 'metric', | ||
| title: LOG_RATE, | ||
| label: LOG_RATE, | ||
| trendLine: true, | ||
| value: 'count()', | ||
| format: 'number', | ||
| decimals: 1, | ||
| normalizeByUnit: 's', | ||
| }; | ||
|
|
||
| const logErrorRateMetric: LensConfig & { id: string } = { | ||
| id: 'logErrorMetric', | ||
| chartType: 'metric', | ||
| title: LOG_ERROR_RATE, | ||
| label: LOG_ERROR_RATE, | ||
| trendLine: true, | ||
| value: | ||
| 'count(kql=\'log.level: "error" OR log.level: "ERROR" OR error.log.level: "error" OR error.log.level: "ERROR"\')', | ||
| format: 'number', | ||
| decimals: 1, | ||
| normalizeByUnit: 's', | ||
| }; | ||
|
|
||
| export const useLogsCharts = ({ | ||
| dataViewId, | ||
| seriesColor, | ||
| }: { | ||
| dataViewId?: string; | ||
| seriesColor?: string; | ||
| }) => { | ||
| seriesColor = useChartSeriesColor(seriesColor); | ||
|
|
||
| return useMemo(() => { | ||
| const dataset = dataViewId && { | ||
| dataset: { | ||
| index: dataViewId, | ||
| }, | ||
| }; | ||
|
|
||
| return { | ||
| charts: [ | ||
| { | ||
| ...logRateMetric, | ||
| ...dataset, | ||
| seriesColor, | ||
| }, | ||
| { | ||
| ...logErrorRateMetric, | ||
| ...dataset, | ||
| seriesColor, | ||
| }, | ||
| ], | ||
| }; | ||
| }, [dataViewId, seriesColor]); | ||
| }; |
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
59 changes: 59 additions & 0 deletions
59
...ugins/observability_solution/infra/public/components/asset_details/tabs/overview/logs.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,59 @@ | ||
| /* | ||
| * 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, { useMemo } from 'react'; | ||
| import type { DataView } from '@kbn/data-views-plugin/public'; | ||
| import type { TimeRange } from '@kbn/es-query'; | ||
| import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; | ||
| import { | ||
| findInventoryFields, | ||
| type InventoryItemType, | ||
| } from '@kbn/metrics-data-access-plugin/common'; | ||
| import { buildCombinedAssetFilter } from '../../../../utils/filters/build'; | ||
| import { useSearchSessionContext } from '../../../../hooks/use_search_session'; | ||
| import { useLogsCharts } from '../../hooks/use_log_charts'; | ||
| import { Kpi } from '../../components/kpis/kpi'; | ||
|
|
||
| interface Props { | ||
| dataView?: DataView; | ||
| assetId: string; | ||
| assetType: InventoryItemType; | ||
| dateRange: TimeRange; | ||
| } | ||
|
|
||
| export const LogsContent = ({ assetId, assetType, dataView, dateRange }: Props) => { | ||
| const { searchSessionId } = useSearchSessionContext(); | ||
|
|
||
| const filters = useMemo(() => { | ||
| return [ | ||
| buildCombinedAssetFilter({ | ||
| field: findInventoryFields(assetType).id, | ||
| values: [assetId], | ||
| dataView, | ||
| }), | ||
| ]; | ||
| }, [dataView, assetId, assetType]); | ||
|
|
||
| const { charts } = useLogsCharts({ | ||
| dataViewId: dataView?.id, | ||
| }); | ||
|
|
||
| return ( | ||
| <EuiFlexGroup direction="row" gutterSize="s" data-test-subj="infraAssetDetailsLogsGrid"> | ||
| {charts.map((chartProps, index) => ( | ||
| <EuiFlexItem key={index}> | ||
| <Kpi | ||
| {...chartProps} | ||
| dateRange={dateRange} | ||
| filters={filters} | ||
| searchSessionId={searchSessionId} | ||
| /> | ||
| </EuiFlexItem> | ||
| ))} | ||
| </EuiFlexGroup> | ||
| ); | ||
| }; |
Oops, something went wrong.