Replace link under charts with CallOut above charts with link to Clie…

…nt Side Monitoring

x-pack/plugins/apm/public/components/app/TransactionOverview/ClientSideMonitoringCallout.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiButton, EuiCallOut, EuiSpacer, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
+
+export function ClientSideMonitoringCallout() {
+  const { core } = useApmPluginContext();
+  const clientSideMonitoringHref = core.http.basePath.prepend(`/app/csm`);
+
+  return (
+    <EuiCallOut
+      iconType="cheer"
+      title={i18n.translate(
+        'xpack.apm.transactionOverview.clientSideMonitoring.calloutTitle',
+        { defaultMessage: 'New app: Client Side Monitoring' }
+      )}
+    >
+      <EuiText>
+        {i18n.translate(
+          'xpack.apm.transactionOverview.clientSideMonitoring.calloutText',
+          {
+            defaultMessage:
+              'We are introducing a new app which contains breakdown information around browser and location by page load.',
+          }
+        )}
+      </EuiText>
+      <EuiSpacer size="m" />
+      <EuiButton href={clientSideMonitoringHref}>
+        {i18n.translate(
+          'xpack.apm.transactionOverview.clientSideMonitoring.linkLabel',
+          { defaultMessage: 'Learn more' }
+        )}
+      </EuiButton>
+    </EuiCallOut>
+  );
+}

x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx

@@ -35,6 +35,8 @@ import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { TransactionTypeFilter } from '../../shared/LocalUIFilters/TransactionTypeFilter';
 import { TransactionList } from './TransactionList';
 import { useRedirect } from './useRedirect';
+import { TRANSACTION_PAGE_LOAD } from '../../../../common/transaction_types';
+import { ClientSideMonitoringCallout } from './ClientSideMonitoringCallout';
 
 function getRedirectLocation({
   urlParams,
@@ -125,6 +127,12 @@ export function TransactionOverview({ serviceName }: TransactionOverviewProps) {
           </LocalUIFilters>
         </EuiFlexItem>
         <EuiFlexItem grow={7}>
+          {transactionType === TRANSACTION_PAGE_LOAD && (
+            <>
+              <ClientSideMonitoringCallout />
+              <EuiSpacer size="s" />
+            </>
+          )}
           <ChartsSyncContextProvider>
             <TransactionCharts
               charts={transactionCharts}

x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/index.tsx

@@ -14,7 +14,6 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import styled from 'styled-components';
 import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
 import {
   TRANSACTION_PAGE_LOAD,
@@ -36,11 +35,6 @@ import {
 import { MLHeader } from './ml_header';
 import { TransactionLineChart } from './TransactionLineChart';
 import { useFormatter } from './use_formatter';
-import { ClientSideMonitoringLink } from '../../Links/ClientSideMonitoringLink';
-
-const CSMLinkSection = styled.section`
-  text-align: center;
-`;
 
 interface TransactionChartProps {
   charts: ITransactionChartData;
@@ -124,20 +118,6 @@ export function TransactionCharts({
           <TransactionBreakdown />
         </EuiFlexItem>
       </EuiFlexGrid>
-
-      {transactionType === TRANSACTION_PAGE_LOAD && (
-        <>
-          <EuiSpacer size="s" />
-          <CSMLinkSection>
-            <ClientSideMonitoringLink external target="_blank">
-              {i18n.translate(
-                'xpack.apm.metrics.transactionChart.clientSideMonitoringLink',
-                { defaultMessage: 'See more in Client Side Monitoring' }
-              )}
-            </ClientSideMonitoringLink>
-          </CSMLinkSection>
-        </>
-      )}
     </>
   );
 }