[APM] Experimental Service Map front end #46497

In the design I'm using the EuiBadge for labels, but we don't have to do that here. I just imagine a background that matches the background of the map and some padding.

formgeist · 2019-09-27T08:51:49Z

And the updated background pattern that looks a little more subtle than the current https://codesandbox.io/s/service-maps-background-zuzlk

smith · 2019-09-27T14:32:37Z

@formgeist

Looks great so far. Wondering if we can add a background on the labels so they don't mix with the arrow lines making them hard to read?

Adding these options for the node style:

      'text-background-color': theme.euiColorLightestShade,
      'text-background-opacity': 1,
      'text-background-padding': theme.paddingSizes.xs,
      'text-background-shape': 'roundrectangle',

additional options are here if you want to suggest more tweaks to the labels: http://js.cytoscape.org/#style/labels

smith · 2019-09-27T15:24:44Z

And the updated background pattern that looks a little more subtle than the current codesandbox.io/s/service-maps-background-zuzlk

Updated in a2346863502.

smith · 2019-09-27T15:25:14Z

@smith Looks great so far. Wondering if we can add a background on the labels so they don't mix with the arrow lines making them hard to read?

Updated in a2346863502.

elasticmachine · 2019-09-27T15:40:51Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

formgeist · 2019-09-27T18:34:59Z

Thanks for the updates @smith - it's really starting to look great 🎉

elasticmachine · 2019-09-30T16:10:08Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-30T19:36:17Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

shaunmcgough · 2019-10-01T15:03:47Z

It's great to see Cytoscape being used here. The work is looking good. Big props from the graph group.

src/dev/license_checker/config.ts

spalger

Renovate changes look good, not sure about adding PSF to the license whitelist but relying on @peterschretlen to authorize

elasticmachine · 2019-10-04T15:57:41Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: e682c488132dc5c8bea229784a1d2b0203c88ed7

mshustov · 2019-10-04T16:02:19Z

src/core/public/mocks.ts

@@ -54,12 +55,13 @@ function createCoreSetupMock() {
 }

 function createCoreStartMock() {
-  const mock: MockedKeys<CoreStart> = {
+  const mock: MockedKeys<LegacyCoreStart> = {


This mock incorrect. injectedMetadata is not exposed to the new platform plugin, but legacy plugins only. We decided to provide it for a while until ConfigService is done #47319

So what should I do if I need to mock injectedVars?

1 Revert this change.
2 Merge master into your branch. getInjectedVar was temporarily exposed from the new platform in #47319 Later we will provide a substitution in #41990

sorenlouv · 2019-10-07T08:39:34Z

x-pack/legacy/plugins/apm/public/components/app/Main/route_config/index.tsx

+      name: RouteName.SINGLE_SERVICE_MAP
+    }
+  );
+}


Any reason '/services/:serviceName/service-map' is added unconditionally but these are not?

That was actually a duplicate from resolving a merge conflict. Fixed in 4f4b094.

sorenlouv · 2019-10-07T08:49:48Z

x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Controls.tsx

+
+  useEffect(() => {
+    if (cy) {
+      cy.on('zoom', event => {


Is this event listener removed again? (to avoid memory leaks)

Thanks for catching this. I forgot to put it there. It's been added in 4f4b094.

I looked at that commit and I don't see anything related (it's reverting a mock change).
What I'd expect is the useEffect body to return a cleanup function that calls cy.off('zoom', handler) or something like it.

Sorry no it was 799b5e9.

Add service map tabs on the main APM screen and for individual services. This is not yet hooked up to work with back-end data, so it always shows the same hard-coded graph. This is experimental, so you must have x-pack.apm.serviceMapEnabled: true in your Kibana config for it to show up. Also add "PSF" to the list of allowed licenses since a new dependency added uses this license (it's on the [green list](https://github.com/elastic/open-source/blob/master/elastic-product-policy.md#green-list).) Fixes elastic#44890 Fixes elastic#44853

elasticmachine · 2019-10-07T14:51:39Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 4f4b094

elasticmachine · 2019-10-07T16:24:32Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 604e313

smith · 2019-10-07T16:28:37Z

@restrry I reverted the change you commented on earlier.

@sqren I updated the things you mentioned.

Thanks!

peterschretlen · 2019-10-07T21:31:07Z

Renovate changes look good, not sure about adding PSF to the license whitelist but relying on @peterschretlen to authorize

@spalger The PSF license is a pre-approved (green-list) license, so we are OK to add it to the whitelist.

Add service map tabs on the main APM screen and for individual services. This is not yet hooked up to work with back-end data, so it always shows the same hard-coded graph. This is experimental, so you must have x-pack.apm.serviceMapEnabled: true in your Kibana config for it to show up. Also add "PSF" to the list of allowed licenses since a new dependency added uses this license (it's on the [green list](https://github.com/elastic/open-source/blob/master/elastic-product-policy.md#green-list).) Fixes elastic#44890 Fixes elastic#44853

Add service map tabs on the main APM screen and for individual services. This is not yet hooked up to work with back-end data, so it always shows the same hard-coded graph. This is experimental, so you must have x-pack.apm.serviceMapEnabled: true in your Kibana config for it to show up. Also add "PSF" to the list of allowed licenses since a new dependency added uses this license (it's on the [green list](https://github.com/elastic/open-source/blob/master/elastic-product-policy.md#green-list).) Fixes #44890 Fixes #44853

smith force-pushed the nls/44853/map branch from 8f1bef6 to 8f08116 Compare September 25, 2019 03:17

smith force-pushed the nls/44853/map branch from 8f08116 to 63938c8 Compare September 25, 2019 16:46

smith force-pushed the nls/44853/map branch from 2a02b6c to b569b56 Compare September 25, 2019 19:22

smith force-pushed the nls/44853/map branch from 040f6ba to 655094a Compare September 26, 2019 16:15

smith force-pushed the nls/44853/map branch from d2665d1 to d01c161 Compare September 26, 2019 21:21

smith force-pushed the nls/44853/map branch from 4349fd4 to b668ed7 Compare September 26, 2019 22:22

smith force-pushed the nls/44853/map branch from c20c4f8 to a234686 Compare September 27, 2019 15:24

smith force-pushed the nls/44853/map branch from a234686 to cf547b3 Compare September 30, 2019 15:53

smith force-pushed the nls/44853/map branch from 6b0b9dc to ee27eff Compare October 1, 2019 16:35

spalger reviewed Oct 3, 2019

View reviewed changes

src/dev/license_checker/config.ts Show resolved Hide resolved

spalger approved these changes Oct 3, 2019

View reviewed changes

spalger requested review from peterschretlen and removed request for peterschretlen October 3, 2019 23:10

smith force-pushed the nls/44853/map branch from 979f167 to e682c48 Compare October 4, 2019 14:45

mshustov suggested changes Oct 4, 2019

View reviewed changes

sorenlouv reviewed Oct 7, 2019

View reviewed changes

smith added 3 commits October 7, 2019 09:25

updates based on feedback

799b5e9

revert mocks change

4f4b094

smith force-pushed the nls/44853/map branch from e682c48 to 4f4b094 Compare October 7, 2019 14:35

rebuild renovate config

604e313

mshustov approved these changes Oct 8, 2019

View reviewed changes

sorenlouv approved these changes Oct 8, 2019

View reviewed changes

smith merged commit 726a84f into elastic:master Oct 8, 2019

smith deleted the nls/44853/map branch October 8, 2019 14:54

sorenlouv added the apm-test-plan-7.5.0 label Oct 10, 2019

smith mentioned this pull request Oct 10, 2019

[7.x] [APM] Experimental Service Map front end (#46497) #47840

Merged

ogupte self-assigned this Oct 22, 2019

This was referenced Oct 22, 2019

[APM] Implement service map data endpoint for UI elastic/apm#159

Closed

[APM] Implement service map data endpoint for UI #48996

Closed

ogupte added the apm:test-plan-done Pull request that was successfully tested during the test plan label Oct 22, 2019

[APM] Experimental Service Map front end #46497

[APM] Experimental Service Map front end #46497

Conversation

smith commented Sep 24, 2019 • edited Loading

elasticmachine commented Sep 24, 2019

💔 Build Failed

elasticmachine commented Sep 25, 2019

💔 Build Failed

elasticmachine commented Sep 25, 2019

💔 Build Failed

elasticmachine commented Sep 25, 2019

💔 Build Failed

elasticmachine commented Sep 25, 2019

💔 Build Failed

elasticmachine commented Sep 26, 2019

💔 Build Failed

elasticmachine commented Sep 26, 2019

💔 Build Failed

elasticmachine commented Sep 26, 2019

💔 Build Failed

elasticmachine commented Sep 26, 2019

💔 Build Failed

elasticmachine commented Sep 26, 2019

💔 Build Failed

elasticmachine commented Sep 26, 2019

💔 Build Failed

formgeist commented Sep 27, 2019

formgeist commented Sep 27, 2019

smith commented Sep 27, 2019 • edited Loading

smith commented Sep 27, 2019

smith commented Sep 27, 2019

elasticmachine commented Sep 27, 2019

💔 Build Failed

formgeist commented Sep 27, 2019

elasticmachine commented Sep 30, 2019

💔 Build Failed

elasticmachine commented Sep 30, 2019

💔 Build Failed

shaunmcgough commented Oct 1, 2019

spalger left a comment

Choose a reason for hiding this comment

elasticmachine commented Oct 4, 2019

💚 Build Succeeded

mshustov Oct 4, 2019

Choose a reason for hiding this comment

smith Oct 4, 2019

Choose a reason for hiding this comment

mshustov Oct 7, 2019 • edited Loading

Choose a reason for hiding this comment

sorenlouv Oct 7, 2019

Choose a reason for hiding this comment

smith Oct 7, 2019 • edited Loading

Choose a reason for hiding this comment

sorenlouv Oct 7, 2019

Choose a reason for hiding this comment

smith Oct 7, 2019 • edited Loading

Choose a reason for hiding this comment

sorenlouv Oct 8, 2019

Choose a reason for hiding this comment

smith Oct 8, 2019

Choose a reason for hiding this comment

elasticmachine commented Oct 7, 2019

💔 Build Failed

elasticmachine commented Oct 7, 2019

💚 Build Succeeded

smith commented Oct 7, 2019

peterschretlen commented Oct 7, 2019

smith commented Sep 24, 2019 •

edited

Loading

smith commented Sep 27, 2019 •

edited

Loading

mshustov Oct 7, 2019 •

edited

Loading

smith Oct 7, 2019 •

edited

Loading

smith Oct 7, 2019 •

edited

Loading