Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[APM] Experimental Service Map front end #46497

Merged
merged 4 commits into from Oct 8, 2019

Conversation

@smith
Copy link
Member

commented Sep 24, 2019

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.)

Fixes #44890
Fixes #44853

image

@elasticmachine

This comment has been minimized.

Copy link
Contributor

commented Sep 24, 2019

@smith smith force-pushed the smith:nls/44853/map branch from 8f1bef6 to 8f08116 Sep 25, 2019
@elasticmachine

This comment has been minimized.

Copy link
Contributor

commented Sep 25, 2019

@smith smith force-pushed the smith:nls/44853/map branch from 8f08116 to 63938c8 Sep 25, 2019
@elasticmachine

This comment has been minimized.

Copy link
Contributor

commented Sep 25, 2019

@smith smith force-pushed the smith:nls/44853/map branch from 2a02b6c to b569b56 Sep 25, 2019
@elasticmachine

This comment has been minimized.

Copy link
Contributor

commented Sep 25, 2019

@elasticmachine

This comment has been minimized.

Copy link
Contributor

commented Sep 25, 2019

@smith smith force-pushed the smith:nls/44853/map branch from 040f6ba to 655094a Sep 26, 2019
@elasticmachine

This comment has been minimized.

Copy link
Contributor

commented Sep 26, 2019

@elasticmachine

This comment has been minimized.

Copy link
Contributor

commented Sep 26, 2019

@elasticmachine

This comment has been minimized.

Copy link
Contributor

commented Sep 26, 2019

@smith smith force-pushed the smith:nls/44853/map branch from d2665d1 to d01c161 Sep 26, 2019
@elasticmachine

This comment has been minimized.

Copy link
Contributor

commented Sep 26, 2019

@smith smith force-pushed the smith:nls/44853/map branch from 4349fd4 to b668ed7 Sep 26, 2019
@elasticmachine

This comment has been minimized.

Copy link
Contributor

commented Sep 26, 2019

@elasticmachine

This comment has been minimized.

Copy link
Contributor

commented Sep 26, 2019

@formgeist

This comment has been minimized.

Copy link
Contributor

commented Sep 27, 2019

@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?

Screenshot 2019-09-27 at 10 46 09

Screenshot 2019-09-27 at 10 47 47

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

This comment has been minimized.

Copy link
Contributor

commented Sep 27, 2019

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

@smith

This comment has been minimized.

Copy link
Member Author

commented Sep 27, 2019

@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',

image

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

@smith smith force-pushed the smith:nls/44853/map branch from c20c4f8 to a234686 Sep 27, 2019
@smith

This comment has been minimized.

Copy link
Member Author

commented Sep 27, 2019

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

Updated in a234686.

@smith

This comment has been minimized.

Copy link
Member Author

commented Sep 27, 2019

@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 a234686.

@elasticmachine

This comment has been minimized.

Copy link
Contributor

commented Sep 27, 2019

@formgeist

This comment has been minimized.

Copy link
Contributor

commented Sep 27, 2019

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

@smith smith force-pushed the smith:nls/44853/map branch from a234686 to cf547b3 Sep 30, 2019
@elasticmachine

This comment has been minimized.

Copy link
Contributor

commented Sep 30, 2019

@elasticmachine

This comment has been minimized.

Copy link
Contributor

commented Sep 30, 2019

@shaunmcgough

This comment has been minimized.

Copy link

commented Oct 1, 2019

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

@smith smith force-pushed the smith:nls/44853/map branch from 6b0b9dc to ee27eff Oct 1, 2019
@elasticmachine

This comment has been minimized.

Copy link
Contributor

commented Oct 3, 2019

@smith smith force-pushed the smith:nls/44853/map branch from 19c2b18 to 979f167 Oct 3, 2019
@elasticmachine

This comment has been minimized.

Copy link
Contributor

commented Oct 3, 2019

@spalger
spalger approved these changes Oct 3, 2019
Copy link
Member

left a comment

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

@spalger spalger requested review from peterschretlen and removed request for peterschretlen Oct 3, 2019
@smith smith force-pushed the smith:nls/44853/map branch from 979f167 to e682c48 Oct 4, 2019
@elasticmachine

This comment has been minimized.

Copy link
Contributor

commented Oct 4, 2019

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

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

This comment has been minimized.

Copy link
@restrry

restrry Oct 4, 2019

Member

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

This comment has been minimized.

Copy link
@smith

smith Oct 4, 2019

Author Member

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

This comment has been minimized.

Copy link
@restrry

restrry Oct 7, 2019

Member

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

name: RouteName.SINGLE_SERVICE_MAP
}
);
}

This comment has been minimized.

Copy link
@sqren

sqren Oct 7, 2019

Member

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

This comment has been minimized.

Copy link
@smith

smith Oct 7, 2019

Author Member

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


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

This comment has been minimized.

Copy link
@sqren

sqren Oct 7, 2019

Member

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

This comment has been minimized.

Copy link
@smith

smith Oct 7, 2019

Author Member

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

This comment has been minimized.

Copy link
@sqren

sqren Oct 8, 2019

Member

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.

This comment has been minimized.

Copy link
@smith

smith Oct 8, 2019

Author Member

Sorry no it was 799b5e9.

smith added 3 commits Sep 24, 2019
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 smith force-pushed the smith:nls/44853/map branch from e682c48 to 4f4b094 Oct 7, 2019
@elasticmachine

This comment has been minimized.

Copy link
Contributor

commented Oct 7, 2019

@elasticmachine

This comment has been minimized.

Copy link
Contributor

commented Oct 7, 2019

@smith

This comment has been minimized.

Copy link
Member Author

commented Oct 7, 2019

@restrry I reverted the change you commented on earlier.

@sqren I updated the things you mentioned.

Thanks!

@peterschretlen

This comment has been minimized.

Copy link
Contributor

commented Oct 7, 2019

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.

@restrry
restrry approved these changes Oct 8, 2019
@sqren
sqren approved these changes Oct 8, 2019
@smith smith merged commit 726a84f into elastic:master Oct 8, 2019
52 checks passed
52 checks passed
API integration tests node scripts/functional_tests --config test/api_integration/config.js --bail --debug
Details
Browser tests yarn run grunt test:browser-ci
Details
Build kbn_tp_sample_panel_action yarn build
Details
CLA All commits in pull request signed
Details
Check core API changes node scripts/check_core_api_changes
Details
Check file casing node scripts/check_file_casing --quiet
Details
Check licenses node scripts/check_licenses --dev
Details
Firefox smoke test node scripts/functional_tests --bail --debug --kibana-install-dir /var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/build/oss/kibana-8.0.0-SNAPSHOT-linux-x86_64 --include-tag smoke --config test/functional/config.firefox.js
Details
Functional tests / Group 1 yarn run grunt run:functionalTests_ciGroup1
Details
Functional tests / Group 10 yarn run grunt run:functionalTests_ciGroup10
Details
Functional tests / Group 11 yarn run grunt run:functionalTests_ciGroup11
Details
Functional tests / Group 12 yarn run grunt run:functionalTests_ciGroup12
Details
Functional tests / Group 2 yarn run grunt run:functionalTests_ciGroup2
Details
Functional tests / Group 3 yarn run grunt run:functionalTests_ciGroup3
Details
Functional tests / Group 4 yarn run grunt run:functionalTests_ciGroup4
Details
Functional tests / Group 5 yarn run grunt run:functionalTests_ciGroup5
Details
Functional tests / Group 6 yarn run grunt run:functionalTests_ciGroup6
Details
Functional tests / Group 7 yarn run grunt run:functionalTests_ciGroup7
Details
Functional tests / Group 8 yarn run grunt run:functionalTests_ciGroup8
Details
Functional tests / Group 9 yarn run grunt run:functionalTests_ciGroup9
Details
Internationalization check node scripts/i18n_check --ignore-missing
Details
Interpreter functional tests node scripts/functional_tests --config test/interpreter_functional/config.js --bail --debug --kibana-install-dir /var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/build/oss/kibana-8.0.0-SNAPSHOT-linux-x86_64-1
Details
Jest integration tests yarn run grunt test:jest_integration
Details
Jest tests yarn run grunt test:jest
Details
Mocha tests node scripts/mocha
Details
Plugin functional tests node scripts/functional_tests --config test/plugin_functional/config.js --bail --debug --kibana-install-dir /var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/build/oss/kibana-8.0.0-SNAPSHOT-linux-x86_64-1
Details
Project tests yarn run grunt test:projects
Details
Type check node scripts/type_check
Details
TypeScript - all files belong to a TypeScript project node scripts/check_ts_projects
Details
Verify NOTICE.txt node scripts/notice --validate
Details
Verify dependency versions yarn run grunt verifyDependencyVersions
Details
X-Pack Chrome Functional tests / Group 1 node scripts/functional_tests --debug --bail --kibana-install-dir /var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/install/kibana-1 --include-tag ciGroup1
Details
X-Pack Chrome Functional tests / Group 10 node scripts/functional_tests --debug --bail --kibana-install-dir /var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/install/kibana-5 --include-tag ciGroup10
Details
X-Pack Chrome Functional tests / Group 2 node scripts/functional_tests --debug --bail --kibana-install-dir /var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/install/kibana-2 --include-tag ciGroup2
Details
X-Pack Chrome Functional tests / Group 3 node scripts/functional_tests --debug --bail --kibana-install-dir /var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/install/kibana-3 --include-tag ciGroup3
Details
X-Pack Chrome Functional tests / Group 4 node scripts/functional_tests --debug --bail --kibana-install-dir /var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/install/kibana-4 --include-tag ciGroup4
Details
X-Pack Chrome Functional tests / Group 5 node scripts/functional_tests --debug --bail --kibana-install-dir /var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/install/kibana-5 --include-tag ciGroup5
Details
X-Pack Chrome Functional tests / Group 6 node scripts/functional_tests --debug --bail --kibana-install-dir /var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/install/kibana-1 --include-tag ciGroup6
Details
X-Pack Chrome Functional tests / Group 7 node scripts/functional_tests --debug --bail --kibana-install-dir /var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/install/kibana-2 --include-tag ciGroup7
Details
X-Pack Chrome Functional tests / Group 8 node scripts/functional_tests --debug --bail --kibana-install-dir /var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/install/kibana-3 --include-tag ciGroup8
Details
X-Pack Chrome Functional tests / Group 9 node scripts/functional_tests --debug --bail --kibana-install-dir /var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/install/kibana-4 --include-tag ciGroup9
Details
X-Pack Jest node scripts/jest --ci --verbose
Details
X-Pack Mocha yarn test
Details
X-Pack SIEM cyclic dependency test node legacy/plugins/siem/scripts/check_circular_deps
Details
X-Pack firefox smoke test node scripts/functional_tests --debug --bail --kibana-install-dir /var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/install/kibana-6 --include-tag smoke --config test/functional/config.firefox.js
Details
elasticsearch-ci/docs Build finished.
Details
eslint node scripts/eslint --no-cache
Details
kibana-ci Build finished.
Details
prbot:outdated
prbot:release note labels
prbot:release version labels
sasslint node scripts/sasslint
Details
@smith smith deleted the smith:nls/44853/map branch Oct 8, 2019
smith added a commit to smith/kibana that referenced this pull request Oct 10, 2019
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
smith added a commit that referenced this pull request Oct 10, 2019
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
9 participants
You can’t perform that action at this time.