fixing icons

elastic · Dec 10, 2020 · 47dd1dd · 47dd1dd
1 parent 4b709ae
commit 47dd1dd
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 14 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/public/components/shared/ApmHeader/service_name_header/cloud_details.tsx b/x-pack/plugins/apm/public/components/shared/ApmHeader/service_name_header/cloud_details.tsx
@@ -18,6 +18,15 @@ export type ServiceDetailsApiResponse = APIReturnType<'GET /api/apm/services/{se
 interface Props {
   serviceDetails: ServiceDetailsApiResponse;
 }
+const icons: Record<string, string> = {
+  gcp: 'logoGCP',
+  aws: 'logoAWS',
+  azure: 'logoAzure',
+};
+
+function getIcon(provider: string) {
+  return icons[provider] || 'cloudSunny';
+}
 
 export function CloudDetails({ serviceDetails }: Props) {
   if (!serviceDetails || !serviceDetails.cloud) {
@@ -26,7 +35,7 @@ export function CloudDetails({ serviceDetails }: Props) {
 
   return (
     <IconPopover
-      icon="cloudSunny"
+      icon={getIcon(serviceDetails.cloud.provider)}
       title={i18n.translate('xpack.apm.serviceNameHeader.cloud', {
         defaultMessage: 'Cloud',
       })}

diff --git a/.../plugins/apm/public/components/shared/ApmHeader/service_name_header/container_details.tsx b/.../plugins/apm/public/components/shared/ApmHeader/service_name_header/container_details.tsx
@@ -19,13 +19,18 @@ interface Props {
 }
 
 export function ContainerDetails({ serviceDetails }: Props) {
-  if (!serviceDetails || !serviceDetails.container || !serviceDetails.host) {
+  if (
+    !serviceDetails ||
+    (!serviceDetails.container && !serviceDetails.kubernetes)
+  ) {
     return null;
   }
 
+  const isKubernetes = !!serviceDetails.kubernetes;
+
   return (
     <IconPopover
-      icon="storage"
+      icon={isKubernetes ? 'logoKubernetes' : 'logoDocker'}
       title={i18n.translate('xpack.apm.serviceNameHeader.container', {
         defaultMessage: 'Container',
       })}
@@ -79,16 +84,24 @@ export function ContainerDetails({ serviceDetails }: Props) {
             />
           </EuiFlexItem>
         )}
-        {/* {serviceDetails.container?.avgNumberInstances && (
-                  <EuiStat
-                    title={serviceDetails.container?.avgNumberInstances}
-                    description={i18n.translate(
-                      'xpack.apm.serviceNameHeader.container.orchestration',
-                      { defaultMessage: 'Orchestration' }
-                    )}
-                    titleSize="xxs"
-                  />
-                )} */}
+        <EuiStat
+          title={
+            isKubernetes
+              ? i18n.translate(
+                  'xpack.apm.serviceNameHeader.container.orchestration.kubernetes',
+                  { defaultMessage: 'Kubernetes' }
+                )
+              : i18n.translate(
+                  'xpack.apm.serviceNameHeader.container.orchestration.docker',
+                  { defaultMessage: 'Docker' }
+                )
+          }
+          description={i18n.translate(
+            'xpack.apm.serviceNameHeader.container.orchestration',
+            { defaultMessage: 'Orchestration' }
+          )}
+          titleSize="xxs"
+        />
       </EuiFlexGroup>
     </IconPopover>
   );

diff --git a/x-pack/plugins/apm/public/components/shared/ApmHeader/service_name_header/index.tsx b/x-pack/plugins/apm/public/components/shared/ApmHeader/service_name_header/index.tsx
@@ -41,7 +41,7 @@ export function ServiceNameHeader({ serviceName }: Props) {
     !serviceDetails && serviceDetailsStatus === FETCH_STATUS.LOADING;
 
   return (
-    <EuiFlexGroup>
+    <EuiFlexGroup alignItems="center">
       <EuiFlexItem grow={false}>
         <EuiTitle>
           <h1>{serviceName}</h1>