[Dashboard Navigation] Drilldown on link click #164196

Heenawter · 2023-08-17T15:36:16Z

Summary

This PR adds functionality to the link embeddable so that

dashboard to dashboard links will now navigate between dashboards, taking the context (filters, time range, queries, etc.) as the user navigates (assuming the appropriate settings are applied) and
URL links will now navigate to internal and/or external URLs as expected

Dashboard Links

Screen.Recording.2023-08-28.at.11.15.37.AM.mov

Note
In the above video, all links were configured to include queries, filter pills, and the selected time range in the passed context. It is possible to disable these settings, if necessary.

Link settings

We want dashboard drilldowns and dashboard links to work more-or-less the same way, which means that they should have identical settings - therefore, in order to share the same settings between dashboard drilldowns + dashboard links, I created the DashboardDrilldownOptionsComponent:

I put this new component into presentation_util so that it could easily be shared and used in the respective editing experiences.

Testing

When testing, special attention should be paid to the different link settings - ensure that all settings are respected.
Ensure that ctrl + click, shift + click, and meta + click work as expected, regardless of whether the Open in new tab setting is true or false - specifically, we should use the URL to pass the filters/queries/time range whenever a dashboard is being opened in a new tab.

URL Links

Screen.Recording.2023-08-28.at.11.33.49.AM.mov

Link settings

Similar to the dashboard links, we want the

Testing

When testing, it is important to ensure that the new URL validation works as expected. For this, there are technically two types of invalid links:

links that do not fit the expected format; for example, we do not accept any links that start with something other than http, https, or mailto.
links that are disallowed due to the externalUrl.policy

Testing number one should be simple; however, in order to test the second type of invalid links, you need to modify your kibana.dev.yml to include something like the following:

externalUrl.policy:
  - allow: false
    host: danger.example.com
  - allow: true
    host: example.com
    protocol: https

Refer to http://www.elastic.co/guide/en/kibana/current/url-drilldown-settings-kb.html for more information.

Also, much like with the dashboard links, it is important to ensure that ctrl + click, shift + click, and meta + click work as expected, regardless of whether the Open in new tab setting is true or false.

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
~~Unit or functional tests were updated or added to match the most common scenarios~~ Will be addressed in [Dashboard Navigation] Add functional + unit tests #161287
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

Note
How Chrome and Firefox handle modified onClick events varies significantly and, through this testing, I found a bug where shift + clicking was previously not opening the links in a new tab in Firefox specifically - this is why I had to use the default to href behaviour whenever possible. Something to keep in mind when testing.

For maintainers

This was checked for breaking API changes and was labeled appropriately

Heenawter · 2023-08-23T18:38:15Z

/oblt-deploy

elasticmachine · 2023-08-30T19:39:43Z

Pinging @elastic/kibana-presentation (Team:Presentation)

Heenawter · 2023-08-30T23:25:34Z

...ns/navigation_embeddable/public/components/editor/navigation_embeddable_link_destination.tsx

+          }}
+          initialSelection={externalLinkDestination}
+          onDestinationPicked={(url) => setDestination(url, url)}
+          setDestinationError={setDestinationError}


Only external links currently have validation - you cannot select an invalid dashboard and, even if you are editing an existing link where the selected destination dashboard was deleted, we simply treat this as "no selection" rather than "invalid selection" . After all, the panel editor already tells the user that the dashboard was deleted - IMO, we don't need to duplicate this information in the link editor:

…-ref HEAD~1..HEAD --fix'

Heenawter · 2023-08-30T23:31:56Z

...ns/navigation_embeddable/public/components/editor/navigation_embeddable_link_destination.tsx

+import { NavEmbeddableStrings } from '../navigation_embeddable_strings';
+import { EuiFormRow } from '@elastic/eui';
+
+export const NavigationEmbeddableLinkDestination = ({


I separated this out into a new component for two reasons:

It cleans up the logic of NavigationEmbeddableLinkEditor a little bit

It makes it easier to remember selections even when the link types change, like so:

Before After

I opted to do this because the link options remembered their previous selections (which I figured was important, since we don't want users to accidentally lose their settings), so it felt inconsistent that the destination wouldn't be remembered.

…rovided

Heenawter · 2023-08-31T15:42:12Z

src/plugins/navigation_embeddable/public/components/dashboard_link/dashboard_link_component.tsx

+      tooltipTitle: Boolean(dashboardDescription) ? linkLabel : undefined,
+      tooltipMessage: dashboardDescription || linkLabel,
    };
-  }, [error, dashboardTitle, dashboardDescription]);
+  }, [error, linkLabel, dashboardDescription]);


Figured I might as well quickly make this change per the offline tooltip description, since it's such a tiny change - previously, we were always showing the saved object title in the tooltip; now, we default to the custom label, if provided. This means that the link label and the tooltip will always display the same value

src/plugins/navigation_embeddable/common/content_management/v1/cm_services.ts

nickpeihl · 2023-08-31T15:29:27Z

...s/navigation_embeddable/public/components/external_link/external_link_destination_picker.tsx

+        if (allowedUrl === null) {
+          throw new DisallowedUrlError();
+        }
+        const validatedUrl = urlDrilldownValidateUrl(url);


Are these the only protocols we will support (http, https, mailto)? I may need to update my content management schemas accordingly. https://github.com/elastic/kibana/pull/164330/files#diff-e2bc370404a35f02472741df329913c28531da5e3ef140b2067bb4ba69ccc465R40

...act_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.tsx

…bstract_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.tsx Co-authored-by: Nick Peihl <[email protected]>

nickpeihl · 2023-08-31T20:01:02Z

src/plugins/navigation_embeddable/public/components/external_link/external_link_component.tsx

+  const destination = useMemo(() => {
+    return linkOptions.encodeUrl ? encodeURI(link.destination) : link.destination;
+  }, [linkOptions, link.destination]);
+
  return (
    <EuiListGroupItem


I think we still need to validate the URL again here against the externalUrl policy. It is possible for someone to create an external link to https://example.com. But later the Kibana admin decides to set an external policy against that domain. In that case, the link should probably be disabled with a warning about the external link policy.

Ahhh, very good point 👍 Will do

Done in 3ca397b!

Screen.Recording.2023-08-31.at.4.12.38.PM.mov

andreadelrio

🚀 LGTM, great job!

…o nav-link-drilldown_2023-08-16

…-fix'

…kibana into nav-link-drilldown_2023-08-16

…-fix'

nickpeihl

lgtm! code review and tested dashboard and external links with all options.

src/plugins/navigation_embeddable/public/components/dashboard_link/dashboard_link_component.tsx

…link/dashboard_link_component.tsx Always show tooltips on Dashboard Links

kibana-ci · 2023-09-05T19:06:14Z

💔 Build Failed

Failed CI Steps

Test Failures

[job] [logs] x-pack/test/alerting_api_integration/security_and_spaces/group2/config_non_dedicated_task_runner.ts / alerting api integration security and spaces enabled - Group 2 Connectors CasesWebhook CasesWebhook - Action Creation 400s for all required fields when missing should respond with a 400 Bad Request when creating a casesWebhook action with no createIncidentUrl
[job] [logs] Jest Integration Tests #1 / checking migration metadata changes on all registered SO types detecting migration related changes in registered types
[job] [logs] FTR Configs #37 / Controls Range Slider Control create and edit edits title and size of an existing control and retains existing range selection
[job] [logs] FTR Configs #37 / Controls Range Slider Control create and edit edits title and size of an existing control and retains existing range selection
[job] [logs] FTR Configs #44 / Options list control Dashboard options list creation and editing Options List Control creation and editing experience renames an existing control and retains selection
[job] [logs] FTR Configs #44 / Options list control Dashboard options list creation and editing Options List Control creation and editing experience renames an existing control and retains selection
[job] [logs] Jest Integration Tests #5 / SO type registrations does not remove types from registrations without updating excludeOnUpgradeQuery

Metrics [docs]

‼️ ERROR: no builds found for mergeBase sha [26cc51e]

History

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

cc @Heenawter

Heenawter added Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas loe:large Large Level of Effort impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. labels Aug 17, 2023

Heenawter self-assigned this Aug 17, 2023

Heenawter force-pushed the nav-link-drilldown_2023-08-16 branch from c1242f1 to ff2f699 Compare August 17, 2023 15:37

Make dashboard drilldown options a separate component

c367b7b

Heenawter force-pushed the nav-link-drilldown_2023-08-16 branch from ff2f699 to c367b7b Compare August 17, 2023 15:39

Heenawter added 2 commits August 17, 2023 10:11

Fix linting

461feb9

Rename the component

f7e8309

Heenawter force-pushed the nav-link-drilldown_2023-08-16 branch from a134f3d to f7e8309 Compare August 17, 2023 17:42

Add URL options toggles

ec4b98e

Heenawter force-pushed the nav-link-drilldown_2023-08-16 branch from cb1f664 to ec4b98e Compare August 17, 2023 19:57

Add options to links

3953b4f

Heenawter force-pushed the nav-link-drilldown_2023-08-16 branch from b9c8302 to 3953b4f Compare August 17, 2023 21:35

First draft of dashboard-to-dashboard links working

c8d4ab5

Heenawter force-pushed the nav-link-drilldown_2023-08-16 branch 6 times, most recently from 5f5e21f to 4c862e4 Compare August 21, 2023 21:27

Fix linting

4712e57

Heenawter force-pushed the nav-link-drilldown_2023-08-16 branch from 4c862e4 to 4712e57 Compare August 21, 2023 21:56

Another attempt at fixing CI

8e6f266

Heenawter added the ci:cloud-deploy Create or update a Cloud deployment label Aug 22, 2023

Heenawter added 2 commits August 22, 2023 17:15

First draft of external URLs working

fd57408

Clean up + fix memory leak

185f507

Heenawter force-pushed the nav-link-drilldown_2023-08-16 branch from ca0ba7c to 185f507 Compare August 23, 2023 15:46

Heenawter removed the ci:cloud-deploy Create or update a Cloud deployment label Aug 23, 2023

Heenawter requested review from a team as code owners August 30, 2023 19:39

Heenawter requested review from nickpeihl and andreadelrio August 30, 2023 19:47

Fix bug where error state stuck around on link type change

8f3458a

botelastic bot added the Feature:Drilldowns Embeddable panel Drilldowns label Aug 30, 2023

Remember destinations on link type change

c13723c

Heenawter commented Aug 30, 2023

View reviewed changes

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

2f58c31

…-ref HEAD~1..HEAD --fix'

Heenawter commented Aug 30, 2023

View reviewed changes

Switch tooltip to show custom label rather than dashboard title, if p…

6edfa42

…rovided

Heenawter commented Aug 31, 2023

View reviewed changes

nickpeihl reviewed Aug 31, 2023

View reviewed changes

Heenawter and others added 3 commits August 31, 2023 11:24

Update x-pack/plugins/dashboard_enhanced/public/services/drilldowns/a…

b07e180

…bstract_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.tsx Co-authored-by: Nick Peihl <[email protected]>

Update x-pack/plugins/dashboard_enhanced/public/services/drilldowns/a…

a7d719a

…bstract_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.tsx Co-authored-by: Nick Peihl <[email protected]>

Fix color prop to display correctly in Safari

7f28cca

nickpeihl reviewed Aug 31, 2023

View reviewed changes

andreadelrio approved these changes Aug 31, 2023

View reviewed changes

Heenawter and others added 5 commits August 31, 2023 14:34

Merge branch 'navigation-embeddable' of github.com:elastic/kibana int…

eb2e41d

…o nav-link-drilldown_2023-08-16

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

0d7df01

…-fix'

Fix URL schema + add validation at component level

3ca397b

Merge branch 'nav-link-drilldown_2023-08-16' of github.com:heenawter/…

014d9e4

…kibana into nav-link-drilldown_2023-08-16

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

0ba8b89

…-fix'

nickpeihl approved these changes Sep 5, 2023

View reviewed changes

src/plugins/navigation_embeddable/public/components/dashboard_link/dashboard_link_component.tsx Outdated Show resolved Hide resolved

Update src/plugins/navigation_embeddable/public/components/dashboard_…

6ebc2b1

…link/dashboard_link_component.tsx Always show tooltips on Dashboard Links

nickpeihl merged commit 84b7b17 into elastic:navigation-embeddable Sep 5, 2023
1 check passed

nickpeihl mentioned this pull request Sep 12, 2023

[Dashboard Navigation] Drill Down on Link Click #154381

Closed

Heenawter deleted the nav-link-drilldown_2023-08-16 branch September 17, 2023 19:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Dashboard Navigation] Drilldown on link click #164196

[Dashboard Navigation] Drilldown on link click #164196

Heenawter commented Aug 17, 2023 •

edited

Loading

Heenawter commented Aug 23, 2023

elasticmachine commented Aug 30, 2023

Heenawter Aug 30, 2023

Heenawter Aug 30, 2023 •

edited

Loading

Heenawter Aug 31, 2023 •

edited

Loading

nickpeihl Aug 31, 2023 •

edited

Loading

nickpeihl Aug 31, 2023

Heenawter Aug 31, 2023

Heenawter Aug 31, 2023 •

edited

Loading

andreadelrio left a comment

nickpeihl left a comment

kibana-ci commented Sep 5, 2023 •

edited

Loading

[Dashboard Navigation] Drilldown on link click #164196

[Dashboard Navigation] Drilldown on link click #164196

Conversation

Heenawter commented Aug 17, 2023 • edited Loading

Summary

Dashboard Links

Link settings

Testing

URL Links

Link settings

Testing

Checklist

For maintainers

Heenawter commented Aug 23, 2023

elasticmachine commented Aug 30, 2023

Heenawter Aug 30, 2023

Choose a reason for hiding this comment

Heenawter Aug 30, 2023 • edited Loading

Choose a reason for hiding this comment

Heenawter Aug 31, 2023 • edited Loading

Choose a reason for hiding this comment

nickpeihl Aug 31, 2023 • edited Loading

Choose a reason for hiding this comment

nickpeihl Aug 31, 2023

Choose a reason for hiding this comment

Heenawter Aug 31, 2023

Choose a reason for hiding this comment

Heenawter Aug 31, 2023 • edited Loading

Choose a reason for hiding this comment

andreadelrio left a comment

Choose a reason for hiding this comment

nickpeihl left a comment

Choose a reason for hiding this comment

kibana-ci commented Sep 5, 2023 • edited Loading

💔 Build Failed

Failed CI Steps

Test Failures

Metrics [docs]

History

Heenawter commented Aug 17, 2023 •

edited

Loading

Heenawter Aug 30, 2023 •

edited

Loading

Heenawter Aug 31, 2023 •

edited

Loading

nickpeihl Aug 31, 2023 •

edited

Loading

Heenawter Aug 31, 2023 •

edited

Loading

kibana-ci commented Sep 5, 2023 •

edited

Loading