[APM] Hide components when there is no support from agents (#161970)

### Changes
- Hide the top five erroneous transactions table in the errors details
page for OTel agents and Elastic RUM agent
- Hide the top five errors table in the transaction details page for
OTel agents and Elastic RUM agent
- Hide the transactions breakdown chart in the service overview,
transactions, and transaction detail pages for OTel agents

### Elastic APM agent

dc2a5051-094b-466c-821d-67da1611be6c

### OTel agent

05eba515-98da-4afd-85c3-c7f58704ea6b

### Elastic RUM agent

a283c657-a703-43a7-a02d-c4d326205c6a

Closes https://github.com/elastic/kibana/issues/161963

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

@@ -17,6 +17,10 @@ import { i18n } from '@kbn/i18n';
 import React, { useEffect } from 'react';
 import { omit } from 'lodash';
 import { useHistory } from 'react-router-dom';
+import {
+  isOpenTelemetryAgentName,
+  isRumAgentName,
+} from '../../../../common/agent_name';
 import { NOT_AVAILABLE_LABEL } from '../../../../common/i18n';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { useBreadcrumb } from '../../../context/breadcrumbs/use_breadcrumb';
@@ -31,6 +35,7 @@ import { ErrorDistribution } from './distribution';
 import { TopErroneousTransactions } from './top_erroneous_transactions';
 import { maybe } from '../../../../common/utils/maybe';
 import { fromQuery, toQuery } from '../../shared/links/url_helpers';
+import { AgentName } from '../../../../typings/es_schemas/ui/fields/agent';
 
 type ErrorSamplesAPIResponse =
   APIReturnType<'GET /internal/apm/services/{serviceName}/errors/{groupId}/samples'>;
@@ -188,6 +193,10 @@ export function ErrorGroupDetails() {
     }
   }, [history, errorId, errorSamplesData, errorSamplesFetchStatus]);
 
+  const { agentName } = useApmServiceContext();
+  const isOpenTelemetryAgent = isOpenTelemetryAgentName(agentName as AgentName);
+  const isRumAgent = isRumAgentName(agentName as AgentName);
+
   // If there are 0 occurrences, show only charts w. empty message
   const showDetails = errorSamplesData.occurrencesCount !== 0;
 
@@ -216,11 +225,13 @@ export function ErrorGroupDetails() {
             />
           </EuiPanel>
         </EuiFlexItem>
-        <EuiFlexItem grow={2}>
-          <EuiPanel hasBorder={true}>
-            <TopErroneousTransactions serviceName={serviceName} />
-          </EuiPanel>
-        </EuiFlexItem>
+        {!isOpenTelemetryAgent && !isRumAgent && (
+          <EuiFlexItem grow={2}>
+            <EuiPanel hasBorder={true}>
+              <TopErroneousTransactions serviceName={serviceName} />
+            </EuiPanel>
+          </EuiFlexItem>
+        )}
       </EuiFlexGroup>
       <EuiSpacer size="s" />
       {showDetails && (

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

@@ -16,7 +16,9 @@ import {
   EuiPanel,
   EuiSpacer,
 } from '@elastic/eui';
+import { AgentName } from '../../../../typings/es_schemas/ui/fields/agent';
 import {
+  isOpenTelemetryAgentName,
   isRumAgentName,
   isServerlessAgent,
 } from '../../../../common/agent_name';
@@ -57,6 +59,7 @@ export function ServiceOverview() {
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
   const isRumAgent = isRumAgentName(agentName);
+  const isOpenTelemetryAgent = isOpenTelemetryAgentName(agentName as AgentName);
   const isServerless = isServerlessAgent(serverlessType);
 
   const dependenciesLink = router.link('/services/{serviceName}/dependencies', {
@@ -178,13 +181,15 @@ export function ServiceOverview() {
                   />
                 </EuiFlexItem>
               ) : (
-                <EuiFlexItem grow={3}>
-                  <TransactionBreakdownChart
-                    showAnnotations={false}
-                    environment={environment}
-                    kuery={kuery}
-                  />
-                </EuiFlexItem>
+                !isOpenTelemetryAgent && (
+                  <EuiFlexItem grow={3}>
+                    <TransactionBreakdownChart
+                      showAnnotations={false}
+                      environment={environment}
+                      kuery={kuery}
+                    />
+                  </EuiFlexItem>
+                )
               )}
               {!isRumAgent && (
                 <EuiFlexItem grow={7}>

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

@@ -13,6 +13,7 @@ import {
   EuiFlexGroup,
 } from '@elastic/eui';
 import React from 'react';
+import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
 import { AnnotationsContextProvider } from '../../../../context/annotations/annotations_context';
 import { ChartPointerEventContextProvider } from '../../../../context/chart_pointer_event/chart_pointer_event_context';
 import { ServiceOverviewThroughputChart } from '../../../app/service_overview/service_overview_throughput_chart';
@@ -22,6 +23,11 @@ import { TransactionColdstartRateChart } from '../transaction_coldstart_rate_cha
 import { FailedTransactionRateChart } from '../failed_transaction_rate_chart';
 import { TopErrors } from '../../../app/transaction_details/top_errors';
 import { useBreakpoints } from '../../../../hooks/use_breakpoints';
+import {
+  isOpenTelemetryAgentName,
+  isRumAgentName,
+} from '../../../../../common/agent_name';
+import { AgentName } from '../../../../../typings/es_schemas/ui/fields/agent';
 
 export function TransactionCharts({
   kuery,
@@ -46,6 +52,9 @@ export function TransactionCharts({
 }) {
   // The default EuiFlexGroup breaks at 768, but we want to break at 1200
   const { isLarge } = useBreakpoints();
+  const { agentName } = useApmServiceContext();
+  const isOpenTelemetryAgent = isOpenTelemetryAgentName(agentName as AgentName);
+  const isRumAgent = isRumAgentName(agentName as AgentName);
   const rowDirection = isLarge ? 'column' : 'row';
 
   const latencyChart = (
@@ -76,9 +85,11 @@ export function TransactionCharts({
       />
     </EuiFlexItem>
   ) : (
-    <EuiFlexItem>
-      <TransactionBreakdownChart kuery={kuery} environment={environment} />
-    </EuiFlexItem>
+    !isOpenTelemetryAgent && (
+      <EuiFlexItem>
+        <TransactionBreakdownChart kuery={kuery} environment={environment} />
+      </EuiFlexItem>
+    )
   );
 
   const failedTransactionRateChart = (
@@ -98,11 +109,11 @@ export function TransactionCharts({
         <ChartPointerEventContextProvider>
           {transactionName ? (
             <>
-              <EuiFlexGrid columns={3} gutterSize="s">
+              <EuiFlexGroup gutterSize="s">
                 {latencyChart}
                 {serviceOverviewThroughputChart}
                 {coldStartRateOrBreakdownChart}
-              </EuiFlexGrid>
+              </EuiFlexGroup>
               <EuiSpacer size="l" />
               <EuiFlexGroup
                 direction={rowDirection}
@@ -110,11 +121,13 @@ export function TransactionCharts({
                 responsive={false}
               >
                 {failedTransactionRateChart}
-                <EuiFlexItem grow={2}>
-                  <EuiPanel hasBorder={true}>
-                    <TopErrors />
-                  </EuiPanel>
-                </EuiFlexItem>
+                {!isOpenTelemetryAgent && !isRumAgent && (
+                  <EuiFlexItem grow={2}>
+                    <EuiPanel hasBorder={true}>
+                      <TopErrors />
+                    </EuiPanel>
+                  </EuiFlexItem>
+                )}
               </EuiFlexGroup>
             </>
           ) : (
@@ -124,10 +137,10 @@ export function TransactionCharts({
                 {serviceOverviewThroughputChart}
               </EuiFlexGrid>
               <EuiSpacer size="s" />
-              <EuiFlexGrid columns={2} gutterSize="s">
+              <EuiFlexGroup gutterSize="s">
                 {failedTransactionRateChart}
                 {coldStartRateOrBreakdownChart}
-              </EuiFlexGrid>
+              </EuiFlexGroup>
             </>
           )}
         </ChartPointerEventContextProvider>