[APM] Latency chart for overview

x-pack/plugins/apm/common/latency_aggregation_types.ts

@@ -0,0 +1,18 @@
+/*
+ * 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 * as t from 'io-ts';
+
+export enum LatencyAggregationType {
+  avg = 'avg',
+  p99 = 'p99',
+  p95 = 'p95',
+}
+
+export const latencyAggregationTypeRt = t.union([
+  t.literal('avg'),
+  t.literal('p95'),
+  t.literal('p99'),
+]);

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

@@ -15,12 +15,14 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useTrackPageview } from '../../../../../observability/public';
 import { isRumAgentName } from '../../../../common/agent_name';
+import { AnnotationsContextProvider } from '../../../context/annotations/annotations_context';
 import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context';
+import { LatencyChart } from '../../shared/charts/latency_chart';
 import { TransactionBreakdownChart } from '../../shared/charts/transaction_breakdown_chart';
 import { TransactionErrorRateChart } from '../../shared/charts/transaction_error_rate_chart';
 import { SearchBar } from '../../shared/search_bar';
-import { ServiceOverviewErrorsTable } from './service_overview_errors_table';
 import { ServiceOverviewDependenciesTable } from './service_overview_dependencies_table';
+import { ServiceOverviewErrorsTable } from './service_overview_errors_table';
 import { ServiceOverviewThroughputChart } from './service_overview_throughput_chart';
 import { ServiceOverviewTransactionsTable } from './service_overview_transactions_table';
 
@@ -43,99 +45,96 @@ export function ServiceOverview({
   useTrackPageview({ app: 'apm', path: 'service_overview', delay: 15000 });
 
   return (
-    <ChartPointerEventContextProvider>
-      <SearchBar />
-      <EuiPage>
-        <EuiFlexGroup direction="column" gutterSize="s">
-          <EuiFlexItem>
-            <EuiPanel>
-              <EuiTitle size="xs">
-                <h2>
-                  {i18n.translate(
-                    'xpack.apm.serviceOverview.latencyChartTitle',
-                    {
-                      defaultMessage: 'Latency',
-                    }
-                  )}
-                </h2>
-              </EuiTitle>
-            </EuiPanel>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiFlexGroup gutterSize="s">
-              <EuiFlexItem grow={4}>
-                <ServiceOverviewThroughputChart height={chartHeight} />
-              </EuiFlexItem>
-              <EuiFlexItem grow={6}>
-                <EuiPanel>
-                  <ServiceOverviewTransactionsTable serviceName={serviceName} />
-                </EuiPanel>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiFlexGroup gutterSize="s">
-              {!isRumAgentName(agentName) && (
+    <AnnotationsContextProvider>
+      <ChartPointerEventContextProvider>
+        <SearchBar />
+        <EuiPage>
+          <EuiFlexGroup direction="column" gutterSize="s">
+            <EuiFlexItem>
+              <EuiPanel>
+                <LatencyChart height={200} />
+              </EuiPanel>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiFlexGroup gutterSize="s">
+                <EuiFlexItem grow={4}>
+                  <ServiceOverviewThroughputChart height={chartHeight} />
+                </EuiFlexItem>
+                <EuiFlexItem grow={6}>
+                  <EuiPanel>
+                    <ServiceOverviewTransactionsTable
+                      serviceName={serviceName}
+                    />
+                  </EuiPanel>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiFlexGroup gutterSize="s">
+                {!isRumAgentName(agentName) && (
+                  <EuiFlexItem grow={4}>
+                    <TransactionErrorRateChart
+                      height={chartHeight}
+                      showAnnotations={false}
+                    />
+                  </EuiFlexItem>
+                )}
+                <EuiFlexItem grow={6}>
+                  <EuiPanel>
+                    <ServiceOverviewErrorsTable serviceName={serviceName} />
+                  </EuiPanel>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiFlexGroup gutterSize="s">
                 <EuiFlexItem grow={4}>
-                  <TransactionErrorRateChart
-                    height={chartHeight}
-                    showAnnotations={false}
-                  />
+                  <TransactionBreakdownChart showAnnotations={false} />
+                </EuiFlexItem>
+                <EuiFlexItem grow={6}>
+                  <EuiPanel>
+                    <ServiceOverviewDependenciesTable
+                      serviceName={serviceName}
+                    />
+                  </EuiPanel>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiFlexGroup gutterSize="s">
+                <EuiFlexItem grow={4}>
+                  <EuiPanel>
+                    <EuiTitle size="xs">
+                      <h2>
+                        {i18n.translate(
+                          'xpack.apm.serviceOverview.instancesLatencyDistributionChartTitle',
+                          {
+                            defaultMessage: 'Instances latency distribution',
+                          }
+                        )}
+                      </h2>
+                    </EuiTitle>
+                  </EuiPanel>
+                </EuiFlexItem>
+                <EuiFlexItem grow={6}>
+                  <EuiPanel>
+                    <EuiTitle size="xs">
+                      <h2>
+                        {i18n.translate(
+                          'xpack.apm.serviceOverview.instancesTableTitle',
+                          {
+                            defaultMessage: 'Instances',
+                          }
+                        )}
+                      </h2>
+                    </EuiTitle>
+                  </EuiPanel>
                 </EuiFlexItem>
-              )}
-              <EuiFlexItem grow={6}>
-                <EuiPanel>
-                  <ServiceOverviewErrorsTable serviceName={serviceName} />
-                </EuiPanel>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiFlexGroup gutterSize="s">
-              <EuiFlexItem grow={4}>
-                <TransactionBreakdownChart showAnnotations={false} />
-              </EuiFlexItem>
-              <EuiFlexItem grow={6}>
-                <EuiPanel>
-                  <ServiceOverviewDependenciesTable serviceName={serviceName} />
-                </EuiPanel>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiFlexGroup gutterSize="s">
-              <EuiFlexItem grow={4}>
-                <EuiPanel>
-                  <EuiTitle size="xs">
-                    <h2>
-                      {i18n.translate(
-                        'xpack.apm.serviceOverview.instancesLatencyDistributionChartTitle',
-                        {
-                          defaultMessage: 'Instances latency distribution',
-                        }
-                      )}
-                    </h2>
-                  </EuiTitle>
-                </EuiPanel>
-              </EuiFlexItem>
-              <EuiFlexItem grow={6}>
-                <EuiPanel>
-                  <EuiTitle size="xs">
-                    <h2>
-                      {i18n.translate(
-                        'xpack.apm.serviceOverview.instancesTableTitle',
-                        {
-                          defaultMessage: 'Instances',
-                        }
-                      )}
-                    </h2>
-                  </EuiTitle>
-                </EuiPanel>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPage>
-    </ChartPointerEventContextProvider>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPage>
+      </ChartPointerEventContextProvider>
+    </AnnotationsContextProvider>
   );
 }

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

@@ -15,6 +15,8 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { EuiToolTip } from '@elastic/eui';
 import { ValuesType } from 'utility-types';
+import { useLatencyAggregationType } from '../../../../hooks/use_latency_Aggregation_type';
+import { LatencyAggregationType } from '../../../../../common/latency_aggregation_types';
 import {
   asDuration,
   asPercent,
@@ -64,9 +66,39 @@ const StyledTransactionDetailLink = styled(TransactionDetailLink)`
   ${truncate('100%')}
 `;
 
-export function ServiceOverviewTransactionsTable(props: Props) {
-  const { serviceName } = props;
+function getLatencyAggregationTypeLabel(
+  latencyAggregationType?: LatencyAggregationType
+) {
+  switch (latencyAggregationType) {
+    case 'p95': {
+      return i18n.translate(
+        'xpack.apm.serviceOverview.transactionsTableColumnLatency.p95',
+        {
+          defaultMessage: 'Latency (95th)',
+        }
+      );
+    }
+    case 'p99': {
+      return i18n.translate(
+        'xpack.apm.serviceOverview.transactionsTableColumnLatency.p99',
+        {
+          defaultMessage: 'Latency (99th)',
+        }
+      );
+    }
+    default: {
+      return i18n.translate(
+        'xpack.apm.serviceOverview.transactionsTableColumnLatency.avg',
+        {
+          defaultMessage: 'Latency (avg.)',
+        }
+      );
+    }
+  }
+}
 
+export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
+  const latencyAggregationType = useLatencyAggregationType();
   const {
     uiFilters,
     urlParams: { start, end },
@@ -94,7 +126,7 @@ export function ServiceOverviewTransactionsTable(props: Props) {
     },
     status,
   } = useFetcher(() => {
-    if (!start || !end) {
+    if (!start || !end || !latencyAggregationType) {
       return;
     }
 
@@ -112,6 +144,7 @@ export function ServiceOverviewTransactionsTable(props: Props) {
           pageIndex: tableOptions.pageIndex,
           sortField: tableOptions.sort.field,
           sortDirection: tableOptions.sort.direction,
+          latencyAggregationType,
         },
       },
     }).then((response) => {
@@ -135,6 +168,7 @@ export function ServiceOverviewTransactionsTable(props: Props) {
     tableOptions.pageIndex,
     tableOptions.sort.field,
     tableOptions.sort.direction,
+    latencyAggregationType,
   ]);
 
   const {
@@ -170,12 +204,7 @@ export function ServiceOverviewTransactionsTable(props: Props) {
     },
     {
       field: 'latency',
-      name: i18n.translate(
-        'xpack.apm.serviceOverview.transactionsTableColumnLatency',
-        {
-          defaultMessage: 'Latency',
-        }
-      ),
+      name: getLatencyAggregationTypeLabel(latencyAggregationType),
       width: px(unit * 10),
       render: (_, { latency }) => {
         return (

x-pack/plugins/apm/public/components/shared/Links/apm/APMLink.tsx

@@ -37,7 +37,7 @@ export const PERSISTENT_APM_PARAMS: Array<keyof APMQueryParams> = [
  */
 export function useAPMHref(
   path: string,
-  persistentFilters: Array<keyof APMQueryParams> = PERSISTENT_APM_PARAMS
+  persistentFilters: Array<keyof APMQueryParams> = []
 ) {
   const { urlParams } = useUrlParams();
   const { basePath } = useApmPluginContext().core.http;

x-pack/plugins/apm/public/components/shared/Links/apm/TransactionOverviewLink.tsx

@@ -15,6 +15,7 @@ const persistedFilters: Array<keyof APMQueryParams> = [
   'containerId',
   'podName',
   'serviceVersion',
+  'latencyAggregationType',
 ];
 
 export function useTransactionOverviewHref(serviceName: string) {

x-pack/plugins/apm/public/components/shared/Links/apm/service_overview_link.tsx

@@ -9,19 +9,34 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
+import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
+import { pickKeys } from '../../../../../common/utils/pick_keys';
+import { APMQueryParams } from '../url_helpers';
 import { APMLink, APMLinkExtendProps, useAPMHref } from './APMLink';
 
 interface ServiceOverviewLinkProps extends APMLinkExtendProps {
   serviceName: string;
 }
 
+const persistedFilters: Array<keyof APMQueryParams> = [
+  'latencyAggregationType',
+];
+
 export function useServiceOverviewHref(serviceName: string) {
-  return useAPMHref(`/services/${serviceName}/overview`);
+  return useAPMHref(`/services/${serviceName}/overview`, persistedFilters);
 }
 
 export function ServiceOverviewLink({
   serviceName,
   ...rest
 }: ServiceOverviewLinkProps) {
-  return <APMLink path={`/services/${serviceName}/overview`} {...rest} />;
+  const { urlParams } = useUrlParams();
+
+  return (
+    <APMLink
+      path={`/services/${serviceName}/overview`}
+      query={pickKeys(urlParams as APMQueryParams, ...persistedFilters)}
+      {...rest}
+    />
+  );
 }

x-pack/plugins/apm/public/components/shared/Links/url_helpers.ts

@@ -6,6 +6,7 @@
 
 import { History } from 'history';
 import { parse, stringify } from 'query-string';
+import { LatencyAggregationType } from '../../../../common/latency_aggregation_types';
 import { url } from '../../../../../../../src/plugins/kibana_utils/public';
 import { LocalUIFilterName } from '../../../../common/ui_filter';
 
@@ -84,6 +85,7 @@ export type APMQueryParams = {
   refreshInterval?: string | number;
   searchTerm?: string;
   percentile?: 50 | 75 | 90 | 95 | 99;
+  latencyAggregationType?: LatencyAggregationType;
 } & { [key in LocalUIFilterName]?: string };
 
 // forces every value of T[K] to be type: string