new tab stuff

elastic · Sep 25, 2019 · 040f6ba · 040f6ba
1 parent b569b56
commit 040f6ba
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 5 deletions.
diff --git a/x-pack/legacy/plugins/apm/public/components/app/Main/route_config/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/Main/route_config/index.tsx
@@ -124,6 +124,16 @@ export const routes: BreadcrumbRoute[] = [
     }),
     name: RouteName.METRICS
   },
+  // service map
+  {
+    exact: true,
+    path: '/services/:serviceName/service-map',
+    component: () => <ServiceDetails tab="service-map" />,
+    breadcrumb: i18n.translate('xpack.apm.breadcrumb.serviceMapTitle', {
+      defaultMessage: 'Service Map'
+    }),
+    name: RouteName.SINGLE_SERVICE_MAP
+  },
   {
     exact: true,
     path: '/services/:serviceName/transactions/view',

diff --git a/x-pack/legacy/plugins/apm/public/components/app/Main/route_config/route_names.tsx b/x-pack/legacy/plugins/apm/public/components/app/Main/route_config/route_names.tsx
@@ -8,6 +8,7 @@ export enum RouteName {
   HOME = 'home',
   SERVICES = 'services',
   SERVICE_MAP = 'service-map',
+  SINGLE_SERVICE_MAP = 'single-service-map',
   TRACES = 'traces',
   SERVICE = 'service',
   TRANSACTIONS = 'transactions',

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx
@@ -18,9 +18,11 @@ import { useUrlParams } from '../../../hooks/useUrlParams';
 import { TransactionOverviewLink } from '../../shared/Links/apm/TransactionOverviewLink';
 import { ErrorOverviewLink } from '../../shared/Links/apm/ErrorOverviewLink';
 import { MetricOverviewLink } from '../../shared/Links/apm/MetricOverviewLink';
+import { ServiceMap } from '../ServiceMap';
+import { ServiceMapLink } from '../../shared/Links/apm/ServiceMapLink';
 
 interface Props {
-  tab: 'transactions' | 'errors' | 'metrics';
+  tab: 'transactions' | 'errors' | 'metrics' | 'service-map';
 }
 
 export function ServiceDetailTabs({ tab }: Props) {
@@ -86,6 +88,20 @@ export function ServiceDetailTabs({ tab }: Props) {
     tabs.push(metricsTab);
   }
 
+  const serviceMapTab = {
+    link: (
+      <ServiceMapLink serviceName={serviceName}>
+        {i18n.translate('xpack.apm.home.serviceMapTabLabel', {
+          defaultMessage: 'Service Map'
+        })}
+      </ServiceMapLink>
+    ),
+    render: () => <ServiceMap serviceName={serviceName} />,
+    name: 'service-map'
+  };
+
+  tabs.push(serviceMapTab);
+
   const selectedTab = tabs.find(serviceTab => serviceTab.name === tab);
 
   return (

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.tsx
@@ -62,7 +62,10 @@ const initialCytoscapeOptions: cytoscape.CytoscapeOptions = {
         'background-image-opacity': 0.8,
         'background-height': '40%',
         'background-width': '40%',
-        'border-color': theme.euiColorMediumShade,
+        'border-color': (el: cytoscape.NodeSingular) =>
+          el.hasClass('primary')
+            ? theme.euiColorSecondary
+            : theme.euiColorMediumShade,
         'border-width': 2,
         color: theme.textColors.default,
         // FIXME: this doesn't work for some reason; string too long?
@@ -103,7 +106,11 @@ function runLayout(cy: cytoscape.Core) {
   });
 }
 
-export function ServiceMap() {
+interface ServiceMapProps {
+  serviceName?: string;
+}
+
+export function ServiceMap({ serviceName }: ServiceMapProps) {
   const [ref, cy] = useCytoscape(initialCytoscapeOptions);
   const {
     urlParams: { start, end }
@@ -129,6 +136,13 @@ export function ServiceMap() {
   useEffect(() => {
     if (cy) {
       cy.on('data', event => {
+        // Hack to make the first thing in the array "primary" just to show off color if we're using an individual item
+        if (cy.nodes().length > 0) {
+          cy.nodes()
+            .first()
+            .addClass('primary');
+        }
+
         if (event.cy.elements().length > 0) {
           runLayout(event.cy);
         }

diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Links/apm/ServiceMapLink.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Links/apm/ServiceMapLink.tsx
@@ -12,8 +12,15 @@
 import React from 'react';
 import { APMLink, APMLinkExtendProps } from './APMLink';
 
-const ServiceMapLink = (props: APMLinkExtendProps) => {
-  return <APMLink path="/service-map" {...props} />;
+interface ServiceMapLinkProps extends APMLinkExtendProps {
+  serviceName?: string;
+}
+
+const ServiceMapLink = ({ serviceName, ...rest }: ServiceMapLinkProps) => {
+  const path = serviceName
+    ? `/services/${serviceName}/service-map`
+    : '/service-map';
+  return <APMLink path={path} {...rest} />;
 };
 
 export { ServiceMapLink };
diff --git a/x-pack/legacy/plugins/apm/public/context/UrlParamsContext/helpers.ts b/x-pack/legacy/plugins/apm/public/context/UrlParamsContext/helpers.ts
@@ -82,6 +82,11 @@ export function getPathParams(pathname: string = '') {
             processorEvent: 'metric',
             serviceName
           };
+        case 'service-map':
+          return {
+            processorEvent: 'service-map',
+            serviceName
+          };
         default:
           return {
             processorEvent: 'transaction'