[APM] Service overview: Dependencies table

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

@@ -61,6 +61,11 @@ export const SPAN_NAME = 'span.name';
 export const SPAN_ID = 'span.id';
 export const SPAN_DESTINATION_SERVICE_RESOURCE =
   'span.destination.service.resource';
+export const SPAN_DESTINATION_SERVICE_RESPONSE_TIME_COUNT =
+  'span.destination.service.response_time.count';
+
+export const SPAN_DESTINATION_SERVICE_RESPONSE_TIME_SUM =
+  'span.destination.service.response_time.sum.us';
 
 // Parent ID for a transaction or span
 export const PARENT_ID = 'parent.id';

x-pack/plugins/apm/common/utils/formatters/duration.ts

@@ -8,7 +8,7 @@ import { i18n } from '@kbn/i18n';
 import moment from 'moment';
 import { memoize } from 'lodash';
 import { NOT_AVAILABLE_LABEL } from '../../../common/i18n';
-import { asDecimal, asDecimalOrInteger, asInteger } from './formatters';
+import { asDecimalOrInteger, asInteger, asDecimal } from './formatters';
 import { TimeUnit } from './datetime';
 import { Maybe } from '../../../typings/common';
 import { isFiniteNumber } from '../is_finite_number';
@@ -181,7 +181,6 @@ export function asDuration(
   const formatter = getDurationFormatter(value);
   return formatter(value, { defaultValue }).formatted;
 }
-
 /**
  * Convert a microsecond value to decimal milliseconds. Normally we use
  * `asDuration`, but this is used in places like tables where we always want

x-pack/plugins/apm/common/utils/join_by_key/index.test.ts

@@ -101,4 +101,37 @@ describe('joinByKey', () => {
       },
     ]);
   });
+
+  it('uses the custom merge fn to replace items', () => {
+    const joined = joinByKey(
+      [
+        {
+          serviceName: 'opbeans-java',
+          values: ['a'],
+        },
+        {
+          serviceName: 'opbeans-node',
+          values: ['a'],
+        },
+        {
+          serviceName: 'opbeans-node',
+          values: ['b'],
+        },
+        {
+          serviceName: 'opbeans-node',
+          values: ['c'],
+        },
+      ],
+      'serviceName',
+      (a, b) => ({
+        ...a,
+        ...b,
+        values: a.values.concat(b.values),
+      })
+    );
+
+    expect(
+      joined.find((item) => item.serviceName === 'opbeans-node')?.values
+    ).toEqual(['a', 'b', 'c']);
+  });
 });

x-pack/plugins/apm/common/utils/join_by_key/index.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { UnionToIntersection, ValuesType } from 'utility-types';
-import { isEqual } from 'lodash';
+import { isEqual, pull } from 'lodash';
 
 /**
  * Joins a list of records by a given key. Key can be any type of value, from
@@ -23,24 +23,43 @@ import { isEqual } from 'lodash';
 */
 
 type JoinedReturnType<
+  T extends Record<string, any>,
+  U extends UnionToIntersection<T>
+> = Array<
+  Partial<U> &
+    {
+      [k in keyof T]: T[k];
+    }
+>;
+
+export function joinByKey<
   T extends Record<string, any>,
   U extends UnionToIntersection<T>,
   V extends keyof T & keyof U
-> = Array<Partial<U> & Record<V, U[V]>>;
+>(items: T[], key: V): JoinedReturnType<T, U>;
 
 export function joinByKey<
   T extends Record<string, any>,
   U extends UnionToIntersection<T>,
-  V extends keyof T & keyof U
->(items: T[], key: V): JoinedReturnType<T, U, V> {
-  return items.reduce<JoinedReturnType<T, U, V>>((prev, current) => {
+  V extends keyof T & keyof U,
+  W extends JoinedReturnType<T, U>,
+  X extends (a: T, b: T) => ValuesType<W>
+>(items: T[], key: V, mergeFn: X): W;
+
+export function joinByKey(
+  items: Array<Record<string, any>>,
+  key: string,
+  mergeFn: Function = (a: Record<string, any>, b: Record<string, any>) =>
+    Object.assign(a, b)
+) {
+  return items.reduce<Array<Record<string, any>>>((prev, current) => {
     let item = prev.find((prevItem) => isEqual(prevItem[key], current[key]));
 
     if (!item) {
-      item = { ...current } as ValuesType<JoinedReturnType<T, U, V>>;
+      item = { ...current };
       prev.push(item);
     } else {
-      Object.assign(item, current);
+      pull(prev, item).push(mergeFn(item, current));
     }
 
     return prev;

x-pack/plugins/apm/public/components/app/ServiceMap/cytoscape_options.ts

@@ -16,7 +16,7 @@ import {
   ServiceHealthStatus,
 } from '../../../../common/service_health_status';
 import { FETCH_STATUS } from '../../../hooks/use_fetcher';
-import { defaultIcon, iconForNode } from './icons';
+import { iconForNode } from './icons';
 
 export const popoverWidth = 280;
 
@@ -116,9 +116,7 @@ const getStyle = (theme: EuiTheme): cytoscape.Stylesheet[] => {
         'background-color': theme.eui.euiColorGhost,
         // The DefinitelyTyped definitions don't specify that a function can be
         // used here.
-        'background-image': isIE11
-          ? undefined
-          : (el: cytoscape.NodeSingular) => iconForNode(el) ?? defaultIcon,
+        'background-image': (el: cytoscape.NodeSingular) => iconForNode(el),
         'background-height': (el: cytoscape.NodeSingular) =>
           isService(el) ? '60%' : '40%',
         'background-width': (el: cytoscape.NodeSingular) =>

x-pack/plugins/apm/public/components/app/ServiceMap/icons.ts

@@ -10,73 +10,8 @@ import {
   SPAN_SUBTYPE,
   SPAN_TYPE,
 } from '../../../../common/elasticsearch_fieldnames';
-import awsIcon from './icons/aws.svg';
-import cassandraIcon from './icons/cassandra.svg';
-import databaseIcon from './icons/database.svg';
-import defaultIconImport from './icons/default.svg';
-import documentsIcon from './icons/documents.svg';
-import elasticsearchIcon from './icons/elasticsearch.svg';
-import globeIcon from './icons/globe.svg';
-import graphqlIcon from './icons/graphql.svg';
-import grpcIcon from './icons/grpc.svg';
-import handlebarsIcon from './icons/handlebars.svg';
-import kafkaIcon from './icons/kafka.svg';
-import mongodbIcon from './icons/mongodb.svg';
-import mysqlIcon from './icons/mysql.svg';
-import postgresqlIcon from './icons/postgresql.svg';
-import redisIcon from './icons/redis.svg';
-import websocketIcon from './icons/websocket.svg';
-import javaIcon from '../../shared/AgentIcon/icons/java.svg';
 import { getAgentIcon } from '../../shared/AgentIcon/get_agent_icon';
-
-export const defaultIcon = defaultIconImport;
-
-const defaultTypeIcons: { [key: string]: string } = {
-  cache: databaseIcon,
-  db: databaseIcon,
-  ext: globeIcon,
-  external: globeIcon,
-  messaging: documentsIcon,
-  resource: globeIcon,
-};
-
-const typeIcons: { [key: string]: { [key: string]: string } } = {
-  aws: {
-    servicename: awsIcon,
-  },
-  db: {
-    cassandra: cassandraIcon,
-    elasticsearch: elasticsearchIcon,
-    mongodb: mongodbIcon,
-    mysql: mysqlIcon,
-    postgresql: postgresqlIcon,
-    redis: redisIcon,
-  },
-  external: {
-    graphql: graphqlIcon,
-    grpc: grpcIcon,
-    websocket: websocketIcon,
-  },
-  messaging: {
-    jms: javaIcon,
-    kafka: kafkaIcon,
-  },
-  template: {
-    handlebars: handlebarsIcon,
-  },
-};
-
-function getSpanIcon(type?: string, subtype?: string) {
-  if (!type) {
-    return;
-  }
-
-  const types = type ? typeIcons[type] : {};
-  if (subtype && types && subtype in types) {
-    return types[subtype];
-  }
-  return defaultTypeIcons[type] || defaultIcon;
-}
+import { defaultIcon, getSpanIcon } from '../../shared/span_icon/get_span_icon';
 
 // IE 11 does not properly load some SVGs, which causes a runtime error and the
 // map to not work at all. We would prefer to do some kind of feature detection

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

@@ -18,12 +18,11 @@ import { isRumAgentName } from '../../../../common/agent_name';
 import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context';
 import { TransactionBreakdownChart } from '../../shared/charts/transaction_breakdown_chart';
 import { TransactionErrorRateChart } from '../../shared/charts/transaction_error_rate_chart';
-import { ServiceMapLink } from '../../shared/Links/apm/ServiceMapLink';
 import { SearchBar } from '../../shared/search_bar';
 import { ServiceOverviewErrorsTable } from './service_overview_errors_table';
+import { ServiceOverviewDependenciesTable } from './service_overview_dependencies_table';
 import { ServiceOverviewThroughputChart } from './service_overview_throughput_chart';
 import { ServiceOverviewTransactionsTable } from './service_overview_transactions_table';
-import { TableLinkFlexItem } from './table_link_flex_item';
 
 /**
  * The height a chart should be if it's next to a table with 5 rows and a title.
@@ -98,30 +97,7 @@ export function ServiceOverview({
               </EuiFlexItem>
               <EuiFlexItem grow={6}>
                 <EuiPanel>
-                  <EuiFlexGroup>
-                    <EuiFlexItem>
-                      <EuiTitle size="xs">
-                        <h2>
-                          {i18n.translate(
-                            'xpack.apm.serviceOverview.dependenciesTableTitle',
-                            {
-                              defaultMessage: 'Dependencies',
-                            }
-                          )}
-                        </h2>
-                      </EuiTitle>
-                    </EuiFlexItem>
-                    <TableLinkFlexItem>
-                      <ServiceMapLink serviceName={serviceName}>
-                        {i18n.translate(
-                          'xpack.apm.serviceOverview.dependenciesTableLinkText',
-                          {
-                            defaultMessage: 'View service map',
-                          }
-                        )}
-                      </ServiceMapLink>
-                    </TableLinkFlexItem>
-                  </EuiFlexGroup>
+                  <ServiceOverviewDependenciesTable serviceName={serviceName} />
                 </EuiPanel>
               </EuiFlexItem>
             </EuiFlexGroup>

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

@@ -15,12 +15,13 @@ import {
 } from '../../../context/apm_plugin/mock_apm_plugin_context';
 import { MockUrlParamsContextProvider } from '../../../context/url_params_context/mock_url_params_context_provider';
 import * as useDynamicIndexPatternHooks from '../../../hooks/use_dynamic_index_pattern';
-import * as useFetcherHooks from '../../../hooks/use_fetcher';
 import { FETCH_STATUS } from '../../../hooks/use_fetcher';
 import * as useAnnotationsHooks from '../../../context/annotations/use_annotations_context';
 import * as useTransactionBreakdownHooks from '../../shared/charts/transaction_breakdown_chart/use_transaction_breakdown';
 import { renderWithTheme } from '../../../utils/testHelpers';
 import { ServiceOverview } from './';
+import { waitFor } from '@testing-library/dom';
+import * as callApmApi from '../../../services/rest/createCallApmApi';
 
 const KibanaReactContext = createKibanaReactContext({
   usageCollection: { reportUiCounter: () => {} },
@@ -54,7 +55,7 @@ function Wrapper({ children }: { children?: ReactNode }) {
 }
 
 describe('ServiceOverview', () => {
-  it('renders', () => {
+  it('renders', async () => {
     jest
       .spyOn(useAnnotationsHooks, 'useAnnotationsContext')
       .mockReturnValue({ annotations: [] });
@@ -64,18 +65,29 @@ describe('ServiceOverview', () => {
         indexPattern: undefined,
         status: FETCH_STATUS.SUCCESS,
       });
-    jest.spyOn(useFetcherHooks, 'useFetcher').mockReturnValue({
-      data: {
-        items: [],
-        tableOptions: {
-          pageIndex: 0,
-          sort: { direction: 'desc', field: 'test field' },
-        },
-        totalItemCount: 0,
-        throughput: [],
+
+    const calls = {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'GET /api/apm/services/{serviceName}/error_groups': {
+        error_groups: [],
+        total_error_groups: 0,
+      },
+      'GET /api/apm/services/{serviceName}/transactions/groups/overview': {
+        transactionGroups: [],
+        totalTransactionGroups: 0,
+        isAggregationAccurate: true,
       },
-      refetch: () => {},
-      status: FETCH_STATUS.SUCCESS,
+      'GET /api/apm/services/{serviceName}/dependencies': [],
+    };
+
+    jest.spyOn(callApmApi, 'createCallApmApi').mockImplementation(() => {});
+
+    jest.spyOn(callApmApi, 'callApmApi').mockImplementation(({ endpoint }) => {
+      const response = calls[endpoint as keyof typeof calls];
+
+      return response
+        ? Promise.resolve(response)
+        : Promise.reject(`Response for ${endpoint} is not defined`);
     });
     jest
       .spyOn(useTransactionBreakdownHooks, 'useTransactionBreakdown')
@@ -85,10 +97,19 @@ describe('ServiceOverview', () => {
         status: FETCH_STATUS.SUCCESS,
       });
 
-    expect(() =>
-      renderWithTheme(<ServiceOverview serviceName="test service name" />, {
+    const { findAllByText } = renderWithTheme(
+      <ServiceOverview serviceName="test service name" />,
+      {
         wrapper: Wrapper,
-      })
-    ).not.toThrowError();
+      }
+    );
+
+    await waitFor(() =>
+      expect(callApmApi.callApmApi).toHaveBeenCalledTimes(
+        Object.keys(calls).length
+      )
+    );
+
+    expect((await findAllByText('Latency')).length).toBeGreaterThan(0);
   });
 });