[APM] Backends inventory & overview page routes

src/core/types/elasticsearch/search.ts

@@ -39,8 +39,8 @@ type Source = estypes.SearchSourceFilter | boolean | estypes.Fields;
 
 type ValueTypeOfField<T> = T extends Record<string, string | number>
  ? ValuesType<T>
- : T extends string[] | number[]
- ? ValueTypeOfField<ValuesType<T>>
+ : T extends Array<infer U>
+ ? ValueTypeOfField<U>
  : T extends { field: estypes.Field }
  ? T['field']
  : T extends string | number

x-pack/plugins/apm/common/utils/get_offset_in_ms.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import moment from 'moment';
+import { parseInterval } from '../../../../../src/plugins/data/common';
+
+export function getOffsetInMs(start: number, offset?: string) {
+ if (!offset) {
+ return 0;
+ }
+
+ const interval = parseInterval(offset);
+
+ if (!interval) {
+ throw new Error(`Could not parse offset: ${offset}`);
+ }
+
+ const calculatedOffset = start - moment(start).subtract(interval).valueOf();
+
+ return calculatedOffset;
+}

x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_latency_chart.tsx

@@ -0,0 +1,103 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React, { useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
+import { getDurationFormatter } from '../../../../common/utils/formatters';
+import { useApmBackendContext } from '../../../context/apm_backend/use_apm_backend_context';
+import { useUrlParams } from '../../../context/url_params_context/use_url_params';
+import { useComparison } from '../../../hooks/use_comparison';
+import { useFetcher } from '../../../hooks/use_fetcher';
+import { useTimeRange } from '../../../hooks/use_time_range';
+import { Coordinate, TimeSeries } from '../../../../typings/timeseries';
+import { TimeseriesChart } from '../../shared/charts/timeseries_chart';
+import { useTheme } from '../../../hooks/use_theme';
+import {
+ getMaxY,
+ getResponseTimeTickFormatter,
+} from '../../shared/charts/transaction_charts/helper';
+
+export function BackendLatencyChart({ height }: { height: number }) {
+ const { backendName } = useApmBackendContext();
+
+ const theme = useTheme();
+
+ const { start, end } = useTimeRange();
+
+ const {
+ urlParams: { kuery, environment },
+ } = useUrlParams();
+
+ const { offset, comparisonChartTheme } = useComparison();
+
+ const { data, status } = useFetcher(
+ (callApmApi) => {
+ if (!start || !end) {
+ return;
+ }
+
+ return callApmApi({
+ endpoint: 'GET /api/apm/backends/{backendName}/charts/latency',
+ params: {
+ path: {
+ backendName,
+ },
+ query: {
+ start,
+ end,
+ offset,
+ kuery,
+ environment,
+ },
+ },
+ });
+ },
+ [backendName, start, end, offset, kuery, environment]
+ );
+
+ const timeseries = useMemo(() => {
+ const specs: Array<TimeSeries<Coordinate>> = [];
+
+ if (data?.currentTimeseries) {
+ specs.push({
+ data: data.currentTimeseries,
+ type: 'linemark',
+ color: theme.eui.euiColorVis0,
+ title: i18n.translate('xpack.apm.backendLatencyChart.chartTitle', {
+ defaultMessage: 'Latency',
+ }),
+ });
+ }
+
+ if (data?.comparisonTimeseries) {
+ specs.push({
+ data: data.comparisonTimeseries,
+ type: 'area',
+ color: theme.eui.euiColorMediumShade,
+ title: i18n.translate(
+ 'xpack.apm.backendLatencyChart.previousPeriodLabel',
+ { defaultMessage: 'Previous period' }
+ ),
+ });
+ }
+
+ return specs;
+ }, [data, theme.eui.euiColorVis0, theme.eui.euiColorMediumShade]);
+
+ const maxY = getMaxY(timeseries);
+ const latencyFormatter = getDurationFormatter(maxY);
+
+ return (
+ <TimeseriesChart
+ height={height}
+ fetchStatus={status}
+ id="latencyChart"
+ customTheme={comparisonChartTheme}
+ timeseries={timeseries}
+ yLabelFormat={getResponseTimeTickFormatter(latencyFormatter)}
+ />
+ );
+}

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

@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { EuiFlexItem } from '@elastic/eui';
+import { EuiPanel } from '@elastic/eui';
+import { EuiFlexGroup } from '@elastic/eui';
+import React from 'react';
+import { ApmBackendContextProvider } from '../../../context/apm_backend/apm_backend_context';
+import { useBreadcrumb } from '../../../context/breadcrumbs/use_breadcrumb';
+import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context';
+import { useApmParams } from '../../../hooks/use_apm_params';
+import { useApmRouter } from '../../../hooks/use_apm_router';
+import { ApmMainTemplate } from '../../routing/templates/apm_main_template';
+import { SearchBar } from '../../shared/search_bar';
+import { BackendLatencyChart } from './backend_latency_chart';
+import { BackendInventoryTitle } from '../../routing/home';
+
+export function BackendDetailOverview() {
+ const {
+ path: { backendName },
+ query,
+ } = useApmParams('/backends/:backendName/overview');
+
+ const apmRouter = useApmRouter();
+
+ useBreadcrumb([
+ {
+ title: BackendInventoryTitle,
+ href: apmRouter.link('/backends'),
+ },
+ {
+ title: backendName,
+ href: apmRouter.link('/backends/:backendName/overview', {
+ path: { backendName },
+ query,
+ }),
+ },
+ ]);
+
+ return (
+ <ApmMainTemplate pageTitle={backendName}>
+ <ApmBackendContextProvider>
+ <SearchBar showTimeComparison />
+ <ChartPointerEventContextProvider>
+ <EuiFlexGroup direction="column" gutterSize="s">
+ <EuiFlexItem>
+ <EuiPanel hasBorder={true}>
+ <BackendLatencyChart height={200} />
+ </EuiPanel>
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ </ChartPointerEventContextProvider>
+ </ApmBackendContextProvider>
+ </ApmMainTemplate>
+ );
+}

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

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { SearchBar } from '../../shared/search_bar';
+
+export function BackendInventory() {
+ return <SearchBar showTimeComparison />;
+}

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

@@ -15,6 +15,9 @@ import {
 import { i18n } from '@kbn/i18n';
 import { keyBy } from 'lodash';
 import React from 'react';
+import { EuiLink } from '@elastic/eui';
+import { useApmParams } from '../../../../hooks/use_apm_params';
+import { useApmRouter } from '../../../../hooks/use_apm_router';
 import { getNextEnvironmentUrlParam } from '../../../../../common/environment_filter_values';
 import {
  asMillisecondDuration,
@@ -97,13 +100,19 @@ export function ServiceOverviewDependenciesTable({ serviceName }: Props) {
  urlParams: { start, end, environment, comparisonEnabled, comparisonType },
  } = useUrlParams();
 
+ const {
+ query: { rangeFrom, rangeTo, kuery },
+ } = useApmParams('/services/:serviceName/overview');
+
  const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
  start,
  end,
  comparisonEnabled,
  comparisonType,
  });
 
+ const apmRouter = useApmRouter();
+
  const columns: Array<EuiBasicTableColumn<ServiceDependencyPeriods>> = [
  {
  field: 'name',
@@ -138,7 +147,14 @@ export function ServiceOverviewDependenciesTable({ serviceName }: Props) {
  {item.name}
  </ServiceOverviewLink>
  ) : (
- item.name
+ <EuiLink
+ href={apmRouter.link('/backends/:backendName/overview', {
+ path: { backendName: item.name },
+ query: { rangeFrom, rangeTo, kuery, environment },
+ })}
+ >
+ {item.name}
+ </EuiLink>
  )}
  </EuiFlexItem>
  </EuiFlexGroup>

x-pack/plugins/apm/public/components/routing/home/index.tsx

@@ -9,6 +9,8 @@ import { Outlet } from '@kbn/typed-react-router-config';
 import * as t from 'io-ts';
 import React from 'react';
 import { Redirect } from 'react-router-dom';
+import { BackendDetailOverview } from '../../app/backend_detail_overview';
+import { BackendInventory } from '../../app/backend_inventory';
 import { Breadcrumb } from '../../app/breadcrumb';
 import { ServiceInventory } from '../../app/service_inventory';
 import { ServiceMap } from '../../app/service_map';
@@ -41,13 +43,22 @@ export const ServiceInventoryTitle = i18n.translate(
  }
 );
 
+export const BackendInventoryTitle = i18n.translate(
+ 'xpack.apm.views.backendInventory.title',
+ {
+ defaultMessage: 'Backends',
+ }
+);
+
 export const home = {
  path: '/',
  element: <Outlet />,
  params: t.partial({
  query: t.partial({
  rangeFrom: t.string,
  rangeTo: t.string,
+ environment: t.string,
+ kuery: t.string,
  }),
  }),
  children: [
@@ -70,6 +81,26 @@ export const home = {
  }),
  element: <ServiceMap />,
  }),
+ {
+ path: '/backends',
+ element: <Outlet />,
+ children: [
+ {
+ path: '/:backendName/overview',
+ element: <BackendDetailOverview />,
+ params: t.type({
+ path: t.type({
+ backendName: t.string,
+ }),
+ }),
+ },
+ page({
+ path: '/',
+ title: BackendInventoryTitle,
+ element: <BackendInventory />,
+ }),
+ ],
+ },
  {
  path: '/',
  element: <Redirect to="/services" />,

x-pack/plugins/apm/public/components/shared/time_comparison/get_time_range_comparison.test.ts

@@ -57,6 +57,7 @@ describe('getTimeRangeComparison', () => {
  });
  expect(result.comparisonStart).toEqual('2021-01-27T14:45:00.000Z');
  expect(result.comparisonEnd).toEqual('2021-01-27T15:00:00.000Z');
+ expect(result.offset).toEqual('1d');
  });
  });
  describe('when a week before is selected', () => {
@@ -71,6 +72,7 @@ describe('getTimeRangeComparison', () => {
  });
  expect(result.comparisonStart).toEqual('2021-01-21T14:45:00.000Z');
  expect(result.comparisonEnd).toEqual('2021-01-21T15:00:00.000Z');
+ expect(result.offset).toEqual('1w');
  });
  });
  describe('when previous period is selected', () => {
@@ -86,6 +88,7 @@ describe('getTimeRangeComparison', () => {
  expect(result).toEqual({
  comparisonStart: '2021-02-09T14:24:02.174Z',
  comparisonEnd: '2021-02-09T14:40:01.087Z',
+ offset: '958913ms',
  });
  });
  });
@@ -104,6 +107,7 @@ describe('getTimeRangeComparison', () => {
  });
  expect(result.comparisonStart).toEqual('2021-01-19T15:00:00.000Z');
  expect(result.comparisonEnd).toEqual('2021-01-21T15:00:00.000Z');
+ expect(result.offset).toEqual('1w');
  });
  });
  });
@@ -120,6 +124,7 @@ describe('getTimeRangeComparison', () => {
  });
  expect(result.comparisonStart).toEqual('2021-01-02T15:00:00.000Z');
  expect(result.comparisonEnd).toEqual('2021-01-10T15:00:00.000Z');
+ expect(result.offset).toEqual('691200000ms');
  });
 
  it('uses the date difference to calculate the time range - 30 days', () => {
@@ -133,6 +138,7 @@ describe('getTimeRangeComparison', () => {
  });
  expect(result.comparisonStart).toEqual('2020-12-02T15:00:00.000Z');
  expect(result.comparisonEnd).toEqual('2021-01-01T15:00:00.000Z');
+ expect(result.offset).toEqual('2592000000ms');
  });
  });
 });

x-pack/plugins/apm/public/components/shared/time_comparison/get_time_range_comparison.ts

@@ -60,14 +60,17 @@ export function getTimeRangeComparison({
  const endEpoch = endMoment.valueOf();
 
  let diff: number;
+ let offset: string;
 
  switch (comparisonType) {
  case TimeRangeComparisonType.DayBefore:
  diff = oneDayInMilliseconds;
+ offset = '1d';
  break;
 
  case TimeRangeComparisonType.WeekBefore:
  diff = oneWeekInMilliseconds;
+ offset = '1w';
  break;
 
  case TimeRangeComparisonType.PeriodBefore:
@@ -77,6 +80,7 @@ export function getTimeRangeComparison({
  unitOfTime: 'milliseconds',
  precise: true,
  });
+ offset = `${diff}ms`;
  break;
 
  default:
@@ -86,5 +90,6 @@ export function getTimeRangeComparison({
  return {
  comparisonStart: new Date(startEpoch - diff).toISOString(),
  comparisonEnd: new Date(endEpoch - diff).toISOString(),
+ offset,
  };
 }