[APM] Service inventory redesign

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/getSeverity.test.ts → x-pack/plugins/apm/common/anomaly_detection.test.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { getSeverity, severity } from './getSeverity';
+import { getSeverity, Severity } from './anomaly_detection';
 
 describe('getSeverity', () => {
   describe('when score is undefined', () => {
@@ -15,25 +15,25 @@ describe('getSeverity', () => {
 
   describe('when score < 25', () => {
     it('returns warning', () => {
-      expect(getSeverity(10)).toEqual(severity.warning);
+      expect(getSeverity(10)).toEqual(Severity.warning);
     });
   });
 
   describe('when score is between 25 and 50', () => {
     it('returns minor', () => {
-      expect(getSeverity(40)).toEqual(severity.minor);
+      expect(getSeverity(40)).toEqual(Severity.minor);
     });
   });
 
   describe('when score is between 50 and 75', () => {
     it('returns major', () => {
-      expect(getSeverity(60)).toEqual(severity.major);
+      expect(getSeverity(60)).toEqual(Severity.major);
     });
   });
 
   describe('when score is 75 or more', () => {
     it('returns critical', () => {
-      expect(getSeverity(100)).toEqual(severity.critical);
+      expect(getSeverity(100)).toEqual(Severity.critical);
     });
   });
 });

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

@@ -5,6 +5,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { EuiTheme } from '../../../legacy/common/eui_styled_components';
 
 export interface ServiceAnomalyStats {
   transactionType?: string;
@@ -13,6 +14,89 @@ export interface ServiceAnomalyStats {
   jobId?: string;
 }
 
+export enum Severity {
+  critical = 'critical',
+  major = 'major',
+  minor = 'minor',
+  warning = 'warning',
+}
+
+// TODO: Replace with `getSeverity` from:
+// https://github.com/elastic/kibana/blob/0f964f66916480f2de1f4b633e5afafc08cf62a0/x-pack/plugins/ml/common/util/anomaly_utils.ts#L129
+export function getSeverity(score?: number) {
+  if (typeof score !== 'number') {
+    return undefined;
+  } else if (score < 25) {
+    return Severity.warning;
+  } else if (score >= 25 && score < 50) {
+    return Severity.minor;
+  } else if (score >= 50 && score < 75) {
+    return Severity.major;
+  } else if (score >= 75) {
+    return Severity.critical;
+  } else {
+    return undefined;
+  }
+}
+
+export function getSeverityColor(theme: EuiTheme, severity?: Severity) {
+  switch (severity) {
+    case Severity.warning:
+      return theme.eui.euiColorVis0;
+    case Severity.minor:
+    case Severity.major:
+      return theme.eui.euiColorVis5;
+    case Severity.critical:
+      return theme.eui.euiColorVis9;
+    default:
+      return;
+  }
+}
+
+export function getSeverityLabel(severity?: Severity) {
+  let label: string = '';
+
+  switch (severity) {
+    case Severity.critical:
+      label = i18n.translate(
+        'xpack.apm.servicesTable.serviceHealthStatus.critical',
+        {
+          defaultMessage: 'Critical',
+        }
+      );
+      break;
+
+    case Severity.major:
+    case Severity.minor:
+      label = i18n.translate(
+        'xpack.apm.servicesTable.serviceHealthStatus.warning',
+        {
+          defaultMessage: 'Warning',
+        }
+      );
+      break;
+
+    case Severity.warning:
+      label = i18n.translate(
+        'xpack.apm.servicesTable.serviceHealthStatus.healthy',
+        {
+          defaultMessage: 'Healthy',
+        }
+      );
+      break;
+
+    default:
+      label = i18n.translate(
+        'xpack.apm.servicesTable.serviceHealthStatus.unknown',
+        {
+          defaultMessage: 'Unknown',
+        }
+      );
+      break;
+  }
+  return label;
+}
+
 export const ML_ERRORS = {
   INVALID_LICENSE: i18n.translate(
     'xpack.apm.anomaly_detection.error.invalid_license',

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

@@ -0,0 +1,26 @@
+/*
+ * 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 * as t from 'io-ts';
+import { fold } from 'fp-ts/lib/Either';
+import { pipe } from 'fp-ts/lib/pipeable';
+
+import { identity } from 'fp-ts/lib/function';
+import { throwErrors } from '../../../infra/common/runtime_types';
+
+export const decodeOrThrow = <A>(
+  runtimeType: t.Type<A, any, any>,
+  inputValue: any
+): A =>
+  pipe(
+    runtimeType.decode(inputValue),
+    fold(
+      throwErrors((error) => {
+        throw new Error(error);
+      }),
+      identity
+    )
+  );

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/AnomalyDetection.tsx

@@ -18,10 +18,13 @@ import { useTheme } from '../../../../hooks/useTheme';
 import { fontSize, px } from '../../../../style/variables';
 import { asInteger, asDuration } from '../../../../utils/formatters';
 import { MLJobLink } from '../../../shared/Links/MachineLearningLinks/MLJobLink';
-import { getSeverityColor, popoverWidth } from '../cytoscapeOptions';
+import { popoverWidth } from '../cytoscapeOptions';
 import { TRANSACTION_REQUEST } from '../../../../../common/transaction_types';
-import { ServiceAnomalyStats } from '../../../../../common/anomaly_detection';
-import { getSeverity } from './getSeverity';
+import {
+  getSeverity,
+  getSeverityColor,
+  ServiceAnomalyStats,
+} from '../../../../../common/anomaly_detection';
 
 const HealthStatusTitle = styled(EuiTitle)`
   display: inline;

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

@@ -11,25 +11,15 @@ import {
 } from '../../../../common/elasticsearch_fieldnames';
 import { EuiTheme } from '../../../../../observability/public';
 import { defaultIcon, iconForNode } from './icons';
-import { ServiceAnomalyStats } from '../../../../common/anomaly_detection';
-import { severity, getSeverity } from './Popover/getSeverity';
+import {
+  getSeverity,
+  getSeverityColor,
+  ServiceAnomalyStats,
+  Severity,
+} from '../../../../common/anomaly_detection';
 
 export const popoverWidth = 280;
 
-export function getSeverityColor(theme: EuiTheme, nodeSeverity?: string) {
-  switch (nodeSeverity) {
-    case severity.warning:
-      return theme.eui.euiColorVis0;
-    case severity.minor:
-    case severity.major:
-      return theme.eui.euiColorVis5;
-    case severity.critical:
-      return theme.eui.euiColorVis9;
-    default:
-      return;
-  }
-}
-
 function getNodeSeverity(el: cytoscape.NodeSingular) {
   const serviceAnomalyStats: ServiceAnomalyStats | undefined = el.data(
     'serviceAnomalyStats'
@@ -60,7 +50,7 @@ const getBorderStyle: cytoscape.Css.MapperFunction<
   cytoscape.Css.LineStyle
 > = (el: cytoscape.NodeSingular) => {
   const nodeSeverity = getNodeSeverity(el);
-  if (nodeSeverity === severity.critical) {
+  if (nodeSeverity === Severity.critical) {
     return 'double';
   } else {
     return 'solid';
@@ -70,9 +60,9 @@ const getBorderStyle: cytoscape.Css.MapperFunction<
 function getBorderWidth(el: cytoscape.NodeSingular) {
   const nodeSeverity = getNodeSeverity(el);
 
-  if (nodeSeverity === severity.minor || nodeSeverity === severity.major) {
+  if (nodeSeverity === Severity.minor || nodeSeverity === Severity.major) {
     return 4;
-  } else if (nodeSeverity === severity.critical) {
+  } else if (nodeSeverity === Severity.critical) {
     return 8;
   } else {
     return 4;

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

@@ -5,37 +5,29 @@
  */
 
 import cytoscape from 'cytoscape';
-import { getNormalizedAgentName } from '../../../../common/agent_name';
 import {
   AGENT_NAME,
   SPAN_SUBTYPE,
   SPAN_TYPE,
 } from '../../../../common/elasticsearch_fieldnames';
 import awsIcon from './icons/aws.svg';
 import cassandraIcon from './icons/cassandra.svg';
-import darkIcon from './icons/dark.svg';
 import databaseIcon from './icons/database.svg';
 import defaultIconImport from './icons/default.svg';
 import documentsIcon from './icons/documents.svg';
-import dotNetIcon from './icons/dot-net.svg';
 import elasticsearchIcon from './icons/elasticsearch.svg';
 import globeIcon from './icons/globe.svg';
-import goIcon from './icons/go.svg';
 import graphqlIcon from './icons/graphql.svg';
 import grpcIcon from './icons/grpc.svg';
 import handlebarsIcon from './icons/handlebars.svg';
-import javaIcon from './icons/java.svg';
 import kafkaIcon from './icons/kafka.svg';
 import mongodbIcon from './icons/mongodb.svg';
 import mysqlIcon from './icons/mysql.svg';
-import nodeJsIcon from './icons/nodejs.svg';
-import phpIcon from './icons/php.svg';
 import postgresqlIcon from './icons/postgresql.svg';
-import pythonIcon from './icons/python.svg';
 import redisIcon from './icons/redis.svg';
-import rubyIcon from './icons/ruby.svg';
-import rumJsIcon from './icons/rumjs.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;
 
@@ -74,23 +66,6 @@ const typeIcons: { [key: string]: { [key: string]: string } } = {
   },
 };
 
-const agentIcons: { [key: string]: string } = {
-  dark: darkIcon,
-  dotnet: dotNetIcon,
-  go: goIcon,
-  java: javaIcon,
-  'js-base': rumJsIcon,
-  nodejs: nodeJsIcon,
-  php: phpIcon,
-  python: pythonIcon,
-  ruby: rubyIcon,
-};
-
-function getAgentIcon(agentName?: string) {
-  const normalizedAgentName = getNormalizedAgentName(agentName);
-  return normalizedAgentName && agentIcons[normalizedAgentName];
-}
-
 function getSpanIcon(type?: string, subtype?: string) {
   if (!type) {
     return;

x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/HealthBadge.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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 React from 'react';
+import { EuiBadge } from '@elastic/eui';
+import {
+  getSeverityColor,
+  getSeverityLabel,
+  Severity,
+} from '../../../../../common/anomaly_detection';
+import { useTheme } from '../../../../hooks/useTheme';
+
+export function HealthBadge({ severity }: { severity?: Severity }) {
+  const theme = useTheme();
+
+  const unknownColor = theme.eui.euiColorLightShade;
+
+  return (
+    <EuiBadge color={getSeverityColor(theme, severity) ?? unknownColor}>
+      {getSeverityLabel(severity)}
+    </EuiBadge>
+  );
+}