[APM] Create new API's to return Latency and Throughput charts

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

@@ -17,7 +17,6 @@ import React, { useMemo } from 'react';
 import { isEmpty, flatten } from 'lodash';
 import { useHistory } from 'react-router-dom';
 import { RouteComponentProps } from 'react-router-dom';
-import { useTransactionChartsFetcher } from '../../../hooks/use_transaction_charts_fetcher';
 import { useTransactionDistributionFetcher } from '../../../hooks/use_transaction_distribution_fetcher';
 import { useWaterfallFetcher } from './use_waterfall_fetcher';
 import { ApmHeader } from '../../shared/ApmHeader';
@@ -54,11 +53,6 @@ export function TransactionDetails({
     distributionStatus,
   } = useTransactionDistributionFetcher();
 
-  const {
-    transactionChartsData,
-    transactionChartsStatus,
-  } = useTransactionChartsFetcher();
-
   const {
     waterfall,
     exceedsMax,
@@ -128,11 +122,7 @@ export function TransactionDetails({
           </EuiFlexItem>
           <EuiFlexItem grow={7}>
             <ChartPointerEventContextProvider>
-              <TransactionCharts
-                fetchStatus={transactionChartsStatus}
-                charts={transactionChartsData}
-                urlParams={urlParams}
-              />
+              <TransactionCharts />
             </ChartPointerEventContextProvider>
 
             <EuiHorizontalRule size="full" margin="l" />

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

@@ -24,7 +24,6 @@ import { useTrackPageview } from '../../../../../observability/public';
 import { Projection } from '../../../../common/projections';
 import { TRANSACTION_PAGE_LOAD } from '../../../../common/transaction_types';
 import { IUrlParams } from '../../../context/url_params_context/types';
-import { useTransactionChartsFetcher } from '../../../hooks/use_transaction_charts_fetcher';
 import { useTransactionListFetcher } from './use_transaction_list';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { TransactionCharts } from '../../shared/charts/transaction_charts';
@@ -73,11 +72,6 @@ export function TransactionOverview({ serviceName }: TransactionOverviewProps) {
   // redirect to first transaction type
   useRedirect(getRedirectLocation({ location, transactionType, urlParams }));
 
-  const {
-    transactionChartsData,
-    transactionChartsStatus,
-  } = useTransactionChartsFetcher();
-
   useTrackPageview({ app: 'apm', path: 'transaction_overview' });
   useTrackPageview({ app: 'apm', path: 'transaction_overview', delay: 15000 });
   const {
@@ -132,11 +126,7 @@ export function TransactionOverview({ serviceName }: TransactionOverviewProps) {
                 <EuiSpacer size="s" />
               </>
             )}
-            <TransactionCharts
-              fetchStatus={transactionChartsStatus}
-              charts={transactionChartsData}
-              urlParams={urlParams}
-            />
+            <TransactionCharts />
             <EuiSpacer size="s" />
             <EuiPanel>
               <EuiTitle size="xs">

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

@@ -34,10 +34,10 @@ import { useTheme } from '../../../hooks/use_theme';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useAnnotationsContext } from '../../../context/annotations/use_annotations_context';
 import { useChartPointerEventContext } from '../../../context/chart_pointer_event/use_chart_pointer_event_context';
-import { AnomalySeries } from '../../../selectors/chart_selectors';
 import { unit } from '../../../style/variables';
 import { ChartContainer } from './chart_container';
 import { onBrushEnd } from './helper/helper';
+import { getLatencyChartSelector } from '../../../selectors/latency_chart_selectors';
 
 interface Props {
   id: string;
@@ -55,7 +55,9 @@ interface Props {
   yTickFormat?: (y: number) => string;
   showAnnotations?: boolean;
   yDomain?: YDomainRange;
-  anomalySeries?: AnomalySeries;
+  anomalySeries?: ReturnType<
+    typeof getLatencyChartSelector
+  >['anomalyTimeseries'];
 }
 
 export function TimeseriesChart({

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

@@ -23,32 +23,34 @@ import { asTransactionRate } from '../../../../../common/utils/formatters';
 import { AnnotationsContextProvider } from '../../../../context/annotations/annotations_context';
 import { ChartPointerEventContextProvider } from '../../../../context/chart_pointer_event/chart_pointer_event_context';
 import { LicenseContext } from '../../../../context/license/license_context';
-import type { IUrlParams } from '../../../../context/url_params_context/types';
-import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
-import { ITransactionChartData } from '../../../../selectors/chart_selectors';
+import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
+import { useTransactionLatencyChartsFetcher } from '../../../../hooks/use_transaction_latency_chart_fetcher';
+import { useTransactionThroughputChartsFetcher } from '../../../../hooks/use_transaction_throughput_chart_fetcher';
 import { TimeseriesChart } from '../timeseries_chart';
 import { TransactionBreakdownChart } from '../transaction_breakdown_chart';
 import { TransactionErrorRateChart } from '../transaction_error_rate_chart/';
 import { getResponseTimeTickFormatter } from './helper';
 import { MLHeader } from './ml_header';
 import { useFormatter } from './use_formatter';
 
-interface TransactionChartProps {
-  charts: ITransactionChartData;
-  urlParams: IUrlParams;
-  fetchStatus: FETCH_STATUS;
-}
-
-export function TransactionCharts({
-  charts,
-  urlParams,
-  fetchStatus,
-}: TransactionChartProps) {
+export function TransactionCharts() {
+  const { urlParams } = useUrlParams();
   const { transactionType } = urlParams;
 
-  const { responseTimeSeries, tpmSeries, anomalySeries } = charts;
+  const {
+    latencyChartsData,
+    latencyChartsStatus,
+  } = useTransactionLatencyChartsFetcher();
+
+  const {
+    throughputChartsData,
+    throughputChartsStatus,
+  } = useTransactionThroughputChartsFetcher();
+
+  const { latencyTimeseries, anomalyTimeseries, mlJobId } = latencyChartsData;
+  const { throughputTimeseries } = throughputChartsData;
 
-  const { formatter, toggleSerie } = useFormatter(responseTimeSeries);
+  const { formatter, toggleSerie } = useFormatter(latencyTimeseries);
 
   return (
     <>
@@ -69,17 +71,17 @@ export function TransactionCharts({
                         hasValidMlLicense={
                           license?.getFeature('ml').isAvailable
                         }
-                        mlJobId={charts.mlJobId}
+                        mlJobId={mlJobId}
                       />
                     )}
                   </LicenseContext.Consumer>
                 </EuiFlexGroup>
                 <TimeseriesChart
-                  fetchStatus={fetchStatus}
+                  fetchStatus={latencyChartsStatus}
                   id="transactionDuration"
-                  timeseries={responseTimeSeries || []}
+                  timeseries={latencyTimeseries}
                   yLabelFormat={getResponseTimeTickFormatter(formatter)}
-                  anomalySeries={anomalySeries}
+                  anomalySeries={anomalyTimeseries}
                   onToggleLegend={(serie) => {
                     if (serie) {
                       toggleSerie(serie);
@@ -95,9 +97,9 @@ export function TransactionCharts({
                   <span>{tpmLabel(transactionType)}</span>
                 </EuiTitle>
                 <TimeseriesChart
-                  fetchStatus={fetchStatus}
+                  fetchStatus={throughputChartsStatus}
                   id="requestPerMinutes"
-                  timeseries={tpmSeries || []}
+                  timeseries={throughputTimeseries}
                   yLabelFormat={asTransactionRate}
                 />
               </EuiPanel>

x-pack/plugins/apm/public/hooks/use_transaction_charts_fetcher.ts → x-pack/plugins/apm/public/hooks/use_transaction_latency_chart_fetcher.ts

@@ -6,12 +6,14 @@
 
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
-import { getTransactionCharts } from '../selectors/chart_selectors';
 import { useFetcher } from './use_fetcher';
 import { useUrlParams } from '../context/url_params_context/use_url_params';
+import { getLatencyChartSelector } from '../selectors/latency_chart_selectors';
+import { useTheme } from './use_theme';
 
-export function useTransactionChartsFetcher() {
+export function useTransactionLatencyChartsFetcher() {
   const { serviceName } = useParams<{ serviceName?: string }>();
+  const theme = useTheme();
   const {
     urlParams: { transactionType, start, end, transactionName },
     uiFilters,
@@ -21,7 +23,8 @@ export function useTransactionChartsFetcher() {
     (callApmApi) => {
       if (serviceName && start && end) {
         return callApmApi({
-          endpoint: 'GET /api/apm/services/{serviceName}/transactions/charts',
+          endpoint:
+            'GET /api/apm/services/{serviceName}/transactions/charts/latency',
           params: {
             path: { serviceName },
             query: {
@@ -39,13 +42,13 @@ export function useTransactionChartsFetcher() {
   );
 
   const memoizedData = useMemo(
-    () => getTransactionCharts({ transactionType }, data),
-    [data, transactionType]
+    () => getLatencyChartSelector({ latencyChart: data, theme }),
+    [data, theme]
   );
 
   return {
-    transactionChartsData: memoizedData,
-    transactionChartsStatus: status,
-    transactionChartsError: error,
+    latencyChartsData: memoizedData,
+    latencyChartsStatus: status,
+    latencyChartsError: error,
   };
 }

x-pack/plugins/apm/public/hooks/use_transaction_throughput_chart_fetcher.ts

@@ -0,0 +1,54 @@
+/*
+ * 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 { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import { useFetcher } from './use_fetcher';
+import { useUrlParams } from '../context/url_params_context/use_url_params';
+import { getThrouputChartSelector } from '../selectors/throuput_chart_selectors';
+import { useTheme } from './use_theme';
+
+export function useTransactionThroughputChartsFetcher() {
+  const { serviceName } = useParams<{ serviceName?: string }>();
+  const theme = useTheme();
+  const {
+    urlParams: { transactionType, start, end, transactionName },
+    uiFilters,
+  } = useUrlParams();
+
+  const { data, error, status } = useFetcher(
+    (callApmApi) => {
+      if (serviceName && start && end) {
+        return callApmApi({
+          endpoint:
+            'GET /api/apm/services/{serviceName}/transactions/charts/throughput',
+          params: {
+            path: { serviceName },
+            query: {
+              start,
+              end,
+              transactionType,
+              transactionName,
+              uiFilters: JSON.stringify(uiFilters),
+            },
+          },
+        });
+      }
+    },
+    [serviceName, start, end, transactionName, transactionType, uiFilters]
+  );
+
+  const memoizedData = useMemo(
+    () => getThrouputChartSelector({ throuputChart: data, theme }),
+    [data, theme]
+  );
+
+  return {
+    throughputChartsData: memoizedData,
+    throughputChartsStatus: status,
+    throughputChartsError: error,
+  };
+}