Update icon logic

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

@@ -14,15 +14,7 @@ import { AgentName } from '../typings/es_schemas/ui/fields/agent';
  * AGENT_NAMES array.
  */
 
-export const AGENT_NAMES: AgentName[] = [
-  'dotnet',
-  'go',
-  'java',
-  'js-base',
-  'nodejs',
-  'python',
-  'ruby',
-  'rum-js',
+export const OPEN_TELEMETRY_AGENT_NAMES: AgentName[] = [
   'otlp',
   'opentelemetry/cpp',
   'opentelemetry/dotnet',
@@ -36,11 +28,23 @@ export const AGENT_NAMES: AgentName[] = [
   'opentelemetry/webjs',
 ];
 
-export const RUM_AGENTS = ['js-base', 'rum-js'];
+export const AGENT_NAMES: AgentName[] = [
+  'dotnet',
+  'go',
+  'java',
+  'js-base',
+  'nodejs',
+  'python',
+  'ruby',
+  'rum-js',
+  ...OPEN_TELEMETRY_AGENT_NAMES,
+];
+
+export const RUM_AGENTS = ['js-base', 'rum-js', 'opentelemetry/webjs'];
 
 export function isRumAgentName(
   agentName?: string
-): agentName is 'js-base' | 'rum-js' {
+): agentName is 'js-base' | 'rum-js' | 'opentelemetry/webjs' {
   return RUM_AGENTS.includes(agentName!);
 }
 
@@ -49,35 +53,3 @@ export function isJavaAgentName(
 ): agentName is 'java' {
   return agentName === 'java';
 }
-
-/**
- * "Normalizes" and agent name by:
- *
- * * Converting to lowercase
- * * Converting "rum-js" to "js-base"
- * * Converting OpenTelemetry agent names to "our" agent names
- *
- * This helps dealing with some older agent versions
- */
-export function getNormalizedAgentName(agentName?: string) {
-  let newName = agentName && agentName.toLowerCase();
-
-  if (isRumAgentName(newName) || newName === 'opentelemetry/webjs') {
-    newName = 'js-base';
-  }
-
-  if (newName?.startsWith('opentelemetry/')) {
-    newName = newName?.replace('opentelemetry/', '');
-  }
-
-  // OpenTelemetry implementations that do not report their agent name can be
-  // reported as "otlp"
-  //
-  // OpenTelemetry alse supports Erlang and C++ but we don't so just use the
-  // OpenTelemetry icon for those.
-  if (newName === 'cpp' || newName === 'erlang' || newName === 'otlp') {
-    newName = 'opentelemetry/unknown';
-  }
-
-  return newName;
-}

x-pack/plugins/apm/public/components/shared/AgentIcon/get_agent_icon.test.ts

@@ -0,0 +1,42 @@
+/*
+ * 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 { getAgentIconKey } from './get_agent_icon';
+
+const examples = {
+  DotNet: 'dotnet', // Test for case sensitivity
+  dotnet: 'dotnet',
+  go: 'go',
+  java: 'java',
+  'js-base': 'rum',
+  nodejs: 'nodejs',
+  'opentelemetry/cpp': 'opentelemetry',
+  'opentelemetry/dotnet': 'dotnet',
+  'opentelemetry/erlang': 'opentelemetry',
+  'opentelemetry/go': 'go',
+  'opentelemetry/java': 'java',
+  'opentelemetry/nodejs': 'nodejs',
+  'opentelemetry/php': 'php',
+  'opentelemetry/python': 'python',
+  'opentelemetry/ruby': 'ruby',
+  'opentelemetry/webjs': 'rum',
+  otlp: 'opentelemetry',
+  php: 'php',
+  python: 'python',
+  ruby: 'ruby',
+  'rum-js': 'rum',
+  'something else': undefined,
+};
+
+describe('getAgentIconKey', () => {
+  Object.entries(examples).forEach(([key, value]) => {
+    describe(`with ${key}`, () => {
+      it(`returns ${value}`, () => {
+        expect(getAgentIconKey(key)).toEqual(value);
+      });
+    });
+  });
+});

x-pack/plugins/apm/public/components/shared/AgentIcon/get_agent_icon.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { getNormalizedAgentName } from '../../../../common/agent_name';
+import { RUM_AGENTS } from '../../../../common/agent_name';
 import dotNetIcon from './icons/dot-net.svg';
 import goIcon from './icons/go.svg';
 import javaIcon from './icons/java.svg';
@@ -19,15 +19,42 @@ const agentIcons: { [key: string]: string } = {
   dotnet: dotNetIcon,
   go: goIcon,
   java: javaIcon,
-  'js-base': rumJsIcon,
   nodejs: nodeJsIcon,
-  'opentelemetry/unknown': openTelemetryIcon,
+  opentelemetry: openTelemetryIcon,
   php: phpIcon,
   python: pythonIcon,
   ruby: rubyIcon,
+  rum: rumJsIcon,
 };
 
+// This only needs to be exported for testing purposes, since we stub the SVG
+// import values in test.
+export function getAgentIconKey(agentName: string) {
+  // Ignore case
+  const lowercasedAgentName = agentName.toLowerCase();
+
+  // RUM agent names
+  if ([...RUM_AGENTS].includes(lowercasedAgentName)) {
+    return 'rum';
+  }
+
+  // Remove "opentelemetry/" prefix
+  const agentNameWithoutPrefix = lowercasedAgentName.replace(
+    /^opentelemetry\//,
+    ''
+  );
+
+  // OpenTelemetry-only agents
+  if (['cpp', 'erlang', 'otlp'].includes(agentNameWithoutPrefix)) {
+    return 'opentelemetry';
+  }
+
+  if (Object.keys(agentIcons).includes(agentNameWithoutPrefix)) {
+    return agentNameWithoutPrefix;
+  }
+}
+
 export function getAgentIcon(agentName?: string) {
-  const normalizedAgentName = getNormalizedAgentName(agentName);
-  return normalizedAgentName && agentIcons[normalizedAgentName];
+  const key = agentName && getAgentIconKey(agentName);
+  return key && agentIcons[key];
 }