From fc2332f50f815f39ffa38f606ca4c98cbf29d2a3 Mon Sep 17 00:00:00 2001
From: Pablo Machado <pablo.nevesmachado@elastic.co>
Date: Wed, 12 Oct 2022 10:49:29 +0200
Subject: [PATCH] Update EA page anomalies link to scroll down to the anomalies
 table (#143085)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../entity_analytics/anomalies/index.tsx      |  4 ++-
 .../entity_analytics/header/index.tsx         | 26 +++++++++----------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/overview/components/entity_analytics/anomalies/index.tsx b/x-pack/plugins/security_solution/public/overview/components/entity_analytics/anomalies/index.tsx
index 2d8491879d060..d88ad343eab3c 100644
--- a/x-pack/plugins/security_solution/public/overview/components/entity_analytics/anomalies/index.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/entity_analytics/anomalies/index.tsx
@@ -37,6 +37,8 @@ const TABLE_SORTING = {
   },
 } as const;
 
+export const ENTITY_ANALYTICS_ANOMALIES_PANEL = 'entity_analytics_anomalies';
+
 export const EntityAnalyticsAnomalies = () => {
   const {
     services: { ml, http },
@@ -86,7 +88,7 @@ export const EntityAnalyticsAnomalies = () => {
   }, [getSecuritySolutionLinkProps]);
 
   return (
-    <EuiPanel hasBorder data-test-subj="entity_analytics_anomalies">
+    <EuiPanel hasBorder data-test-subj={ENTITY_ANALYTICS_ANOMALIES_PANEL}>
       <HeaderSection
         title={i18n.ANOMALIES_TITLE}
         titleSize="s"
diff --git a/x-pack/plugins/security_solution/public/overview/components/entity_analytics/header/index.tsx b/x-pack/plugins/security_solution/public/overview/components/entity_analytics/header/index.tsx
index 94d85380261ca..1daf91cd2285c 100644
--- a/x-pack/plugins/security_solution/public/overview/components/entity_analytics/header/index.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/entity_analytics/header/index.tsx
@@ -4,12 +4,11 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { useMemo } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiTitle } from '@elastic/eui';
+import React, { useMemo, useCallback } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiTitle, EuiLink } from '@elastic/eui';
 import styled from 'styled-components';
 import { useDispatch } from 'react-redux';
 import { sumBy } from 'lodash/fp';
-import { ML_PAGES, useMlHref } from '@kbn/ml-plugin/public';
 import { useRiskScoreKpi } from '../../../../risk_score/containers';
 import { LinkAnchor, useGetSecuritySolutionLinkProps } from '../../../../common/components/links';
 import {
@@ -28,9 +27,9 @@ import { getTabsOnUsersUrl } from '../../../../common/components/link_to/redirec
 import { UsersTableType } from '../../../../users/store/model';
 import { useNotableAnomaliesSearch } from '../../../../common/components/ml/anomaly/use_anomalies_search';
 import { useGlobalTime } from '../../../../common/containers/use_global_time';
-import { useKibana } from '../../../../common/lib/kibana';
 import { useMlCapabilities } from '../../../../common/components/ml/hooks/use_ml_capabilities';
 import { useQueryInspector } from '../../../../common/components/page/manage_query';
+import { ENTITY_ANALYTICS_ANOMALIES_PANEL } from '../anomalies';
 
 const StyledEuiTitle = styled(EuiTitle)`
   color: ${({ theme: { eui } }) => eui.euiColorDanger};
@@ -74,10 +73,6 @@ export const EntityAnalyticsHeader = () => {
   const getSecuritySolutionLinkProps = useGetSecuritySolutionLinkProps();
   const isPlatinumOrTrialLicense = useMlCapabilities().isPlatinumOrTrialLicense;
 
-  const {
-    services: { ml, http },
-  } = useKibana();
-
   const [goToHostRiskTabFilteredByCritical, hostRiskTabUrl] = useMemo(() => {
     const { onClick, href } = getSecuritySolutionLinkProps({
       deepLinkId: SecurityPageName.hosts,
@@ -151,9 +146,14 @@ export const EntityAnalyticsHeader = () => {
     [data, areJobsEnabled]
   );
 
-  const jobsUrl = useMlHref(ml, http.basePath.get(), {
-    page: ML_PAGES.ANOMALY_DETECTION_JOBS_MANAGE,
-  });
+  const scrollToAnomalies = useCallback(() => {
+    const element = document.querySelector<HTMLElement>(
+      `[data-test-subj="${ENTITY_ANALYTICS_ANOMALIES_PANEL}"]`
+    );
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, []);
 
   return (
     <EuiPanel hasBorder paddingSize="l">
@@ -211,9 +211,9 @@ export const EntityAnalyticsHeader = () => {
               </EuiTitle>
             </EuiFlexItem>
             <EuiFlexItem>
-              <LinkAnchor data-test-subj="all_anomalies_link" href={jobsUrl} target="_blank">
+              <EuiLink data-test-subj="all_anomalies_link" onClick={scrollToAnomalies}>
                 {i18n.ANOMALIES}
-              </LinkAnchor>
+              </EuiLink>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>