[APM] Service maps layout enhancements #76481

ogupte · 2020-09-02T09:05:52Z

Closes #71770 for APM service maps by replacing breadthfirst layout with one from the cytoscape-dagre extension. Also replaces the taxi edges with approximated cubic unbundled-bezier edges. Finally, this adds the ability to drag individual nodes around the service map. Also fixes storybook anomaly score generation and better utilizes available vertical space in storybook.

Drag and drop nodes:

…e screen space

…ayout with one from the cytoscape-dagre extension. Also replaces the taxi edges with cubic bezier edges. Finally, this adds the ability to drag individual nodes around the service map.

elasticmachine · 2020-09-02T09:05:57Z

Pinging @elastic/apm-ui (Team:apm)

sorenlouv · 2020-09-02T09:29:48Z

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

@@ -71,13 +71,15 @@ export function Popover({ focusedServiceName }: PopoverProps) {
      cy.on('select', 'node', selectHandler);
      cy.on('unselect', 'node', deselect);
      cy.on('data viewport', deselect);
+      cy.on('drag', 'node', deselect);


Will dragging cause the popover to show for a brief period of time? Or will it not be displayed at all?

Node dragging doesn't trigger the select event, so it won't display the popover at all.

sorenlouv · 2020-09-02T09:30:42Z

x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx

@@ -330,7 +328,7 @@ storiesOf('app/ServiceMap/Cytoscape', module)
          },
        },
      ];
-      return <Cytoscape elements={elements} height={600} width={1340} />;
+      return <Cytoscape elements={elements} height={600} />;


Why did we hardcode the width in the first place? And why is it no longer needed? (same question about height)

oh, this is for storybook. Then it's not a big deal 👍

Why did we hardcode the width in the first place? And why is it no longer needed? (same question about height)

The width was needed to define the boundingBox of the previous layout. This option isn't necessary with the new layout, so i was able to remove it. height is still necessary to set the root div height (which is always full width).

sorenlouv · 2020-09-02T10:18:17Z

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

-    x: x * cosθ - y * sinθ,
-    y: x * sinθ + y * cosθ,
-  };
-}


No more custom calculations? Feels good!

Yeah the new layout supports left->right rank direction out of the box!

sorenlouv · 2020-09-02T10:19:30Z

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

+      -alpha * y * costheta,
+      alpha * y * costheta,
+    ]);
+    edge.style('control-point-weights', [alpha, 1 - alpha]);


Can you add a comment to this section what this is doing?

sorenlouv

Super excited about this! 👍

sorenlouv · 2020-09-02T10:30:57Z

@ogupte can you add an screen capture where you demo the dragging functionality?

formgeist · 2020-09-02T11:27:17Z

The dragging vs. click actually works quite flawlessly. Looking really good

…e extension - Adds attribution for `applyCubicBezierStyles`

spalger

Good catch, LGTM!

spalger · 2020-09-02T21:41:30Z

src/dev/notice/generate_notice_from_source.ts

@@ -41,7 +41,7 @@ interface Options {
 * into the repository.
 */
 export async function generateNoticeFromSource({ productName, directory, log }: Options) {
-  const globs = ['**/*.{js,less,css,ts}'];
+  const globs = ['**/*.{js,less,css,ts,tsx}'];


kibanamachine · 2020-09-03T02:23:21Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 39420aa

Build metrics

@kbn/optimizer bundle module count

id	value	diff	baseline
apm	1236	+289	947

async chunks size

id	value	diff	baseline
apm	4.9MB	+160.9KB	4.7MB

distributable file count

id	value	diff	baseline
total	45608	+77	45531

History

💚 Build #72080 succeeded 20daa20
💚 Build #71812 succeeded cba22a8

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

* Fixes storybook anomaly score generation and better utilizes available screen space * Closes elastic#71770 for APM service maps by replacing breadthfirst layout with one from the cytoscape-dagre extension. Also replaces the taxi edges with cubic bezier edges. Finally, this adds the ability to drag individual nodes around the service map. * Removes unused code * removes commented line of code * - Adds ability for scripts/notice.js to check files with the .tsx file extension - Adds attribution for `applyCubicBezierStyles` * Refine comment text and MIT license url

* Fixes storybook anomaly score generation and better utilizes available screen space * Closes #71770 for APM service maps by replacing breadthfirst layout with one from the cytoscape-dagre extension. Also replaces the taxi edges with cubic bezier edges. Finally, this adds the ability to drag individual nodes around the service map. * Removes unused code * removes commented line of code * - Adds ability for scripts/notice.js to check files with the .tsx file extension - Adds attribution for `applyCubicBezierStyles` * Refine comment text and MIT license url

…nes/processors-forms-k-s * 'master' of github.com:elastic/kibana: (216 commits) [Ingest Manager] Split Registry errors into Connection & Response (elastic#76558) [Security Solution] add an excess validation instead of the exact match (elastic#76472) Introduce TS incremental builds & move src/test_utils to TS project (elastic#76082) fix bad merge (elastic#76629) [Newsfeed] Ensure the version format when calling the API (elastic#76381) remove server_extensions mixin (elastic#76606) Remove legacy applications and legacy mode (elastic#75987) [Discover] Fix sidebar element focus behavior when adding / removing columns (elastic#75749) Replace FetchOptions with ISearchOptions (elastic#76538) Move streams utils to the core (elastic#76397) [Ingest Manager] Wording & linking improvements (elastic#76284) remove legacy kibana plugin (elastic#76064) [Form lib] Fix regression on field not being validated after reset to its default value. (elastic#76379) Legacy SO import: Fix bug causing multiple overrides to only show the last confirm modal (elastic#76482) [APM] Service maps layout enhancements (elastic#76481) [Security Solution][Detection Engine] Remove RuleTypeSchema in favor of Type for TypeScript (elastic#76586) [Security Solution][Exceptions] - Updates enum schema and tests (elastic#76544) Index Pattern class - remove toJSON and toString (elastic#76246) skip failing suite (elastic#76581) Split up and clarify Enterprise Search codeowners (elastic#76580) ... # Conflicts: # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processor_settings_fields.tsx # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/foreach.tsx

…oleysens/kibana into ingest-pipelines/processors-forms-k-s * 'ingest-pipelines/processors-forms-k-s' of github.com:jloleysens/kibana: (216 commits) [Ingest Manager] Split Registry errors into Connection & Response (elastic#76558) [Security Solution] add an excess validation instead of the exact match (elastic#76472) Introduce TS incremental builds & move src/test_utils to TS project (elastic#76082) fix bad merge (elastic#76629) [Newsfeed] Ensure the version format when calling the API (elastic#76381) remove server_extensions mixin (elastic#76606) Remove legacy applications and legacy mode (elastic#75987) [Discover] Fix sidebar element focus behavior when adding / removing columns (elastic#75749) Replace FetchOptions with ISearchOptions (elastic#76538) Move streams utils to the core (elastic#76397) [Ingest Manager] Wording & linking improvements (elastic#76284) remove legacy kibana plugin (elastic#76064) [Form lib] Fix regression on field not being validated after reset to its default value. (elastic#76379) Legacy SO import: Fix bug causing multiple overrides to only show the last confirm modal (elastic#76482) [APM] Service maps layout enhancements (elastic#76481) [Security Solution][Detection Engine] Remove RuleTypeSchema in favor of Type for TypeScript (elastic#76586) [Security Solution][Exceptions] - Updates enum schema and tests (elastic#76544) Index Pattern class - remove toJSON and toString (elastic#76246) skip failing suite (elastic#76581) Split up and clarify Enterprise Search codeowners (elastic#76580) ...

cauemarcondes · 2020-10-14T08:25:49Z

Bugs found:

Tests ok on all browsers besides the bugs.

ogupte added 2 commits September 1, 2020 17:13

Fixes storybook anomaly score generation and better utilizes availabl…

3a8a45a

…e screen space

Closes elastic#71770 for APM service maps by replacing breadthfirst l…

4121458

…ayout with one from the cytoscape-dagre extension. Also replaces the taxi edges with cubic bezier edges. Finally, this adds the ability to drag individual nodes around the service map.

ogupte added release_note:enhancement v7.10.0 labels Sep 2, 2020

ogupte requested a review from a team as a code owner September 2, 2020 09:05

botelastic bot added the Team:APM All issues that need APM UI Team support label Sep 2, 2020

ogupte added 2 commits September 2, 2020 02:09

Removes unused code

0bfe1f1

removes commented line of code

cba22a8

sorenlouv reviewed Sep 2, 2020

View reviewed changes

sorenlouv approved these changes Sep 2, 2020

View reviewed changes

- Adds ability for scripts/notice.js to check files with the .tsx fil…

20daa20

…e extension - Adds attribution for `applyCubicBezierStyles`

ogupte requested a review from a team as a code owner September 2, 2020 21:38

spalger approved these changes Sep 2, 2020

View reviewed changes

Refine comment text and MIT license url

39420aa

ogupte merged commit d3416c0 into elastic:master Sep 3, 2020

ogupte mentioned this pull request Sep 3, 2020

[7.x] [APM] Service maps layout enhancements (#76481) #76594

Merged

sorenlouv added the apm:test-plan-7.10.0 label Oct 7, 2020

cauemarcondes self-assigned this Oct 13, 2020

cauemarcondes added the apm:test-plan-done Pull request that was successfully tested during the test plan label Oct 14, 2020

bmorelli25 mentioned this pull request Oct 15, 2020

[docs] 7.10 APM docs updates #80605

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[APM] Service maps layout enhancements #76481

[APM] Service maps layout enhancements #76481

ogupte commented Sep 2, 2020 •

edited

Loading

elasticmachine commented Sep 2, 2020

sorenlouv Sep 2, 2020

ogupte Sep 2, 2020

sorenlouv Sep 2, 2020

sorenlouv Sep 2, 2020

ogupte Sep 2, 2020

sorenlouv Sep 2, 2020

ogupte Sep 2, 2020

sorenlouv Sep 2, 2020

sorenlouv left a comment

sorenlouv commented Sep 2, 2020

formgeist commented Sep 2, 2020

spalger left a comment

spalger Sep 2, 2020

kibanamachine commented Sep 3, 2020

cauemarcondes commented Oct 14, 2020

[APM] Service maps layout enhancements #76481

[APM] Service maps layout enhancements #76481

Conversation

ogupte commented Sep 2, 2020 • edited Loading

elasticmachine commented Sep 2, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sorenlouv left a comment

Choose a reason for hiding this comment

sorenlouv commented Sep 2, 2020

formgeist commented Sep 2, 2020

spalger left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kibanamachine commented Sep 3, 2020

💚 Build Succeeded

Build metrics

@kbn/optimizer bundle module count

async chunks size

distributable file count

History

cauemarcondes commented Oct 14, 2020

ogupte commented Sep 2, 2020 •

edited

Loading