[APM] Updated header icons (#84760) (#86310)

* creating service name header * fixing icons * removing unused api import * fixing some stuff * adding API tests * refactoring some stuff * fixing tests * refactoring some stuff * fixing i18n * reverting * renaming * applying min width * addressing PR comments and adding test * sorting service version * changing sort type to desc * addressing pr comments * changing to show total and not avg * addressing pr comments * addressing pr comments * addressing pr comments Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
elastic · Dec 18, 2020 · 1d97b8a · 1d97b8a
1 parent 76c29c3
commit 1d97b8a
Show file tree

Hide file tree

Showing 23 changed files with 1,423 additions and 6 deletions.
diff --git a/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap b/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap
diff --git a/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts b/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts
@@ -4,10 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+export const CLOUD = 'cloud';
 export const CLOUD_AVAILABILITY_ZONE = 'cloud.availability_zone';
 export const CLOUD_PROVIDER = 'cloud.provider';
 export const CLOUD_REGION = 'cloud.region';
+export const CLOUD_MACHINE_TYPE = 'cloud.machine.type';
 
+export const SERVICE = 'service';
 export const SERVICE_NAME = 'service.name';
 export const SERVICE_ENVIRONMENT = 'service.environment';
 export const SERVICE_FRAMEWORK_NAME = 'service.framework.name';
@@ -19,6 +22,7 @@ export const SERVICE_RUNTIME_VERSION = 'service.runtime.version';
 export const SERVICE_NODE_NAME = 'service.node.name';
 export const SERVICE_VERSION = 'service.version';
 
+export const AGENT = 'agent';
 export const AGENT_NAME = 'agent.name';
 export const AGENT_VERSION = 'agent.version';
 
@@ -102,8 +106,11 @@ export const METRIC_JAVA_GC_TIME = 'jvm.gc.time';
 
 export const LABEL_NAME = 'labels.name';
 
+export const HOST = 'host';
 export const HOST_NAME = 'host.hostname';
+export const CONTAINER = 'container.id';
 export const CONTAINER_ID = 'container.id';
+export const KUBERNETES = 'kubernetes';
 export const POD_NAME = 'kubernetes.pod.name';
 
 export const CLIENT_GEO_COUNTRY_ISO_CODE = 'client.geo.country_iso_code';

diff --git a/x-pack/plugins/apm/common/service_metadata.ts b/x-pack/plugins/apm/common/service_metadata.ts
@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export type ContainerType = 'Kubernetes' | 'Docker' | undefined;
diff --git a/x-pack/plugins/apm/public/components/app/service_details/index.tsx b/x-pack/plugins/apm/public/components/app/service_details/index.tsx
@@ -4,10 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiTitle } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { ApmHeader } from '../../shared/ApmHeader';
+import { ServiceIcons } from './service_icons';
 import { ServiceDetailTabs } from './service_detail_tabs';
 
 interface Props extends RouteComponentProps<{ serviceName: string }> {
@@ -20,9 +21,16 @@ export function ServiceDetails({ match, tab }: Props) {
   return (
     <div>
       <ApmHeader>
-        <EuiTitle>
-          <h1>{serviceName}</h1>
-        </EuiTitle>
+        <EuiFlexGroup alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiTitle>
+              <h1>{serviceName}</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <ServiceIcons serviceName={serviceName} />
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </ApmHeader>
       <ServiceDetailTabs serviceName={serviceName} tab={tab} />
     </div>