Skip to content

Commit

Permalink
[APM][ECO] Add link "Explore logs" in logs charts (#191704)
Browse files Browse the repository at this point in the history
## Summary

closes #190520



https://github.com/user-attachments/assets/7adce001-3a39-412e-aeeb-adc11e5be72e

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
kpatticha and kibanamachine authored Aug 29, 2024
1 parent 631304b commit ddc42ee
Show file tree
Hide file tree
Showing 5 changed files with 211 additions and 78 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
ChartMetricType,
getMetricsFormula,
} from '../../../shared/charts/helper/get_metrics_formulas';
import { ExploreLogsButton } from '../../../shared/explore_logs_button/explore_logs_button';

type LogErrorRateReturnType =
APIReturnType<'GET /internal/apm/entities/services/{serviceName}/logs_error_rate_timeseries'>;
Expand Down Expand Up @@ -76,44 +77,56 @@ export function LogErrorRateChart({ height }: { height: number }) {
return (
<EuiPanel hasBorder>
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<h2>
{i18n.translate('xpack.apm.logErrorRate', {
defaultMessage: 'Log error %',
})}
</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<Popover>
<TooltipContent
formula={getMetricsFormula(ChartMetricType.LOG_ERROR_RATE)}
description={
<FormattedMessage
defaultMessage="% of logs where error detected for given {serviceName}."
id="xpack.apm.multiSignal.servicesTable.logErrorRate.tooltip.description"
values={{
serviceName: (
<code
css={css`
word-break: break-word;
`}
>
{i18n.translate(
'xpack.apm.multiSignal.servicesTable.logErrorRate.tooltip.serviceNameLabel',
{
defaultMessage: 'service.name',
}
)}
</code>
),
}}
/>
}
<EuiFlexGroup
alignItems="center"
justifyContent="spaceBetween"
gutterSize="s"
responsive={false}
>
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<h2>
{i18n.translate('xpack.apm.logErrorRate', {
defaultMessage: 'Log error %',
})}{' '}
<Popover>
<TooltipContent
formula={getMetricsFormula(ChartMetricType.LOG_ERROR_RATE)}
description={
<FormattedMessage
defaultMessage="% of logs where error detected for given {serviceName}."
id="xpack.apm.multiSignal.servicesTable.logErrorRate.tooltip.description"
values={{
serviceName: (
<code
css={css`
word-break: break-word;
`}
>
{i18n.translate(
'xpack.apm.multiSignal.servicesTable.logErrorRate.tooltip.serviceNameLabel',
{
defaultMessage: 'service.name',
}
)}
</code>
),
}}
/>
}
/>
</Popover>
</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<ExploreLogsButton
start={start}
end={end}
kuery={`(log.level: error OR error.log.level: error) AND service.name: "${serviceName}"`}
/>
</Popover>
</EuiFlexItem>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexGroup>

<TimeseriesChartWithContext
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
getMetricsFormula,
ChartMetricType,
} from '../../../shared/charts/helper/get_metrics_formulas';
import { ExploreLogsButton } from '../../../shared/explore_logs_button/explore_logs_button';

type LogRateReturnType =
APIReturnType<'GET /internal/apm/entities/services/{serviceName}/logs_rate_timeseries'>;
Expand All @@ -35,6 +36,7 @@ export function LogRateChart({ height }: { height: number }) {
query: { rangeFrom, rangeTo, environment, kuery },
path: { serviceName },
} = useApmParams('/logs-services/{serviceName}');

const { start, end } = useTimeRange({ rangeFrom, rangeTo });

const { data = INITIAL_STATE, status } = useFetcher(
Expand Down Expand Up @@ -76,44 +78,57 @@ export function LogRateChart({ height }: { height: number }) {
return (
<EuiPanel hasBorder>
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<h2>
{i18n.translate('xpack.apm.logRate', {
defaultMessage: 'Log rate',
})}
</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<Popover>
<TooltipContent
formula={getMetricsFormula(ChartMetricType.LOG_RATE)}
description={
<FormattedMessage
defaultMessage="Rate of logs per minute observed for given {serviceName}."
id="xpack.apm.multiSignal.servicesTable.logRate.tooltip.description"
values={{
serviceName: (
<code
css={css`
word-break: break-word;
`}
>
{i18n.translate(
'xpack.apm.multiSignal.servicesTable.logRate.tooltip.serviceNameLabel',
{
defaultMessage: 'service.name',
}
)}
</code>
),
}}
/>
}
<EuiFlexGroup
alignItems="center"
justifyContent="spaceBetween"
gutterSize="s"
responsive={false}
>
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<h2>
{i18n.translate('xpack.apm.logRate', {
defaultMessage: 'Log rate',
})}{' '}
<Popover>
<TooltipContent
formula={getMetricsFormula(ChartMetricType.LOG_RATE)}
description={
<FormattedMessage
defaultMessage="Rate of logs per minute observed for given {serviceName}."
id="xpack.apm.multiSignal.servicesTable.logRate.tooltip.description"
values={{
serviceName: (
<code
css={css`
word-break: break-word;
`}
>
{i18n.translate(
'xpack.apm.multiSignal.servicesTable.logRate.tooltip.serviceNameLabel',
{
defaultMessage: 'service.name',
}
)}
</code>
),
}}
/>
}
/>
</Popover>
</h2>
</EuiTitle>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<ExploreLogsButton
start={start}
end={end}
kuery={`log.level: * AND service.name: "${serviceName}"`}
/>
</Popover>
</EuiFlexItem>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexGroup>

<TimeseriesChartWithContext
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
/*
* 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.
*/

/*
* 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 { AllDatasetsLocatorParams, ALL_DATASETS_LOCATOR_ID } from '@kbn/deeplinks-observability';
import { EuiButtonEmpty } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
import { buildLogsExplorerLocatorConfig } from './logs_explorer_locator_config';

export function ExploreLogsButton({
start,
end,
kuery,
}: {
start: string;
end: string;
kuery?: string;
}) {
const { share } = useApmPluginContext();

const logsExplorerLocator =
share.url.locators.get<AllDatasetsLocatorParams>(ALL_DATASETS_LOCATOR_ID)!;

if (!logsExplorerLocator) {
return null;
}

const { logsExplorerLinkProps } = buildLogsExplorerLocatorConfig({
locator: logsExplorerLocator,
from: start,
to: end,
kuery,
});

return (
<EuiButtonEmpty
data-test-subj="apmExploreLogsButton"
href={logsExplorerLinkProps.href}
color="primary"
>
{i18n.translate('xpack.apm.button.exploreLogs', {
defaultMessage: 'Explore logs',
})}
</EuiButtonEmpty>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/*
* 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 { AllDatasetsLocatorParams } from '@kbn/deeplinks-observability';
import { LocatorPublic } from '@kbn/share-plugin/common';
import { getRouterLinkProps } from '@kbn/router-utils';
import { RouterLinkProps } from '@kbn/router-utils/src/get_router_link_props';

export const buildLogsExplorerLocatorConfig = ({
locator,
kuery,
from,
to,
}: {
locator: LocatorPublic<AllDatasetsLocatorParams>;
kuery?: string;
from: string;
to: string;
}): {
logsExplorerLinkProps: RouterLinkProps;
} => {
const params: AllDatasetsLocatorParams = {
timeRange: {
from,
to,
},
...(kuery && {
query: { language: 'kuery', query: kuery },
}),
};

const urlToLogsExplorer = locator.getRedirectUrl(params);

const navigateToLogsExplorer = () => {
locator.navigate(params);
};

const logsExplorerLinkProps = getRouterLinkProps({
href: urlToLogsExplorer,
onClick: navigateToLogsExplorer,
});

return { logsExplorerLinkProps };
};
7 changes: 3 additions & 4 deletions x-pack/plugins/observability_solution/apm/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -128,9 +128,8 @@
"@kbn/core-analytics-browser",
"@kbn/apm-types",
"@kbn/entities-schema",
"@kbn/aiops-log-rate-analysis"
"@kbn/aiops-log-rate-analysis",
"@kbn/router-utils"
],
"exclude": [
"target/**/*"
]
"exclude": ["target/**/*"]
}

0 comments on commit ddc42ee

Please sign in to comment.