From ddc42ee0f370f0ba1a76633ebf4c2e03a0f7d4b8 Mon Sep 17 00:00:00 2001
From: Katerina <aikaterini.patticha@elastic.co>
Date: Thu, 29 Aug 2024 14:13:57 +0300
Subject: [PATCH] [APM][ECO] Add link "Explore logs" in logs charts (#191704)

## Summary

closes https://github.com/elastic/kibana/issues/190520



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

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 .../entities/charts/log_error_rate_chart.tsx  | 87 ++++++++++--------
 .../app/entities/charts/log_rate_chart.tsx    | 89 +++++++++++--------
 .../explore_logs_button.tsx                   | 58 ++++++++++++
 .../logs_explorer_locator_config.ts           | 48 ++++++++++
 .../observability_solution/apm/tsconfig.json  |  7 +-
 5 files changed, 211 insertions(+), 78 deletions(-)
 create mode 100644 x-pack/plugins/observability_solution/apm/public/components/shared/explore_logs_button/explore_logs_button.tsx
 create mode 100644 x-pack/plugins/observability_solution/apm/public/components/shared/explore_logs_button/logs_explorer_locator_config.ts

diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/entities/charts/log_error_rate_chart.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/entities/charts/log_error_rate_chart.tsx
index d734da4fbf80f..9493d3503a5dd 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/app/entities/charts/log_error_rate_chart.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/app/entities/charts/log_error_rate_chart.tsx
@@ -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'>;
@@ -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
diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/entities/charts/log_rate_chart.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/entities/charts/log_rate_chart.tsx
index 63f5f9245a4b0..999acfccfc2c3 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/app/entities/charts/log_rate_chart.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/app/entities/charts/log_rate_chart.tsx
@@ -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'>;
@@ -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(
@@ -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
diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/explore_logs_button/explore_logs_button.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/explore_logs_button/explore_logs_button.tsx
new file mode 100644
index 0000000000000..4d09b6bd08fe6
--- /dev/null
+++ b/x-pack/plugins/observability_solution/apm/public/components/shared/explore_logs_button/explore_logs_button.tsx
@@ -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>
+  );
+}
diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/explore_logs_button/logs_explorer_locator_config.ts b/x-pack/plugins/observability_solution/apm/public/components/shared/explore_logs_button/logs_explorer_locator_config.ts
new file mode 100644
index 0000000000000..e5baa87856b31
--- /dev/null
+++ b/x-pack/plugins/observability_solution/apm/public/components/shared/explore_logs_button/logs_explorer_locator_config.ts
@@ -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 };
+};
diff --git a/x-pack/plugins/observability_solution/apm/tsconfig.json b/x-pack/plugins/observability_solution/apm/tsconfig.json
index 7389566ed6a4c..a31ddcca0bdce 100644
--- a/x-pack/plugins/observability_solution/apm/tsconfig.json
+++ b/x-pack/plugins/observability_solution/apm/tsconfig.json
@@ -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/**/*"]
 }