[APM] Add callout

Showing a callout to inform the user we have detected a high cardinality in unique transaction names and enabling them how to fix it.
elastic · May 28, 2020 · f968d61 · f968d61
1 parent dcca06b
commit f968d61
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx
@@ -11,6 +11,8 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
+  EuiCallOut,
+  EuiLink,
 } from '@elastic/eui';
 import { Location } from 'history';
 import { first } from 'lodash';
@@ -154,6 +156,19 @@ export function TransactionOverview() {
               <h3>Transactions</h3>
             </EuiTitle>
             <EuiSpacer size="s" />
+            <EuiCallOut
+              title="Too many unique transaction names."
+              color="primary"
+              iconType="help"
+            >
+              <p>
+                We have detected a lot of unique transaction names among your
+                transactions. This could be a sign of incorrect setup in your
+                agent.{' '}
+                <EuiLink href="#">Learn more in the documentation</EuiLink>.
+              </p>
+            </EuiCallOut>
+            <EuiSpacer size="s" />
             <TransactionList
               isLoading={transactionListStatus === 'loading'}
               items={transactionListData}