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] Service Map Layout #59020

Merged
merged 4 commits into from Mar 4, 2020
Merged

Conversation

@ogupte
Copy link
Contributor

ogupte commented Mar 2, 2020

Addresses #55544:

  • uses the core breadthfirst cytoscape layout
  • rotates elements by -90degrees
  • selects rum nodes as roots
  • implements hover styles to show connected nodes
  • connects nodes with taxi-style edges
  • fixes flash of unstyled cytoscape elements on initial load
  • moves nodes closer to each other
    service-maps-layout-3
@ogupte ogupte requested review from smith and formgeist Mar 2, 2020
@ogupte ogupte requested a review from elastic/apm-ui as a code owner Mar 2, 2020
@formgeist

This comment has been minimized.

Copy link
Contributor

formgeist commented Mar 2, 2020

First of all, this looks amazing @ogupte 🎉 Much better-looking layout for the maps. I've got a few comments and questions;

  • Is it possible that we can decrease the "distance" between each node in the layout? Right now the margin around each node seems big and results in a very zoomed out view at the default level.
  • The hovered highlights look great!
  • The placement of the apm-server in your example, would it be possible to place below the client? I remember we discussed that in the last sync, because having it before the client would be a little confusing.

I would love to see this with another dataset to see how it will display the nodes etc.

Copy link
Contributor

formgeist left a comment

Apart from my comments, I think this is a definite improvement over the existing map layout.

@smith
smith approved these changes Mar 2, 2020
Copy link
Member

smith left a comment

I have some suggestions but nothing blocking. Agree with @formgeist's comments too.

Great work!

tenor-218926653

)
.addParameters({
options: {
// theme: create({

This comment has been minimized.

Copy link
@smith

smith Mar 2, 2020

Member

Remove these comments?

}
];

export const cytoscapeOptions: cytoscape.CytoscapeOptions = {
autoungrabify: true,
boxSelectionEnabled: false,
layout,
// layout,

This comment has been minimized.

Copy link
@smith

smith Mar 2, 2020

Member

Remove this comment?

@@ -75,7 +71,10 @@ const style: cytoscape.Stylesheet[] = [
{
selector: 'edge',
style: {
'curve-style': 'bezier',
// 'curve-style': 'bezier',

This comment has been minimized.

Copy link
@smith

smith Mar 2, 2020

Member

Remove this comment

cy.removeListener('mouseover', 'edge, node', mouseoverHandler);
cy.removeListener('mouseout', 'edge, node', mouseoutHandler);
}
};
}, [cy, serviceName]);
// eslint-disable-next-line react-hooks/exhaustive-deps

This comment has been minimized.

Copy link
@smith

smith Mar 2, 2020

Member

Why are we disabling exhaustive deps here?

This comment has been minimized.

Copy link
@ogupte

ogupte Mar 3, 2020

Author Contributor

i was able to rearrange the code to safely remove this

animationEasing: animationOptions.easing,
animationDuration: animationOptions.duration,
// Rotate nodes from top -> bottom to display left -> right
// @ts-ignore

This comment has been minimized.

Copy link
@smith

smith Mar 2, 2020

Member

You can put a description of why we're ignoring something after the @ts-ignore on the same line comment.

This comment has been minimized.

Copy link
@sqren

sqren Mar 2, 2020

Member

@smith great idea.
What about opening a PR to fix the types and link to that in the comment?

This comment has been minimized.

Copy link
@smith

smith Mar 3, 2020

Member

@sqren I'll just wait until this is merged and open a PR that updates the types and removes the comments that can be removed.

// Set up cytoscape event handlers
useEffect(() => {
const dataHandler: cytoscape.EventHandler = event => {
const dataHandler = useCallback(

This comment has been minimized.

Copy link
@smith

smith Mar 2, 2020

Member

The typing of this with the extra argument is weird now, so I think maybe there should be two functions, one that actually is an EventHandler (that you can type with useCallback<cytoscape.EventHandler> and the one that takes the extra argument that gets wrapped.

It's not a big thing, but I'd rather have more verbose code than confusing types.

function isService(el: cytoscape.NodeSingular) {
return el.data('type') === 'service';
}

const style: cytoscape.Stylesheet[] = [
// @ts-ignore

This comment has been minimized.

Copy link
@smith

smith Mar 2, 2020

Member

If we update to the latest @types/cytoscape some of these will go away. We should. I know visibility is in there as of the latest.

@@ -75,7 +71,10 @@ const style: cytoscape.Stylesheet[] = [
{
selector: 'edge',
style: {
'curve-style': 'bezier',
// 'curve-style': 'bezier',

This comment has been minimized.

Copy link
@smith

smith Mar 2, 2020

Member

Remove comment.

@@ -8,13 +8,17 @@ import { useWindowSize } from 'react-use';

export function useRefHeight(): [

This comment has been minimized.

Copy link
@smith

smith Mar 2, 2020

Member

This probably should be renamed to something like useRefDimensions since it gets height and width now.


const height = ref.current ? windowHeight - topOffset : 0;

return [ref, height];
return [ref, height, width];
}

This comment has been minimized.

Copy link
@sqren

sqren Mar 2, 2020

Member

A quick scan: looks like it would be more clear to return the default value early and the conditionals disappear (untested):

export function useRefHeight(): [
  MutableRefObject<HTMLDivElement | null>,
  number,
  number
] {
  const ref = useRef<HTMLDivElement>(null);

  if (!ref.current) {
    return [ref, 0, 0];
  }

  const windowHeight = useWindowSize().height;
  const { top, width } = ref.current.getBoundingClientRect();
  const height = windowHeight - top;

  return [ref, height, width];
}

Btw what do you think about returning an object similar to how useWindowSize works?

return { ref, height, width };
ogupte added 3 commits Mar 2, 2020
- uses the core breadthfirst cytoscape layout
- rotates elements by -90degrees
- selects rum nodes as roots
- implements hover styles to show connected nodes
- fixes flash of unstyled cytoscape elements on initial load
@ogupte ogupte force-pushed the ogupte:apm-55544-service-map-layout branch from 56153da to e8d955e Mar 3, 2020
@kibanamachine

This comment has been minimized.

Copy link

kibanamachine commented Mar 3, 2020

💚 Build Succeeded

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@sqren
sqren approved these changes Mar 4, 2020
@ogupte ogupte merged commit 5539d69 into elastic:master Mar 4, 2020
54 checks passed
54 checks passed
API integration tests node scripts/functional_tests --config test/api_integration/config.js --bail --debug
Details
Browser tests yarn run grunt test:karma-ci
Details
Build kbn_tp_sample_panel_action yarn build
Details
CLA All commits passed the check
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
Check lockfile symlinks node scripts/check_lockfile_symlinks --quiet
Details
Example functional tests node scripts/functional_tests --config test/examples/config.js --bail --debug
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.ts --bail --debug --kibana-install-dir /dev/shm/workspace/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
Kibana accessibility tests node scripts/functional_tests --debug --bail --kibana-install-dir /dev/shm/workspace/kibana/build/oss/kibana-8.0.0-SNAPSHOT-linux-x86_64 --config test/accessibility/config.ts
Details
Mocha tests node scripts/mocha
Details
Plugin functional tests node scripts/functional_tests --config test/plugin_functional/config.js --bail --debug
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 /dev/shm/workspace/install/kibana-1 --include-tag ciGroup1
Details
X-Pack Chrome Functional tests / Group 10 node scripts/functional_tests --debug --bail --kibana-install-dir /dev/shm/workspace/install/kibana-10 --include-tag ciGroup10
Details
X-Pack Chrome Functional tests / Group 2 node scripts/functional_tests --debug --bail --kibana-install-dir /dev/shm/workspace/install/kibana-2 --include-tag ciGroup2
Details
X-Pack Chrome Functional tests / Group 3 node scripts/functional_tests --debug --bail --kibana-install-dir /dev/shm/workspace/install/kibana-3 --include-tag ciGroup3
Details
X-Pack Chrome Functional tests / Group 4 node scripts/functional_tests --debug --bail --kibana-install-dir /dev/shm/workspace/install/kibana-4 --include-tag ciGroup4
Details
X-Pack Chrome Functional tests / Group 5 node scripts/functional_tests --debug --bail --kibana-install-dir /dev/shm/workspace/install/kibana-5 --include-tag ciGroup5
Details
X-Pack Chrome Functional tests / Group 6 node scripts/functional_tests --debug --bail --kibana-install-dir /dev/shm/workspace/install/kibana-6 --include-tag ciGroup6
Details
X-Pack Chrome Functional tests / Group 7 node scripts/functional_tests --debug --bail --kibana-install-dir /dev/shm/workspace/install/kibana-7 --include-tag ciGroup7
Details
X-Pack Chrome Functional tests / Group 8 node scripts/functional_tests --debug --bail --kibana-install-dir /dev/shm/workspace/install/kibana-8 --include-tag ciGroup8
Details
X-Pack Chrome Functional tests / Group 9 node scripts/functional_tests --debug --bail --kibana-install-dir /dev/shm/workspace/install/kibana-9 --include-tag ciGroup9
Details
X-Pack Jest node scripts/jest --ci --verbose --detectOpenHandles
Details
X-Pack Karma Tests yarn test:karma
Details
X-Pack SIEM cyclic dependency test node legacy/plugins/siem/scripts/check_circular_deps
Details
X-Pack accessibility tests node scripts/functional_tests --debug --bail --kibana-install-dir /dev/shm/workspace/install/kibana --config test/accessibility/config.ts
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
ogupte added a commit to ogupte/kibana that referenced this pull request Mar 4, 2020
* Addresses elastic#55544.
- uses the core breadthfirst cytoscape layout
- rotates elements by -90degrees
- selects rum nodes as roots
- implements hover styles to show connected nodes
- fixes flash of unstyled cytoscape elements on initial load

* PR review feedback

* adds canned response for testing cytoscape layout in storybook

* update dep snapshot for removing cytoscape-dagre
ogupte added a commit that referenced this pull request Mar 4, 2020
* Addresses #55544.
- uses the core breadthfirst cytoscape layout
- rotates elements by -90degrees
- selects rum nodes as roots
- implements hover styles to show connected nodes
- fixes flash of unstyled cytoscape elements on initial load

* PR review feedback

* adds canned response for testing cytoscape layout in storybook

* update dep snapshot for removing cytoscape-dagre
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

5 participants
You can’t perform that action at this time.